claude-simple 0.2.6 → 0.2.8

package/public/shell/session-nav.js

@@ -10,11 +10,12 @@ 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';
 import { renderSessionNotesBar } from './notes.js';
-import { updateDashboard, getDashboardSessions } from './dashboard.js';
+import { addRecentSession, updateDashboard, getDashboardSessions } from './dashboard.js';
 
 /** Show which edge machine Files/Git/Shell paths belong to. */
 function syncMachinePathHints(machineId) {
@@ -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,10 +127,20 @@ 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 {}
     ctx.ws = null;
+    // A recent entry can belong to another edge.  Route the session request
+    // immediately, then refresh the surrounding machine UI in the background.
+    import('./hub.js').then(({ syncTopbarMachine }) => syncTopbarMachine()).catch(() => {});
+    import('./session-list.js').then(({ loadAllSessions }) => loadAllSessions()).catch(() => {});
   }
 
   ctx.sessionId = sid;
@@ -127,6 +148,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;
@@ -161,6 +183,19 @@ export async function resumeSession(sid, cwd, configDir, agent, machineId, opts
     machineId: resolvedMachine,
     tab: targetTab,
   });
+  // Recent is a deliberate browsing history, not an automatic list of every
+  // session on the currently selected machine.  Keep the target machine in
+  // the entry so a later click can route back to the right edge.
+  addRecentSession({
+    sessionId: sid,
+    cwd: edgeCwd || resolvedCwd,
+    configDir: resolvedConfig,
+    agent: resolvedAgent,
+    machineId: resolvedMachine,
+    display: fromList?.display || fromLast?.display || '',
+    projectName: fromList?.projectName || fromLast?.projectName || '',
+    updatedAt: fromList?.updatedAt || fromLast?.updatedAt || null,
+  });
 
   const label = AGENT_LABELS[resolvedAgent] || resolvedAgent;
   const cacheKey = `${resolvedMachine || ''}:${resolvedAgent}:${sid}`;

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">
@@ -69,6 +69,13 @@ export const AppShell = (opts = {}) => {
           <span class="text-[10px] opacity-50">▾</span>
         </button>
       </div>
+      <div id="notifications-wrap" class="relative flex-shrink-0">
+        <button type="button" id="btn-notifications" class="btn btn-ghost btn-xs border border-base-300 gap-1 min-h-8 px-2"
+                title="通知" aria-haspopup="dialog" aria-expanded="false">
+          <span>🔔</span>
+          <span id="notifications-badge" class="hidden inline-flex min-w-5 h-5 px-1 items-center justify-center rounded-full bg-error text-error-content text-[10px] font-bold">0</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 topbar-actions">
@@ -93,6 +100,17 @@ export const AppShell = (opts = {}) => {
       <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 id="notifications-backdrop" class="hidden fixed inset-0 z-[55] bg-black/40" aria-hidden="true"></div>
+    <div id="notifications-menu" class="hidden fixed z-[60] w-[min(26rem,calc(100vw-1rem))] max-h-[min(30rem,75vh)] overflow-y-auto
+         rounded-lg border border-base-300 bg-base-100 shadow-xl p-2"
+         role="dialog" 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>
+        <button type="button" id="btn-notifications-read-all" class="btn btn-ghost btn-xs px-1 text-[10px]">全部已读</button>
+      </div>
+      <div id="notifications-menu-list" class="flex flex-col gap-1"></div>
+      <p id="notifications-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">
@@ -107,7 +125,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 +161,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 +302,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 +356,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 +386,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

@@ -6,7 +6,7 @@ import {
   sessionsData, workspacesData, sessionFilter, sessionSearch,
   expandedFolders, collapsedFolders, filesPath, viewingFile, filteredSessions, projectGroups,
   currentProject, currentTab, filesRoot, gitRoot,
-  currentModel, currentEffort, currentPermission, currentAgent, setAgent,
+  currentModel, currentEffort, currentPermission, currentAgent, setAgent, setCurrentModel,
   sidebarView, agentFilter, timeRange, activityHits, activityLoading,
   chatDensity, setChatDensity,
   favoritesOnly, showHiddenOnly, hubMode, hubMachineReady, selectedMachineId, setSelectedMachine,
@@ -23,16 +23,20 @@ import {
 import { syncHash } from './router.js';
 import { initSettings, openSettings } from './settings.js';
 import { openMetaAgent, toggleMetaAgent } from './agent-panel.js';
+import {
+  initNotifications, refreshNotifications, toggleNotificationsMenu, closeNotificationsMenu,
+} from './notifications.js';
 
 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';
@@ -305,6 +309,7 @@ export function initShell(opts = {}) {
 
   initSidebarResize();
   initSidebarToggle();
+  initNotifications({ openSession: resumeSession });
 
   let sessionsChangedTimer = null;
   document.addEventListener('sessions-changed', () => {
@@ -336,6 +341,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 +395,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 +487,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) => {
@@ -497,8 +523,7 @@ export function initShell(opts = {}) {
     if (prev !== next) {
       ctx.sessionId = null;
       setAgent(next);
-      currentModel.value = getDefaultModel(next) || currentModel.peek();
-      localStorage.setItem('model', currentModel.peek());
+      setCurrentModel(getDefaultModel(next) || currentModel.peek());
       $('sel-permission').value = currentPermission.peek();
       refreshModelSelect();
       appendSystemMsg(`Agent → ${AGENT_LABELS[next] || next} · model ${currentModel.peek()} · new session`);
@@ -532,8 +557,7 @@ export function initShell(opts = {}) {
     }
   });
   delegate.on('change', '#sel-model', (_, el) => {
-    currentModel.value = el.value;
-    localStorage.setItem('model', el.value);
+    setCurrentModel(el.value);
     refreshEffortSelect();
   });
   delegate.on('click', '#btn-model-add', () => promptCustomModel({ editCurrent: false }));
@@ -568,6 +592,7 @@ export function initShell(opts = {}) {
       return;
     }
     await enterMachine(id, { forceReload: true });
+    refreshNotifications();
   });
   const refreshMachinesUi = async () => {
     const st = $('machine-picker-status');
@@ -589,6 +614,7 @@ export function initShell(opts = {}) {
   delegate.on('click', '#btn-machine-menu', async e => {
     e.stopPropagation();
     closeRecentMenu();
+    closeNotificationsMenu();
     const menu = $('machine-menu');
     if (!menu) return;
     if (menu.classList.contains('hidden')) {
@@ -603,7 +629,8 @@ export function initShell(opts = {}) {
     e.preventDefault();
     e.stopPropagation();
     closeMachineMenu();
-    toggleRecentMenu(getDashboardSessions());
+    closeNotificationsMenu();
+    toggleRecentMenu();
     const open = !$('recent-menu')?.classList.contains('hidden');
     const btn = $('btn-recent-sessions');
     if (btn) btn.setAttribute('aria-expanded', open ? 'true' : 'false');
@@ -627,6 +654,13 @@ export function initShell(opts = {}) {
       btn?.setAttribute('aria-expanded', 'false');
     }
   });
+  delegate.on('click', '#btn-notifications', e => {
+    e.preventDefault();
+    e.stopPropagation();
+    closeMachineMenu();
+    closeRecentMenu();
+    toggleNotificationsMenu();
+  });
   // Keep panel glued under topbar on rotate / URL bar show-hide
   window.addEventListener('resize', () => {
     if ($('recent-menu') && !$('recent-menu').classList.contains('hidden')) {
@@ -638,6 +672,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();
@@ -730,6 +773,12 @@ export function initShell(opts = {}) {
   });
 
   refreshModelSelect();
+  effect(() => {
+    void hubMode.value;
+    void selectedMachineId.value;
+    if (!ctx.token) return;
+    refreshNotifications();
+  });
   $('sel-permission').value = currentPermission.peek();
   applyChatDensity();
   const dens = $('sel-density');

package/public/state.js

@@ -15,14 +15,52 @@ export const currentTab     = signal('chat');
 export const isProcessing   = signal(false);
 /** Chat socket: idle | connecting | open | reconnecting | offline */
 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');
+const MODEL_BY_SESSION_KEY = 'modelBySession';
+const initialAgent = localStorage.getItem('agent') || 'claude';
+
+function readModelBySession() {
+  try {
+    const value = JSON.parse(localStorage.getItem(MODEL_BY_SESSION_KEY) || '{}');
+    return value && typeof value === 'object' ? value : {};
+  } catch {
+    return {};
+  }
+}
+
+function modelSessionKey(agent, sessionId = ctx.sessionId, machineId = ctx.machineId) {
+  if (!sessionId) return '';
+  const a = (agent || 'claude').toLowerCase();
+  return `${machineId || ''}:${a}:${sessionId}`;
+}
+
+/** Restore the model explicitly selected for the active session. */
+export function getSavedModel(agent, sessionId = ctx.sessionId, machineId = ctx.machineId) {
+  const key = modelSessionKey(agent, sessionId, machineId);
+  if (!key) return null;
+  const saved = readModelBySession()[key];
+  if (typeof saved === 'string' && saved.trim()) return saved;
+  return null;
+}
+
+/** Update the picker and persist its value only when a session exists. */
+export function setCurrentModel(model, agent = currentAgent.peek(), sessionId = ctx.sessionId, machineId = ctx.machineId) {
+  const value = String(model || '').trim();
+  if (!value) return;
+  const key = modelSessionKey(agent, sessionId, machineId);
+  if (key) {
+    const saved = readModelBySession();
+    saved[key] = value;
+    localStorage.setItem(MODEL_BY_SESSION_KEY, JSON.stringify(saved));
+  }
+  currentModel.value = value;
+}
+
+export const currentAgent      = signal(initialAgent); // 'claude'|'codex'|'grok'
+export const currentModel      = signal('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,14 +289,16 @@ 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);
-  const def = getDefaultModel(a);
-  if (!models.some(m => m.value === currentModel.peek())) {
-    currentModel.value = def;
-    localStorage.setItem('model', def);
+  // Model selection belongs to a concrete session, not to the whole agent.
+  // New sessions start from the agent default until they receive a session id.
+  const saved = getSavedModel(a);
+  if (saved) {
+    currentModel.value = saved;
+  } else {
+    setCurrentModel(getDefaultModel(a), 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-v15';
 const PRECACHE = [
   '/',
   '/index.html',
   '/manifest.webmanifest',
-  '/style.css?v=ui-10',
+  '/style.css?v=ui-11',
   '/style.css',
   '/app.js',
   '/icons/icon-192.png',