insforge 1.2.10 → 1.4.8

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/hooks/useMetadata.ts

@@ -22,7 +22,7 @@ export function useMetadata(options?: UseMetadataOptions) {
   return {
     metadata,
     auth: metadata?.auth,
-    tables: metadata?.database.tables?.filter((table) => table.tableName !== 'users') ?? [],
+    tables: metadata?.database.tables,
     storage: metadata?.storage,
     version: metadata?.version || 'Unknown',
     isLoading,
@@ -51,3 +51,47 @@ export function useApiKey(options?: UseMetadataOptions) {
     refetch,
   };
 }
+
+export function useDatabaseConnectionString(options?: UseMetadataOptions) {
+  const {
+    data: connectionData,
+    isLoading,
+    error,
+    refetch,
+  } = useQuery({
+    queryKey: ['metadata', 'databaseConnectionString'],
+    queryFn: () => metadataService.getDatabaseConnectionString(),
+    staleTime: 0,
+    gcTime: 0,
+    enabled: options?.enabled ?? true,
+  });
+
+  return {
+    connectionData,
+    isLoading,
+    error,
+    refetch,
+  };
+}
+
+export function useDatabasePassword(options?: UseMetadataOptions) {
+  const {
+    data: passwordData,
+    isLoading,
+    error,
+    refetch,
+  } = useQuery({
+    queryKey: ['metadata', 'databasePassword'],
+    queryFn: () => metadataService.getDatabasePassword(),
+    staleTime: 0,
+    gcTime: 0,
+    enabled: options?.enabled ?? true,
+  });
+
+  return {
+    passwordData,
+    isLoading,
+    error,
+    refetch,
+  };
+}

package/frontend/src/lib/hooks/useModal.tsx

@@ -0,0 +1,2 @@
+// Re-export the useModal hook from ModalContext for backwards compatibility
+export { useModal } from '@/lib/contexts/ModalContext';

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

@@ -1,84 +1,103 @@
-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';
-
-export function AppRoutes() {
-  return (
-    <Routes>
-      <Route path="/dashboard/login" element={<LoginPage />} />
-      <Route path="/cloud/login" element={<CloudLoginPage />} />
-      <Route
-        path="/*"
-        element={
-          <RequireAuth>
-            <Layout>
-              <Routes>
-                <Route path="/" element={<Navigate to="/dashboard" replace />} />
-                <Route path="/dashboard" element={<DashboardPage />} />
-                <Route path="/dashboard/users" element={<UsersPage />} />
-                <Route path="/dashboard/tables" element={<TablesPage />} />
-                <Route
-                  path="/dashboard/authentication"
-                  element={<Navigate to="/dashboard/authentication/auth-methods" replace />}
-                />
-                <Route path="/dashboard/authentication/users" element={<UsersPage />} />
-                <Route
-                  path="/dashboard/authentication/auth-methods"
-                  element={<AuthMethodsPage />}
-                />
-                <Route path="/dashboard/authentication/config" element={<ConfigurationPage />} />
-                <Route
-                  path="/dashboard/database"
-                  element={<Navigate to="/dashboard/database/indexes" replace />}
-                />
-                <Route path="/dashboard/database/tables" element={<TablesPage />} />
-                <Route path="/dashboard/database/indexes" element={<IndexesPage />} />
-                <Route path="/dashboard/database/functions" element={<DatabaseFunctionsPage />} />
-                <Route path="/dashboard/database/triggers" element={<TriggersPage />} />
-                <Route path="/dashboard/database/policies" element={<PoliciesPage />} />
-                <Route path="/dashboard/database/sql-editor" element={<SQLEditorPage />} />
-                <Route path="/dashboard/database/templates" element={<TemplatesPage />} />
-                <Route path="/dashboard/storage" element={<StoragePage />} />
-                <Route
-                  path="/dashboard/logs"
-                  element={<Navigate to="/dashboard/logs/MCP" replace />}
-                />
-                <Route path="/dashboard/logs/MCP" element={<MCPLogsPage />} />
-                <Route path="/dashboard/logs/:source" element={<LogsPage />} />
-                <Route
-                  path="/dashboard/functions"
-                  element={<Navigate to="/dashboard/functions/list" replace />}
-                />
-                <Route path="/dashboard/functions/list" element={<FunctionsPage />} />
-                <Route path="/dashboard/functions/secrets" element={<SecretsPage />} />
-                <Route path="/dashboard/visualizer" element={<VisualizerPage />} />
-                <Route path="/dashboard/ai" element={<AIPage />} />
-                <Route path="*" element={<Navigate to="/dashboard" replace />} />
-              </Routes>
-            </Layout>
-          </RequireAuth>
-        }
-      />
-    </Routes>
-  );
-}
+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/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';
+import SettingsPage from '@/features/settings/pages/SettingsPage';
+import DeploymentsPage from '@/features/deployments/pages/DeploymentsPage';
+
+export function AppRoutes() {
+  return (
+    <Routes>
+      <Route path="/dashboard/login" element={<LoginPage />} />
+      <Route path="/cloud/login" element={<CloudLoginPage />} />
+      <Route
+        path="/*"
+        element={
+          <RequireAuth>
+            <Layout>
+              <Routes>
+                <Route path="/" element={<Navigate to="/dashboard" replace />} />
+                <Route path="/dashboard" element={<DashboardPage />} />
+                <Route path="/dashboard/users" element={<UsersPage />} />
+                <Route path="/dashboard/tables" element={<TablesPage />} />
+                <Route
+                  path="/dashboard/authentication"
+                  element={<Navigate to="/dashboard/authentication/auth-methods" replace />}
+                />
+                <Route path="/dashboard/authentication/users" element={<UsersPage />} />
+                <Route
+                  path="/dashboard/authentication/auth-methods"
+                  element={<AuthMethodsPage />}
+                />
+                <Route path="/dashboard/authentication/config" element={<ConfigurationPage />} />
+                <Route
+                  path="/dashboard/database"
+                  element={<Navigate to="/dashboard/database/indexes" replace />}
+                />
+                <Route path="/dashboard/database/tables" element={<TablesPage />} />
+                <Route path="/dashboard/database/indexes" element={<IndexesPage />} />
+                <Route path="/dashboard/database/functions" element={<DatabaseFunctionsPage />} />
+                <Route path="/dashboard/database/triggers" element={<TriggersPage />} />
+                <Route path="/dashboard/database/policies" element={<PoliciesPage />} />
+                <Route path="/dashboard/database/sql-editor" element={<SQLEditorPage />} />
+                <Route path="/dashboard/database/templates" element={<TemplatesPage />} />
+                <Route path="/dashboard/storage" element={<StoragePage />} />
+                <Route
+                  path="/dashboard/logs"
+                  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"
+                  element={<Navigate to="/dashboard/functions/list" replace />}
+                />
+                <Route path="/dashboard/functions/list" element={<FunctionsPage />} />
+                <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="/dashboard/settings" element={<SettingsPage />} />
+                <Route path="/dashboard/deployments" element={<DeploymentsPage />} />
+                <Route path="*" element={<Navigate to="/dashboard" replace />} />
+              </Routes>
+            </Layout>
+          </RequireAuth>
+        }
+      />
+    </Routes>
+  );
+}

package/frontend/src/lib/services/metadata.service.ts

@@ -1,9 +1,14 @@
 import { apiClient } from '@/lib/api/client';
-import { AppMetadataSchema } from '@insforge/shared-schemas';
+import {
+  ApiKeyResponse,
+  AppMetadataSchema,
+  DatabaseConnectionInfo,
+  DatabasePasswordInfo,
+} from '@insforge/shared-schemas';
 
 export class MetadataService {
-  async fetchApiKey() {
-    const data = await apiClient.request('/metadata/api-key');
+  async fetchApiKey(): Promise<string> {
+    const data: ApiKeyResponse = await apiClient.request('/metadata/api-key');
     return data.apiKey;
   }
 
@@ -12,6 +17,18 @@ export class MetadataService {
       headers: apiClient.withAccessToken(),
     });
   }
+
+  async getDatabaseConnectionString(): Promise<DatabaseConnectionInfo> {
+    return apiClient.request('/metadata/database-connection-string', {
+      headers: apiClient.withAccessToken(),
+    });
+  }
+
+  async getDatabasePassword(): Promise<DatabasePasswordInfo> {
+    return apiClient.request('/metadata/database-password', {
+      headers: apiClient.withAccessToken(),
+    });
+  }
 }
 
 export const metadataService = new MetadataService();

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;
   }