@oar-sh/oar 0.9.7 → 0.9.8

package/server/public/app/bootstrap.js

@@ -32,6 +32,7 @@ import {
   openSummaryModal,
   closeSummaryModal,
   refreshSummaryModal,
+  setSummaryModalLeaveHandler,
   syncViewportMetrics,
   isMobileComposerViewport,
   releaseComposerFocusAfterSend,
@@ -120,6 +121,7 @@ import {
   clearImageEditTarget,
   jumpToImageParent,
   flushDeferredMessageRender,
+  conversationHasActiveTurn,
 } from './conversation-view.js';
 import { bindChatSelectionGuard, chatSelectionGuard, isChatInteractionHeld } from './selection-guard.mjs';
 import { loadRepoBrowserTree, openRepoBrowser, closeRepoBrowser, setRepoBrowserSessionInfo, resetWorkspaceRepoBrowserForRootChange } from './attachments-view.js';
@@ -197,8 +199,11 @@ import {
   registerPwaShell,
   updatePwaAppName,
 } from './pwa-install.js';
+import { initScrollbarHover } from './scrollbar-hover.mjs';
 import {
+  autoCompactWindowNotes,
   renderAutoCompactControlHtml,
+  renderAutoCompactNotesHtml,
   renderContextUsageHtml,
   renderThinkingControlHtml,
   thinkingEnabledFromKey,
@@ -207,7 +212,6 @@ import {
 import { renderAttributionControlHtml } from './attribution-control.mjs';
 import {
   autoCompactWindowFromIndex,
-  autoCompactWindowToIndex,
   formatAutoCompactWindowLabel,
 } from './auto-compact-window-options.mjs';
 import { renderPlanUsageHtml, planUsageSubtitle, normalizeUsageProvider } from './plan-usage-view.mjs';
@@ -826,7 +830,11 @@ function initNetworkLifecycleHandling() {
   window.addEventListener('pageshow', () => {
     handleForegroundTransition('pageshow', { immediate: true });
   });
-  window.addEventListener('pagehide', () => {
+  window.addEventListener('pagehide', (event) => {
+    // A page unloaded with the context modal still open (tab closed, app
+    // swiped away, reload) saves the window slider's draft like a modal
+    // close. A page only put aside (`persisted`) keeps its draft.
+    if (!event.persisted) commitAutoCompactDraft({ pageClosing: true });
     // The page is going away; no grace period, suspend immediately.
     cancelBackgroundSuspend();
     setForegroundNetworkWorkEnabled(false);
@@ -3094,18 +3102,37 @@ async function loadUsageSummaryAndRender() {
 // The context modal is rendered from scratch on every refresh, so the slider's
 // conversation binding lives here rather than on the element.
 let autoCompactControlConversationId = '';
-let autoCompactWindowUpdateInFlight = false;
-// The server's last known window for the rendered control. Kept so a rejected
-// PATCH can put the slider back instead of leaving the rejected value on
-// screen until the next refresh.
+// The save in flight, if any: saves run one after another, never side by side.
+let autoCompactWindowUpdateInFlight = null;
+// The server's last known window for the rendered control: what a draft is
+// compared against.
 let autoCompactControlStoredWindow = null;
+// What the last payload said about the running session, for the notes.
+let autoCompactControlSession = { activeWindow: null, deferred: null, usedTokens: null };
+// The slider is a draft while the modal is open: moving it only updates the
+// label and the notes, and the value is saved when the modal is left
+// (setSummaryModalLeaveHandler). `window` undefined = untouched. Kept outside
+// the DOM so a refresh of the open modal keeps the position.
+let autoCompactDraft = { conversationId: '', window: undefined };
+
+function autoCompactNotesOptions(draftWindow, storedWindow = autoCompactControlStoredWindow) {
+  return {
+    draftWindow,
+    storedWindow,
+    activeWindow: autoCompactControlSession.activeWindow,
+    deferred: autoCompactControlSession.deferred,
+    turnRunning: !!autoCompactControlConversationId && conversationHasActiveTurn(autoCompactControlConversationId),
+    usedTokens: autoCompactControlSession.usedTokens,
+  };
+}
 
-// Snaps both the range input and its label back to `window`.
-function setAutoCompactControlValue(window) {
-  const slider = document.getElementById('ctx-autocompact-slider');
-  if (slider) slider.value = String(autoCompactWindowToIndex(window));
+function trackAutoCompactDraft(slider) {
+  const window = autoCompactWindowFromIndex(slider.value);
+  autoCompactDraft = { conversationId: autoCompactControlConversationId, window };
   const label = document.getElementById('ctx-autocompact-value');
   if (label) label.textContent = formatAutoCompactWindowLabel(window);
+  const notes = document.getElementById('ctx-autocompact-notes');
+  if (notes) notes.innerHTML = renderAutoCompactNotesHtml(autoCompactNotesOptions(window));
 }
 
 /**
@@ -3121,18 +3148,37 @@ function initAutoCompactWindowControl() {
     const target = event?.target;
     return target && target.id === 'ctx-autocompact-slider' ? target : null;
   };
-  // Dragging only previews the label; nothing is persisted until the value
-  // settles, matching the settings-modal sliders.
-  body.addEventListener('input', (event) => {
-    const slider = sliderFrom(event);
-    if (!slider) return;
-    const label = document.getElementById('ctx-autocompact-value');
-    if (label) label.textContent = formatAutoCompactWindowLabel(autoCompactWindowFromIndex(slider.value));
-  });
-  body.addEventListener('change', (event) => {
-    const slider = sliderFrom(event);
-    if (!slider) return;
-    void applyAutoCompactWindowSelection(autoCompactWindowFromIndex(slider.value));
+  // Nothing is written while the modal is open; see commitAutoCompactDraft.
+  for (const type of ['input', 'change']) {
+    body.addEventListener(type, (event) => {
+      const slider = sliderFrom(event);
+      if (slider) trackAutoCompactDraft(slider);
+    });
+  }
+}
+
+// Runs when the context modal is left (or re-bound to another conversation):
+// a draft that differs from the stored value is saved; one set back to the
+// stored value sends nothing.
+function commitAutoCompactDraft({ pageClosing = false } = {}) {
+  const { conversationId, window } = autoCompactDraft;
+  autoCompactDraft = { conversationId: '', window: undefined };
+  if (!conversationId || window === undefined) return;
+  if (conversationId === autoCompactControlConversationId && window === autoCompactControlStoredWindow) return;
+  if (pageClosing) {
+    // Sent at once, not queued behind an earlier save: the request has to
+    // leave before the page does.
+    void saveAutoCompactWindow(conversationId, window, '', { pageClosing: true });
+    return;
+  }
+  const notes = autoCompactWindowNotes(autoCompactNotesOptions(window, window));
+  const previous = autoCompactWindowUpdateInFlight || Promise.resolve();
+  const run = previous
+    .catch(() => {})
+    .then(() => saveAutoCompactWindow(conversationId, window, notes.pending));
+  autoCompactWindowUpdateInFlight = run;
+  void run.finally(() => {
+    if (autoCompactWindowUpdateInFlight === run) autoCompactWindowUpdateInFlight = null;
   });
 }
 
@@ -3239,41 +3285,32 @@ async function applyThinkingSelection(axis, key) {
   }
 }
 
-async function applyAutoCompactWindowSelection(autoCompactWindow) {
-  const convId = String(autoCompactControlConversationId || '').trim();
-  const slider = document.getElementById('ctx-autocompact-slider');
-  if (!convId || autoCompactWindowUpdateInFlight) {
-    // Nothing will be written, so leave the control showing what is stored
-    // rather than a position the server never heard about.
-    setAutoCompactControlValue(autoCompactControlStoredWindow);
-    return;
-  }
-  autoCompactWindowUpdateInFlight = true;
-  if (slider) slider.disabled = true;
+async function saveAutoCompactWindow(convId, autoCompactWindow, pendingNote = '', { pageClosing = false } = {}) {
   try {
     // Only the window is sent: the route keeps every unmentioned preference as
     // stored, so this cannot clobber the composer's model/effort choice.
     const response = await updateConversationPreferences(convId, {
       clientId: CLIENT_ID,
       autoCompactWindow,
-    });
+    }, { keepalive: pageClosing });
+    // Nobody is left to tell on a page that is going away.
+    if (pageClosing) return;
     if (!response) throw new Error('Failed to update the auto-compact window');
     // The server, not the slider, decides what got stored (values snap to a
-    // stop), so the control follows the response.
+    // stop).
     const stored = response.autoCompactWindow ?? null;
-    autoCompactControlStoredWindow = stored;
-    setAutoCompactControlValue(stored);
+    if (convId === autoCompactControlConversationId) autoCompactControlStoredWindow = stored;
+    // No note when the running session already uses this value.
+    const when = pendingNote ? ` ${pendingNote}` : '';
     showTransientRelayNotice(stored === null
-      ? 'Auto-compact window back to the model default; applies to the next message.'
-      : `Auto-compact window set to ${formatAutoCompactWindowLabel(stored)} tokens; applies to the next message.`);
+      ? `Auto-compact window back to the model default.${when}`
+      : `Auto-compact window set to ${formatAutoCompactWindowLabel(stored)} tokens.${when}`);
+    // A modal reopened on this conversation meanwhile shows the new value.
+    if (summaryModalState.kind === 'context' && convId === autoCompactControlConversationId) {
+      await refreshSummaryModal();
+    }
   } catch (error) {
-    // The write was refused, so the rejected position is a lie: put the
-    // control back on the last value the server confirmed.
-    setAutoCompactControlValue(autoCompactControlStoredWindow);
     alert(error?.message || 'Failed to update the auto-compact window.');
-  } finally {
-    autoCompactWindowUpdateInFlight = false;
-    if (slider) slider.disabled = false;
   }
 }
 
@@ -3294,7 +3331,33 @@ async function loadContextSummaryAndRender(convId) {
     ? `${providerLabel} session ${sessionId.slice(0, 8)}`
     : (trimmedConvId ? `Conversation ${trimmedConvId.slice(0, 8)}` : 'No conversation selected');
 
-  const usageHtml = renderContextUsageHtml(payload.contextUsage);
+  // The session fields come with the payload when the relay knows them
+  // (older relays send neither, and the notes fall back to draft vs stored).
+  const sessionField = (key) => payload[key] ?? payload.contextUsage?.[key] ?? null;
+  const modelContextLimit = sessionField('modelContextLimit');
+  const usageHtml = renderContextUsageHtml(payload.contextUsage, {
+    compactionWindow: payload.providerType === 'claude',
+    modelContextLimit,
+  });
+  // The slider's writes need the conversation id even when the modal was
+  // opened through an sdk_session_id.
+  const boundConversationId = String(
+    payload.resolvedConversationId || (payload.providerType === 'claude' ? trimmedConvId : '') || '',
+  ).trim();
+  // A draft for another conversation is saved before this one takes over.
+  if (autoCompactDraft.conversationId && autoCompactDraft.conversationId !== boundConversationId) {
+    commitAutoCompactDraft();
+  }
+  autoCompactControlConversationId = boundConversationId;
+  // What the server says is stored right now, refreshed every time the
+  // control is re-rendered: the draft is compared against it.
+  autoCompactControlStoredWindow = payload.autoCompactWindow ?? null;
+  autoCompactControlSession = {
+    activeWindow: sessionField('activeAutoCompactWindow'),
+    deferred: sessionField('autoCompactWindowDeferred'),
+    usedTokens: payload.contextUsage?.totalTokens ?? null,
+  };
+  const draftWindow = autoCompactDraft.conversationId === boundConversationId ? autoCompactDraft.window : undefined;
   // Claude-only: no other provider exposes a compaction window (or any
   // session-settings surface) to steer.
   const autoCompactHtml = payload.providerType === 'claude'
@@ -3310,6 +3373,11 @@ async function loadContextSummaryAndRender(convId) {
         ? (payload.contextUsage.isAutoCompactEnabled ?? null)
         : null,
       maxTokens: payload.contextUsage?.maxTokens ?? null,
+      draftWindow,
+      activeAutoCompactWindow: autoCompactControlSession.activeWindow,
+      autoCompactWindowDeferred: autoCompactControlSession.deferred,
+      turnRunning: autoCompactNotesOptions(draftWindow).turnRunning,
+      usedTokens: autoCompactControlSession.usedTokens,
     })
     : '';
   const thinkingHtml = payload.providerType === 'claude'
@@ -3323,14 +3391,6 @@ async function loadContextSummaryAndRender(convId) {
   const attributionHtml = payload.providerType === 'claude' || payload.providerType === 'claude-cloud'
     ? renderAttributionControlHtml(payload.attribution || null)
     : '';
-  // The slider's writes need the conversation id even when the modal was
-  // opened through an sdk_session_id.
-  autoCompactControlConversationId = String(
-    payload.resolvedConversationId || (payload.providerType === 'claude' ? trimmedConvId : '') || '',
-  ).trim();
-  // Baseline for the failure path below: what the server says is stored right
-  // now, refreshed every time the control is re-rendered.
-  autoCompactControlStoredWindow = payload.autoCompactWindow ?? null;
   thinkingControlStored = {
     enabled: payload.thinkingEnabled !== false,
     display: payload.thinkingDisplay || 'summarized',
@@ -3351,6 +3411,7 @@ async function loadContextSummaryAndRender(convId) {
     refresh: () => loadContextSummaryAndRender(refreshLookupId),
     kind: 'context',
   });
+  setSummaryModalLeaveHandler('context', () => commitAutoCompactDraft());
 }
 
 async function showUsage() {
@@ -4194,11 +4255,15 @@ function refreshClaudeCloudComposerModels() {
 }
 
 function showAuthGate(error = '') {
-  document.getElementById('startup-loading')?.remove();
   document.getElementById('auth-gate').style.display = 'flex';
   document.getElementById('app').classList.remove('visible');
   showAuthError(error);
-  document.getElementById('token-input')?.focus();
+  // The start screen hands its logo over to the box first (installed app);
+  // focusing earlier would open the keyboard and move the box under it.
+  const focusToken = () => document.getElementById('token-input')?.focus();
+  const handover = window.__startupSplash?.toAuth?.();
+  if (handover && window.__startupSplash.animated) void handover.then(focusToken);
+  else focusToken();
 }
 
 // Runs before anything reads MODEL_STORAGE_KEY so the first load after an
@@ -4224,6 +4289,7 @@ async function initApp() {
   setForegroundNetworkWorkEnabled(document.visibilityState === 'visible');
   const sharedThemeBtn = document.getElementById('chat-menu-shared-theme-toggle');
   initTheme();
+  initScrollbarHover();
   initThemeMenuToggle();
   if (sharedThemeBtn && sharedMode) sharedThemeBtn.hidden = false;
   initFontScaling();
@@ -4256,7 +4322,8 @@ async function initApp() {
     void flushConversationDraft(currentConvId);
     closeTmuxInspectorView();
   });
-  document.getElementById('startup-loading')?.remove();
+  // The start screen lies over the app and leaves once its animation is done.
+  void window.__startupSplash?.finish?.();
   document.getElementById('auth-gate').style.display = 'none';
   document.getElementById('app').classList.add('visible');
   initSidebarLayout();

package/server/public/app/context-usage-view.mjs

@@ -134,6 +134,73 @@ function autocompactSourceLabel(source) {
   return AUTOCOMPACT_SOURCE_LABELS[key.toLowerCase()] || key;
 }
 
+// The slider's notes. The window is read by the CLI only when it starts, so
+// a new value takes effect through one session restart before a message, as
+// soon as nothing is running.
+export const AUTO_COMPACT_NOTE_TEXT = Object.freeze({
+  compactNext: 'The conversation will be compacted on the next message.',
+  afterTurn: 'Applies after the current turn.',
+  afterBackground: 'Applies when background work has finished.',
+  nextMessage: 'Applies on the next message (the session restarts once).',
+});
+
+function normalizeDeferred(value) {
+  const key = String(value || '').trim().toLowerCase();
+  return key === 'turn' || key === 'background' || key === 'next-message' ? key : null;
+}
+
+/**
+ * Which notes sit under the slider.
+ *
+ * - `warning`: the draft is a fixed window below the tokens already in use, so
+ *   the next message starts with a compaction.
+ * - `pending`: what is on the slider is not what the running session uses
+ *   yet — an unsaved draft, a stored value the session was not started with
+ *   (`activeWindow`, known only as a number), or a change the relay reports
+ *   as held back (`deferred`). Worded by what it waits for. Payloads without
+ *   the session fields only ever compare draft and stored.
+ *
+ * @returns {{ warning: string, pending: string }}
+ */
+export function autoCompactWindowNotes({
+  draftWindow,
+  storedWindow = null,
+  activeWindow = null,
+  deferred = null,
+  turnRunning = false,
+  usedTokens = null,
+} = {}) {
+  const stored = parseAutoCompactWindow(storedWindow);
+  const draft = draftWindow === undefined ? stored : parseAutoCompactWindow(draftWindow);
+  const active = toNullableNumber(activeWindow);
+  const held = normalizeDeferred(deferred);
+  const used = toNullableNumber(usedTokens);
+  const warning = draft !== null && used !== null && draft < used ? AUTO_COMPACT_NOTE_TEXT.compactNext : '';
+  const differs = draft !== stored
+    || (active !== null && parseAutoCompactWindow(active) !== stored)
+    || held !== null;
+  let pending = '';
+  if (differs) {
+    if (held === 'turn' || turnRunning) pending = AUTO_COMPACT_NOTE_TEXT.afterTurn;
+    else if (held === 'background') pending = AUTO_COMPACT_NOTE_TEXT.afterBackground;
+    else pending = AUTO_COMPACT_NOTE_TEXT.nextMessage;
+  }
+  return { warning, pending };
+}
+
+/** The notes block's inner HTML (re-rendered live while the slider moves). */
+export function renderAutoCompactNotesHtml(options = {}) {
+  const { warning, pending } = autoCompactWindowNotes(options);
+  return [
+    warning
+      ? `<div class="ctx-autocompact-note ctx-autocompact-warning" data-autocompact-note="compact-next">${escapeHtml(warning)}</div>`
+      : '',
+    pending
+      ? `<div class="ctx-autocompact-note" data-autocompact-note="pending">${escapeHtml(pending)}</div>`
+      : '',
+  ].join('');
+}
+
 /**
  * The Claude-only auto-compact window control: a snap-stop slider over
  * AUTO_COMPACT_WINDOW_STOPS plus the measured effective threshold.
@@ -142,8 +209,10 @@ function autocompactSourceLabel(source) {
  * trustworthy model-limit field. `rawMaxTokens` tracks the ACTIVE setting, not
  * the model's own window (probed on claude-opus-5[1m]: no setting → 1000000,
  * setting 100000 → 100000), so annotating from it told a user who had just
- * pinned 100k that every larger stop was pointless. Applied on the next
- * message delivery, which is why there is no live preview of the effect.
+ * pinned 100k that every larger stop was pointless.
+ *
+ * The slider is a draft while the modal is open (`draftWindow`, defaulting to
+ * the stored window); the caller saves it when the modal closes.
  *
  * `isAutoCompactEnabled` is tri-state on purpose: `null`/`undefined` means the
  * runtime has not reported yet (no context-usage snapshot exists before the
@@ -158,9 +227,23 @@ export function renderAutoCompactControlHtml({
   autocompactSource = null,
   isAutoCompactEnabled = null,
   maxTokens = null,
+  draftWindow = undefined,
+  activeAutoCompactWindow = null,
+  autoCompactWindowDeferred = null,
+  turnRunning = false,
+  usedTokens = null,
 } = {}) {
-  const window = parseAutoCompactWindow(autoCompactWindow);
+  const stored = parseAutoCompactWindow(autoCompactWindow);
+  const window = draftWindow === undefined ? stored : parseAutoCompactWindow(draftWindow);
   const index = autoCompactWindowToIndex(window);
+  const notesHtml = renderAutoCompactNotesHtml({
+    draftWindow: window,
+    storedWindow: stored,
+    activeWindow: activeAutoCompactWindow,
+    deferred: autoCompactWindowDeferred,
+    turnRunning,
+    usedTokens,
+  });
 
   const threshold = toNullableNumber(autoCompactThreshold);
   const sourceLabel = autocompactSourceLabel(autocompactSource);
@@ -195,7 +278,7 @@ export function renderAutoCompactControlHtml({
       >
       <div class="ctx-autocompact-effective">Effective: ${effective}</div>
       ${disabledNote}
-      <div class="ctx-autocompact-note">Applied on the next message in this conversation.</div>
+      <div id="ctx-autocompact-notes" class="ctx-autocompact-notes">${notesHtml}</div>
     </div>
   `;
 }
@@ -267,20 +350,56 @@ ${renderThinkingButtons('display', THINKING_DISPLAY_CHOICES, displayKey)}
   `;
 }
 
+// A model limit is a round figure: 1M rather than 1.0M.
+function formatModelLimit(value) {
+  const n = toNullableNumber(value);
+  if (n === null) return '—';
+  if (Math.abs(n) >= 1_000_000) return `${(n / 1_000_000).toFixed(1).replace(/\.0$/, '')}M`;
+  return formatCompactTokens(n);
+}
+
+/**
+ * The headline of a Claude session, whose snapshot max is the compaction
+ * window rather than the model's limit:
+ * `60.9k used · compaction window 100.0k · model limit 1M` (the limit only
+ * when known).
+ */
+export function formatCompactionWindowHeadline({ totalTokens, maxTokens, modelContextLimit = null } = {}) {
+  if (toNullableNumber(totalTokens) === null || toNullableNumber(maxTokens) === null) return '';
+  const parts = [
+    `${formatCompactTokens(totalTokens)} used`,
+    `compaction window ${formatCompactTokens(maxTokens)}`,
+  ];
+  if (toNullableNumber(modelContextLimit) !== null && Number(modelContextLimit) > 0) {
+    parts.push(`model limit ${formatModelLimit(modelContextLimit)}`);
+  }
+  return parts.join(' · ');
+}
+
 /**
  * @param {object|null} usage the `contextUsage` field of an /api/context response
+ * @param {object} [options]
+ * @param {boolean} [options.compactionWindow] the max is a compaction window
+ *   (Claude): the headline names it, plus `modelContextLimit` when known
  * @returns {string} modal body HTML, or '' when there is nothing to render
  */
-export function renderContextUsageHtml(usage) {
+export function renderContextUsageHtml(usage, { compactionWindow = false, modelContextLimit = null } = {}) {
   if (!usage || typeof usage !== 'object') return '';
   const categories = Array.isArray(usage.categories) ? usage.categories : [];
   const hasTotals = toNullableNumber(usage.totalTokens) !== null
     && toNullableNumber(usage.maxTokens) !== null;
   if (!categories.length && !hasTotals) return '';
 
-  const headline = hasTotals
-    ? `${formatCompactTokens(usage.totalTokens)} / ${formatCompactTokens(usage.maxTokens)} tokens (${formatUsagePercent(usage.percentage, { digits: 0 })})`
-    : '';
+  let headline = '';
+  if (hasTotals) {
+    headline = compactionWindow
+      ? formatCompactionWindowHeadline({
+        totalTokens: usage.totalTokens,
+        maxTokens: usage.maxTokens,
+        modelContextLimit,
+      })
+      : `${formatCompactTokens(usage.totalTokens)} / ${formatCompactTokens(usage.maxTokens)} tokens (${formatUsagePercent(usage.percentage, { digits: 0 })})`;
+  }
 
   const rows = categories.map((category) => renderRow(category)).join('');
   const freeRow = toNullableNumber(usage.freeTokens) !== null

package/server/public/app/conversation-view.js

@@ -88,8 +88,14 @@ import {
   normalizeRelayActivityEntry,
   promotedCompactBoundaryEntry,
   relayActivityEntryText,
+  visibleActivityEntries,
 } from './activity-replay-state.mjs';
-import { SEPARATOR_CLASS, syncSeparatorRail, syncTranscriptSeparators } from './transcript-separators.mjs';
+import {
+  COMPACT_PENDING_STAMP,
+  SEPARATOR_CLASS,
+  syncSeparatorRail,
+  syncTranscriptSeparators,
+} from './transcript-separators.mjs';
 import { ABSORBED_MSG_CLASS, STEER_MARKER_CLASS_BY_KIND, syncSteeredTurnMerge } from './steered-turn-merge.mjs';
 import { resolveSubagentFold, subagentFoldSummary, toggledSubagentFoldChoice } from './subagent-fold.mjs';
 import { deriveComposerControlState, hasComposerDraft, hasUploadingAttachments } from './composer-control-state.mjs';
@@ -1338,12 +1344,14 @@ function createMessageNode(msg, msgId = null, force = false) {
   // break row immediately above this message (syncTranscriptSeparators reads
   // the stamp), so it must not also show up inside the bubble's activity list.
   // Only the promoted (last) boundary is hidden — see renderActivityMarkup.
+  // A rendered row is a finished message, so a compaction start without an
+  // end draws no line here (the live bubble owns the running one).
   const promotedBoundaryEntry = promotedCompactBoundaryEntry(activities);
   const compactBoundary = compactBoundaryFromActivities(activities);
   if (compactBoundary) {
     div.dataset.compactBoundary = `${compactBoundary.preTokens ?? ''}|${compactBoundary.postTokens ?? ''}`;
   }
-  if (activities.some((item) => item !== promotedBoundaryEntry)) div.classList.add('msg-with-activity');
+  if (visibleActivityEntries(activities, promotedBoundaryEntry).length) div.classList.add('msg-with-activity');
   const thoughts = Array.isArray(msg.thoughts) ? msg.thoughts.filter((t) => t && String(t.text || '').trim()) : [];
   const attachmentHtml = attachments.length ? renderAttachmentMarkup(attachments, { messageId: msgId }) : '';
   const subagentRuns = Array.isArray(msg.subagentRuns) ? msg.subagentRuns.filter(Boolean) : [];
@@ -1479,7 +1487,15 @@ function insertMessageNode(node, insertAfterId = null) {
   const anchorId = String(insertAfterId || '').trim();
   const anchor = anchorId ? el.querySelector(`[data-message-id="${anchorId}"]`) : null;
   if (anchor && anchor.parentNode === el) {
-    const next = anchor.nextSibling;
+    let next = anchor.nextSibling;
+    // The line of a compaction that ran in this turn sits between the user
+    // message and its live bubble; the reply lands under it, so the
+    // separator pass relabels that line instead of replacing it.
+    if (next?.nodeType === 1
+      && next.classList?.contains(SEPARATOR_CLASS)
+      && next.dataset?.separatorKey === `compact:${anchorId}`) {
+      next = next.nextSibling;
+    }
     if (next) el.insertBefore(node, next);
     else el.appendChild(node);
   } else {
@@ -1604,11 +1620,12 @@ export function renderActivityMarkup(activities, promotedBoundaryEntry = undefin
   // ones stay visible here as prose rather than disappearing from the
   // transcript altogether (one break row per message is all the separator
   // planner can place).
+  // A compaction's start and cancel steps are never prose either.
   const list = Array.isArray(activities) ? activities : [];
   const promoted = promotedBoundaryEntry === undefined
     ? promotedCompactBoundaryEntry(list)
     : promotedBoundaryEntry;
-  const visible = list.filter((item) => item !== promoted);
+  const visible = visibleActivityEntries(list, promoted);
   const progress = visible.filter((item) => relayActivityEntryText(item).startsWith('● '));
   const tools = visible.filter((item) => !relayActivityEntryText(item).startsWith('● '));
   const progressHtml = progress.length
@@ -1711,10 +1728,16 @@ function anchorThinkingBubble(div, messageId) {
   const id = String(messageId || '').trim();
   const target = id ? el.querySelector(`[data-message-id="${id}"]`) : null;
   if (target && target.parentNode === el) {
-    if (target.nextSibling === div) return;
+    // The bubble's own compaction line sits between the two.
+    let follower = target.nextSibling;
+    while (follower && follower !== div && follower.classList?.contains('transcript-separator')) {
+      follower = follower.nextSibling;
+    }
+    if (follower === div) return;
     const next = target.nextSibling;
     if (next) el.insertBefore(div, next);
     else el.appendChild(div);
+    if (div.dataset.compactBoundary) syncSeparatorsNow();
   } else if (div.parentNode !== el) {
     el.appendChild(div);
   }
@@ -1771,11 +1794,13 @@ export function showThinking(messageId = null, autoScroll = true) {
         <div class="thinking-thoughts-list"></div>
       </details>
       <div id="thinking-stream" class="thinking-stream" hidden></div>
+      <div class="thinking-compacting-note" hidden>Compacting the conversation…</div>
       <div class="dots"><span></span><span></span><span></span></div>
       <div id="thinking-activity" class="thinking-activity"></div>
       <div class="subagent-bubbles-container" data-subagent-bubbles-root="1"></div>
     </div>`;
   anchorThinkingBubble(div, nextMessageId);
+  syncThinkingCompaction(div);
   renderThinkingThoughts();
   renderThinkingStream();
   // A board the turn has posted already lives in its live bubble.
@@ -1788,8 +1813,33 @@ export function showThinking(messageId = null, autoScroll = true) {
 export function removeThinking() {
   thinkingMessageId = null;
   lastInFlightSnapshotKey = '';
+  const wasCompacting = !!document.getElementById('thinking-indicator')?.dataset?.compactBoundary;
   unobserveThinkingBubble();
   document.getElementById('thinking-indicator')?.remove();
+  // The bubble's compaction line goes with it, but only after the
+  // caller's same-tick work: a reply appended right after this call takes
+  // the line over (relabelled in place) instead of it being dropped first.
+  if (wasCompacting) queueMicrotask(syncSeparatorsNow);
+}
+
+// The live turn's compaction line: the bubble stamps the turn's compaction
+// for the separator pass — "Compacting context…" while the last compaction
+// entry is a start without an end, the final label once the boundary is in —
+// so the line sits above the bubble and the reply takes it over unchanged.
+// The bubble's own note shows only while it runs.
+function syncThinkingCompaction(bubble = document.getElementById('thinking-indicator')) {
+  if (!bubble) return;
+  const items = thinkingMessageId ? (relayActivities.get(thinkingMessageId) || []) : [];
+  const boundary = compactBoundaryFromActivities(items, { processing: true });
+  const note = bubble.querySelector('.thinking-compacting-note');
+  if (note) note.hidden = !boundary?.pending;
+  const stamp = !boundary
+    ? ''
+    : (boundary.pending ? COMPACT_PENDING_STAMP : `${boundary.preTokens ?? ''}|${boundary.postTokens ?? ''}`);
+  if ((bubble.dataset.compactBoundary || '') === stamp) return;
+  if (stamp) bubble.dataset.compactBoundary = stamp;
+  else delete bubble.dataset.compactBoundary;
+  if (bubble.parentNode) syncSeparatorsNow();
 }
 
 // Stop is one tap away on a sticky header, so a stray touch must not kill a
@@ -1955,6 +2005,7 @@ export function renderThinkingActivities() {
   if (!selectionIntersectsNode(box)) {
     patchActivityList(box, mainExpected, 'thinking-activity-item');
   }
+  syncThinkingCompaction();
   for (const [subagentRunId, expected] of bySubagentRun) {
     const bubble = ensureSubagentBubble(subagentRunId);
     const runBox = bubble?.querySelector('.subagent-activity');
@@ -2060,8 +2111,12 @@ export function appendThinkingActivity(item, subagentRunId = null, autoScroll =
   );
   if (!entry) return;
   // Same rule as renderThinkingActivities: a boundary becomes a break row on
-  // the persisted message, so it never shows as live prose.
-  if (isCompactBoundaryActivityEntry(entry)) return;
+  // the persisted message, so it never shows as live prose. Every
+  // compaction step does move the live turn's compaction line, though.
+  if (isCompactBoundaryActivityEntry(entry)) {
+    syncThinkingCompaction();
+    return;
+  }
   const decorated = decorateActivityText(entry.text);
 
   if (subagentRunId) {

package/server/public/app/pwa-install.js

@@ -52,6 +52,11 @@ function shouldUseImmersiveTopLayout() {
 function syncThemeColor(immersive) {
   const meta = document.querySelector('meta[name="theme-color"]');
   if (!meta) return;
+  // Day mode keeps the white the head script (and a Theme change) set.
+  if (document.documentElement.getAttribute('data-theme') === 'light') {
+    meta.setAttribute('content', '#ffffff');
+    return;
+  }
   meta.setAttribute('content', immersive ? THEME_COLOR_IMMERSIVE : THEME_COLOR_BASE);
 }