@oar-sh/oar 0.9.1 → 0.9.3

package/server/public/app/api-client.js

@@ -1,4 +1,4 @@
-import { BASE, TOKEN, authHeaders, updateWorkspaceRootHints, applyContextUsageBar, readContextUsageRatio, currentConvId, conversations, setCliOnline, setCloudflaredTunnelState, setActiveRuntimeSessionCount, setRuntimeSessionBindingCount, setContextIndicatorMode, setServerPlatform } from './store.js';
+import { BASE, TOKEN, authHeaders, updateWorkspaceRootHints, applyContextUsageBar, readContextUsageRatio, currentConvId, conversations, setCliOnline, setCloudflaredTunnelState, setActiveRuntimeSessionCount, setRuntimeSessionBindingCount, setContextIndicatorMode, setServerPlatform, setUpdateState } from './store.js';
 
 // fetch() has no default timeout. Without one, a request issued while the app is
 // being backgrounded can hang indefinitely on a half-open mobile connection and
@@ -93,6 +93,7 @@ export async function verifyExistingSession(tokenCandidate = '') {
         setActiveRuntimeSessionCount(payload?.activeRuntimeSessionCount);
         setRuntimeSessionBindingCount(payload?.runtimeSessionBindingCount);
         if (payload?.platform) setServerPlatform(payload.platform);
+        setUpdateState(payload?.update || null);
       }
       if (response.ok) noteFetchSuccess();
       return {
@@ -150,6 +151,7 @@ export async function verifyToken(token) {
       setActiveRuntimeSessionCount(payload?.activeRuntimeSessionCount);
       setRuntimeSessionBindingCount(payload?.runtimeSessionBindingCount);
       if (payload?.platform) setServerPlatform(payload.platform);
+      setUpdateState(payload?.update || null);
     }
     if (response.ok) noteFetchSuccess();
     return {
@@ -179,6 +181,7 @@ export async function refreshWorkspaceRootHints() {
     setActiveRuntimeSessionCount(status?.activeRuntimeSessionCount);
     setRuntimeSessionBindingCount(status?.runtimeSessionBindingCount);
     if (status?.platform) setServerPlatform(status.platform);
+    setUpdateState(status?.update || null);
   }
   return status;
 }
@@ -411,10 +414,13 @@ export async function loadWindowsAutostartSetting() {
   return apiFetch('/api/settings/windows-autostart');
 }
 
-export async function updateWindowsAutostartSetting(enabled) {
+export async function updateWindowsAutostartSetting(mode) {
+  // Mode string ('off' | 'signin' | 'boot'); a boolean still works for the
+  // pre-mode call sites and maps onto signin/off server-side.
+  const body = typeof mode === 'boolean' ? { enabled: mode } : { mode: String(mode) };
   return apiFetch('/api/settings/windows-autostart', {
     method: 'POST',
-    body: JSON.stringify({ enabled: !!enabled }),
+    body: JSON.stringify(body),
   });
 }
 
@@ -440,6 +446,61 @@ export async function updateBackgroundTaskTimeoutSetting(timeoutMinutes) {
   });
 }
 
