@jungjaehoon/mama-os 0.32.3 → 0.34.0

package/public/viewer/src/modules/system.ts

@@ -0,0 +1,242 @@
+/**
+ * System views: Runtime and Connectors.
+ * @module modules/system
+ *
+ * Read-only truth, one source. Both views render `GET /api/runtime/status` and
+ * nothing else: no config read, no client-side model registry, no credential
+ * ever reaching the DOM. Editing daemon configuration from the browser is not a
+ * capability of this surface; setup is a CLI action.
+ */
+
+/* eslint-env browser */
+
+const RUNTIME_STATUS_ENDPOINT = '/api/runtime/status';
+
+/** Shown when the daemon booted without a health service. Never a fake score. */
+const HEALTH_UNAVAILABLE = 'unavailable';
+
+export type RuntimeBackend = 'claude' | 'codex' | 'cline';
+export type RuntimeConnectorState = 'connected' | 'disconnected' | 'unknown';
+
+export interface RuntimeConnectorStatus {
+  name: string;
+  enabled: boolean;
+  state: RuntimeConnectorState;
+}
+
+export interface RuntimeStatusSnapshot {
+  running: boolean;
+  backend: RuntimeBackend;
+  model: string;
+  startedAt: number;
+  health: { score: number; status: string } | null;
+  connectors: RuntimeConnectorStatus[];
+}
+
+export interface SystemViewOptions {
+  /** Test seam; defaults to fetching the authoritative endpoint. */
+  fetchStatus?: () => Promise<RuntimeStatusSnapshot>;
+}
+
+export function escapeHtml(value: unknown): string {
+  return String(value ?? '')
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
+async function defaultFetchStatus(): Promise<RuntimeStatusSnapshot> {
+  const response = await fetch(RUNTIME_STATUS_ENDPOINT);
+  if (!response.ok) {
+    throw new Error('HTTP ' + response.status);
+  }
+  return (await response.json()) as RuntimeStatusSnapshot;
+}
+
+function skeleton(rows: number): string {
+  let html = '<div class="mama-system-skeleton" aria-busy="true" aria-live="polite">';
+  for (let i = 0; i < rows; i++) {
+    html += '<div class="mama-system-skeleton-row"></div>';
+  }
+  html += '</div>';
+  return html;
+}
+
+/**
+ * Failure names the endpoint that failed and offers a retry. A System view that
+ * silently shows nothing is indistinguishable from a healthy empty runtime.
+ */
+function errorCard(error: unknown): string {
+  const detail = error instanceof Error ? error.message : String(error ?? 'Unknown error');
+  return (
+    '<div class="mama-system-error" role="alert">' +
+    '<p class="mama-system-error-title">Could not read ' +
+    escapeHtml(RUNTIME_STATUS_ENDPOINT) +
+    '</p>' +
+    '<p class="mama-system-error-detail">' +
+    escapeHtml(detail) +
+    '</p>' +
+    '<button type="button" class="mama-system-retry" data-retry>Retry</button>' +
+    '</div>'
+  );
+}
+
+function formatStartedAt(startedAt: number): string {
+  if (!Number.isFinite(startedAt) || startedAt <= 0) return 'unknown';
+  return new Date(startedAt).toLocaleString();
+}
+
+function formatUptime(startedAt: number): string {
+  if (!Number.isFinite(startedAt) || startedAt <= 0) return 'unknown';
+  const seconds = Math.max(0, Math.floor((Date.now() - startedAt) / 1000));
+  const days = Math.floor(seconds / 86400);
+  const hours = Math.floor((seconds % 86400) / 3600);
+  const minutes = Math.floor((seconds % 3600) / 60);
+  if (days > 0) return days + 'd ' + hours + 'h';
+  if (hours > 0) return hours + 'h ' + minutes + 'm';
+  return minutes + 'm';
+}
+
+function statTile(label: string, value: string, tone = 'neutral'): string {
+  return (
+    '<div class="mama-system-tile" data-tone="' +
+    escapeHtml(tone) +
+    '">' +
+    '<span class="mama-system-tile-label">' +
+    escapeHtml(label) +
+    '</span>' +
+    '<span class="mama-system-tile-value">' +
+    escapeHtml(value) +
+    '</span>' +
+    '</div>'
+  );
+}
+
+export function renderRuntimeSnapshot(snapshot: RuntimeStatusSnapshot): string {
+  const health = snapshot.health;
+  const healthValue = health ? health.status + ' - ' + health.score : HEALTH_UNAVAILABLE;
+  const healthTone = health
+    ? health.status === 'healthy'
+      ? 'ok'
+      : health.status === 'degraded'
+        ? 'warn'
+        : 'bad'
+    : 'muted';
+
+  return (
+    '<section class="mama-system-panel">' +
+    '<h2 class="mama-system-heading">Runtime</h2>' +
+    '<p class="mama-system-note">Reported by the running daemon; some fields reflect boot-time state. Configuration is edited via the CLI or the config file.</p>' +
+    '<div class="mama-system-tiles">' +
+    statTile('Daemon', snapshot.running ? 'running' : 'stopped', snapshot.running ? 'ok' : 'bad') +
+    statTile('Backend', snapshot.backend) +
+    statTile('Model', snapshot.model) +
+    statTile('Health', healthValue, healthTone) +
+    statTile('Uptime', formatUptime(snapshot.startedAt)) +
+    statTile('Started', formatStartedAt(snapshot.startedAt)) +
+    '</div>' +
+    '</section>'
+  );
+}
+
+const CONNECTOR_STATE_TONE: Record<RuntimeConnectorState, string> = {
+  connected: 'ok',
+  disconnected: 'muted',
+  unknown: 'warn',
+};
+
+/**
+ * What a connector state actually means. 'connected' is not a live probe: it
+ * says the connector registered when the daemon booted, so the chip carries the
+ * narrower claim rather than letting the word oversell itself.
+ */
+const CONNECTOR_STATE_TITLE: Record<RuntimeConnectorState, string> = {
+  connected: 'Registered at daemon boot',
+  disconnected: 'Disabled in config',
+  unknown: 'Enabled in config but not registered at boot',
+};
+
+export function renderConnectorsSnapshot(snapshot: RuntimeStatusSnapshot): string {
+  const connectors = snapshot.connectors ?? [];
+  if (connectors.length === 0) {
+    return (
+      '<section class="mama-system-panel">' +
+      '<h2 class="mama-system-heading">Connectors</h2>' +
+      '<div class="mama-system-empty">' +
+      '<p class="mama-system-empty-title">No connectors configured</p>' +
+      '<p class="mama-system-empty-detail">Add one from a terminal:</p>' +
+      '<code class="mama-system-code">mama connector add &lt;name&gt;</code>' +
+      '</div>' +
+      '</section>'
+    );
+  }
+
+  let rows = '';
+  for (const connector of connectors) {
+    rows +=
+      '<li class="mama-system-row" data-tone="' +
+      escapeHtml(CONNECTOR_STATE_TONE[connector.state] ?? 'muted') +
+      '">' +
+      '<span class="mama-system-dot"></span>' +
+      '<span class="mama-system-row-name">' +
+      escapeHtml(connector.name) +
+      '</span>' +
+      '<span class="mama-system-row-state" title="' +
+      escapeHtml(CONNECTOR_STATE_TITLE[connector.state] ?? 'State reported at daemon boot') +
+      '">' +
+      escapeHtml(connector.state) +
+      '</span>' +
+      (connector.enabled ? '' : '<span class="mama-system-badge">off</span>') +
+      '</li>';
+  }
+
+  return (
+    '<section class="mama-system-panel">' +
+    '<h2 class="mama-system-heading">Connectors</h2>' +
+    '<p class="mama-system-note">Read-only. Add or remove connectors with <code>mama connector add</code>.</p>' +
+    '<ul class="mama-system-list">' +
+    rows +
+    '</ul>' +
+    '</section>'
+  );
+}
+
+async function renderView(
+  container: HTMLElement | null,
+  options: SystemViewOptions,
+  toHtml: (snapshot: RuntimeStatusSnapshot) => string,
+  skeletonRows: number
+): Promise<void> {
+  if (!container) return;
+  const fetchStatus = options.fetchStatus ?? defaultFetchStatus;
+
+  container.innerHTML = skeleton(skeletonRows);
+  try {
+    const snapshot = await fetchStatus();
+    container.innerHTML = toHtml(snapshot);
+  } catch (error) {
+    container.innerHTML = errorCard(error);
+    const retry = container.querySelector('[data-retry]');
+    if (retry) {
+      retry.addEventListener('click', () => {
+        void renderView(container, options, toHtml, skeletonRows);
+      });
+    }
+  }
+}
+
+export function renderRuntimeView(
+  container: HTMLElement | null,
+  options: SystemViewOptions = {}
+): Promise<void> {
+  return renderView(container, options, renderRuntimeSnapshot, 3);
+}
+
+export function renderConnectorsView(
+  container: HTMLElement | null,
+  options: SystemViewOptions = {}
+): Promise<void> {
+  return renderView(container, options, renderConnectorsSnapshot, 5);
+}

package/public/viewer/src/utils/ui-commands.ts

@@ -26,15 +26,11 @@ type StoredPageContext = {
 let lastReportedPageContext: StoredPageContext | null = null;
 let lastPageContextPublishAt = 0;
 
+// The Viewer always reports into the one frontdoor channel. The per-chat
+// session override this used to read is gone with the Chat tab that wrote it:
+// nothing writes `mama_chat_session_id` any more, so reading it could only ever
+// return a stale value.
 function getViewerChannelId(): string {
-  try {
-    const sessionId = window.localStorage.getItem('mama_chat_session_id');
-    if (sessionId && !sessionId.startsWith('session_')) {
-      return sessionId;
-    }
-  } catch {
-    /* ignore */
-  }
   return VIEWER_FRONTDOOR_CHANNEL_ID;
 }
 

package/public/viewer/sw.js

@@ -1,25 +1,32 @@
 /**
- * @fileoverview Service Worker for MAMA Mobile PWA
- * @version 1.5.0
+ * @fileoverview Service Worker for the MAMA Viewer PWA
+ * @version 2.0.0
  *
  * Provides offline caching for static assets using cache-first strategy.
  */
 
 /* eslint-env serviceworker */
 
-const CACHE_NAME = 'mama-mobile-v1.6.1';
+// Bumped for the unified Viewer: the retired chat/feed/agents/dashboard/settings
+// modules no longer exist, so a client holding the old cache would keep serving
+// 404-shaped entries for them. A new cache name is what evicts them.
+const CACHE_NAME = 'mama-viewer-v2';
 const STATIC_ASSETS = [
   '/viewer',
   '/viewer/viewer.css',
   '/viewer/manifest.json',
   '/viewer/js/modules/graph.js',
-  '/viewer/js/modules/chat.js',
   '/viewer/js/modules/memory.js',
-  '/viewer/js/modules/dashboard.js',
-  '/viewer/js/modules/settings.js',
+  '/viewer/js/modules/wiki.js',
+  '/viewer/js/modules/system.js',
+  '/viewer/js/utils/debug-logger.js',
   '/viewer/js/utils/dom.js',
   '/viewer/js/utils/format.js',
   '/viewer/js/utils/api.js',
+  '/viewer/js/utils/markdown.js',
+  '/viewer/js/utils/ui-commands.js',
+  '/viewer/operator/operator.js',
+  '/viewer/operator/operator.css',
   '/viewer/icons/icon-192.png',
   '/viewer/icons/icon-512.png',
   '/viewer/icons/mama-icon.svg',
@@ -92,6 +99,32 @@ self.addEventListener('fetch', (event) => {
     return;
   }
 
+  // Network-first for the operator bundle. It ships under stable filenames
+  // (/viewer/operator/operator.js), so a cache-first hit would pin one build
+  // forever until CACHE_NAME changes. The cache stays the offline fallback.
+  // Must be checked before the generic '/viewer' prefix match below.
+  if (url.pathname.startsWith('/viewer/operator/')) {
+    event.respondWith(
+      fetch(request)
+        .then((response) => {
+          if (response.ok) {
+            const responseClone = response.clone();
+            // The write is held open by the event, not by respondWith: the
+            // response still returns immediately, but the worker may not be
+            // killed mid-put, which would leave a truncated cache entry.
+            event.waitUntil(
+              caches.open(CACHE_NAME).then((cache) => cache.put(request, responseClone))
+            );
+          }
+          return response;
+        })
+        .catch(() =>
+          caches.match(request).then((cachedResponse) => cachedResponse || caches.match('/viewer'))
+        )
+    );
+    return;
+  }
+
   // Cache-first for static assets
   if (STATIC_ASSETS.some((asset) => url.pathname.startsWith(asset.split('?')[0]))) {
     event.respondWith(
@@ -100,12 +133,13 @@ self.addEventListener('fetch', (event) => {
           return cachedResponse;
         }
         return fetch(request).then((response) => {
-          // Cache successful responses
+          // Cache successful responses. Same detached-put hazard as the
+          // operator branch above, so it is held open the same way.
           if (response.ok) {
             const responseClone = response.clone();
-            caches.open(CACHE_NAME).then((cache) => {
-              cache.put(request, responseClone);
-            });
+            event.waitUntil(
+              caches.open(CACHE_NAME).then((cache) => cache.put(request, responseClone))
+            );
           }
           return response;
         });