insforge 0.3.2 → 1.2.10

package/frontend/src/features/logs/components/LogsDataGrid.tsx

@@ -0,0 +1,89 @@
+import { useMemo } from 'react';
+import {
+  DataGrid,
+  type DataGridProps,
+  type RenderCellProps,
+  type DataGridColumn,
+  type DataGridRowType,
+} from '@/components/datagrid';
+
+// Column definition type for LogsDataGrid
+export interface LogsColumnDef {
+  key: string;
+  name: string;
+  width?: string;
+  minWidth?: number;
+  maxWidth?: number;
+  sortable?: boolean;
+  renderCell?: (props: RenderCellProps<DataGridRowType>) => React.ReactNode;
+}
+
+// Convert logs data to DataGrid columns with custom renderers
+export function createLogsColumns(columnDefs: LogsColumnDef[]): DataGridColumn<DataGridRowType>[] {
+  return columnDefs.map((def) => {
+    const column: DataGridColumn<DataGridRowType> = {
+      key: def.key,
+      name: def.name,
+      width: def.width || '1fr',
+      minWidth: def.minWidth,
+      maxWidth: def.maxWidth,
+      resizable: true,
+      sortable: false,
+      renderCell:
+        def.renderCell ||
+        (({ row, column }: RenderCellProps<DataGridRowType>) => {
+          const value = row[column.key];
+          const displayValue = String(value ?? '');
+          return (
+            <span className="text-sm text-gray-900 dark:text-white font-normal leading-6 truncate">
+              {displayValue}
+            </span>
+          );
+        }),
+    };
+
+    return column;
+  });
+}
+
+// Logs-specific DataGrid props - generic to accept any object type
+export interface LogsDataGridProps<T = Record<string, unknown>>
+  extends Omit<DataGridProps<DataGridRowType>, 'columns' | 'data'> {
+  columnDefs: LogsColumnDef[];
+  data: T[];
+  noPadding?: boolean;
+}
+
+// Specialized DataGrid for logs
+export function LogsDataGrid<T = Record<string, unknown>>({
+  columnDefs,
+  data,
+  noPadding,
+  ...restProps
+}: LogsDataGridProps<T>) {
+  const columns = useMemo(() => {
+    return createLogsColumns(columnDefs);
+  }, [columnDefs]);
+
+  // Ensure each row has an id for DataGrid compatibility
+  const dataWithIds = useMemo(() => {
+    return data.map((log, index) => {
+      const record = log as Record<string, unknown>;
+      return {
+        ...record,
+        id: String(record.id ?? index),
+      };
+    }) as DataGridRowType[];
+  }, [data]);
+
+  return (
+    <DataGrid<DataGridRowType>
+      {...restProps}
+      data={dataWithIds}
+      columns={columns}
+      showSelection={false}
+      showPagination={true}
+      noPadding={noPadding}
+    />
+  );
+}

package/frontend/src/features/logs/components/SeverityBadge.tsx

@@ -0,0 +1,18 @@
+import { SEVERITY_CONFIG, type SeverityType } from '../helpers';
+
+interface SeverityBadgeProps {
+  severity: SeverityType;
+}
+
+export function SeverityBadge({ severity }: SeverityBadgeProps) {
+  const config = SEVERITY_CONFIG[severity] || SEVERITY_CONFIG.informational;
+
+  return (
+    <div className="flex items-center gap-2 pr-1">
+      <div className="w-2 h-2 rounded-full shrink-0" style={{ backgroundColor: config.color }} />
+      <span className="text-sm text-gray-900 dark:text-white font-normal leading-6">
+        {config.label}
+      </span>
+    </div>
+  );
+}

package/frontend/src/features/logs/components/index.ts

@@ -0,0 +1,2 @@
+export { createLogsColumns, type LogsColumnDef } from './LogsDataGrid';
+export { SeverityBadge } from './SeverityBadge';

package/frontend/src/features/logs/helpers.ts

