@oar-sh/oar 0.9.6 → 0.9.7

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

@@ -28,15 +28,22 @@ import {
   loadConversations as loadConversationsApi,
   loadConversation,
   deleteConversation as deleteConversationApi,
+  archiveConversation as archiveConversationApi,
+  unarchiveConversation as unarchiveConversationApi,
   bootstrapConversationSession,
   scheduleContextUsageRefresh,
   loadModelCatalog,
   loadClaudeSettings,
+  loadClaudeCloudSettings,
   loadCursorSettings,
+  loadGitRemote,
+  loadClaudeCloudBranches,
+  loadClaudeCloudRepos,
   loadGrokSettings,
   loadOpenAISettings,
 } from './api-client.js';
-import { renderMessages, restoreInFlightThinking, focusConversationMessageById, flushConversationDraft, hydrateConversationDraft, beginConversationDraftSwitch } from './conversation-view.js';
+import { renderMessages, restoreInFlightThinking, focusConversationMessageById, flushConversationDraft, hydrateConversationDraft, beginConversationDraftSwitch, openStopTurnConfirmationForConversation, conversationHasActiveTurn } from './conversation-view.js';
+import { MENU_SEPARATOR, bindLongPress, closeContextMenu, openContextMenu } from './context-menu.mjs';
 import { setBackgroundTasksConversation, setConversationBackgroundTasks } from './background-tasks-view.mjs';
 import { setUsageLimitConversation } from './usage-limit-ui.js';
 import { mergeConversationPreviews } from './preview-cards.mjs';
@@ -59,6 +66,23 @@ import {
   conversationProviderIndicatorLabel,
 } from './conversation-provider-indicator.mjs';
 import { leaveStatusView } from './status-view.mjs';
