@oar-sh/oar 0.9.0

package/server/public/app/status-store.mjs

@@ -0,0 +1,242 @@
+const DB_NAME = 'copilot-remote-client-status';
+const DB_VERSION = 1;
+const STORE_NAME = 'events';
+const MAX_EVENTS = 300;
+export const STATUS_EVENT_PAGE_SIZE = 40;
+
+let dbPromise = null;
+let memoryEvents = [];
+let nextMemoryId = 1;
+const listeners = new Set();
+let lastRelayOnline = null;
+let lastCliOnline = null;
+let diagnosticsInitialized = false;
+let nativeConsole = null;
+
+function emit(event) {
+  for (const listener of listeners) {
+    try {
+      listener(event);
+    } catch {
+      // Status listeners must not interfere with the application.
+    }
+  }
+}
+
+function sanitize(value, depth = 0) {
+  if (depth > 3) return '[Max depth reached]';
+  if (value instanceof Error) {
+    return { name: value.name, message: value.message, stack: value.stack || '' };
+  }
+  if (value === null || typeof value === 'string' || typeof value === 'boolean') return value;
+  if (typeof value === 'number') return Number.isFinite(value) ? value : String(value);
+  if (typeof value === 'bigint') return `${value}n`;
+  if (typeof value === 'function') return `[Function ${value.name || 'anonymous'}]`;
+  if (Array.isArray(value)) return value.slice(0, 20).map((item) => sanitize(item, depth + 1));
+  if (typeof value === 'object') {
+    const output = {};
+    for (const [key, item] of Object.entries(value).slice(0, 30)) {
+      output[String(key).slice(0, 80)] = sanitize(item, depth + 1);
+    }
+    return output;
+  }
+  return String(value);
+}
+
+function openDatabase() {
+  if (dbPromise) return dbPromise;
+  if (!globalThis.indexedDB) return Promise.resolve(null);
+  dbPromise = new Promise((resolve, reject) => {
+    const request = indexedDB.open(DB_NAME, DB_VERSION);
+    request.onerror = () => reject(request.error || new Error('Could not open client status storage'));
+    request.onupgradeneeded = () => {
+      const database = request.result;
+      if (!database.objectStoreNames.contains(STORE_NAME)) {
+        database.createObjectStore(STORE_NAME, { keyPath: 'id' });
+      }
+    };
+    request.onsuccess = () => resolve(request.result);
+  }).catch(() => null);
+  return dbPromise;
+}
+
+function memoryInsert(event) {
+  memoryEvents.push(event);
+  if (memoryEvents.length > MAX_EVENTS) memoryEvents = memoryEvents.slice(-MAX_EVENTS);
+}
+
+async function persistEvent(event) {
+  const database = await openDatabase();
+  if (!database) return;
+  await new Promise((resolve, reject) => {
+    const transaction = database.transaction(STORE_NAME, 'readwrite');
+    const store = transaction.objectStore(STORE_NAME);
+    store.put(event);
+    const cursorRequest = store.openCursor();
+    const ids = [];
+    cursorRequest.onsuccess = () => {
+      const cursor = cursorRequest.result;
+      if (!cursor) {
+        ids.slice(0, Math.max(0, ids.length - MAX_EVENTS)).forEach((id) => store.delete(id));
+        return;
+      }
+      ids.push(cursor.primaryKey);
+      cursor.continue();
+    };
+    transaction.oncomplete = resolve;
+    transaction.onerror = () => reject(transaction.error || new Error('Could not persist client status event'));
+  }).catch(() => {});
+}
+
+export async function loadStatusEvents() {
+  const database = await openDatabase();
+  if (!database) return memoryEvents.slice();
+  const events = await new Promise((resolve) => {
+    const request = database.transaction(STORE_NAME, 'readonly').objectStore(STORE_NAME).getAll();
+    request.onsuccess = () => resolve(Array.isArray(request.result) ? request.result : []);
+    request.onerror = () => resolve([]);
+  });
+  return events.sort((a, b) => Number(a.timestamp || 0) - Number(b.timestamp || 0)).slice(-MAX_EVENTS);
+}
+
+function compareStatusEvents(left, right) {
+  const timestampDelta = Number(left?.timestamp || 0) - Number(right?.timestamp || 0);
+  if (timestampDelta !== 0) return timestampDelta;
+  return String(left?.id || '').localeCompare(String(right?.id || ''));
+}
+
+export function mergeStatusEvents(existing = [], incoming = []) {
+  const merged = new Map();
+  for (const event of [...existing, ...incoming]) {
+    const id = String(event?.id || '').trim();
+    if (!id) continue;
+    merged.set(id, event);
+  }
+  return Array.from(merged.values()).sort(compareStatusEvents);
+}
+
+export async function loadStatusEventPage({ before = null, limit = STATUS_EVENT_PAGE_SIZE } = {}) {
+  const events = await loadStatusEvents();
+  const cursorTimestamp = Number(before?.timestamp || 0);
+  const cursorId = String(before?.id || '');
+  const eligible = before
+    ? events.filter((event) => (
+      Number(event.timestamp || 0) < cursorTimestamp
+      || (Number(event.timestamp || 0) === cursorTimestamp && String(event.id || '').localeCompare(cursorId) < 0)
+    ))
+    : events;
+  const pageSize = Math.max(1, Math.min(STATUS_EVENT_PAGE_SIZE, Number(limit) || STATUS_EVENT_PAGE_SIZE));
+  const items = eligible.slice(-pageSize).sort(compareStatusEvents);
+  const first = items[0] || null;
+  return {
+    items,
+    hasMore: eligible.length > items.length,
+    nextCursor: first ? { timestamp: first.timestamp, id: first.id } : null,
+  };
+}
+
+export async function clearStatusEvents() {
+  memoryEvents = [];
+  const database = await openDatabase();
+  if (database) {
+    await new Promise((resolve) => {
+      const request = database.transaction(STORE_NAME, 'readwrite').objectStore(STORE_NAME).clear();
+      request.onsuccess = resolve;
+      request.onerror = resolve;
+    });
+  }
+  emit({ type: 'status-cleared', timestamp: Date.now() });
+}
+
+export function subscribeStatusEvents(listener) {
+  if (typeof listener !== 'function') return () => {};
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}
+
+export function recordStatusEvent(type, details = {}) {
+  const event = {
+    id: `status-${Date.now()}-${nextMemoryId++}`,
+    timestamp: Date.now(),
+    type: String(type || 'event'),
+    details: sanitize(details),
+  };
+  memoryInsert(event);
+  void persistEvent(event);
+  emit(event);
+  return event;
+}
+
+export function publishStatusEvent(event) {
+  const id = String(event?.id || '').trim();
+  if (!id) return null;
+  const published = {
+    ...event,
+    id,
+    timestamp: Number(event.timestamp) || Date.now(),
+    type: String(event.type || 'event'),
+    source: String(event.source || 'server'),
+    details: sanitize(event.details || {}),
+  };
+  emit(published);
+  return published;
+}
+
+export function recordRelayLifecycleEvent(online) {
+  const nextOnline = !!online;
+  if (lastRelayOnline === nextOnline) return;
+  const previous = lastRelayOnline;
+  lastRelayOnline = nextOnline;
+  recordStatusEvent(nextOnline ? 'relay-connected' : 'relay-unreachable', {
+    previous,
+    online: nextOnline,
+  });
+}
+
+export function recordCliLifecycleEvent(online) {
+  const nextOnline = !!online;
+  if (lastCliOnline === nextOnline) return;
+  const previous = lastCliOnline;
+  lastCliOnline = nextOnline;
+  recordStatusEvent(nextOnline ? 'cli-connected' : 'cli-unreachable', {
+    previous,
+    online: nextOnline,
+  });
+}
+
+function formatConsoleArguments(args) {
+  return args.slice(0, 12).map((value) => sanitize(value));
+}
+
+export function initClientDiagnostics() {
+  if (diagnosticsInitialized) return;
+  diagnosticsInitialized = true;
+  nativeConsole = {
+    log: console.log.bind(console),
+    warn: console.warn.bind(console),
+    error: console.error.bind(console),
+  };
+  for (const level of ['log', 'warn', 'error']) {
+    const original = nativeConsole[level];
+    console[level] = (...args) => {
+      original(...args);
+      recordStatusEvent(`console-${level}`, { arguments: formatConsoleArguments(args) });
+    };
+  }
+  window.addEventListener('error', (event) => {
+    recordStatusEvent('client-error', {
+      message: event.message,
+      source: event.filename,
+      line: event.lineno,
+      column: event.colno,
+      error: event.error,
+    });
+  });
+  window.addEventListener('unhandledrejection', (event) => {
+    recordStatusEvent('unhandled-rejection', { reason: event.reason });
+  });
+}
+
+export function getNativeConsole() {
+  return nativeConsole || console;
+}

