feat(router): add event relays administration page

.cursor/conduit-backend/docker-compose.yml

@@ -21,8 +21,32 @@ services:
       MONGO_INITDB_DATABASE: 'conduit'
       MONGO_INITDB_ROOT_USERNAME: 'conduit'
       MONGO_INITDB_ROOT_PASSWORD: 'pass'
+    entrypoint:
+      - bash
+      - -c
+      - |
+        cp /mongo-keyfile /tmp/keyfile
+        chmod 400 /tmp/keyfile
+        chown mongodb:mongodb /tmp/keyfile
+        exec docker-entrypoint.sh mongod --replSet rs0 --bind_ip_all --keyFile /tmp/keyfile
     volumes:
       - mongo:/data/db
+      - ./mongo/keyfile:/mongo-keyfile:ro
+
+  mongo-init-replica:
+    container_name: 'conduit-mongo-init'
+    image: 'docker.io/library/mongo:4.4.15'
+    restart: on-failure
+    network_mode: 'host'
+    depends_on:
+      - mongodb
+    environment:
+      MONGO_HOST: '127.0.0.1'
+      MONGO_INITDB_ROOT_USERNAME: 'conduit'
+      MONGO_INITDB_ROOT_PASSWORD: 'pass'
+    volumes:
+      - ./mongo/init-replica.sh:/init-replica.sh:ro
+    command: ['bash', '/init-replica.sh']
 
   redis:
     container_name: 'conduit-redis'
@@ -47,7 +71,7 @@ services:
       CLIENT_HTTP_PORT: '3000'
       CLIENT_SOCKET_PORT: '3001'
       __DEFAULT_HOST_URL: '${ADMIN_DEFAULT_HOST_URL:-http://localhost:3030}'
-      DB_CONN_URI: 'mongodb://conduit:pass@127.0.0.1:27017/conduit?authSource=admin'
+      DB_CONN_URI: 'mongodb://conduit:pass@127.0.0.1:27017/conduit?authSource=admin&replicaSet=rs0'
 
 volumes:
   mongo:

.cursor/conduit-backend/mongo/init-replica.sh

@@ -0,0 +1,20 @@
+#!/bin/bash
+set -euo pipefail
+HOST="${MONGO_HOST:-conduit-mongo}"
+USER="${MONGO_INITDB_ROOT_USERNAME:-conduit}"
+PASS="${MONGO_INITDB_ROOT_PASSWORD:-pass}"
+
+until mongo --host "$HOST" -u "$USER" -p "$PASS" --authenticationDatabase admin --quiet --eval 'db.adminCommand({ ping: 1 })' >/dev/null 2>&1; do
+  sleep 2
+done
+
+mongo --host "$HOST" -u "$USER" -p "$PASS" --authenticationDatabase admin --quiet --eval '
+  try {
+    rs.status();
+  } catch (err) {
+    rs.initiate({
+      _id: "rs0",
+      members: [{ _id: 0, host: "'"$HOST"':27017" }]
+    });
+  }
+'

.cursor/conduit-backend/mongo/keyfile

@@ -0,0 +1 @@
+conduit-dev-mongo-replica-keyfile-do-not-use-in-production-replace-me-before-any-real-deployment-0123456789abcdefghijklmnopqrstuvwxyz

package.json

@@ -9,6 +9,8 @@
     "start": "next start -p 8080",
     "lint": "eslint .",
     "test:semantic-colors": "node --experimental-strip-types --test src/lib/semantic-colors.test.ts src/lib/reactflow-edge-colors.test.ts",
+    "test:event-relays": "node --experimental-strip-types --test src/lib/event-relays/preview.test.ts",
+    "test:realtime": "node --experimental-strip-types --test src/lib/realtime/adminSocketUrl.test.ts src/lib/realtime/change-events.test.ts src/lib/realtime/connection-snippets.test.ts",
     "test:schema-fields": "node --experimental-strip-types --test src/lib/database/schema-field-definition.test.ts src/lib/database/system-schema-fields.test.ts",
     "build:docker": "docker build --platform linux/amd64 -t ghcr.io/conduitplatform/conduit-ui:latest .",
     "prepare": "husky",
@@ -80,6 +82,7 @@
     "recharts": "^3.8.1",
     "rehype-prism-plus": "^2.0.2",
     "server-only": "^0.0.1",
+    "socket.io-client": "^4.8.3",
     "tailwind-merge": "^3.4.0",
     "tailwindcss": "^4.2.2",
     "tailwindcss-animate": "^1.0.7",

src/app/(dashboard)/(modules)/database/settings/page.tsx

@@ -1,14 +1,19 @@
 import { Settings } from '@/components/database/settings/settings';
