claude-simple 0.2.24 → 0.2.26

package/public/shell/session-nav.js

@@ -2,7 +2,7 @@
 import { batch, esc, $ } from '../lib.js';
 import {
   sessionsData, sessionFilter, filesPath, viewingFile, filteredSessions,
-  currentProject, currentTab, filesRoot, gitRoot, currentAgent, setAgent,
+  currentProject, currentTab, filesRoot, gitRoot, currentAgent, setAgent, isProcessing,
   selectedMachineId, setSelectedMachine, AGENT_LABELS, ctx, hubMode,
 } from '../state.js';
 import { api } from '../api.js';
@@ -10,13 +10,32 @@ import { getLastSessionContext, setLastSessionContext } from './session-context.
 import {
   connectWS, clearMessages, appendMsg, appendSystemMsg, renderToolUse,
   appendHistoryTokenBar, appendContextBar, flushToolBatch, coerceTs,
-  stashComposerDraft, restoreComposerDraft, discardComposerAttachments, parkQueuedMessages, detachProcessingForSessionSwitch,
+  stashComposerDraft, restoreComposerDraft, discardComposerAttachments, parkQueuedMessages, detachProcessingForSessionSwitch, setExternalSessionReadOnly,
 } from '../chat.js';
+import { acquireSessionLock, releaseSessionLock } from '../locks.js';
 import { setHash, syncHash } from '../router.js';
 import { refreshModelSelect } from './session-list.js';
 import { renderSessionNotesBar } from './notes.js';
 import { addRecentSession, updateDashboard, getDashboardSessions } from './dashboard.js';
 
