@oar-sh/oar 0.9.7 → 0.9.9

package/server/public/app/pinned-messages-view.mjs

@@ -0,0 +1,253 @@
+// Pinned messages: the per-conversation pin list, the 📍 header button with
+// its count, and the list modal (the shared summary modal, kind
+// 'pinned-messages'). Fed by the conversation payload's `pins` on load and by
+// the `conversation_pins_updated` socket event (REPLACE semantics per
+// conversation), so a pin set on another device shows here without a reload.
+// This list is also what a bubble's Pin / Unpin label is drawn from.
+
+import {
+  IS_SHARED_VIEW,
+  closeSummaryModal,
+  escHtml,
+  fmtDate,
+  openSummaryModal,
+  renderSummaryModalContent,
+  showTransientRelayNotice,
+  summaryModalState,
+} from './store.js';
+import { updateMessagePin } from './api-client.js';
+
+export const PINNED_MESSAGES_MODAL_KIND = 'pinned-messages';
+
+const pinsByConversation = new Map();
+// The relay numbers its pin lists. A conversation load that left before a pin
+// change can arrive after the change's own socket event: the older list must
+// not win, or the page would stay wrong until the next load.
+const pinRevisionByConversation = new Map();
+const pinTogglesInFlight = new Set();
+let currentConversationId = null;
+let modalBodyBound = false;
+// The transcript lives in conversation-view.js and journal-view.js, which
+// import this module; they hand their side in through initPinnedMessagesView.
+let handlers = {
+  openConversation: null,
+  focusMessage: null,
+  syncRenderedPinState: null,
+};
+
+function normalizePins(pins) {
+  return (Array.isArray(pins) ? pins : [])
+    .map((pin) => ({ ...pin, messageId: String(pin?.messageId || '').trim() }))
+    .filter((pin) => pin.messageId);
+}
+
+export function getConversationPins(conversationId) {
+  return pinsByConversation.get(String(conversationId || '').trim()) || [];
+}
+
+export function isMessagePinned(conversationId, messageId) {
+  const id = String(messageId || '').trim();
+  return !!id && getConversationPins(conversationId).some((pin) => pin.messageId === id);
+}
+
+export function pinnedCountLabel(count) {
+  const total = Number(count) || 0;
+  return total ? `${total} pinned` : '';
+}
+
+function pinRoleLabel(role) {
+  return String(role || '').trim().toLowerCase() === 'user' ? 'You' : 'Agent';
+}
+
+export function renderPinnedListHtml(pins) {
+  const list = normalizePins(pins);
+  if (!list.length) {
+    return '<div class="pinned-empty">No pinned messages. Use Pin on a message to add one.</div>';
+  }
+  return `<div class="pinned-list">${list.map((pin) => {
+    const id = escHtml(pin.messageId);
+    const when = fmtDate(pin.timestamp);
+    const attachmentCount = Number(pin.attachmentCount) || 0;
+    const meta = [
+      escHtml(pinRoleLabel(pin.role)),
+      when ? escHtml(when) : '',
+      attachmentCount ? `📎 ${attachmentCount}` : '',
+      pin.hiddenFromShares === true ? '<span class="pinned-row-chip">hidden from shared</span>' : '',
+    ].filter(Boolean).join(' · ');
+    const preview = String(pin.preview || '').trim();
+    const previewHtml = preview
+      ? escHtml(preview)
+      : '<span class="pinned-row-no-text">(no text)</span>';
+    return `
+      <div class="pinned-row">
+        <button type="button" class="pinned-row-jump" data-pin-jump="${id}">
+          <span class="pinned-row-meta">${meta}</span>
+          <span class="pinned-row-preview">${previewHtml}</span>
+        </button>
+        <button type="button" class="pinned-row-unpin" data-pin-unpin="${id}" title="Unpin" aria-label="Unpin">🗑</button>
+      </div>`;
+  }).join('')}</div>`;
+}
+
+function syncPinnedHeaderButton() {
+  const button = document.getElementById('pinned-messages-btn');
+  if (!button) return;
+  const count = getConversationPins(currentConversationId).length;
+  button.hidden = IS_SHARED_VIEW || !count;
+  const countEl = button.querySelector('.header-icon-count');
+  if (countEl) countEl.textContent = count ? String(count) : '';
+  const label = count ? `Pinned messages (${count})` : 'Pinned messages';
+  button.setAttribute('title', label);
+  button.setAttribute('aria-label', label);
+}
+
+function pinnedModalContent() {
+  const pins = getConversationPins(currentConversationId);
+  return {
+    title: '📍 Pinned messages',
+    subtitle: pinnedCountLabel(pins.length),
+    bodyHtml: renderPinnedListHtml(pins),
+    kind: PINNED_MESSAGES_MODAL_KIND,
+  };
+}
+
+function syncCurrentConversationPins() {
+  syncPinnedHeaderButton();
+  if (summaryModalState.kind === PINNED_MESSAGES_MODAL_KIND) {
+    renderSummaryModalContent(pinnedModalContent());
+  }
+  handlers.syncRenderedPinState?.(
+    new Set(getConversationPins(currentConversationId).map((pin) => pin.messageId)),
+  );
+}
+
+export function setConversationPins(conversationId, pins, revision = 0) {
+  const id = String(conversationId || '').trim();
+  if (!id) return;
+  const nextRevision = Number(revision) || 0;
+  if (nextRevision) {
+    if (nextRevision < (pinRevisionByConversation.get(id) || 0)) return;
+    pinRevisionByConversation.set(id, nextRevision);
+  }
+  const normalized = normalizePins(pins);
+  // The list arrives with every conversation load, the live poll included: an
+  // unchanged one must not redraw the open modal under the user's finger.
+  if (JSON.stringify(normalized) === JSON.stringify(getConversationPins(id))) return;
+  if (normalized.length) pinsByConversation.set(id, normalized);
+  else pinsByConversation.delete(id);
+  if (id === currentConversationId) syncCurrentConversationPins();
+}
+
+export function setPinsConversation(conversationId) {
+  const id = String(conversationId || '').trim() || null;
+  if (id === currentConversationId) return;
+  currentConversationId = id;
+  // The conversation was closed (deleted, new chat): its list goes with it.
+  if (!id && summaryModalState.kind === PINNED_MESSAGES_MODAL_KIND) closeSummaryModal();
+  syncCurrentConversationPins();
+}
+
+export function openPinnedMessagesModal() {
+  if (IS_SHARED_VIEW) return;
+  openSummaryModal(pinnedModalContent());
+}
+
+function setPinButtonBusy(messageId, busy, pinned) {
+  const button = document.querySelector(`.msg-pin-btn[data-message-id="${CSS.escape(messageId)}"]`);
+  if (!button) return;
+  button.disabled = busy;
+  button.textContent = busy
+    ? (pinned ? 'Unpinning…' : 'Pinning…')
+    : (pinned ? 'Unpin' : 'Pin');
+}
+
+// `pinned` is the state the control showed when it was pressed; the request
+// asks for the opposite. The answer carries the conversation's whole pin list,
+// stored under that conversation's id: if the user has switched conversations
+// meanwhile, the open one is not touched.
+export async function toggleMessagePin(conversationId, messageId, pinned) {
+  const conversationKey = String(conversationId || '').trim();
+  const targetMessageId = String(messageId || '').trim();
+  if (!conversationKey || !targetMessageId) return;
+  const flightKey = `${conversationKey}:${targetMessageId}`;
+  if (pinTogglesInFlight.has(flightKey)) return;
+
+  pinTogglesInFlight.add(flightKey);
+  setPinButtonBusy(targetMessageId, true, pinned);
+  const result = await updateMessagePin(conversationKey, targetMessageId, !pinned);
+  pinTogglesInFlight.delete(flightKey);
+  if (!result?.ok) {
+    if (conversationKey === currentConversationId) setPinButtonBusy(targetMessageId, false, pinned);
+    showTransientRelayNotice(String(result?.error || '').trim() || (pinned
+      ? 'Could not unpin the message.'
+      : 'Could not pin the message.'));
+    return;
+  }
+
+  showTransientRelayNotice(result.pinned ? 'Message pinned.' : 'Message unpinned.');
+  if (conversationKey === currentConversationId) setPinButtonBusy(targetMessageId, false, result.pinned === true);
+  setConversationPins(conversationKey, result.pins, result.pinsRevision);
+}
+
+function isMessageOnPage(messageId) {
+  return !!document.querySelector(`#messages .msg[data-message-id="${CSS.escape(messageId)}"]`);
+}
+
+// On the page already: scroll there. Otherwise the path message search takes:
+// the relay answers with the messages around the target and the history
+// loaders page on from that window in both directions.
+export async function jumpToPinnedMessage(messageId) {
+  const targetMessageId = String(messageId || '').trim();
+  const conversationId = currentConversationId;
+  if (!targetMessageId || !conversationId) return;
+  closeSummaryModal();
+  if (handlers.focusMessage?.(targetMessageId)) return;
+
+  await handlers.openConversation?.(conversationId, {
+    aroundMessageId: targetMessageId,
+    focusMessageId: targetMessageId,
+  });
+  if (currentConversationId !== conversationId || isMessageOnPage(targetMessageId)) return;
+  showTransientRelayNotice('That message is no longer in this conversation.');
+  // A message the relay no longer has answers with an empty window; put the
+  // end of the conversation back instead of leaving the page blank.
+  if (!document.querySelector('#messages .msg[data-message-id]')) {
+    await handlers.openConversation?.(conversationId);
+  }
+}
+
+function handlePinnedModalClick(event) {
+  if (summaryModalState.kind !== PINNED_MESSAGES_MODAL_KIND) return;
+  const target = event.target instanceof Element ? event.target : null;
+  const unpinBtn = target?.closest('[data-pin-unpin]');
+  if (unpinBtn) {
+    event.preventDefault();
+    void toggleMessagePin(currentConversationId, unpinBtn.getAttribute('data-pin-unpin'), true);
+    return;
+  }
+  const jumpBtn = target?.closest('[data-pin-jump]');
+  if (jumpBtn) {
+    event.preventDefault();
+    void jumpToPinnedMessage(jumpBtn.getAttribute('data-pin-jump'));
+  }
+}
+
+export function initPinnedMessagesView(nextHandlers = {}) {
+  handlers = { ...handlers, ...nextHandlers };
+  const button = document.getElementById('pinned-messages-btn');
+  if (button && button.dataset.bound !== '1') {
+    button.dataset.bound = '1';
+    button.addEventListener('click', (event) => {
+      event.preventDefault();
+      openPinnedMessagesModal();
+    });
+  }
+  // #summary-modal-body outlives every modal, so it is bound exactly once; the
+  // handler no-ops unless the pin list is the modal currently mounted.
+  const modalBody = document.getElementById('summary-modal-body');
+  if (modalBody && !modalBodyBound) {
+    modalBodyBound = true;
+    modalBody.addEventListener('click', handlePinnedModalClick);
+  }
+  syncPinnedHeaderButton();
+}

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