+import {
+  CLAUDE_CLOUD_PROVIDER,
+  buildCloudSourceWarnings,
+  claudeCloudDefaultModel,
+  claudeCloudModelIds,
+  cloudBootstrapErrorModel,
+  cloudFolderStatusText,
+  cloudRepoAccess,
+  cloudRepoSuggestionMeta,
+  filterCloudBranchSuggestions,
+  filterCloudRepoSuggestions,
+  isClaudeCloudConversation,
+  newChatRowVisibility,
+  normalizeCloudRepoInput,
+  resolveCloudSourceAutoFill,
+  validateCloudSourceInputs,
+} from './claude-cloud-ui.mjs';
 import { renderConversationOriginMarkerHtml } from './remote-relay-origin-view.mjs';
 import {
   normalizeConversationFilter,
@@ -108,6 +132,30 @@ let newConversationOpenAISettingsCache = null;
 let newConversationClaudeSettingsCache = null;
 let newConversationCursorSettingsCache = null;
 let newConversationGrokSettingsCache = null;
+let newConversationClaudeCloudSettingsCache = null;
+// Claude Cloud fields of the New Chat modal: what the selected folder's git
+// remote said, and what was written into Repository/Branch from it (so a later
+// lookup can tell its own fill from something the user typed).
+const NEW_CHAT_CLOUD_LOOKUP_DEBOUNCE_MS = 350;
+let newConversationCloudRemote = null;
+let newConversationCloudLookupFailed = false;
+let newConversationCloudLookupFolder = null;
+let newConversationCloudAutoFill = null;
+let newConversationCloudLookupSeq = 0;
+let newConversationCloudLookupTimer = null;
+// Suggestions under the two fields: the repositories the Claude GitHub app
+// can reach plus the ones used in earlier cloud chats here (one read per
+// open), and the branches of the repository in the field (read when it
+// changes). `branchAutoFill` is what a folder lookup or a pick wrote into
+// Branch, so a later pick may replace it while a typed branch stays.
+let newConversationCloudRepoList = null;
+let newConversationCloudRepoListPromise = null;
+let newConversationCloudBranchList = null;
+let newConversationCloudBranchSeq = 0;
+let newConversationCloudBranchTimer = null;
+let newConversationCloudBranchAutoFill = '';
+const newConversationCloudSuggestActive = { repo: -1, branch: -1 };
+const NEW_CHAT_CLOUD_SUGGEST_BLUR_MS = 150;
 let conversationListBoundaryCheckFrame = 0;
 let conversationListAutoLoadBlockedUntil = 0;
 let conversationListPaginationState = {
@@ -178,6 +226,7 @@ const conversationListLoader = createInfiniteLoader({
       limit: CONVERSATION_LIST_PAGE_SIZE,
       beforeConversationId: String(cursor?.beforeConversationId || '').trim(),
       beforeUpdatedAt: String(cursor?.beforeUpdatedAt || '').trim(),
+      archived: conversationListArchivedView ? 'only' : '',
     });
     if (!response) throw new Error('Could not load conversations');
     return {
@@ -267,7 +316,10 @@ export async function loadConversations() {
 
 export async function refreshConversations(options = {}) {
   const preservePagination = options?.preservePagination !== false;
-  const r = await loadConversationsApi({ limit: CONVERSATION_LIST_PAGE_SIZE });
+  const r = await loadConversationsApi({
+    limit: CONVERSATION_LIST_PAGE_SIZE,
+    archived: conversationListArchivedView ? 'only' : '',
+  });
   if (!r) return;
   if (Array.isArray(r.knownConversationIds)) {
     const knownConversationIds = new Set(
@@ -300,7 +352,9 @@ export function renderConvList() {
     return String(b?.id || '').trim().localeCompare(String(a?.id || '').trim());
   });
   const activeFilter = normalizeConversationFilter(conversationListFilterText);
-  const visible = activeFilter ? filterConversations(sorted, activeFilter) : sorted;
+  // The live list and the Archived view are two views of the same records.
+  const inView = sorted.filter((conversation) => (conversation?.archived === true) === conversationListArchivedView);
+  const visible = activeFilter ? filterConversations(inView, activeFilter) : inView;
   const pendingByConversation = getPendingQuestionCountsByConversation();
   let hasProcessingConversation = false;
   const footerHtml = (() => {
@@ -322,9 +376,9 @@ export function renderConvList() {
   })();
   if (visible.length === 0) {
     ensureProcessingDotTimer(false);
-    const emptyText = activeFilter && sorted.length > 0
+    const emptyText = activeFilter && inView.length > 0
       ? 'No conversations match your filter'
-      : 'No conversations yet';
+      : (conversationListArchivedView ? 'No archived conversations' : 'No conversations yet');
     list.innerHTML = `<div style="padding:12px;color:var(--muted);font-size:0.85rem;text-align:center">${emptyText}</div>${footerHtml}`;
     lastConvListHtml = '';
     scheduleConversationListBoundaryCheck();
@@ -352,11 +406,15 @@ export function renderConvList() {
       ? `<span class="conv-provider-indicator"${providerIndicatorKey ? ` data-provider="${providerIndicatorKey}"` : ''}>${providerIndicatorLabel}</span>`
       : '';
     // "↗ win-test": another relay's agent created this conversation.
-    const originMarkerHtml = renderConversationOriginMarkerHtml(c);
+    // "via agent · “title”": an agent in that conversation on this relay did.
+    const originMarkerHtml = renderConversationOriginMarkerHtml(c, { conversations });
     return `
-    <div class="conv-item worker-ui-${view.visualState}${c.id === currentConvId ? ' active' : ''}" onclick="openConversation('${c.id}')">
-      <div class="conv-title">${escHtml(c.title)}${processingDots ? `<span class="conv-processing-dots">${escHtml(` ${processingDots}`)}</span>` : ''}${c.archived ? ' <span style="font-size:0.68rem;color:var(--muted)">(archived)</span>' : ''}${pendingByConversation[c.id] ? ` <span class="conv-open-questions">${pendingByConversation[c.id]} open</span>` : ''}</div>
+    <div class="conv-item worker-ui-${view.visualState}${c.id === currentConvId ? ' active' : ''}${c.archived ? ' archived' : ''}" data-conversation-id="${c.id}" onclick="openConversation('${c.id}')">
+      <div class="conv-title">${escHtml(c.title)}${processingDots ? `<span class="conv-processing-dots">${escHtml(` ${processingDots}`)}</span>` : ''}${pendingByConversation[c.id] ? ` <span class="conv-open-questions">${pendingByConversation[c.id]} open</span>` : ''}</div>
       <div class="conv-meta"><span class="conv-meta-primary">${fmtDate(c.updatedAt)} · ${c.messageCount} msg${c.messageCount !== 1 ? 's' : ''}</span>${originMarkerHtml}${providerIndicatorHtml}</div>
+      ${c.archived
+        ? `<button class="conv-archive" onclick="unarchiveConv(event,'${c.id}')" title="Unarchive" aria-label="Unarchive">📂</button>`
+        : `<button class="conv-archive" onclick="archiveConv(event,'${c.id}')" title="Archive" aria-label="Archive">🗄</button>`}
       <button class="conv-delete" onclick="deleteConv(event,'${c.id}')" title="Delete">🗑</button>
     </div>`;
   }).join('')}${footerHtml}`;
@@ -364,6 +422,7 @@ export function renderConvList() {
     list.innerHTML = listHtml;
     lastConvListHtml = listHtml;
   }
+  bindConversationContextMenu(list);
   ensureProcessingDotTimer(hasProcessingConversation);
   window.syncChatTitleControls?.();
   scheduleConversationListBoundaryCheck();
@@ -410,6 +469,12 @@ export function applyLoadedConversationState(id, response, {
       ?? existingConversation.runtimeModel
       ?? null,
     sessionUsageSummary: response.sessionUsageSummary ?? existingConversation.sessionUsageSummary ?? null,
+    // Claude Cloud only: repository, branch, session link, pushed branches.
+    // An explicit null is a real answer ("not a cloud chat"); only a payload
+    // without the field (an older relay) keeps what the list said.
+    cloud: 'cloud' in response ? (response.cloud ?? null) : (existingConversation.cloud ?? null),
+    // Who created the conversation, when an agent did (the "via agent" marker).
+    origin: 'origin' in response ? (response.origin ?? null) : (existingConversation.origin ?? null),
     messageCount: Array.isArray(response.messages)
       ? Math.max(existingConversation.messageCount || 0, response.messages.length)
       : (existingConversation.messageCount || 0),
@@ -456,6 +521,23 @@ export function applyLoadedConversationState(id, response, {
   saveConversationScrollTop(id, el.scrollTop);
 }
 
+// The "via agent" marker (sidebar row, header, message badge): opens the
+// conversation whose agent started this one. The marker sits inside a sidebar
+// row that opens on click itself, so the click stops here.
+export function openOriginConversation(event, element) {
+  event?.stopPropagation?.();
+  event?.preventDefault?.();
+  const id = String(element?.dataset?.originConversationId || '').trim();
+  if (!id) return null;
+  if (!conversations[id]) {
+    // Deleted since the marker was drawn; the next render makes it plain text.
+    showTransientRelayNotice('That conversation is no longer in the list.');
+    renderConvList();
+    return null;
+  }
+  return openConversation(id);
+}
+
 export async function openConversation(id, options = {}) {
   const didLeaveStatusView = leaveStatusView();
   document.getElementById('input-area')?.removeAttribute('hidden');
@@ -559,6 +641,7 @@ function normalizeNewConversationProviderType(value = '') {
   if (normalized === 'openai' || normalized === 'openai-byok') return 'openai';
   if (normalized === 'openai-image' || normalized === 'openai-image-byok') return 'openai-image';
   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';
@@ -639,11 +722,18 @@ function modelMatchesNewConversationProvider(catalog = {}, modelId = '', provide
   if (cursorOnly) return false;
   const grokOnly = hasGrok && providers.every((provider) => provider === 'grok');
   if (grokOnly) return false;
+  // Should a relay ever tag catalog rows for Claude Cloud, they are no more
+  // Copilot's than the other runtimes' rows are.
+  const exclusiveOnly = providers.length > 0 && providers.every((provider) => (
+    provider === 'claude' || provider === 'cursor' || provider === 'grok' || provider === CLAUDE_CLOUD_PROVIDER
+  ));
+  if (exclusiveOnly) return false;
   return providers.some((provider) => (
     provider !== 'openai-byok'
     && provider !== 'claude'
     && provider !== 'cursor'
     && provider !== 'grok'
+    && provider !== CLAUDE_CLOUD_PROVIDER
   )) || !hasOpenAIByok;
 }
 
@@ -727,6 +817,13 @@ async function populateNewConversationReasoningSelect(selectedModel = '') {
   const provider = normalizeNewConversationProviderType(
     String(document.getElementById('new-conversation-provider-select')?.value || '').trim().toLowerCase(),
   );
+  // A cloud session has no effort choice; its row is hidden, and an empty
+  // select is what the Start button reads as "send none".
+  if (!newChatRowVisibility(provider).reasoning) {
+    select.innerHTML = '';
+    select.disabled = true;
+    return;
+  }
   syncNewConversationReasoningLabel(provider);
   const catalog = newConversationCatalogCache || await loadModelCatalog() || {};
   const efforts = reasoningChoicesForProviderModel(catalog || {}, {
@@ -785,6 +882,10 @@ function updateNewConversationProviderHelp(provider = 'github') {
     help.textContent = "Claude chats run through the Claude Agent SDK with the relay host's Claude login.";
     return;
   }
+  if (normalizedProvider === CLAUDE_CLOUD_PROVIDER) {
+    help.textContent = "Claude Cloud chats run in a sandbox at Anthropic on a clone of a GitHub repository, billed to the relay host's Claude account.";
+    return;
+  }
   if (normalizedProvider === 'cursor') {
     help.textContent = 'Cursor chats run through the Cursor Agent SDK using your saved Cursor API key.';
     return;
@@ -803,12 +904,16 @@ async function populateNewConversationModelSelect(providerType = 'github') {
   const catalog = newConversationCatalogCache || await loadModelCatalog();
   if (!catalog || !Array.isArray(catalog.models)) return false;
   const normalizedProvider = normalizeNewConversationProviderType(providerType);
-  const eligibleModels = catalog.models
-    .map((modelId) => String(modelId || '').trim())
-    .filter((modelId) => modelMatchesNewConversationProvider(catalog, modelId, normalizedProvider))
-    .filter((modelId) => (
-      normalizedProvider !== 'openai-image' || isOpenAIImageModelId(modelId)
-    ));
+  const isCloud = normalizedProvider === CLAUDE_CLOUD_PROVIDER;
+  // Claude Cloud brings its own list (the tab's models), not catalog rows.
+  const eligibleModels = isCloud
+    ? claudeCloudModelIds(newConversationClaudeCloudSettingsCache)
+    : catalog.models
+      .map((modelId) => String(modelId || '').trim())
+      .filter((modelId) => modelMatchesNewConversationProvider(catalog, modelId, normalizedProvider))
+      .filter((modelId) => (
+        normalizedProvider !== 'openai-image' || isOpenAIImageModelId(modelId)
+      ));
   // The same builder the composer's #model-select uses, on the same catalog,
   // so the two pickers agree on order and wording by construction. The modal
   // used to borrow labels from the composer, which is scoped to the OPEN
@@ -817,7 +922,8 @@ async function populateNewConversationModelSelect(providerType = 'github') {
   const choices = buildNewConversationModelChoices(
     buildCatalogModelOptions(eligibleModels, {
       metadataByModel: catalog.modelMetadataByModel || {},
-      annotateContextWindow: normalizedProvider !== 'claude',
+      // The merged metadata knows Copilot's windows, not Claude's or the cloud's.
+      annotateContextWindow: normalizedProvider !== 'claude' && !isCloud,
     }).filter((option) => hasAuto || option.value.toLowerCase() !== 'auto'),
   );
   for (const choice of choices) {
@@ -826,9 +932,16 @@ async function populateNewConversationModelSelect(providerType = 'github') {
     option.textContent = choice.label;
     target.appendChild(option);
   }
+  // The rows follow the provider even when it has no model to offer, so a
+  // provider switch never leaves another provider's fields on screen.
+  syncNewConversationProviderRows(normalizedProvider);
   if (!target.options.length) return false;
   const storedModel = storedComposerModel();
-  if (storedModel && Array.from(target.options).some((option) => option.value === storedModel)) {
+  if (isCloud) {
+    // The tab's default, not the last model another provider's chat used.
+    const cloudDefault = claudeCloudDefaultModel(newConversationClaudeCloudSettingsCache, eligibleModels);
+    if (cloudDefault) target.value = cloudDefault;
+  } else if (storedModel && Array.from(target.options).some((option) => option.value === storedModel)) {
     target.value = storedModel;
   } else if (normalizedProvider !== 'openai-image' && Array.from(target.options).some((option) => option.value === 'auto')) {
     target.value = 'auto';
@@ -841,6 +954,414 @@ async function populateNewConversationModelSelect(providerType = 'github') {
   return true;
 }
 
+function selectedNewConversationProvider() {
+  return normalizeNewConversationProviderType(
+    String(document.getElementById('new-conversation-provider-select')?.value || '').trim(),
+  );
+}
+
+function isNewConversationCloudSelected() {
+  return selectedNewConversationProvider() === CLAUDE_CLOUD_PROVIDER;
+}
+
+function syncNewConversationProviderRows(providerType = 'github') {
+  const rows = newChatRowVisibility(providerType);
+  const cloudRow = document.getElementById('new-conversation-cloud-row');
+  if (cloudRow) cloudRow.hidden = !rows.cloudSource;
+  if (rows.cloudSource) void ensureNewConversationCloudRepoList();
+  const reasoningRow = document.getElementById('new-conversation-reasoning-row');
+  if (reasoningRow) reasoningRow.hidden = !rows.reasoning;
+  // The folder line reads differently for a chat that does not run in the folder.
+  syncNewConversationCwdControls();
+}
+
+function newConversationCloudInputs() {
+  return {
+    repo: document.getElementById('new-conversation-cloud-repo'),
+    branch: document.getElementById('new-conversation-cloud-branch'),
+  };
+}
+
+function renderNewConversationCloudWarnings() {
+  const container = document.getElementById('new-conversation-cloud-warnings');
+  if (!container) return;
+  const { repo, branch } = newConversationCloudInputs();
+  const warnings = isNewConversationCloudSelected()
+    ? buildCloudSourceWarnings({
+      remote: newConversationCloudRemote,
+      lookupFailed: newConversationCloudLookupFailed,
+      repo: repo?.value || '',
+      branch: branch?.value || '',
+      environmentId: newConversationClaudeCloudSettingsCache?.environmentId || '',
+      repoAccess: cloudRepoAccess(newConversationCloudRepoList, repo?.value || ''),
+    })
+    : [];
+  container.replaceChildren(...warnings.map((warning) => {
+    const line = document.createElement('div');
+    line.className = 'new-conversation-cloud-warning';
+    line.dataset.kind = warning.kind;
+    line.textContent = warning.text;
+    return line;
+  }));
+}
+
+// `fields` marks the inputs the message is about; none means a general error.
+function showNewConversationCloudError(text = '', fields = []) {
+  const errorEl = document.getElementById('new-conversation-cloud-error');
+  if (errorEl) {
+    errorEl.textContent = text;
+    errorEl.hidden = !text;
+  }
+  const inputs = newConversationCloudInputs();
+  for (const [name, input] of Object.entries(inputs)) {
+    if (!input) continue;
+    if (fields.includes(name)) input.setAttribute('aria-invalid', 'true');
+    else input.removeAttribute('aria-invalid');
+  }
+  const firstInvalid = fields.map((name) => inputs[name]).find(Boolean);
+  if (text && firstInvalid) firstInvalid.focus?.();
+}
+
+function resetNewConversationCloudState() {
+  if (newConversationCloudLookupTimer) clearTimeout(newConversationCloudLookupTimer);
+  newConversationCloudLookupTimer = null;
+  newConversationCloudLookupSeq += 1;
+  newConversationCloudRemote = null;
+  newConversationCloudLookupFailed = false;
+  newConversationCloudLookupFolder = null;
+  newConversationCloudAutoFill = null;
+  if (newConversationCloudBranchTimer) clearTimeout(newConversationCloudBranchTimer);
+  newConversationCloudBranchTimer = null;
+  newConversationCloudBranchSeq += 1;
+  newConversationCloudRepoList = null;
+  newConversationCloudRepoListPromise = null;
+  newConversationCloudBranchList = null;
+  newConversationCloudBranchAutoFill = '';
+  const { repo, branch } = newConversationCloudInputs();
+  if (repo) repo.value = '';
+  if (branch) branch.value = '';
+  hideNewConversationCloudSuggestions('repo');
+  hideNewConversationCloudSuggestions('branch');
+  showNewConversationCloudError('');
+  renderNewConversationCloudWarnings();
+}
+
+// ── Repository and branch suggestions ──
+
+/** Read the repository list once per open; the warnings and an open list follow. */
+function ensureNewConversationCloudRepoList() {
+  if (newConversationCloudRepoList || newConversationCloudRepoListPromise) return newConversationCloudRepoListPromise;
+  const seq = newConversationCloudLookupSeq;
+  newConversationCloudRepoListPromise = loadClaudeCloudRepos().then((payload) => {
+    // A reset in the meantime (the modal closed) owns the fields now.
+    if (seq !== newConversationCloudLookupSeq) return;
+    newConversationCloudRepoList = payload && typeof payload === 'object' ? payload : { ok: false, repos: [] };
+    newConversationCloudRepoListPromise = null;
+    renderNewConversationCloudWarnings();
+    renderNewConversationCloudSuggestions('repo');
+  }).catch(() => {
+    newConversationCloudRepoListPromise = null;
+  });
+  return newConversationCloudRepoListPromise;
+}
+
+/** The ↻ next to Repository: read the list afresh from the relay (and Anthropic). */
+export async function refreshNewConversationCloudRepoList() {
+  const button = document.getElementById('new-conversation-cloud-repo-refresh');
+  if (button?.getAttribute('aria-busy') === 'true') return;
+  button?.setAttribute('aria-busy', 'true');
+  const seq = newConversationCloudLookupSeq;
+  try {
+    const payload = await loadClaudeCloudRepos({ refresh: true });
+    if (seq !== newConversationCloudLookupSeq) return;
+    newConversationCloudRepoList = payload && typeof payload === 'object' ? payload : { ok: false, repos: [] };
+    renderNewConversationCloudWarnings();
+    const { repo } = newConversationCloudInputs();
+    if (repo && document.activeElement !== repo) repo.focus?.();
+    renderNewConversationCloudSuggestions('repo');
+  } finally {
+    button?.removeAttribute('aria-busy');
+  }
+}
+
+function newConversationCloudSuggestList(field) {
+  return document.getElementById(`new-conversation-cloud-${field}-list`);
+}
+
+/** The entries to offer for what the field holds: `{ value, label, meta }`. */
+function newConversationCloudSuggestions(field) {
+  const { repo, branch } = newConversationCloudInputs();
+  if (field === 'repo') {
+    const entries = Array.isArray(newConversationCloudRepoList?.repos) ? newConversationCloudRepoList.repos : [];
+    return filterCloudRepoSuggestions(entries, repo?.value || '')
+      .map((entry) => ({ value: entry.slug, label: entry.slug, meta: cloudRepoSuggestionMeta(entry) }));
+  }
+  const list = newConversationCloudBranchList;
+  const slug = normalizeCloudRepoInput(repo?.value || '')?.slug || '';
+  if (!list || !slug || list.slug !== slug) return [];
+  // A default branch the pick wrote in is not a filter: the whole list shows.
+  const typed = branch?.value || '';
+  const query = typed && typed === newConversationCloudBranchAutoFill ? '' : typed;
+  return filterCloudBranchSuggestions(list.branches, query, { defaultBranch: list.defaultBranch })
+    .map((name) => ({ value: name, label: name, meta: name === list.defaultBranch ? 'default' : '' }));
+}
+
+function hideNewConversationCloudSuggestions(field) {
+  const list = newConversationCloudSuggestList(field);
+  if (list) {
+    list.hidden = true;
+    list.replaceChildren();
+  }
+  newConversationCloudInputs()[field]?.setAttribute('aria-expanded', 'false');
+  newConversationCloudSuggestActive[field] = -1;
+}
+
+/**
+ * Show the suggestions for a focused field. The list lives in the modal's
+ * flow under the field (a popover would be clipped by the scrolling modal on
+ * a phone). Nothing to offer, or the field not focused: no list.
+ */
+function renderNewConversationCloudSuggestions(field) {
+  const input = newConversationCloudInputs()[field];
+  const list = newConversationCloudSuggestList(field);
+  if (!input || !list) return;
+  if (!isNewConversationCloudSelected() || document.activeElement !== input) {
+    hideNewConversationCloudSuggestions(field);
+    return;
+  }
+  const suggestions = newConversationCloudSuggestions(field);
+  // The list could not be read from Claude Cloud: the recent repositories
+  // are still offered, with the reason under them.
+  const listError = field === 'repo' && newConversationCloudRepoList && newConversationCloudRepoList.ok === false
+    ? String(newConversationCloudRepoList.error?.message || 'The repositories could not be read from Claude Cloud.').trim()
+    : '';
+  if (!suggestions.length && !listError) {
+    hideNewConversationCloudSuggestions(field);
+    return;
+  }
+  const active = Math.min(newConversationCloudSuggestActive[field], suggestions.length - 1);
+  newConversationCloudSuggestActive[field] = active;
+  list.replaceChildren(...suggestions.map((suggestion, index) => {
+    const item = document.createElement('button');
+    item.type = 'button';
+    item.className = 'new-conversation-cloud-suggest-item';
+    item.setAttribute('role', 'option');
+    item.setAttribute('aria-selected', index === active ? 'true' : 'false');
+    item.dataset.value = suggestion.value;
+    const label = document.createElement('span');
+    label.textContent = suggestion.label;
+    item.append(label);
+    if (suggestion.meta) {
+      const meta = document.createElement('span');
+      meta.className = 'new-conversation-cloud-suggest-meta';
+      meta.textContent = suggestion.meta;
+      item.append(meta);
+    }
+    return item;
+  }));
+  if (listError) {
+    const note = document.createElement('div');
+    note.className = 'new-conversation-cloud-suggest-note';
+    note.textContent = listError;
+    list.append(note);
+  }
+  list.hidden = false;
+  input.setAttribute('aria-expanded', 'true');
+}
+
+/** A suggestion taken: the field holds it, and a repository brings its default branch along. */
+function pickNewConversationCloudSuggestion(field, value) {
+  const { repo, branch } = newConversationCloudInputs();
+  const input = field === 'repo' ? repo : branch;
+  if (!input) return;
+  input.value = value;
+  hideNewConversationCloudSuggestions(field);
+  if (field === 'repo') {
+    const entries = Array.isArray(newConversationCloudRepoList?.repos) ? newConversationCloudRepoList.repos : [];
+    const entry = entries.find((candidate) => candidate?.slug === value) || null;
+    const defaultBranch = String(entry?.defaultBranch || '').trim();
+    // The default branch is preselected; a branch the user typed is kept.
+    if (branch && (!branch.value.trim() || branch.value === newConversationCloudBranchAutoFill)) {
+      branch.value = defaultBranch;
+      newConversationCloudBranchAutoFill = defaultBranch;
+    }
+    newConversationCloudBranchList = null;
+    scheduleNewConversationCloudBranchLookup(0);
+  }
+  showNewConversationCloudError('');
+  renderNewConversationCloudWarnings();
+  input.focus?.();
+}
+
+/** Read the branches of the repository in the field, unless they are known. */
+async function refreshNewConversationCloudBranches() {
+  const { repo, branch } = newConversationCloudInputs();
+  const slug = normalizeCloudRepoInput(repo?.value || '')?.slug || '';
+  if (!slug) {
+    newConversationCloudBranchList = null;
+    renderNewConversationCloudSuggestions('branch');
+    return;
+  }
+  if (newConversationCloudBranchList?.slug === slug) return;
+  const seq = ++newConversationCloudBranchSeq;
+  const payload = await loadClaudeCloudBranches(slug);
+  if (seq !== newConversationCloudBranchSeq) return;
+  // The host could not read them: the field stays a text field, and the
+  // default branch from the repository list is still offered.
+  const known = (Array.isArray(newConversationCloudRepoList?.repos) ? newConversationCloudRepoList.repos : [])
+    .find((entry) => entry?.slug === slug);
+  const branches = payload?.ok === true && Array.isArray(payload.branches) ? payload.branches : [];
+  const defaultBranch = String((payload?.ok === true && payload.defaultBranch) || known?.defaultBranch || '').trim();
+  newConversationCloudBranchList = { slug, branches, defaultBranch };
+  // Only an empty field takes the default here: the folder's branch belongs
+  // to the folder's repository and stays.
+  if (branch && defaultBranch && !branch.value.trim()) {
+    branch.value = defaultBranch;
+    newConversationCloudBranchAutoFill = defaultBranch;
+    renderNewConversationCloudWarnings();
+  }
+  renderNewConversationCloudSuggestions('branch');
+}
+
+function scheduleNewConversationCloudBranchLookup(delayMs = NEW_CHAT_CLOUD_LOOKUP_DEBOUNCE_MS) {
+  if (newConversationCloudBranchTimer) clearTimeout(newConversationCloudBranchTimer);
+  newConversationCloudBranchTimer = null;
+  if (!isNewConversationCloudSelected()) return;
+  newConversationCloudBranchTimer = setTimeout(() => {
+    newConversationCloudBranchTimer = null;
+    void refreshNewConversationCloudBranches();
+  }, delayMs);
+}
+
+/** Arrow keys walk the open list, Enter takes the marked entry, Escape closes it. */
+function handleNewConversationCloudSuggestKey(field, event) {
+  const list = newConversationCloudSuggestList(field);
+  const open = list && !list.hidden;
+  if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+    if (!open) {
+      renderNewConversationCloudSuggestions(field);
+      if (!list || list.hidden) return;
+    }
+    const items = [...list.querySelectorAll('.new-conversation-cloud-suggest-item')];
+    if (!items.length) return;
+    const current = newConversationCloudSuggestActive[field];
+    const next = event.key === 'ArrowDown'
+      ? (current + 1) % items.length
+      : (current <= 0 ? items.length - 1 : current - 1);
+    newConversationCloudSuggestActive[field] = next;
+    items.forEach((item, index) => item.setAttribute('aria-selected', index === next ? 'true' : 'false'));
+    items[next]?.scrollIntoView?.({ block: 'nearest' });
+    event.preventDefault();
+    return;
+  }
+  if (!open) return;
+  if (event.key === 'Enter') {
+    const active = list.querySelectorAll('.new-conversation-cloud-suggest-item')[newConversationCloudSuggestActive[field]];
+    if (active) {
+      event.preventDefault();
+      pickNewConversationCloudSuggestion(field, active.dataset.value || '');
+    }
+    return;
+  }
+  if (event.key === 'Escape') {
+    event.preventDefault();
+    event.stopPropagation();
+    hideNewConversationCloudSuggestions(field);
+  }
+}
+
+function bindNewConversationCloudSuggestions() {
+  const inputs = newConversationCloudInputs();
+  for (const [field, input] of Object.entries(inputs)) {
+    const list = newConversationCloudSuggestList(field);
+    if (!input || !list || list.dataset.cloudBound === '1') continue;
+    list.dataset.cloudBound = '1';
+    input.addEventListener('focus', () => renderNewConversationCloudSuggestions(field));
+    input.addEventListener('blur', () => {
+      // After the click on an entry, which takes the focus for a moment.
+      setTimeout(() => {
+        if (document.activeElement !== input) hideNewConversationCloudSuggestions(field);
+      }, NEW_CHAT_CLOUD_SUGGEST_BLUR_MS);
+    });
+    input.addEventListener('keydown', (event) => handleNewConversationCloudSuggestKey(field, event));
+    // The entries are buttons: a mousedown would move the focus off the
+    // field and close the list before the click lands.
+    list.addEventListener('mousedown', (event) => event.preventDefault());
+    list.addEventListener('click', (event) => {
+      const item = event.target?.closest?.('.new-conversation-cloud-suggest-item');
+      if (item) pickNewConversationCloudSuggestion(field, item.dataset.value || '');
+    });
+  }
+}
+
+// Reads origin + branch of the selected folder and fills the two fields.
+async function refreshNewConversationCloudSource() {
+  if (!isNewConversationCloudSelected()) return;
+  const pickedFolder = getNewConversationSelectedCwd();
+  const folder = pickedFolder || resolveNewConversationDefaultCwd();
+  if (folder === newConversationCloudLookupFolder) {
+    renderNewConversationCloudWarnings();
+    return;
+  }
+  const seq = ++newConversationCloudLookupSeq;
+  newConversationCloudLookupFolder = folder;
+  let remote = folder ? await loadGitRemote(folder) : null;
+  // A newer folder choice (or a closed modal) owns the fields by now.
+  if (seq !== newConversationCloudLookupSeq) return;
+  let lookupFailed = !!folder && !remote;
+  // Nobody picked the relay's default folder: when it has no repository to
+  // offer there is nothing to warn about, the fields are simply typed.
+  if (!pickedFolder && !String(remote?.repoUrl || '').trim()) {
+    remote = null;
+    lookupFailed = false;
+  }
+  newConversationCloudRemote = remote;
+  newConversationCloudLookupFailed = lookupFailed;
+  const { repo, branch } = newConversationCloudInputs();
+  const next = resolveCloudSourceAutoFill({
+    current: { repo: repo?.value || '', branch: branch?.value || '' },
+    lastAutoFill: newConversationCloudAutoFill,
+    remote,
+  });
+  if (repo) repo.value = next.repo;
+  if (branch) branch.value = next.branch;
+  newConversationCloudAutoFill = next.autoFill;
+  newConversationCloudBranchAutoFill = next.branch;
+  showNewConversationCloudError('');
+  renderNewConversationCloudWarnings();
+  scheduleNewConversationCloudBranchLookup(0);
+}
+
+// Debounced: the manual path fires on every keystroke.
+function scheduleNewConversationCloudLookup() {
+  if (newConversationCloudLookupTimer) clearTimeout(newConversationCloudLookupTimer);
+  newConversationCloudLookupTimer = null;
+  if (!isNewConversationCloudSelected()) return;
+  newConversationCloudLookupTimer = setTimeout(() => {
+    newConversationCloudLookupTimer = null;
+    void refreshNewConversationCloudSource();
+  }, NEW_CHAT_CLOUD_LOOKUP_DEBOUNCE_MS);
+}
+
+function bindNewConversationCloudInputs() {
+  for (const [field, input] of Object.entries(newConversationCloudInputs())) {
+    if (!input || input.dataset.cloudBound === '1') continue;
+    input.dataset.cloudBound = '1';
+    input.addEventListener('input', () => {
+      // The warnings depend on whether the fields still name the folder's
+      // repository and branch; an edit also answers the last error.
+      showNewConversationCloudError('');
+      renderNewConversationCloudWarnings();
+      newConversationCloudSuggestActive[field] = -1;
+      renderNewConversationCloudSuggestions(field);
+      // A typed branch is the user's own from here on.
+      if (field === 'branch') newConversationCloudBranchAutoFill = '';
+      else scheduleNewConversationCloudBranchLookup();
+    });
+  }
+  bindNewConversationCloudSuggestions();
+}
+
 function resolveNewConversationDefaultCwd() {
   return normalizeKnownCwdPath(defaultSessionWorkspaceRootPath || workspaceRootPath || '');
 }
@@ -861,6 +1382,12 @@ function syncNewConversationCwdControls() {
   if (!select) return;
   const isCustom = select.value === NEW_CHAT_CUSTOM_CWD_VALUE;
   if (manual) manual.hidden = !isCustom;
+  if (isNewConversationCloudSelected()) {
+    // The folder only supplies the repository and branch for a cloud chat.
+    scheduleNewConversationCloudLookup();
+    if (status) status.textContent = cloudFolderStatusText(getNewConversationSelectedCwd());
+    return;
+  }
   if (!status) return;
   if (isCustom) {
     const manualPath = normalizeKnownCwdPath(manual?.value || '');
@@ -949,18 +1476,24 @@ function populateNewConversationCwdSelect() {
 }
 
 async function openNewConversationModelModal() {
-  const [catalog, settings, claudeSettings, cursorSettings, grokSettings] = await Promise.all([
+  const [catalog, settings, claudeSettings, cursorSettings, grokSettings, claudeCloudSettings] = await Promise.all([
     loadModelCatalog(),
     loadOpenAISettings(),
     loadClaudeSettings(),
     loadCursorSettings(),
     loadGrokSettings(),
+    // null on a relay without Claude Cloud: the option is simply not offered.
+    loadClaudeCloudSettings(),
   ]);
   newConversationCatalogCache = catalog || null;
   newConversationOpenAISettingsCache = settings || null;
   newConversationClaudeSettingsCache = claudeSettings || null;
   newConversationCursorSettingsCache = cursorSettings || null;
   newConversationGrokSettingsCache = grokSettings || null;
+  newConversationClaudeCloudSettingsCache = claudeCloudSettings || null;
+  // Every open starts from empty cloud fields; the folder lookup refills them.
+  resetNewConversationCloudState();
+  bindNewConversationCloudInputs();
   const providerSelect = document.getElementById('new-conversation-provider-select');
   if (providerSelect) {
     const options = [{ value: 'github', label: 'Copilot' }];
@@ -971,6 +1504,9 @@ async function openNewConversationModelModal() {
     if (claudeSettings?.enabled === true) {
       options.push({ value: 'claude', label: 'Claude SDK' });
     }
+    if (claudeCloudSettings?.enabled === true) {
+      options.push({ value: CLAUDE_CLOUD_PROVIDER, label: 'Claude Cloud' });
+    }
     if (cursorSettings?.enabled === true) {
       options.push({ value: 'cursor', label: 'Cursor SDK' });
     }
@@ -1063,8 +1599,10 @@ async function openBootstrappedConversation({
   hideNewConversationModelModal();
   // The server echoes what it actually bound and stored; the composer picks
   // those up from the conversation row when it opens, so only the shared
-  // "last used" storage is updated here.
-  rememberBootstrappedSelection(payload);
+  // "last used" storage is updated here. A cloud chat starts from its tab's
+  // default model and has no effort, so it must not become what the next
+  // local chat starts with.
+  if (selectedProvider !== CLAUDE_CLOUD_PROVIDER) rememberBootstrappedSelection(payload);
   await refreshConversations();
   await openConversation(conversationId);
   if (selectedProvider === 'openai-image') {
@@ -1077,12 +1615,26 @@ async function openBootstrappedConversation({
 
 async function createNewConversation(selectedModel, selectedReasoningEffort = '', selectedCwd = '') {
   if (newConversationInFlight) return;
+  const selectedProvider = selectedNewConversationProvider();
+  const isCloud = selectedProvider === CLAUDE_CLOUD_PROVIDER;
+  let cloudSource;
+  if (isCloud) {
+    // Checked before anything is sent: both fields can be fixed in place.
+    const { repo, branch } = newConversationCloudInputs();
+    const validation = validateCloudSourceInputs({ repo: repo?.value || '', branch: branch?.value || '' });
+    if (!validation.ok) {
+      showNewConversationCloudError(
+        [validation.errors.repo, validation.errors.branch].filter(Boolean).join(' '),
+        Object.keys(validation.errors),
+      );
+      return;
+    }
+    showNewConversationCloudError('');
+    cloudSource = validation.cloudSource;
+  }
   setNewConversationInFlight(true);
   const confirmButton = document.getElementById('new-conversation-model-confirm');
   if (confirmButton) confirmButton.disabled = true;
-  const selectedProvider = normalizeNewConversationProviderType(
-    String(document.getElementById('new-conversation-provider-select')?.value || '').trim(),
-  );
   const selectedSize = String(document.getElementById('new-conversation-size-select')?.value || '').trim().toLowerCase();
   if (selectedProvider === 'openai-image' && selectedSize) {
     localStorage.setItem(OPENAI_IMAGE_SIZE_STORAGE_KEY, selectedSize);
@@ -1091,17 +1643,26 @@ async function createNewConversation(selectedModel, selectedReasoningEffort = ''
     const result = await bootstrapConversationSession({
       model: selectedModel || undefined,
       providerType: bootstrapProviderType(selectedProvider),
-      reasoningEffort: String(selectedReasoningEffort || '').trim().toLowerCase() || undefined,
+      reasoningEffort: isCloud
+        ? undefined
+        : (String(selectedReasoningEffort || '').trim().toLowerCase() || undefined),
       // Bootstrap writes the conversation's preferences, so the current mode has
       // to travel with it or every new chat would come back as the default one.
       // The composer's selector wins over storage: storage holds the last
       // explicit choice, which is not the mode of the conversation on screen.
-      relayMode: String(
-        document.getElementById('mode-select')?.value
-        || localStorage.getItem(MODE_STORAGE_KEY)
-        || '',
-      ).trim() || undefined,
+      // A cloud session has no relay modes, so it never inherits Plan or Ask.
+      relayMode: isCloud
+        ? 'agent'
+        : (String(
+          // With a cloud chat on screen the selector is hidden and pinned to
+          // "agent": that is not a choice, so the last explicit one applies.
+          (isClaudeCloudConversation(conversations[currentConvId]) ? '' : document.getElementById('mode-select')?.value)
+          || localStorage.getItem(MODE_STORAGE_KEY)
+          || '',
+        ).trim() || undefined),
       workspaceRootPath: selectedCwd || undefined,
+      // Claude Cloud only: the repository (and branch) the session clones.
+      cloudSource,
       title: 'New Conversation',
     });
     const nextConversationId = String(result?.conversationId || '').trim();
@@ -1148,6 +1709,15 @@ async function createNewConversation(selectedModel, selectedReasoningEffort = ''
         // conversation exists and the sidebar refresh will show it.
       }
     }
+    // A Claude Cloud rejection (bad repository or branch, provider switched
+    // off, no environment) belongs next to the fields it is about.
+    const cloudError = isCloud && !recovered
+      ? cloudBootstrapErrorModel({ code: error?.payload?.code, message: error?.payload?.error })
+      : null;
+    if (cloudError) {
+      showNewConversationCloudError(cloudError.text, cloudError.field ? [cloudError.field] : []);
+      return;
+    }
     showTransientRelayNotice(recovered
       // The chat is usable, but its worker did not start, so say what broke.
       ? `The chat was created, but its session could not start: ${error?.message || 'unknown error'}.`
@@ -1290,6 +1860,106 @@ export function initConversationFilter() {
   syncClearButton();
 }
 
+// ── Archive, and the row's context menu ──
+
+// Which of the two views the sidebar shows: the live conversations, or the
+// archived ones (the 🗄 toggle in the filter row).
+let conversationListArchivedView = false;
+
+export function isArchivedConversationsView() {
+  return conversationListArchivedView;
+}
+
+export async function toggleArchivedConversations(next = !conversationListArchivedView) {
+  conversationListArchivedView = next === true;
+  const toggle = document.getElementById('conv-archived-toggle');
+  if (toggle) {
+    toggle.setAttribute('aria-pressed', conversationListArchivedView ? 'true' : 'false');
+    toggle.title = conversationListArchivedView ? 'Back to the conversations' : 'Show archived conversations';
+    toggle.setAttribute('aria-label', toggle.title);
+  }
+  const banner = document.getElementById('conv-archived-banner');
+  if (banner) banner.hidden = !conversationListArchivedView;
+  renderConvList();
+  // The other view's pages come from the relay; the records already known
+  // (an archived chat that was open, say) show at once.
+  await refreshConversations({ preservePagination: false });
+}
+
+async function setConversationArchived(id, archived) {
+  const result = await (archived ? archiveConversationApi(id) : unarchiveConversationApi(id));
+  if (!result) return false;
+  if (result.ok === false) {
+    showTransientRelayNotice(
+      String(result.message || '').trim() || `This conversation could not be ${archived ? 'archived' : 'unarchived'}.`,
+      6000,
+    );
+    return false;
+  }
+  if (conversations[id]) conversations[id].archived = archived;
+  renderConvList();
+  window.syncChatTitleControls?.();
+  window.syncComposerButtonState?.();
+  return true;
+}
+
+export async function archiveConv(e, id) {
+  e?.stopPropagation?.();
+  closeContextMenu();
+  await setConversationArchived(id, true);
+}
+
+export async function unarchiveConv(e, id) {
+  e?.stopPropagation?.();
+  closeContextMenu();
+  await setConversationArchived(id, false);
+}
+
+/** The entries of a conversation row's menu. */
+function conversationMenuItems(id) {
+  const conversation = conversations[id];
+  if (!conversation) return [];
+  const isCurrent = currentConvId === id;
+  const sdkSessionId = String(conversation.sdkSessionId || '').trim();
+  const workerState = sdkSessionId ? getSessionWorkerState(sdkSessionId) : null;
+  const running = conversationHasActiveTurn(id) || isConversationProcessing(conversation, workerState);
+  const openFirst = async (then) => {
+    if (!isCurrent) await openConversation(id);
+    then();
+  };
+  return [
+    { id: 'open', label: 'Open', onSelect: () => { void openConversation(id); } },
+    { id: 'edit-title', label: 'Edit title', onSelect: () => { void openFirst(() => window.openChatTitleEditor?.()); } },
+    MENU_SEPARATOR,
+    { id: 'stop-turn', label: 'Stop turn', disabled: !running, onSelect: () => { void openFirst(() => openStopTurnConfirmationForConversation(id)); } },
+    { id: 'kill-session', label: 'Kill session', disabled: !workerState && !sdkSessionId, onSelect: () => { void openFirst(() => window.openKillSessionConfirmation?.()); } },
+    MENU_SEPARATOR,
+    conversation.archived === true
+      ? { id: 'unarchive', label: 'Unarchive', onSelect: () => { void unarchiveConv(null, id); } }
+      : { id: 'archive', label: 'Archive', onSelect: () => { void archiveConv(null, id); } },
+    { id: 'delete', label: 'Delete', danger: true, onSelect: () => { void deleteConv({ stopPropagation() {} }, id); } },
+  ];
+}
+
+/** Right-click (and long press on touch) on a row opens its menu. Bound once; the list's rows are re-rendered freely. */
+function bindConversationContextMenu(list) {
+  if (!list || list.dataset.contextMenuBound === '1') return;
+  list.dataset.contextMenuBound = '1';
+  const openFor = (row, x, y) => {
+    const id = String(row?.dataset?.conversationId || '').trim();
+    if (!id) return;
+    const items = conversationMenuItems(id);
+    if (items.length) openContextMenu(x, y, items);
+  };
+  list.addEventListener('contextmenu', (event) => {
+    const row = event.target?.closest?.('.conv-item');
+    if (!row || !list.contains(row)) return;
+    event.preventDefault();
+    openFor(row, event.clientX, event.clientY);
+  });
+  bindLongPress(list, '.conv-item', (row, x, y) => openFor(row, x, y));
+}
+
 export async function deleteConv(e, id) {
   e.stopPropagation();
   if (!confirm('Delete this conversation?')) return;