insforge 0.3.3 → 1.3.0

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,128 @@
+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 { postMessageToParent } from '@/lib/utils/cloudMessaging';
+import { LOGS_PAGE_SIZE } from '../helpers';
+
+// ============================================================================
+// Main Hook
+// ============================================================================
+
+/**
+ * Hook to manage MCP usage data
+ *
+ * Features:
+ * - Fetches MCP logs from backend
+ * - Provides helper functions for data access
+ * - Handles initial parent window notification for onboarding (if in iframe)
+ * - Supports search and pagination
+ *
+ */
+export function useMcpUsage() {
+  // Hooks
+  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];
+    postMessageToParent({
+      type: 'MCP_CONNECTION_STATUS',
+      connected: true,
+      tool_name: latestRecord.tool_name,
+      timestamp: latestRecord.created_at,
+    });
+  }, [isLoading, records]);
+
+  // 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';

package/frontend/src/features/logs/{page → pages}/AuditsPage.tsx

@@ -1,17 +1,20 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import { RefreshCw, Search, FileText, Trash2 } from 'lucide-react';
-import { Button } from '@/components/radix/Button';
-import { Input } from '@/components/radix/Input';
-import { Alert, AlertDescription } from '@/components/radix/Alert';
-import { LogsTable } from '@/features/logs/components/LogsTable';
-import { ConfirmDialog } from '@/components/ConfirmDialog';
+import { LogsDataGrid, type LogsColumnDef } from '@/features/logs/components/LogsDataGrid';
+import { formatTime } from '@/lib/utils/utils';
+import { LOGS_PAGE_SIZE } from '@/features/logs/helpers';
 import { useConfirm } from '@/lib/hooks/useConfirm';
 import {
+  Alert,
+  AlertDescription,
+  Button,
+  ConfirmDialog,
+  Input,
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from '@/components/radix/Tooltip';
+} from '@/components';
 import { useAuditLogs, useClearAuditLogs } from '@/features/logs/hooks/useAuditLogs';
 import type { GetAuditLogsRequest } from '@insforge/shared-schemas';
 
@@ -19,11 +22,10 @@ export default function AuditsPage() {
   const [searchQuery, setSearchQuery] = useState('');
   const [currentPage, setCurrentPage] = useState(1);
   const [filters, setFilters] = useState<Partial<GetAuditLogsRequest>>({});
-  const pageSize = 50;
   const { confirm, confirmDialogProps } = useConfirm();
 
   // Calculate offset based on current page
-  const offset = (currentPage - 1) * pageSize;
+  const offset = (currentPage - 1) * LOGS_PAGE_SIZE;
 
   // Fetch logs with pagination and filters
   const {
@@ -32,7 +34,7 @@ export default function AuditsPage() {
     error,
     refetch,
   } = useAuditLogs({
-    limit: pageSize,
+    limit: LOGS_PAGE_SIZE,
     offset,
     ...filters,
   });
@@ -73,6 +75,47 @@ export default function AuditsPage() {
   // Extract data from response
   const logsData = logsResponse?.data || [];
   const totalRecords = logsResponse?.pagination?.total || 0;
+
+  // Define columns for audit logs
+  const columns: LogsColumnDef[] = useMemo(
+    () => [
+      {
+        key: 'actor',
+        name: 'Actor',
+        width: '200px',
+      },
+      {
+        key: 'action',
+        name: 'Action',
+        width: '200px',
+      },
+      {
+        key: 'module',
+        name: 'Module',
+        width: '150px',
+      },
+      {
+        key: 'details',
+        name: 'Details',
+        renderCell: ({ row }) => (
+          <p className="text-sm text-gray-900 dark:text-white font-normal leading-6 break-all">
+            {row.details ? JSON.stringify(row.details) : '-'}
+          </p>
+        ),
+      },
+      {
+        key: 'createdAt',
+        name: 'Time',
+        width: '250px',
+        renderCell: ({ row }) => (
+          <p className="text-sm text-gray-900 dark:text-white font-normal leading-6">
+            {formatTime(String(row.createdAt ?? ''))}
+          </p>
+        ),
+      },
+    ],
+    []
+  );
   return (
     <div className="flex h-full bg-bg-gray dark:bg-neutral-800">
       <div className="flex-1 min-w-0 flex flex-col overflow-hidden">
@@ -120,7 +163,7 @@ export default function AuditsPage() {
                           size="icon"
                           className="h-9 w-9 hover:bg-gray-100 dark:hover:bg-neutral-700"
                           onClick={handleClearLogs}
-                          disabled={clearMutation.isPending || logsData.length === 0}
+                          disabled={clearMutation.isPending || !logsData.length}
                         >
                           <Trash2 className="h-4 w-4 text-gray-600 dark:text-neutral-400" />
                         </Button>
@@ -141,7 +184,7 @@ export default function AuditsPage() {
                 placeholder="Search logs..."
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
-                className="pl-9 h-11 bg-white dark:bg-neutral-900 border-gray-200 dark:border-neutral-700 rounded-full text-sm"
+                className="pl-9 h-11 bg-white dark:bg-neutral-900 border-gray-200 dark:border-neutral-700 rounded-full text-sm dark:text-white"
               />
             </div>
           </div>
@@ -155,33 +198,43 @@ export default function AuditsPage() {
             </Alert>
           )}
 
-          {logsData.length === 0 && !isLoading ? (
-            <div className="flex-1 flex items-center justify-center">
-              <div className="text-center">
-                <FileText className="mx-auto h-12 w-12 text-gray-400 dark:text-neutral-600 mb-4" />
-                <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
-                  No Audit Logs Available
-                </h3>
-                <p className="text-sm text-gray-500 dark:text-neutral-400">
-                  {searchQuery
-                    ? 'No logs found matching your search criteria'
-                    : 'Audit logs will appear here once operations are performed'}
-                </p>
+          <div className="flex-1 flex flex-col overflow-hidden px-8">
+            {!logsData.length && !isLoading ? (
+              <div className="flex-1 flex items-center justify-center">
+                <div className="text-center">
+                  <FileText className="mx-auto h-12 w-12 text-gray-400 dark:text-neutral-600 mb-4" />
+                  <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
+                    No Audit Logs Available
+                  </h3>
+                  <p className="text-sm text-gray-500 dark:text-neutral-400">
+                    {searchQuery
+                      ? 'No logs found matching your search criteria'
+                      : 'Audit logs will appear here once operations are performed'}
+                  </p>
+                </div>
               </div>
-            </div>
-          ) : (
-            <LogsTable
-              logs={logsData}
-              loading={isLoading}
-              searchQuery={searchQuery}
-              onRefresh={() => void refetch()}
-              onConfirm={confirm}
-              currentPage={currentPage}
-              totalRecords={totalRecords}
-              pageSize={pageSize}
-              onPageChange={setCurrentPage}
-            />
-          )}
+            ) : (
+              <div className="flex-1 overflow-hidden">
+                <LogsDataGrid
+                  columnDefs={columns}
+                  data={logsData}
+                  loading={isLoading}
+                  currentPage={currentPage}
+                  totalPages={Math.ceil(totalRecords / LOGS_PAGE_SIZE)}
+                  pageSize={LOGS_PAGE_SIZE}
+                  totalRecords={totalRecords}
+                  onPageChange={setCurrentPage}
+                  emptyState={
+                    <div className="text-sm text-zinc-500 dark:text-zinc-400">
+                      {searchQuery
+                        ? 'No audit logs match your search criteria'
+                        : 'No audit logs found'}
+                    </div>
+                  }
+                />
+              </div>
+            )}
+          </div>
         </div>
       </div>