@@ -25,7 +25,7 @@ function matchesDisplayMode(query) {
   }
 }
 
-function isInstalledAppMode() {
+export function isInstalledAppMode() {
   const standalone = matchesDisplayMode('(display-mode: standalone)');
   const minimalUi = matchesDisplayMode('(display-mode: minimal-ui)');
   const launchedFromAndroidApp = String(document.referrer || '').startsWith('android-app://');
@@ -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);
 }
 

package/server/public/app/relay-dot-state.mjs

@@ -9,7 +9,9 @@
  * A managed-but-disconnected tunnel stays green rather than going grey: the
  * relay itself is still reachable, and grey would claim otherwise. The tooltip
  * carries the bad news instead. Note this state is only ever visible locally —
- * a remote browser whose tunnel is down cannot load the page at all.
+ * a remote browser whose tunnel is down cannot load the page at all. A tunnel
+ * that never started because cloudflared is not installed reads "off" there,
+ * followed by the relay's sentence on how to install it.
  *
  * `tone` is the same state as `className`, minus the dot's CSS baggage. The
  * mobile burger toggle dyes its bars from it, because the dot itself sits in
@@ -24,6 +26,7 @@ function normalizeTunnel(tunnel) {
   if (!managed) return null;
   return {
     connected: tunnel.connected === true,
+    binaryMissing: tunnel.binaryMissing === true,
     lastError: String(tunnel.lastError || '').trim(),
   };
 }