package/server/public/app/status-view.mjs

@@ -0,0 +1,315 @@
+import {
+  activeRuntimeSessionCount,
+  runtimeSessionBindingCount,
+  cliOnline,
+  currentConvId,
+  escHtml,
+  relayOnline,
+  sessionWorkerStates,
+  setCurrentConv,
+} from './store.js';
+import { createInfiniteLoader } from './infinite-loader.js';
+import { loadServerStatusEventPage } from './api-client.js';
+import {
+  clearStatusEvents,
+  loadStatusEventPage,
+  mergeStatusEvents,
+  subscribeStatusEvents,
+} from './status-store.mjs';
+
+export const STATUS_CONVERSATION_ID = '__client_status__';
+const STATUS_SCROLL_STORAGE_KEY = 'copilot_status_history_scroll';
+const STATUS_BOTTOM_THRESHOLD_PX = 24;
+
+let statusViewActive = false;
+let previousConversationId = '';
+let events = [];
+let unsubscribe = null;
+let statusViewGeneration = 0;
+let statusRenderFrame = 0;
+let statusScrollBound = false;
+let statusLinkBound = false;
+
+function isNearStatusBottom(host) {
+  return !!host && (host.scrollHeight - host.clientHeight - host.scrollTop) <= STATUS_BOTTOM_THRESHOLD_PX;
+}
+
+function formatValue(value) {
+  if (value === null || value === undefined) return '';
+  if (typeof value === 'string') return value;
+  if (typeof value === 'number' || typeof value === 'boolean') return String(value);
+  if (value?.message) return String(value.message);
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return String(value);
+  }
+}
+
+function formatStatusEvent(event) {
+  const details = event?.details || {};
+  const type = String(event?.type || 'event');
+  if (type.startsWith('console-')) {
+    return (details.arguments || []).map(formatValue).filter(Boolean).join(' ');
+  }
+  if (type === 'relay-connected') return 'Web relay connected';
+  if (type === 'relay-unreachable') return 'Web relay unreachable';
+  if (type === 'cli-connected') return 'CLI connected';
+  if (type === 'cli-unreachable') return 'CLI offline';
+  if (type === 'relay-reconnect-forced') return 'Web relay reconnect forced by watchdog';
+  if (type === 'foreground-recovery-skipped') {
+    return `Foreground recovery skipped, one already running (${details.reason || 'unknown'})`;
+  }
+  if (type === 'foreground-recovery-timeout') {
+    return `Foreground recovery timed out after ${Math.round(Number(details.timeoutMs || 0) / 1000)}s (${details.reason || 'unknown'})`;
+  }
+  if (type === 'push-dispatched') {
+    const failures = Number(details.failed || 0);
+    return `Push sent for ${details.eventType || 'event'} to ${Number(details.sent || 0)} device(s)${failures ? `, ${failures} failed` : ''}`;
+  }
+  if (type === 'push-suppressed') {
+    return `Push suppressed for ${details.eventType || 'event'} (a device is active)`;
+  }
+  if (type === 'push-subscription-pruned') {
+    return `Push subscription removed (${details.label || details.deviceId || 'unknown device'}${details.statusCode ? `, HTTP ${details.statusCode}` : ''}${details.failureCount ? `, ${details.failureCount} consecutive failures` : ''})`;
+  }
+  if (type === 'client-error') return `Error: ${formatValue(details.message || details.error)}`;
+  if (type === 'unhandled-rejection') return `Unhandled rejection: ${formatValue(details.reason)}`;
+  if (type === 'shared-access-opened') {
+    return `Shared conversation opened (${details.shareId || 'unknown share'}) from ${details.viewerIp || 'unknown'}`;
+  }
+  return formatValue(details);
+}
+
+function formatStatusEventHtml(event) {
+  const details = event?.details || {};
+  const type = String(event?.type || 'event');
+  if (type === 'shared-access-opened') {
+    const shareId = String(details.shareId || 'unknown share').trim() || 'unknown share';
+    const viewerIp = String(details.viewerIp || 'unknown').trim() || 'unknown';
+    const conversationId = String(details.conversationId || '').trim();
+    const conversationAttr = conversationId
+      ? ` data-conversation-id="${escHtml(conversationId)}"`
+      : '';
+    return `Shared conversation opened (<a href="#" class="status-share-link"${conversationAttr}>${escHtml(shareId)}</a>) from ${escHtml(viewerIp)}`;
+  }
+  return escHtml(formatStatusEvent(event));
+}
+
+function renderStatusHeader() {
+  if (!statusViewActive) return;
+  const title = document.getElementById('chat-title');
+  const metadata = document.getElementById('chat-title-cwd');
+  const usage = document.getElementById('chat-title-session-usage');
+  if (title) {
+    title.innerHTML = `Web Relay Status: <span class="${relayOnline ? 'status-online' : 'status-offline'}">${relayOnline ? 'Reachable' : 'Unreachable'}</span> | CLI: <span class="${cliOnline ? 'status-online' : 'status-offline'}">${cliOnline ? 'Online' : 'Offline'}</span>`;
+  }
+  if (metadata) {
+    const allWorkers = Array.from(sessionWorkerStates.values());
+    const assignedOnline = Number(activeRuntimeSessionCount || 0);
+    const onlineTotal = allWorkers.reduce((count, worker) => {
+      const status = String(worker?.status || '').trim().toLowerCase();
+      return count + ((status === 'starting' || status === 'ready' || status === 'processing') ? 1 : 0);
+    }, 0);
+    const unassignedOnline = Math.max(0, onlineTotal - assignedOnline);
+    metadata.textContent = `Workers online: ${assignedOnline}${unassignedOnline ? ` (+${unassignedOnline} unassigned)` : ''} (total: ${sessionWorkerStates.size}) | Active runtime sessions: ${assignedOnline} | Total session bindings: ${Number(runtimeSessionBindingCount || 0)}`;
+    metadata.hidden = false;
+  }
+  if (usage) {
+    usage.textContent = '';
+    usage.hidden = true;
+  }
+  const primary = document.getElementById('chat-title-primary');
+  if (primary && !document.getElementById('clear-status-events')) {
+    const clearButton = document.createElement('button');
+    clearButton.id = 'clear-status-events';
+    clearButton.type = 'button';
+    clearButton.textContent = 'Clear local client logs';
+    clearButton.title = 'Server status events are retained';
+    clearButton.addEventListener('click', async () => {
+      await clearStatusEvents();
+      events = events.filter((event) => event?.source === 'server');
+      localStorage.removeItem(STATUS_SCROLL_STORAGE_KEY);
+      await refreshStatusEvents(statusViewGeneration);
+    });
+    primary.append(clearButton);
+  }
+}
+
+function renderStatusView({ prepend = false, restoreScrollTop = null } = {}) {
+  if (!statusViewActive) return;
+  const host = document.getElementById('messages');
+  if (!host) return;
+  const previousHeight = host.scrollHeight;
+  const previousTop = host.scrollTop;
+  const followBottom = isNearStatusBottom(host);
+  renderStatusHeader();
+  const rows = events.map((event) => `
+    <div class="status-event">
+      <time>${new Date(Number(event.timestamp || 0)).toLocaleString()}</time>
+      <span class="status-event-source">${escHtml(String(event.source || 'client'))}</span>
+      <code>${formatStatusEventHtml(event)}</code>
+    </div>
+  `).join('');
+  host.innerHTML = `
+    <section class="status-view" aria-live="polite">
+      <div class="status-events">${rows || '<p class="status-empty">No status events recorded.</p>'}</div>
+    </section>
+  `;
+  if (Number.isFinite(restoreScrollTop)) {
+    host.scrollTop = Math.max(0, restoreScrollTop);
+  } else if (prepend) {
+    host.scrollTop = Math.max(0, previousTop + host.scrollHeight - previousHeight);
+  } else if (followBottom) {
+    host.scrollTop = host.scrollHeight;
+  } else {
+    host.scrollTop = previousTop;
+  }
+}
+
+function scheduleStatusHistoryBoundaryCheck() {
+  if (statusRenderFrame) return;
+  statusRenderFrame = requestAnimationFrame(() => {
+    statusRenderFrame = 0;
+    if (!statusViewActive) return;
+    const host = document.getElementById('messages');
+    if (host) void statusHistoryLoader.handleBoundaryDistance(host.scrollTop);
+  });
+}
+
+function emptyStatusEventPage() {
+  return {
+    items: [],
+    hasMore: false,
+    nextCursor: null,
+  };
+}
+
+function statusTimelineCursor(clientPage, serverPage) {
+  return {
+    client: clientPage.nextCursor,
+    clientExhausted: !clientPage.hasMore,
+    server: serverPage.nextCursor,
+    serverExhausted: !serverPage.hasMore,
+  };
+}
+
+const statusHistoryLoader = createInfiniteLoader({
+  fetchPage: async (cursor = {}) => {
+    const [clientPage, serverPage] = await Promise.all([
+      cursor.clientExhausted ? emptyStatusEventPage() : loadStatusEventPage({ before: cursor.client }),
+      cursor.serverExhausted ? emptyStatusEventPage() : loadServerStatusEventPage({ before: cursor.server }),
+    ]);
+    return {
+      items: mergeStatusEvents(clientPage.items, serverPage.items),
+      hasMore: clientPage.hasMore || serverPage.hasMore,
+      nextCursor: statusTimelineCursor(clientPage, serverPage),
+    };
+  },
+  applyPage: async (page) => {
+    events = mergeStatusEvents(events, page.items);
+    renderStatusView({ prepend: true });
+    scheduleStatusHistoryBoundaryCheck();
+  },
+});
+
+async function refreshStatusEvents(generation) {
+  const [clientPage, serverPage] = await Promise.all([
+    loadStatusEventPage(),
+    loadServerStatusEventPage(),
+  ]);
+  if (!statusViewActive || generation !== statusViewGeneration) return false;
+  events = mergeStatusEvents(events, [...clientPage.items, ...serverPage.items]);
+  statusHistoryLoader.reset({
+    hasMore: clientPage.hasMore || serverPage.hasMore,
+    nextCursor: statusTimelineCursor(clientPage, serverPage),
+  });
+  const savedScrollValue = localStorage.getItem(STATUS_SCROLL_STORAGE_KEY);
+  const savedScrollTop = savedScrollValue === null ? null : Number(savedScrollValue);
+  renderStatusView({ restoreScrollTop: Number.isFinite(savedScrollTop) ? savedScrollTop : null });
+  scheduleStatusHistoryBoundaryCheck();
+  return true;
+}
+
+function initStatusScrollPersistence() {
+  if (statusScrollBound) return;
+  statusScrollBound = true;
+  document.getElementById('messages')?.addEventListener('scroll', () => {
+    if (!statusViewActive) return;
+    const host = document.getElementById('messages');
+    if (!host) return;
+    localStorage.setItem(STATUS_SCROLL_STORAGE_KEY, String(Math.max(0, host.scrollTop)));
+    scheduleStatusHistoryBoundaryCheck();
+  }, { passive: true });
+}
+
+function initStatusEventLinkActions() {
+  if (statusLinkBound) return;
+  statusLinkBound = true;
+  document.getElementById('messages')?.addEventListener('click', async (event) => {
+    const target = event.target instanceof Element ? event.target.closest('.status-share-link') : null;
+    if (!target) return;
+    event.preventDefault();
+    const conversationId = String(target.getAttribute('data-conversation-id') || '').trim();
+    if (!conversationId) return;
+    leaveStatusView();
+    await window.openConversation?.(conversationId, { restoreScroll: true });
+  });
+}
+
+export function isStatusViewActive() {
+  return statusViewActive;
+}
+
+export function leaveStatusView() {
+  const wasActive = statusViewActive;
+  statusViewGeneration += 1;
+  statusViewActive = false;
+  document.body.classList.remove('status-view-active');
+  document.getElementById('input-area')?.removeAttribute('hidden');
+  document.getElementById('pending-question-banner')?.removeAttribute('hidden');
+  document.getElementById('clear-status-events')?.remove();
+  const metadata = document.getElementById('chat-title-cwd');
+  if (metadata) {
+    metadata.textContent = '';
+    metadata.hidden = true;
+  }
+  const usage = document.getElementById('chat-title-session-usage');
+  if (usage) {
+    usage.textContent = '';
+    usage.hidden = true;
+  }
+  unsubscribe?.();
+  unsubscribe = null;
+  window.renderConvList?.();
+  return wasActive;
+}
+
+export async function toggleStatusView() {
+  if (statusViewActive) {
+    leaveStatusView();
+    const restoreId = previousConversationId;
+    previousConversationId = '';
+    if (restoreId) await window.openConversation?.(restoreId, { restoreScroll: true });
+    return;
+  }
+  previousConversationId = String(currentConvId || '').trim();
+  const generation = ++statusViewGeneration;
+  statusViewActive = true;
+  setCurrentConv(null);
+  window.renderConvList?.();
+  if (previousConversationId) localStorage.setItem('copilot_last_conv', previousConversationId);
+  document.body.classList.add('status-view-active');
+  renderStatusHeader();
+  document.getElementById('pending-question-banner')?.setAttribute('hidden', '');
+  document.getElementById('input-area')?.setAttribute('hidden', '');
+  initStatusScrollPersistence();
+  initStatusEventLinkActions();
+  unsubscribe = subscribeStatusEvents((event) => {
+    events = mergeStatusEvents(events, [event]);
+    renderStatusView();
+  });
+  if (!await refreshStatusEvents(generation)) return;
+  document.getElementById('sidebar')?.classList.remove('open');
+  document.getElementById('sidebar-overlay')?.classList.remove('visible');
+}