claude-simple 0.1.0 → 0.2.1

package/public/files.js

@@ -1,5 +1,5 @@
 // files.js — Files tab with upload / download / delete + text/office preview
-import { effect, delegate, esc, $ } from './lib.js';
+import { effect, asyncEffect, delegate, esc, $ } from './lib.js';
 import { currentProject, currentTab, filesRoot, filesPath, viewingFile, ctx } from './state.js';
 import { api, authHeaders, authQuery } from './api.js';
 
@@ -407,7 +407,7 @@ export function initFilesTab() {
       ${!isFile ? `<button id="btn-upload" class="btn btn-ghost btn-xs text-base-content/50 hover:text-base-content">↑ Upload</button>` : ''}`;
   });
 
-  effect(() => {
+  asyncEffect(async signal => {
     const tab = currentTab.value;
     const proj = currentProject.value;
     // Prefer explicit filesRoot; else session cwd on the selected machine
@@ -416,40 +416,32 @@ export function initFilesTab() {
     const dir = filesPath.value;
     const area = $('files-area');
     if (!area) return;
-    const ctrl = new AbortController();
-    if (tab !== 'files') { return () => ctrl.abort(); }
+    if (tab !== 'files') return;
     if (!root) {
       area.innerHTML = '<div class="p-4 text-xs text-base-content/40">No path yet — open a session (uses that machine&apos;s cwd) or type an absolute path and press Go.</div>';
-      return () => ctrl.abort();
+      return;
     }
     const id = proj?.id || '_';
     area.innerHTML = '<div class="p-4 text-xs text-base-content/40">Loading…</div>';
-    if (file !== null) {
-      api('GET', `/api/projects/${id}/file?root=${encodeURIComponent(root)}&path=${encodeURIComponent(file)}`, undefined, ctrl.signal)
-        .then(d => { if (!ctrl.signal.aborted) return showFile(area, file, d, ctrl.signal); })
-        .catch(e => {
-          if (!ctrl.signal.aborted && e?.name !== 'AbortError') {
-            area.innerHTML = `<div class="p-4 text-xs text-error">${esc(e.message)}</div>`;
-          }
-        });
-    } else {
-      api('GET', `/api/projects/${id}/files?root=${encodeURIComponent(root)}&path=${encodeURIComponent(dir)}`, undefined, ctrl.signal)
-        .then(d => {
-          if (ctrl.signal.aborted) return;
-          const list = Array.isArray(d) ? d : (Array.isArray(d?.files) ? d.files : null);
-          if (!list) {
-            area.innerHTML = `<div class="p-4 text-xs text-error">${esc(d?.error || 'Invalid directory listing')}</div>`;
-            return;
-          }
-          area.innerHTML = renderDir(list);
-        })
-        .catch(e => {
-          if (!ctrl.signal.aborted && e?.name !== 'AbortError') {
-            area.innerHTML = `<div class="p-4 text-xs text-error">${esc(e.message)}</div>`;
-          }
-        });
+    try {
+      if (file !== null) {
+        const data = await api('GET', `/api/projects/${id}/file?root=${encodeURIComponent(root)}&path=${encodeURIComponent(file)}`, undefined, signal);
+        if (!signal.aborted) await showFile(area, file, data, signal);
+        return;
+      }
+      const data = await api('GET', `/api/projects/${id}/files?root=${encodeURIComponent(root)}&path=${encodeURIComponent(dir)}`, undefined, signal);
+      if (signal.aborted) return;
+      const list = Array.isArray(data) ? data : (Array.isArray(data?.files) ? data.files : null);
+      if (!list) {
+        area.innerHTML = `<div class="p-4 text-xs text-error">${esc(data?.error || 'Invalid directory listing')}</div>`;
+        return;
+      }
+      area.innerHTML = renderDir(list);
+    } catch (e) {
+      if (!signal.aborted && e?.name !== 'AbortError') {
+        area.innerHTML = `<div class="p-4 text-xs text-error">${esc(e.message)}</div>`;
+      }
     }
-    return () => ctrl.abort();
   });
 
   delegate.on('click', '[data-dir-path]', (_, el) => { viewingFile.value = null; filesPath.value = el.dataset.dirPath; });

package/public/git.js

@@ -1,5 +1,5 @@
 // git.js — Git tab
-import { signal, effect, delegate, esc, $ } from './lib.js';
+import { signal, asyncEffect, delegate, esc, $ } from './lib.js';
 import { currentProject, currentTab, gitRoot } from './state.js';
 import { api } from './api.js';
 
@@ -63,41 +63,45 @@ function renderDiff(diff) {
 
 export function initGitTab() {
   // Git status panel
-  effect(() => {
+  asyncEffect(async signal => {
     const tab  = currentTab.value;
     const proj = currentProject.value;
     const root = gitRoot.value || proj?.path;
     const area = $('git-area');
     if (!area) return;
-    const ctrl = new AbortController();
-    if (tab !== 'git') return () => ctrl.abort();
+    if (tab !== 'git') return;
     if (!root) {
       area.innerHTML = '<div class="p-4 text-sm text-base-content/50">Enter a project root above, or open a session with a working directory.</div>';
-      return () => ctrl.abort();
+      return;
     }
     const id = proj?.id || '_';
     area.innerHTML = '<div class="p-4 text-xs text-base-content/40">Loading…</div>';
-    api('GET', `/api/projects/${id}/git/status?root=${encodeURIComponent(root)}`, undefined, ctrl.signal)
-      .then(d => { if (!ctrl.signal.aborted) area.innerHTML = gitRenderer(d); })
-      .catch(e => { if (!ctrl.signal.aborted && e?.name !== 'AbortError')
-        area.innerHTML = `<div class="p-4 text-xs text-error">${esc(e?.message ?? String(e))}</div>`; });
-    return () => ctrl.abort();
+    try {
+      const data = await api('GET', `/api/projects/${id}/git/status?root=${encodeURIComponent(root)}`, undefined, signal);
+      if (!signal.aborted) area.innerHTML = gitRenderer(data);
+    } catch (e) {
+      if (!signal.aborted && e?.name !== 'AbortError') {
+        area.innerHTML = `<div class="p-4 text-xs text-error">${esc(e?.message ?? String(e))}</div>`;
+      }
+    }
   });
 
   // Diff panel
-  effect(() => {
+  asyncEffect(async signal => {
     const proj   = currentProject.value;
     const root   = gitRoot.value || proj?.path;
     const staged = diffStaged.value;
     const target = $('diff-content');
     if (!target || !root) return;
     const id   = proj?.id || '_';
-    const ctrl = new AbortController();
-    api('GET', `/api/projects/${id}/git/diff?root=${encodeURIComponent(root)}${staged ? '&staged=true' : ''}`, undefined, ctrl.signal)
-      .then(d => { if (!ctrl.signal.aborted) target.innerHTML = d?.diff ? renderDiff(d.diff) : '<span class="text-base-content/40">No changes</span>'; })
-      .catch(e => { if (!ctrl.signal.aborted && e?.name !== 'AbortError')
-        target.innerHTML = `<span class="text-error">${esc(e?.message ?? String(e))}</span>`; });
-    return () => ctrl.abort();
+    try {
+      const data = await api('GET', `/api/projects/${id}/git/diff?root=${encodeURIComponent(root)}${staged ? '&staged=true' : ''}`, undefined, signal);
+      if (!signal.aborted) target.innerHTML = data?.diff ? renderDiff(data.diff) : '<span class="text-base-content/40">No changes</span>';
+    } catch (e) {
+      if (!signal.aborted && e?.name !== 'AbortError') {
+        target.innerHTML = `<span class="text-error">${esc(e?.message ?? String(e))}</span>`;
+      }
+    }
   });
 
   delegate.on('click', '#diff-unstaged, #diff-staged', (_, el) => {

package/public/index.html

@@ -45,14 +45,27 @@
       display: none !important;
     }
   </style>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
-  <title>Claude Code</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover">
+  <meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">
+  <meta name="theme-color" content="#0f172a">
+  <meta name="color-scheme" content="dark light">
+  <meta name="mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+  <meta name="apple-mobile-web-app-title" content="Agent UI">
+  <meta name="application-name" content="Agent UI">
+  <meta name="description" content="Claude · Codex · Grok multi-machine agent console">
+  <link rel="manifest" href="/manifest.webmanifest">
+  <link rel="apple-touch-icon" href="/icons/icon-180.png">
+  <link rel="icon" type="image/png" sizes="192x192" href="/icons/icon-192.png">
+  <link rel="icon" type="image/png" sizes="512x512" href="/icons/icon-512.png">
+  <title>Agent UI</title>
   <link href="https://cdn.jsdelivr.net/npm/daisyui@5/daisyui.css" rel="stylesheet">
   <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
   <script src="https://cdn.jsdelivr.net/npm/marked@9/marked.min.js"></script>
   <link id="hljs-theme" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@highlightjs/cdn-assets@11/styles/github-dark.min.css">
   <script src="https://cdn.jsdelivr.net/npm/@highlightjs/cdn-assets@11/highlight.min.js"></script>
-  <link rel="stylesheet" href="style.css?v=boot-2">
+  <link rel="stylesheet" href="style.css?v=safe-3">
 </head>
 <body class="h-dvh overflow-hidden flex flex-col bg-base-100 text-base-content">
   <div id="root" class="flex flex-col flex-1 overflow-hidden"></div>

package/public/lib.js

@@ -1,2 +1,7 @@
-export * from 'https://cdn.jsdelivr.net/gh/forechoandlook/mini-react@latest/dist/mini-react.min.js';
-// doc from https://cdn.jsdelivr.net/gh/forechoandlook/mini-react@latest/README.mini.md
+// Pinned, not @latest: this file is served straight to production browsers by
+// the live hub (see docs/deployment.md) with no build step in between, so an
+// unpinned @latest here means every push to the mini-react repo — tested or
+// not — goes live immediately. Bump deliberately after verifying against
+// this app, not as a side effect of publishing a mini-react release.
+export * from 'https://cdn.jsdelivr.net/gh/forechoandlook/mini-react@v0.1.13/dist/mini-react.min.js';
+// doc from https://cdn.jsdelivr.net/gh/forechoandlook/mini-react@v0.1.13/README.mini.md

package/public/manifest.webmanifest

@@ -0,0 +1,36 @@
+{
+  "id": "/",
+  "name": "Agent UI",
+  "short_name": "Agent UI",
+  "description": "Claude · Codex · Grok multi-machine agent console",
+  "start_url": "/?source=pwa",
+  "scope": "/",
+  "display": "standalone",
+  "display_override": ["standalone", "minimal-ui", "browser"],
+  "orientation": "any",
+  "background_color": "#0f172a",
+  "theme_color": "#0f172a",
+  "lang": "zh-CN",
+  "dir": "ltr",
+  "categories": ["developer", "productivity", "utilities"],
+  "icons": [
+    {
+      "src": "/icons/icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/icons/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/icons/icon-maskable-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ]
+}

package/public/offline.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="theme-color" content="#0f172a">
+  <title>离线 · Agent UI</title>
+  <style>
+    body {
+      margin: 0; min-height: 100dvh; display: flex; align-items: center; justify-content: center;
+      font-family: system-ui, -apple-system, sans-serif;
+      background: #0f172a; color: #e2e8f0; padding: 1.5rem; text-align: center;
+    }
+    .card {
+      max-width: 22rem; padding: 1.5rem; border-radius: 1rem;
+      background: #1e293b; border: 1px solid #334155;
+    }
+    h1 { font-size: 1.1rem; margin: 0 0 .5rem; }
+    p { font-size: .9rem; color: #94a3b8; line-height: 1.5; margin: 0 0 1rem; }
+    button {
+      appearance: none; border: 0; border-radius: .5rem; padding: .55rem 1rem;
+      background: #6366f1; color: #fff; font-weight: 600; font-size: .875rem; cursor: pointer;
+    }
+  </style>
+</head>
+<body>
+  <div class="card">
+    <h1>当前无网络</h1>
+    <p>Agent UI 需要连接 Hub 才能聊天。恢复网络后点下方按钮重试。</p>
+    <button type="button" onclick="location.href='/'">重新加载</button>
+  </div>
+</body>
+</html>

package/public/pwa.js

@@ -0,0 +1,78 @@
+// pwa.js — register service worker + optional install affordance
+// Does not touch WebSocket; SW only caches static shell assets.
+
+let deferredInstall = null;
+
+function isStandalone() {
+  return (
+    window.matchMedia('(display-mode: standalone)').matches
+    || window.navigator.standalone === true
+    || document.referrer.includes('android-app://')
+  );
+}
+
+function showInstallButton() {
+  document.getElementById('btn-pwa-install')?.classList.remove('hidden');
+}
+
+export function initPwa() {
+  if (isStandalone()) {
+    document.documentElement.classList.add('pwa-standalone');
+  }
+
+  window.addEventListener('beforeinstallprompt', (e) => {
+    e.preventDefault();
+    deferredInstall = e;
+    document.dispatchEvent(new CustomEvent('pwa-installable'));
+    showInstallButton();
+  });
+
+  window.addEventListener('appinstalled', () => {
+    deferredInstall = null;
+    document.getElementById('btn-pwa-install')?.classList.add('hidden');
+  });
+
+  // iOS Safari has no beforeinstallprompt — still offer a tip button on mobile.
+  const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent)
+    || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
+  if (!isStandalone() && (isIOS || /Android/i.test(navigator.userAgent))) {
+    // Defer until shell HTML exists
+    requestAnimationFrame(() => showInstallButton());
+  }
+
+  if (!('serviceWorker' in navigator)) return;
+
+  // Register after first paint so install doesn't compete with boot.
+  const register = () => {
+    navigator.serviceWorker.register('/sw.js', { scope: '/' })
+      .then((reg) => {
+        reg.addEventListener('updatefound', () => {
+          const sw = reg.installing;
+          if (!sw) return;
+          sw.addEventListener('statechange', () => {
+            if (sw.state === 'installed' && navigator.serviceWorker.controller) {
+              console.info('[pwa] New version ready — reload to apply');
+            }
+          });
+        });
+      })
+      .catch((err) => console.warn('[pwa] SW register failed', err));
+  };
+
+  if (document.readyState === 'complete') setTimeout(register, 0);
+  else window.addEventListener('load', () => setTimeout(register, 0));
+}
+
+/** Trigger native install sheet when available (Chrome/Edge Android, some desktop). */
+export async function promptPwaInstall() {
+  if (!deferredInstall) return false;
+  deferredInstall.prompt();
+  const choice = await deferredInstall.userChoice.catch(() => null);
+  deferredInstall = null;
+  document.getElementById('btn-pwa-install')?.classList.add('hidden');
+  return choice?.outcome === 'accepted';
+}
+
+export function canInstallPwa() {
+  return !!deferredInstall;
+}

package/public/shell/boot.js

@@ -8,6 +8,7 @@ import { getCachedSessions } from '../cache.js';
 import { getLastSessionContext } from './session-context.js';
 import { loadAllSessions, loadWorkspaces, loadAgentsMeta } from './session-list.js';
 import { loadSessionMetaMap } from './notes.js';
+import { loadMetaAgentBoot } from '../agent-panel.js';
 import { resumeSession } from './session-nav.js';
 import {
   refreshMachinesList, hideMachinePicker, showMachinePicker,
@@ -59,6 +60,7 @@ export async function showApp(opts = {}) {
       setSelectedMachine(remembered);
       hideMachinePicker();
       hubMachineReady.value = true;
+      loadMetaAgentBoot();
     }
 
     // Machines list: refresh in background; only block picker if no remembered id
@@ -128,6 +130,7 @@ export async function showApp(opts = {}) {
   }
 
   // Standalone: cache-first sessions + live model lists, then deep link
+  loadMetaAgentBoot();
   const dataP = Promise.all([
     loadAllSessions({ waitFresh: false }),
     loadWorkspaces({ waitFresh: false }),

package/public/shell/hub.js

@@ -5,8 +5,9 @@ import {
   currentProject, sessionFilter, viewingFile, ctx,
 } from '../state.js';
 import { api, probeHub } from '../api.js';
-import { loadAllSessions, loadWorkspaces } from './session-list.js';
+import { loadAllSessions, loadWorkspaces, loadAgentsMeta } from './session-list.js';
 import { loadSessionMetaMap } from './notes.js';
+import { loadMetaAgentBoot } from '../agent-panel.js';
 // goHome imported dynamically in enterMachine to avoid circular deps
 
 export async function refreshMachinesList() {
@@ -186,7 +187,8 @@ export async function enterMachine(machineId, { forceReload = false } = {}) {
     bar.textContent = `Machine · ${machineId}`;
   }
 
-  await Promise.all([loadAllSessions(), loadWorkspaces(), loadSessionMetaMap()]);
+  loadMetaAgentBoot();
+  await Promise.all([loadAllSessions(), loadWorkspaces(), loadSessionMetaMap(), loadAgentsMeta().catch(() => {})]);
   hubMachineReady.value = true;
 }
 

package/public/shell/notes.js

@@ -103,6 +103,7 @@ export function renderSessionNotesBar() {
   const meta = getSessionMeta(agent, sid);
   const note = (meta.notes || '').trim();
   const fav = !!meta.favorite;
+  const hid = !!meta.hidden;
   const title = (meta.title || '').trim();
   const showTitle = title || sid.slice(0, 8);
   bar.style.display = 'flex';
@@ -112,9 +113,15 @@ export function renderSessionNotesBar() {
               data-fav-session-id="${esc(sid)}" data-fav-session-agent="${esc(agent)}"
               title="${fav ? 'Unfavorite' : 'Favorite'}">${fav ? '★' : '☆'}</button>
       <span id="session-title-display"
-            class="session-title-inline max-w-[40%] truncate font-semibold text-base-content/85 cursor-text hover:text-primary"
-            title="Click to rename"
-            data-rename-bar="1">${esc(showTitle)}</span>
+            class="session-title-inline max-w-[40%] truncate font-semibold text-base-content/85"
+            title="${esc(showTitle)}">${esc(showTitle)}</span>
+      <button type="button" class="session-rename-btn flex-shrink-0 opacity-70 hover:opacity-100"
+              data-rename-bar="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(sid)}"
+              data-hide-session-agent="${esc(agent)}"
+              title="${hid ? 'Unhide session' : 'Hide session'}">${hid ? '👁' : '🙈'}</button>
       <span class="font-bold text-base-content/40 uppercase flex-shrink-0">Note:</span>
       <span class="truncate text-base-content/70 ${note ? '' : 'italic text-base-content/40'}"
             id="session-notes-text" title="${esc(note || 'Add a note for this session')}">${esc(note || 'No session note')}</span>
@@ -139,17 +146,43 @@ export function renderSessionNotesEditMode() {
   input?.select();
 }
 
-export async function toggleSessionFavorite(sessionId, agent) {
-  const key = metaKey(agent, sessionId);
-  const prev = sessionMetaMap.peek()?.[key] || { favorite: false, notes: '', title: '' };
+function emptyMeta() {
+  return { favorite: false, notes: '', title: '', hidden: false };
+}
+
+function mergeMeta(prev, patch) {
+  return {
+    favorite: patch.favorite !== undefined ? Boolean(patch.favorite) : Boolean(prev.favorite),
+    notes: patch.notes !== undefined ? String(patch.notes || '') : String(prev.notes || ''),
+    title: patch.title !== undefined ? String(patch.title || '').trim() : String(prev.title || '').trim(),
+    hidden: patch.hidden !== undefined ? Boolean(patch.hidden) : Boolean(prev.hidden),
+    updatedAt: Date.now(),
+  };
+}
+
+function isMetaEmpty(m) {
+  return !m?.favorite && !m?.hidden && !(m?.notes || '').trim() && !(m?.title || '').trim();
+}
+
+export async function toggleSessionFavorite(sessionId, agent, { machineId } = {}) {
+  const key = metaKey(agent, sessionId, machineId);
+  const prev = sessionMetaMap.peek()?.[key] || emptyMeta();
   const nextFav = !prev.favorite;
-  // optimistic
   sessionMetaMap.value = {
     ...sessionMetaMap.peek(),
     [key]: { ...prev, favorite: nextFav, updatedAt: Date.now() },
   };
   try {
-    await api('PUT', '/api/sessions/meta', { sessionId, agent, favorite: nextFav });
+    const res = await api('PUT', '/api/sessions/meta', { sessionId, agent, favorite: nextFav });
+    sessionMetaMap.value = {
+      ...sessionMetaMap.peek(),
+      [key]: mergeMeta(prev, {
+        favorite: res.favorite ?? nextFav,
+        notes: res.notes,
+        title: res.title,
+        hidden: res.hidden,
+      }),
+    };
   } catch (e) {
     sessionMetaMap.value = { ...sessionMetaMap.peek(), [key]: prev };
     alert(`Favorite failed: ${e.message}`);
@@ -157,19 +190,53 @@ export async function toggleSessionFavorite(sessionId, agent) {
   if (ctx.sessionId === sessionId) renderSessionNotesBar();
 }
 
+/** Hide / unhide a session (soft archive in the sidebar). */
+export async function toggleSessionHidden(sessionId, agent, { machineId } = {}) {
+  if (!sessionId) return false;
+  const key = metaKey(agent, sessionId, machineId);
+  const prev = sessionMetaMap.peek()?.[key] || emptyMeta();
+  const nextHidden = !prev.hidden;
+  sessionMetaMap.value = {
+    ...sessionMetaMap.peek(),
+    [key]: { ...prev, hidden: nextHidden, updatedAt: Date.now() },
+  };
+  try {
+    const res = await api('PUT', '/api/sessions/meta', { sessionId, agent, hidden: nextHidden });
+    const next = mergeMeta(prev, {
+      favorite: res.favorite,
+      notes: res.notes,
+      title: res.title,
+      hidden: res.hidden ?? nextHidden,
+    });
+    if (isMetaEmpty(next)) {
+      const map = { ...sessionMetaMap.peek() };
+      delete map[key];
+      sessionMetaMap.value = map;
+    } else {
+      sessionMetaMap.value = { ...sessionMetaMap.peek(), [key]: next };
+    }
+  } catch (e) {
+    sessionMetaMap.value = { ...sessionMetaMap.peek(), [key]: prev };
+    alert(`Hide failed: ${e.message}`);
+    return false;
+  }
+  if (ctx.sessionId === sessionId) renderSessionNotesBar();
+  return true;
+}
+
 export async function saveSessionNotes(sessionId, agent, notes) {
   const key = metaKey(agent, sessionId);
-  const prev = sessionMetaMap.peek()?.[key] || { favorite: false, notes: '', title: '' };
+  const prev = sessionMetaMap.peek()?.[key] || emptyMeta();
   try {
     const res = await api('PUT', '/api/sessions/meta', { sessionId, agent, notes });
     sessionMetaMap.value = {
       ...sessionMetaMap.peek(),
-      [key]: {
-        favorite: res.favorite ?? prev.favorite,
+      [key]: mergeMeta(prev, {
+        favorite: res.favorite,
         notes: res.notes ?? notes,
-        title: res.title ?? prev.title ?? '',
-        updatedAt: Date.now(),
-      },
+        title: res.title,
+        hidden: res.hidden,
+      }),
     };
   } catch (e) {
     alert(`Save note failed: ${e.message}`);
@@ -185,31 +252,26 @@ export async function saveSessionNotes(sessionId, agent, notes) {
 export async function renameSession(sessionId, agent, title, { machineId } = {}) {
   if (!sessionId) return false;
   const key = metaKey(agent, sessionId, machineId);
-  const prev = sessionMetaMap.peek()?.[key] || { favorite: false, notes: '', title: '' };
+  const prev = sessionMetaMap.peek()?.[key] || emptyMeta();
   const nextTitle = String(title || '').trim().slice(0, 200);
-  // optimistic
   sessionMetaMap.value = {
     ...sessionMetaMap.peek(),
     [key]: { ...prev, title: nextTitle, updatedAt: Date.now() },
   };
   try {
     const res = await api('PUT', '/api/sessions/meta', { sessionId, agent, title: nextTitle });
-    sessionMetaMap.value = {
-      ...sessionMetaMap.peek(),
-      [key]: {
-        favorite: res.favorite ?? prev.favorite,
-        notes: res.notes ?? prev.notes ?? '',
-        title: res.title !== undefined ? res.title : nextTitle,
-        updatedAt: Date.now(),
-      },
-    };
-    // If server dropped empty entry, keep local clear
-    if (!res.title && !res.favorite && !res.notes) {
+    const next = mergeMeta(prev, {
+      favorite: res.favorite,
+      notes: res.notes,
+      title: res.title !== undefined ? res.title : nextTitle,
+      hidden: res.hidden,
+    });
+    if (isMetaEmpty(next)) {
       const map = { ...sessionMetaMap.peek() };
-      if (!nextTitle && !prev.favorite && !(prev.notes || '').trim()) {
-        delete map[key];
-        sessionMetaMap.value = map;
-      }
+      delete map[key];
+      sessionMetaMap.value = map;
+    } else {
+      sessionMetaMap.value = { ...sessionMetaMap.peek(), [key]: next };
     }
   } catch (e) {
     sessionMetaMap.value = { ...sessionMetaMap.peek(), [key]: prev };