@oar-sh/oar 0.9.23 → 0.9.25

package/server/public/app/session-history-ui.js

@@ -77,6 +77,8 @@ function overlayDescriptors(closers) {
     { name: 'inbox', find: () => document.body, isOpen: (el) => !!el?.classList?.contains('inbox-view-active'), close: backToSession(closers.closeInboxView) },
     // Status the same way.
     { name: 'status', find: () => document.body, isOpen: (el) => !!el?.classList?.contains('status-view-active'), close: backToSession(closers.closeStatusView) },
+    // And the global Media view.
+    { name: 'media', find: () => document.body, isOpen: (el) => !!el?.classList?.contains('media-view-active'), close: backToSession(closers.closeMediaView) },
     { name: 'composer-settings', find: byId('composer-settings'), isOpen: isShown, close: closers.closeComposerSettings },
     { name: 'chat-actions-menu', find: byId('chat-actions-menu'), isOpen: isShown, close: closers.closeChatActionsMenu },
     { name: 'summary-modal', find: byId('summary-modal'), isOpen: isVisible, close: closers.closeSummaryModal },

package/server/public/app/settings-modal.js

@@ -37,8 +37,16 @@ import {
   updateSubagentRecordRetentionSetting as requestSubagentRecordRetentionSetting,
   loadFeatureFlagSettings,
   updateFeatureFlagSetting as requestFeatureFlagSetting,
+  loadModelRefreshSettings,
+  updateModelRefreshSettings as requestModelRefreshSettings,
   requestRelayRestart,
 } from './api-client.js';
+import {
+  formatModelRefreshIntervalLabel,
+  formatModelRefreshLastChecked,
+  nextModelRefreshExcluded,
+  normalizeModelRefreshSettings,
+} from './model-refresh-ui.mjs';
 import { DEFAULT_BACKGROUND_TASK_TIMEOUT_MINUTES } from './background-task-timeout-options.mjs';
 import {
   DEFAULT_CLAUDE_BACKGROUND_COMMAND_LIMIT_MINUTES,
@@ -57,6 +65,7 @@ import { refreshClaudeAuthSection } from './claude-auth-ui.js';
 import { refreshGrokAuthSection } from './grok-auth-ui.js';
 import { syncDeepSeekSettingsInputs } from './deepseek-settings-ui.js';
 import { syncClaudeApiSettingsInputs } from './claude-api-settings-ui.js';
+import { applyOpenAIImageSpendSettings, syncOpenAIImageSpendSettings } from './openai-image-cost-ui.js';
 
 export {
   applyDeepSeekSettingsState,
@@ -77,6 +86,7 @@ export {
 } from './claude-api-settings-ui.js';
 import { openClaudeCloudSettingsSection } from './claude-cloud-settings-ui.js';
 import { refreshCliInstallSections } from './cli-install-ui.js';
+import { refreshAgentSdkRows } from './agent-sdk-ui.js';
 import { refreshUpdateSection } from './update-ui.js';
 import { refreshRemoteRelaysSection } from './remote-relays-settings.js';
 import { refreshAgentSessionsSection } from './agent-sessions-settings-ui.js';
@@ -399,6 +409,161 @@ export async function updateSubagentRecordRetentionSetting(value) {
   }
 }
 
+// "Check for new models" (Settings › General › Models): a relay setting, on
+// every 24 h by default, with one checkbox per enabled provider to leave it
+// out (server/services/model-refresh-scheduler.mjs). Starts at the relay's
+// defaults until its answer loads.
+let modelRefreshSettings = normalizeModelRefreshSettings(null);
+let modelRefreshUpdateInFlight = false;
+// The provider list waits for the relay's answer: "Loading…" until one
+// arrived, the reason while the last read failed.
+let modelRefreshProvidersLoaded = false;
+let modelRefreshLoadError = '';
+
+function syncModelRefreshIntervalOptions(select) {
+  const { intervalChoices, intervalHours } = modelRefreshSettings;
+  // A stored value outside today's choices still shows as itself.
+  const choices = intervalChoices.includes(intervalHours)
+    ? intervalChoices
+    : [...intervalChoices, intervalHours].sort((a, b) => a - b);
+  const current = Array.from(select.options).map((option) => option.value).join(',');
+  if (current === choices.join(',')) return;
+  select.replaceChildren(...choices.map((hours) => {
+    const option = document.createElement('option');
+    option.value = String(hours);
+    option.textContent = formatModelRefreshIntervalLabel(hours);
+    return option;
+  }));
+}
+
+function renderModelRefreshProviderRows(list) {
+  const excluded = new Set(modelRefreshSettings.excluded);
+  const disabled = modelRefreshUpdateInFlight || !modelRefreshSettings.auto;
+  const now = Date.now();
+  const status = (text, className) => {
+    const line = document.createElement('div');
+    line.className = className;
+    line.textContent = text;
+    return line;
+  };
+  let statusLine = null;
+  if (modelRefreshLoadError) {
+    statusLine = status(`Could not load the providers: ${modelRefreshLoadError}`, 'settings-help model-refresh-providers-error');
+  } else if (!modelRefreshProvidersLoaded) {
+    statusLine = status('Loading…', 'settings-help model-refresh-providers-loading');
+  } else if (!modelRefreshSettings.providers.length) {
+    statusLine = status('No provider is switched on.', 'settings-help');
+  }
+  // After a failed read, the providers of an earlier answer stay below it.
+  const providers = modelRefreshProvidersLoaded ? modelRefreshSettings.providers : [];
+  list.replaceChildren(...(statusLine ? [statusLine] : []), ...providers.map((provider) => {
+    const inputId = `model-refresh-provider-${provider.id.toLowerCase().replace(/[^a-z0-9-]/g, '-')}`;
+    const row = document.createElement('div');
+    row.className = 'settings-row model-refresh-provider-row';
+    const label = document.createElement('label');
+    label.htmlFor = inputId;
+    const name = document.createElement('span');
+    name.textContent = `Check ${provider.label}`;
+    const last = document.createElement('span');
+    last.className = 'model-refresh-provider-last';
+    // An enabled provider without its key or CLI is not checked until it is.
+    last.textContent = provider.setUp ? formatModelRefreshLastChecked(provider.last, now) : 'Not set up';
+    label.append(name, last);
+    const input = document.createElement('input');
+    input.id = inputId;
+    input.type = 'checkbox';
+    input.dataset.modelRefreshProvider = provider.id;
+    input.setAttribute('aria-label', `Check ${provider.label} for new models`);
+    input.checked = !excluded.has(provider.id);
+    input.disabled = disabled;
+    input.addEventListener('change', () => {
+      void updateModelRefreshProviderSetting(provider.id, input.checked);
+    });
+    row.append(label, input);
+    return row;
+  }));
+}
+
+function syncModelRefreshSection() {
+  const toggle = document.getElementById('model-refresh-auto-toggle');
+  if (toggle instanceof HTMLInputElement) {
+    toggle.checked = modelRefreshSettings.auto;
+    toggle.disabled = modelRefreshUpdateInFlight;
+  }
+  const select = document.getElementById('model-refresh-interval-select');
+  if (select && select.tagName === 'SELECT') {
+    syncModelRefreshIntervalOptions(select);
+    select.value = String(modelRefreshSettings.intervalHours);
+    // Nothing to time while the check is off.
+    select.disabled = modelRefreshUpdateInFlight || !modelRefreshSettings.auto;
+  }
+  const list = document.getElementById('model-refresh-providers');
+  if (list) renderModelRefreshProviderRows(list);
+}
+
+export async function refreshModelRefreshSettings() {
+  // A new read: "Loading…" again until it answers, or the earlier list.
+  modelRefreshLoadError = '';
+  syncModelRefreshSection();
+  try {
+    const result = await loadModelRefreshSettings();
+    if (!result || typeof result !== 'object') throw new Error('The relay did not answer.');
+    modelRefreshSettings = normalizeModelRefreshSettings(result);
+    modelRefreshProvidersLoaded = true;
+    modelRefreshLoadError = '';
+  } catch (error) {
+    // Keep the last known value; the setting is not critical.
+    modelRefreshLoadError = String(error?.message || '').trim() || 'The relay did not answer.';
+  } finally {
+    syncModelRefreshSection();
+  }
+}
+
+async function saveModelRefreshSettings(patch, describe) {
+  if (modelRefreshUpdateInFlight) {
+    syncModelRefreshSection();
+    return;
+  }
+  modelRefreshUpdateInFlight = true;
+  syncModelRefreshSection();
+  try {
+    const result = await requestModelRefreshSettings(patch);
+    if (!result) throw new Error('Failed to update the check for new models.');
+    modelRefreshSettings = normalizeModelRefreshSettings(result);
+    modelRefreshProvidersLoaded = true;
+    modelRefreshLoadError = '';
+    showTransientRelayNotice(describe(modelRefreshSettings));
+  } catch (error) {
+    alert(error?.message || 'Failed to update the check for new models.');
+  } finally {
+    modelRefreshUpdateInFlight = false;
+    syncModelRefreshSection();
+  }
+}
+
+export function updateModelRefreshAutoSetting(checked) {
+  return saveModelRefreshSettings({ auto: checked === true }, (settings) => (settings.auto
+    ? `The relay checks for new models ${formatModelRefreshIntervalLabel(settings.intervalHours).toLowerCase()}.`
+    : 'The relay no longer checks for new models by itself.'));
+}
+
+export function updateModelRefreshIntervalSetting(value) {
+  return saveModelRefreshSettings({ intervalHours: Math.round(Number(value)) }, (settings) => (
+    `The relay checks for new models ${formatModelRefreshIntervalLabel(settings.intervalHours).toLowerCase()}.`
+  ));
+}
+
+export function updateModelRefreshProviderSetting(providerId, checked) {
+  const id = String(providerId || '').trim();
+  const label = modelRefreshSettings.providers.find((provider) => provider.id === id)?.label || id;
+  return saveModelRefreshSettings(
+    { excluded: nextModelRefreshExcluded(modelRefreshSettings.excluded, id, checked === true) },
+    (settings) => (settings.excluded.includes(id)
+      ? `${label} is no longer checked for new models.`
+      : `${label} is checked for new models.`),
+  );
+}
+
 export async function updateBackgroundTaskTimeoutSetting(value) {
   if (backgroundTaskTimeoutUpdateInFlight) {
     syncBackgroundTaskTimeoutSlider();
@@ -478,6 +643,8 @@ function setOpenAISettingsControlsDisabled(disabled) {
 
 export function applyOpenAISettingsState(settings = {}, { resetInputs = false } = {}) {
   ensureOpenAISettingsInputTracking();
+  // The daily image cap, when the answer names it (openai-image-cost-ui.js).
+  if (typeof document !== 'undefined') applyOpenAIImageSpendSettings(settings || {});
   openAISettingsState = {
     configured: settings?.configured === true,
     enabled: settings?.configured === true && settings?.enabled === true,
@@ -1956,6 +2123,7 @@ export function openSettingsModal(tab, providerTab) {
   openAISettingsInputsDirty = false;
   ensureOpenAISettingsInputTracking();
   void syncOpenAISettingsInputs();
+  void syncOpenAIImageSpendSettings();
   claudeSettingsInputsDirty = false;
   ensureClaudeSettingsInputTracking();
   void syncClaudeSettingsInputs();
@@ -1966,6 +2134,8 @@ export function openSettingsModal(tab, providerTab) {
   // in the meantime should show up the moment the panel opens. Sockets keep it
   // current from here on.
   void refreshCliInstallSections({ force: true });
+  // The agent SDK rows: a read of the store's state, nothing spawned.
+  void refreshAgentSdkRows();
   grokSettingsInputsDirty = false;
   ensureGrokSettingsInputTracking();
   void syncGrokSettingsInputs();
@@ -1989,6 +2159,7 @@ export function openSettingsModal(tab, providerTab) {
   void refreshRestartResumeSetting();
   syncSubagentRecordRetentionSelect();
   void refreshSubagentRecordRetentionSetting();
+  void refreshModelRefreshSettings();
   void refreshRelayRestartMaxWaitSetting();
   void refreshPushSettingsSection();
   void refreshPreviewsSection();

package/server/public/app/socket-handlers.js

@@ -31,7 +31,9 @@ import {
   refreshSummaryModal,
   summaryModalState,
   IS_SHARED_VIEW,
+  showTransientRelayNotice,
 } from './store.js';
+import { newModelsToastFor } from './model-refresh-ui.mjs';
 import { scheduleContextUsageRefresh } from './api-client.js';
 import { capFinishedActivityEntries, capLiveActivityEntries, normalizeTurnSeq } from './activity-replay-state.mjs';
 import { liveActivityCap } from './live-activity-cap.mjs';
@@ -66,9 +68,12 @@ import { applyClaudeCloudSettingsState, refreshClaudeCloudSettingsState } from '
 import { applyClaudeCloudSessionEvent } from './claude-cloud-conversation-ui.js';
 import { updateProviderReadinessInputs } from './provider-readiness.mjs';
 import { applyCliInstallState } from './cli-install-ui.js';
+import { applyAgentSdkState } from './agent-sdk-ui.js';
 import { renderUpdateSection } from './update-ui.js';
 import { applyHostSuspendState, applyRelayShutdownState } from './host-suspend-ui.js';
 import { applyClaudeUsageLimit, applyConversationBilling, applyUsageLimitPause } from './usage-limit-ui.js';
+import { applyOpenAIImagePresets, applyOpenAIImageSpendState } from './openai-image-cost-ui.js';
+import { OPENAI_IMAGE_PRESETS_EVENT, OPENAI_IMAGE_USAGE_EVENT } from './openai-image-spend.mjs';
 import {
   showThinking,
   removeThinking,
@@ -108,6 +113,12 @@ import { mergeRelayThoughts } from './relay-thoughts.mjs';
 import { conversationPayloadCache } from './conversation-payload-cache.mjs';
 import { planOnlyAfterBroadcast } from './plan-board-shared.mjs';
 import { noteConversationGone } from './session-history-ui.js';
+import { handleImagePreview, handleImagePreviewReset, handleImageStarted } from './image-turn-placeholder.mjs';
+import {
+  OPENAI_IMAGE_PREVIEW_EVENT,
+  OPENAI_IMAGE_PREVIEW_RESET_EVENT,
+  OPENAI_IMAGE_STARTED_EVENT,
+} from './openai-image-composer.mjs';
 
 // A live row of the conversation on screen joins its kept window, so a
 // switch away and back still shows it. Rows of other conversations do not:
@@ -150,6 +161,7 @@ let deps = null;
  * @property {(force?: boolean) => (void | Promise<void>)} refreshModelCatalog
  * @property {(payload?: object) => void} updateModelCatalogState
  * @property {() => (void | Promise<void>)} reconcileOpenModelVariantModal
+ * @property {(tab?: string) => (void | Promise<void>)} [openSelectModelsModal]
  * @property {(payload?: object) => void} applyConversationWorkspaceRootUpdate
  * @property {(conversationId: string, title: string, updatedAt?: string | number | null) => void} applyConversationTitleUpdate
  * @property {() => void} syncChatTitleControls
@@ -366,6 +378,9 @@ export async function connectSocket(overrideDeps) {
     setCliOnline(true);
     renderConvList();
     resyncAfterConnect();
+    // For views that load from the relay on their own (the media gallery's
+    // tiles): what failed while the relay was away can be asked for again.
+    window.dispatchEvent(new CustomEvent('oar:relay-connected'));
     // Every loaded page again, not page one only: events missed while the
     // socket was down touched rows anywhere in the list.
     scheduleLoadedConversationsRefresh();
@@ -414,6 +429,18 @@ export async function connectSocket(overrideDeps) {
   socket.on('models_updated', (payload) => {
     updateModelCatalogState(payload || {});
     void reconcileOpenModelVariantModal();
+    // A refresh that found models never seen before: one toast per event, on
+    // the clients connected now (the others get the menu dot and the tags).
+    const toast = newModelsToastFor(payload, { sharedView: IS_SHARED_VIEW });
+    if (toast) {
+      const { tab } = toast;
+      showTransientRelayNotice(toast.text, 10000, {
+        actionLabel: 'Show',
+        onAction: () => {
+          void Promise.resolve(deps?.openSelectModelsModal?.(tab)).catch(() => {});
+        },
+      });
+    }
   });
   // Each settings event also feeds provider readiness (provider-readiness.mjs),
   // so a Settings save changes the empty screen without a reload.
@@ -426,6 +453,15 @@ export async function connectSocket(overrideDeps) {
         .catch(() => {});
     }
   });
+  // Today's OpenAI image spend after every booking and every change of the
+  // cap or the override (the banner, Settings, Check Usage), and the image
+  // presets after every change (the composer's select, Settings).
+  socket.on(OPENAI_IMAGE_USAGE_EVENT, (payload) => {
+    applyOpenAIImageSpendState(payload);
+  });
+  socket.on(OPENAI_IMAGE_PRESETS_EVENT, (payload) => {
+    applyOpenAIImagePresets(payload);
+  });
   // No view refresh here: the engine switch rebinds nothing — it only changes
   // which worker the NEXT Copilot conversation spawns.
   socket.on('copilot_settings_updated', (payload) => {
@@ -457,6 +493,11 @@ export async function connectSocket(overrideDeps) {
   socket.on('cli_install_state', (payload) => {
     applyCliInstallState(payload || null);
   });
+  // Agent SDK installs, the same whole-buffer contract. It also feeds
+  // provider readiness (agent-sdk-ui.js passes the snapshot on).
+  socket.on('agent_sdk_state', (payload) => {
+    applyAgentSdkState(payload || null);
+  });
   // Self-update transitions AND npm log chunks; same whole-buffer contract as
   // cli_install_state, so a client connecting mid-update renders the full log.
   socket.on('update_state', (payload) => {
@@ -633,6 +674,12 @@ export async function connectSocket(overrideDeps) {
     if (sourceMessageId) clearRelayStreamStateForMessage(sourceMessageId);
     refreshSessionWorkerStatus().catch(() => {});
   });
+  // A running image turn of the open conversation: its placeholder in the
+  // live bubble (timer, size, the newest partials). Other conversations'
+  // events are ignored there.
+  socket.on(OPENAI_IMAGE_STARTED_EVENT, (payload) => handleImageStarted(payload));
+  socket.on(OPENAI_IMAGE_PREVIEW_EVENT, (payload) => handleImagePreview(payload));
+  socket.on(OPENAI_IMAGE_PREVIEW_RESET_EVENT, (payload) => handleImagePreviewReset(payload));
   // A folder's commit attribution changed (any client): an open context modal
   // re-reads it so its row and effect text match.
   socket.on('workspace_root_attribution_updated', () => {

package/server/public/app/tab-strip-fade.mjs

@@ -6,7 +6,7 @@
 
 import { FONT_SCALE_CHANGE_EVENT } from './font-scaling.js';
 
-export const TAB_STRIP_SELECTOR = '.settings-tab-strip, .plan-usage-tab-strip';
+export const TAB_STRIP_SELECTOR = '.settings-tab-strip, .plan-usage-tab-strip, .context-tab-strip, .media-gallery-tabs, .media-gallery-chips';
 
 // Sub-pixel scroll ends (a zoomed page) count as the end.
 const EDGE_SLACK_PX = 1;

package/server/public/app/viewer-gallery.mjs

@@ -32,7 +32,29 @@ export function galleryAt(gallery, index) {
 
 export function galleryPositionLabel(gallery) {
   if (!gallery || !Array.isArray(gallery.items) || !gallery.items.length) return '';
-  return `${gallery.index + 1} / ${gallery.items.length}`;
+  return `${gallery.index + 1} / ${gallery.items.length}${galleryHasMore(gallery) ? '+' : ''}`;
+}
+
+// A paged gallery (the media gallery) knows only the pages loaded so far:
+// `hasMore` says more items follow and `loadMore()` fetches the next page
+// as `{ items, hasMore }`. Stepping past the last loaded item loads it.
+
+export function galleryHasMore(gallery) {
+  return Boolean(gallery && gallery.hasMore && typeof gallery.loadMore === 'function');
+}
+
+/** Whether a step of `delta` can land somewhere: a neighbour, or a page still to load. */
+export function galleryCanStep(gallery, delta) {
+  if (galleryNeighborIndex(gallery, delta) !== -1) return true;
+  return Number(delta) > 0 && galleryHasMore(gallery) && Number(gallery.index) === gallery.items.length - 1;
+}
+
+/** The gallery with a loaded page appended (items it already has are not added twice). */
+export function extendGallery(gallery, page) {
+  if (!gallery) return null;
+  const known = new Set(gallery.items.map((item) => item.key).filter(Boolean));
+  const added = (Array.isArray(page?.items) ? page.items : []).filter((item) => !item?.key || !known.has(item.key));
+  return { ...gallery, items: [...gallery.items, ...added], hasMore: Boolean(page?.hasMore) && added.length > 0 };
 }
 
 /** The items on either side of the open one, nearest first. */