@oar-sh/oar 0.9.24 → 0.9.25

package/server/migrations/0040-image-session-defaults.mjs

@@ -0,0 +1,93 @@
+'use strict';
+
+/**
+ * Migration: an image session's own defaults, and a turn's options.
+ *
+ * `image_sessions.defaults_json`: the size, quality, count, output format and
+ * background an image session's turns use unless a turn names its own
+ * (relay_tool update_session `image`, the conversation settings route).
+ * JSON as shared/openai-image-options.mjs validates it; NULL means none.
+ *
+ * `queue.image_options_json`: the options of one image turn as the send
+ * settled them, for a turn without an image operation (the worker sends them
+ * with its direct request). NULL for every other turn.
+ *
+ * The image tables are created by migrateImageConversationSchema
+ * (repositories/image-conversation-repository.mjs), which this migration
+ * calls first, additively, so a database whose tables are missing gets them
+ * before the column. A database without the queue table (no relay's) is
+ * left alone.
+ *
+ * Additive and idempotent. Safe to run on every boot. Rolling back needs no
+ * data change: older code ignores the column.
+ *
+ * Usage: node server/migrations/0040-image-session-defaults.mjs [path/to/oar.db]
+ */
+
+import { fileURLToPath } from 'url';
+import path from 'path';
+import process from 'process';
+import Database from 'better-sqlite3';
+import { cliDbPath } from '../services/database-file.mjs';
+import { migrateImageConversationSchema } from '../repositories/image-conversation-repository.mjs';
+
+export function hasImageSessionDefaultsColumn(db) {
+  try {
+    return db.prepare(`PRAGMA table_info(image_sessions)`).all().some((column) => column.name === 'defaults_json');
+  } catch {
+    return false;
+  }
+}
+
+function tableExists(db, name) {
+  return !!db.prepare(`SELECT name FROM sqlite_master WHERE type = 'table' AND name = ?`).get(name);
+}
+
+export function hasQueueImageOptionsColumn(db) {
+  try {
+    return db.prepare(`PRAGMA table_info(queue)`).all().some((column) => column.name === 'image_options_json');
+  } catch {
+    return false;
+  }
+}
+
+export function migrateImageSessionDefaults(db) {
+  // The image schema reads the queue; a database without one is no relay's.
+  if (!tableExists(db, 'queue')) return { applied: false, columnsAdded: 0 };
+  migrateImageConversationSchema(db);
+  let columnsAdded = 0;
+  if (!hasImageSessionDefaultsColumn(db)) {
+    db.exec(`ALTER TABLE image_sessions ADD COLUMN defaults_json TEXT`);
+    columnsAdded += 1;
+  }
+  if (!hasQueueImageOptionsColumn(db)) {
+    db.exec(`ALTER TABLE queue ADD COLUMN image_options_json TEXT`);
+    columnsAdded += 1;
+  }
+  return { applied: columnsAdded > 0, columnsAdded };
+}
+
+export function migrate(dbPath, options = {}) {
+  const db = new Database(dbPath, options);
+  try {
+    return migrateImageSessionDefaults(db);
+  } finally {
+    db.close();
+  }
+}
+
+const isMain = process.argv[1] && path.resolve(process.argv[1]) === fileURLToPath(import.meta.url);
+if (isMain) {
+  try {
+    // The given path, else the database in server/data (oar.db, else the
+    // name before 0.9.20); never a new one.
+    const dbPath = cliDbPath(process.argv[2], new URL('..', import.meta.url));
+    const result = migrate(dbPath);
+    console.log(`Migration 0040 on ${dbPath}`);
+    console.log(result.applied ? `  image session defaults, turn options: columns added ${result.columnsAdded}` : '  skipped: nothing to change');
+    process.exit(0);
+  } catch (err) {
+    console.error(`Migration 0040 failed: ${err?.message || err}`);
+    process.exit(1);
+  }
+}

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

