claude-simple 0.2.28 → 0.2.30

package/public/math.js

@@ -1,5 +1,137 @@
-// KaTeX enhancement for Markdown output. The parser deliberately runs after
-// Marked so fenced code and Mermaid source stay literal.
+// KaTeX enhancement for Markdown output. Math is extracted before Marked so
+// `\[...\]` is not treated as an escaped bracket and `_` inside TeX is not
+// turned into emphasis. A leftover pass still runs on the DOM for any tokens
+// that survive as text.
+
+const LATEXISH = /\\[a-zA-Z]+|[_^]\{|\\[,;!]|\\[{}()[\]]|\\leq\b|\\geq\b|\\neq\b|\\in\b|\\sum\b|\\int\b|\\frac\b|\\min\b|\\max\b|\\mathrm\b|\\text\b|\\left\b|\\right\b/;
+
+export function looksLikeLatex(s) {
+  return LATEXISH.test(String(s || ''));
+}
+
+function htmlEscape(s) {
+  return String(s)
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
+}
+
+function atLineStart(text, i) {
+  return i === 0 || text[i - 1] === '\n';
+}
+
+function matchFence(text, i) {
+  if (atLineStart(text, i) && (text.startsWith('```', i) || text.startsWith('~~~', i))) {
+    const fence = text.startsWith('```', i) ? '```' : '~~~';
+    const close = text.indexOf('\n' + fence, i + 3);
+    if (close === -1) return { end: text.length };
+    const after = close + 1 + fence.length;
+    return { end: after };
+  }
+  if (text[i] === '`') {
+    let n = 1;
+    while (text[i + n] === '`') n++;
+    let j = i + n;
+    while (j < text.length) {
+      if (text[j] === '`') {
+        let k = 0;
+        while (text[j + k] === '`') k++;
+        if (k === n) return { end: j + k };
+        j += k;
+        continue;
+      }
+      j++;
+    }
+    return { end: i + n };
+  }
+  return null;
+}
+
+function matchMath(text, i) {
+  const rest = text.slice(i);
+
+  if (rest.startsWith('$$')) {
+    const end = rest.indexOf('$$', 2);
+    if (end >= 2) {
+      const body = rest.slice(2, end);
+      if (body.trim()) return { body, display: true, end: i + end + 2 };
+    }
+  }
+
+  if (rest.startsWith('\\[')) {
+    const end = rest.indexOf('\\]', 2);
+    if (end >= 2) {
+      const body = rest.slice(2, end);
+      if (body.trim()) return { body, display: true, end: i + end + 2 };
+    }
+  }
+
+  if (rest.startsWith('\\(')) {
+    const end = rest.indexOf('\\)', 2);
+    if (end >= 2) {
+      const body = rest.slice(2, end);
+      if (body.trim()) return { body, display: false, end: i + end + 2 };
+    }
+  }
+
+  if (rest[0] === '$' && rest[1] !== '$') {
+    const m = rest.match(/^\$([^$\n]|\\\$)+?(?<!\s)\$/);
+    if (m && m[0][1] !== ' ') {
+      const body = m[0].slice(1, -1);
+      if (body.trim()) return { body, display: false, end: i + m[0].length };
+    }
+  }
+
+  if (atLineStart(text, i)) {
+    const block = rest.match(/^[ \t]*\[[ \t]*\n([\s\S]*?)\n[ \t]*\][ \t]*(?=\n|$)/);
+    if (block && looksLikeLatex(block[1])) {
+      return { body: block[1], display: true, end: i + block[0].length };
+    }
+    const line = rest.match(/^[ \t]*\[([^\]\n]+)\](?!\()/);
+    if (line && looksLikeLatex(line[1])) {
+      return { body: line[1], display: true, end: i + line[0].length };
+    }
+  }
+
+  return null;
+}
+
+export function protectMath(src) {
+  const slots = [];
+  const text = String(src ?? '');
+  let out = '';
+  let i = 0;
+  while (i < text.length) {
+    const fence = matchFence(text, i);
+    if (fence) {
+      out += text.slice(i, fence.end);
+      i = fence.end;
+      continue;
+    }
+    const math = matchMath(text, i);
+    if (math) {
+      const id = slots.length;
+      slots.push({ body: math.body, display: math.display });
+      out += `@@MATH${id}@@`;
+      i = math.end;
+      continue;
+    }
+    out += text[i];
+    i++;
+  }
+  return { text: out, slots };
+}
+
+export function restoreMath(html, slots) {
+  if (!slots?.length) return html;
+  return String(html).replace(/@@MATH(\d+)@@/g, (full, id) => {
+    const slot = slots[Number(id)];
+    if (!slot) return full;
+    const open = slot.display ? '\\[' : '\\(';
+    const close = slot.display ? '\\]' : '\\)';
+    return htmlEscape(`${open}${slot.body}${close}`);
+  });
+}
 
 function ignored(node) {
   return node.parentElement?.closest('pre, code, .mermaid-diagram, .katex, script, style');
@@ -10,9 +142,9 @@ function nextToken(text, from) {
     { re: /\\\[([\s\S]+?)\\\]/g, display: true },
     { re: /\$\$([\s\S]+?)\$\$/g, display: true },
     { re: /\\\(([\s\S]+?)\\\)/g, display: false },
-    // A closing dollar must not be escaped or preceded by whitespace. This
-    // leaves ordinary currency such as "$5 and $6" untouched.
     { re: /(?<!\\)\$([^$\n]|\\\$)+?(?<!\s)(?<!\\)\$/g, display: false },
+    { re: /(?:^|\n)[ \t]*\[[ \t]*\n([\s\S]*?)\n[ \t]*\][ \t]*(?=\n|$)/g, display: true, latex: true },
+    { re: /(?:^|\n)[ \t]*\[([^\]\n]+\\[a-zA-Z{}_^][^\]\n]*)\](?!\()/g, display: true, latex: true },
   ];
   let best = null;
   for (const pattern of patterns) {
@@ -20,10 +152,16 @@ function nextToken(text, from) {
     const match = pattern.re.exec(text);
     if (!match || (best && match.index >= best.match.index)) continue;
     const raw = match[0];
-    const body = raw.startsWith('\\[') || raw.startsWith('\\(')
-      ? raw.slice(2, -2)
-      : raw.startsWith('$$') ? raw.slice(2, -2) : raw.slice(1, -1);
+    let body;
+    if (match[1] != null && (pattern.latex || raw.startsWith('\\[') || raw.startsWith('\\(') || raw.startsWith('$$') || raw.startsWith('$'))) {
+      body = match[1];
+    } else {
+      body = raw.startsWith('\\[') || raw.startsWith('\\(')
+        ? raw.slice(2, -2)
+        : raw.startsWith('$$') ? raw.slice(2, -2) : raw.slice(1, -1);
+    }
     if (!body.trim()) continue;
+    if (pattern.latex && !looksLikeLatex(body)) continue;
     best = { match, body, display: pattern.display };
   }
   return best;

package/public/pwa.js

@@ -69,7 +69,7 @@ export function initPwa() {
 
   // Register after first paint so install doesn't compete with boot.
   const register = () => {
-    navigator.serviceWorker.register('/sw.js', { scope: '/' })
+    navigator.serviceWorker.register('/sw.js?v=33', { scope: '/' })
       .then((reg) => {
         reg.addEventListener('updatefound', () => {
           const sw = reg.installing;

package/public/scroll-follow.js

@@ -0,0 +1,78 @@
+/** Pure helpers for chat scroll-follow. Keep reading history from being yanked. */
+
+export const NEAR_BOTTOM_PX = 80;
+
+export function isNearBottom(el, threshold = NEAR_BOTTOM_PX) {
+  if (!el) return true;
+  return el.scrollHeight - el.scrollTop - el.clientHeight < threshold;
+}
+
+/** Wheel toward older messages (negative deltaY) unpins immediately. */
+export function followAfterWheel(deltaY, following) {
+  if (deltaY < 0) return false;
+  return following;
+}
+
+export function followAfterScroll(nearBottom) {
+  return nearBottom;
+}
+
+export function shouldStick({ force = false, following = true, userScrolling = false } = {}) {
+  if (force) return true;
+  if (userScrolling) return false;
+  return following;
+}
+
+/**
+ * Bind a messages container. Returns { stick, setFollowing, isFollowing, destroy }.
+ */
+export function bindScrollFollow(el) {
+  let following = true;
+  let userScrolling = false;
+  let touchStartY = 0;
+
+  const onScroll = () => {
+    following = isNearBottom(el);
+    userScrolling = false;
+  };
+  const onWheel = (e) => {
+    following = followAfterWheel(e.deltaY, following);
+    if (e.deltaY < 0) userScrolling = true;
+  };
+  const onTouchStart = (e) => {
+    touchStartY = e.touches?.[0]?.clientY || 0;
+  };
+  const onTouchMove = (e) => {
+    const y = e.touches?.[0]?.clientY || 0;
+    if (y - touchStartY > 8) {
+      following = false;
+      userScrolling = true;
+    }
+  };
+
+  el.addEventListener('scroll', onScroll, { passive: true });
+  el.addEventListener('wheel', onWheel, { passive: true });
+  el.addEventListener('touchstart', onTouchStart, { passive: true });
+  el.addEventListener('touchmove', onTouchMove, { passive: true });
+
+  return {
+    stick(force = false) {
+      if (shouldStick({ force, following, userScrolling })) {
+        el.scrollTop = el.scrollHeight;
+        following = true;
+      }
+    },
+    setFollowing(v) {
+      following = !!v;
+    },
+    isFollowing() {
+      return following;
+    },
+    destroy() {
+      el.removeEventListener('scroll', onScroll);
+      el.removeEventListener('wheel', onWheel);
+      el.removeEventListener('touchstart', onTouchStart);
+      el.removeEventListener('touchmove', onTouchMove);
+    },
+  };
+}

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,10 +10,10 @@ 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) {
@@ -84,11 +84,30 @@ 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');
+  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.
@@ -99,7 +118,13 @@ function sessionsQuery({ hubIndex = false } = {}) {
 
 /** @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();
@@ -112,10 +137,18 @@ 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);
+    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);
@@ -400,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() {
@@ -498,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';
@@ -229,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();
@@ -243,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];
@@ -258,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 });
@@ -279,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 {
@@ -298,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);
@@ -317,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) {
@@ -325,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
@@ -334,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})`);
     }
   };
@@ -408,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; }