claude-simple 0.1.0 → 0.2.1

package/public/shell/session-list.js

@@ -10,7 +10,7 @@ import {
   getModelsForAgent, getDefaultModel, getEffortsForModel,
   addCustomModel, removeCustomModel, getCustomModels, ctx,
 } from '../state.js';
-import { api } from '../api.js';
+import { api, NOT_MODIFIED } from '../api.js';
 import { getCachedSessions, setCachedSessions, getCachedWorkspaces, setCachedWorkspaces } from '../cache.js';
 import { formatTime, agentBadge, agentCountPills, shortPath } from './util.js';
 
@@ -22,6 +22,16 @@ function normalizeSessions(v) {
   return [];
 }
 
+function sessionsQuery() {
+  const days = parseInt(timeRange.peek() || '14', 10);
+  const q = new URLSearchParams();
+  // Match sidebar time filter so we don't pull years of metadata on mobile.
+  if (days > 0) q.set('days', String(days));
+  q.set('limit', '400');
+  const s = q.toString();
+  return s ? `/api/sessions?${s}` : '/api/sessions';
+}
+
 /** @param {{ waitFresh?: boolean }} opts waitFresh=false → paint cache first, refresh in bg */
 export async function loadAllSessions({ waitFresh = true } = {}) {
   const cached = normalizeSessions(await getCachedSessions());
@@ -37,10 +47,13 @@ export async function loadAllSessions({ waitFresh = true } = {}) {
   }
 
   const fetchFresh = async () => {
-    const fresh = normalizeSessions(await api('GET', '/api/sessions'));
-    sessionsData.value = fresh;
-    setCachedSessions(fresh);
-    return fresh;
+    const path = sessionsQuery();
+    const fresh = await api('GET', path, undefined, undefined, { etag: true });
+    if (fresh === NOT_MODIFIED) return sessionsData.peek();
+    const list = normalizeSessions(fresh);
+    sessionsData.value = list;
+    setCachedSessions(list);
+    return list;
   };
 
   if (waitFresh || !cached.length) {
@@ -79,6 +92,7 @@ export function sessionItemHtml(s, { showProject = false } = {}) {
     ? s.snippet
     : sessionDisplayTitle(s);
   const fav = !!meta.favorite;
+  const hid = !!meta.hidden;
   const hasNote = !!(meta.notes && String(meta.notes).trim());
   const turns = Number(s.turnCount) || 0;
   const thin = turns > 0 && turns <= LOW_TURN_THRESHOLD;
@@ -87,7 +101,8 @@ export function sessionItemHtml(s, { showProject = false } = {}) {
     : '';
   const badges = [
     thin ? `<span class="session-thin-badge" title="Only ${turns} turn${turns === 1 ? '' : 's'}">thin·${turns}</span>` : '',
-    renamed ? `<span class="session-renamed-badge" title="Custom name (original: ${esc(s.display || '')})">✎</span>` : '',
+    renamed ? `<span class="session-renamed-badge" title="Custom name (original: ${esc(s.display || '')})">renamed</span>` : '',
+    hid ? `<span class="session-hidden-badge" title="Hidden">hidden</span>` : '',
     hasNote ? `<span class="session-note-dot" title="${esc(meta.notes)}">📝</span>` : '',
   ].filter(Boolean).join('');
   const machineBadge = s.machineId
@@ -97,7 +112,7 @@ export function sessionItemHtml(s, { showProject = false } = {}) {
     ? `${title}\n(original: ${s.display || s.sessionId})`
     : (s.display || '');
   return `<div class="session-row px-2.5 py-1.5 cursor-pointer hover:bg-base-300 border-l-2
-              ${active ? 'border-primary bg-primary/5' : 'border-transparent'} ${fav ? 'session-fav' : ''} ${thin ? 'session-thin' : ''}"
+              ${active ? 'border-primary bg-primary/5' : 'border-transparent'} ${fav ? 'session-fav' : ''} ${hid ? 'session-hidden-row' : ''} ${thin ? 'session-thin' : ''}"
        data-session-id="${esc(s.sessionId)}"
        data-session-cwd="${esc(s.cwd || '')}"
        data-session-config-dir="${esc(s.configDir || '')}"
@@ -114,17 +129,21 @@ export function sessionItemHtml(s, { showProject = false } = {}) {
       ${agentBadge(s.agent)}
       <div class="min-w-0 flex-1">
         <div class="session-title-wrap flex items-center gap-1 min-w-0"
-             data-session-id="${esc(s.sessionId)}"
              data-rename-session-id="${esc(s.sessionId)}"
              data-rename-session-agent="${esc(s.agent || 'claude')}"
              data-rename-session-machine="${esc(s.machineId || '')}"
              data-rename-session-display="${esc(s.display || '')}">
           <div class="session-title-text text-[11px] leading-snug truncate flex-1 min-w-0 ${active ? 'text-primary font-medium' : 'text-base-content/85'} ${renamed ? 'session-title-renamed' : ''}"
-               data-rename-session="1"
-               title="${esc(tip)} · click to rename">${esc(title)}</div>
+               title="${esc(tip)}">${esc(title)}</div>
           <button type="button" class="session-rename-btn flex-shrink-0"
                   data-rename-session="1"
                   title="Rename session">✎</button>
+          <button type="button" class="session-hide-btn flex-shrink-0 ${hid ? 'is-hidden' : ''}"
+                  data-hide-toggle="1"
+                  data-hide-session-id="${esc(s.sessionId)}"
+                  data-hide-session-agent="${esc(s.agent || 'claude')}"
+                  data-hide-session-machine="${esc(s.machineId || '')}"
+                  title="${hid ? 'Unhide session' : 'Hide session'}">${hid ? '👁' : '🙈'}</button>
         </div>
         ${projectLine}
         ${badges || machineBadge ? `<div class="flex items-center gap-1 mt-0.5 flex-wrap">${machineBadge}${badges}</div>` : ''}

package/public/shell/session-nav.js

@@ -217,8 +217,13 @@ export async function resumeSession(sid, cwd, configDir, agent, machineId, opts
     }
     appendSystemMsg(`Loading ${label} history…`);
     try {
-      // tail=120 → server returns only recent messages (much faster on long sessions)
-      const q = new URLSearchParams({ agent: resolvedAgent, tail: '120' });
+      // 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);

package/public/shell/templates.js

@@ -39,7 +39,7 @@ export const AppShell = (opts = {}) => {
   return `
   <div id="sidebar-overlay" class="hidden fixed inset-0 bg-black/50 z-[9]"></div>
   <div id="app" class="${appHidden} flex-col flex-1 overflow-hidden" style="${appStyle}">
-    <div class="flex items-center gap-2 px-3 bg-base-200 border-b border-base-300 flex-shrink-0" style="height:44px">
+    <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>
       <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>
@@ -61,7 +61,10 @@ export const AppShell = (opts = {}) => {
         </div>
       </div>
       <span id="topbar-project" class="text-sm text-base-content/50 flex-1 truncate">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">
+        <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>
         <button id="btn-new-session" class="btn btn-ghost btn-xs border border-base-300">＋ New</button>
         <button id="btn-theme"        class="btn btn-ghost btn-xs border border-base-300">🌙</button>
@@ -114,6 +117,7 @@ export const AppShell = (opts = {}) => {
             <button data-agent-filter="codex" class="agent-pill">Codex</button>
             <button data-agent-filter="grok" class="agent-pill">Grok</button>
             <button id="btn-fav-filter" class="agent-pill" title="Show only favorites">★ Fav</button>
+            <button id="btn-hidden-filter" class="agent-pill" title="Show only hidden sessions">🙈 Hidden</button>
           </div>
           <div id="search-status" class="hidden text-[10px] text-base-content/40 px-0.5"></div>
         </div>
@@ -205,13 +209,17 @@ export const AppShell = (opts = {}) => {
           <div id="tab-chat" class="flex flex-col flex-1 overflow-hidden relative">
             <div id="project-notes-bar" class="bg-base-200 border-b border-base-300 px-3 py-1.5 text-xs flex flex-col gap-1" style="display:none"></div>
             <div id="session-notes-bar" class="bg-base-200/80 border-b border-base-300 px-3 py-1 text-xs flex justify-between items-center gap-2" style="display:none"></div>
+            <div id="ws-banner" class="hidden px-3 py-1.5 text-[11px] text-center bg-warning/15 text-warning border-b border-warning/20 flex items-center justify-center gap-2">
+              <span id="ws-banner-text"></span>
+              <button type="button" id="ws-banner-retry" class="btn btn-ghost btn-xs h-6 min-h-0 px-2 text-warning border border-warning/30">重连</button>
+            </div>
             <div id="messages" class="flex-1 overflow-y-auto p-3 flex flex-col gap-2"></div>
             <div id="scroll-nav" class="absolute right-3 bottom-24 flex flex-col gap-1.5 z-10">
               <button id="scroll-top-btn" class="scroll-fab hidden" title="Jump to top">↑</button>
               <button id="scroll-bottom-btn" class="scroll-fab hidden" title="Jump to bottom">↓</button>
             </div>
             <div id="permission-requests"></div>
-            <div class="flex flex-col border-t border-base-300 bg-base-200 flex-shrink-0">
+            <div id="chat-composer" class="flex flex-col border-t border-base-300 bg-base-200 flex-shrink-0">
               <div id="chat-opts" class="hidden flex items-center gap-1.5 px-3 pt-2 flex-wrap">
                 <select id="sel-agent" class="select select-xs select-bordered text-xs font-semibold" title="Agent">
                   <option value="claude">Claude</option>
@@ -258,7 +266,7 @@ export const AppShell = (opts = {}) => {
               <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>
                 <textarea id="chat-input" rows="1" placeholder="Ask… (!cmd shell · ⌘↵ send)"
-                  class="textarea textarea-bordered flex-1 text-sm resize-none leading-relaxed"
+                  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>

package/public/shell.js

@@ -9,10 +9,11 @@ import {
   currentModel, currentEffort, currentPermission, currentAgent, setAgent,
   sidebarView, agentFilter, timeRange, activityHits, activityLoading,
   chatDensity, setChatDensity,
-  favoritesOnly, hubMode, hubMachineReady, selectedMachineId, setSelectedMachine,
+  favoritesOnly, showHiddenOnly, hubMode, hubMachineReady, selectedMachineId, setSelectedMachine,
   machinesList, AGENT_LABELS, getDefaultModel, sessionMetaMap, ctx,
 } from './state.js';
 import { api } from './api.js';
+import { promptPwaInstall } from './pwa.js';
 import { getLastSessionContext } from './shell/session-context.js';
 import {
   connectWS, clearMessages, appendMsg, appendSystemMsg, sendMessage, stopProcessing,
@@ -34,7 +35,7 @@ import { showApp } from './shell/boot.js';
 import {
   fetchProjectNotes, renderProjectNotesDisplayMode, renderProjectNotesEditMode,
   renderSessionNotesBar, renderSessionNotesEditMode,
-  toggleSessionFavorite, saveSessionNotes, startInlineRename, setProjectNoteFields,
+  toggleSessionFavorite, toggleSessionHidden, saveSessionNotes, startInlineRename, setProjectNoteFields,
 } from './shell/notes.js';
 import {
   refreshMachinesList, renderMachinePickerList, renderMachineMenuList,
@@ -50,6 +51,48 @@ import {
 // Re-export public API (app.js and others)
 export { showApp, resumeSession, switchTab, openProject, goHome, loadAllSessions };
 
+/** Visible install guide when browser has no beforeinstallprompt (iOS Safari etc.). */
+function showPwaInstallHelp() {
+  const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent)
+    || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
+  const isAndroid = /Android/i.test(navigator.userAgent);
+  let body;
+  if (isIOS) {
+    body = `<ol class="list-decimal pl-4 space-y-2 text-sm text-base-content/80">
+      <li>点底部分享按钮 <strong>分享</strong>（方框+向上箭头）</li>
+      <li>下滑找到并点 <strong>添加到主屏幕</strong></li>
+      <li>确认名称后点 <strong>添加</strong></li>
+    </ol>
+    <p class="text-xs text-base-content/50 mt-3">需用 <strong>Safari</strong> 打开本站；微信/Chrome 内置浏览器通常没有「添加到主屏幕」。</p>`;
+  } else if (isAndroid) {
+    body = `<ol class="list-decimal pl-4 space-y-2 text-sm text-base-content/80">
+      <li>点右上角菜单 <strong>⋮</strong></li>
+      <li>选择 <strong>安装应用</strong> 或 <strong>添加到主屏幕</strong></li>
+    </ol>
+    <p class="text-xs text-base-content/50 mt-3">若菜单里没有该项：请用 <strong>Chrome</strong> 打开，并先接受本站证书提示。自签 HTTPS 下部分机型不弹出一键安装。</p>`;
+  } else {
+    body = `<p class="text-sm text-base-content/80">请在浏览器菜单中选择 <strong>安装应用 / 安装网页应用 / 添加到主屏幕</strong>。</p>
+    <p class="text-xs text-base-content/50 mt-3">Chrome / Edge 地址栏右侧有时也会出现安装图标。</p>`;
+  }
+  let dlg = document.getElementById('modal-pwa-install');
+  if (!dlg) {
+    dlg = document.createElement('dialog');
+    dlg.id = 'modal-pwa-install';
+    dlg.className = 'modal';
+    document.body.appendChild(dlg);
+  }
+  dlg.innerHTML = `
+    <div class="modal-box max-w-sm">
+      <h3 class="font-bold text-base mb-3">安装到主屏幕</h3>
+      ${body}
+      <div class="modal-action">
+        <form method="dialog"><button class="btn btn-sm">知道了</button></form>
+      </div>
+    </div>
+    <form method="dialog" class="modal-backdrop"><button>close</button></form>`;
+  dlg.showModal();
+}
+
 export async function initAuth() {
   const authScreen = $('auth-screen');
   if (authScreen) {
@@ -235,7 +278,15 @@ export function initShell(opts = {}) {
   initSidebarResize();
   initSidebarToggle();
 
-  document.addEventListener('sessions-changed', () => loadAllSessions());
+  let sessionsChangedTimer = null;
+  document.addEventListener('sessions-changed', () => {
+    // Debounce: rapid agent turns would otherwise re-download the full list.
+    if (sessionsChangedTimer) clearTimeout(sessionsChangedTimer);
+    sessionsChangedTimer = setTimeout(() => {
+      sessionsChangedTimer = null;
+      loadAllSessions({ waitFresh: false });
+    }, 1200);
+  });
   document.addEventListener('router:home', goHome);
 
   document.addEventListener('router:session', async ({ detail: { id, tab } }) => {
@@ -279,6 +330,7 @@ export function initShell(opts = {}) {
   delegate.on('change', '#time-range', (_, el) => {
     timeRange.value = el.value;
     localStorage.setItem('timeRange', el.value);
+    loadAllSessions({ waitFresh: true });
     if (sessionSearch.peek().trim()) scheduleActivitySearch(sessionSearch.peek());
   });
   delegate.on('dblclick', '[data-project-cwd]', (_, el) => {
@@ -288,6 +340,16 @@ export function initShell(opts = {}) {
     openProject({ id: name, name, path: cwd });
     appendSystemMsg(`Project · ${cwd}`);
   });
+  delegate.on('click', '#btn-pwa-install', async () => {
+    const ok = await promptPwaInstall();
+    if (ok) return;
+    // iOS / browsers without beforeinstallprompt: chat system messages are easy
+    // to miss (no open session / wrong tab). Always show a modal.
+    showPwaInstallHelp();
+  });
+  document.addEventListener('pwa-installable', () => {
+    document.getElementById('btn-pwa-install')?.classList.remove('hidden');
+  });
   delegate.on('click', '#btn-settings', openSettings);
   delegate.on('click', '#btn-meta-agent', () => toggleMetaAgent());
   delegate.on('click', '#btn-meta-agent-welcome', () => openMetaAgent('chat'));
@@ -308,9 +370,11 @@ export function initShell(opts = {}) {
 
   delegate.on('click', '[data-session-id]', (e, el) => {
     if (e.target.closest('[data-fav-toggle]')) return;
+    if (e.target.closest('[data-hide-toggle]')) return;
     if (e.target.closest('[data-rename-session]')) return;
     if (e.target.closest('.session-rename-input')) return;
     if (e.target.closest('.session-title-wrap.session-rename-active')) return;
+    // Only open when clicking the row / title — not action buttons
     resumeSession(
       el.dataset.sessionId,
       el.dataset.sessionCwd || null,
@@ -320,7 +384,7 @@ export function initShell(opts = {}) {
     );
     closeSidebarOnMobile();
   });
-  // Inline rename (sidebar): click title or ✎ — no dialog
+  // Inline rename (sidebar): only the ✎ button — title click opens the session
   delegate.on('click', '[data-rename-session]', (e, el) => {
     e.preventDefault();
     e.stopPropagation();
@@ -335,12 +399,12 @@ export function initShell(opts = {}) {
       mountEl: wrap,
     });
   });
-  // Inline rename (session bar title)
-  delegate.on('click', '[data-rename-bar], #session-title-display', (e, el) => {
+  // Inline rename (session bar): only the ✎ button next to the title
+  delegate.on('click', '[data-rename-bar]', (e, el) => {
     e.preventDefault();
     e.stopPropagation();
     if (!ctx.sessionId) return;
-    const mountEl = el.id === 'session-title-display' ? el : (el.closest('#session-title-display') || el);
+    const mountEl = document.getElementById('session-title-display') || el;
     startInlineRename({
       sessionId: ctx.sessionId,
       agent: ctx.agent || currentAgent.peek() || 'claude',
@@ -540,7 +604,18 @@ export function initShell(opts = {}) {
     e.preventDefault();
     const mid = el.dataset.favSessionMachine || ctx.machineId;
     if (mid) { ctx.machineId = mid; localStorage.setItem('machineId', mid); }
-    toggleSessionFavorite(el.dataset.favSessionId, el.dataset.favSessionAgent || 'claude');
+    toggleSessionFavorite(el.dataset.favSessionId, el.dataset.favSessionAgent || 'claude', {
+      machineId: mid || null,
+    });
+  });
+  delegate.on('click', '[data-hide-toggle]', (e, el) => {
+    e.stopPropagation();
+    e.preventDefault();
+    const mid = el.dataset.hideSessionMachine || ctx.machineId;
+    if (mid) { ctx.machineId = mid; localStorage.setItem('machineId', mid); }
+    toggleSessionHidden(el.dataset.hideSessionId, el.dataset.hideSessionAgent || 'claude', {
+      machineId: mid || null,
+    });
   });
   delegate.on('click', '#btn-edit-session-notes, #session-notes-text', () => {
     renderSessionNotesEditMode();
@@ -566,6 +641,23 @@ export function initShell(opts = {}) {
     favoritesOnly.value = next;
     localStorage.setItem('favoritesOnly', next ? '1' : '0');
     $('btn-fav-filter')?.classList.toggle('active', next);
+    // Fav and Hidden filters are exclusive for clarity
+    if (next && showHiddenOnly.peek()) {
+      showHiddenOnly.value = false;
+      localStorage.setItem('showHiddenOnly', '0');
+      $('btn-hidden-filter')?.classList.remove('active');
+    }
+  });
+  delegate.on('click', '#btn-hidden-filter', () => {
+    const next = !showHiddenOnly.peek();
+    showHiddenOnly.value = next;
+    localStorage.setItem('showHiddenOnly', next ? '1' : '0');
+    $('btn-hidden-filter')?.classList.toggle('active', next);
+    if (next && favoritesOnly.peek()) {
+      favoritesOnly.value = false;
+      localStorage.setItem('favoritesOnly', '0');
+      $('btn-fav-filter')?.classList.remove('active');
+    }
   });
 
   refreshModelSelect();
@@ -578,6 +670,7 @@ export function initShell(opts = {}) {
     btn.classList.toggle('active', btn.dataset.agentFilter === agentFilter.peek());
   });
   $('btn-fav-filter')?.classList.toggle('active', favoritesOnly.peek());
+  $('btn-hidden-filter')?.classList.toggle('active', showHiddenOnly.peek());
   document.querySelectorAll('[data-view]').forEach(btn => {
     const on = btn.dataset.view === sidebarView.peek();
     btn.classList.toggle('bg-primary/15', on);

package/public/state.js

@@ -13,6 +13,8 @@ export const viewingFile    = signal(null);       // currently viewing file in F
 export const currentProject = signal(null);   // { id, name, path } | null
 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');
 export const currentEffort     = signal('');
@@ -27,10 +29,12 @@ export const agentFilter    = signal(localStorage.getItem('agentFilter') || 'all
 export const timeRange      = signal(localStorage.getItem('timeRange') || '14'); // '0'|'1'|'7'|'14'|'30'
 export const activityHits   = signal(null); // null | { q, results, loading, error }
 export const activityLoading = signal(false);
-/** agent:sessionId → { favorite, notes, title, updatedAt }  (title = rename map) */
+/** agent:sessionId → { favorite, notes, title, hidden, updatedAt }  (title = rename map) */
 export const sessionMetaMap = signal({});
 /** Sidebar: show only favorited sessions */
 export const favoritesOnly  = signal(localStorage.getItem('favoritesOnly') === '1');
+/** Sidebar: show only hidden sessions (default list excludes hidden) */
+export const showHiddenOnly = signal(localStorage.getItem('showHiddenOnly') === '1');
 /** Sessions with this many user turns or fewer get a “thin” badge */
 export const LOW_TURN_THRESHOLD = 2;
 
@@ -77,7 +81,7 @@ export function metaKey(agent, sessionId, machineId) {
 
 export function getSessionMeta(agent, sessionId, machineId) {
   const m = sessionMetaMap.peek()?.[metaKey(agent, sessionId, machineId)];
-  return m || { favorite: false, notes: '', title: '' };
+  return m || { favorite: false, notes: '', title: '', hidden: false };
 }
 
 /** Display title: user rename map → original display → short id. */
@@ -295,6 +299,7 @@ export const filteredSessions = computed(() => {
   const aFilter = agentFilter.value;
   const days = timeRange.value;
   const favOnly = favoritesOnly.value;
+  const hiddenOnly = showHiddenOnly.value;
   const metaMap = sessionMetaMap.value;
   // When deep activity results are present and user is searching, prefer those
   const hits = activityHits.value;
@@ -309,6 +314,12 @@ export const filteredSessions = computed(() => {
     list = list.filter(s => s && (!s.machineId || s.machineId === mid));
   }
   list = list.filter(s => s && matchesAgentFilter(s, aFilter) && matchesTimeRange(s, days));
+  // Hidden sessions: excluded by default; "Hidden" filter shows only them
+  if (hiddenOnly) {
+    list = list.filter(s => s && metaMap?.[metaKey(s.agent, s.sessionId, s.machineId)]?.hidden);
+  } else {
+    list = list.filter(s => s && !metaMap?.[metaKey(s.agent, s.sessionId, s.machineId)]?.hidden);
+  }
   if (favOnly) {
     list = list.filter(s => s && metaMap?.[metaKey(s.agent, s.sessionId, s.machineId)]?.favorite);
   }

package/public/style.css

@@ -2,13 +2,62 @@
 @media (min-width: 641px) { #hamburger { display: none !important; } }
 @media (max-width: 640px) {
   #sidebar {
-    position: fixed; top: 44px; left: 0; bottom: 0;
+    position: fixed;
+    top: calc(44px + env(safe-area-inset-top, 0px));
+    left: 0;
+    bottom: 0;
     transform: translateX(-100%); z-index: 10;
     transition: transform .2s ease;
+    padding-bottom: env(safe-area-inset-bottom, 0px);
   }
   #sidebar.open { transform: translateX(0); box-shadow: 4px 0 20px rgba(0,0,0,.4); }
 }
 
+/*
+ * PWA standalone safe areas:
+ * 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;
+}
+html.pwa-standalone,
+html.pwa-standalone body {
+  background: oklch(var(--b1));
+}
+/* Top bar: extend under status bar, push content below notch */
+html.pwa-standalone #topbar {
+  padding-top: env(safe-area-inset-top, 0px);
+  min-height: calc(44px + env(safe-area-inset-top, 0px));
+  height: auto !important;
+  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 {
+  padding-bottom: env(safe-area-inset-bottom, 0px);
+  padding-left: env(safe-area-inset-left, 0px);
+  padding-right: env(safe-area-inset-right, 0px);
+}
+/* Welcome / machine picker full-screen panels */
+html.pwa-standalone #welcome,
+html.pwa-standalone #machine-picker {
+  padding-top: max(1rem, env(safe-area-inset-top, 0px));
+  padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
+  padding-left: max(1rem, env(safe-area-inset-left, 0px));
+  padding-right: max(1rem, env(safe-area-inset-right, 0px));
+}
+/* Meta agent drawer bottom */
+html.pwa-standalone #meta-agent-panel,
+html.pwa-standalone .ma-panel {
+  padding-bottom: env(safe-area-inset-bottom, 0px);
+}
+
+#conn-dot {
+  box-shadow: 0 0 0 2px color-mix(in oklch, var(--color-base-200) 80%, transparent);
+}
+
 /* ── Theme-aware code / tool surfaces ────────────────────────────────────── */
 /* Prefer DaisyUI tokens so light/dark both look intentional — no #0d1117 hardcode. */
 .code-surface {
@@ -542,23 +591,54 @@
   opacity: 0.9;
 }
 .session-title-renamed { font-style: normal; }
-.session-rename-btn {
+.session-rename-btn,
+.session-hide-btn {
+  appearance: none;
+  border: none;
+  background: transparent;
   font-size: 10px;
   line-height: 1;
   padding: 1px 3px;
   border-radius: 4px;
   color: color-mix(in oklch, var(--color-base-content) 35%, transparent);
   opacity: 0;
+  cursor: pointer;
   transition: opacity .12s, color .12s, background .12s;
 }
 .session-row:hover .session-rename-btn,
-.session-row:focus-within .session-rename-btn {
+.session-row:focus-within .session-rename-btn,
+.session-row:hover .session-hide-btn,
+.session-row:focus-within .session-hide-btn,
+#session-notes-bar .session-rename-btn,
+#session-notes-bar .session-hide-btn {
   opacity: 1;
 }
 .session-rename-btn:hover {
   color: var(--color-primary);
   background: color-mix(in oklch, var(--color-primary) 12%, transparent);
 }
+.session-hide-btn:hover {
+  color: var(--color-warning);
+  background: color-mix(in oklch, var(--color-warning) 12%, transparent);
+}
+.session-hide-btn.is-hidden {
+  opacity: 1;
+  color: var(--color-warning);
+}
+.session-row.session-hidden-row {
+  opacity: 0.78;
+}
+.session-hidden-badge {
+  font-size: 9px;
+  font-family: ui-monospace, Menlo, monospace;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  padding: 0 4px;
+  border-radius: 3px;
+  color: color-mix(in oklch, var(--color-base-content) 55%, transparent);
+  background: color-mix(in oklch, var(--color-base-content) 8%, transparent);
+  border: 1px solid color-mix(in oklch, var(--color-base-content) 14%, transparent);
+}
 .session-title-wrap {
   width: 100%;
 }
@@ -747,6 +827,38 @@
 .diff-hunk { color: oklch(var(--in)); }
 .diff-head { color: oklch(var(--bc)/.5); }
 
+/* ── Chat composer ───────────────────────────────────────────────────────── */
+/* Single outer border only — no DaisyUI nested focus ring / inner outline. */
+#chat-input.chat-input,
+#chat-input {
+  width: 100%;
+  min-height: 40px;
+  max-height: 140px;
+  padding: 0.55rem 0.85rem;
+  border-radius: 0.75rem;
+  border: 1px solid color-mix(in oklch, var(--color-base-content) 16%, transparent);
+  background: var(--color-base-100);
+  color: var(--color-base-content);
+  outline: none !important;
+  box-shadow: none !important;
+  --tw-ring-shadow: 0 0 #0000 !important;
+  --tw-ring-offset-shadow: 0 0 #0000 !important;
+  transition: border-color .15s ease;
+}
+#chat-input:focus,
+#chat-input:focus-visible {
+  outline: none !important;
+  box-shadow: none !important;
+  border-color: color-mix(in oklch, var(--color-primary) 55%, transparent);
+}
+#chat-input.textarea-warning {
+  border-color: color-mix(in oklch, var(--color-warning) 65%, transparent);
+  background: color-mix(in oklch, var(--color-warning) 6%, var(--color-base-100));
+}
+#chat-input.textarea-warning:focus {
+  border-color: color-mix(in oklch, var(--color-warning) 80%, transparent);
+}
+
 /* ── Typing dots ─────────────────────────────────────────────────────────── */
 .dot { width: 5px; height: 5px; background: currentColor; border-radius: 50%; display: inline-block; animation: blink 1.2s infinite; }
 .dot:nth-child(2) { animation-delay: .4s; }
@@ -999,6 +1111,26 @@
   font-size: 10px;
   opacity: 0.75;
 }
+.ma-approval {
+  font-size: 12px;
+  background: color-mix(in oklch, var(--color-warning) 10%, var(--color-base-200));
+  border: 1px solid color-mix(in oklch, var(--color-warning) 45%, var(--color-base-300));
+  border-radius: 8px;
+  padding: 8px 10px;
+  margin-right: 8%;
+}
+.ma-approval-label { font-weight: 600; margin-bottom: 4px; }
+.ma-approval-cmd {
+  font-family: ui-monospace, monospace;
+  font-size: 11px;
+  white-space: pre-wrap;
+  word-break: break-all;
+  background: var(--color-base-100);
+  border-radius: 6px;
+  padding: 6px 8px;
+  margin: 4px 0;
+}
+.ma-approval-actions { display: flex; gap: 6px; justify-content: flex-end; }
 .ma-thumb {
   width: 56px;
   height: 56px;