@@ -1,5 +1,6 @@
 import { BASE, TOKEN, CLIENT_ID, IS_SHARE_PREVIEW, SHARE_PREVIEW_CONVERSATION_ID, SHARED_CONVERSATION_TOKEN, authHeaders, updateWorkspaceRootHints, applyContextUsageBar, readContextUsageRatio, currentConvId, conversations, setCliOnline, setCloudflaredTunnelState, setActiveRuntimeSessionCount, setRuntimeSessionBindingCount, setContextIndicatorMode, setServerPlatform, setUpdateState } from './store.js';
 import { liveActivityCap } from './live-activity-cap.mjs';
+import { OPENAI_IMAGE_PRESETS_PATH, OPENAI_IMAGE_SETTINGS_FIELDS, OPENAI_IMAGE_USAGE_PATH } from './openai-image-spend.mjs';
 
 // 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
@@ -543,6 +544,63 @@ export async function updateOpenAISettings({
   return settingsRequest('/api/settings/openai', payload, 'Failed to update OpenAI settings');
 }
 
+/**
+ * The daily image cap and today's override (POST /api/settings/openai with
+ * only these fields). Throws with the relay's words: a paired relay's
+ * request is refused (403).
+ */
+export async function updateOpenAIImageSpendSettings({ imageDailyCapUsd = undefined, allowImagesToday = undefined } = {}) {
+  const payload = {};
+  if (imageDailyCapUsd !== undefined) payload[OPENAI_IMAGE_SETTINGS_FIELDS.dailyCapUsd] = Number(imageDailyCapUsd);
+  if (typeof allowImagesToday === 'boolean') payload[OPENAI_IMAGE_SETTINGS_FIELDS.allowToday] = allowImagesToday;
+  return settingsRequest('/api/settings/openai', payload, 'Failed to update the image cap');
+}
+
+/** Today's image spend; with a conversation, that chat's cost too. Null on any failure. */
+export async function loadOpenAIImageUsage({ conversationId = '' } = {}) {
+  const id = String(conversationId || '').trim();
+  return quietGet(id ? `${OPENAI_IMAGE_USAGE_PATH}?conversationId=${encodeURIComponent(id)}` : OPENAI_IMAGE_USAGE_PATH);
+}
+
+// The presets routes: the relay's `error` and `code` ride on the thrown Error.
+async function imagePresetsRequest(method, path, body = null) {
+  if (!networkRequestsEnabled) return null;
+  let response;
+  try {
+    response = await fetch(`${BASE}${path}`, {
+      signal: requestTimeoutSignal(),
+      method,
+      headers: { 'Content-Type': 'application/json', ...authHeaders() },
+      ...(body ? { body: JSON.stringify(body) } : {}),
+    });
+  } catch (error) {
+    noteFetchFailure(path, error);
+    throw Object.assign(new Error(`The relay could not be reached (${readableServerError(toErrorMessage(error))}).`), { status: 0, code: null });
+  }
+  noteFetchSuccess();
+  const result = await response.json().catch(() => null);
+  if (!response.ok) {
+    throw Object.assign(
+      new Error(readableServerError(result?.error || '') || `The relay answered HTTP ${response.status}.`),
+      { status: response.status, code: result?.code || null },
+    );
+  }
+  return result;
+}
+
+/** `{ presets }` (built-ins and own), or null when the relay has none to give. */
+export async function loadOpenAIImagePresets() {
+  return quietGet(OPENAI_IMAGE_PRESETS_PATH);
+}
+
+export async function saveOpenAIImagePreset(preset, { replace = false } = {}) {
+  return imagePresetsRequest('PUT', OPENAI_IMAGE_PRESETS_PATH, { preset, ...(replace ? { replace: true } : {}) });
+}
+
+export async function deleteOpenAIImagePreset(name) {
+  return imagePresetsRequest('DELETE', `${OPENAI_IMAGE_PRESETS_PATH}/${encodeURIComponent(String(name || ''))}`);
+}
+
 export async function loadCursorSettings() {
   return apiFetch('/api/settings/cursor');
 }

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

@@ -131,7 +131,8 @@ export async function loadRelayQuestions(conversationId) {
   // after a link the relay did not know: its notice keeps the screen empty
   // until the reader opens something.
   const readingAView = document.body?.classList?.contains('inbox-view-active')
-    || document.body?.classList?.contains('status-view-active');
+    || document.body?.classList?.contains('status-view-active')
+    || document.body?.classList?.contains('media-view-active');
   if (!conversationId && pending.length && !readingAView && !isConversationAutoOpenHeld()) {
     const latest = pending
       .slice()

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

@@ -81,6 +81,8 @@ import {
   galleryNeighborIndex,
   galleryNeighbors,
   galleryPositionLabel,
+  galleryCanStep,
+  extendGallery,
 } from './viewer-gallery.mjs';
 import {
   deepestExistingAncestor,
@@ -672,9 +674,10 @@ function updateFilePreviewUiState() {
   if (bottomChrome) {
     bottomChrome.hidden = !gallery;
     document.getElementById('file-preview-position').textContent = galleryPositionLabel(gallery);
-    document.getElementById('file-preview-prev').disabled = galleryNeighborIndex(gallery, -1) === -1;
-    document.getElementById('file-preview-next').disabled = galleryNeighborIndex(gallery, 1) === -1;
+    document.getElementById('file-preview-prev').disabled = !galleryCanStep(gallery, -1);
+    document.getElementById('file-preview-next').disabled = !galleryCanStep(gallery, 1);
   }
+  renderGalleryDetails(gallery);
 }
 
 /**
@@ -1231,7 +1234,7 @@ export function openUploadedAttachmentViewer(name, contentUrl, mimeType, options
       kind: uploadPreviewKind(mimeType),
       name: String(name || 'attachment'),
       rawUrl: String(contentUrl || ''),
-      size: 0,
+      size: Number(options?.size) > 0 ? Number(options.size) : 0,
       contentType: String(mimeType || '').toLowerCase(),
     },
   });
@@ -1249,7 +1252,7 @@ export function openGalleryItem(item, gallery) {
   if (!item) return Promise.resolve(false);
   const source = item.source || gallery?.source || 'workspace';
   if (source === 'upload') {
-    openUploadedAttachmentViewer(item.name, item.href, item.mime, { gallery });
+    openUploadedAttachmentViewer(item.name, item.href, item.mime, { gallery, size: item.size });
     return Promise.resolve(true);
   }
   const open = source === 'workspace' ? openWorkspaceFilePreview : openDriveFilePreview;
@@ -1335,7 +1338,9 @@ export function renderFilePreview() {
   const kindLabel = String(payload.kind || 'text').toUpperCase();
   const langLabel = payload.language ? ` · ${payload.language}` : '';
   const truncatedLabel = payload.truncated ? ` · truncated to ${formatBytes(FILE_PREVIEW_MAX_BYTES)}` : '';
-  metaEl.textContent = `${kindLabel}${langLabel} · ${formatBytes(payload.size || 0)}${truncatedLabel}`;
+  // An attachment opened by its address may come without a size: no "0 B" then.
+  const sizeLabel = payload.size > 0 || filePreviewState.source !== 'upload' ? ` · ${formatBytes(payload.size || 0)}` : '';
+  metaEl.textContent = `${kindLabel}${langLabel}${sizeLabel}${truncatedLabel}`;
 
   const cardMeta = payload.size > 0 ? formatBytes(payload.size) : '';
 
@@ -1560,13 +1565,65 @@ export async function openWorkspaceFilePreviewFromRepo(rawPath, options = {}) {
 
 /** Show the file `delta` steps along the gallery; false at either end. */
 export async function stepFilePreviewGallery(delta) {
-  const gallery = filePreviewState.gallery;
-  const index = galleryNeighborIndex(gallery, delta);
+  let gallery = filePreviewState.gallery;
+  let index = galleryNeighborIndex(gallery, delta);
+  if (index === -1 && galleryCanStep(gallery, delta)) {
+    // A paged gallery: the next page is fetched and the step goes on into it.
+    let page = null;
+    try {
+      page = await gallery.loadMore();
+    } catch {
+      page = null;
+    }
+    if (filePreviewState.gallery !== gallery) return false;
+    gallery = extendGallery(gallery, page || { items: [], hasMore: false });
+    filePreviewState.gallery = gallery;
+    index = galleryNeighborIndex(gallery, delta);
+    if (index === -1) {
+      renderFilePreview();
+      return false;
+    }
+  }
   if (index === -1) return false;
   const next = galleryAt(gallery, index);
   return openGalleryItem(next.items[index], next);
 }
 
+// What a gallery says about its open item (the media gallery: session,
+// date, who sent it) and the buttons it adds ("Open in session", "Copy
+// path"), built here so the viewer markup stays the same for every gallery.
+function renderGalleryDetails(gallery) {
+  const toolbar = document.querySelector('#file-preview-chrome-top .file-preview-toolbar');
+  let caption = document.getElementById('file-preview-gallery-caption');
+  if (!caption && toolbar) {
+    caption = document.createElement('div');
+    caption.id = 'file-preview-gallery-caption';
+    caption.className = 'file-preview-meta';
+    toolbar.insertAdjacentElement('afterend', caption);
+  }
+  document.querySelectorAll('[data-gallery-action]').forEach((button) => button.remove());
+  const item = gallery?.items?.[gallery.index];
+  const details = item && typeof gallery.describe === 'function' ? gallery.describe(item) : null;
+  if (caption) {
+    caption.textContent = details?.caption || '';
+    caption.hidden = !details?.caption;
+  }
+  if (!toolbar || !Array.isArray(details?.actions)) return;
+  const anchor = document.getElementById('file-preview-copy-btn');
+  for (const action of details.actions) {
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.className = 'file-preview-btn';
+    button.textContent = action.label;
+    button.dataset.galleryAction = action.id;
+    button.addEventListener('click', () => {
+      viewerControls.interaction();
+      void action.run(item);
+    });
+    toolbar.insertBefore(button, anchor || null);
+  }
+}
+
 // Preview payloads of the open file's neighbours, fetched ahead so a swipe
 // lands on the file and not on "Fetching…"; an image's bytes are asked for
 // too, under the very address the viewer will use. Entries are promises.
@@ -2935,8 +2992,8 @@ const viewerSwipe = createSwipeRecognizer({
       return;
     }
     // Past either end the content gives a little, then holds.
-    const toward = galleryNeighborIndex(filePreviewState.gallery, dx < 0 ? 1 : -1);
-    const shift = toward === -1 ? dx * 0.25 : dx;
+    // A page still to load counts as somewhere to go.
+    const shift = galleryCanStep(filePreviewState.gallery, dx < 0 ? 1 : -1) ? dx : dx * 0.25;
     bodyEl.style.transform = `translateX(${shift}px)`;
   },
   onEnd: ({ axis, swipe }) => {

package/server/public/app/bootstrap.js

@@ -161,6 +161,7 @@ import { loadKeepingLiveRows } from './transcript-reload-freshness.mjs';
 import { backgroundTasksSnapshotMark } from './background-tasks-view.mjs';
 import { newerPageReachesEnd } from './transcript-island.mjs';
 import { initPinnedMessagesView, openPinnedMessagesModal, setPinsConversation } from './pinned-messages-view.mjs';
+import { afterContextRender, initContextTabs, leaveContextTab, resetContextTab, wrapContextBody } from './context-media-tab.js';
 import { initHiddenMessagesView, openHiddenMessagesModal, setHiddenMessagesConversation } from './hidden-messages-view.mjs';
 import { bindChatSelectionGuard, chatSelectionGuard, isChatInteractionHeld } from './selection-guard.mjs';
 import { loadRepoBrowserTree, openRepoBrowser, closeRepoBrowser, setRepoBrowserSessionInfo, resetWorkspaceRepoBrowserForRootChange } from './attachments-view.js';
@@ -221,6 +222,13 @@ import {
   sessionLockNoteText,
   sessionLockProviderKey,
 } from './conversation-provider-indicator.mjs';
+import { imageQualityOptions } from './openai-image-composer.mjs';
+import { hideImageComposerControls, syncImageComposerControls } from './image-composer-ui.js';
+import {
+  onOpenAIImageSpendChange,
+  syncChatMenuImageCost,
+  syncOpenAIImageSpendBanner,
+} from './openai-image-cost-ui.js';
 import {
   initMessageSearchView,
   openMessageSearchModal,
@@ -278,6 +286,7 @@ import { closeQuestionsPanel, initQuestionsPanel, openQuestionsPanel, setQuestio
 import { questionsTwinLabel } from './questions-view.mjs';
 import { closeRelaySchedulePanel } from './relay-schedules-ui.js';
 import { isInboxViewActive } from './inbox-ui.js';
+import { isMediaViewActive, leaveMediaView, toggleMediaView } from './media-view.js';
 import { initScrollbarHover } from './scrollbar-hover.mjs';
 import {
   autoCompactWindowNotes,
@@ -297,11 +306,11 @@ import {
   autoCompactWindowFromIndex,
   formatAutoCompactWindowLabel,
 } from './auto-compact-window-options.mjs';
-import { renderPlanUsageHtml, planUsageSubtitle, normalizeUsageProvider } from './plan-usage-view.mjs';
+import { renderPlanUsageHtml, renderPlanUsageCardHtml, planUsageSubtitle, normalizeUsageProvider } from './plan-usage-view.mjs';
 import { revealSelectedTabs, watchTabStripFades } from './tab-strip-fade.mjs';
 import { FONT_SCALE_CHANGE_EVENT, getUiScale, initFontScaling, updateFontScaleFromSelect } from './font-scaling.js';
 import { initClientDiagnostics, recordStatusEvent } from './status-store.mjs';
-import { isStatusViewActive, toggleStatusView } from './status-view.mjs';
+import { isStatusViewActive, leaveStatusView, toggleStatusView } from './status-view.mjs';
 import { installExternalLinkPolicy, openExternalNavigation } from './external-link-policy.mjs';
 import {
   initCwdPicker,
@@ -1659,13 +1668,6 @@ function modelProvidersForId(modelId, providersByModel = {}) {
   return providers.map((provider) => String(provider || '').trim().toLowerCase()).filter(Boolean);
 }
 
-function openAIImageSizesForModel(modelId = '') {
-  const normalized = String(modelId || '').trim().toLowerCase().replace(/^openai\//, '');
-  if (normalized.startsWith('dall-e-2')) return ['256x256', '512x512', '1024x1024'];
-  if (normalized.startsWith('dall-e-3')) return ['1024x1024', '1792x1024', '1024x1792'];
-  return ['auto', '1024x1024', '1536x1024', '1024x1536'];
-}
-
 function modelVisibleForActiveProvider(modelId, activeProviderType, providersByModel = {}) {
   const normalizedModelId = String(modelId || '').trim().toLowerCase();
   if (!normalizedModelId) return false;
@@ -1799,8 +1801,12 @@ function selectedReasoningEffortValue() {
 function updateReasoningSelectorForModel(modelId, preferredEffort = '', { persist = false } = {}) {
   const select = document.getElementById('reasoning-effort-select');
   if (!select) return;
-  select.title = isOpenAIImageModelId(modelId) ? 'Quality' : 'Reasoning effort';
-  const options = reasoningOptionsForModel(modelId);
+  const imageModel = isOpenAIImageModelId(modelId);
+  select.title = imageModel ? 'Quality' : 'Reasoning effort';
+  // An image model's Quality: the catalog's values its family takes.
+  const options = imageModel
+    ? imageQualityOptions(modelId, reasoningOptionsForModel(modelId))
+    : reasoningOptionsForModel(modelId);
   const currentEffort = String(select.value || '').trim().toLowerCase();
   const storedEffort = String(localStorage.getItem(REASONING_STORAGE_KEY) || '').trim().toLowerCase();
   select.innerHTML = '';
@@ -2082,20 +2088,16 @@ function updateContextTierSelector(modelId) {
   const select = document.getElementById('context-tier-select');
   if (!select) return;
   if (isOpenAIImageModelId(modelId)) {
-    const current = String(select.value || '').trim().toLowerCase();
-    const imageSizes = openAIImageSizesForModel(modelId);
-    select.innerHTML = '';
-    for (const size of imageSizes) {
-      const option = document.createElement('option');
-      option.value = size;
-      option.textContent = size;
-      select.appendChild(option);
-    }
-    select.value = imageSizes.includes(current) ? current : 'auto';
-    select.title = 'Image size';
+    // Size (with Custom…), Count, Format and Background: image-composer-ui.js,
+    // from the conversation's stored values.
+    syncImageComposerControls(modelId, currentConvId);
+    // Today's image spend near or at the daily cap: the banner of an image chat.
+    syncOpenAIImageSpendBanner({ imageChat: true });
     updateModelPricingDetails(modelId, 'default');
     return;
   }
+  hideImageComposerControls();
+  syncOpenAIImageSpendBanner({ imageChat: false });
   const tierOptions = buildContextTierOptions({
     modelId,
     providerType: activeComposerProviderType(),
@@ -3454,6 +3456,27 @@ function usageCardIsFresh(provider) {
   return Number.isFinite(at) && Date.now() - at < USAGE_LIVE_FRESH_MS;
 }
 
+/**
+ * A new OpenAI image spend state (the socket event): the kept report's
+ * 'openai' card takes it, and the open modal redraws that card alone.
+ */
+function applyImageSpendToUsageReport(state) {
+  if (!state || !Array.isArray(lastUsageReport?.providers)) return;
+  const index = lastUsageReport.providers.findIndex((card) => card?.imageSpend && normalizeUsageProvider(card.provider) === 'openai');
+  if (index < 0) return;
+  const card = { ...lastUsageReport.providers[index], imageSpend: { ...lastUsageReport.providers[index].imageSpend, ...state } };
+  const providers = lastUsageReport.providers.slice();
+  providers[index] = card;
+  storeUsageReport({ ...lastUsageReport, providers });
+  if (summaryModalState.kind !== 'usage') return;
+  const panel = document.getElementById('summary-modal-body')?.querySelector('[data-usage-panel="openai"]');
+  if (!panel) return;
+  const updating = panel.hasAttribute('data-updating');
+  panel.outerHTML = renderPlanUsageCardHtml(card, { active: !panel.hidden });
+  if (updating) markUsageCardUpdating('openai', true);
+}
+onOpenAIImageSpendChange(applyImageSpendToUsageReport);
+
 /** The "Updating…" marker on one card, while its live read runs. */
 function markUsageCardUpdating(provider, updating) {
   const body = document.getElementById('summary-modal-body');
@@ -4036,11 +4059,13 @@ async function loadContextSummaryAndRender(convId) {
   const detailText = String(payload.text || '').trim();
   // 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
+  const contextHtml = usageHtml
     ? `${usageHtml}${autoCompactHtml}${thinkingHtml}${thoughtsHtml}${attributionHtml}${agentSessionsHtml}${detailText
       ? `<details class="ctx-usage-raw"><summary>Raw details</summary><pre>${escHtml(detailText)}</pre></details>`
       : ''}`
     : `${autoCompactHtml}${thinkingHtml}${thoughtsHtml}${attributionHtml}${agentSessionsHtml}<pre>${escHtml(detailText || 'No context data available.')}</pre>`;
+  // Two categories: Context (this body) and the session's Media gallery.
+  const bodyHtml = wrapContextBody(contextHtml, settingsConversationId);
 
   renderSummaryModalContent({
     title: 'Context usage',
@@ -4049,7 +4074,11 @@ async function loadContextSummaryAndRender(convId) {
     refresh: () => loadContextSummaryAndRender(refreshLookupId),
     kind: 'context',
   });
-  setSummaryModalLeaveHandler('context', () => commitAutoCompactDraft());
+  setSummaryModalLeaveHandler('context', () => {
+    commitAutoCompactDraft();
+    leaveContextTab();
+  });
+  afterContextRender();
 }
 
 async function showUsage() {
@@ -4111,6 +4140,9 @@ async function showContext() {
     });
     return;
   }
+  // A fresh open shows Context first; Media is one tap away.
+  initContextTabs();
+  resetContextTab(convId);
   if (btn) {
     btn.textContent = '⏳';
     btn.disabled = true;
@@ -5141,6 +5173,13 @@ function toggleChatActionsMenu() {
   syncThemeMenuLabel();
   syncAboutMenuLabel();
   const willOpen = !!menu.hidden;
+  // An image chat's cost, asked from the relay each time the menu opens.
+  if (willOpen) {
+    void syncChatMenuImageCost({
+      conversationId: currentConvId,
+      imageChat: isOpenAIImageModelId(document.getElementById('model-select')?.value || ''),
+    }).then(() => { if (!menu.hidden) placeChatActionsMenu(); });
+  }
   menu.hidden = !willOpen;
   trigger.setAttribute('aria-expanded', willOpen ? 'true' : 'false');
   if (willOpen) {
@@ -5717,6 +5756,14 @@ async function initApp() {
       closeChatActionsMenu();
       openCurrentCloudSession(showExternalLinkFallback);
     });
+    // The global Media view: every session's pictures, in the transcript's place.
+    bindMenuAction(document.getElementById('chat-menu-media'), (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      lockChatActionsMenuShield(350);
+      closeChatActionsMenu();
+      void window.toggleMediaView();
+    });
     const chatMenuSettingsBtn = document.getElementById('chat-menu-settings');
     bindMenuAction(chatMenuSettingsBtn, (event) => {
       event.preventDefault();
@@ -5990,6 +6037,7 @@ async function bootstrap() {
     // Leaving the Inbox goes back to the conversation it was opened from.
     // Opened from Status it stored none: `returnTo` is the session history stands on.
     closeInboxView: ({ returnTo = '' } = {}) => { if (isInboxViewActive()) void toggleInboxView({ returnTo }); },
+    closeMediaView: ({ returnTo = '' } = {}) => { if (isMediaViewActive()) void toggleMediaView({ returnTo }); },
     closeChangeCwdMenu: () => closeChangeCwdMenu({ focusTrigger: true }),
     closeGitChangesModal,
     closeGitDiffViewer,
@@ -6169,9 +6217,21 @@ window.openOriginConversation = openOriginConversation;
 // history stands on.
 window.toggleStatusView = () => {
   leaveInboxView();
+  leaveMediaView();
   return toggleStatusView({ returnTo: sessionHistoryConversation() });
 };
-window.toggleInboxView = () => toggleInboxView({ returnTo: sessionHistoryConversation() });
+window.toggleInboxView = () => {
+  leaveMediaView();
+  return toggleInboxView({ returnTo: sessionHistoryConversation() });
+};
+// The global Media view shares that place too.
+window.toggleMediaView = () => toggleMediaView({
+  returnTo: sessionHistoryConversation(),
+  leaveOthers: () => {
+    leaveInboxView();
+    leaveStatusView();
+  },
+});
 window.refreshConversations = refreshConversations;
 window.renderConvList = renderConvList;
 window.handleAttachmentInput = handleAttachmentInput;

package/server/public/app/chat-actions-menu-state.mjs

@@ -67,6 +67,7 @@ export const CHAT_ACTIONS_MENU_ENTRY_IDS = Object.freeze([
   'chat-menu-change-cwd',
   'chat-menu-git-changes',
   'chat-menu-open-cloud-session',
+  'chat-menu-media',
   'chat-menu-settings',
   'chat-menu-about',
   'chat-menu-restart-relay',