+export async function loadPwaAppNameSetting() {
+  return apiFetch('/api/settings/pwa-app-name');
+}
+
+export async function updatePwaAppNameSetting(appName) {
+  return apiFetch('/api/settings/pwa-app-name', {
+    method: 'POST',
+    body: JSON.stringify({ appName: String(appName ?? '') }),
+  });
+}
+
+export async function loadUpdateState() {
+  return apiFetch('/api/update/state');
+}
+
+export async function setUpdateAutoCheck(enabled) {
+  return apiFetch('/api/update/auto-check', {
+    method: 'POST',
+    body: JSON.stringify({ enabled: enabled === true }),
+  });
+}
+
+export async function checkForUpdateNow() {
+  return apiFetch('/api/update/check', { method: 'POST' });
+}
+
+export async function dismissUpdate(body) {
+  return apiFetch('/api/update/dismiss', {
+    method: 'POST',
+    body: JSON.stringify(body || {}),
+  });
+}
+
+export async function applyUpdate(version) {
+  return apiFetch('/api/update/apply', {
+    method: 'POST',
+    body: JSON.stringify({ version: String(version || '') }),
+  });
+}
+
+export async function cancelUpdate() {
+  return apiFetch('/api/update/cancel', { method: 'POST' });
+}
+
+export async function loadFeatureFlagSettings() {
+  return apiFetch('/api/settings/features');
+}
+
+export async function updateFeatureFlagSetting(name, enabled) {
+  return apiFetch('/api/settings/features', {
+    method: 'POST',
+    body: JSON.stringify({ name: String(name || ''), enabled: enabled === true }),
+  });
+}
+
 export async function launchSessionWorker(sdkSessionId) {
   const sessionId = String(sdkSessionId || '').trim();
   if (!sessionId) return null;
@@ -594,10 +655,30 @@ export async function searchMessages(options = {}) {
   return apiFetch(`/api/search/messages?${params.toString()}`);
 }
 
+// Raw fetch instead of apiFetch: a refused delete (the conversation is still
+// working, or its session would not stop) must surface the server's reason.
+// The long timeout covers stopping the session and deleting its CLI session.
 export async function deleteConversation(id) {
   const convId = String(id || '').trim();
-  if (!convId) return null;
-  return apiFetch(`/api/conversation/${convId}`, { method: 'DELETE' });
+  if (!convId || !areNetworkRequestsEnabled()) return null;
+  const url = `/api/conversation/${encodeURIComponent(convId)}`;
+  try {
+    const response = await fetch(`${BASE}${url}`, {
+      signal: requestTimeoutSignal(LONG_REQUEST_TIMEOUT_MS),
+      method: 'DELETE',
+      headers: {
+        'Content-Type': 'application/json',
+        ...authHeaders(),
+      },
+    });
+    const payload = await response.json().catch(() => null);
+    if (!response.ok) return { ...(payload || {}), ok: false, status: response.status };
+    noteFetchSuccess();
+    return payload || { ok: true };
+  } catch (error) {
+    noteFetchFailure(url, error);
+    return null;
+  }
 }
 
 export async function updateMessageShareVisibility(conversationId, messageId, hiddenFromShares) {

package/server/public/app/ask-user-view.js

@@ -10,11 +10,23 @@ import { loadRelayQuestions as loadRelayQuestionsApi, answerRelayQuestion, answe
 import { enqueueOutboxRequest, registerOutboxSync } from './sync-outbox.mjs';
 import { renderLinkedPlainText } from './router.js';
 import { schemaFieldsFromQuestion } from './question-schema-view.mjs';
+import { composeMultiSelectAnswer, isMultiSelectQuestion, offersMultiSelectToggle } from './question-multi-select.mjs';
 import { isChatInteractionHeld } from './selection-guard.mjs';
+import { questionCardHeadLabel } from './conversation-provider-indicator.mjs';
 
 let relayQuestionRenderHash = '';
 let renderedRelayQuestionIds = new Set();
 const relayQuestionStructuredDrafts = new Map();
+// Ticked choices of a multi-select card (question id → Set of labels), kept
+// across re-renders until the card is answered.
+const relayQuestionMultiDrafts = new Map();
+// The "Select several" switch position per card (question id → boolean) on
+// cards that offer it (Copilot); absent = the provider's flag decides.
+const relayQuestionMultiMode = new Map();
+
+function multiModeFor(question) {
+  return question ? relayQuestionMultiMode.get(question.id) : undefined;
+}
 const RELAY_QUESTION_AUTO_SCROLL_THRESHOLD_PX = 80;
 
 function distanceFromBottom(el) {
@@ -75,6 +87,8 @@ export function upsertRelayQuestion(question) {
   relayQuestions.set(question.id, question);
   updatePendingQuestionBanner();
   window.renderConvList?.();
+  // A question opening or settling flips the composer's steering hold.
+  window.syncComposerButtonState?.();
   renderRelayQuestions();
 }
 
@@ -98,10 +112,19 @@ export async function loadRelayQuestions(conversationId) {
       relayQuestionStructuredDrafts.delete(questionId);
     }
   }
+  // Multi-select ticks and the "Select several" switch position die with the
+  // card, whoever settled it (this device, another one, a timeout).
+  for (const draftMap of [relayQuestionMultiDrafts, relayQuestionMultiMode]) {
+    for (const questionId of draftMap.keys()) {
+      const question = next.get(questionId);
+      if (!question || question.status !== 'pending') draftMap.delete(questionId);
+    }
+  }
   relayQuestions.clear();
   for (const [id, q] of next.entries()) relayQuestions.set(id, q);
   updatePendingQuestionBanner();
   window.renderConvList?.();
+  window.syncComposerButtonState?.();
 
   if (!conversationId && pending.length) {
     const latest = pending
@@ -212,6 +235,7 @@ export function renderRelayQuestions() {
       answeredAt: q.answeredAt || '',
       createdAt: q.createdAt || '',
       choices: Array.isArray(q.choices) ? q.choices : [],
+      multiSelect: isMultiSelectQuestion(q, multiModeFor(q)),
       schema: q.requestSchema || null,
     }))
   );
@@ -249,24 +273,41 @@ export function renderRelayQuestions() {
       interactiveHtml = renderMultiFieldForm(question);
     } else {
       const choices = Array.isArray(question.choices) ? question.choices : [];
-      const choiceHtml = choices.length
-        ? (question.status === 'pending'
-            ? `<div class="relay-question-choices">${
-                choices.map((choice) => `<button class="relay-question-choice" data-choice="${escHtml(choice)}" data-relay-focus-key="choice-${escHtml(choice)}" onclick="submitRelayQuestionChoice('${question.id}', this.dataset.choice)">${escHtml(choice)}</button>`).join('')
-              }</div>`
-            : `<div class="relay-question-choices">${
-                choices.map((choice) => `<button class="relay-question-choice" disabled>${escHtml(choice)}</button>`).join('')
-              }</div>`)
+      // A multi-select card (the provider said several may be picked) offers
+      // checkmarks and ONE Reply; ticking never answers by itself.
+      const multiSelect = isMultiSelectQuestion(question, multiModeFor(question));
+      const ticked = relayQuestionMultiDrafts.get(question.id) || new Set();
+      // Copilot cards: a switch between one-click answers and checkmarks,
+      // pre-set from the model's flag or the question's wording.
+      const toggleHtml = question.status === 'pending' && offersMultiSelectToggle(question)
+        ? `<label class="relay-question-multi-toggle"><input type="checkbox" data-relay-focus-key="multi-toggle"${multiSelect ? ' checked' : ''} onchange="setRelayQuestionMultiMode('${question.id}', this.checked)"> Select several</label>`
         : '';
+      let choiceHtml = '';
+      if (choices.length && question.status === 'pending' && multiSelect) {
+        choiceHtml = `<div class="relay-question-choices relay-question-multi" id="relay-question-multi-${question.id}">${
+          choices.map((choice) => `<label class="relay-question-choice relay-question-choice-check"><input type="checkbox" data-choice-value="${escHtml(choice)}" data-relay-focus-key="multi-${escHtml(choice)}"${ticked.has(choice) ? ' checked' : ''} onchange="onRelayQuestionMultiSelectChange('${question.id}', this.dataset.choiceValue, this.checked)"> ${escHtml(choice)}</label>`).join('')
+        }</div>`;
+      } else if (choices.length && question.status === 'pending') {
+        choiceHtml = `<div class="relay-question-choices">${
+          choices.map((choice) => `<button class="relay-question-choice" data-choice="${escHtml(choice)}" data-relay-focus-key="choice-${escHtml(choice)}" onclick="submitRelayQuestionChoice('${question.id}', this.dataset.choice)">${escHtml(choice)}</button>`).join('')
+        }</div>`;
+      } else if (choices.length) {
+        choiceHtml = `<div class="relay-question-choices">${
+          choices.map((choice) => `<button class="relay-question-choice" disabled>${escHtml(choice)}</button>`).join('')
+        }</div>`;
+      }
       const showReplyControls = question.status === 'pending';
       const draftText = String(relayQuestionDrafts.get(question.id) || '');
+      const replyPlaceholder = multiSelect
+        ? 'Add another answer or a note (optional)… (Ctrl/Cmd+Enter to send)'
+        : 'Type a reply… (Ctrl/Cmd+Enter to send)';
       const replyHtml = showReplyControls
         ? `<div class="relay-question-reply">
-            <textarea id="relay-question-input-${question.id}" placeholder="Type a reply… (Ctrl/Cmd+Enter to send)" onkeydown="handleRelayQuestionKey(event, '${question.id}')" oninput="onRelayQuestionDraftInput('${question.id}', this.value)">${escHtml(draftText)}</textarea>
-            <button class="relay-question-submit" onclick="submitRelayQuestionAnswer('${question.id}')">Reply</button>
+            <textarea id="relay-question-input-${question.id}" placeholder="${replyPlaceholder}" onkeydown="handleRelayQuestionKey(event, '${question.id}')" oninput="onRelayQuestionDraftInput('${question.id}', this.value)">${escHtml(draftText)}</textarea>
+            <button class="relay-question-submit" onclick="${multiSelect ? 'submitRelayQuestionMultiSelect' : 'submitRelayQuestionAnswer'}('${question.id}')">${multiSelect ? 'Reply with selection' : 'Reply'}</button>
           </div>`
         : '';
-      interactiveHtml = `${choiceHtml}${replyHtml}`;
+      interactiveHtml = `${choiceHtml}${toggleHtml}${replyHtml}`;
     }
 
     const answeredHtml = question.status === 'answered' && question.answer
@@ -278,7 +319,7 @@ export function renderRelayQuestions() {
 
     wrapper.innerHTML = `
       <div class="relay-question-card${question.status === 'timed_out' ? ' relay-question-timed-out' : ''}">
-        <div class="relay-question-head">Copilot question${modeTag} · ${fmtDate(question.createdAt)}</div>
+        <div class="relay-question-head">${questionCardHeadLabel(conversations[question.conversationId])}${modeTag} · ${fmtDate(question.createdAt)}</div>
         <div class="relay-question-body">${renderLinkedPlainText(question.prompt || '')}</div>
         ${contextHtml}
         ${answeredHtml}
@@ -467,6 +508,7 @@ export async function submitRelayStructuredAnswer(questionId) {
     if (r.question) relayQuestions.set(questionId, r.question);
     updatePendingQuestionBanner();
     window.renderConvList?.();
+    window.syncComposerButtonState?.();
     renderRelayQuestions();
     window.showTransientRelayNotice?.(`✅ Answer received · Agent continuing…`, 7000);
   } catch (e) {
@@ -480,6 +522,44 @@ export async function submitRelayQuestionChoice(questionId, choice) {
   await submitRelayQuestionAnswer(questionId, choice);
 }
 
+/** Ticked labels of a multi-select card, in the card's own order. */
+function tickedMultiSelectLabels(questionId) {
+  const container = document.getElementById(`relay-question-multi-${questionId}`);
+  if (!container) return [...(relayQuestionMultiDrafts.get(questionId) || [])];
+  return Array.from(container.querySelectorAll('input[type="checkbox"]:checked'))
+    .map((el) => String(el.getAttribute('data-choice-value') || ''));
+}
+
+/**
+ * The "Select several" switch: flip the card between one-click answers and
+ * checkmarks. Ticks made so far are kept, and the card re-renders in place.
+ */
+export function setRelayQuestionMultiMode(questionId, enabled) {
+  const id = String(questionId || '');
+  if (!id) return;
+  relayQuestionMultiMode.set(id, enabled === true);
+  renderRelayQuestions();
+}
+
+export function onRelayQuestionMultiSelectChange(questionId, label, checked) {
+  const id = String(questionId || '');
+  const set = relayQuestionMultiDrafts.get(id) || new Set();
+  if (checked) set.add(String(label || ''));
+  else set.delete(String(label || ''));
+  relayQuestionMultiDrafts.set(id, set);
+}
+
+/**
+ * Answer a multi-select card: every ticked choice, plus whatever was typed as
+ * an extra answer, joined the way the provider's own UI would ("A, C").
+ */
+export async function submitRelayQuestionMultiSelect(questionId) {
+  const input = document.getElementById(`relay-question-input-${questionId}`);
+  const answer = composeMultiSelectAnswer(tickedMultiSelectLabels(questionId), input?.value || '');
+  if (!answer) return;
+  await submitRelayQuestionAnswer(questionId, answer);
+}
+
 // Offline fallback: park the answer in the durable outbox so Background Sync
 // (or the next page load) delivers it. A replay against an already-answered
 // or expired question gets a 4xx and is dropped, so this cannot double-answer.
@@ -499,7 +579,13 @@ async function enqueueRelayAnswerForSync(questionId, body) {
 
 export async function submitRelayQuestionAnswer(questionId, presetAnswer = null) {
   const input = document.getElementById(`relay-question-input-${questionId}`);
-  const answer = String(presetAnswer != null ? presetAnswer : (input?.value || '')).trim();
+  // Ctrl/Cmd+Enter in a multi-select card's text field sends the ticked
+  // choices along with the typed text, exactly like its Reply button.
+  const pendingQuestion = relayQuestions.get(questionId) || null;
+  const composed = presetAnswer == null && isMultiSelectQuestion(pendingQuestion, multiModeFor(pendingQuestion))
+    ? composeMultiSelectAnswer(tickedMultiSelectLabels(questionId), input?.value || '')
+    : null;
+  const answer = String(presetAnswer != null ? presetAnswer : (composed ?? (input?.value || ''))).trim();
   if (!answer) return;
 
   const card = document.querySelector(`.relay-question-container[data-question-id="${questionId}"]`);
@@ -522,9 +608,12 @@ export async function submitRelayQuestionAnswer(questionId, presetAnswer = null)
     }
     relayQuestionDrafts.delete(questionId);
     relayQuestionStructuredDrafts.delete(questionId);
+    relayQuestionMultiDrafts.delete(questionId);
+    relayQuestionMultiMode.delete(questionId);
     relayQuestions.set(questionId, r.question);
     updatePendingQuestionBanner();
     window.renderConvList?.();
+    window.syncComposerButtonState?.();
     renderRelayQuestions();
     window.showTransientRelayNotice?.(`✅ Answer received: ${answer} · Agent continuing…`, 7000);
   } catch (e) {

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

@@ -12,7 +12,9 @@ import {
   workspaceRootPath,
   showTransientRelayNotice,
   getConversationCurrentWorkspaceRootPath,
+  IS_SHARED_VIEW,
 } from './store.js';
+import { openAnnotateEditor } from './annotate-editor.js';
 import {
   uploadAttachment,
   loadWorkspaceFilePreview,
@@ -219,16 +221,20 @@ export function renderAttachmentPreview() {
   if (!selectedAttachments.length) {
     el.innerHTML = '';
     el.classList.remove('visible');
-    window.syncComposerControlState?.();
+    window.syncComposerButtonState?.();
     syncComposerAttachmentWarning();
     return;
   }
 
   el.innerHTML = selectedAttachments.map((att, idx) => {
     const state = String(att?.uploadState || 'uploaded');
+    const annotatable = att.isImage && att.previewUrl && isAnnotatableImageType(att.type);
     const thumb = att.isImage && att.previewUrl
-      ? `<img src="${escHtml(att.previewUrl)}" alt="${escHtml(att.name)}">`
+      ? `<img src="${escHtml(att.previewUrl)}" alt="${escHtml(att.name)}"${annotatable ? ` onclick="openAnnotateEditorForPending(${idx})" title="Annotate ${escHtml(att.name)}" style="cursor: pointer;"` : ''}>`
       : `<div class="attachment-preview-meta" style="height:88px;display:flex;align-items:center;justify-content:center">📎</div>`;
+    const annotateBadge = annotatable
+      ? `<span class="attachment-preview-annotate" aria-hidden="true">🖍️</span>`
+      : '';
     const overlay = state === 'pending' || state === 'uploading'
       ? `<div class="attachment-preview-status attachment-preview-status-uploading" role="status" aria-label="Uploading ${escHtml(att.name)}"><span class="attachment-preview-spinner"></span></div>`
       : state === 'error'
@@ -238,13 +244,14 @@ export function renderAttachmentPreview() {
     <div class="attachment-preview-item attachment-preview-${escHtml(state)}">
       <button class="attachment-preview-remove" onclick="removeAttachment(${idx})" title="Remove">×</button>
       ${thumb}
+      ${annotateBadge}
       ${overlay}
       <div class="attachment-preview-meta">${escHtml(att.name)}${att.size ? ` · ${formatBytes(att.size)}` : ''}</div>
     </div>
   `;
   }).join('');
   el.classList.add('visible');