@@ -56,6 +59,10 @@ export function resolveRelayDotState({
   let reach = 'Web relay reachable';
   if (tunnelled) {
     reach = 'Web relay reachable via Cloudflare Tunnel';
+  } else if (tunnel?.binaryMissing) {
+    reach = tunnel.lastError
+      ? `Web relay reachable; Cloudflare tunnel off: ${tunnel.lastError}`
+      : 'Web relay reachable; Cloudflare tunnel off: cloudflared is not installed';
   } else if (tunnel) {
     reach = tunnel.lastError
       ? `Web relay reachable; Cloudflare tunnel disconnected (${tunnel.lastError})`

package/server/public/app/router.js

@@ -1,3 +1,4 @@
+import { versionedFileHref } from './file-version.mjs';
 import {
   BASE,
   escHtml,
@@ -116,10 +117,15 @@ export function normalizeDriveBrowserPath(rawPath) {
   return rest ? `${drive}/${rest}` : drive;
 }
 
-export function driveFileHrefFromPath(rawPath) {
+/**
+ * `version` is the file's version token when the caller knows it (a preview
+ * carries one): the address then changes with the file, so an older copy
+ * cannot be served for it. The server ignores the parameter.
+ */
+export function driveFileHrefFromPath(rawPath, version = '') {
   const normalized = normalizeDriveBrowserPath(rawPath);
   if (!normalized) return '';
-  return `${BASE}/api/drives/file?path=${encodeURIComponent(normalized)}`;
+  return versionedFileHref(`${BASE}/api/drives/file?path=${encodeURIComponent(normalized)}`, version);
 }
 
 /**

package/server/public/app/scrollbar-hover.mjs

@@ -0,0 +1,78 @@
+// Desktop scrollbars are thin and hard to grab. With a mouse, the scrollbar of
+// the scroll area under the pointer widens to twice its width while the
+// pointer is on it, and goes back 2.5 s after the pointer left it. The track
+// always has the wide width (index.html), so nothing in the page moves when
+// the thumb grows.
+
+export const SCROLLBAR_WIDE_CLASS = 'scrollbar-wide';
+export const SCROLLBAR_LINGER_MS = 2500;
+// How far left of the scrollbar the pointer already counts as on it.
+const REACH_PX = 4;
+
+/**
+ * Whether a pointer at `clientX` is on the vertical scrollbar of a scroll
+ * area: `rect` is its border box, `barWidth` the room its scrollbar takes
+ * (offsetWidth - clientWidth, borders included, which errs on the wide side).
+ */
+export function pointerOnScrollbar({ clientX, rect, barWidth, reach = REACH_PX } = {}) {
+  if (!rect || !(barWidth > 0)) return false;
+  return clientX >= rect.right - barWidth - reach && clientX <= rect.right;
+}
+
+function scrollAreaUnderPointer(target, clientX) {
+  for (let node = target; node && node.nodeType === 1; node = node.parentElement) {
+    if (node.scrollHeight <= node.clientHeight) continue;
+    const barWidth = node.offsetWidth - node.clientWidth;
+    if (pointerOnScrollbar({ clientX, rect: node.getBoundingClientRect(), barWidth })) return node;
+  }
+  return null;
+}
+
+export function initScrollbarHover({ doc = document, win = window, lingerMs = SCROLLBAR_LINGER_MS } = {}) {
+  let canHover = false;
+  try { canHover = win.matchMedia('(hover: hover) and (pointer: fine)').matches; } catch {}
+  if (!canHover) return () => {};
+  const timers = new Map();
+  const widen = (node) => {
+    clearTimeout(timers.get(node));
+    timers.delete(node);
+    node.classList.add(SCROLLBAR_WIDE_CLASS);
+  };
+  const release = (node) => {
+    if (timers.has(node)) return;
+    timers.set(node, setTimeout(() => {
+      timers.delete(node);
+      node.classList.remove(SCROLLBAR_WIDE_CLASS);
+    }, lingerMs));
+  };
+  const onMove = (event) => {
+    const hovered = scrollAreaUnderPointer(event.target, event.clientX);
+    if (hovered) widen(hovered);
+    for (const node of doc.querySelectorAll(`.${SCROLLBAR_WIDE_CLASS}`)) {
+      if (node !== hovered) release(node);
+    }
+  };
+  // Dragging the thumb sends no pointer moves to the page; the scrolling it
+  // causes keeps the scrollbar wide for as long as it lasts.
+  const onScroll = (event) => {
+    const node = event.target;
+    if (node?.classList?.contains(SCROLLBAR_WIDE_CLASS) && timers.has(node)) {
+      clearTimeout(timers.get(node));
+      timers.delete(node);
+      release(node);
+    }
+  };
+  const onLeave = () => {
+    for (const node of doc.querySelectorAll(`.${SCROLLBAR_WIDE_CLASS}`)) release(node);
+  };
+  doc.addEventListener('mousemove', onMove, { passive: true });
+  doc.addEventListener('scroll', onScroll, { passive: true, capture: true });
+  doc.documentElement.addEventListener('mouseleave', onLeave, { passive: true });
+  return () => {
+    doc.removeEventListener('mousemove', onMove);
+    doc.removeEventListener('scroll', onScroll, { capture: true });
+    doc.documentElement.removeEventListener('mouseleave', onLeave);
+    for (const timer of timers.values()) clearTimeout(timer);
+    timers.clear();
+  };
+}

package/server/public/app/settings-modal.js

@@ -35,7 +35,7 @@ import {
 } from './api-client.js';
 import { DEFAULT_BACKGROUND_TASK_TIMEOUT_MINUTES } from './background-task-timeout-options.mjs';
 import { syncFontScaleSelect } from './font-scaling.js';
-import { syncPwaAppNameInput } from './pwa-install.js';
+import { syncInstalledAppUiState, syncPwaAppNameInput } from './pwa-install.js';
 import { normalizeKnownCwdPath } from './cwd-picker.js';
 import { refreshPushSettingsSection } from './push-settings.js';
 import { selectSettingsTab } from './settings-tabs.js';
@@ -1589,6 +1589,9 @@ export function updateTheme(theme) {
     document.documentElement.removeAttribute('data-theme');
     writeLocalStorage(THEME_STORAGE_KEY, 'dark');
   }
+  // The installed app's manifest, the tab icons and the toolbar colour follow.
+  window.__applyThemeAssets?.(theme === 'light' ? 'light' : 'dark');
+  syncInstalledAppUiState();
 }
 
 export function updateShowSuspendHostSetting(next) {

package/server/public/app/socket-handlers.js

@@ -34,6 +34,7 @@ import {
   summaryModalState,
 } from './store.js';
 import { scheduleContextUsageRefresh } from './api-client.js';
+import { capLiveActivityEntries } from './activity-replay-state.mjs';
 import { publishStatusEvent, recordStatusEvent } from './status-store.mjs';
 import { renderConvList, refreshConversations, openConversation } from './journal-view.js';
 import {
@@ -43,6 +44,7 @@ import {
 } from './ask-user-view.js';
 import { upsertRelayBoard, loadRelayBoards, renderRelayBoards } from './relay-board-view.js';
 import { setConversationBackgroundTasks } from './background-tasks-view.mjs';
+import { setConversationPins } from './pinned-messages-view.mjs';
 import { setPreviews } from './preview-cards.mjs';
 import { setRemoteRelaysSnapshot } from './remote-relays-store.mjs';
 import { REMOTE_RELAY_SOCKET_EVENT } from './remote-relay-shared.mjs';
@@ -544,6 +546,11 @@ export async function connectSocket(overrideDeps) {
   socket.on('background_tasks', ({ conversationId, tasks }) => {
     setConversationBackgroundTasks(conversationId, tasks);
   });
+  // A message was pinned or unpinned (any client): the conversation's whole
+  // pin list, replacing what this page had.
+  socket.on('conversation_pins_updated', ({ conversationId, pins, revision }) => {
+    setConversationPins(conversationId, pins, revision);
+  });
   // REPLACE semantics for the whole set: the preview registry is relay-owned
   // and global, so every change ships the full list.
   socket.on('previews', ({ previews }) => {
@@ -574,7 +581,7 @@ export async function connectSocket(overrideDeps) {
     const lastText = typeof last === 'string' ? last : String(last?.text || '');
     const lastSubagentRunId = typeof last === 'object' && last ? (last.subagentRunId || null) : null;
     if (lastText !== entry.text || lastSubagentRunId !== entry.subagentRunId) {
-      relayActivities.set(messageId, items.concat(entry).slice(-24));
+      relayActivities.set(messageId, capLiveActivityEntries(items.concat(entry)));
     }
     if (entry.subagentRunId) {
       upsertSubagentRun({ subagentRunId: entry.subagentRunId, messageId, conversationId });

package/server/public/app/store.js

@@ -133,6 +133,8 @@ export let filePreviewState = {
     preload: 'metadata',
     autoplay: false,
   },
+  // The files the viewer can step through (see viewer-gallery.mjs), or null.
+  gallery: null,
 };
 // Toolbar filters are sticky per browser (all default off); the toggles in
 // attachments-view.js are the only writers.
@@ -1390,9 +1392,37 @@ export function setSummaryModalLoading(loading) {
   }
 }
 
+// A modal kind can hold an unsaved draft (the context modal's compaction
+// window slider) that is written when the user leaves it, whichever way: the
+// close button, the backdrop, Escape, or another modal replacing it. A
+// re-render of the same kind (Refresh, a socket-driven refresh) is not a leave.
+let summaryModalLeave = null;
+
+export function setSummaryModalLeaveHandler(kind, handler) {
+  summaryModalLeave = typeof handler === 'function'
+    ? { kind: String(kind || '').trim(), handler }
+    : null;
+}
+
+function runSummaryModalLeave(nextKind = null) {
+  const leave = summaryModalLeave;
+  if (!leave) return;
+  if (nextKind !== null && nextKind === leave.kind) return;
+  summaryModalLeave = null;
+  try {
+    leave.handler();
+  } catch (error) {
+    console.warn('Summary modal leave handler failed:', error);
+  }
+}
+
 export function renderSummaryModalContent({ title, subtitle = '', bodyHtml = '', refresh = null, kind = '' }) {
+  runSummaryModalLeave(String(kind || '').trim());
   summaryModalState.kind = String(kind || '').trim();
   summaryModalState.refresh = typeof refresh === 'function' ? refresh : null;
+  // Lets the stylesheet tell one kind of this shared modal from another.
+  const modalEl = document.getElementById('summary-modal');
+  if (modalEl?.dataset) modalEl.dataset.kind = summaryModalState.kind;
 
   const titleEl = document.getElementById('summary-modal-title');
   const subtitleEl = document.getElementById('summary-modal-subtitle');
@@ -1413,12 +1443,14 @@ export function openSummaryModal({ title, subtitle = '', bodyHtml = '', refresh
 }
 
 export function closeSummaryModal() {
+  runSummaryModalLeave();
   summaryModalState.kind = '';
   summaryModalState.refresh = null;
   summaryModalState.loading = false;
   const modal = document.getElementById('summary-modal');
   modal?.classList.remove('visible');
   modal?.setAttribute('aria-hidden', 'true');
+  if (modal?.dataset) delete modal.dataset.kind;
   const titleEl = document.getElementById('summary-modal-title');
   const subtitleEl = document.getElementById('summary-modal-subtitle');
   const bodyEl = document.getElementById('summary-modal-body');

package/server/public/app/transcript-separators.mjs

@@ -62,13 +62,18 @@ function formatCompactTokens(value) {
   return `${(count / 1000).toFixed(1).replace(/\.0$/, '')}k`;
 }
 
+// Stamp of a compaction that is still running (the live bubble's
+// `data-compact-boundary`).
+export const COMPACT_PENDING_STAMP = 'pending';
+
 /**
  * Parses the `data-compact-boundary` stamp (`"<pre>|<post>"`, either side
- * possibly empty) into token counts.
+ * possibly empty, or `pending`) into token counts.
  */
 export function parseCompactBoundaryValue(value) {
   const text = String(value == null ? '' : value).trim();
   if (!text) return null;
+  if (text === COMPACT_PENDING_STAMP) return { pending: true, preTokens: null, postTokens: null };
   const [rawPre, rawPost] = text.split('|');
   const toCount = (raw) => {
     const digits = String(raw || '').trim();
@@ -80,6 +85,7 @@ export function parseCompactBoundaryValue(value) {
 }
 
 export function formatCompactBoundaryLabel(boundary) {
+  if (boundary?.pending) return 'Compacting context…';
   const preTokens = formatCompactTokens(boundary?.preTokens);
   const postTokens = formatCompactTokens(boundary?.postTokens);
   if (preTokens && postTokens) return `Context compacted · ${preTokens} → ${postTokens} tokens`;
@@ -97,6 +103,11 @@ export function formatCompactBoundaryLabel(boundary) {
  * every local-day rollover; a compaction separator sits immediately before
  * the message whose activities recorded the boundary (after that message's
  * day separator, when both land on the same row).
+ *
+ * The compaction key names the turn (`sourceMessageId`, else the row's own
+ * id), not the token counts: the live bubble and the reply that replaces it
+ * share it, so a running compaction's line is relabelled in place when the
+ * boundary lands instead of being swapped for a second row.
  */
 export function buildSeparatorPlan(rows, nowMs = Date.now()) {
   const list = Array.isArray(rows) ? rows : [];
@@ -123,11 +134,13 @@ export function buildSeparatorPlan(rows, nowMs = Date.now()) {
     const boundary = row?.compactBoundary && typeof row.compactBoundary === 'object'
       ? row.compactBoundary
       : parseCompactBoundaryValue(row?.compactBoundary);
-    if (boundary && (boundary.preTokens != null || boundary.postTokens != null || row?.compactBoundary)) {
+    if (boundary && (boundary.pending || boundary.preTokens != null || boundary.postTokens != null || row?.compactBoundary)) {
+      const turnId = String(row?.sourceMessageId || '').trim() || messageId || index;
       plan.push({
-        key: `compact:${messageId || index}:${boundary.preTokens ?? ''}-${boundary.postTokens ?? ''}`,
+        key: `compact:${turnId}`,
         kind: 'compact',
         label: formatCompactBoundaryLabel(boundary),
+        pending: boundary.pending === true,
         beforeIndex: index,
         messageId,
       });
@@ -140,11 +153,31 @@ function readRowFromNode(node) {
   const dataset = node?.dataset || {};
   return {
     messageId: String(dataset.messageId || '').trim(),
+    sourceMessageId: String(dataset.sourceMessageId || '').trim(),
     timestamp: String(dataset.messageTimestamp || '').trim(),
     compactBoundary: String(dataset.compactBoundary || '').trim(),
   };
 }
 
+// The animated dots of a running compaction sit after the label text.
+function setSeparatorLabel(doc, node, separator) {
+  const label = node.querySelector?.('.transcript-separator-label');
+  if (!label) return;
+  // textContent, never innerHTML: labels are generated here but the row sits
+  // in the same container as user content.
+  label.replaceChildren?.();
+  label.textContent = separator.label;
+  if (separator.pending) {
+    const dots = doc.createElement('span');
+    dots.className = 'dots';
+    for (let i = 0; i < 3; i += 1) dots.appendChild(doc.createElement('span'));
+    label.appendChild(dots);
+  }
+  node.classList.toggle('is-pending', !!separator.pending);
+  node.setAttribute('aria-label', separator.label);
+  node.dataset.separatorLabel = separator.label;
+}
+
 function createSeparatorNode(doc, separator) {
   const node = doc.createElement('div');
   node.className = separator.kind === 'compact'
@@ -153,13 +186,10 @@ function createSeparatorNode(doc, separator) {
   node.dataset.separatorKey = separator.key;
   node.dataset.separatorKind = separator.kind;
   node.setAttribute('role', 'separator');
-  node.setAttribute('aria-label', separator.label);
   const label = doc.createElement('span');
   label.className = 'transcript-separator-label';
-  // textContent, never innerHTML: labels are generated here but the row sits
-  // in the same container as user content.
-  label.textContent = separator.label;
   node.appendChild(label);
+  setSeparatorLabel(doc, node, separator);
   return node;
 }
 
@@ -176,7 +206,9 @@ export function syncTranscriptSeparators(container, nowMs = Date.now()) {
   if (!container || typeof container.querySelectorAll !== 'function') return 0;
   const doc = container.ownerDocument || (typeof document !== 'undefined' ? document : null);
   if (!doc || typeof doc.createElement !== 'function') return 0;
-  const nodes = Array.from(container.querySelectorAll('.msg[data-message-timestamp]'))
+  // The live bubble carries no timestamp; it joins the plan only while it
+  // stamps its turn's compaction.
+  const nodes = Array.from(container.querySelectorAll('.msg[data-message-timestamp], .msg[data-compact-boundary]'))
     .filter((node) => node.parentNode === container);
   const plan = buildSeparatorPlan(nodes.map(readRowFromNode), nowMs);
   const planByIndex = new Map();
@@ -196,16 +228,21 @@ export function syncTranscriptSeparators(container, nowMs = Date.now()) {
       cursor = cursor.previousSibling;
     }
     const matches = existing.length === desired.length
-      && existing.every((el, i) => el.dataset.separatorKey === desired[i].key
-        && el.dataset.separatorLabel === desired[i].label);
+      && existing.every((el, i) => el.dataset.separatorKey === desired[i].key);
     if (matches) {
+      // Same rows, maybe a new label (a running compaction that finished):
+      // relabel in place.
+      existing.forEach((el, i) => {
+        if (el.dataset.separatorLabel === desired[i].label) return;
+        setSeparatorLabel(doc, el, desired[i]);
+        changed += 1;
+      });
       for (const el of existing) kept.add(el);
       return;
     }
     for (const el of existing) el.remove();
     for (const separator of desired) {
       const created = createSeparatorNode(doc, separator);
-      created.dataset.separatorLabel = separator.label;
       container.insertBefore(created, node);
       kept.add(created);
       changed += 1;