claude-simple 0.2.27 → 0.2.30

package/public/settings.js

@@ -33,11 +33,19 @@ function settingsMarkup() {
       <nav class="set-nav" aria-label="设置分区">
         <button type="button" class="set-nav-item btn btn-ghost btn-sm justify-start is-on" data-set-sec="claude">Claude</button>
         <button type="button" class="set-nav-item btn btn-ghost btn-sm justify-start" data-set-sec="workspaces">Workspaces</button>
+        <button type="button" class="set-nav-item btn btn-ghost btn-sm justify-start" data-set-sec="quota">额度</button>
         <button type="button" class="set-nav-item btn btn-ghost btn-sm justify-start" data-set-sec="users" id="set-nav-users">Users</button>
         <button type="button" class="set-nav-item btn btn-ghost btn-sm justify-start" data-set-sec="password">Password</button>
         <button type="button" class="set-nav-item btn btn-ghost btn-sm justify-start" data-set-sec="mcp">MCP</button>
       </nav>
       <div class="set-main">
+        <section class="set-panel" data-set-panel="quota" hidden>
+          <h2 class="text-lg font-semibold">订阅额度</h2>
+          <p class="text-sm text-base-content/60 mb-4">读取当前机器的 CLI 登录账号。额度每 5 分钟更新，API Key 和第三方网关可能无法提供订阅额度。</p>
+          <button type="button" id="quota-refresh" class="btn btn-sm btn-ghost">刷新</button>
+          <select id="quota-profile" class="select select-bordered select-sm" aria-label="Claude 配置账号"><option value="">Claude 默认账号</option></select>
+          <div id="quota-list" class="set-list mt-3"></div>
+        </section>
         <section class="set-panel" data-set-panel="claude">
           <h2 class="text-lg font-semibold">Claude env</h2>
           <p class="text-sm text-base-content/60 mb-4">Workspace 的 <b>name</b> 对应一套 ANTHROPIC_*。Default 是底，同名覆盖。</p>
@@ -119,6 +127,8 @@ function settingsMarkup() {
 }
 
 function bind() {
+  $('quota-refresh')?.addEventListener('click', loadQuotas);
+  $('quota-profile')?.addEventListener('change', loadQuotas);
   $('set-back')?.addEventListener('click', closeSettings);
   document.querySelectorAll('[data-set-sec]').forEach(btn => {
     btn.addEventListener('click', () => showSection(btn.dataset.setSec));
@@ -144,6 +154,37 @@ function showSection(id) {
   document.querySelectorAll('[data-set-panel]').forEach(p => {
     p.hidden = p.dataset.setPanel !== activeSection;
   });
+  if (activeSection === 'quota') void loadQuotas();
+}
+
+let quotaEpoch = 0;
+async function loadQuotas() {
+  const epoch = ++quotaEpoch;
+  const list = $('quota-list');
+  if (!list) return;
+  list.textContent = '正在读取当前机器的额度…';
+  const machine = selectedMachineId.peek();
+  const profile = $('quota-profile');
+  const selected = profile?.value || '';
+  if (profile) {
+    profile.innerHTML = '<option value="">Claude 默认账号</option>' + (workspacesData.peek() || []).map(w => `<option value="${esc(w.configDir)}">${esc(w.name || w.configDir)}</option>`).join('');
+    profile.value = selected;
+  }
+  if (hubMode.peek() && !machine) { list.textContent = '请先选择机器'; return; }
+  const rows = await Promise.all(['claude', 'grok', 'codex'].map(async agent => {
+    const query = new URLSearchParams({ agent });
+    if (agent === 'claude' && profile?.value) query.set('configDir', profile.value);
+    try { return await api('GET', `/api/agents/quota?${query}`, undefined, undefined, { machineId: machine || undefined }); }
+    catch (e) { return { agent, meters: [], message: e.message }; }
+  }));
+  if (epoch !== quotaEpoch || machine !== selectedMachineId.peek()) return;
+  list.innerHTML = rows.map(row => `<div class="border border-base-300 rounded-lg p-4 mb-3">
+    <h3 class="font-semibold">${esc(row.agent)} ${esc(row.plan || '')}</h3>
+    ${(row.meters || []).map(m => `<div class="mt-3"><div class="text-sm">${esc(m.label)} · 已用 ${esc(m.usedPercent)}% · 剩余 ${esc(m.remainingPercent)}%</div>
+      <progress class="progress progress-primary w-full" max="100" value="${Number(m.usedPercent)}"></progress>
+      ${m.resetsAt ? `<div class="text-xs opacity-60">重置：${esc(new Date(m.resetsAt).toLocaleString())}</div>` : ''}</div>`).join('') || `<p class="text-sm opacity-60 mt-2">${esc(row.message || '暂时无法读取额度')}</p>`}
+    ${row.fetchedAt ? `<div class="text-xs opacity-50 mt-2">更新于 ${esc(new Date(row.fetchedAt).toLocaleString())}</div>` : ''}
+  </div>`).join('');
 }
 
 export function openSettings(section) {

package/public/shell/session-list.js

@@ -10,12 +10,34 @@ import {
   getModelsForAgent, getDefaultModel, getEffortsForModel, getDefaultEffort,
   addCustomModel, removeCustomModel, getCustomModels, setCurrentModel, ctx,
 } from '../state.js';
-import { api, NOT_MODIFIED } from '../api.js';
+import { api } from '../api.js';
 import { getCachedSessions, setCachedSessions, getCachedWorkspaces, setCachedWorkspaces } from '../cache.js';
 import { formatTime, agentBadge, agentCountPills, shortPath } from './util.js';
-import { normalizeMarkdownText } from '../markdown.js';
+import { parseMarkdownWithMath } from '../markdown.js';
 
 
+function sessionsFingerprint(list) {
+  if (!Array.isArray(list) || !list.length) return '';
+  return list.map(s => `${s.sessionId}:${s.updatedAt || 0}:${s.turnCount || 0}:${s.agent || ''}`).join('|');
+}
+
+export function markActiveSessionRow(sessionId, agent) {
+  const wantAgent = agent || 'claude';
+  document.querySelectorAll('#session-list .session-row').forEach(row => {
+    const on = row.dataset.sessionId === sessionId
+      && (row.dataset.sessionAgent || 'claude') === wantAgent;
+    row.classList.toggle('border-primary', on);
+    row.classList.toggle('bg-primary/5', on);
+    row.classList.toggle('border-transparent', !on);
+    const title = row.querySelector('.session-title-text');
+    if (title) {
+      title.classList.toggle('text-primary', on);
+      title.classList.toggle('font-medium', on);
+      title.classList.toggle('text-base-content/85', !on);
+    }
+  });
+}
+
 function normalizeSessions(v) {
   if (Array.isArray(v)) return v;
   if (v && Array.isArray(v.results)) return v.results;
@@ -62,21 +84,47 @@ function orderBranchSessions(sessions) {
   return out;
 }
 
-function sessionsQuery({ hubIndex = false } = {}) {
+const SESSION_PAGE_SIZE = 200;
+let sessionPageCount = 1;
+let sessionListMachine = null;
+let sessionListRequest = 0;
+let sessionListHasMore = false;
+let loadingSessionPage = false;
+
+async function loadMoreSessions() {
+  if (loadingSessionPage) return;
+  loadingSessionPage = true;
+  try {
+    sessionPageCount++;
+    await loadAllSessions();
+  } finally { loadingSessionPage = false; }
+}
+
+document.addEventListener('click', (event) => {
+  if (event.target.closest?.('[data-load-more-sessions]')) loadMoreSessions().catch(console.warn);
+});
+
+function sessionsQuery({ hubIndex = false, offset = 0 } = {}) {
   const q = new URLSearchParams();
-  // Project index is small and should remain complete; the Hub/browser cache
-  // keeps this inexpensive after the first fetch.
-  q.set('limit', '2000');
-  // This is a Hub-local, ETag-enabled catalog read. It never tunnels to an
-  // Edge or invokes the expensive multi-agent session scanner.
-  if (hubIndex && hubMode.peek()) q.set('index', '1');
+  q.set('limit', String(SESSION_PAGE_SIZE));
+  if (offset) q.set('offset', String(offset));
+  // A Hub keeps this catalog locally from Edge deltas.  Always use it in Hub
+  // mode: an Edge scan can be slow while an agent is busy, and must never make
+  // the sidebar (or a page refresh) fail with a 502.
+  if (hubMode.peek() || hubIndex) q.set('index', '1');
   const s = q.toString();
   return s ? `/api/sessions?${s}` : '/api/sessions';
 }
 
 /** @param {{ waitFresh?: boolean, hubIndex?: boolean }} opts waitFresh=false → paint cache first, refresh in bg */
 export async function loadAllSessions({ waitFresh = true, hubIndex = false } = {}) {
-  const cached = normalizeSessions(await getCachedSessions());
+  const machine = selectedMachineId.peek() || null;
+  if (machine !== sessionListMachine) {
+    sessionListMachine = machine;
+    sessionPageCount = 1;
+  }
+  const request = ++sessionListRequest;
+  const cached = normalizeSessions(await getCachedSessions()).slice(0, SESSION_PAGE_SIZE * sessionPageCount);
   if (cached.length) {
     // Hub: if we already selected a machine, prefer cache entries for that machine
     const mid = selectedMachineId.peek();
@@ -89,12 +137,22 @@ export async function loadAllSessions({ waitFresh = true, hubIndex = false } = {
   }
 
   const fetchFresh = async () => {
-    const path = sessionsQuery({ hubIndex });
-    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);
+    const list = [];
+    for (let page = 0; page < sessionPageCount; page++) {
+      const path = sessionsQuery({ hubIndex, offset: page * SESSION_PAGE_SIZE });
+      const fresh = await api('GET', path, undefined, undefined, { machineId: machine || undefined });
+      if (request !== sessionListRequest) return sessionsData.peek();
+      const rows = normalizeSessions(fresh);
+      list.push(...rows);
+      sessionListHasMore = rows.length === SESSION_PAGE_SIZE;
+      if (!sessionListHasMore) break;
+    }
+    const unique = new Map(list.map(s => [`${s.machineId || ''}:${s.agent}:${s.sessionId}`, s]));
+    list.splice(0, list.length, ...unique.values());
+    if (sessionsFingerprint(list) !== sessionsFingerprint(sessionsData.peek())) {
+      sessionsData.value = list;
+      setCachedSessions(list);
+    }
     return list;
   };
 
@@ -375,10 +433,8 @@ export function renderSessionList() {
   const view = sidebarView.value;
   const sessions = Array.isArray(filteredSessions.value) ? filteredSessions.value : [];
   const groups = Array.isArray(projectGroups.value) ? projectGroups.value : [];
-  if (view === 'timeline') {
-    return renderTimeline(sessions);
-  }
-  return renderProjectGroups(groups);
+  const body = view === 'timeline' ? renderTimeline(sessions) : renderProjectGroups(groups);
+  return body + (sessionListHasMore ? '<button class="btn btn-sm btn-ghost w-full" data-load-more-sessions>加载更多会话</button>' : '');
 }
 
 export function syncSidebarChrome() {
@@ -473,7 +529,9 @@ export function mdToHtml(text) {
   if (typeof marked === 'undefined') return `<pre class="whitespace-pre-wrap text-xs">${esc(text)}</pre>`;
   try {
     // Prefer shared renderer if chat has configured marked
-    return marked.parse(normalizeMarkdownText(text), { breaks: true, gfm: true });
+    return parseMarkdownWithMath(text, {
+      fallback: (t) => `<pre class="whitespace-pre-wrap text-xs">${esc(t)}</pre>`,
+    });
   } catch {
     return `<pre class="whitespace-pre-wrap text-xs">${esc(text)}</pre>`;
   }

package/public/shell/session-nav.js

@@ -6,9 +6,10 @@ import {
   selectedMachineId, setSelectedMachine, AGENT_LABELS, ctx, hubMode,
 } from '../state.js';
 import { api } from '../api.js';
+import { getCachedTranscript, setCachedTranscript, recentTranscript } from '../cache.js';
 import { getLastSessionContext, setLastSessionContext } from './session-context.js';
 import {
-  connectWS, clearMessages, appendMsg, appendSystemMsg, renderToolUse,
+  connectWS, clearMessages, beginHistoryRender, endHistoryRender, appendMsg, appendSystemMsg, renderToolUse,
   appendHistoryTokenBar, appendContextBar, flushToolBatch, coerceTs,
   stashComposerDraft, restoreComposerDraft, discardComposerAttachments, parkQueuedMessages, detachProcessingForSessionSwitch, setExternalSessionReadOnly,
 } from '../chat.js';
@@ -111,6 +112,7 @@ export function goHome() {
 
   const topbar = $('topbar-project');
   if (topbar) topbar.textContent = 'Select a session';
+  import('../notes.js').then(({ closeNotes }) => closeNotes({ restore: false })).catch(() => {});
   const welcome = $('welcome');
   if (welcome) {
     welcome.classList.remove('hidden');
@@ -152,6 +154,8 @@ 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;
 
+  import('../notes.js').then(({ closeNotes }) => closeNotes({ restore: false })).catch(() => {});
+
   // Capture before changing ctx, then restore only after the new identity is set.
   stashComposerDraft();
   parkQueuedMessages();
@@ -199,10 +203,9 @@ export async function resumeSession(sid, cwd, configDir, agent, machineId, opts
   // arrive immediately on socket-open and must belong to the new history.
   connectWS();
   switchTab(targetTab);
-  {
-    const cur = sessionsData.peek();
-    sessionsData.value = Array.isArray(cur) ? [...cur] : [];
-  }
+  import('./session-list.js').then(({ markActiveSessionRow }) => {
+    markActiveSessionRow(sid, resolvedAgent);
+  }).catch(() => {});
 
   setLastSessionContext({
     sessionId: sid,
@@ -227,13 +230,43 @@ export async function resumeSession(sid, cwd, configDir, agent, machineId, opts
   });
 
   const label = AGENT_LABELS[resolvedAgent] || resolvedAgent;
-  const cacheKey = `${resolvedMachine || ''}:${resolvedAgent}:${sid}`;
+  const cacheKey = `${ctx.token || ''}:${resolvedMachine || ''}:${resolvedAgent}:${sid}`;
+  let paintEpoch = 0;
+  let requestEpoch = 0;
+  let historyWindow = null;
 
-  const paintMessages = (msgs, context, meta = {}) => {
-    if (ctx.sessionId !== sid) return;
-    $('messages').innerHTML = '';
+  const paintMessages = (msgs, context, meta = {}, prepend = false) => {
+    if (ctx.sessionId !== sid || ctx.agent !== resolvedAgent || (ctx.machineId || null) !== resolvedMachine) return;
+    const epoch = ++paintEpoch;
+    const container = $('messages');
+    const hadRows = !!container.querySelector('.msg-row');
+    const previousTop = container.scrollTop;
+    const previousHeight = container.scrollHeight;
+    const following = !hadRows || container.scrollHeight - container.scrollTop - container.clientHeight < 80;
+    beginHistoryRender();
+    if (meta.oldestIndex > 0) {
+      const older = document.createElement('button');
+      older.className = 'btn btn-sm btn-ghost';
+      older.textContent = '加载更早的消息';
+      older.onclick = async () => {
+        older.disabled = true;
+        try {
+          const q = new URLSearchParams({ tail: '80', compact: '1', before: String(meta.oldestIndex), agent: resolvedAgent });
+          if (resolvedMachine) q.set('machine', resolvedMachine);
+          const page = await api('GET', `/api/sessions/${sid}/messages?${q}`, undefined, undefined, { machineId: resolvedMachine || undefined });
+          if (epoch !== paintEpoch || ctx.sessionId !== sid) return;
+          const merged = [...page.messages, ...msgs];
+          const next = { ...meta, oldestIndex: page.oldestIndex, truncated: page.oldestIndex > 0 };
+          historyWindow = { msgs: merged, context, meta: next };
+          paintMessages(merged, context, next, true);
+        } catch (e) { older.disabled = false; older.textContent = `加载失败，点击重试 (${e.message})`; }
+      };
+      $('messages').appendChild(older);
+    }
+    if (meta.stale) appendSystemMsg('当前显示离线缓存，正在等待机器恢复连接');
     if (!msgs.length) {
       appendSystemMsg(`${label} · ${sid.slice(0, 8)}… — no history`);
+      endHistoryRender();
       return;
     }
     flushToolBatch();
@@ -241,7 +274,7 @@ export async function resumeSession(sid, cwd, configDir, agent, machineId, opts
     const CHUNK = 40;
     let i = 0;
     const paintChunk = () => {
-      if (ctx.sessionId !== sid) return;
+      if (ctx.sessionId !== sid || epoch !== paintEpoch) return;
       const end = Math.min(i + CHUNK, msgs.length);
       for (; i < end; i++) {
         const m = msgs[i];
@@ -256,7 +289,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, historyIndex: i });
+            appendMsg(m.role === 'user' ? 'user' : 'assistant', m.role === 'user' ? 'You' : label, content, { ts, historyIndex: (meta.oldestIndex || 0) + i });
           }
         } else if (typ === 'tool_use' || m.name) {
           renderToolUse({ name: m.name || 'tool', input: m.input ?? m.arguments ?? {} }, { ts });
@@ -277,15 +310,19 @@ export async function resumeSession(sid, cwd, configDir, agent, machineId, opts
         ? ` (showing last ${msgs.length} of ${meta.total || '?'})`
         : '';
       appendSystemMsg(`── ${label} history · ${turnCount} turn${turnCount !== 1 ? 's' : ''}${more} ──`);
+      endHistoryRender(prepend ? previousTop + container.scrollHeight - previousHeight : (following ? null : previousTop));
     };
     paintChunk();
   };
 
   const loadHistory = async ({ preferCache = true } = {}) => {
+    const request = ++requestEpoch;
     // Instant re-open from in-memory cache (never trust empty cache — race/stale)
-    const cached = historyCache.get(cacheKey);
-    if (preferCache && cached && cached.msgs?.length && Date.now() - cached.at < HISTORY_CACHE_TTL) {
-      paintMessages(cached.msgs, cached.context, cached.meta);
+    const cached = historyCache.get(cacheKey) || (preferCache ? await getCachedTranscript(cacheKey) : null);
+    if (request !== requestEpoch || ctx.sessionId !== sid) return;
+    if (preferCache && cached && cached.msgs?.length) {
+      const recent = recentTranscript(cached);
+      paintMessages(recent.msgs, recent.context, recent.meta);
     }
     if (!cached?.msgs?.length) appendSystemMsg(`Loading ${label} history…`);
     try {
@@ -296,10 +333,10 @@ export async function resumeSession(sid, cwd, configDir, agent, machineId, opts
       }
       if (mid && ctx.machineId !== mid) setSelectedMachine(mid);
 
-      // Full history (tail=0); tool inputs compacted server-side (~100 chars each).
+      // Recent messages first; older pages remain available on demand.
       const fetchMsgs = async (agent) => {
         const q = new URLSearchParams({
-          tail: '0',
+          tail: '80',
           compact: '1',
         });
         if (agent) q.set('agent', agent);
@@ -315,6 +352,7 @@ export async function resumeSession(sid, cwd, configDir, agent, machineId, opts
       };
 
       let data = await fetchMsgs(resolvedAgent);
+      if (request !== requestEpoch || ctx.sessionId !== sid) return;
       let msgs = Array.isArray(data) ? data : (data?.messages || []);
       // Prefer stated agent; if empty, retry scanning all agents on the edge.
       if (!msgs.length && resolvedAgent) {
@@ -323,8 +361,21 @@ export async function resumeSession(sid, cwd, configDir, agent, machineId, opts
       }
 
       const context = Array.isArray(data) ? null : (data?.context || null);
-      const meta = Array.isArray(data) ? {} : { truncated: data?.truncated, total: data?.total };
-      if (msgs.length) historyCache.set(cacheKey, { msgs, context, meta, at: Date.now() });
+      if (request !== requestEpoch || ctx.sessionId !== sid) return;
+      const meta = Array.isArray(data) ? {} : { truncated: data?.truncated, total: data?.total, oldestIndex: data?.oldestIndex || 0, stale: data?.stale };
+      if (historyWindow && meta.oldestIndex > historyWindow.meta.oldestIndex && historyWindow.meta.oldestIndex > 0) {
+        const keep = meta.oldestIndex - historyWindow.meta.oldestIndex;
+        if (keep <= historyWindow.msgs.length) {
+          msgs = [...historyWindow.msgs.slice(0, keep), ...msgs];
+          meta.oldestIndex = historyWindow.meta.oldestIndex;
+        }
+      }
+      historyWindow = { msgs, context, meta };
+      if (msgs.length && !meta.stale) {
+        const snapshot = { msgs, context, meta, at: Date.now() };
+        historyCache.set(cacheKey, recentTranscript(snapshot));
+        setCachedTranscript(cacheKey, snapshot).catch(() => {});
+      }
       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
@@ -332,9 +383,8 @@ export async function resumeSession(sid, cwd, configDir, agent, machineId, opts
       if (isProcessing.peek() || $('messages')?.querySelector('.live-stream')) return;
       paintMessages(msgs, context, meta);
     } catch (e) {
-      if (ctx.sessionId !== sid) return;
+      if (ctx.sessionId !== sid || request !== requestEpoch) return;
       historyCache.delete(cacheKey);
-      $('messages').innerHTML = '';
       appendSystemMsg(`${label} · ${sid.slice(0, 8)}… (history unavailable: ${e.message})`);
     }
   };
@@ -406,7 +456,6 @@ function applyProjectPaths(edgeCwd, resolvedMachine, sid) {
 
 // In-memory chat history cache (instant re-open within TTL)
 const historyCache = new Map();
-const HISTORY_CACHE_TTL = 3 * 60 * 1000;
 
 // ── Tabs ──────────────────────────────────────────────────────────────────────
 export function switchTab(name) { currentTab.value = name; }

package/public/shell/templates.js

@@ -85,6 +85,9 @@ export const AppShell = (opts = {}) => {
         <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>
         </button>
+        <button id="btn-notes" class="btn btn-ghost btn-xs border border-base-300 topbar-icon-btn" title="记事" aria-label="记事">
+          <svg class="topbar-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" aria-hidden="true"><path d="M5 4h11l3 3v13a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1Z"/><path d="M8 9h7M8 13h7M8 17h4"/></svg><span class="topbar-icon-label">记事</span>
+        </button>
         <button id="btn-new-session" class="btn btn-ghost btn-xs border border-base-300 topbar-icon-btn" title="New session" aria-label="新建会话">
           <svg class="topbar-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" aria-hidden="true"><circle cx="12" cy="12" r="8"/><path d="M12 8v8M8 12h8"/></svg><span class="topbar-icon-label">New</span>
         </button>

package/public/shell.js

@@ -22,6 +22,7 @@ import {
 } from './chat.js';
 import { syncHash, currentSessionShareUrl } from './router.js';
 import { initSettings, openSettings } from './settings.js';
+import { openNotes } from './notes.js';
 import { openMetaAgent, toggleMetaAgent } from './agent-panel.js';
 import {
   initNotifications, refreshNotifications, toggleNotificationsMenu, closeNotificationsMenu,
@@ -224,14 +225,25 @@ export function initShell(opts = {}) {
     void filteredSessions.value;
     void projectGroups.value;
     void sidebarView.value;
-    void activityLoading.value;
     void activityHits.value;
     void sessionMetaMap.value;
     const el = $('session-list');
     if (!el) return;
     // Keep inline rename input mounted until blur/Enter
     if (el.querySelector('.session-rename-input')) return;
-    el.innerHTML = renderSessionList();
+    const html = renderSessionList();
+    if (el._lastHtml === html) {
+      syncSidebarChrome();
+      return;
+    }
+    const scroll = el.scrollTop;
+    el.innerHTML = html;
+    el._lastHtml = html;
+    el.scrollTop = scroll;
+    syncSidebarChrome();
+  });
+  effect(() => {
+    void activityLoading.value;
     syncSidebarChrome();
   });
 
@@ -443,6 +455,7 @@ export function initShell(opts = {}) {
     document.getElementById('btn-pwa-install')?.classList.remove('hidden');
   });
   delegate.on('click', '#btn-settings', openSettings);
+  delegate.on('click', '#btn-notes', () => openNotes());
   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());

package/public/state.js

@@ -56,7 +56,7 @@ export function setCurrentModel(model, agent = currentAgent.peek(), sessionId =
 }
 
 export const currentAgent      = signal(initialAgent); // 'claude'|'codex'|'grok'|'gemini'|'cursor'
-export const currentModel      = signal('claude-sonnet-4-5');
+export const currentModel      = signal('sonnet');
 export const currentEffort     = signal('');
 // All local agents are trusted by default; users can still choose another mode
 // from the expanded composer options before starting a turn.
@@ -164,10 +164,10 @@ export const AGENT_LABELS = {
 /** Static fallbacks when /api/agents has not loaded yet. */
 export const AGENT_MODELS = {
   claude: [
-    { value: 'claude-sonnet-4-5', label: 'sonnet-4-5' },
-    { value: 'claude-sonnet-4-6', label: 'sonnet-4-6' },
-    { value: 'claude-opus-4-5',   label: 'opus-4-5' },
-    { value: 'claude-haiku-4-5',  label: 'haiku-4-5' },
+    { value: 'fable', label: 'fable' },
+    { value: 'opus', label: 'opus' },
+    { value: 'sonnet', label: 'sonnet' },
+    { value: 'haiku', label: 'haiku' },
   ],
   codex: [
     { value: 'gpt-5.4', label: 'gpt-5.4' },
@@ -204,7 +204,7 @@ export const AGENT_MODELS = {
 };
 
 export const AGENT_DEFAULT_MODEL = {
-  claude: 'claude-sonnet-4-5',
+  claude: 'sonnet',
   codex:  'gpt-5.4',
   grok:   'grok-4.5',
   gemini: 'gemini-3.7-flash-high',
@@ -304,7 +304,7 @@ export function getDefaultModel(agent) {
   const a = (agent || 'claude').toLowerCase();
   const meta = agentsMeta.peek()?.defaults?.[a];
   if (meta?.model) return String(meta.model);
-  return AGENT_DEFAULT_MODEL[a] || getModelsForAgent(a)[0]?.value || 'claude-sonnet-4-5';
+  return AGENT_DEFAULT_MODEL[a] || getModelsForAgent(a)[0]?.value || 'sonnet';
 }
 
 /** Effort levels for current (or given) model under agent. */