claude-simple 0.2.5 → 0.2.7

package/public/shell/layout.js

@@ -8,7 +8,7 @@ import {
 } 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,6 +196,10 @@ 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;
@@ -194,6 +223,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

@@ -430,7 +430,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 +440,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>`);
+    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;
     }
-    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>`);
-    }
-    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>`;
+  }
+}

package/public/shell/session-nav.js

@@ -10,6 +10,7 @@ import { getLastSessionContext, setLastSessionContext } from './session-context.
 import {
   connectWS, clearMessages, appendMsg, appendSystemMsg, renderToolUse,
   appendHistoryTokenBar, appendContextBar, flushToolBatch, coerceTs,
+  stashComposerDraft, restoreComposerDraft, discardComposerAttachments, parkQueuedMessages, detachProcessingForSessionSwitch,
 } from '../chat.js';
 import { setHash, syncHash } from '../router.js';
 import { refreshModelSelect } from './session-list.js';
@@ -34,6 +35,10 @@ function syncMachinePathHints(machineId) {
 }
 
 export function openProject(project) {
+  stashComposerDraft();
+  parkQueuedMessages();
+  discardComposerAttachments();
+  detachProcessingForSessionSwitch();
   const path = project?.path || '';
   batch(() => {
     currentProject.value = project;
@@ -56,11 +61,16 @@ export function openProject(project) {
   pv.classList.remove('hidden');
   pv.style.display = 'flex';
   clearMessages();
+  restoreComposerDraft({ sessionId: null });
   connectWS();
   switchTab('chat');
 }
 
 export function goHome() {
+  stashComposerDraft();
+  parkQueuedMessages();
+  discardComposerAttachments();
+  detachProcessingForSessionSwitch();
   currentProject.value = null;
   sessionFilter.value = null;
   filesRoot.value = '';
@@ -68,6 +78,7 @@ export function goHome() {
   filesPath.value = '';
   viewingFile.value = null;
   ctx.sessionId = null;
+  restoreComposerDraft({ sessionId: null });
   syncMachinePathHints(null);
 
   // Leaving session restore mode — calendar is allowed again
@@ -116,6 +127,12 @@ export async function resumeSession(sid, cwd, configDir, agent, machineId, opts
   const resolvedCwd = cwd || fromList?.cwd || fromLast?.cwd || null;
   const resolvedConfig = configDir || fromList?.configDir || fromLast?.configDir || null;
 
+  // Capture before changing ctx, then restore only after the new identity is set.
+  stashComposerDraft();
+  parkQueuedMessages();
+  discardComposerAttachments();
+  detachProcessingForSessionSwitch();
+
   if (resolvedMachine && resolvedMachine !== ctx.machineId) {
     setSelectedMachine(resolvedMachine);
     try { ctx.ws?.close(); } catch {}
@@ -127,6 +144,7 @@ export async function resumeSession(sid, cwd, configDir, agent, machineId, opts
   ctx.agent = resolvedAgent;
   setAgent(resolvedAgent);
   refreshModelSelect();
+  restoreComposerDraft({ sessionId: sid, agent: resolvedAgent, machineId: resolvedMachine });
 
   // Default path = session cwd on the target machine (set immediately; no await)
   let edgeCwd = resolvedCwd;

package/public/shell/templates.js

@@ -39,10 +39,10 @@ export const AppShell = (opts = {}) => {
     : 'hidden flex-col flex-1 overflow-hidden min-h-0';
   const projectStyle = restore ? 'display:flex;flex-direction:column;flex:1;min-height:0' : '';
   return `
-  <div id="sidebar-overlay" class="hidden fixed inset-0 bg-black/50 z-[9]"></div>
+  <div id="sidebar-overlay" class="hidden fixed inset-0 bg-black/50 z-[9]" aria-hidden="true"></div>
   <div id="app" class="${appHidden} flex-col flex-1 overflow-hidden" style="${appStyle}">
     <div id="topbar" class="flex items-center gap-2 px-3 bg-base-200 border-b border-base-300 flex-shrink-0" style="height:44px">
-      <button id="hamburger" class="btn btn-ghost btn-sm px-2 text-lg">☰</button>
+      <button id="hamburger" class="btn btn-ghost btn-sm px-2 text-lg" aria-label="打开项目与会话侧栏" aria-controls="sidebar" aria-expanded="false">☰</button>
       <span id="btn-home" class="font-semibold text-sm hidden sm:inline cursor-pointer hover:text-primary transition-colors select-none">🤖 Agent UI</span>
       <span class="text-base-300 hidden sm:inline">/</span>
       <div id="machine-menu-wrap" class="relative hidden flex-shrink-0">
