@oar-sh/oar 0.9.24 → 0.9.25

package/server/public/app/image-turn-placeholder.mjs

@@ -0,0 +1,233 @@
+// The placeholder of a running OpenAI image turn, inside the live bubble
+// (#thinking-indicator): an elapsed timer, the size, quality, count and
+// model, and the newest partial of each image as the relay streams them
+// (image_started, image_preview, image_preview_reset; owner pages only).
+//
+// It lives in the live bubble, so it goes with it: never stored, never in a
+// share view (the relay sends shares no such event, and IS_SHARED_VIEW
+// ignores them all the same), and never in the media gallery (which reads
+// `.msg-bubble img`). The image area is sized by the size's aspect ratio from
+// the start, so a partial arriving does not move the transcript.
+
+import { BASE, IS_SHARED_VIEW, currentConvId } from './store.js';
+import {
+  formatImageElapsed,
+  imageAspectRatio,
+  imagePlaceholderDetails,
+  reduceImageTurnState,
+} from './openai-image-composer.mjs';
+
+const LIVE_BUBBLE_ID = 'thinking-indicator';
+const TICK_MS = 1000;
+
+// The open conversation's image turn, or null.
+let turn = null;
+let timer = null;
+
+function openConversationId() {
+  return String(currentConvId || '').trim();
+}
+
+function liveBubbleFor(state) {
+  if (typeof document === 'undefined' || !state) return null;
+  const bubble = document.getElementById(LIVE_BUBBLE_ID);
+  if (!bubble) return null;
+  if (String(bubble.dataset.conversationId || '') !== state.conversationId) return null;
+  const bubbleMessageId = String(bubble.dataset.messageId || '').trim();
+  if (bubbleMessageId && bubbleMessageId !== state.messageId) return null;
+  return bubble;
+}
+
+function stopTimer() {
+  if (timer) clearInterval(timer);
+  timer = null;
+}
+
+function ensureTimer() {
+  if (timer || typeof setInterval !== 'function') return;
+  timer = setInterval(tick, TICK_MS);
+  timer?.unref?.();
+}
+
+function tick() {
+  const node = typeof document === 'undefined' ? null : document.querySelector('[data-image-placeholder]');
+  if (!node || !turn) {
+    stopTimer();
+    return;
+  }
+  const clock = node.querySelector('[data-image-placeholder-timer]');
+  const text = formatImageElapsed(Date.now() - (turn.startedAtMs ?? Date.now()));
+  if (clock && clock.textContent !== text) clock.textContent = text;
+}
+
+function removePlaceholderNodes() {
+  if (typeof document === 'undefined') return;
+  for (const node of document.querySelectorAll('[data-image-placeholder]')) node.remove();
+}
+
+function buildPlaceholder(state) {
+  const root = document.createElement('div');
+  root.className = 'image-turn-placeholder';
+  root.setAttribute('data-image-placeholder', '');
+  root.setAttribute('role', 'status');
+  root.innerHTML = `
+    <div class="image-turn-placeholder-meta">
+      <span class="image-turn-placeholder-label">Making the image</span>
+      <span class="image-turn-placeholder-timer" data-image-placeholder-timer>0:00</span>
+      <span class="image-turn-placeholder-retry" data-image-placeholder-retry hidden>trying again</span>
+    </div>
+    <div class="image-turn-placeholder-details" data-image-placeholder-details></div>
+    <div class="image-turn-placeholder-grid" data-image-placeholder-grid></div>`;
+  root.dataset.messageId = state.messageId;
+  return root;
+}
+
+function syncGrid(grid, state) {
+  const count = Math.max(1, Number(state.count) || 1);
+  grid.dataset.count = String(count);
+  const ratio = imageAspectRatio(state.size);
+  while (grid.children.length > count) grid.lastElementChild.remove();
+  for (let index = 0; index < count; index += 1) {
+    let tile = grid.children[index];
+    if (!tile) {
+      tile = document.createElement('div');
+      tile.className = 'image-turn-placeholder-tile';
+      tile.dataset.imageIndex = String(index);
+      grid.appendChild(tile);
+    }
+    if (tile.style.aspectRatio !== ratio) tile.style.aspectRatio = ratio;
+    const partial = state.partials?.[index] || null;
+    let img = tile.querySelector('img[data-image-placeholder-preview]');
+    if (!partial) {
+      img?.remove();
+      tile.classList.remove('has-preview');
+      continue;
+    }
+    if (!img) {
+      img = document.createElement('img');
+      img.setAttribute('data-image-placeholder-preview', '');
+      img.dataset.imageIndex = String(index);
+      img.alt = count > 1 ? `Preview of image ${index + 1}` : 'Preview of the image';
+      img.decoding = 'async';
+      tile.appendChild(img);
+    }
+    if (img.getAttribute('src') !== partial.url) img.setAttribute('src', partial.url);
+    img.dataset.partialIndex = String(partial.partialIndex);
+    tile.classList.add('has-preview');
+  }
+}
+
+/**
+ * Draws the open conversation's image turn into its live bubble, or takes
+ * the placeholder away when there is none (or the bubble is another turn's).
+ * Called after each event and whenever the live bubble is (re)built.
+ */
+export function renderImageTurnPlaceholder() {
+  if (typeof document === 'undefined') return;
+  const state = turn && turn.conversationId === openConversationId() ? turn : null;
+  const bubble = liveBubbleFor(state);
+  if (!state || !bubble) {
+    removePlaceholderNodes();
+    if (!state) stopTimer();
+    return;
+  }
+  const host = bubble.querySelector('.thinking-bubble') || bubble;
+  let node = host.querySelector('[data-image-placeholder]');
+  if (node && node.dataset.messageId !== state.messageId) {
+    node.remove();
+    node = null;
+  }
+  if (!node) {
+    node = buildPlaceholder(state);
+    const header = host.querySelector('.thinking-bubble-header');
+    if (header) header.after(node);
+    else host.prepend(node);
+  }
+  node.dataset.attempt = String(state.attempt);
+  const details = node.querySelector('[data-image-placeholder-details]');
+  const detailText = imagePlaceholderDetails(state);
+  if (details && details.textContent !== detailText) details.textContent = detailText;
+  const retry = node.querySelector('[data-image-placeholder-retry]');
+  if (retry) retry.hidden = !state.retrying;
+  const grid = node.querySelector('[data-image-placeholder-grid]');
+  if (grid) syncGrid(grid, state);
+  tick();
+  ensureTimer();
+}
+
+function accept(payload) {
+  if (IS_SHARED_VIEW || !payload || typeof payload !== 'object') return false;
+  const conversationId = String(payload.conversationId || '').trim();
+  return !!conversationId && conversationId === openConversationId();
+}
+
+function apply(type, payload) {
+  if (!accept(payload)) return;
+  // Another turn of the open conversation replaces the one held.
+  const held = turn && turn.conversationId === payload.conversationId ? turn : null;
+  turn = reduceImageTurnState(held, type, payload, { base: BASE });
+  renderImageTurnPlaceholder();
+}
+
+/** `image_started` { conversationId, messageId, attempt, size, quality, count, model, startedAt }. */
+export function handleImageStarted(payload) {
+  apply('started', payload);
+}
+
+/** `image_preview` { conversationId, messageId, attempt, imageIndex, partialIndex, contentUrl, … }. */
+export function handleImagePreview(payload) {
+  apply('preview', payload);
+}
+
+/** `image_preview_reset` { conversationId, messageId, attempt, reason }. */
+export function handleImagePreviewReset(payload) {
+  if (!accept(payload)) return;
+  if (!turn || turn.messageId !== String(payload.messageId || '').trim()) return;
+  apply('reset', payload);
+}
+
+/**
+ * A running image turn the page learns of from the conversation's in-flight
+ * snapshot (opened or reconnected mid-turn): the timer runs from the turn's
+ * own start. What the relay sent live for the same turn is kept; `image`
+ * (optional) carries the turn's size, quality, count, model, attempt and
+ * startedAt, and `previews` its newest partials, when the snapshot has them.
+ */
+export function noteInFlightImageTurn({ conversationId, messageId, startedAt, model = '', image = null } = {}) {
+  if (IS_SHARED_VIEW) return;
+  const convId = String(conversationId || '').trim();
+  const msgId = String(messageId || '').trim();
+  if (!convId || !msgId || convId !== openConversationId()) return;
+  const held = turn && turn.conversationId === convId && turn.messageId === msgId ? turn : null;
+  const info = image && typeof image === 'object' ? image : {};
+  // What the live events said wins over the snapshot.
+  let next = held || reduceImageTurnState(null, 'started', {
+    conversationId: convId,
+    messageId: msgId,
+    attempt: info.attempt,
+    size: info.size,
+    quality: info.quality,
+    count: info.count,
+    model: info.model || model,
+    startedAt: info.startedAt || startedAt,
+  }, { base: BASE });
+  for (const preview of Array.isArray(info.previews) ? info.previews : []) {
+    next = reduceImageTurnState(next, 'preview', { ...preview, conversationId: convId, messageId: msgId }, { base: BASE });
+  }
+  turn = next;
+  renderImageTurnPlaceholder();
+}
+
+/** The turn ended or the page left it: the placeholder goes. */
+export function clearImageTurnPlaceholder(messageId = '') {
+  const id = String(messageId || '').trim();
+  if (id && turn && turn.messageId !== id) return;
+  turn = null;
+  removePlaceholderNodes();
+  stopTimer();
+}
+
+/** For tests: the held turn state. */
+export function imageTurnPlaceholderState() {
+  return turn;
+}

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