@@ -0,0 +1,24 @@
+/**
+ * Severity options for log filtering
+ */
+export const SEVERITY_OPTIONS = [
+  { value: 'error', label: 'Error', color: 'text-red-500' },
+  { value: 'warning', label: 'Warning', color: 'text-yellow-500' },
+  { value: 'informational', label: 'Info', color: 'text-gray-500' },
+] as const;
+
+/**
+ * Severity configuration for badges
+ */
+export const SEVERITY_CONFIG = {
+  error: { color: '#EF4444', label: 'Error' },
+  warning: { color: '#FCD34D', label: 'Warning' },
+  informational: { color: '#A3A3A3', label: 'Info' },
+} as const;
+
+export type SeverityType = keyof typeof SEVERITY_CONFIG;
+
+/**
+ * Default page size for logs pagination
+ */
+export const LOGS_PAGE_SIZE = 50;

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

@@ -1,12 +1,12 @@
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import { logsService } from '../services/log.service';
+import { auditService } from '../services/audit.service';
 import { GetAuditLogsRequest } from '@insforge/shared-schemas';
 import { useToast } from '@/lib/hooks/useToast';
 
 export const useAuditLogs = (filters?: Partial<GetAuditLogsRequest>) => {
   return useQuery({
     queryKey: ['audit-logs', filters],
-    queryFn: () => logsService.getAuditLogs({ limit: 100, offset: 0, ...filters }),
+    queryFn: () => auditService.getAuditLogs({ limit: 100, offset: 0, ...filters }),
     staleTime: 30 * 1000,
     gcTime: 5 * 60 * 1000,
   });
@@ -15,7 +15,7 @@ export const useAuditLogs = (filters?: Partial<GetAuditLogsRequest>) => {
 export const useAuditLogStats = (days = 7) => {
   return useQuery({
     queryKey: ['audit-log-stats', days],
-    queryFn: () => logsService.getAuditLogStats(days),
+    queryFn: () => auditService.getAuditLogStats(days),
     staleTime: 60 * 1000,
     gcTime: 10 * 60 * 1000,
   });
@@ -26,7 +26,7 @@ export const useClearAuditLogs = () => {
   const { showToast } = useToast();
 
   return useMutation({
-    mutationFn: (daysToKeep?: number) => logsService.clearAuditLogs(daysToKeep),
+    mutationFn: (daysToKeep?: number) => auditService.clearAuditLogs(daysToKeep),
     onSuccess: (data) => {
       void queryClient.invalidateQueries({ queryKey: ['audit-logs'] });
       void queryClient.invalidateQueries({ queryKey: ['audit-log-stats'] });

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

@@ -0,0 +1,137 @@
+import { useState, useEffect, useCallback, useMemo } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { logService } from '../services/log.service';
+import type { LogSourceSchema } from '@insforge/shared-schemas';
+import type { SecondaryMenuItem } from '@/lib/utils/menuItems';
+
+export function useLogSources() {
+  const [selectedSource, setSelectedSource] = useState<string | null>(() => {
+    return localStorage.getItem('selectedLogSource');
+  });
+
+  // Fetch log sources
+  const {
+    data: sources,
+    isLoading,
+    error,
+    refetch,
+  } = useQuery({
+    queryKey: ['log-sources'],
+    queryFn: () => logService.getLogSources(),
+    staleTime: 2 * 60 * 1000, // Cache for 2 minutes
+  });
+
+  // Fetch log source stats
+  const {
+    data: stats,
+    isLoading: isLoadingStats,
+    error: statsError,
+    refetch: refetchStats,
+  } = useQuery({
+    queryKey: ['log-source-stats'],
+    queryFn: () => logService.getLogSourceStats(),
+    staleTime: 30 * 1000, // Cache for 30 seconds
+  });
+
+  // Extract source names
+  const sourceNames = useMemo(() => sources?.map((s) => s.name) || [], [sources]);
+
+  // Menu items for sidebar navigation
+  const menuItems: SecondaryMenuItem[] = useMemo(
+    () => [
+      {
+        id: 'mcp-logs',
+        label: 'MCP logs',
+        href: '/dashboard/logs/MCP',
+      },
+      ...sourceNames.map((source) => ({
+        id: `log-${source}`,
+        label: source,
+        href: `/dashboard/logs/${source}`,
+      })),
+    ],
+    [sourceNames]
+  );
+
+  // Persist selected source to localStorage
+  useEffect(() => {
+    if (selectedSource) {
+      localStorage.setItem('selectedLogSource', selectedSource);
+    } else {
+      localStorage.removeItem('selectedLogSource');
+    }
+  }, [selectedSource]);
+
+  // Auto-select first source or validate current selection
+  useEffect(() => {
+    if (!isLoading && sources && sources.length) {
+      // If no source selected or selected source doesn't exist (except 'MCP logs'), select first one
+      if (
+        !selectedSource ||
+        (selectedSource !== 'MCP' && !sources.some((s) => s.name === selectedSource))
+      ) {
+        setSelectedSource(sources[0].name);
+      }
+    }
+  }, [sources, isLoading, selectedSource]);
+
+  // Select source handler
+  const selectSource = useCallback((sourceName: string) => {
+    setSelectedSource(sourceName);
+  }, []);
+
+  // Clear selection handler
+  const clearSelection = useCallback(() => {
+    setSelectedSource(null);
+  }, []);
+
+  // Get source by name
+  const getSourceByName = useCallback(
+    (name: string): LogSourceSchema | undefined => {
+      return sources?.find((s) => s.name === name);
+    },
+    [sources]
+  );
+
+  // Get stats for a specific source
+  const getStatsForSource = useCallback(
+    (sourceName: string) => {
+      return stats?.find((s) => s.source === sourceName);
+    },
+    [stats]
+  );
+
+  // Refresh all data
+  const refreshAll = useCallback(async () => {
+    await Promise.all([refetch(), refetchStats()]);
+  }, [refetch, refetchStats]);
+
+  return {
+    // Data
+    sources: sources || [],
+    sourceNames,
+    sourcesCount: sources?.length || 0,
+    selectedSource,
+    stats: stats || [],
+    menuItems,
+
+    // Loading states
+    isLoading,
+    isLoadingStats,
+
+    // Errors
+    error,
+    statsError,
+
+    // Actions
+    selectSource,
+    clearSelection,
+    refetch,
+    refetchStats,
+    refreshAll,
+
+    // Helpers
+    getSourceByName,
+    getStatsForSource,
+  };
+}

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

@@ -0,0 +1,163 @@
+import { useState, useCallback, useMemo, useEffect } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { logService } from '../services/log.service';
+import type { LogSchema } from '@insforge/shared-schemas';
+import { LOGS_PAGE_SIZE, SeverityType } from '../helpers';
+
+const FETCH_SIZE = 200;
+
+export function useLogs(source: string) {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [severityFilter, setSeverityFilter] = useState<string[]>([
+    'error',
+    'warning',
+    'informational',
+  ]);
+  const [loadedLogs, setLoadedLogs] = useState<LogSchema[]>([]);
+  const [hasMore, setHasMore] = useState(true);
+  const [isLoadingMore, setIsLoadingMore] = useState(false);
+  const [currentPage, setCurrentPage] = useState(1);
+
+  // Fetch initial logs
+  const {
+    data: initialLogsData,
+    isLoading,
+    error,
+    refetch,
+  } = useQuery({
+    queryKey: ['logs-content', source],
+    queryFn: async () => {
+      const data = await logService.getLogsBySource(source, FETCH_SIZE);
+      return {
+        logs: data.logs || [],
+        total: data.total || 0,
+      };
+    },
+    enabled: !!source,
+    staleTime: 0,
+  });
+
+  // Update loaded logs when data changes
+  useEffect(() => {
+    if (initialLogsData?.logs !== undefined) {
+      // Reverse logs to show most recent first (backend returns oldest first)
+      setLoadedLogs([...initialLogsData.logs].reverse());
+      setHasMore(initialLogsData.logs.length === FETCH_SIZE);
+      setIsLoadingMore(false);
+    }
+  }, [initialLogsData]);
+
+  // Reset page when search, severity filter, or source changes
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [searchQuery, severityFilter, source]);
+
+  // Load more older logs
+  const loadMoreLogs = useCallback(async () => {
+    if (!source || !hasMore || isLoadingMore) {
+      return;
+    }
+
+    setIsLoadingMore(true);
+    try {
+      // Get the oldest log's timestamp (last in the array since we reverse)
+      const oldestTimestamp = loadedLogs.length
+        ? loadedLogs[loadedLogs.length - 1]?.timestamp
+        : undefined;
+      const data = await logService.getLogsBySource(source, FETCH_SIZE, oldestTimestamp);
+
+      if (data.logs && data.logs.length) {
+        // Reverse and append to the end (older logs)
+        setLoadedLogs((prev) => [...prev, ...[...data.logs].reverse()]);
+        setHasMore(data.logs.length === FETCH_SIZE);
+      } else {
+        setHasMore(false);
+      }
+    } catch (error) {
+      console.error('Failed to load more logs:', error);
+    } finally {
+      setIsLoadingMore(false);
+    }
+  }, [source, loadedLogs, hasMore, isLoadingMore]);
+
+  // Get severity from log
+  const getSeverity = useCallback((log: LogSchema): SeverityType => {
+    // Parse from log.body.metadata.level set by Vector
+    const metadata = log.body?.metadata as { level?: string } | undefined;
+    const level = metadata?.level;
+    if (!level) {
+      return 'informational';
+    }
+
+    const levelLower = level.toLowerCase();
+
+    if (levelLower === 'error') {
+      return 'error';
+    }
+    if (levelLower === 'warning' || levelLower === 'warn') {
+      return 'warning';
+    }
+    // 'info', 'log', and anything else defaults to informational
+    return 'informational';
+  }, []);
+
+  // Filter logs by search and severity
+  const filteredLogs = useMemo(() => {
+    return loadedLogs.filter((log) => {
+      const matchesSearch =
+        !searchQuery ||
+        log.eventMessage.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        JSON.stringify(log.body).toLowerCase().includes(searchQuery.toLowerCase());
+
+      const matchesSeverity = !severityFilter.length || severityFilter.includes(getSeverity(log));
+
+      return matchesSearch && matchesSeverity;
+    });
+  }, [loadedLogs, searchQuery, severityFilter, getSeverity]);
+
+  // Calculate pagination
+  const totalPages = useMemo(
+    () => Math.ceil(filteredLogs.length / LOGS_PAGE_SIZE),
+    [filteredLogs.length]
+  );
+  const startIndex = useMemo(() => (currentPage - 1) * LOGS_PAGE_SIZE, [currentPage]);
+  const endIndex = useMemo(() => startIndex + LOGS_PAGE_SIZE, [startIndex]);
+  const paginatedLogs = useMemo(
+    () => filteredLogs.slice(startIndex, endIndex),
+    [filteredLogs, startIndex, endIndex]
+  );
+
+  return {
+    // Data
+    logs: paginatedLogs,
+    allLogs: loadedLogs,
+    filteredLogs,
+    totalLogs: filteredLogs.length,
+
+    // Filters
+    searchQuery,
+    setSearchQuery,
+    severityFilter,
+    setSeverityFilter,
+
+    // Pagination
+    currentPage,
+    setCurrentPage,
+    totalPages,
+    startIndex,
+    endIndex,
+
+    // Loading states
+    isLoading,
+    isLoadingMore,
+    hasMore,
+
+    // Error
+    error,
+
+    // Actions
+    loadMoreLogs,
+    refetch,
+    getSeverity,
+  };
+}

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

@@ -0,0 +1,181 @@
+import { useCallback, useMemo, useEffect, useRef, useState } from 'react';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { useSocket, ServerEvents } from '@/lib/contexts/SocketContext';
+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;
+}
+
+// ============================================================================
+// Main Hook
+// ============================================================================
+
+/**
+ * Hook to manage MCP usage data and real-time updates
+ *
+ * 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
+ * - Provides helper functions for data access
+ * - Handles parent window communication for onboarding (if in iframe)
+ * - Supports search and pagination
+ */
+export function useMcpUsage() {
+  // Hooks
+  const queryClient = useQueryClient();
+  const { socket, isConnected } = useSocket();
+  const { isAuthenticated } = useAuth();
+
+  // State
+  const [searchQuery, setSearchQuery] = useState('');
+  const [currentPage, setCurrentPage] = useState(1);
+
+  // Refs
+  const hasNotifiedInitialStatus = useRef(false);
+
+  // Query to fetch all MCP logs
+  const {
+    data: records = [],
+    isLoading,
+    error,
+    refetch,
+  } = useQuery<McpUsageRecord[]>({
+    queryKey: ['mcp-usage'],
+    queryFn: () => usageService.getMcpUsage(),
+    enabled: isAuthenticated,
+    staleTime: 30 * 1000, // Cache for 30 seconds
+    refetchInterval: false,
+    refetchOnWindowFocus: false,
+  });
+
+  // Filter records by search query
+  const filteredRecords = useMemo(() => {
+    if (!searchQuery) {
+      return records;
+    }
+    return records.filter((record) =>
+      record.tool_name.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+  }, [records, searchQuery]);
+
+  // Reset page when search changes
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [searchQuery]);
+
+  // Calculate pagination
+  const totalPages = useMemo(
+    () => Math.ceil(filteredRecords.length / LOGS_PAGE_SIZE),
+    [filteredRecords.length]
+  );
+  const startIndex = useMemo(() => (currentPage - 1) * LOGS_PAGE_SIZE, [currentPage]);
+  const endIndex = useMemo(() => startIndex + LOGS_PAGE_SIZE, [startIndex]);
+  const paginatedRecords = useMemo(
+    () => filteredRecords.slice(startIndex, endIndex),
+    [filteredRecords, startIndex, endIndex]
+  );
+
+  // Notify parent window of initial onboarding status (ONLY ONCE)
+  useEffect(() => {
+    if (
+      hasNotifiedInitialStatus.current ||
+      isLoading ||
+      !records.length ||
+      !isInsForgeCloudProject()
+    ) {
+      return;
+    }
+
+    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,
+      },
+      '*'
+    );
+  }, [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]);
+  const latestRecord = useMemo(() => records[0] || null, [records]);
+
+  return {
+    // Data
+    records: paginatedRecords,
+    allRecords: records,
+    filteredRecords,
+    hasCompletedOnboarding,
+    latestRecord,
+    recordsCount,
+
+    // Search
+    searchQuery,
+    setSearchQuery,
+
+    // Pagination
+    currentPage,
+    setCurrentPage,
+    totalPages,
+
+    // Loading states
+    isLoading,
+    error,
+
+    // Actions
+    refetch,
+  };
+}

package/frontend/src/features/logs/index.ts

@@ -1,5 +1,11 @@
 // Components
-export { LogsTable } from './components/LogsTable';
+export { LogsDataGrid } from './components/LogsDataGrid';
+export { SeverityBadge } from './components/SeverityBadge';
+
+// Helpers
+export { SEVERITY_OPTIONS, SEVERITY_CONFIG, LOGS_PAGE_SIZE } from './helpers';
+export type { SeverityType } from './helpers';
 
 // Services
-export { logsService } from './services/log.service';
+export { auditService } from './services/audit.service';
+export { logService } from './services/log.service';