-import { getDatabaseSettings, getDatabaseType } from '@/lib/api/database';
+import {
+  getDatabaseRealtimeStatus,
+  getDatabaseSettings,
+  getDatabaseType,
+} from '@/lib/api/database';
 
 export default async function DatabaseSettingsPage() {
-  const [settingsResult, typeResult] = await Promise.allSettled([
-    getDatabaseSettings(),
-    getDatabaseType(),
-  ]);
+  const [settingsResult, typeResult, realtimeResult] = await Promise.allSettled(
+    [getDatabaseSettings(), getDatabaseType(), getDatabaseRealtimeStatus()]
+  );
 
   const databaseType =
     typeResult.status === 'fulfilled' ? typeResult.value.result : 'Unknown';
+  const realtimeStatus =
+    realtimeResult.status === 'fulfilled' ? realtimeResult.value : null;
 
   if (settingsResult.status === 'rejected') {
     return (
@@ -25,6 +30,10 @@ export default async function DatabaseSettingsPage() {
   }
 
   return (
-    <Settings data={settingsResult.value.config} databaseType={databaseType} />
+    <Settings
+      data={settingsResult.value.config}
+      databaseType={databaseType}
+      realtimeStatus={realtimeStatus}
+    />
   );
 }

src/app/(dashboard)/(modules)/router/event-relays/page.tsx

@@ -0,0 +1,32 @@
+import { getEventRelays, getRouterSettings } from '@/lib/api/router';
+import { EventRelayList } from '@/components/router/event-relays/event-relay-list';
+
+export default async function EventRelaysPage(props: {
+  searchParams: Promise<{
+    skip?: string;
+    limit?: string;
+    search?: string;
+  }>;
+}) {
+  const searchParams = await props.searchParams;
+  const skip = Number(searchParams.skip ?? 0);
+  const limit = Number(searchParams.limit ?? 10);
+  const [{ relays, count }, { config }] = await Promise.all([
+    getEventRelays({
+      skip,
+      limit,
+      search: searchParams.search,
+    }),
+    getRouterSettings(),
+  ]);
+
+  return (
+    <div className="p-6">
+      <EventRelayList
+        relays={relays}
+        count={count}
+        socketsEnabled={config.transports.sockets}
+      />
+    </div>
+  );
+}

src/app/(dashboard)/(modules)/router/page.tsx

@@ -1,5 +1,12 @@
 import React from 'react';
-import { BarChart3, Network, Route, Settings, Shield } from 'lucide-react';
+import {
+  BarChart3,
+  Network,
+  Radio,
+  Route,
+  Settings,
+  Shield,
+} from 'lucide-react';
 import { ModuleDashboard } from '@/components/dashboard/ModuleDashboard';
 import {
   getModuleStatus,
@@ -66,6 +73,12 @@ export default async function RouterDashboard() {
       icon: <Network className="h-4 w-4" />,
       href: '/router/vizualize',
     },
+    {
+      title: 'Event Relays',
+      description: 'Forward bus events to socket subscribers',
+      icon: <Radio className="h-4 w-4" />,
+      href: '/router/event-relays',
+    },
     {
       title: 'Settings',
       description: 'Router module configuration',

src/components/database/models/data-explorer/index.tsx

@@ -31,6 +31,8 @@ import {
 import { Badge } from '@/components/ui/badge';
 import { toast } from '@/lib/hooks/use-toast';
 import { deleteSchemaDocument } from '@/lib/api/database';
+import { useDatabaseLiveUpdates } from '@/lib/hooks/use-database-live-updates';
+import { LiveUpdatesStatus } from './live-updates-status';
 import {
   analyzeModelDataPermissions,
   getExtensionFieldNames,
@@ -74,6 +76,11 @@ export function DataExplorer({ schema, documents }: DataExplorerProps) {
     () => analyzeModelDataPermissions(schema),
     [schema]
   );
+  const liveEnabled = schema.modelOptions?.conduit?.realtime?.enabled === true;
+  const liveUpdates = useDatabaseLiveUpdates({
+    schemaName: schema.name,
+    enabled: liveEnabled,
+  });
 
   // Get schema fields for column definitions
   const schemaFields = React.useMemo(() => {
@@ -160,6 +167,7 @@ export function DataExplorer({ schema, documents }: DataExplorerProps) {
   };
 
   const handleRefresh = () => {
+    liveUpdates.consumePendingUpdates();
     router.refresh();
     toast({ title: 'Data refreshed' });
   };
@@ -185,6 +193,7 @@ export function DataExplorer({ schema, documents }: DataExplorerProps) {
   const handleDocumentSaved = () => {
     setSelectedDocument(null);
     setIsCreatingNew(false);
+    liveUpdates.consumePendingUpdates();
     router.refresh();
   };
 
@@ -372,9 +381,22 @@ export function DataExplorer({ schema, documents }: DataExplorerProps) {
               </TabsList>
             </Tabs>
 
+            <LiveUpdatesStatus
+              connectionState={liveUpdates.connectionState}
+              pendingUpdates={liveUpdates.pendingUpdates}
+              errorMessage={liveUpdates.errorMessage}
+              onApplyUpdates={handleRefresh}
+            />
+
             {/* Refresh */}
-            <Button variant="outline" size="sm" onClick={handleRefresh}>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={handleRefresh}
+              className="min-h-8"
+            >
               <RefreshCw className="w-4 h-4" />
+              <span className="sr-only">Refresh</span>
             </Button>
 
             {/* Create New */}