@oar-sh/oar 0.9.6 → 0.9.7

package/server/public/app/bootstrap.js

@@ -70,6 +70,7 @@ import {
   refreshConversationHistory,
   updateConversationTitle,
   updateConversationPreferences,
+  updateWorkspaceRootAttribution,
   createConversationShareLink,
   updateDefaultSessionWorkspaceRoot,
   scheduleContextUsageRefresh,
@@ -83,6 +84,12 @@ import {
   confirmNewConversationModel,
   closeNewConversationModelModal,
   deleteConv,
+  archiveConv,
+  unarchiveConv,
+  toggleArchivedConversations,
+  isArchivedConversationsView,
+  refreshNewConversationCloudRepoList,
+  openOriginConversation,
 } from './journal-view.js';
 import {
   loadRelayQuestions,
@@ -197,6 +204,7 @@ import {
   thinkingEnabledFromKey,
   thinkingEnabledToKey,
 } from './context-usage-view.mjs';
+import { renderAttributionControlHtml } from './attribution-control.mjs';
 import {
   autoCompactWindowFromIndex,
   autoCompactWindowToIndex,
@@ -329,6 +337,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 +384,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',
@@ -1197,6 +1222,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 +1379,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 +1409,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 +1457,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 +1476,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 +1819,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 +1850,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 +1865,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 +1917,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 +2407,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 +2433,7 @@ function renderModelVariantCatalogBody() {
         && provider !== 'claude'
         && provider !== 'cursor'
         && provider !== 'grok'
+        && provider !== CLAUDE_CLOUD_PROVIDER
       ));
     }
     return true;
@@ -2786,6 +2860,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 +2937,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 +2953,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 +3054,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 +3074,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
@@ -2954,6 +3154,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;
@@ -3055,9 +3285,11 @@ 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');
@@ -3086,6 +3318,11 @@ async function loadContextSummaryAndRender(convId) {
       thinkingDisplay: payload.thinkingDisplay ?? 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)
+    : '';
   // The slider's writes need the conversation id even when the modal was
   // opened through an sdk_session_id.
   autoCompactControlConversationId = String(
@@ -3102,10 +3339,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',
@@ -3125,15 +3362,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 +3996,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 +4016,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,6 +4178,21 @@ 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';
@@ -4023,6 +4297,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 +4367,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 +4465,7 @@ async function initApp() {
   }
   initAutoCompactWindowControl();
   initThinkingControl();
+  initAttributionControl();
   initModeSelector();
   initModelSelector();
   initReasoningSelector();
@@ -4190,6 +4484,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 +4610,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 +4636,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 +4675,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 +4738,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;