@oar-sh/oar 0.9.6 → 0.9.8

package/server/public/app/context-menu.mjs

@@ -0,0 +1,140 @@
+// A context menu for the conversation list: right-click on a desktop, a long
+// press on a phone. One menu at a time, closed by a pointer-down outside it,
+// Escape, a scroll or a resize, like a native menu; flipped at the screen
+// edge rather than clipped. The entries are buttons, so keyboard users get
+// focus on the first one.
+
+const LONG_PRESS_MS = 500;
+const LONG_PRESS_SLOP_PX = 10;
+
+/** A horizontal rule between groups. */
+export const MENU_SEPARATOR = null;
+
+let closeOpenMenu = null;
+
+function esc(value) {
+  return String(value ?? '')
+    .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+
+/** Close the open menu, if any. */
+export function closeContextMenu() {
+  closeOpenMenu?.();
+}
+
+/**
+ * Open a menu at viewport coordinates. `items`: `{ label, onSelect, danger?,
+ * disabled?, id? }`, or MENU_SEPARATOR between groups. Returns the menu node.
+ */
+export function openContextMenu(x, y, items, { documentRef = document, windowRef = window } = {}) {
+  closeOpenMenu?.();
+  const menu = documentRef.createElement('div');
+  menu.className = 'context-menu';
+  menu.setAttribute('role', 'menu');
+
+  const close = () => {
+    if (closeOpenMenu !== close) return;
+    closeOpenMenu = null;
+    documentRef.removeEventListener('pointerdown', onOutside, true);
+    documentRef.removeEventListener('keydown', onKey, true);
+    windowRef.removeEventListener('resize', close);
+    windowRef.removeEventListener('scroll', close, true);
+    menu.remove();
+  };
+  const onOutside = (event) => {
+    if (!menu.contains(event.target)) close();
+  };
+  const onKey = (event) => {
+    if (event.key === 'Escape') {
+      event.stopPropagation();
+      close();
+      return;
+    }
+    if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return;
+    const buttons = [...menu.querySelectorAll('button:not([disabled])')];
+    if (!buttons.length) return;
+    const index = buttons.indexOf(documentRef.activeElement);
+    const next = event.key === 'ArrowDown'
+      ? buttons[(index + 1) % buttons.length]
+      : buttons[(index <= 0 ? buttons.length : index) - 1];
+    next.focus();
+    event.preventDefault();
+  };
+
+  for (const item of items) {
+    if (item === MENU_SEPARATOR) {
+      const rule = documentRef.createElement('div');
+      rule.className = 'context-menu-sep';
+      rule.setAttribute('role', 'separator');
+      menu.append(rule);
+      continue;
+    }
+    if (!item) continue;
+    const entry = documentRef.createElement('button');
+    entry.type = 'button';
+    entry.className = `context-menu-item${item.danger ? ' context-menu-item-danger' : ''}`;
+    entry.setAttribute('role', 'menuitem');
+    if (item.id) entry.dataset.menuItem = String(item.id);
+    entry.innerHTML = esc(item.label);
+    entry.disabled = item.disabled === true;
+    entry.addEventListener('click', (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      close();
+      item.onSelect?.();
+    });
+    menu.append(entry);
+  }
+
+  documentRef.body.append(menu);
+  // Positioned after insertion so the measured size is the real one.
+  const rect = menu.getBoundingClientRect();
+  const left = Math.max(4, Math.min(x, windowRef.innerWidth - rect.width - 4));
+  const top = Math.max(4, Math.min(y, windowRef.innerHeight - rect.height - 4));
+  menu.style.left = `${left}px`;
+  menu.style.top = `${top}px`;
+
+  closeOpenMenu = close;
+  documentRef.addEventListener('pointerdown', onOutside, true);
+  documentRef.addEventListener('keydown', onKey, true);
+  windowRef.addEventListener('resize', close);
+  windowRef.addEventListener('scroll', close, true);
+  queueMicrotask(() => menu.querySelector('button:not([disabled])')?.focus());
+  return menu;
+}
+
+/**
+ * Long-press as the touch equivalent of right-click, on every descendant of
+ * `root` that matches `selector`. Android fires no `contextmenu` for a long
+ * press on a non-selectable element. Cancelled by movement, so it never fires
+ * mid-scroll; mouse pointers are left to the real `contextmenu` event.
+ * `handler(target, x, y)`.
+ */
+export function bindLongPress(root, selector, handler, { setTimeoutImpl = setTimeout, clearTimeoutImpl = clearTimeout } = {}) {
+  let timer = null;
+  let startX = 0;
+  let startY = 0;
+  const cancel = () => {
+    if (timer !== null) clearTimeoutImpl(timer);
+    timer = null;
+  };
+  root.addEventListener('pointerdown', (event) => {
+    if (event.pointerType === 'mouse') return;
+    const target = event.target?.closest?.(selector);
+    if (!target || !root.contains(target)) return;
+    startX = event.clientX;
+    startY = event.clientY;
+    cancel();
+    timer = setTimeoutImpl(() => {
+      timer = null;
+      handler(target, startX, startY);
+    }, LONG_PRESS_MS);
+  }, { passive: true });
+  root.addEventListener('pointermove', (event) => {
+    if (Math.abs(event.clientX - startX) > LONG_PRESS_SLOP_PX || Math.abs(event.clientY - startY) > LONG_PRESS_SLOP_PX) cancel();
+  }, { passive: true });
+  for (const name of ['pointerup', 'pointercancel', 'pointerleave']) {
+    root.addEventListener(name, cancel, { passive: true });
+  }
+  return cancel;
+}

package/server/public/app/context-tier-options.mjs

@@ -55,6 +55,10 @@ export function buildContextTierOptions({
   const meta = metadata && typeof metadata === 'object' ? metadata : {};
   const defaultLabel = tokenLabel(defaultWindowTokens(meta));
   const provider = String(providerType || '').trim().toLowerCase();
+  // A cloud session has no tier to choose and its window is not in the merged
+  // metadata either (that number is Copilot's): one blank default, as for a
+  // Claude model whose window is unknown.
+  if (provider === 'claude-cloud') return [{ value: 'default', label: UNKNOWN_WINDOW_LABEL }];
   const claudeTierList = provider === 'claude' ? claudeTiersForModel(modelId, claudeTiers) : null;
   if (claudeTierList) {
     return claudeTierList

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-origin-ui.js

@@ -0,0 +1,27 @@
+// The header's "via agent · “title”" line: the conversation on screen was
+// started by an agent in another conversation on this relay, and the line
+// opens that conversation. Derived from the conversation record alone, so the
+// one sync function is idempotent and runs with every header sync. A
+// conversation another relay's agent created has no header line (its sidebar
+// marker is all there is), and neither has one a person started.
+
+import { conversations, currentConvId, IS_SHARED_VIEW } from './store.js';
+import { renderConversationHeaderOriginHtml } from './remote-relay-origin-view.mjs';
+
+let renderedHtml = '';
+
+export function syncConversationOriginHeader() {
+  const line = document.getElementById('chat-title-origin');
+  if (!line) return;
+  const id = String(currentConvId || '').trim();
+  const conversation = id ? (conversations[id] || null) : null;
+  const html = conversation
+    ? renderConversationHeaderOriginHtml(conversation, { conversations, linkable: !IS_SHARED_VIEW })
+    : '';
+  // This runs on every list render; the button must not be rebuilt under a tap.
+  if (html !== renderedHtml) {
+    line.innerHTML = html;
+    renderedHtml = html;
+  }
+  line.hidden = !html;
+}

package/server/public/app/conversation-provider-indicator.mjs

@@ -23,23 +23,39 @@ export function isConversationUsingGrokProvider(conversation = null) {
   return resolveConversationProviderType(conversation) === 'grok';
 }
 
-// An unresolved provider stays unlabelled rather than defaulting to Copilot, so
-// a conversation the client has not loaded yet cannot claim the wrong provider.
-export function conversationProviderIndicatorLabel(conversation = null) {
+// Its own provider, never a flavour of `claude`: the session runs in a sandbox
+// at Anthropic, so nothing that is true of a local Claude worker (modes,
+// effort, steering, a working directory) may be assumed for it.
+export function isConversationUsingClaudeCloudProvider(conversation = null) {
+  return resolveConversationProviderType(conversation) === 'claude-cloud';
+}
+
+// The marker that tells a cloud chat from a local Claude one at a glance.
+const CLAUDE_CLOUD_MARKER = '☁';
+
+function conversationProviderName(conversation = null) {
   const providerType = resolveConversationProviderType(conversation);
   if (providerType === 'openai') return 'OpenAI';
   if (providerType === 'claude') return 'Claude';
+  if (providerType === 'claude-cloud') return 'Claude Cloud';
   if (providerType === 'cursor') return 'Cursor';
   if (providerType === 'grok') return 'Grok';
   if (providerType === 'github' || providerType === 'github-copilot') return 'Copilot';
   return '';
 }
 
+// An unresolved provider stays unlabelled rather than defaulting to Copilot, so
+// a conversation the client has not loaded yet cannot claim the wrong provider.
+export function conversationProviderIndicatorLabel(conversation = null) {
+  const name = conversationProviderName(conversation);
+  return isConversationUsingClaudeCloudProvider(conversation) ? `${CLAUDE_CLOUD_MARKER} ${name}` : name;
+}
+
 // A question card names the runtime that asks, the way the list pill names it.
 // Unresolved reads plain "Question": every card used to say "Copilot question",
 // Claude's and Cursor's included.
 export function questionCardHeadLabel(conversation = null) {
-  const provider = conversationProviderIndicatorLabel(conversation);
+  const provider = conversationProviderName(conversation);
   return provider ? `${provider} question` : 'Question';
 }
 
@@ -50,6 +66,7 @@ const SESSION_LOCK_LABELS = {
   claude: 'Claude SDK',
   cursor: 'Cursor SDK',
   grok: 'Grok',
+  'claude-cloud': `${CLAUDE_CLOUD_MARKER} Claude Cloud`,
 };
 
 export function isOpenAIImageModelId(modelId = '') {
@@ -66,6 +83,7 @@ export function sessionLockProviderKey({ providerType = '', model = '' } = {}) {
   }
   if (normalized === 'openai-image' || normalized === 'openai-image-byok') return 'openai-image';
   if (normalized === 'claude' || normalized === 'claude-agent-sdk' || normalized === 'anthropic') return 'claude';
+  if (normalized === 'claude-cloud') return 'claude-cloud';
   if (normalized === 'cursor') return 'cursor';
   if (normalized === 'grok' || normalized === 'xai' || normalized === 'xai-grok') return 'grok';
   if (normalized === 'github' || normalized === 'github-copilot') return 'github';