@@ -126,12 +126,14 @@ import {
 } from './new-conversation-model-choice.mjs';
 import { buildCatalogModelOptions } from './model-selector-options.mjs';
 import { isReasoningOffUnsupported, reasoningEffortOptionLabel, reasoningEffortOptionTitle } from './reasoning-effort-labels.mjs';
+import { rememberImageComposerValues } from './image-composer-ui.js';
 import {
   conversationProviderIndicatorKey,
   conversationProviderIndicatorLabel,
 } from './conversation-provider-indicator.mjs';
 import { leaveStatusView } from './status-view.mjs';
 import { leaveInboxView } from './inbox-ui.js';
+import { leaveMediaView } from './media-view.js';
 import {
   CLAUDE_CLOUD_PROVIDER,
   buildCloudSourceWarnings,
@@ -1330,7 +1332,8 @@ function showConversationUnknown(id, { lastOpenedBefore = '' } = {}) {
 
 export async function openConversation(id, options = {}) {
   // The Inbox owns the transcript like the status view does.
-  const didLeaveInboxView = leaveInboxView();
+  const didLeaveMediaView = leaveMediaView();
+  const didLeaveInboxView = leaveInboxView() || didLeaveMediaView;
   const didLeaveStatusView = leaveStatusView() || didLeaveInboxView;
   document.getElementById('input-area')?.removeAttribute('hidden');
   const previousConversationId = String(currentConvId || '').trim();
@@ -1844,9 +1847,14 @@ async function populateNewConversationModelSelect(providerType = 'github') {
     const cloudDefault = claudeCloudDefaultModel(newConversationClaudeCloudSettingsCache, eligibleModels);
     if (cloudDefault) target.value = cloudDefault;
   } else {
+    // An OpenAI Image chat starts on the relay's image default (its OpenAI
+    // settings name it) unless the last model used is an image one it offers.
+    const providerDefault = normalizedProvider === 'claude-api'
+      ? newConversationClaudeApiSettingsCache?.model
+      : (normalizedProvider === 'openai-image' ? newConversationOpenAISettingsCache?.imageDefaultModel : '');
     const preselected = preselectNewConversationModel(Array.from(target.options, (option) => option.value), {
       storedModel,
-      providerDefault: normalizedProvider === 'claude-api' ? newConversationClaudeApiSettingsCache?.model : '',
+      providerDefault,
       allowAuto: normalizedProvider !== 'openai-image',
     });
     if (preselected) target.value = preselected;
@@ -2561,6 +2569,8 @@ async function openBootstrappedConversation({
   // 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);
+  // The chosen size becomes the new chat's own, read when its composer is built.
+  if (selectedProvider === 'openai-image' && selectedSize) rememberImageComposerValues(conversationId, { size: selectedSize });
   await refreshConversations();
   await openConversation(conversationId);
   if (selectedProvider === 'openai-image') {

package/server/public/app/media-gallery-model.mjs

@@ -0,0 +1,202 @@
+// The media gallery's logic without the DOM: the query a view asks
+// GET /api/media with, month sections, how a gallery item becomes an item of
+// the file viewer, what the viewer says about it, and which buttons it gets.
+
+export const MEDIA_TEXT = Object.freeze({
+  title: 'Media',
+  tabMedia: 'Media',
+  tabFiles: 'Files',
+  tabContext: 'Context',
+  sourceAll: 'All',
+  sourceMine: 'Mine',
+  sourceAgent: 'Agent',
+  sourceGenerated: 'Generated',
+  allProviders: 'All providers',
+  allSessions: 'All sessions',
+  hideArchived: 'Hide archived',
+  search: 'Search name, alt text, session',
+  emptyMedia: 'No pictures or videos yet.',
+  emptyFiles: 'No files yet.',
+  emptyFiltered: 'Nothing matches these filters.',
+  loading: 'Loading…',
+  loadMore: 'Load more',
+  failed: 'Could not load the media.',
+  indexing: (count) => `Indexing older messages… (${count >= 10001 ? '10,000+' : count} left)`,
+  missing: (count) => `${count} missing ${count === 1 ? 'file is' : 'files are'} not shown.`,
+  sourceLabel: 'Source',
+  providerLabel: 'Provider',
+  sessionLabel: 'Session',
+  untitled: 'picture',
+  copied: 'Copied.',
+  copyFailed: 'Could not copy.',
+  openInSession: 'Open in session',
+  copyPath: 'Copy path',
+  copyLink: 'Copy link',
+  fromYou: '👤 You',
+  fromAgent: '🤖 Agent',
+  generated: '✨ Generated',
+  remote: '🌐',
+  archived: 'archived',
+  inMessages: (count) => `in ${count} messages`,
+});
+
+export const MEDIA_PAGE_SIZE = 60;
+
+/** The query string of one page of a gallery view. */
+export function mediaQuery({
+  category = 'media',
+  conversationId = '',
+  source = 'all',
+  provider = '',
+  hideArchived = false,
+  q = '',
+  cursor = '',
+  limit = MEDIA_PAGE_SIZE,
+} = {}) {
+  const params = new URLSearchParams();
+  params.set('category', category === 'file' ? 'file' : 'media');
+  if (conversationId) params.set('conversationId', conversationId);
+  if (source && source !== 'all') params.set('source', source);
+  if (provider) params.set('provider', provider);
+  if (hideArchived) params.set('archived', 'hide');
+  const text = String(q || '').trim();
+  if (text) params.set('q', text);
+  if (cursor) params.set('cursor', cursor);
+  params.set('limit', String(limit));
+  return params.toString();
+}
+
+/** Items grouped by the month of their message, newest first as they come: `[{ key, label, items }]`. */
+export function groupByMonth(items, { locale, timeZone } = {}) {
+  const sections = [];
+  for (const item of Array.isArray(items) ? items : []) {
+    const date = new Date(item?.timestamp);
+    const valid = !Number.isNaN(date.getTime());
+    const parts = valid
+      ? new Intl.DateTimeFormat('en-CA', { year: 'numeric', month: '2-digit', timeZone }).formatToParts(date)
+      : [];
+    const year = parts.find((part) => part.type === 'year')?.value || '';
+    const month = parts.find((part) => part.type === 'month')?.value || '';
+    const key = valid ? `${year}-${month}` : 'unknown';
+    let section = sections[sections.length - 1];
+    if (!section || section.key !== key) {
+      const label = valid ? date.toLocaleDateString(locale, { year: 'numeric', month: 'long', timeZone }) : '';
+      section = { key, label, items: [] };
+      sections.push(section);
+    }
+    section.items.push(item);
+  }
+  return sections;
+}
+
+export function formatMediaSize(bytes) {
+  const value = Number(bytes);
+  if (!Number.isFinite(value) || value <= 0) return '';
+  if (value < 1024) return `${value} B`;
+  if (value < 1024 * 1024) return `${(value / 1024).toFixed(value < 10 * 1024 ? 1 : 0)} KB`;
+  return `${(value / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+/** The icon of a row of the Files tab. */
+export function mediaFileIcon(item) {
+  if (item?.mediaKind === 'pdf') return '📄';
+  if (item?.mediaKind === 'audio') return '🎵';
+  return '📎';
+}
+
+/** The badge of an item: who it came from. */
+export function mediaSourceBadge(item) {
+  if (item?.origin === 'generated') return MEDIA_TEXT.generated;
+  return item?.sender === 'me' ? MEDIA_TEXT.fromYou : MEDIA_TEXT.fromAgent;
+}
+
+/** The address the viewer loads an item from (the relay's route, or the remote picture itself). */
+export function mediaHref(item, base = '') {
+  if (item?.contentUrl) return `${base}${item.contentUrl}`;
+  // Only a web address is loaded from elsewhere (the server sends no other kind).
+  const remote = String(item?.remoteUrl || '');
+  return /^https?:\/\//i.test(remote) ? remote : '';
+}
+
+/** A file viewer gallery item for a media item. */
+export function mediaViewerItem(item, base = '') {
+  return {
+    key: `media:${item.id}`,
+    source: 'upload',
+    href: mediaHref(item, base),
+    name: String(item?.name || item?.alt || MEDIA_TEXT.untitled),
+    mime: String(item?.mime || (item?.mediaKind === 'video' ? 'video/mp4' : item?.mediaKind === 'image' ? 'image/png' : '')),
+    size: Number.isFinite(item?.sizeBytes) ? item.sizeBytes : 0,
+    media: item,
+  };
+}
+
+export function formatMediaDate(timestamp, locale = undefined) {
+  const date = new Date(timestamp);
+  if (Number.isNaN(date.getTime())) return '';
+  return date.toLocaleString(locale, { year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' });
+}
+
+/** The caption line: session title · date · who · how often · archived. */
+export function mediaCaption(item, { locale } = {}) {
+  if (!item) return '';
+  const parts = [
+    String(item.conversationTitle || '').trim(),
+    formatMediaDate(item.timestamp, locale),
+    mediaSourceBadge(item) + (item.remoteUrl ? ` ${MEDIA_TEXT.remote}` : ''),
+  ];
+  if (Number(item.occurrences) > 1) parts.push(MEDIA_TEXT.inMessages(Number(item.occurrences)));
+  if (item.archived) parts.push(MEDIA_TEXT.archived);
+  return parts.filter(Boolean).join(' · ');
+}
+
+/** What "Copy path / Copy link" copies, or '' when there is nothing useful (uploads, data images). */
+export function mediaCopyTarget(item) {
+  if (item?.path) return { label: MEDIA_TEXT.copyPath, text: String(item.path) };
+  if (item?.remoteUrl) return { label: MEDIA_TEXT.copyLink, text: String(item.remoteUrl) };
+  return null;
+}
+
+/**
+ * The viewer gallery for a list of media items, open at `index`. `loadMore`
+ * resolves the next page of media items (or null); `actions` carries what
+ * the page does for "Open in session" and copying.
+ */
+export function mediaViewerGallery(items, index, {
+  base = '',
+  hasMore = false,
+  loadMore = null,
+  openInSession = null,
+  copyText = null,
+  locale,
+} = {}) {
+  const viewerItems = items.map((item) => mediaViewerItem(item, base));
+  return {
+    source: 'media',
+    items: viewerItems,
+    index,
+    hasMore: Boolean(hasMore && loadMore),
+    loadMore: loadMore
+      ? async () => {
+        const page = await loadMore();
+        return {
+          items: (page?.items || []).map((item) => mediaViewerItem(item, base)),
+          hasMore: Boolean(page?.hasMore),
+        };
+      }
+      : null,
+    describe(viewerItem) {
+      const item = viewerItem?.media;
+      if (!item) return null;
+      const actions = [];
+      if (typeof openInSession === 'function' && item.conversationId && item.messageId) {
+        actions.push({ id: 'open-in-session', label: MEDIA_TEXT.openInSession, run: () => openInSession(item) });
+      }
+      const copy = mediaCopyTarget(item);
+      if (copy && typeof copyText === 'function') {
+        actions.push({ id: 'copy-location', label: copy.label, run: () => copyText(copy.text) });
+      }
+      return { caption: mediaCaption(item, { locale }), actions };
+    },
+  };
+}