insforge 1.2.10 → 1.3.0

package/frontend/src/features/storage/{page → pages}/StoragePage.tsx

@@ -25,13 +25,6 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from '@/components';
-import {
-  DataUpdatePayload,
-  DataUpdateResourceType,
-  ServerEvents,
-  SocketMessage,
-  useSocket,
-} from '@/lib/contexts/SocketContext';
 
 interface BucketFormState {
   mode: 'create' | 'edit';
@@ -53,15 +46,13 @@ export default function StoragePage() {
     name: null,
     isPublic: false,
   });
+  const queryClient = useQueryClient();
   const { confirm, confirmDialogProps } = useConfirm();
   const { showToast } = useToast();
   const { showUploadToast, updateUploadProgress, cancelUpload } = useUploadToast();
-  const queryClient = useQueryClient();
   const fileInputRef = useRef<HTMLInputElement>(null);
   const uploadAbortControllerRef = useRef<AbortController | null>(null);
 
-  const { socket, isConnected } = useSocket();
-
   const {
     buckets,
     isLoadingBuckets: isLoading,
@@ -80,25 +71,6 @@ export default function StoragePage() {
     return bucketStats || {};
   }, [bucketStats]);
 
-  useEffect(() => {
-    if (!socket || !isConnected) {
-      return;
-    }
-
-    const handleDataUpdate = (message: SocketMessage<DataUpdatePayload>) => {
-      if (message.payload?.resource === DataUpdateResourceType.BUCKETS) {
-        // Invalidate all buckets queries
-        void queryClient.invalidateQueries({ queryKey: ['storage'] });
-      }
-    };
-
-    socket.on(ServerEvents.DATA_UPDATE, handleDataUpdate);
-
-    return () => {
-      socket.off(ServerEvents.DATA_UPDATE, handleDataUpdate);
-    };
-  }, [socket, isConnected, queryClient]);
-
   // Auto-select first bucket
   useEffect(() => {
     if (buckets.length && !selectedBucket) {

package/frontend/src/features/visualizer/components/SchemaVisualizer.tsx

@@ -15,7 +15,7 @@ import '@xyflow/react/dist/style.css';
 import { TableNode } from './TableNode';
 import { AuthNode } from './AuthNode';
 import { BucketNode } from './BucketNode';
-import { useTables } from '@/features/database/hooks/useTables';
+import { useAllTableSchemas } from '@/features/database/hooks/useTables';
 import { useTheme } from '@/lib/contexts/ThemeContext';
 import {
   AppMetadataSchema,
@@ -198,8 +198,8 @@ export function SchemaVisualizer({
 }: SchemaVisualizerProps) {
   const { resolvedTheme } = useTheme();
 
-  // Fetch all table schemas only if external schemas are not provided
-  const { allSchemas, isLoadingSchemas } = useTables();
+  // Fetch all table schemas (only when external schemas are not provided)
+  const { allSchemas, isLoading: isLoadingSchemas } = useAllTableSchemas(!externalSchemas);
 
   // Use external schemas if provided, otherwise use fetched schemas
   const tables = externalSchemas || allSchemas;

package/frontend/src/features/visualizer/{page → pages}/VisualizerPage.tsx

@@ -1,22 +1,11 @@
-import { useQueryClient } from '@tanstack/react-query';
 import { RefreshCw } from 'lucide-react';
-import { useCallback, useEffect } from 'react';
+import { useCallback } from 'react';
 import { useMetadata } from '@/lib/hooks/useMetadata';
 import { useUsers } from '@/features/auth/hooks/useUsers';
 import { SchemaVisualizer, VisualizerSkeleton } from '../components';
 import { Alert, AlertDescription, Button } from '@/components';
-import {
-  useSocket,
-  ServerEvents,
-  DataUpdatePayload,
-  DataUpdateResourceType,
-  SocketMessage,
-} from '@/lib/contexts/SocketContext';
 
 const VisualizerPage = () => {
-  const { socket, isConnected } = useSocket();
-  const queryClient = useQueryClient();
-
   const {
     metadata,
     isLoading: metadataLoading,
@@ -38,29 +27,6 @@ const VisualizerPage = () => {
     void refetchUserStats();
   }, [refetchMetadata, refetchUserStats]);
 
-  // Listen for schema change events
-  useEffect(() => {
-    if (!socket || !isConnected) {
-      return;
-    }
-
-    const handleDataUpdate = (message: SocketMessage<DataUpdatePayload>) => {
-      if (
-        message.payload?.resource === DataUpdateResourceType.DATABASE ||
-        message.payload?.resource === DataUpdateResourceType.BUCKETS
-      ) {
-        // Invalidate all metadata-related queries
-        void queryClient.invalidateQueries({ queryKey: ['metadata'] });
-      }
-    };
-
-    socket.on(ServerEvents.DATA_UPDATE, handleDataUpdate);
-
-    return () => {
-      socket.off(ServerEvents.DATA_UPDATE, handleDataUpdate);
-    };
-  }, [socket, isConnected, queryClient]);
-
   if (isLoading) {
     return <VisualizerSkeleton />;
   }

package/frontend/src/lib/contexts/SocketContext.tsx

@@ -2,6 +2,7 @@ import {
   createContext,
   useContext,
   useEffect,
+  useEffectEvent,
   useRef,
   useState,
   useCallback,
@@ -9,8 +10,12 @@ import {
   useMemo,
 } from 'react';
 import { io, Socket } from 'socket.io-client';
+import { useQueryClient } from '@tanstack/react-query';
 import { apiClient } from '@/lib/api/client';
 import { useAuth } from '@/lib/contexts/AuthContext';
+import { postMessageToParent } from '@/lib/utils/cloudMessaging';
+import type { SocketMessage } from '@insforge/shared-schemas';
+import { useMcpUsage } from '@/features/logs/hooks/useMcpUsage';
 
 // ============================================================================
 // Types & Enums
@@ -25,46 +30,21 @@ export enum ServerEvents {
   MCP_CONNECTED = 'mcp:connected',
 }
 
-/**
- * Client-to-server event types
- */
-export enum ClientEvents {
-  SUBSCRIBE = 'subscribe',
-  UNSUBSCRIBE = 'unsubscribe',
-}
-
-/**
- * Base message structure for all socket communications
- */
-export interface SocketMessage<T = unknown> {
-  type: string;
-  payload?: T;
-  timestamp: number;
-  id?: string;
-}
-
 // ============================================================================
 // Payload Types
 // ============================================================================
 
-export interface NotificationPayload {
-  level: 'info' | 'warning' | 'error' | 'success';
-  title: string;
-  message: string;
-}
-
 export enum DataUpdateResourceType {
   DATABASE = 'database',
   USERS = 'users',
-  RECORDS = 'records',
   BUCKETS = 'buckets',
   FUNCTIONS = 'functions',
+  REALTIME = 'realtime',
 }
 
-export interface DataUpdatePayload {
-  resource: DataUpdateResourceType;
-  action: 'created' | 'updated' | 'deleted';
-  data: unknown;
+export interface DatabaseResourceUpdate {
+  type: 'tables' | 'table' | 'records' | 'index' | 'trigger' | 'policy' | 'function' | 'extension';
+  name?: string;
 }
 
 // ============================================================================
@@ -80,9 +60,6 @@ interface SocketState {
 interface SocketActions {
   connect: (token: string | null) => void;
   disconnect: () => void;
-  subscribe: (channel: string, filters?: Record<string, unknown>) => void;
-  unsubscribe: (channel: string) => void;
-  emit: (event: ClientEvents, data?: unknown) => void;
 }
 
 interface SocketContextValue extends SocketState, SocketActions {
@@ -105,6 +82,9 @@ interface SocketProviderProps {
 export function SocketProvider({ children }: SocketProviderProps) {
   // Get authentication state
   const { isAuthenticated } = useAuth();
+  const queryClient = useQueryClient();
+  const { recordsCount: mcpUsageCount } = useMcpUsage();
+
   // State
   const [state, setState] = useState<SocketState>({
     isConnected: false,
@@ -114,7 +94,6 @@ export function SocketProvider({ children }: SocketProviderProps) {
 
   // Refs
   const socketRef = useRef<Socket | null>(null);
-  const subscriptionsRef = useRef<Set<string>>(new Set());
 
   /**
    * Update state helper
@@ -167,11 +146,6 @@ export function SocketProvider({ children }: SocketProviderProps) {
           isConnected: true,
           connectionError: null,
         });
-
-        // Re-subscribe to channels after reconnection
-        subscriptionsRef.current.forEach((channel) => {
-          socket.emit(ClientEvents.SUBSCRIBE, { channel });
-        });
       });
 
       return socket;
@@ -219,41 +193,8 @@ export function SocketProvider({ children }: SocketProviderProps) {
       connectionError: null,
       socketId: null,
     });
-
-    subscriptionsRef.current.clear();
   }, [updateState]);
 
-  /**
-   * Subscribe to a channel
-   */
-  const subscribe = useCallback((channel: string, filters?: Record<string, unknown>) => {
-    if (!socketRef.current?.connected) {
-      return;
-    }
-
-    socketRef.current.emit(ClientEvents.SUBSCRIBE, { channel, filters });
-    subscriptionsRef.current.add(channel);
-  }, []);
-
-  /**
-   * Unsubscribe from a channel
-   */
-  const unsubscribe = useCallback((channel: string) => {
-    if (!socketRef.current?.connected) {
-      return;
-    }
-
-    socketRef.current.emit(ClientEvents.UNSUBSCRIBE, { channel });
-    subscriptionsRef.current.delete(channel);
-  }, []);
-
-  /**
-   * Emit event to server
-   */
-  const emit = useCallback((event: ClientEvents, data?: unknown) => {
-    socketRef.current?.emit(event, data);
-  }, []);
-
   // Monitor authentication state and token changes
   useEffect(() => {
     const token = apiClient.getToken();
@@ -274,6 +215,112 @@ export function SocketProvider({ children }: SocketProviderProps) {
     };
   }, [disconnect]);
 
+  // Send onboarding success only on first MCP connection
+  const onMcpConnectedSuccess = useEffectEvent(() => {
+    if (mcpUsageCount === 0) {
+      postMessageToParent({ type: 'ONBOARDING_SUCCESS' });
+    }
+  });
+
+  // Register business event handlers when socket is connected
+  useEffect(() => {
+    const socket = socketRef.current;
+    if (!socket || !state.isConnected) {
+      return;
+    }
+
+    // Handle DATA_UPDATE events - invalidate relevant queries
+    const handleDataUpdate = (message: SocketMessage) => {
+      const resource = message.resource as DataUpdateResourceType;
+
+      switch (resource) {
+        case DataUpdateResourceType.DATABASE: {
+          const { changes } = (message.data ?? {}) as { changes?: DatabaseResourceUpdate[] };
+
+          if (!changes || changes.length === 0) {
+            break;
+          }
+
+          // Invalidate specific queries based on resource types changed
+          for (const change of changes) {
+            switch (change.type) {
+              case 'tables':
+                // CREATE TABLE / DROP TABLE - affects table list
+                void queryClient.invalidateQueries({ queryKey: ['tables'] });
+                void queryClient.invalidateQueries({ queryKey: ['metadata', 'full'] });
+                break;
+              case 'table':
+                // ALTER TABLE / RENAME - affects specific table and list
+                void queryClient.invalidateQueries({ queryKey: ['tables'] });
+                if (change.name) {
+                  void queryClient.invalidateQueries({ queryKey: ['table', change.name] });
+                }
+                break;
+              case 'records':
+                // INSERT / UPDATE / DELETE - affects records for specific table
+                if (change.name) {
+                  void queryClient.invalidateQueries({ queryKey: ['records', change.name] });
+                }
+                break;
+              case 'index':
+                void queryClient.invalidateQueries({ queryKey: ['database', 'indexes'] });
+                break;
+              case 'trigger':
+                void queryClient.invalidateQueries({ queryKey: ['database', 'triggers'] });
+                break;
+              case 'policy':
+                void queryClient.invalidateQueries({ queryKey: ['database', 'policies'] });
+                break;
+              case 'function':
+                void queryClient.invalidateQueries({ queryKey: ['database', 'functions'] });
+                break;
+              case 'extension':
+                // Extensions are not supported yet
+                break;
+            }
+          }
+          break;
+        }
+        case DataUpdateResourceType.BUCKETS:
+          void queryClient.invalidateQueries({ queryKey: ['storage', 'buckets'] });
+          void queryClient.invalidateQueries({ queryKey: ['metadata', 'full'] });
+          break;
+        case DataUpdateResourceType.USERS:
+          void queryClient.invalidateQueries({ queryKey: ['users'] });
+          break;
+        case DataUpdateResourceType.FUNCTIONS:
+          void queryClient.invalidateQueries({ queryKey: ['functions'] });
+          break;
+        case DataUpdateResourceType.REALTIME:
+          void queryClient.invalidateQueries({ queryKey: ['realtime'] });
+          break;
+      }
+    };
+
+    // Handle MCP_CONNECTED events
+    const handleMcpConnected = (message: SocketMessage) => {
+      void queryClient.invalidateQueries({ queryKey: ['mcp-usage'] });
+
+      // Notify parent window (for cloud onboarding)
+      postMessageToParent({
+        type: 'MCP_CONNECTION_STATUS',
+        connected: true,
+        tool_name: message.tool_name as string,
+        timestamp: message.created_at as string,
+      });
+
+      onMcpConnectedSuccess();
+    };
+
+    socket.on(ServerEvents.DATA_UPDATE, handleDataUpdate);
+    socket.on(ServerEvents.MCP_CONNECTED, handleMcpConnected);
+
+    return () => {
+      socket.off(ServerEvents.DATA_UPDATE, handleDataUpdate);
+      socket.off(ServerEvents.MCP_CONNECTED, handleMcpConnected);
+    };
+  }, [state.isConnected, queryClient]);
+
   // Context value
   const contextValue = useMemo<SocketContextValue>(
     () => ({
@@ -283,11 +330,8 @@ export function SocketProvider({ children }: SocketProviderProps) {
       // Actions
       connect,
       disconnect,
-      subscribe,
-      unsubscribe,
-      emit,
     }),
-    [state, connect, disconnect, subscribe, unsubscribe, emit]
+    [state, connect, disconnect]
   );
 
   return <SocketContext.Provider value={contextValue}>{children}</SocketContext.Provider>;

package/frontend/src/lib/routing/AppRoutes.tsx

@@ -1,26 +1,30 @@
 import { Routes, Route, Navigate } from 'react-router-dom';
 import { RequireAuth } from '@/lib/routing/RequireAuth';
 import Layout from '@/components/layout/Layout';
-import LoginPage from '@/features/login/page/LoginPage';
-import CloudLoginPage from '@/features/login/page/CloudLoginPage';
-import DashboardPage from '@/features/dashboard/page/DashboardPage';
-import TablesPage from '@/features/database/page/TablesPage';
-import UsersPage from '@/features/auth/page/UsersPage';
-import AuthMethodsPage from '@/features/auth/page/AuthMethodsPage';
-import ConfigurationPage from '@/features/auth/page/ConfigurationPage';
-import LogsPage from '@/features/logs/page/LogsPage';
-import MCPLogsPage from '@/features/logs/page/MCPLogsPage';
-import StoragePage from '@/features/storage/page/StoragePage';
-import VisualizerPage from '@/features/visualizer/page/VisualizerPage';
-import FunctionsPage from '@/features/functions/page/FunctionsPage';
-import SecretsPage from '@/features/functions/page/SecretsPage';
-import AIPage from '@/features/ai/page/AIPage';
-import SQLEditorPage from '@/features/database/page/SQLEditorPage';
-import IndexesPage from '@/features/database/page/IndexesPage';
-import DatabaseFunctionsPage from '@/features/database/page/FunctionsPage';
-import TriggersPage from '@/features/database/page/TriggersPage';
-import PoliciesPage from '@/features/database/page/PoliciesPage';
-import TemplatesPage from '@/features/database/page/TemplatesPage';
+import LoginPage from '@/features/login/pages/LoginPage';
+import CloudLoginPage from '@/features/login/pages/CloudLoginPage';
+import DashboardPage from '@/features/dashboard/pages/DashboardPage';
+import TablesPage from '@/features/database/pages/TablesPage';
+import UsersPage from '@/features/auth/pages/UsersPage';
+import AuthMethodsPage from '@/features/auth/pages/AuthMethodsPage';
+import ConfigurationPage from '@/features/auth/pages/ConfigurationPage';
+import LogsPage from '@/features/logs/pages/LogsPage';
+import MCPLogsPage from '@/features/logs/pages/MCPLogsPage';
+import StoragePage from '@/features/storage/pages/StoragePage';
+import VisualizerPage from '@/features/visualizer/pages/VisualizerPage';
+import FunctionsPage from '@/features/functions/pages/FunctionsPage';
+import SecretsPage from '@/features/functions/pages/SecretsPage';
+import AIPage from '@/features/ai/pages/AIPage';
+import RealtimeChannelsPage from '@/features/realtime/pages/RealtimeChannelsPage';
+import RealtimeMessagesPage from '@/features/realtime/pages/RealtimeMessagesPage';
+import RealtimePermissionsPage from '@/features/realtime/pages/RealtimePermissionsPage';
+import SQLEditorPage from '@/features/database/pages/SQLEditorPage';
+import IndexesPage from '@/features/database/pages/IndexesPage';
+import DatabaseFunctionsPage from '@/features/database/pages/FunctionsPage';
+import TriggersPage from '@/features/database/pages/TriggersPage';
+import PoliciesPage from '@/features/database/pages/PoliciesPage';
+import TemplatesPage from '@/features/database/pages/TemplatesPage';
+import AuditsPage from '@/features/logs/pages/AuditsPage';
 
 export function AppRoutes() {
   return (
@@ -64,6 +68,7 @@ export function AppRoutes() {
                   element={<Navigate to="/dashboard/logs/MCP" replace />}
                 />
                 <Route path="/dashboard/logs/MCP" element={<MCPLogsPage />} />
+                <Route path="/dashboard/logs/audits" element={<AuditsPage />} />
                 <Route path="/dashboard/logs/:source" element={<LogsPage />} />
                 <Route
                   path="/dashboard/functions"
@@ -73,6 +78,16 @@ export function AppRoutes() {
                 <Route path="/dashboard/functions/secrets" element={<SecretsPage />} />
                 <Route path="/dashboard/visualizer" element={<VisualizerPage />} />
                 <Route path="/dashboard/ai" element={<AIPage />} />
+                <Route
+                  path="/dashboard/realtime"
+                  element={<Navigate to="/dashboard/realtime/channels" replace />}
+                />
+                <Route path="/dashboard/realtime/channels" element={<RealtimeChannelsPage />} />
+                <Route path="/dashboard/realtime/messages" element={<RealtimeMessagesPage />} />
+                <Route
+                  path="/dashboard/realtime/permissions"
+                  element={<RealtimePermissionsPage />}
+                />
                 <Route path="*" element={<Navigate to="/dashboard" replace />} />
               </Routes>
             </Layout>

package/frontend/src/lib/utils/cloudMessaging.ts

@@ -1,6 +1,6 @@
 import { cloudEventSchema, CloudEvent } from '@insforge/shared-schemas';
 
-export function postMessageToParent(evt: CloudEvent, targetOrigin: string = '*') {
+export function postMessageToParent(evt: Record<string, unknown>, targetOrigin: string = '*') {
   if (typeof window === 'undefined') {
     return;
   }

package/frontend/src/lib/utils/menuItems.ts

@@ -5,6 +5,7 @@ import {
   Lock,
   HardDrive,
   Code2,
+  Radio,
   Sparkles,
   ChartLine,
   BookOpen,
@@ -139,6 +140,29 @@ export const staticMenuItems: PrimaryMenuItem[] = [
       },
     ],
   },
+  {
+    id: 'realtime',
+    label: 'Realtime',
+    href: '/dashboard/realtime',
+    icon: Radio,
+    secondaryMenu: [
+      {
+        id: 'channels',
+        label: 'Channels',
+        href: '/dashboard/realtime/channels',
+      },
+      {
+        id: 'messages',
+        label: 'Messages',
+        href: '/dashboard/realtime/messages',
+      },
+      {
+        id: 'permissions',
+        label: 'Permissions',
+        href: '/dashboard/realtime/permissions',
+      },
+    ],
+  },
   {
     id: 'ai',
     label: 'AI',

package/frontend/src/lib/utils/utils.ts

@@ -169,7 +169,7 @@ export const isIframe = () => {
 };
 
 /**
- * Formats a timestamp string to a human-readable format
+ * Formats a timestamp string to a human-readable format with time
  * Used consistently across the application for displaying timestamps
  * @param timestamp - ISO timestamp string
  * @returns Formatted date string (e.g., "Jan 15, 2025, 03:30 PM")
@@ -181,3 +181,16 @@ export function formatTime(timestamp: string): string {
   }
   return format(date, 'MMM dd, yyyy, hh:mm a');
 }
+
+/**
+ * Formats a timestamp string to a date-only format
+ * @param timestamp - ISO timestamp string
+ * @returns Formatted date string (e.g., "Jan 15, 2025")
+ */
+export function formatDate(timestamp: string): string {
+  const date = parseISO(timestamp);
+  if (!isValid(date)) {
+    return timestamp; // Return original if invalid
+  }
+  return format(date, 'MMM dd, yyyy');
+}

package/frontend/tsconfig.json

@@ -1,26 +1,26 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx",
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"],
-      "@insforge/shared-schemas": ["../shared-schemas/src/index.ts"],
-    }
-  },
-  "include": ["src", "src/vite-env.d.ts", "../shared-schemas"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"],
+      "@insforge/shared-schemas": ["../shared-schemas/src/index.ts"],
+    }
+  },
+  "include": ["src", "src/vite-env.d.ts", "../shared-schemas"],
+  "references": [{ "path": "./tsconfig.node.json" }]
 }

package/frontend/tsconfig.node.json

@@ -1,10 +1,10 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "skipLibCheck": true,
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true
-  },
-  "include": ["vite.config.ts"]
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
 }