feat(opsserver,web): add real-time platform service log streaming to the dashboard

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@serve.zone/onebox',
-  version: '1.18.4',
+  version: '1.19.0',
   description: 'Self-hosted container platform with automatic SSL and DNS - a mini Heroku for single servers'
 }

ts_web/appstate.ts

@@ -961,3 +961,73 @@ const startAutoRefresh = () => {
 uiStatePart.select((s) => s).subscribe(() => startAutoRefresh());
 loginStatePart.select((s) => s).subscribe(() => startAutoRefresh());
 startAutoRefresh();
+
+// ============================================================================
+// TypedSocket — real-time server push (logs, events)
+// ============================================================================
+
+let socketClient: InstanceType<typeof plugins.typedsocket.TypedSocket> | null = null;
+const socketRouter = new plugins.domtools.plugins.typedrequest.TypedRouter();
+
+// Handle server-pushed platform service log entries
+socketRouter.addTypedHandler(
+  new plugins.domtools.plugins.typedrequest.TypedHandler<interfaces.requests.IReq_PushPlatformServiceLog>(
+    'pushPlatformServiceLog',
+    async (dataArg) => {
+      const state = servicesStatePart.getState();
+      const entry: interfaces.data.ILogEntry = {
+        id: state.currentPlatformServiceLogs.length,
+        serviceId: 0,
+        timestamp: new Date(dataArg.entry.timestamp).getTime(),
+        message: dataArg.entry.message,
+        level: dataArg.entry.level as 'info' | 'warn' | 'error' | 'debug',
+        source: 'stdout',
+      };
+      const updated = [...state.currentPlatformServiceLogs, entry];
+      // Cap at 2000 entries
+      if (updated.length > 2000) {
+        updated.splice(0, updated.length - 2000);
+      }
+      servicesStatePart.setState({
+        ...state,
+        currentPlatformServiceLogs: updated,
+      });
+      return {};
+    },
+  ),
+);
+
+async function connectSocket() {
+  if (socketClient) return;
+  try {
+    socketClient = await plugins.typedsocket.TypedSocket.createClient(
+      socketRouter,
+      plugins.typedsocket.TypedSocket.useWindowLocationOriginUrl(),
+    );
+    await socketClient.setTag('role', 'ops_dashboard');
+    console.log('TypedSocket dashboard connection established');
+  } catch (err) {
+    console.error('TypedSocket connection failed:', err);
+    socketClient = null;
+  }
+}
+
+async function disconnectSocket() {
+  if (socketClient) {
+    try {
+      await socketClient.disconnect();
+    } catch {
+      // ignore disconnect errors
+    }
+    socketClient = null;
+  }
+}
+
+// Connect socket when logged in, disconnect when logged out
+loginStatePart.select((s) => s).subscribe((loginState) => {
+  if (loginState.isLoggedIn) {
+    connectSocket();
+  } else {
+    disconnectSocket();
+  }
+});

ts_web/elements/ob-view-services.ts

@@ -222,9 +222,20 @@ export class ObViewServices extends DeesElement {
       domain: s.domain || null,
       status: mapStatus(s.status),
     }));
+    const displayStatus = (status: string) => {
+      switch (status) {
+        case 'running': return 'Running';
+        case 'stopped': return 'Stopped';
+        case 'starting': return 'Starting...';
+        case 'stopping': return 'Stopping...';
+        case 'failed': return 'Failed';
+        case 'not-deployed': return 'Not Deployed';
+        default: return status;
+      }
+    };
     const mappedPlatformServices = this.servicesState.platformServices.map((ps) => ({
       name: ps.displayName,
-      status: ps.status === 'running' ? `Running` : ps.status,
+      status: displayStatus(ps.status),
       running: ps.status === 'running',
       type: ps.type,
     }));
@@ -384,14 +395,36 @@ export class ObViewServices extends DeesElement {
       (ps) => ps.type === this.selectedPlatformType,
     );
     const stats = this.servicesState.currentPlatformServiceStats;
-    const metrics = stats
-      ? {
-          cpu: Math.round(stats.cpuPercent),
-          memory: Math.round(stats.memoryPercent),
-          storage: 0,
-          connections: 0,
-        }
-      : undefined;
+    const metrics = {
+      cpu: stats ? Math.round(stats.cpuPercent) : 0,
+      memory: stats ? Math.round(stats.memoryPercent) : 0,
+      storage: 0,
+      connections: undefined as number | undefined,
+    };
+
+    // Real service info per platform type
+    const serviceInfo: Record<string, { host: string; port: number; version: string; config: Record<string, any> }> = {
+      mongodb: { host: 'onebox-mongodb', port: 27017, version: '4.4', config: { engine: 'WiredTiger', authEnabled: true } },
+      minio: { host: 'onebox-minio', port: 9000, version: 'latest', config: { consolePort: 9001, region: 'us-east-1' } },
+      clickhouse: { host: 'onebox-clickhouse', port: 8123, version: 'latest', config: { nativePort: 9000, httpPort: 8123 } },
+      caddy: { host: 'onebox-caddy', port: 80, version: '2-alpine', config: { httpsPort: 443, adminApi: 2019 } },
+    };
+    const info = platformService
+      ? serviceInfo[platformService.type] || { host: 'unknown', port: 0, version: '', config: {} }
+      : { host: '', port: 0, version: '', config: {} };
+
+    // Map backend status to catalog-compatible status
+    const mapPlatformStatus = (status: string): 'running' | 'stopped' | 'error' => {
+      switch (status) {
+        case 'running': return 'running';
+        case 'failed': return 'error';
+        case 'starting':
+        case 'stopping':
+        case 'stopped':
+        case 'not-deployed':
+        default: return 'stopped';
+      }
+    };
 
     return html`
       <ob-sectionheading>Platform Service</ob-sectionheading>
@@ -406,15 +439,11 @@ export class ObViewServices extends DeesElement {
               id: platformService.type,
               name: platformService.displayName,
               type: platformService.type,
-              status: platformService.status === 'running'
-                ? 'running'
-                : platformService.status === 'failed'
-                  ? 'error'
-                  : 'stopped',
-              version: '',
-              host: 'localhost',
-              port: 0,
-              config: {},
+              status: mapPlatformStatus(platformService.status),
+              version: info.version,
+              host: info.host,
+              port: info.port,
+              config: info.config,
               metrics,
             }
           : null}

ts_web/plugins.ts

@@ -5,9 +5,13 @@ import * as deesCatalog from '@design.estate/dees-catalog';
 // @serve.zone scope — side-effect import registers all sz-* custom elements
 import '@serve.zone/catalog';
 
+// TypedSocket for real-time server push (logs, events)
+import * as typedsocket from '@api.global/typedsocket';
+
 export {
   deesElement,
   deesCatalog,
+  typedsocket,
 };
 
 // domtools gives us TypedRequest, smartstate, smartrouter, and other utilities