-  window.syncComposerControlState?.();
+  window.syncComposerButtonState?.();
   syncComposerAttachmentWarning();
 }
 
@@ -286,6 +293,41 @@ export function clearAttachments() {
   renderAttachmentPreview();
 }
 
+function composerAttachmentSha(attachment) {
+  return String(attachment?.sha256 || attachment?.uploaded?.sha256 || '').trim().toLowerCase();
+}
+
+/**
+ * Removes the composer entries a send took with it and keeps anything added
+ * after that snapshot, uploading or not. Matches by identity first, then by
+ * content hash — switching away and back mid-send rebuilds the composer from
+ * the draft cache as new objects — and removes one entry per sent attachment,
+ * so a genuine second copy survives. Persisting what remains is the caller's
+ * job.
+ */
+export function removeComposerAttachments(sent = []) {
+  const pending = (Array.isArray(sent) ? sent : []).filter(Boolean);
+  if (!pending.length) return;
+  const removed = new Set();
+  const unmatched = [];
+  for (const att of pending) {
+    if (selectedAttachments.includes(att) && !removed.has(att)) removed.add(att);
+    else unmatched.push(att);
+  }
+  for (const att of unmatched) {
+    const sha = composerAttachmentSha(att);
+    if (!sha) continue;
+    const match = selectedAttachments.find((candidate) => !removed.has(candidate) && composerAttachmentSha(candidate) === sha);
+    if (match) removed.add(match);
+  }
+  if (!removed.size) return;
+  const kept = selectedAttachments.filter((att) => !removed.has(att));
+  for (const att of removed) releaseAttachmentPreviewUrl(att);
+  selectedAttachments.length = 0;
+  selectedAttachments.push(...kept);
+  renderAttachmentPreview();
+}
+
 /**
  * Replaces composer attachments wholesale, used when hydrating a conversation's
  * cached draft attachments. Object URLs from the outgoing set are released.
@@ -374,6 +416,86 @@ export function retryAttachmentUpload(idx) {
   void startAttachmentUpload(attachment);
 }
 
+// ─── Marker annotations ───────────────────────────────────────────────────────
+
+/** Animated GIFs would silently flatten to one frame, SVGs can't be served back. */
+function isAnnotatableImageType(type) {
+  const normalized = String(type || '').trim().toLowerCase();
+  return normalized.startsWith('image/')
+    && normalized !== 'image/gif'
+    && normalized !== 'image/svg+xml';
+}
+
+async function fetchImageBlob(url) {
+  // Upload/generated-image content URLs are cookie-authenticated (the same way
+  // the <img> tags load them), so a plain same-origin fetch works.
+  const response = await fetch(url, { credentials: 'same-origin' });
+  if (!response.ok) throw new Error('Could not load the image');
+  return response.blob();
+}
+
+/**
+ * Swaps a pending composer attachment for its annotated copy. Keyed on the
+ * attachment object, not its index — the list can shift while the editor is
+ * open. Returns false (editor stays open) when the slot vanished.
+ */
+async function replacePendingAttachment(target, file) {
+  const prepared = await prepareIncomingFile(file, { source: 'annotate', now: new Date(), index: 0 });
+  // Resolve the slot AFTER the await: prepareIncomingFile can spend real time
+  // downscaling, and a draft re-hydration or conversation switch in that window
+  // must not make the splice land on an unrelated attachment.
+  const idx = selectedAttachments.indexOf(target);
+  if (idx === -1) {
+    releaseAttachmentPreviewUrl(prepared);
+    showTransientRelayNotice('That attachment is no longer in the composer.');
+    return false;
+  }
+  const [replaced] = selectedAttachments.splice(idx, 1, prepared);
+  releaseAttachmentPreviewUrl(replaced);
+  renderAttachmentPreview();
+  void startAttachmentUpload(prepared);
+  window.persistComposerAttachments?.();
+  return true;
+}
+
+export function openAnnotateEditorForPending(idx) {
+  const attachment = selectedAttachments[idx];
+  if (!attachment?.isImage || !isAnnotatableImageType(attachment.type)) return;
+  openAnnotateEditor({
+    name: attachment.name,
+    getBlob: async () => (attachment.file ? attachment.file : fetchImageBlob(attachment.previewUrl)),
+    onAccept: (file) => replacePendingAttachment(attachment, file),
+  });
+}
+
+/** True when the currently previewed lightbox item can host the 🖍️ button. */
+export function filePreviewSupportsAnnotation() {
+  if (IS_SHARED_VIEW) return false;
+  const payload = filePreviewState?.payload;
+  return payload?.kind === 'image'
+    && !!String(payload.rawUrl || '')
+    && isAnnotatableImageType(payload.contentType);
+}
+
+export function openAnnotateEditorForPreview() {
+  if (!filePreviewSupportsAnnotation()) return;
+  const url = String(filePreviewState.payload.rawUrl || '');
+  const name = String(filePreviewState.payload.name || 'screenshot');
+  closeFilePreview();
+  openAnnotateEditor({
+    name,
+    getBlob: () => fetchImageBlob(url),
+    onAccept: async (file) => {
+      // The sent message is never mutated: the annotated copy joins the
+      // composer for the next message. ingestFiles enforces the attachment
+      // cap and shows its own over-cap notice; an empty result keeps the
+      // editor open so a slot can be freed and accept retried.
+      const added = await ingestFiles([file], { source: 'annotate' });
+      return added.length > 0;
+    },
+  });
+}
+
 /**
  * Single ingestion path shared by the file picker, paste and drag-and-drop.
  * Files are normalized, optionally downscaled, capped, and uploaded immediately
@@ -480,6 +602,53 @@ function updateFilePreviewUiState() {
   const backBtn = document.getElementById('file-preview-back');
   backBtn.hidden = filePreviewHistory.length === 0;
   backBtn.disabled = filePreviewHistory.length === 0;
+  const annotateBtn = document.getElementById('file-preview-annotate-btn');
+  if (annotateBtn) annotateBtn.hidden = !filePreviewSupportsAnnotation();
+  const copyBtn = document.getElementById('file-preview-copy-btn');
+  if (copyBtn) copyBtn.hidden = payload?.kind !== 'image';
+}
+
+/**
+ * Copy the previewed image to the clipboard as PNG. Re-encoding through a
+ * canvas is deliberate: the source may be JPEG/WebP and the async Clipboard
+ * API only reliably accepts image/png. Same-origin sources (the drive and
+ * workspace file routes, data: URIs) keep the canvas clean; a cross-origin
+ * image taints it and lands in the failure note instead of throwing.
+ */
+export async function copyFilePreviewImage() {
+  const btn = document.getElementById('file-preview-copy-btn');
+  const img = document.querySelector('#file-preview-body .file-preview-image img');
+  const flash = (text) => {
+    if (!btn) return;
+    btn.textContent = text;
+    setTimeout(() => { btn.textContent = 'Copy'; }, 1600);
+  };
+  if (!img?.src) return;
+  try {
+    if (!navigator.clipboard?.write || typeof ClipboardItem === 'undefined') {
+      throw new Error('Clipboard image copy is not supported in this browser');
+    }
+    const blob = await new Promise((resolve, reject) => {
+      const image = new Image();
+      image.onload = () => {
+        try {
+          const canvas = document.createElement('canvas');
+          canvas.width = image.naturalWidth || image.width;
+          canvas.height = image.naturalHeight || image.height;
+          canvas.getContext('2d').drawImage(image, 0, 0);
+          canvas.toBlob((b) => (b ? resolve(b) : reject(new Error('Could not encode image'))), 'image/png');
+        } catch (error) {
+          reject(error);
+        }
+      };
+      image.onerror = () => reject(new Error('Could not load image'));
+      image.src = img.src;
+    });
+    await navigator.clipboard.write([new ClipboardItem({ 'image/png': blob })]);
+    flash('Copied ✓');
+  } catch {
+    flash('Copy failed');
+  }
 }
 
 function snapshotFilePreviewState() {

package/server/public/app/background-task-timeout-options.mjs

@@ -0,0 +1,9 @@
+// Mirrors shared/background-task-timeout.mjs, which the browser cannot import
+// (only server/public is served). shared/background-task-timeout.test.mjs
+// asserts the two stay identical.
+//
+// The settings slider shows this until the relay's own value loads, and keeps
+// showing it if that request fails, so it must be the default the relay
+// enforces: 4 hours. 0 means no limit only when chosen explicitly.
+
+export const DEFAULT_BACKGROUND_TASK_TIMEOUT_MINUTES = 240;