insforge 0.3.3 → 1.3.0

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

@@ -1,7 +1,7 @@
 import React, { createContext, useContext, useState, useEffect, useCallback } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
-import { authService } from '@/features/auth/services/auth.service';
 import { apiClient } from '@/lib/api/client';
+import { userService } from '@/features/auth/services/user.service';
 
 export interface User {
   id: string;
@@ -60,7 +60,7 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
     try {
       setIsLoading(true);
       setError(null);
-      const currentUser = await authService.getCurrentUser();
+      const currentUser = await userService.getCurrentUser();
       setUser(currentUser);
       setIsAuthenticated(true);
       return currentUser;
@@ -77,54 +77,64 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
     }
   }, []);
 
+  const invalidateAuthQueries = useCallback(async () => {
+    await Promise.all([
+      queryClient.invalidateQueries({ queryKey: ['apiKey'] }),
+      queryClient.invalidateQueries({ queryKey: ['metadata'] }),
+      queryClient.invalidateQueries({ queryKey: ['users'] }),
+      queryClient.invalidateQueries({ queryKey: ['tables'] }),
+      queryClient.invalidateQueries({ queryKey: ['mcp-usage'] }),
+    ]);
+  }, [queryClient]);
+
   const loginWithPassword = useCallback(
     async (email: string, password: string): Promise<boolean> => {
       try {
         setError(null);
-        await authService.loginWithPassword(email, password);
-        const currentUser = await checkAuthStatus();
-        if (currentUser) {
-          // Invalidate queries that depend on authentication
-          void queryClient.invalidateQueries({ queryKey: ['apiKey'] });
-          void queryClient.invalidateQueries({ queryKey: ['metadata'] });
-          void queryClient.invalidateQueries({ queryKey: ['users'] });
-          void queryClient.invalidateQueries({ queryKey: ['tables'] });
-          return true;
-        }
-        return false;
+        const data = await apiClient.request('/auth/admin/sessions', {
+          method: 'POST',
+          body: JSON.stringify({ email, password }),
+        });
+
+        apiClient.setToken(data.accessToken);
+        setUser(data.user);
+        setIsAuthenticated(true);
+
+        await invalidateAuthQueries();
+        return true;
       } catch (err) {
         setError(err instanceof Error ? err : new Error('Login failed'));
         return false;
       }
     },
-    [checkAuthStatus, queryClient]
+    [invalidateAuthQueries]
   );
 
   const loginWithAuthorizationCode = useCallback(
-    async (token: string): Promise<boolean> => {
+    async (code: string): Promise<boolean> => {
       try {
         setError(null);
-        await authService.loginWithAuthorizationCode(token);
-        const currentUser = await checkAuthStatus();
-        if (currentUser) {
-          // Invalidate queries that depend on authentication
-          void queryClient.invalidateQueries({ queryKey: ['apiKey'] });
-          void queryClient.invalidateQueries({ queryKey: ['metadata'] });
-          void queryClient.invalidateQueries({ queryKey: ['users'] });
-          void queryClient.invalidateQueries({ queryKey: ['tables'] });
-          return true;
-        }
-        return false;
+        const data = await apiClient.request('/auth/admin/sessions/exchange', {
+          method: 'POST',
+          body: JSON.stringify({ code }),
+        });
+
+        apiClient.setToken(data.accessToken);
+        setUser(data.user);
+        setIsAuthenticated(true);
+
+        await invalidateAuthQueries();
+        return true;
       } catch (err) {
         setError(err instanceof Error ? err : new Error('Authorization code exchange failed'));
         return false;
       }
     },
-    [checkAuthStatus, queryClient]
+    [invalidateAuthQueries]
   );
 
   const logout = useCallback(() => {
-    void authService.logout();
+    apiClient.clearToken();
     setUser(null);
     setIsAuthenticated(false);
     setError(null);
@@ -139,9 +149,6 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
     void checkAuthStatus();
   }, [checkAuthStatus]);
 
-  // Removed periodic auth refresh - it was causing unnecessary unmounts
-  // Auth status is checked naturally when API calls are made
-
   const value: AuthContextType = {
     user,
     isAuthenticated,

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,47 +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 {
-  METADATA = 'metadata',
-  DATABASE_SCHEMA = 'database_schema',
-  TABLE_SCHEMA = 'table_schema',
-  STORAGE_SCHEMA = 'storage_schema',
-  BUCKET_SCHEMA = 'bucket_schema',
-  OAUTH_SCHEMA = 'oauth_schmea',
+  DATABASE = 'database',
+  USERS = 'users',
+  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;
 }
 
 // ============================================================================
@@ -81,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 {
@@ -106,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,
@@ -115,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
@@ -168,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;
@@ -220,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();
@@ -275,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>(
     () => ({
@@ -284,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/{features/metadata → lib}/hooks/useMetadata.ts

@@ -22,7 +22,7 @@ export function useMetadata(options?: UseMetadataOptions) {
   return {
     metadata,
     auth: metadata?.auth,
-    tables: Object.keys(metadata?.database.tables ?? {}),
+    tables: metadata?.database.tables?.filter((table) => table.tableName !== 'users') ?? [],
     storage: metadata?.storage,
     version: metadata?.version || 'Unknown',
     isLoading,

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

@@ -1,6 +1,6 @@
 import React, { createContext, useContext, useState, useCallback } from 'react';
 import { useTimeout } from './useTimeout';
-import { generateUUID } from '@/lib/utils/utils';
+import { cn, generateUUID } from '@/lib/utils/utils';
 
 interface Toast {
   id: string;
@@ -191,7 +191,11 @@ export function ToastProvider({ children }: { children: React.ReactNode }) {
     <ToastContext.Provider value={{ showToast, updateToast, removeToast }}>
       {children}
       {/* Regular toasts - top center */}
-      <div className="fixed top-7.5 dark:top-20 left-1/2 transform -translate-x-1/2 z-[9999] flex flex-col gap-3 w-full max-w-[480px]">
+      <div
+        className={cn(
+          'fixed top-2 left-1/2 transform -translate-x-1/2 z-[9999] flex flex-col gap-3 w-full max-w-[480px]'
+        )}
+      >
         {toasts
           .filter((t) => t.type !== 'upload')
           .map((toast) => (

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

@@ -0,0 +1,99 @@
+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';
+
+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="*" element={<Navigate to="/dashboard" replace />} />
+              </Routes>
+            </Layout>
+          </RequireAuth>
+        }
+      />
+    </Routes>
+  );
+}

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

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+import { Navigate } from 'react-router-dom';
+import { useAuth } from '@/lib/contexts/AuthContext';
+import { LoadingState } from '@/components/LoadingState';
+import { isIframe } from '../utils/utils';
+
+interface RequireAuthProps {
+  children: ReactNode;
+}
+
+export const RequireAuth = ({ children }: RequireAuthProps) => {
+  const { isAuthenticated, isLoading } = useAuth();
+
+  if (isLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <LoadingState />
+      </div>
+    );
+  }
+
+  if (!isAuthenticated) {
+    return <Navigate to={isIframe() ? '/cloud/login' : '/dashboard/login'} replace />;
+  }
+
+  return <>{children}</>;
+};

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

@@ -0,0 +1,20 @@
+import { cloudEventSchema, CloudEvent } from '@insforge/shared-schemas';
+
+export function postMessageToParent(evt: Record<string, unknown>, targetOrigin: string = '*') {
+  if (typeof window === 'undefined') {
+    return;
+  }
+  if (window.parent !== window) {
+    window.parent.postMessage(evt, targetOrigin);
+  }
+}
+
+/**
+ * Parses and validates an unknown value as a CloudEvent.
+ * @param value - The value to validate
+ * @returns A discriminated union: { ok: true; data: CloudEvent } on success, { ok: false } on failure
+ */
+export function parseCloudEvent(value: unknown): { ok: true; data: CloudEvent } | { ok: false } {
+  const parsed = cloudEventSchema.safeParse(value);
+  return parsed.success ? { ok: true, data: parsed.data } : { ok: false };
+}