+// A terminal-owned agent writes its native transcript independently of this
+// UI. Keep just the currently open session hot and coalesce file updates into
+// one fresh history read, rather than attempting to replay every vendor JSONL
+// event in the browser.
+let activeExternalHistory = null;
+let externalHistoryTimer = null;
+
+document.addEventListener('external-session-updated', ({ detail }) => {
+  const active = activeExternalHistory;
+  if (!active || !detail || detail.sessionId !== active.sessionId) return;
+  if (detail.agent && active.agent && detail.agent !== active.agent) return;
+  if (externalHistoryTimer) clearTimeout(externalHistoryTimer);
+  externalHistoryTimer = setTimeout(() => {
+    externalHistoryTimer = null;
+    activeExternalHistory?.refresh();
+  }, 140);
+});
+
 /** Show which edge machine Files/Git/Shell paths belong to. */
 function syncMachinePathHints(machineId) {
   for (const id of ['files-machine-hint', 'git-machine-hint']) {
@@ -35,6 +54,9 @@ function syncMachinePathHints(machineId) {
 }
 
 export function openProject(project) {
+  activeExternalHistory = null;
+  releaseSessionLock();
+  setExternalSessionReadOnly(false);
   stashComposerDraft();
   parkQueuedMessages();
   discardComposerAttachments();
@@ -67,6 +89,9 @@ export function openProject(project) {
 }
 
 export function goHome() {
+  activeExternalHistory = null;
+  releaseSessionLock();
+  setExternalSessionReadOnly(false);
   stashComposerDraft();
   parkQueuedMessages();
   discardComposerAttachments();
@@ -144,6 +169,8 @@ export async function resumeSession(sid, cwd, configDir, agent, machineId, opts
   }
 
   ctx.sessionId = sid;
+  setExternalSessionReadOnly(false);
+  acquireSessionLock({ sessionId: sid, agent: resolvedAgent, machineId: resolvedMachine }).catch(() => {});
   ctx.configDir = resolvedConfig;
   ctx.agent = resolvedAgent;
   setAgent(resolvedAgent);
@@ -153,7 +180,6 @@ export async function resumeSession(sid, cwd, configDir, agent, machineId, opts
   // Default path = session cwd on the target machine (set immediately; no await)
   let edgeCwd = resolvedCwd;
   applyProjectPaths(edgeCwd, resolvedMachine, sid);
-  connectWS();
 
   // Background: normalize path on the edge (does not block chat)
   if (edgeCwd) {
@@ -169,6 +195,9 @@ export async function resumeSession(sid, cwd, configDir, agent, machineId, opts
 
   // Switch to target tab BEFORE history (files/git/shell usable immediately)
   clearMessages();
+  // Subscribe after clearing the prior transcript. A queued Grok snapshot can
+  // arrive immediately on socket-open and must belong to the new history.
+  connectWS();
   switchTab(targetTab);
   {
     const cur = sessionsData.peek();
@@ -227,7 +256,7 @@ export async function resumeSession(sid, cwd, configDir, agent, machineId, opts
               ? m.content.map(p => p?.text || '').filter(Boolean).join('\n')
               : String(m.content ?? ''));
           if (content) {
-            appendMsg(m.role === 'user' ? 'user' : 'assistant', m.role === 'user' ? 'You' : label, content, { ts });
+            appendMsg(m.role === 'user' ? 'user' : 'assistant', m.role === 'user' ? 'You' : label, content, { ts, historyIndex: i });
           }
         } else if (typ === 'tool_use' || m.name) {
           renderToolUse({ name: m.name || 'tool', input: m.input ?? m.arguments ?? {} }, { ts });
@@ -252,14 +281,13 @@ export async function resumeSession(sid, cwd, configDir, agent, machineId, opts
     paintChunk();
   };
 
-  const loadHistory = async () => {
+  const loadHistory = async ({ preferCache = true } = {}) => {
     // Instant re-open from in-memory cache (never trust empty cache — race/stale)
     const cached = historyCache.get(cacheKey);
-    if (cached && cached.msgs?.length && Date.now() - cached.at < HISTORY_CACHE_TTL) {
+    if (preferCache && cached && cached.msgs?.length && Date.now() - cached.at < HISTORY_CACHE_TTL) {
       paintMessages(cached.msgs, cached.context, cached.meta);
-      return;
     }
-    appendSystemMsg(`Loading ${label} history…`);
+    if (!cached?.msgs?.length) appendSystemMsg(`Loading ${label} history…`);
     try {
       // Hub mode must route to the edge that owns the session.
       const mid = resolvedMachine || selectedMachineId.peek() || ctx.machineId || null;
@@ -273,10 +301,6 @@ export async function resumeSession(sid, cwd, configDir, agent, machineId, opts
         const q = new URLSearchParams({
           tail: '0',
           compact: '1',
-          // Hub keeps a short-lived compact copy after completed turns.  This
-          // makes a mobile re-open cache-first while the live WS remains the
-          // source for an in-progress answer.
-          cache: 'prefer',
         });
         if (agent) q.set('agent', agent);
         // Also put machine in query for proxies that drop custom headers.
@@ -284,6 +308,9 @@ export async function resumeSession(sid, cwd, configDir, agent, machineId, opts
         return api('GET', `/api/sessions/${sid}/messages?${q}`, undefined, undefined, {
           machineId: mid || undefined,
           dedupe: false,
+          // A transcript can be written shortly after the final stream frame.
+          // Never let an HTTP/browser cache hide a newer user prompt.
+          cache: 'no-store',
         });
       };
 
@@ -299,6 +326,10 @@ export async function resumeSession(sid, cwd, configDir, agent, machineId, opts
       const meta = Array.isArray(data) ? {} : { truncated: data?.truncated, total: data?.total };
       if (msgs.length) historyCache.set(cacheKey, { msgs, context, meta, at: Date.now() });
       else historyCache.delete(cacheKey);
+      // A reconnect can receive new stream frames while this verification read
+      // is in flight. Keep those live frames authoritative; the fresh response
+      // is still retained for the next open.
+      if (isProcessing.peek() || $('messages')?.querySelector('.live-stream')) return;
       paintMessages(msgs, context, meta);
     } catch (e) {
       if (ctx.sessionId !== sid) return;
@@ -308,6 +339,12 @@ export async function resumeSession(sid, cwd, configDir, agent, machineId, opts
     }
   };
 
+  activeExternalHistory = {
+    sessionId: sid,
+    agent: resolvedAgent,
+    refresh: () => loadHistory({ preferCache: false }).catch(() => {}),
+  };
+
   // Never block tab UI on history; chat still loads ASAP in background
   if (skipHistory) {
     loadHistory().catch(() => {});

package/public/shell/templates.js

@@ -79,7 +79,6 @@ export const AppShell = (opts = {}) => {
       <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">
-        <button id="btn-share-session" 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 topbar-icon-btn" title="Meta Agent — 报告 / 问答 / VLM" aria-label="打开 Meta Agent">
           <svg class="topbar-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><path d="m12 2 1.6 6.4L20 10l-6.4 1.6L12 18l-1.6-6.4L4 10l6.4-1.6L12 2Z"/><path d="m19 16 .7 2.3L22 19l-2.3.7L19 22l-.7-2.3L16 19l2.3-.7L19 16Z"/></svg><span class="topbar-icon-label">Agent</span>
@@ -92,6 +91,10 @@ export const AppShell = (opts = {}) => {
         <button id="btn-logout"      class="btn btn-ghost btn-xs border border-base-300">Sign out</button>
       </div>
     </div>
+    <button id="btn-expand-chat-chrome" class="chat-chrome-fab hidden" type="button"
+            title="显示会话工具栏" aria-label="显示会话工具栏">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M7 14l5-5 5 5"/><path d="M5 19h14"/></svg>
+    </button>
     <!-- Fixed panel + backdrop: siblings of topbar so flex layout never clips them -->
     <div id="recent-menu-backdrop" class="hidden fixed inset-0 z-[55] bg-black/40" aria-hidden="true"></div>
     <div id="recent-menu" class="hidden fixed z-[60] w-80 max-h-[min(24rem,70vh)] overflow-y-auto
@@ -255,6 +258,7 @@ 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="session-lock-banner" class="session-lock-banner hidden px-3 py-1.5 text-[11px] text-center border-b"></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>

package/public/shell.js

@@ -310,6 +310,12 @@ export function initShell(opts = {}) {
   initSidebarResize();
   initSidebarToggle();
   initNotifications({ openSession: resumeSession });
+  const setChatChromeCollapsed = (collapsed) => {
+    $('app')?.classList.toggle('chat-chrome-collapsed', collapsed);
+    $('btn-expand-chat-chrome')?.classList.toggle('hidden', !collapsed);
+    localStorage.setItem('chatChromeCollapsed', collapsed ? '1' : '0');
+  };
+  setChatChromeCollapsed(localStorage.getItem('chatChromeCollapsed') === '1');
 
   let sessionsChangedTimer = null;
   document.addEventListener('sessions-changed', () => {
@@ -336,13 +342,17 @@ export function initShell(opts = {}) {
   });
 
   delegate.on('click', '#btn-home', goHome);
-  delegate.on('click', '#btn-share-session', async (_, el) => {
+  delegate.on('click', '#btn-share-session, #btn-share-session-current', async (_, el) => {
     const url = currentSessionShareUrl();
     if (!url) return;
     try {
       await navigator.clipboard.writeText(url);
-      el.textContent = '已复制';
-      setTimeout(() => { el.textContent = '分享'; }, 1400);
+      el.classList.add('is-copied');
+      el.title = '已复制分享链接';
+      setTimeout(() => {
+        el.classList.remove('is-copied');
+        el.title = '复制当前会话分享链接';
+      }, 1400);
     } catch {
       window.prompt('复制会话链接：', url);
     }
@@ -432,6 +442,8 @@ export function initShell(opts = {}) {
     document.getElementById('btn-pwa-install')?.classList.remove('hidden');
   });
   delegate.on('click', '#btn-settings', openSettings);
+  delegate.on('click', '#btn-collapse-chat-chrome', () => setChatChromeCollapsed(true));
+  delegate.on('click', '#btn-expand-chat-chrome', () => setChatChromeCollapsed(false));
   delegate.on('click', '#btn-meta-agent', () => toggleMetaAgent());
   delegate.on('click', '#btn-meta-agent-welcome', () => openMetaAgent('chat'));
   delegate.on('click', '#btn-theme', toggleTheme);
@@ -610,7 +622,7 @@ export function initShell(opts = {}) {
   });
   document.addEventListener('agent-changed', refreshModelSelect);
 
-  delegate.on('click', '#btn-new-session, #btn-new-session-welcome', openNewSessionModal);
+  delegate.on('click', '#btn-new-session, #btn-new-session-current, #btn-new-session-welcome', openNewSessionModal);
   delegate.on('click', '#new-session-cancel', () => $('modal-new-session').close());
   delegate.on('click', '#new-session-start', startNewSession);
   delegate.on('change', '#new-session-agent', updateNewSessionAgentUI);

package/public/state.js

@@ -77,7 +77,7 @@ export const agentFilters   = signal((() => {
 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, hidden, updatedAt }  (title = rename map) */
+/** agent:sessionId → { favorite, notes, title, hidden, branch, updatedAt }  (title = rename map) */
 export const sessionMetaMap = signal({});
 /** Sidebar: show only favorited sessions */
 export const favoritesOnly  = signal(localStorage.getItem('favoritesOnly') === '1');
@@ -107,6 +107,10 @@ export const ctx = {
   ws:          null,
   shellBubble: null,
   configDir:   null,
+  externalSessionReadOnly: false,
+  role: null,
+  username: null,
+  lock: { key: null, token: null, holder: null, held: false, foreign: false },
 };
 
 /** Select edge machine (hub). Keeps signal + ctx + localStorage in sync. */
@@ -129,7 +133,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: '', hidden: false };
+  return m || { favorite: false, notes: '', title: '', hidden: false, branch: null };
 }
 
 /** Display title: user rename map → original display → short id. */

package/public/style.css

@@ -23,13 +23,17 @@
   #chat-input {
     min-height: 32px !important;
     max-height: 72px !important;
-    padding: 0 !important;
+    padding: 8px 12px 4px !important;
     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;
   }
-  .composer-icon-btn { width: 40px; height: 40px; font-size: 19px; }
+  /* Two fixed icon slots: settings + attachment never wrap below the input. */
+  .composer-tools { flex: 0 0 64px; flex-wrap: nowrap; gap: 0; }
+  .composer-icon-btn { width: 32px; height: 32px; min-width: 32px; font-size: 17px; }
+  .composer-actions { flex-wrap: nowrap; gap: .35rem; }
+  .composer-submit { min-width: 0; flex-shrink: 1; }
   .composer-send-btn, .composer-stop-btn { min-height: 40px; height: 40px; }
   .composer-hint { display: none; }
   #chat-opts {
@@ -541,6 +545,37 @@ html.pwa-standalone .ma-panel {
   white-space: pre;
   overflow-x: auto;
 }
+
+/* Markdown files open as a rendered document; source remains one tap away. */
+.file-markdown-toolbar {
+  display: flex;
+  gap: 0.25rem;
+  padding: 0.4rem 1rem;
+  border-bottom: 1px solid color-mix(in oklch, var(--color-base-content) 10%, transparent);
+  background: color-mix(in oklch, var(--color-base-200) 75%, transparent);
+}
+.file-markdown-mode {
+  border: 1px solid transparent;
+  border-radius: 0.375rem;
+  padding: 0.18rem 0.55rem;
+  color: color-mix(in oklch, var(--color-base-content) 58%, transparent);
+  background: transparent;
+  font-size: 0.72rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+.file-markdown-mode:hover {
+  color: var(--color-base-content);
+  background: color-mix(in oklch, var(--color-base-content) 7%, transparent);
+}
+.file-markdown-mode.active {
+  color: var(--color-primary);
+  border-color: color-mix(in oklch, var(--color-primary) 35%, transparent);
+  background: color-mix(in oklch, var(--color-primary) 12%, transparent);
+}
+.file-markdown-preview {
+  min-height: 0;
+}
 /* Reuse chat token palette outside .md so file preview is colored even if CDN theme lags */
 .file-preview .hljs-comment,
 .file-preview .hljs-quote {
@@ -733,6 +768,37 @@ html.pwa-standalone .ma-panel {
 .session-row.session-thin {
   opacity: 0.88;
 }
+.session-row.session-branch {
+  margin-left: calc(var(--branch-depth, 1) * 0.7rem);
+  border-left-style: dashed;
+}
+.session-branch-line {
+  margin-top: 1px;
+  font-size: 9px;
+  line-height: 1.25;
+  font-family: ui-monospace, Menlo, monospace;
+  color: color-mix(in oklch, var(--color-primary) 58%, var(--color-base-content));
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.session-branch-badge {
+  font-size: 9px;
+  color: color-mix(in oklch, var(--color-primary) 82%, var(--color-base-content));
+  border: 1px solid color-mix(in oklch, var(--color-primary) 28%, transparent);
+  border-radius: 3px;
+  padding: 0 3px;
+}
+.session-branch-current {
+  margin-left: auto;
+  max-width: 10rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: ui-monospace, Menlo, monospace;
+  font-size: 10px;
+  color: color-mix(in oklch, var(--color-primary) 72%, var(--color-base-content));
+}
 .session-thin-badge {
   font-size: 9px;
   font-family: ui-monospace, Menlo, monospace;
@@ -1095,7 +1161,7 @@ html.pwa-standalone .ma-panel {
   width: 100%;
   min-height: 32px;
   max-height: 72px;
-  padding: 0;
+  padding: 8px 12px 4px;
   border: 0;
   border-radius: 0.75rem 0.75rem 0 0;
   background: transparent;
@@ -1153,6 +1219,51 @@ html.pwa-standalone .ma-panel {
   flex: 0 0 auto;
 }
 .topbar-icon-label { display: inline; }
+.session-title-actions { margin-left: .1rem; }
+#session-notes-text { min-width: 0; flex: 1 1 4rem; }
+.session-bar-icon,
+#session-notes-bar .session-hide-btn {
+  width: 26px;
+  height: 26px;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: .4rem;
+  background: transparent;
+  color: color-mix(in oklch, var(--color-base-content) 62%, transparent);
+  cursor: pointer;
+}
+.session-bar-icon:hover,
+#session-notes-bar .session-hide-btn:hover { background: color-mix(in oklch, var(--color-base-content) 9%, transparent); color: var(--color-base-content); }
+.session-bar-icon.is-copied { color: var(--color-success); }
+.session-bar-icon svg,
+#session-notes-bar .session-hide-btn svg,
+.chat-chrome-fab svg { width: 15px; height: 15px; }
+.chat-chrome-fab {
+  position: fixed;
+  top: max(.6rem, env(safe-area-inset-top, 0px));
+  left: max(.6rem, env(safe-area-inset-left, 0px));
+  z-index: 40;
+  width: 34px;
+  height: 34px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid color-mix(in oklch, var(--color-base-content) 16%, transparent);
+  border-radius: 999px;
+  color: var(--color-base-content);
+  background: color-mix(in oklch, var(--color-base-100) 88%, transparent);
+  box-shadow: 0 4px 14px color-mix(in oklch, black 24%, transparent);
+}
+.chat-chrome-fab.hidden { display: none; }
+#app.chat-chrome-collapsed #topbar,
+#app.chat-chrome-collapsed #project-view > .flex.bg-base-200,
+#app.chat-chrome-collapsed #project-notes-bar,
+#app.chat-chrome-collapsed #session-notes-bar,
+#app.chat-chrome-collapsed #session-lock-banner,
+#app.chat-chrome-collapsed #ws-banner { display: none !important; }
 .mermaid-diagram {
   overflow-x: auto;
   padding: .75rem .25rem .25rem;
@@ -1304,6 +1415,41 @@ html.pwa-standalone .ma-panel {
   user-select: none;
 }
 .msg-row.user .msg-ts { text-align: right; }
+.msg-row.queued-user-msg > div:not(.msg-ts) {
+  opacity: .76;
+  border-style: dashed;
+}
+.msg-row.cancelled-queued-user-msg > div:not(.msg-ts) {
+  opacity: .48;
+  text-decoration: line-through;
+}
+.msg-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0 0.45rem;
+  opacity: 0;
+  transition: opacity .12s ease;
+}
+.msg-row.assistant:hover .msg-actions,
+.msg-row.assistant:focus-within .msg-actions { opacity: 1; }
+.msg-action-btn {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  color: color-mix(in oklch, var(--color-base-content) 48%, transparent);
+  font-size: 10px;
+  line-height: 1.4;
+  padding: 1px 4px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.msg-action-btn:hover:not(:disabled) {
+  color: var(--color-primary);
+  background: color-mix(in oklch, var(--color-primary) 12%, transparent);
+}
+.msg-action-btn:disabled { cursor: wait; opacity: .55; }
+@media (hover: none) { .msg-actions { opacity: 1; } }
 
 .token-bar {
   display: flex;
@@ -1623,3 +1769,81 @@ html.pwa-standalone .ma-panel {
     padding: 0.05em 0 0.15em 0.5em !important;
   }
 }
+
+/* ── Settings: full-page overlay using the same DaisyUI tokens as #app ── */
+
+html.settings-open #app { visibility: hidden; }
+.set-page {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  background: hsl(var(--b1));
+  color: hsl(var(--bc));
+  overflow: auto;
+  min-height: 100dvh;
+}
+.set-island {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  height: 44px;
+  padding: 0 0.75rem;
+  background: hsl(var(--b2));
+  border-bottom: 1px solid hsl(var(--b3));
+}
+.set-split {
+  display: grid;
+  grid-template-columns: minmax(140px, 200px) minmax(0, 1fr);
+  gap: 0.75rem;
+  max-width: 56rem;
+  margin: 1rem auto 2.5rem;
+  padding: 0 1rem 2rem;
+}
+.set-nav { display: flex; flex-direction: column; gap: 0.25rem; padding-top: 0.25rem; }
+.set-nav-item.is-on {
+  background: hsl(var(--b3));
+  color: hsl(var(--bc));
+}
+.set-main { min-width: 0; }
+.set-panel { padding: 0.25rem 0 1.5rem; }
+.set-fields { display: grid; gap: 0.5rem; }
+.set-list { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
+.set-row {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.65rem 0.75rem;
+  border-radius: 0.5rem;
+  background: hsl(var(--b2));
+  border: 1px solid hsl(var(--b3));
+}
+.set-row-body { flex: 1; min-width: 0; }
+.set-add { display: grid; gap: 0.5rem; }
+.set-token { margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; }
+.set-token textarea { min-height: 7rem; resize: vertical; }
+@media (max-width: 767px) {
+  .set-split { grid-template-columns: 1fr; }
+  .set-nav { flex-direction: row; overflow-x: auto; gap: 0.25rem; }
+  .set-nav-item { white-space: nowrap; }
+}
+
+/* Overlays must not eat keystrokes when hidden */
+#sidebar-overlay.hidden,
+.mermaid-zoom-overlay.hidden,
+#session-lock-banner.hidden {
+  display: none !important;
+  pointer-events: none !important;
+}
+#session-lock-banner {
+  background: color-mix(in oklch, var(--color-warning) 16%, var(--color-base-200));
+  color: color-mix(in oklch, var(--color-warning) 80%, var(--color-base-content));
+  pointer-events: none;
+}
+#chat-input:disabled,
+#chat-input[readonly] {
+  cursor: not-allowed;
+  opacity: .78;
+}

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-v25';
+const CACHE = 'agent-ui-shell-v27';
 const PRECACHE = [
   '/',
   '/index.html',
   '/manifest.webmanifest',
-  '/style.css?v=ui-20',
+  '/style.css?v=ui-22',
   '/style.css',
   '/ui.min.css',
   '/vendor/mini-react.min.js',
@@ -16,7 +16,7 @@ const PRECACHE = [
   '/vendor/mermaid.min.js',
   '/vendor/katex.min.js',
   '/vendor/katex.min.css',
-  '/app.js?v=ui-20',
+  '/app.js?v=ui-22',
   '/icons/icon-192.png',
   '/icons/icon-512.png',
   '/icons/icon-maskable-512.png',