@oar-sh/oar 0.9.6 → 0.9.8

package/server/public/app/bootstrap.js

@@ -32,6 +32,7 @@ import {
   openSummaryModal,
   closeSummaryModal,
   refreshSummaryModal,
+  setSummaryModalLeaveHandler,
   syncViewportMetrics,
   isMobileComposerViewport,
   releaseComposerFocusAfterSend,
@@ -70,6 +71,7 @@ import {
   refreshConversationHistory,
   updateConversationTitle,
   updateConversationPreferences,
+  updateWorkspaceRootAttribution,
   createConversationShareLink,
   updateDefaultSessionWorkspaceRoot,
   scheduleContextUsageRefresh,
@@ -83,6 +85,12 @@ import {
   confirmNewConversationModel,
   closeNewConversationModelModal,
   deleteConv,
+  archiveConv,
+  unarchiveConv,
+  toggleArchivedConversations,
+  isArchivedConversationsView,
+  refreshNewConversationCloudRepoList,
+  openOriginConversation,
 } from './journal-view.js';
 import {
   loadRelayQuestions,
@@ -113,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';
@@ -190,16 +199,19 @@ import {
   registerPwaShell,
   updatePwaAppName,
 } from './pwa-install.js';
+import { initScrollbarHover } from './scrollbar-hover.mjs';
 import {
+  autoCompactWindowNotes,
   renderAutoCompactControlHtml,
+  renderAutoCompactNotesHtml,
   renderContextUsageHtml,
   renderThinkingControlHtml,
   thinkingEnabledFromKey,
   thinkingEnabledToKey,
 } from './context-usage-view.mjs';
+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';
@@ -329,6 +341,22 @@ import {
   openGrokLogoutConfirmation,
   confirmGrokLogout,
 } from './grok-auth-ui.js';
+import {
+  getClaudeCloudSettings,
+  openClaudeCloudLoginTab,
+  refreshClaudeCloudSettingsState,
+  saveClaudeCloudSettings,
+  subscribeClaudeCloudSettings,
+  toggleClaudeCloudProvider,
+} from './claude-cloud-settings-ui.js';
+import { openCurrentCloudSession, syncClaudeCloudConversationUi } from './claude-cloud-conversation-ui.js';
+import { syncConversationOriginHeader } from './conversation-origin-ui.js';
+import {
+  previewAgentSessionsMaxWait,
+  saveAgentSessionsMaxWait,
+  toggleAgentSessions,
+} from './agent-sessions-settings-ui.js';
+import { CLAUDE_CLOUD_PROVIDER, claudeCloudComposerModelIds } from './claude-cloud-ui.mjs';
 import {
   confirmCliInstall,
   runCliInstall,
@@ -360,6 +388,7 @@ const PROVIDER_LABELS = {
   openai: 'OpenAI',
   'openai-byok': 'OpenAI (BYOK)',
   claude: 'Claude SDK',
+  'claude-cloud': 'Claude Cloud',
   cursor: 'Cursor SDK',
   grok: 'Grok',
   'github-copilot': 'GitHub Copilot',
@@ -801,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);
@@ -1197,6 +1230,9 @@ function currentGrokModelLock() {
   };
 }
 
+// A cloud session's model is switched between turns like a local Claude
+// chat's (the worker sends set_model before the message), so there is no
+// cloud lock on the picker.
 function currentRuntimeModelLock() {
   return currentOpenAIModelLock() || currentGrokModelLock();
 }
@@ -1351,6 +1387,7 @@ function normalizeModelSelectorProviderType(providerType = '') {
   const normalized = String(providerType || '').trim().toLowerCase();
   if (normalized === 'openai' || normalized === 'openai-byok') return 'openai';
   if (normalized === 'claude') return 'claude';
+  if (normalized === CLAUDE_CLOUD_PROVIDER) return CLAUDE_CLOUD_PROVIDER;
   if (normalized === 'cursor') return 'cursor';
   if (normalized === 'grok') return 'grok';
   return 'github';
@@ -1380,18 +1417,43 @@ function modelVisibleForActiveProvider(modelId, activeProviderType, providersByM
   const hasClaude = providers.includes('claude');
   const hasCursor = providers.includes('cursor');
   const hasGrok = providers.includes('grok');
+  // Only present if a relay tags catalog rows for Claude Cloud; such a row is
+  // then as exclusive as the other runtimes' rows.
+  const hasClaudeCloud = providers.includes(CLAUDE_CLOUD_PROVIDER);
   const hasNonExclusiveProvider = providers.some((provider) => (
     provider !== 'openai-byok'
     && provider !== 'claude'
     && provider !== 'cursor'
     && provider !== 'grok'
+    && provider !== CLAUDE_CLOUD_PROVIDER
   ));
   const activeProvider = normalizeModelSelectorProviderType(activeProviderType);
   if (activeProvider === 'openai') return hasOpenAIByok;
   if (activeProvider === 'claude') return hasClaude;
   if (activeProvider === 'cursor') return hasCursor;
   if (activeProvider === 'grok') return hasGrok;
-  return !((hasOpenAIByok || hasClaude || hasCursor || hasGrok) && !hasNonExclusiveProvider);
+  return !((hasOpenAIByok || hasClaude || hasCursor || hasGrok || hasClaudeCloud) && !hasNonExclusiveProvider);
+}
+
+// A Claude Cloud conversation does not pick from the shared catalog: its
+// models are the list of its settings tab (plain ids, no Auto), plus the model
+// the conversation is bound to.
+function buildClaudeCloudModelSelectorOptions(models, providersByModel, metadataByModel) {
+  const conversation = currentConvId ? conversations[currentConvId] : null;
+  const cloudModels = claudeCloudComposerModelIds({
+    settings: getClaudeCloudSettings(),
+    catalogModels: models,
+    providersByModel,
+    conversationModel: conversation?.runtimeProviderModel
+      || conversation?.runtime_provider_model
+      || conversation?.preferredModel
+      || '',
+  });
+  return buildCatalogModelOptions(cloudModels, {
+    autoValue: AUTO_MODEL_OPTION,
+    metadataByModel,
+    annotateContextWindow: false,
+  }).filter((option) => option.value.toLowerCase() !== AUTO_MODEL_OPTION);
 }
 
 // metadataByModel is a parameter because the catalog refresh builds the next
@@ -1403,6 +1465,9 @@ function buildModelSelectorOptions(
   activeProviderType = '',
   metadataByModel = modelCatalogState.modelMetadataByModel,
 ) {
+  if (normalizeModelSelectorProviderType(activeProviderType) === CLAUDE_CLOUD_PROVIDER) {
+    return buildClaudeCloudModelSelectorOptions(models, providersByModel, metadataByModel);
+  }
   const normalizedOptions = buildCatalogModelOptions(models.length ? models : [FALLBACK_MODEL], {
     autoValue: AUTO_MODEL_OPTION,
     metadataByModel,
@@ -1419,6 +1484,11 @@ function reasoningOptionsForModel(modelId = '') {
   if (!isModelMetadataHealthy()) return [];
   const key = String(modelId || '').trim().toLowerCase();
   const provider = activeComposerProviderType();
+  // A cloud session has no effort choice; the catalog's efforts for the same
+  // model id belong to the local Claude and Copilot runtimes. The one value is
+  // still listed: the (hidden) select must hold it, because a send without an
+  // effort is refused as "model metadata missing".
+  if (provider === CLAUDE_CLOUD_PROVIDER) return ['none'];
   const providerOptions = modelCatalogState.reasoningByProvider?.[provider]?.[key];
   if (Array.isArray(providerOptions)) return normalizeReasoningEffortList(providerOptions);
   return normalizeReasoningEffortList(modelCatalogState.reasoningByModel?.[key] || []);
@@ -1757,7 +1827,11 @@ function updateModelPricingDetails(modelId, tier) {
   const grid = document.getElementById('model-pricing-grid');
   if (!details || !summary || !grid) return;
   const metadata = modelCatalogState.modelMetadataByModel?.[modelId] || {};
-  const pricing = metadata?.pricing?.[tier === 'long_context' ? 'longContext' : 'default'];
+  // The catalog's prices are Copilot credits; a cloud session is billed to the
+  // Claude account, so they would be the wrong numbers for it.
+  const pricing = activeComposerProviderType() === CLAUDE_CLOUD_PROVIDER
+    ? null
+    : metadata?.pricing?.[tier === 'long_context' ? 'longContext' : 'default'];
   if (!pricing || typeof pricing !== 'object') {
     details.open = false;
     details.style.display = 'none';
@@ -1784,12 +1858,14 @@ function updateModelPricingDetails(modelId, tier) {
   details.style.display = grid.childElementCount ? '' : 'none';
 }
 
-// Relay modes each provider backend actually honors. All four providers
-// currently support the full set — Copilot/OpenAI via prompt-context
+// Relay modes each provider backend actually honors. The local providers
+// support the full set — Copilot/OpenAI via prompt-context
 // injection, Claude via permissionMode + system-prompt appends, Cursor via
 // native plan mode plus message-text nudges for ask/autopilot — but the
 // composer builds its options from this table so a provider that loses (or
-// gains) a mode only needs a change here.
+// gains) a mode only needs a change here. A Claude Cloud session runs in the
+// cloud's own permission mode and ignores relay modes, so it has the one
+// entry and its selector is hidden (body.claude-cloud-conversation).
 const RELAY_MODE_LABELS = { agent: 'Agent', ask: 'Ask', plan: 'Plan', autopilot: 'Autopilot' };
 const RELAY_MODES_BY_PROVIDER = {
   github: ['agent', 'ask', 'plan', 'autopilot'],
@@ -1797,6 +1873,7 @@ const RELAY_MODES_BY_PROVIDER = {
   claude: ['agent', 'ask', 'plan', 'autopilot'],
   cursor: ['agent', 'ask', 'plan', 'autopilot'],
   grok: ['agent', 'ask', 'plan', 'autopilot'],
+  'claude-cloud': ['agent'],
 };
 
 function relayModesForProvider(providerType = '') {
@@ -1848,8 +1925,9 @@ async function persistCurrentConversationPreferences() {
   // record an effort the user never picked when they only changed the mode.
   const reasoningEffort = String(document.getElementById('reasoning-effort-select')?.value || '').trim().toLowerCase();
   // These keys hold the last explicit choice, so they are not rolled back when
-  // the write below fails: the user did make the choice either way.
-  localStorage.setItem(MODE_STORAGE_KEY, mode);
+  // the write below fails: the user did make the choice either way. A cloud
+  // chat has no mode to choose, so its fixed "agent" is not such a choice.
+  if (activeComposerProviderType() !== CLAUDE_CLOUD_PROVIDER) localStorage.setItem(MODE_STORAGE_KEY, mode);
   if (model) localStorage.setItem(MODEL_STORAGE_KEY, model);
   if (reasoningEffort) localStorage.setItem(REASONING_STORAGE_KEY, reasoningEffort);
 
@@ -2337,6 +2415,9 @@ function renderModelVariantCatalogBody() {
     // shows Claude-SDK rows exclusively, the Cursor SDK tab Cursor rows, the
     // Grok tab Grok rows, and Copilot never shows rows that a different runtime
     // contributed (there is no cross-runtime switching).
+    // Claude Cloud has no rows of its own to select: its picker is fed by the
+    // Claude Cloud settings tab, so a row tagged for it belongs to no tab.
+    if (entryProvider === CLAUDE_CLOUD_PROVIDER) return false;
     if (activeTab === 'anthropic') {
       return entryProvider === 'claude';
     }
@@ -2360,6 +2441,7 @@ function renderModelVariantCatalogBody() {
         && provider !== 'claude'
         && provider !== 'cursor'
         && provider !== 'grok'
+        && provider !== CLAUDE_CLOUD_PROVIDER
       ));
     }
     return true;
@@ -2786,6 +2868,66 @@ async function saveSelectedModelsFromModal() {
 // click pins a provider so the modal's Refresh re-renders onto the same tab
 // instead of snapping back. Reset on every fresh open of the modal.
 let usageTabProviderOverride = null;
+// The last usage report, shown at once on the next open while the open tab's
+// provider is read live; kept across reloads in sessionStorage. `fetchedAt`
+// (per card id) decides whether a tab needs a live read when it is shown.
+const USAGE_REPORT_STORAGE_KEY = 'oar.usage.lastReport.v1';
+const USAGE_LIVE_FRESH_MS = 60_000;
+let lastUsageReport = null;
+let usageRefreshInFlight = null;
+
+function readStoredUsageReport() {
+  try {
+    const parsed = JSON.parse(sessionStorage.getItem(USAGE_REPORT_STORAGE_KEY) || 'null');
+    return parsed && Array.isArray(parsed.providers) ? parsed : null;
+  } catch {
+    return null;
+  }
+}
+
+function storeUsageReport(report) {
+  lastUsageReport = report;
+  try {
+    sessionStorage.setItem(USAGE_REPORT_STORAGE_KEY, JSON.stringify(report));
+  } catch {
+    // Storage full or unavailable: the module copy still serves this page.
+  }
+}
+
+/**
+ * The next report: cards the answer read live replace the kept ones; a card
+ * the answer only served from its cache replaces nothing newer we hold (a
+ * restarted relay has an empty cache and would otherwise blank good cards).
+ */
+function mergeUsageReports(kept, answer) {
+  if (!kept || !Array.isArray(kept.providers)) return answer;
+  const live = new Set(Array.isArray(answer?.live) ? answer.live : []);
+  const fetchedAt = { ...(kept.fetchedAt || {}) };
+  const keptById = new Map(kept.providers.map((card) => [normalizeUsageProvider(card?.provider), card]));
+  const providers = (answer.providers || []).map((card) => {
+    const id = normalizeUsageProvider(card?.provider);
+    const previous = keptById.get(id);
+    if (live.has(id) || !previous) {
+      fetchedAt[id] = answer.fetchedAt?.[id] || new Date().toISOString();
+      return card;
+    }
+    // Unavailable from the cache but known from before: keep what we had.
+    return card?.status === 'unavailable' && previous.status !== 'unavailable' ? previous : card;
+  });
+  return { ...answer, providers, fetchedAt };
+}
+
+function usageCardIsFresh(provider) {
+  const at = Date.parse(String(lastUsageReport?.fetchedAt?.[provider] || ''));
+  return Number.isFinite(at) && Date.now() - at < USAGE_LIVE_FRESH_MS;
+}
+
+/** The "Updating…" marker on one card, while its live read runs. */
+function markUsageCardUpdating(provider, updating) {
+  const body = document.getElementById('summary-modal-body');
+  const card = body?.querySelector(`[data-usage-panel="${CSS.escape(provider)}"]`);
+  if (card) card.toggleAttribute('data-updating', !!updating);
+}
 
 /**
  * Delegated because #summary-modal-body's innerHTML is replaced on every render
@@ -2803,7 +2945,7 @@ function initUsageTabControl() {
   });
 }
 
-/** Pure DOM toggle: switching tabs never refetches `/api/usage`. */
+/** DOM toggle first; a tab whose card is older than a minute is then read live. */
 function selectUsageTab(root, provider) {
   const target = String(provider || '').trim();
   if (!target) return;
@@ -2819,6 +2961,78 @@ function selectUsageTab(root, provider) {
     panel.hidden = panel.dataset.usagePanel !== target;
   }
   usageTabProviderOverride = target;
+  if (!usageCardIsFresh(target)) {
+    refreshUsageProvider(target).catch(() => {});
+  }
+}
+
+/**
+ * Read one provider live and swap the result into the modal. Serialised: a
+ * second request while one runs waits for it and is then made if still
+ * needed (the tab may have changed).
+ */
+async function refreshUsageProvider(provider) {
+  const target = String(provider || '').trim();
+  if (!target) return;
+  if (usageRefreshInFlight) {
+    await usageRefreshInFlight.catch(() => {});
+    if (usageCardIsFresh(target)) return;
+  }
+  markUsageCardUpdating(target, true);
+  const run = (async () => {
+    const [usageResult, authResult] = await Promise.allSettled([
+      loadUsageSummary({ providers: [target] }),
+      getClaudeAuthStatus(),
+    ]);
+    if (usageResult.status === 'rejected') throw usageResult.reason;
+    const answer = usageResult.value;
+    if (!answer || !Array.isArray(answer.providers)) return;
+    if (summaryModalState.kind !== 'usage') {
+      storeUsageReport(mergeUsageReports(lastUsageReport, answer));
+      return;
+    }
+    const account = authResult.status === 'fulfilled' ? claudeAccountFromAuthStatus(authResult.value) : null;
+    renderUsageReport(mergeUsageReports(lastUsageReport, answer), account);
+  })();
+  usageRefreshInFlight = run;
+  try {
+    await run;
+  } finally {
+    if (usageRefreshInFlight === run) usageRefreshInFlight = null;
+    markUsageCardUpdating(target, false);
+  }
+}
+
+/** Render a report into the open modal and keep it for the next open. */
+function renderUsageReport(report, account, { updating = '' } = {}) {
+  storeUsageReport(report);
+  const activeProvider = usageTabProviderOverride
+    || normalizeUsageProvider(activeComposerProviderType());
+  const planHtml = renderPlanUsageHtml(withClaudeAccount(report, account), { activeProvider });
+  if (!planHtml) return false;
+  initUsageTabControl();
+  renderSummaryModalContent({
+    title: 'Plan usage',
+    subtitle: `${planUsageSubtitle(report)}${updating ? ' · updating…' : ''}`,
+    bodyHtml: planHtml,
+    refresh: refreshOpenUsageTab,
+    kind: 'usage',
+  });
+  if (updating) markUsageCardUpdating(updating, true);
+  return true;
+}
+
+/** The modal's Refresh button: the open tab live, nothing else. */
+async function refreshOpenUsageTab() {
+  const body = document.getElementById('summary-modal-body');
+  const active = body?.querySelector('[data-usage-tab].active')?.dataset.usageTab
+    || usageTabProviderOverride
+    || normalizeUsageProvider(activeComposerProviderType());
+  if (!lastUsageReport || !active) {
+    await loadUsageSummaryAndRender();
+    return;
+  }
+  await refreshUsageProvider(active);
 }
 
 /**
@@ -2848,11 +3062,18 @@ function withClaudeAccount(report, account) {
   };
 }
 
+/**
+ * The first open with nothing kept: the open tab's provider is read live and
+ * the other cards come from the relay's cache (or are read once when it has
+ * none). With a kept report, showUsage renders it first and only refreshes.
+ */
 async function loadUsageSummaryAndRender() {
+  const activeProvider = usageTabProviderOverride
+    || normalizeUsageProvider(activeComposerProviderType());
   // Usage is the point of the modal; the account line is a garnish, so the two
   // are settled independently and a failing auth probe cannot blank the cards.
   const [usageResult, authResult] = await Promise.allSettled([
-    loadUsageSummary(),
+    loadUsageSummary({ providers: activeProvider ? [activeProvider] : null }),
     getClaudeAuthStatus(),
   ]);
   if (usageResult.status === 'rejected') throw usageResult.reason;
@@ -2861,20 +3082,7 @@ async function loadUsageSummaryAndRender() {
   const account = authResult.status === 'fulfilled'
     ? claudeAccountFromAuthStatus(authResult.value)
     : null;
-  const activeProvider = usageTabProviderOverride
-    || normalizeUsageProvider(activeComposerProviderType());
-  const planHtml = renderPlanUsageHtml(withClaudeAccount(d, account), { activeProvider });
-  if (planHtml) {
-    initUsageTabControl();
-    renderSummaryModalContent({
-      title: 'Plan usage',
-      subtitle: planUsageSubtitle(d),
-      bodyHtml: planHtml,
-      refresh: loadUsageSummaryAndRender,
-      kind: 'usage',
-    });
-    return;
-  }
+  if (Array.isArray(d.providers) && renderUsageReport(mergeUsageReports(lastUsageReport, d), account)) return;
   // Legacy relay (or a relay without the plan-usage service): fall back to the
   // Copilot-only text summary rather than showing an empty modal.
   const pct = d.premiumInteractions?.percentRemaining != null
@@ -2894,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));
 }
 
 /**
@@ -2921,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;
   });
 }
 
@@ -2954,6 +3200,36 @@ function setThinkingControlValue({ enabled, display }) {
   }
 }
 
+// The folder's commit attribution select in the 🧠 modal: one request per
+// change, then the modal is re-read so the effect text matches the relay.
+let attributionControlUpdateInFlight = false;
+function initAttributionControl() {
+  const body = document.getElementById('summary-modal-body');
+  if (!body || body.dataset.attributionControlBound === 'true') return;
+  body.dataset.attributionControlBound = 'true';
+  body.addEventListener('change', async (event) => {
+    const select = event.target?.closest?.('#ctx-attribution-select');
+    if (!select) return;
+    const path = String(select.dataset.workspaceRoot || '').trim();
+    if (!path || attributionControlUpdateInFlight) return;
+    attributionControlUpdateInFlight = true;
+    select.disabled = true;
+    try {
+      const response = await updateWorkspaceRootAttribution(path, select.value || null);
+      if (!response || response.ok === false) throw new Error(String(response?.error || 'The relay refused the change'));
+      showTransientRelayNotice(select.value
+        ? `Commit attribution for this folder: ${select.value}.`
+        : 'Commit attribution for this folder follows the provider setting again.');
+      await refreshSummaryModal();
+    } catch (error) {
+      showTransientRelayNotice(`Could not change the commit attribution: ${error?.message || error}`);
+      select.disabled = false;
+    } finally {
+      attributionControlUpdateInFlight = false;
+    }
+  });
+}
+
 function initThinkingControl() {
   const body = document.getElementById('summary-modal-body');
   if (!body || body.dataset.thinkingBound === '1') return;
@@ -3009,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;
   }
 }
 
@@ -3055,14 +3322,42 @@ async function loadContextSummaryAndRender(convId) {
   const refreshLookupId = sessionId || trimmedConvId || null;
   const providerLabel = payload.providerType === 'claude'
     ? 'Claude'
-    : (payload.providerType === 'cursor'
-      ? 'Cursor'
-      : (payload.providerType === 'grok' ? 'Grok' : 'Copilot'));
+    : (payload.providerType === CLAUDE_CLOUD_PROVIDER
+      ? 'Claude Cloud'
+      : (payload.providerType === 'cursor'
+        ? 'Cursor'
+        : (payload.providerType === 'grok' ? 'Grok' : 'Copilot')));
   const subtitle = sessionId
     ? `${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'
@@ -3078,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'
@@ -3086,14 +3386,11 @@ async function loadContextSummaryAndRender(convId) {
       thinkingDisplay: payload.thinkingDisplay ?? 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;
+  // What this folder's commits say, with the folder override: Claude, and a
+  // Claude Cloud chat that was started from a folder (no path, no row).
+  const attributionHtml = payload.providerType === 'claude' || payload.providerType === 'claude-cloud'
+    ? renderAttributionControlHtml(payload.attribution || null)
+    : '';
   thinkingControlStored = {
     enabled: payload.thinkingEnabled !== false,
     display: payload.thinkingDisplay || 'summarized',
@@ -3102,10 +3399,10 @@ async function loadContextSummaryAndRender(convId) {
   // The structured breakdown is the answer; the runtime's own text dump stays
   // available underneath for the details it carries that categories don't.
   const bodyHtml = usageHtml
-    ? `${usageHtml}${autoCompactHtml}${thinkingHtml}${detailText
+    ? `${usageHtml}${autoCompactHtml}${thinkingHtml}${attributionHtml}${detailText
       ? `<details class="ctx-usage-raw"><summary>Raw details</summary><pre>${escHtml(detailText)}</pre></details>`
       : ''}`
-    : `${autoCompactHtml}${thinkingHtml}<pre>${escHtml(detailText || 'No context data available.')}</pre>`;
+    : `${autoCompactHtml}${thinkingHtml}${attributionHtml}<pre>${escHtml(detailText || 'No context data available.')}</pre>`;
 
   renderSummaryModalContent({
     title: 'Context usage',
@@ -3114,6 +3411,7 @@ async function loadContextSummaryAndRender(convId) {
     refresh: () => loadContextSummaryAndRender(refreshLookupId),
     kind: 'context',
   });
+  setSummaryModalLeaveHandler('context', () => commitAutoCompactDraft());
 }
 
 async function showUsage() {
@@ -3125,15 +3423,27 @@ async function showUsage() {
     btn.textContent = '⏳';
     btn.disabled = true;
   }
+  // What was shown last time is shown again at once; only the open tab's
+  // provider is read live, and its card is swapped in when the answer comes.
+  const kept = lastUsageReport || readStoredUsageReport();
+  const activeProvider = normalizeUsageProvider(activeComposerProviderType());
   openSummaryModal({
     title: 'Plan usage',
     subtitle: 'Loading…',
-    bodyHtml: '<div class="summary-loading">Fetching plan usage across providers…</div>',
-    refresh: loadUsageSummaryAndRender,
+    bodyHtml: '<div class="summary-loading">Fetching plan usage…</div>',
+    refresh: refreshOpenUsageTab,
     kind: 'usage',
   });
-  setSummaryModalLoading(true);
   try {
+    if (kept && renderUsageReport(kept, null, { updating: activeProvider })) {
+      if (btn) {
+        btn.textContent = btn.id === 'chat-menu-usage' ? '📊 Check Usage' : '📊';
+        btn.disabled = false;
+      }
+      await refreshUsageProvider(activeProvider);
+      return;
+    }
+    setSummaryModalLoading(true);
     await loadUsageSummaryAndRender();
   } catch (e) {
     renderSummaryModalContent({
@@ -3747,6 +4057,11 @@ function syncChatTitleControls() {
     killBtn.disabled = sharedMode || !convId || !sdkSessionId;
     killBtn.hidden = sharedMode || !convId;
   }
+  const archiveBtn = document.getElementById('chat-menu-archive');
+  if (archiveBtn) {
+    archiveBtn.hidden = sharedMode || !convId;
+    archiveBtn.textContent = conversation?.archived === true ? '📂 Unarchive conversation' : '🗄 Archive conversation';
+  }
   if (editor) {
     editor.hidden = !editing;
   }
@@ -3762,6 +4077,11 @@ function syncChatTitleControls() {
   if (!isStatusViewActive()) {
     syncChatHeaderWorkspaceLabel();
   }
+  // Cloud line, hidden controls and the image-only attach button all follow
+  // the conversation on screen, like the header does.
+  syncClaudeCloudConversationUi();
+  // "via agent": the conversation an agent on this relay started this one from.
+  syncConversationOriginHeader();
   syncChatTitleWatcherIndicator();
 }
 
@@ -3919,12 +4239,31 @@ initTmuxInspectorView({
   closeChatActionsMenu,
 });
 
+// The composer's model list of a cloud conversation comes from the Claude
+// Cloud settings, which load (and change) independently of the catalog.
+function refreshClaudeCloudComposerModels() {
+  if (isSharedReaderMode()) return;
+  if (normalizeModelSelectorProviderType(activeComposerProviderType()) !== CLAUDE_CLOUD_PROVIDER) return;
+  const select = document.getElementById('model-select');
+  // Without a healthy catalog there is nothing to rebuild from (and a rebuild
+  // would raise the metadata blocker); the next catalog load builds the list
+  // with whatever settings have arrived by then.
+  if (!select || !isModelMetadataHealthy()) return;
+  // Dropping the scope makes syncAutoModelAvailability rebuild the options.
+  delete select.dataset.providerScope;
+  syncAutoModelAvailability();
+}
+
 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
@@ -3950,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();
@@ -3982,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();
@@ -4023,6 +4364,17 @@ async function initApp() {
         });
       });
     }
+    const chatMenuArchiveBtn = document.getElementById('chat-menu-archive');
+    bindMenuAction(chatMenuArchiveBtn, (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      lockChatActionsMenuShield(350);
+      closeChatActionsMenu();
+      const convId = String(currentConvId || '').trim();
+      if (!convId) return;
+      const archived = conversations[convId]?.archived === true;
+      void (archived ? unarchiveConv(null, convId) : archiveConv(null, convId));
+    });
     const chatMenuShareConversationBtn = document.getElementById('chat-menu-share-conversation');
     bindMenuAction(chatMenuShareConversationBtn, (event) => {
       event.preventDefault();
@@ -4082,6 +4434,14 @@ async function initApp() {
       closeChatActionsMenu();
       openGitChangesModal();
     });
+    const chatMenuOpenCloudSessionBtn = document.getElementById('chat-menu-open-cloud-session');
+    bindMenuAction(chatMenuOpenCloudSessionBtn, (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      lockChatActionsMenuShield(350);
+      closeChatActionsMenu();
+      openCurrentCloudSession(showExternalLinkFallback);
+    });
     const chatMenuSettingsBtn = document.getElementById('chat-menu-settings');
     bindMenuAction(chatMenuSettingsBtn, (event) => {
       event.preventDefault();
@@ -4172,6 +4532,7 @@ async function initApp() {
   }
   initAutoCompactWindowControl();
   initThinkingControl();
+  initAttributionControl();
   initModeSelector();
   initModelSelector();
   initReasoningSelector();
@@ -4190,6 +4551,11 @@ async function initApp() {
   await refreshOpenAISettingsState();
   await refreshCursorSettingsState();
   await refreshGrokSettingsState();
+  // Not awaited: only a Claude Cloud conversation needs it (its model list),
+  // and the subscription below rebuilds that list when the answer arrives. A
+  // relay without the provider answers nothing and nothing changes.
+  subscribeClaudeCloudSettings(refreshClaudeCloudComposerModels);
+  void refreshClaudeCloudSettingsState();
   await refreshModelCatalog(true);
   initFullscreenButton();
   initInstallButton();
@@ -4311,6 +4677,9 @@ window.dismissAvailableUpdate = dismissAvailableUpdate;
 window.dismissUpdateOutcome = dismissUpdateOutcome;
 window.saveGrokSettings = saveGrokSettings;
 window.toggleGrokProvider = toggleGrokProvider;
+window.saveClaudeCloudSettings = saveClaudeCloudSettings;
+window.toggleClaudeCloudProvider = toggleClaudeCloudProvider;
+window.openClaudeCloudLoginTab = openClaudeCloudLoginTab;
 window.saveCursorSettings = saveCursorSettings;
 window.removeCursorSettings = removeCursorSettings;
 window.saveCursorAllowanceSettings = saveCursorAllowanceSettings;
@@ -4334,6 +4703,9 @@ window.addRemoteRelayFromForm = addRemoteRelayFromForm;
 window.showRemoteRelayTokenField = showRemoteRelayTokenField;
 window.saveRemoteRelayPublicUrl = saveRemoteRelayPublicUrl;
 window.toggleRemoteRelayInbound = toggleRemoteRelayInbound;
+window.toggleAgentSessions = toggleAgentSessions;
+window.previewAgentSessionsMaxWait = previewAgentSessionsMaxWait;
+window.saveAgentSessionsMaxWait = saveAgentSessionsMaxWait;
 window.doAuth = doAuth;
 window.initApp = initApp;
 window.connectSocket = connectSocket;
@@ -4370,7 +4742,12 @@ window.newConversation = newConversation;
 window.confirmNewConversationModel = confirmNewConversationModel;
 window.closeNewConversationModelModal = closeNewConversationModelModal;
 window.deleteConv = deleteConv;
+window.archiveConv = archiveConv;
+window.unarchiveConv = unarchiveConv;
+window.toggleArchivedConversations = toggleArchivedConversations;
+window.refreshNewConversationCloudRepoList = refreshNewConversationCloudRepoList;
 window.openConversation = openConversation;
+window.openOriginConversation = openOriginConversation;
 window.toggleStatusView = toggleStatusView;
 window.refreshConversations = refreshConversations;
 window.renderConvList = renderConvList;
@@ -4428,6 +4805,9 @@ window.syncChatTitleControls = syncChatTitleControls;
 window.closeChatActionsMenu = closeChatActionsMenu;
 window.openSuspendHostConfirmation = openSuspendHostConfirmation;
 window.confirmKillCurrentSession = confirmKillCurrentSession;
+// The conversation list's context menu reaches these for the open conversation.
+window.openKillSessionConfirmation = openKillSessionConfirmation;
+window.openChatTitleEditor = openChatTitleEditor;
 window.confirmRestartWebRelay = confirmRestartWebRelay;
 window.confirmSuspendHost = confirmSuspendHost;
 window.cancelQueuedHostSuspend = cancelQueuedHostSuspend;