@@ -107,7 +107,7 @@ export const AppShell = (opts = {}) => {
       </div>
     </div>
     <div class="flex flex-1 overflow-hidden relative">
-      <div id="sidebar" class="bg-base-200 border-r border-base-300 flex flex-col flex-shrink-0 overflow-hidden" style="width:280px;min-width:180px;max-width:520px">
+      <aside id="sidebar" class="bg-base-200 border-r border-base-300 flex flex-col flex-shrink-0 overflow-hidden" style="width:280px;min-width:180px;max-width:520px" aria-label="项目与会话" tabindex="-1">
         <div class="flex items-center justify-between px-3 py-2 border-b border-base-300 flex-shrink-0">
           <span class="text-xs uppercase tracking-wider text-base-content/50 font-medium">Projects</span>
           <div class="flex items-center gap-1">
@@ -143,10 +143,16 @@ export const AppShell = (opts = {}) => {
           <div id="search-status" class="hidden text-[10px] text-base-content/40 px-0.5"></div>
         </div>
         <div id="session-list" class="overflow-y-auto flex-1"></div>
-      </div>
+        <div class="sidebar-mobile-actions hidden border-t border-base-300 px-2 py-2 flex-shrink-0">
+          <button type="button" class="btn btn-primary btn-sm flex-1" data-sidebar-action="new">＋ 新会话</button>
+          <button type="button" class="btn btn-ghost btn-sm px-2" data-sidebar-action="theme" aria-label="切换深色或浅色主题">🌙</button>
+          <button type="button" class="btn btn-ghost btn-sm px-2" data-sidebar-action="settings" aria-label="设置">⚙️</button>
+          <button type="button" class="btn btn-ghost btn-sm px-2 text-error" data-sidebar-action="logout" aria-label="退出登录">⇥</button>
+        </div>
+      </aside>
       <div class="flex flex-col flex-shrink-0 relative" style="width:12px">
         <div id="sidebar-resize" class="absolute inset-0 bg-transparent hover:bg-primary/30 transition-colors cursor-col-resize"></div>
-        <button id="sidebar-toggle" title="Toggle sidebar"
+        <button id="sidebar-toggle" title="收起侧栏" aria-label="收起侧栏" aria-controls="sidebar" aria-expanded="true"
           class="absolute z-10 flex items-center justify-center w-5 h-8 bg-base-200 border border-base-300 rounded-r-md text-[10px] text-base-content/40 hover:text-base-content cursor-pointer"
           style="left:0;top:50%;transform:translateY(-50%)">◀</button>
       </div>
@@ -278,7 +284,7 @@ export const AppShell = (opts = {}) => {
                   <option value="acceptEdits">acceptEdits</option>
                   <option value="auto">auto</option>
                   <option value="plan">plan</option>
-                  <option value="bypassPermissions">⚠ bypass all</option>
+                  <option value="bypassPermissions" selected>⚠ bypass all</option>
                 </select>
                 <select id="sel-density" class="select select-xs select-bordered text-xs" title="Chat density — how tools are shown">
                   <option value="clean">density: clean</option>
@@ -332,9 +338,23 @@ export const AppShell = (opts = {}) => {
           <div id="tab-shell" class="hidden flex-col flex-1 overflow-hidden bg-[#0d1117]">
             <div class="flex items-center gap-2 px-3 py-1.5 border-b border-base-300 bg-base-200 flex-shrink-0">
               <span class="text-xs text-base-content/40 font-mono flex-1" id="term-cwd"></span>
+              <button id="term-keyboard" class="btn btn-ghost btn-xs text-xs text-base-content/60" type="button">Keyboard</button>
               <button id="term-reconnect" class="btn btn-ghost btn-xs text-xs text-base-content/40">Reconnect</button>
             </div>
+            <div id="term-mobile-keys" class="hidden items-center gap-1 px-2 py-1 border-b border-slate-700 bg-[#161b22] flex-shrink-0" aria-label="Terminal shortcuts">
+              <button class="term-key" type="button" data-term-key="ctrl-c">Ctrl+C</button>
+              <button class="term-key" type="button" data-term-key="escape">Esc</button>
+              <button class="term-key" type="button" data-term-key="tab">Tab</button>
+              <button class="term-key" type="button" data-term-key="up">↑</button>
+              <button class="term-key" type="button" data-term-key="down">↓</button>
+              <button class="term-key" type="button" data-term-key="left">←</button>
+              <button class="term-key" type="button" data-term-key="right">→</button>
+            </div>
             <div id="terminal-container" class="flex-1 p-2 overflow-hidden"></div>
+            <form id="term-mobile-composer" class="hidden items-center gap-2 px-2 py-2 border-t border-slate-700 bg-[#161b22] flex-shrink-0">
+              <input id="term-mobile-input" class="term-mobile-input" type="text" placeholder="输入命令…" autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false" inputmode="text" enterkeyhint="send" aria-label="Terminal command">
+              <button class="term-mobile-send" type="submit">发送</button>
+            </form>
           </div>
           <div id="tab-git" class="hidden flex-col flex-1 overflow-hidden">
             <div class="flex items-center gap-2 px-3 py-1.5 border-b border-base-300 flex-shrink-0 bg-base-200">
@@ -348,7 +368,7 @@ export const AppShell = (opts = {}) => {
           </div>
           <div id="tab-memory" class="hidden flex-col flex-1 overflow-hidden">
             <div class="flex items-center gap-2 px-3 py-1.5 border-b border-base-300 flex-shrink-0 bg-base-200">
-              <span class="text-xs text-base-content/40 flex-shrink-0">🧠 Project memory</span>
+              <span class="text-xs text-base-content/40 flex-shrink-0">🧠 Agent memory</span>
               <span class="flex-1"></span>
               <button id="memory-refresh" class="btn btn-ghost btn-xs text-xs">Refresh</button>
             </div>

package/public/shell.js

@@ -28,11 +28,12 @@ import { AuthScreen, AppShell } from './shell/templates.js';
 import {
   updateDashboard, shiftCalMonth, setSelectedCalDate, getDashboardSessions,
   openRecentMenu, toggleRecentMenu, closeRecentMenu, positionRecentMenu,
+  dismissRecentSession,
 } from './shell/dashboard.js';
 import {
   loadAllSessions, loadWorkspaces, renderSessionList, syncSidebarChrome,
   refreshModelSelect, refreshEffortSelect, promptCustomModel,
-  scheduleActivitySearch, runActivitySearch, loadMemoryTab,
+  scheduleActivitySearch, runActivitySearch, loadMemoryTab, openMemoryFile,
 } from './shell/session-list.js';
 import { openProject, goHome, resumeSession, switchTab } from './shell/session-nav.js';
 import { showApp } from './shell/boot.js';
@@ -336,6 +337,13 @@ export function initShell(opts = {}) {
   delegate.on('keydown', '#auth-username, #auth-password', e => { if (e.key === 'Enter') submitAuth(); });
   delegate.on('click', '#hamburger', () => $('sidebar').classList.contains('open') ? closeSidebar() : openSidebar());
   delegate.on('click', '#sidebar-overlay', closeSidebar);
+  document.addEventListener('keydown', e => {
+    if (e.key !== 'Escape') return;
+    if (window.innerWidth <= 640 && $('sidebar')?.classList.contains('open')) {
+      e.preventDefault();
+      closeSidebar();
+    }
+  });
 
   delegate.on('input', '#session-search', (_, el) => {
     sessionSearch.value = el.value;
@@ -383,6 +391,19 @@ export function initShell(opts = {}) {
   delegate.on('click', '#btn-meta-agent', () => toggleMetaAgent());
   delegate.on('click', '#btn-meta-agent-welcome', () => openMetaAgent('chat'));
   delegate.on('click', '#btn-theme', toggleTheme);
+  delegate.on('click', '[data-sidebar-action]', (_, el) => {
+    const action = el.dataset.sidebarAction;
+    if (action === 'new') openNewSessionModal();
+    if (action === 'theme') toggleTheme();
+    if (action === 'settings') openSettings();
+    if (action === 'logout') {
+      ctx.token = null;
+      localStorage.removeItem('token');
+      setSelectedMachine(null);
+      hubMachineReady.value = false;
+      location.reload();
+    }
+  });
 
   delegate.on('click', '#btn-cal-prev', () => {
     shiftCalMonth(-1);
@@ -462,6 +483,7 @@ export function initShell(opts = {}) {
   });
 
   delegate.on('click', '#memory-refresh', loadMemoryTab);
+  delegate.on('click', '[data-memory-file]', (el) => openMemoryFile(el.dataset.memoryFile, el.dataset.memoryAgent));
   delegate.on('click', '[data-tab]', (e, el) => switchTab(el.dataset.tab));
 
   const applyRoot = async (inputId, sig) => {
@@ -638,6 +660,15 @@ export function initShell(opts = {}) {
     closeRecentMenu();
     $('btn-recent-sessions')?.setAttribute('aria-expanded', 'false');
   });
+  delegate.on('click', '[data-dismiss-recent-session]', (e, el) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dismissRecentSession({
+      sessionId: el.dataset.dismissRecentSession,
+      agent: el.dataset.dismissRecentAgent || 'claude',
+      machineId: el.dataset.dismissRecentMachine || null,
+    });
+  });
 
   delegate.on('click', '#btn-edit-project-notes, #project-goal-text, #project-notes-text', () => {
     renderProjectNotesEditMode();

package/public/state.js

@@ -18,11 +18,9 @@ export const wsStatus       = signal('idle');
 export const currentAgent      = signal(localStorage.getItem('agent') || 'claude'); // 'claude'|'codex'|'grok'
 export const currentModel      = signal(localStorage.getItem('model') || 'claude-sonnet-4-5');
 export const currentEffort     = signal('');
-// Codex is intentionally trusted by default; users can still choose another
-// mode from the expanded composer options before starting a turn.
-export const currentPermission = signal(
-  currentAgent.peek() === 'codex' ? 'bypassPermissions' : 'default'
-); // 'default'|'acceptEdits'|'bypassPermissions'|'plan'|'auto'
+// All local agents are trusted by default; users can still choose another mode
+// from the expanded composer options before starting a turn.
+export const currentPermission = signal('bypassPermissions'); // 'default'|'acceptEdits'|'bypassPermissions'|'plan'|'auto'
 export const filesRoot      = signal(''); // custom root override for Files tab
 export const gitRoot        = signal(''); // custom root override for Git tab
 export const agentsMeta     = signal(null); // from /api/agents (dynamic model lists)
@@ -251,7 +249,7 @@ export function setAgent(agent) {
   const a = (agent || 'claude').toLowerCase();
   currentAgent.value = a;
   localStorage.setItem('agent', a);
-  currentPermission.value = a === 'codex' ? 'bypassPermissions' : 'default';
+  currentPermission.value = 'bypassPermissions';
   const permissionSelect = typeof document === 'undefined' ? null : document.getElementById('sel-permission');
   if (permissionSelect) permissionSelect.value = currentPermission.peek();
   const models = getModelsForAgent(a);

package/public/style.css

@@ -6,21 +6,25 @@
     top: calc(44px + env(safe-area-inset-top, 0px));
     left: 0;
     bottom: 0;
-    transform: translateX(-100%); z-index: 10;
-    transition: transform .2s ease;
+    width: min(86vw, 22rem) !important;
+    min-width: min(86vw, 22rem) !important;
+    max-width: min(86vw, 22rem) !important;
+    transform: translateX(-103%); z-index: 10;
+    transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease;
     padding-bottom: env(safe-area-inset-bottom, 0px);
+    overscroll-behavior: contain;
   }
   #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 { padding: 0 !important; }
-  .composer-surface { min-height: 0; border-radius: 1.35rem; }
+  .composer-surface { min-height: 0; border-radius: 0.8rem; }
   #chat-input.chat-input,
   #chat-input {
     min-height: 32px !important;
     max-height: 72px !important;
     padding: 0 !important;
-    border-radius: 1.15rem 1.15rem 0 0;
+    border-radius: 0.65rem 0.65rem 0 0;
     /* 16px prevents iOS Safari auto-zoom on focus */
     font-size: 16px !important;
     line-height: 1.4 !important;
@@ -76,6 +80,25 @@
   #sidebar-toggle {
     display: none !important;
   }
+  #sidebar .input,
+  #sidebar .select {
+    min-height: 2.25rem;
+    font-size: 16px !important; /* prevents Safari focus zoom */
+  }
+  #sidebar #time-range { font-size: 12px !important; }
+  #sidebar #session-list {
+    padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
+    -webkit-overflow-scrolling: touch;
+  }
+  #sidebar [data-view],
+  #sidebar .agent-pill {
+    min-height: 28px;
+  }
+  #sidebar .sidebar-mobile-actions {
+    display: flex;
+    gap: 0.35rem;
+    padding-bottom: max(0.5rem, env(safe-area-inset-bottom, 0px));
+  }
   .md {
     font-size: 0.9375rem;
     line-height: 1.6;
@@ -101,6 +124,16 @@
   }
 }
 
+@media (min-width: 641px) {
+  #sidebar .sidebar-mobile-actions { display: none !important; }
+  #sidebar {
+    transition: width .18s ease, min-width .18s ease;
+  }
+  #sidebar.desktop-collapsed {
+    border-right-color: transparent;
+  }
+}
+
 /* File row actions: hover-reveal on desktop only */
 @media (min-width: 641px) {
   .file-row-action {
@@ -962,7 +995,7 @@ html.pwa-standalone .ma-panel {
   flex-direction: column;
   overflow: hidden;
   border: 1px solid color-mix(in oklch, var(--color-base-content) 16%, transparent);
-  border-radius: 1.35rem;
+  border-radius: 0.875rem;
   background: color-mix(in oklch, var(--color-base-100) 78%, var(--color-base-200));
   box-shadow: 0 8px 24px color-mix(in oklch, black 12%, transparent), inset 0 1px 0 color-mix(in oklch, white 6%, transparent);
   transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
@@ -1064,7 +1097,7 @@ html.pwa-standalone .ma-panel {
   max-height: 72px;
   padding: 0;
   border: 0;
-  border-radius: 1.25rem 1.25rem 0 0;
+  border-radius: 0.75rem 0.75rem 0 0;
   background: transparent;
   color: var(--color-base-content);
   outline: none !important;
@@ -1297,6 +1330,52 @@ html.pwa-standalone .ma-panel {
 /* Shell tab terminal — keep dark intentionally (terminal aesthetic) */
 #tab-shell { background: #0d1117; }
 #term-output { color: #c9d1d9; }
+#term-keyboard { display: none; }
+
+/* xterm parks its input off-screen, which is unreliable for mobile IMEs.
+ * Phones use the visible native command composer below the terminal instead. */
+@media (max-width: 640px), (hover: none) and (pointer: coarse) {
+  #term-keyboard { display: inline-flex; }
+  #term-mobile-keys { display: flex !important; }
+  #term-mobile-composer { display: flex !important; }
+  #terminal-container { touch-action: manipulation; }
+  .term-key {
+    min-width: 38px;
+    min-height: 32px;
+    padding: 3px 7px;
+    border: 1px solid #30363d;
+    border-radius: 6px;
+    color: #c9d1d9;
+    background: #21262d;
+    font: 600 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
+    -webkit-tap-highlight-color: transparent;
+  }
+  .term-key:active { background: #30363d; }
+  .term-mobile-input {
+    flex: 1;
+    min-width: 0;
+    height: 38px;
+    padding: 0 10px;
+    border: 1px solid #30363d;
+    border-radius: 7px;
+    color: #f0f6fc;
+    background: #0d1117;
+    font: 16px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
+    outline: none;
+  }
+  .term-mobile-input:focus { border-color: #58a6ff; }
+  .term-mobile-send {
+    height: 38px;
+    padding: 0 12px;
+    border: 0;
+    border-radius: 7px;
+    color: #fff;
+    background: #1f6feb;
+    font-size: 14px;
+    font-weight: 600;
+  }
+  .term-mobile-send:active { background: #388bfd; }
+}
 
 /* ── Meta Agent panel (DaisyUI 5: use --color-* full values, solid surfaces) ── */
 .meta-agent-panel {
@@ -1343,6 +1422,21 @@ html.pwa-standalone .ma-panel {
   background: color-mix(in oklch, var(--color-primary) 12%, var(--color-base-200));
 }
 .ma-hist-open { cursor: pointer; }
+.ma-note-item {
+  width: 100%;
+  border: 1px solid var(--color-base-300);
+  border-radius: 10px;
+  padding: 8px 10px;
+  background: var(--color-base-200);
+  transition: border-color .12s, background .12s;
+}
+.ma-note-item:hover {
+  border-color: color-mix(in oklch, var(--color-primary) 40%, var(--color-base-300));
+}
+.ma-note-item.active {
+  border-color: color-mix(in oklch, var(--color-primary) 55%, var(--color-base-300));
+  background: color-mix(in oklch, var(--color-primary) 12%, var(--color-base-200));
+}
 .line-clamp-2 {
   display: -webkit-box;
   -webkit-line-clamp: 2;

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