insforge 0.3.2 → 1.2.10

package/frontend/src/features/logs/page/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>
 

package/frontend/src/features/logs/page/LogsPage.tsx

@@ -0,0 +1,152 @@
+import { useMemo } from 'react';
+import { useParams } from 'react-router-dom';
+import { ChevronDown } from 'lucide-react';
+import { useLogs } from '../hooks/useLogs';
+import {
+  Button,
+  Checkbox,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+  EmptyState,
+  SearchInput,
+} from '@/components';
+import { LogsDataGrid, type LogsColumnDef } from '../components/LogsDataGrid';
+import { SeverityBadge } from '../components/SeverityBadge';
+import { SEVERITY_OPTIONS, LOGS_PAGE_SIZE } from '../helpers';
+import { formatTime } from '@/lib/utils/utils';
+import { LogSchema } from '@insforge/shared-schemas';
+
+export default function LogsPage() {
+  // Get the source from the URL params
+  const { source = 'insforge.logs' } = useParams<{ source?: string }>();
+
+  const {
+    logs: paginatedLogs,
+    filteredLogs,
+    searchQuery: logsSearchQuery,
+    setSearchQuery: setLogsSearchQuery,
+    severityFilter,
+    setSeverityFilter,
+    currentPage,
+    setCurrentPage,
+    totalPages,
+    isLoading: logsLoading,
+    error: logsError,
+    getSeverity,
+  } = useLogs(source);
+
+  const logsColumns: LogsColumnDef[] = useMemo(
+    () => [
+      {
+        key: 'event_message',
+        name: 'Logs',
+        width: '10fr',
+        renderCell: ({ row }) => (
+          <p className="text-sm text-gray-900 dark:text-white font-normal leading-6 truncate">
+            {String(row.eventMessage ?? '')}
+          </p>
+        ),
+      },
+      {
+        key: 'severity',
+        name: 'Severity',
+        width: '120px',
+        renderCell: ({ row }) => (
+          <SeverityBadge severity={getSeverity(row as unknown as LogSchema)} />
+        ),
+      },
+      {
+        key: 'timestamp',
+        name: 'Time',
+        width: 'minmax(200px, 1fr)',
+        renderCell: ({ row }) => (
+          <p className="text-sm text-gray-900 dark:text-white font-normal leading-6 flex-1">
+            {formatTime(String(row.timestamp ?? ''))}
+          </p>
+        ),
+      },
+    ],
+    [getSeverity]
+  );
+
+  return (
+    <div className="flex-1 flex flex-col h-full overflow-hidden bg-bg-gray dark:bg-neutral-800">
+      {/* Header */}
+      <div className="px-3 py-4">
+        <p className="text-xl text-zinc-950 dark:text-white pl-1 mb-4">{source}</p>
+        <div className="flex items-center gap-4">
+          <SearchInput
+            value={logsSearchQuery}
+            onChange={setLogsSearchQuery}
+            placeholder="Search logs"
+            className="flex-1 max-w-80 dark:bg-neutral-800 dark:text-zinc-300 dark:border-neutral-700"
+            debounceTime={300}
+          />
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant="outline"
+                className="w-32 h-10 justify-between bg-transparent dark:bg-transparent border-gray-300 dark:border-neutral-600 text-zinc-950 dark:text-white"
+              >
+                Severity
+                <ChevronDown className="h-4 w-4 opacity-50" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+              align="start"
+              className="w-48"
+              onCloseAutoFocus={(e) => e.preventDefault()}
+            >
+              {SEVERITY_OPTIONS.map(({ value, label, color }) => (
+                <div
+                  key={value}
+                  className="flex items-center gap-2 px-2 py-2 cursor-pointer hover:bg-zinc-100 dark:hover:bg-neutral-600 rounded-sm"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    setSeverityFilter(
+                      severityFilter.includes(value)
+                        ? severityFilter.filter((s) => s !== value)
+                        : [...severityFilter, value]
+                    );
+                  }}
+                >
+                  <Checkbox checked={severityFilter.includes(value)} onChange={() => {}} />
+                  <span className={color}>●</span>
+                  <span className="text-zinc-950 dark:text-white text-sm">{label}</span>
+                </div>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+
+      {/* Table with Pagination */}
+      <div className="flex-1 overflow-hidden">
+        {logsError ? (
+          <div className="flex items-center justify-center h-full">
+            <EmptyState title="Error loading logs" description={String(logsError)} />
+          </div>
+        ) : (
+          <LogsDataGrid
+            columnDefs={logsColumns}
+            data={paginatedLogs}
+            loading={logsLoading}
+            currentPage={currentPage}
+            totalPages={totalPages}
+            pageSize={LOGS_PAGE_SIZE}
+            totalRecords={filteredLogs.length}
+            onPageChange={setCurrentPage}
+            emptyState={
+              <div className="text-sm text-zinc-500 dark:text-zinc-400">
+                {logsSearchQuery || severityFilter.length < 3
+                  ? 'No logs match your search criteria'
+                  : 'No logs found'}
+              </div>
+            }
+          />
+        )}
+      </div>
+    </div>
+  );
+}

package/frontend/src/features/logs/page/MCPLogsPage.tsx

@@ -0,0 +1,84 @@
+import { useMemo } from 'react';
+import { EmptyState, SearchInput } from '@/components';
+import { LogsDataGrid, type LogsColumnDef } from '../components/LogsDataGrid';
+import { useMcpUsage } from '../hooks/useMcpUsage';
+import { formatTime } from '@/lib/utils/utils';
+import { LOGS_PAGE_SIZE } from '../helpers';
+
+export default function MCPLogsPage() {
+  const {
+    records: mcpLogs,
+    filteredRecords: filteredMcpRecords,
+    searchQuery: mcpSearchQuery,
+    setSearchQuery: setMcpSearchQuery,
+    currentPage: mcpCurrentPage,
+    setCurrentPage: setMcpCurrentPage,
+    totalPages: mcpTotalPages,
+    isLoading: mcpLoading,
+    error: mcpError,
+  } = useMcpUsage();
+
+  const mcpColumns: LogsColumnDef[] = useMemo(
+    () => [
+      {
+        key: 'tool_name',
+        name: 'MCP Call',
+        width: '12fr',
+      },
+      {
+        key: 'created_at',
+        name: 'Time',
+        width: 'minmax(200px, 1fr)',
+        renderCell: ({ row }) => (
+          <p className="text-sm text-gray-900 dark:text-white font-normal leading-6">
+            {formatTime(String(row.created_at ?? ''))}
+          </p>
+        ),
+      },
+    ],
+    []
+  );
+
+  return (
+    <div className="flex-1 flex flex-col h-full overflow-hidden bg-bg-gray dark:bg-neutral-800">
+      {/* Header */}
+      <div className="px-3 py-4">
+        <p className="text-xl text-zinc-950 dark:text-white pl-1 mb-4">MCP</p>
+        <div className="flex items-center gap-4">
+          <SearchInput
+            value={mcpSearchQuery}
+            onChange={setMcpSearchQuery}
+            placeholder="Search MCP logs"
+            className="flex-1 max-w-80 dark:bg-neutral-800 dark:text-zinc-300 dark:border-neutral-700"
+            debounceTime={300}
+          />
+        </div>
+      </div>
+
+      {/* Table with Pagination */}
+      <div className="flex-1 overflow-hidden">
+        {mcpError ? (
+          <div className="flex items-center justify-center h-full">
+            <EmptyState title="Error loading MCP logs" description={String(mcpError)} />
+          </div>
+        ) : (
+          <LogsDataGrid
+            columnDefs={mcpColumns}
+            data={mcpLogs}
+            loading={mcpLoading}
+            currentPage={mcpCurrentPage}
+            totalPages={mcpTotalPages}
+            pageSize={LOGS_PAGE_SIZE}
+            totalRecords={filteredMcpRecords.length}
+            onPageChange={setMcpCurrentPage}
+            emptyState={
+              <div className="text-sm text-zinc-500 dark:text-zinc-400">
+                {mcpSearchQuery ? 'No MCP logs match your search' : 'No MCP logs found'}
+              </div>
+            }
+          />
+        )}
+      </div>
+    </div>
+  );
+}

package/frontend/src/features/logs/services/audit.service.ts

@@ -0,0 +1,63 @@
+import { apiClient } from '@/lib/api/client';
+import {
+  GetAuditLogsResponse,
+  ClearAuditLogsResponse,
+  GetAuditLogsRequest,
+  GetAuditLogStatsResponse,
+} from '@insforge/shared-schemas';
+
+export class AuditService {
+  async getAuditLogs({
+    limit = 100,
+    offset = 0,
+    ...filters
+  }: GetAuditLogsRequest): Promise<GetAuditLogsResponse> {
+    const params = new URLSearchParams({
+      limit: limit.toString(),
+      offset: offset.toString(),
+    });
+
+    if (filters?.actor) {
+      params.append('actor', filters.actor);
+    }
+    if (filters?.action) {
+      params.append('action', filters.action);
+    }
+    if (filters?.module) {
+      params.append('module', filters.module);
+    }
+    if (filters?.startDate) {
+      params.append('start_date', filters.startDate);
+    }
+    if (filters?.endDate) {
+      params.append('end_date', filters.endDate);
+    }
+
+    return apiClient.request(`/logs/audits?${params.toString()}`, {
+      headers: apiClient.withAccessToken(),
+    });
+  }
+
+  async getAuditLogStats(days = 7): Promise<GetAuditLogStatsResponse> {
+    const params = new URLSearchParams({
+      days: days.toString(),
+    });
+
+    return apiClient.request(`/logs/audits/stats?${params.toString()}`, {
+      headers: apiClient.withAccessToken(),
+    });
+  }
+
+  async clearAuditLogs(daysToKeep = 90): Promise<ClearAuditLogsResponse> {
+    const params = new URLSearchParams({
+      days_to_keep: daysToKeep.toString(),
+    });
+
+    return apiClient.request(`/logs/audits?${params.toString()}`, {
+      method: 'DELETE',
+      headers: apiClient.withAccessToken(),
+    });
+  }
+}
+
+export const auditService = new AuditService();

package/frontend/src/features/logs/services/log.service.ts

@@ -1,114 +1,20 @@
 import { apiClient } from '@/lib/api/client';
-import {
-  GetAuditLogsResponse,
-  ClearAuditLogsResponse,
-  GetAuditLogsRequest,
-  GetAuditLogStatsResponse,
+import type {
+  LogSourceSchema,
+  LogSchema,
+  GetLogsResponse,
+  LogStatsSchema,
 } from '@insforge/shared-schemas';
 
-export class LogsService {
-  async getAuditLogs({
-    limit = 100,
-    offset = 0,
-    ...filters
-  }: GetAuditLogsRequest): Promise<GetAuditLogsResponse> {
-    const params = new URLSearchParams({
-      limit: limit.toString(),
-      offset: offset.toString(),
-    });
-
-    if (filters?.actor) {
-      params.append('actor', filters.actor);
-    }
-    if (filters?.action) {
-      params.append('action', filters.action);
-    }
-    if (filters?.module) {
-      params.append('module', filters.module);
-    }
-    if (filters?.startDate) {
-      params.append('start_date', filters.startDate);
-    }
-    if (filters?.endDate) {
-      params.append('end_date', filters.endDate);
-    }
-
-    return apiClient.request(`/logs/audits?${params.toString()}`, {
-      headers: apiClient.withAccessToken(),
-    });
-  }
-
-  async getAuditLogStats(days = 7): Promise<GetAuditLogStatsResponse> {
-    const params = new URLSearchParams({
-      days: days.toString(),
-    });
-
-    return apiClient.request(`/logs/audits/stats?${params.toString()}`, {
-      headers: apiClient.withAccessToken(),
-    });
-  }
-
-  async clearAuditLogs(daysToKeep = 90): Promise<ClearAuditLogsResponse> {
-    const params = new URLSearchParams({
-      days_to_keep: daysToKeep.toString(),
-    });
-
-    return apiClient.request(`/logs/audits?${params.toString()}`, {
-      method: 'DELETE',
-      headers: apiClient.withAccessToken(),
-    });
-  }
-}
-
-// Analytics types
-export interface LogSource {
-  id: string;
-  name: string;
-  token: string;
-}
-
-export interface AnalyticsLogBody {
-  status_code?: number;
-  duration?: string;
-  size?: number;
-  log_type?: string;
-  ip?: string;
-  user_agent?: string;
-  path?: string;
-  error?: string;
-  stack?: string;
-  [key: string]: unknown;
-}
-
-export interface AnalyticsLogRecord {
-  id: string;
-  event_message: string;
-  timestamp: string;
-  body: AnalyticsLogBody;
-  source?: string; // Added for search results
-}
-
-export interface AnalyticsLogResponse {
-  logs: AnalyticsLogRecord[];
-  total: number;
-  tableName: string;
-}
-
-export interface LogSourceStats {
-  source: string;
-  count: number;
-  lastActivity: string;
-}
-
-class AnalyticsService {
+export class LogService {
   // Get all available log sources
-  async getLogSources(): Promise<LogSource[]> {
-    return apiClient.request('/logs/analytics/sources');
+  async getLogSources(): Promise<LogSourceSchema[]> {
+    return apiClient.request('/logs/sources');
   }
 
   // Get statistics for all log sources
-  async getLogSourceStats(): Promise<LogSourceStats[]> {
-    return apiClient.request('/logs/analytics/stats');
+  async getLogSourceStats(): Promise<LogStatsSchema[]> {
+    return apiClient.request('/logs/stats');
   }
 
   // Get logs from a specific source with timestamp-based pagination
@@ -116,7 +22,7 @@ class AnalyticsService {
     sourceName: string,
     limit = 100,
     beforeTimestamp?: string
-  ): Promise<AnalyticsLogResponse> {
+  ): Promise<GetLogsResponse> {
     const params = new URLSearchParams({
       limit: limit.toString(),
     });
@@ -125,7 +31,7 @@ class AnalyticsService {
       params.append('before_timestamp', beforeTimestamp);
     }
 
-    return apiClient.request(`/logs/analytics/${sourceName}?${params.toString()}`);
+    return apiClient.request(`/logs/${sourceName}?${params.toString()}`);
   }
 
   // Search across all logs or specific source
@@ -135,7 +41,7 @@ class AnalyticsService {
     limit = 100,
     offset = 0
   ): Promise<{
-    records: AnalyticsLogRecord[];
+    records: LogSchema[];
     total: number;
   }> {
     const params = new URLSearchParams({
@@ -148,7 +54,7 @@ class AnalyticsService {
       params.append('source', sourceName);
     }
 
-    const response = await apiClient.request(`/logs/analytics/search?${params.toString()}`, {
+    const response = await apiClient.request(`/logs/search?${params.toString()}`, {
       returnFullResponse: true,
     });
 
@@ -167,5 +73,4 @@ class AnalyticsService {
   }
 }
 
-export const logsService = new LogsService();
-export const analyticsService = new AnalyticsService();
+export const logService = new LogService();

package/frontend/src/features/logs/services/usage.service.ts

@@ -0,0 +1,31 @@
+import { apiClient } from '@/lib/api/client';
+
+export interface McpUsageRecord {
+  tool_name: string;
+  success: boolean;
+  created_at: string;
+}
+
+export interface McpUsageResponse {
+  records: McpUsageRecord[];
+}
+
+export class UsageService {
+  /**
+   * Get MCP usage records
+   */
+  async getMcpUsage(success: boolean = true, limit: number = 200): Promise<McpUsageRecord[]> {
+    const params = new URLSearchParams({
+      success: success.toString(),
+      limit: limit.toString(),
+    });
+
+    const data = (await apiClient.request(`/usage/mcp?${params.toString()}`, {
+      headers: apiClient.withAccessToken(),
+    })) as McpUsageResponse;
+
+    return data.records || [];
+  }
+}
+
+export const usageService = new UsageService();