insforge 1.2.10 → 1.3.0

package/frontend/src/features/database/{page → pages}/TriggersPage.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState, useEffect } from 'react';
+import { useMemo, useState } from 'react';
 import RefreshIcon from '@/assets/icons/refresh.svg?react';
 import {
   Button,
@@ -13,16 +13,10 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from '@/components';
-import { useFullMetadata } from '../hooks/useFullMetadata';
-import type { ExportDatabaseResponse, ExportDatabaseJsonData } from '@insforge/shared-schemas';
+import { useTriggers } from '../hooks/useDatabase';
+import { SQLModal, SQLCellButton } from '../components/SQLModal';
+import type { DatabaseTriggersResponse } from '@insforge/shared-schemas';
 import { isSystemTable } from '../constants';
-import {
-  DataUpdatePayload,
-  DataUpdateResourceType,
-  ServerEvents,
-  SocketMessage,
-  useSocket,
-} from '@/lib/contexts/SocketContext';
 
 interface TriggerRow extends DataGridRowType {
   id: string;
@@ -34,28 +28,25 @@ interface TriggerRow extends DataGridRowType {
   [key: string]: ConvertedValue | { [key: string]: string }[];
 }
 
-function parseTriggersFromMetadata(metadata: ExportDatabaseResponse | undefined): TriggerRow[] {
-  if (!metadata || metadata.format !== 'json' || typeof metadata.data === 'string') {
+function parseTriggersFromResponse(response: DatabaseTriggersResponse | undefined): TriggerRow[] {
+  if (!response?.triggers) {
     return [];
   }
 
-  const data = metadata.data as ExportDatabaseJsonData;
   const triggers: TriggerRow[] = [];
 
-  Object.entries(data.tables).forEach(([tableName, tableData]) => {
-    if (isSystemTable(tableName)) {
+  response.triggers.forEach((trigger) => {
+    if (isSystemTable(trigger.tableName)) {
       return;
     }
 
-    tableData.triggers.forEach((trigger) => {
-      triggers.push({
-        id: `${tableName}_${trigger.triggerName}`,
-        tableName,
-        triggerName: trigger.triggerName,
-        actionTiming: trigger.actionTiming,
-        eventManipulation: trigger.eventManipulation,
-        actionStatement: trigger.actionStatement,
-      });
+    triggers.push({
+      id: `${trigger.tableName}_${trigger.triggerName}`,
+      tableName: trigger.tableName,
+      triggerName: trigger.triggerName,
+      actionTiming: trigger.actionTiming,
+      eventManipulation: trigger.eventManipulation,
+      actionStatement: trigger.actionStatement,
     });
   });
 
@@ -65,29 +56,10 @@ function parseTriggersFromMetadata(metadata: ExportDatabaseResponse | undefined)
 export default function TriggersPage() {
   const [searchQuery, setSearchQuery] = useState('');
   const [isRefreshing, setIsRefreshing] = useState(false);
-  const { data: metadata, isLoading, error, refetch } = useFullMetadata(true);
-
-  const { socket, isConnected } = useSocket();
-
-  const allTriggers = useMemo(() => parseTriggersFromMetadata(metadata), [metadata]);
-
-  useEffect(() => {
-    if (!socket || !isConnected) {
-      return;
-    }
+  const { data, isLoading, error, refetch } = useTriggers(true);
+  const [sqlModal, setSqlModal] = useState({ open: false, title: '', value: '' });
 
-    const handleDataUpdate = (message: SocketMessage<DataUpdatePayload>) => {
-      if (message.payload?.resource === DataUpdateResourceType.DATABASE) {
-        void refetch();
-      }
-    };
-
-    socket.on(ServerEvents.DATA_UPDATE, handleDataUpdate);
-
-    return () => {
-      socket.off(ServerEvents.DATA_UPDATE, handleDataUpdate);
-    };
-  }, [socket, isConnected, refetch]);
+  const allTriggers = useMemo(() => parseTriggersFromResponse(data), [data]);
 
   const filteredTriggers = useMemo(() => {
     if (!searchQuery.trim()) {
@@ -163,9 +135,17 @@ export default function TriggersPage() {
         name: 'Statement',
         width: 'minmax(300px, 3fr)',
         resizable: true,
+        renderCell: ({ row }) => (
+          <SQLCellButton
+            value={row.actionStatement}
+            onClick={() =>
+              setSqlModal({ open: true, title: 'Trigger Statement', value: row.actionStatement })
+            }
+          />
+        ),
       },
     ],
-    []
+    [setSqlModal]
   );
 
   if (error) {
@@ -237,6 +217,14 @@ export default function TriggersPage() {
           />
         </div>
       )}
+
+      {/* SQL Detail Modal */}
+      <SQLModal
+        open={sqlModal.open}
+        onOpenChange={(open) => setSqlModal((prev) => ({ ...prev, open }))}
+        title={sqlModal.title}
+        value={sqlModal.value}
+      />
     </div>
   );
 }

package/frontend/src/features/database/services/advance.service.ts

@@ -1,5 +1,4 @@
 import { apiClient } from '@/lib/api/client';
-import type { ExportDatabaseRequest, ExportDatabaseResponse } from '@insforge/shared-schemas';
 
 export interface RawSQLRequest {
   query: string;
@@ -36,31 +35,6 @@ export class AdvanceService {
       body: JSON.stringify(body),
     });
   }
-
-  /**
-   * Get full database metadata including schema, functions, triggers, etc.
-   * Requires admin privileges.
-   *
-   * @returns Response with complete database metadata in JSON format
-   */
-  async getDatabaseFullMetadata(): Promise<ExportDatabaseResponse> {
-    const body: ExportDatabaseRequest = {
-      format: 'json',
-      includeData: false,
-      includeFunctions: true,
-      includeSequences: false,
-      includeViews: false,
-      rowLimit: 1000,
-    };
-
-    return apiClient.request('/database/advance/export', {
-      method: 'POST',
-      headers: apiClient.withAccessToken({
-        'Content-Type': 'application/json',
-      }),
-      body: JSON.stringify(body),
-    });
-  }
 }
 
 export const advanceService = new AdvanceService();

package/frontend/src/features/database/services/database.service.ts

@@ -0,0 +1,55 @@
+import { apiClient } from '@/lib/api/client';
+import type {
+  DatabaseFunctionsResponse,
+  DatabaseIndexesResponse,
+  DatabasePoliciesResponse,
+  DatabaseTriggersResponse,
+} from '@insforge/shared-schemas';
+
+export class DatabaseService {
+  /**
+   * Get all database functions.
+   * Requires admin privileges.
+   */
+  async getFunctions(): Promise<DatabaseFunctionsResponse> {
+    return apiClient.request('/database/functions', {
+      method: 'GET',
+      headers: apiClient.withAccessToken({}),
+    });
+  }
+
+  /**
+   * Get all database indexes.
+   * Requires admin privileges.
+   */
+  async getIndexes(): Promise<DatabaseIndexesResponse> {
+    return apiClient.request('/database/indexes', {
+      method: 'GET',
+      headers: apiClient.withAccessToken({}),
+    });
+  }
+
+  /**
+   * Get all RLS policies.
+   * Requires admin privileges.
+   */
+  async getPolicies(): Promise<DatabasePoliciesResponse> {
+    return apiClient.request('/database/policies', {
+      method: 'GET',
+      headers: apiClient.withAccessToken({}),
+    });
+  }
+
+  /**
+   * Get all database triggers.
+   * Requires admin privileges.
+   */
+  async getTriggers(): Promise<DatabaseTriggersResponse> {
+    return apiClient.request('/database/triggers', {
+      method: 'GET',
+      headers: apiClient.withAccessToken({}),
+    });
+  }
+}
+
+export const databaseService = new DatabaseService();

package/frontend/src/features/database/services/table.service.ts

@@ -17,12 +17,6 @@ export class TableService {
     return Array.isArray(data) ? data.filter((table) => table !== 'users') : [];
   }
 
-  getAllTableSchemas(): Promise<GetTableSchemaResponse[]> {
-    return apiClient.request('/database/tables/schemas', {
-      headers: apiClient.withAccessToken(),
-    });
-  }
-
   getTableSchema(tableName: string): Promise<GetTableSchemaResponse> {
     return apiClient.request(`/database/tables/${tableName}/schema`, {
       headers: apiClient.withAccessToken(),

package/frontend/src/features/functions/{page → pages}/FunctionsPage.tsx

@@ -14,13 +14,6 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from '@/components';
-import {
-  DataUpdatePayload,
-  DataUpdateResourceType,
-  ServerEvents,
-  SocketMessage,
-  useSocket,
-} from '@/lib/contexts/SocketContext';
 
 export default function FunctionsPage() {
   const toastShownRef = useRef(false);
@@ -36,8 +29,6 @@ export default function FunctionsPage() {
     refetch,
   } = useFunctions();
 
-  const { socket, isConnected } = useSocket();
-
   const handleRefresh = async () => {
     setIsRefreshing(true);
     try {
@@ -54,24 +45,6 @@ export default function FunctionsPage() {
     }
   }, [isRuntimeAvailable, showToast]);
 
-  useEffect(() => {
-    if (!socket || !isConnected) {
-      return;
-    }
-
-    const handleDataUpdate = (message: SocketMessage<DataUpdatePayload>) => {
-      if (message.payload?.resource === DataUpdateResourceType.FUNCTIONS) {
-        void refetch();
-      }
-    };
-
-    socket.on(ServerEvents.DATA_UPDATE, handleDataUpdate);
-
-    return () => {
-      socket.off(ServerEvents.DATA_UPDATE, handleDataUpdate);
-    };
-  }, [socket, isConnected, refetch]);
-
   // If a function is selected, show the detail view
   if (selectedFunction) {
     return (
@@ -124,14 +97,18 @@ export default function FunctionsPage() {
             </Tooltip>
           </TooltipProvider>
         </div>
-        <div className="flex flex-col gap-2 relative">
-          {/* Table Header */}
-          <div className="grid grid-cols-12 px-3 text-sm text-muted-foreground dark:text-neutral-400">
-            <div className="col-span-2 py-1 px-3">Name</div>
-            <div className="col-span-6 py-1 px-3">URL</div>
-            <div className="col-span-2 py-1 px-3">Created</div>
-            <div className="col-span-2 py-1 px-3">Last Update</div>
-          </div>
+        {/* Table Header */}
+        <div className="grid grid-cols-12 px-3 text-sm text-muted-foreground dark:text-neutral-400">
+          <div className="col-span-2 py-1 px-3">Name</div>
+          <div className="col-span-6 py-1 px-3">URL</div>
+          <div className="col-span-2 py-1 px-3">Created</div>
+          <div className="col-span-2 py-1 px-3">Last Update</div>
+        </div>
+      </div>
+
+      {/* Scrollable Table Body */}
+      <div className="flex-1 min-h-0 overflow-y-auto px-4 pb-4 relative">
+        <div className="flex flex-col gap-2">
           {loading ? (
             <>
               {[...Array(4)].map((_, i) => (
@@ -154,17 +131,17 @@ export default function FunctionsPage() {
               <FunctionEmptyState />
             </div>
           )}
+        </div>
 
-          {/* Loading mask overlay */}
-          {isRefreshing && (
-            <div className="absolute inset-0 bg-white dark:bg-neutral-800 flex items-center justify-center z-50">
-              <div className="flex items-center gap-1">
-                <div className="w-5 h-5 border-2 border-zinc-500 dark:border-neutral-700 border-t-transparent rounded-full animate-spin" />
-                <span className="text-sm text-zinc-500 dark:text-zinc-400">Loading</span>
-              </div>
+        {/* Loading mask overlay */}
+        {isRefreshing && (
+          <div className="absolute inset-0 bg-white dark:bg-neutral-800 flex items-center justify-center z-50">
+            <div className="flex items-center gap-1">
+              <div className="w-5 h-5 border-2 border-zinc-500 dark:border-neutral-700 border-t-transparent rounded-full animate-spin" />
+              <span className="text-sm text-zinc-500 dark:text-zinc-400">Loading</span>
             </div>
-          )}
-        </div>
+          </div>
+        )}
       </div>
     </div>
   );

package/frontend/src/features/functions/{page → pages}/SecretsPage.tsx

@@ -75,16 +75,18 @@ export default function SecretsPage() {
           className="max-w-70 dark:bg-neutral-900 dark:border-neutral-700"
         />
 
-        {/* Secrets Table */}
-        <div className="flex flex-col gap-2">
-          {/* Table Header */}
-          <div className="grid grid-cols-12 px-3 text-sm text-muted-foreground dark:text-neutral-400">
-            <div className="col-span-8 py-1 px-3">Name</div>
-            {/* <div className="col-span-5 py-1 px-3">Digest</div> */}
-            <div className="col-span-3 py-1 px-3">Updated at</div>
-            <div className="col-span-1 py-1 px-3" />
-          </div>
+        {/* Secrets Table Header */}
+        <div className="grid grid-cols-12 px-3 text-sm text-muted-foreground dark:text-neutral-400">
+          <div className="col-span-8 py-1 px-3">Name</div>
+          {/* <div className="col-span-5 py-1 px-3">Digest</div> */}
+          <div className="col-span-3 py-1 px-3">Updated at</div>
+          <div className="col-span-1 py-1 px-3" />
+        </div>
+      </div>
 
+      {/* Scrollable Table Body */}
+      <div className="flex-1 min-h-0 overflow-y-auto px-4 pb-4">
+        <div className="flex flex-col gap-2">
           {loading ? (
             <>
               {[...Array(4)].map((_, i) => (

package/frontend/src/features/logs/hooks/useMcpUsage.ts

@@ -1,40 +1,27 @@
-import { useCallback, useMemo, useEffect, useRef, useState } from 'react';
-import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { useSocket, ServerEvents } from '@/lib/contexts/SocketContext';
+import { useMemo, useEffect, useRef, useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
 import { useAuth } from '@/lib/contexts/AuthContext';
 import { usageService, McpUsageRecord } from '@/features/logs/services/usage.service';
 import { isInsForgeCloudProject } from '@/lib/utils/utils';
-import { LOGS_PAGE_SIZE } from '../helpers';
 import { postMessageToParent } from '@/lib/utils/cloudMessaging';
-
-// ============================================================================
-// Types
-// ============================================================================
-
-export interface McpConnectedPayload {
-  tool_name: string;
-  created_at: string;
-}
+import { LOGS_PAGE_SIZE } from '../helpers';
 
 // ============================================================================
 // Main Hook
 // ============================================================================
 
 /**
- * Hook to manage MCP usage data and real-time updates
+ * Hook to manage MCP usage data
  *
  * Features:
- * - Fetches initial MCP logs from backend
- * - Listens to real-time socket updates for new MCP calls
- * - Invalidates queries on WebSocket events to refetch latest data
+ * - Fetches MCP logs from backend
  * - Provides helper functions for data access
- * - Handles parent window communication for onboarding (if in iframe)
+ * - Handles initial parent window notification for onboarding (if in iframe)
  * - Supports search and pagination
+ *
  */
 export function useMcpUsage() {
   // Hooks
-  const queryClient = useQueryClient();
-  const { socket, isConnected } = useSocket();
   const { isAuthenticated } = useAuth();
 
   // State
@@ -100,54 +87,14 @@ export function useMcpUsage() {
     hasNotifiedInitialStatus.current = true;
 
     const latestRecord = records[0];
-    window.parent.postMessage(
-      {
-        type: 'MCP_CONNECTION_STATUS',
-        connected: true,
-        tool_name: latestRecord.tool_name,
-        timestamp: latestRecord.created_at,
-      },
-      '*'
-    );
+    postMessageToParent({
+      type: 'MCP_CONNECTION_STATUS',
+      connected: true,
+      tool_name: latestRecord.tool_name,
+      timestamp: latestRecord.created_at,
+    });
   }, [isLoading, records]);
 
-  // Handle real-time MCP connection events from socket
-  const handleMcpConnected = useCallback(
-    (data: { id: string; payload: McpConnectedPayload; timestamp: number; type: string }) => {
-      // Notify parent window with latest MCP call info
-      if (window.parent !== window) {
-        window.parent.postMessage(
-          {
-            type: 'MCP_CONNECTION_STATUS',
-            connected: true,
-            tool_name: data.payload.tool_name,
-            timestamp: data.payload.created_at,
-          },
-          '*'
-        );
-        if (!records.length) {
-          postMessageToParent({ type: 'ONBOARDING_SUCCESS' });
-        }
-      }
-      // Invalidate query to refetch latest data (follows codebase pattern)
-      void queryClient.invalidateQueries({ queryKey: ['mcp-usage'] });
-    },
-    [queryClient, records.length]
-  );
-
-  // Subscribe to socket MCP connection events
-  useEffect(() => {
-    if (!socket || !isConnected) {
-      return;
-    }
-
-    socket.on(ServerEvents.MCP_CONNECTED, handleMcpConnected);
-
-    return () => {
-      socket.off(ServerEvents.MCP_CONNECTED, handleMcpConnected);
-    };
-  }, [socket, isConnected, handleMcpConnected]);
-
   // Computed values
   const hasCompletedOnboarding = useMemo(() => !!records.length, [records]);
   const recordsCount = useMemo(() => records.length, [records]);

package/frontend/src/features/realtime/components/ChannelRow.tsx

@@ -0,0 +1,83 @@
+import { cn, formatDate } from '@/lib/utils/utils';
+import { Trash2 } from 'lucide-react';
+import { Switch } from '@/components';
+import type { RealtimeChannel } from '../services/realtime.service';
+
+interface ChannelRowProps {
+  channel: RealtimeChannel;
+  onClick: () => void;
+  onToggleEnabled: (enabled: boolean) => void;
+  onDelete: () => void;
+  isUpdating?: boolean;
+  isDeleting?: boolean;
+  className?: string;
+}
+
+export function ChannelRow({
+  channel,
+  onClick,
+  onToggleEnabled,
+  onDelete,
+  isUpdating,
+  isDeleting,
+  className,
+}: ChannelRowProps) {
+  return (
+    <div
+      className={cn(
+        'group flex items-center h-14 px-3 bg-white hover:bg-neutral-100 dark:bg-[#333333] dark:hover:bg-neutral-700 rounded-lg transition-all cursor-pointer',
+        className
+      )}
+      onClick={onClick}
+    >
+      {/* Toggle Switch - matches header w-[76px] */}
+      <div className="flex items-center w-[76px] shrink-0 px-3 py-1.5">
+        <Switch
+          checked={channel.enabled}
+          disabled={isUpdating}
+          onCheckedChange={(checked) => {
+            onToggleEnabled(checked);
+          }}
+          onClick={(e) => e.stopPropagation()}
+        />
+      </div>
+
+      {/* Pattern Column - flex-1 to match header */}
+      <div className="flex-1 min-w-0 px-3 py-1.5">
+        <p className="text-sm text-zinc-950 dark:text-white truncate" title={channel.pattern}>
+          {channel.pattern}
+        </p>
+      </div>
+
+      {/* Description Column - fixed w-[640px] to match header */}
+      <div className="w-[640px] min-w-0 px-3 py-1.5">
+        <span
+          className="text-sm text-zinc-700 dark:text-white truncate block"
+          title={channel.description || ''}
+        >
+          {channel.description || '-'}
+        </span>
+      </div>
+
+      {/* Created Column - flex-1 to match header */}
+      <div className="flex-1 min-w-0 px-3 py-1">
+        <span className="text-sm text-zinc-700 dark:text-white truncate" title={channel.createdAt}>
+          {formatDate(channel.createdAt)}
+        </span>
+      </div>
+
+      {/* Delete Button - hidden by default, visible on hover */}
+      <button
+        className="flex items-center justify-center size-8 rounded opacity-0 group-hover:opacity-100 hover:bg-neutral-200 dark:hover:bg-neutral-600 transition-all disabled:opacity-50"
+        onClick={(e) => {
+          e.stopPropagation();
+          onDelete();
+        }}
+        disabled={isDeleting}
+        aria-label="Delete channel"
+      >
+        <Trash2 className="size-5 text-neutral-400 group-hover:text-zinc-600 dark:group-hover:text-white transition-colors" />
+      </button>
+    </div>
+  );
+}