insforge 0.3.1

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

@@ -0,0 +1,192 @@
+import { useState, useEffect } 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 { useConfirm } from '@/lib/hooks/useConfirm';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/radix/Tooltip';
+import { useAuditLogs, useClearAuditLogs } from '@/features/logs/hooks/useAuditLogs';
+import type { GetAuditLogsRequest } from '@insforge/shared-schemas';
+
+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;
+
+  // Fetch logs with pagination and filters
+  const {
+    data: logsResponse,
+    isLoading,
+    error,
+    refetch,
+  } = useAuditLogs({
+    limit: pageSize,
+    offset,
+    ...filters,
+  });
+
+  const clearMutation = useClearAuditLogs();
+
+  const handleRefresh = () => {
+    void refetch();
+  };
+
+  const handleClearLogs = () => {
+    void confirm({
+      title: 'Clear Audit Logs',
+      description:
+        'Are you sure you want to clear old audit logs? This will keep the last 90 days of logs.',
+      confirmText: 'Clear Logs',
+      cancelText: 'Cancel',
+    }).then((confirmed) => {
+      if (confirmed) {
+        clearMutation.mutate(90);
+      }
+    });
+  };
+
+  // Apply search filter
+  useEffect(() => {
+    setCurrentPage(1);
+    if (searchQuery) {
+      // Search can filter by actor, action, or module
+      setFilters({
+        actor: searchQuery,
+      });
+    } else {
+      setFilters({});
+    }
+  }, [searchQuery]);
+
+  // Extract data from response
+  const logsData = logsResponse?.data || [];
+  const totalRecords = logsResponse?.pagination?.total || 0;
+  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">
+        {/* Sticky Header Section */}
+        <div className="sticky top-0 z-30 bg-bg-gray dark:bg-neutral-800">
+          <div className="px-8 pt-6 pb-4">
+            {/* Page Header */}
+            <div className="flex items-center justify-between">
+              <div className="flex items-center">
+                <nav className="flex items-center text-[22px] font-semibold">
+                  <span className="text-gray-900 dark:text-white">Audit Logs</span>
+                </nav>
+
+                {/* Separator */}
+                <div className="mx-4 h-6 w-px bg-gray-200 dark:bg-neutral-700" />
+
+                {/* Action buttons group */}
+                <div className="flex items-center gap-1">
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="h-9 w-9 hover:bg-gray-100 dark:hover:bg-neutral-700"
+                          onClick={handleRefresh}
+                          disabled={isLoading}
+                        >
+                          <RefreshCw
+                            className={`h-4 w-4 text-gray-600 dark:text-neutral-400 ${isLoading ? 'animate-spin' : ''}`}
+                          />
+                        </Button>
+                      </TooltipTrigger>
+                      <TooltipContent side="bottom" align="center">
+                        <p>Refresh</p>
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="h-9 w-9 hover:bg-gray-100 dark:hover:bg-neutral-700"
+                          onClick={handleClearLogs}
+                          disabled={clearMutation.isPending || logsData.length === 0}
+                        >
+                          <Trash2 className="h-4 w-4 text-gray-600 dark:text-neutral-400" />
+                        </Button>
+                      </TooltipTrigger>
+                      <TooltipContent side="bottom" align="center">
+                        <p>Clear old logs</p>
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                </div>
+              </div>
+            </div>
+
+            {/* Search Bar */}
+            <div className="relative mt-6">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-500 dark:text-neutral-400" />
+              <Input
+                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"
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 flex flex-col overflow-hidden">
+          {error && (
+            <Alert variant="destructive" className="mb-4 mx-8 mt-4">
+              <AlertDescription>{String(error)}</AlertDescription>
+            </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>
+            </div>
+          ) : (
+            <LogsTable
+              logs={logsData}
+              loading={isLoading}
+              searchQuery={searchQuery}
+              onRefresh={() => void refetch()}
+              onConfirm={confirm}
+              currentPage={currentPage}
+              totalRecords={totalRecords}
+              pageSize={pageSize}
+              onPageChange={setCurrentPage}
+            />
+          )}
+        </div>
+      </div>
+
+      {/* Confirm Dialog */}
+      <ConfirmDialog {...confirmDialogProps} />
+    </div>
+  );
+}

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

@@ -0,0 +1,171 @@
+import { apiClient } from '@/lib/api/client';
+import {
+  GetAuditLogsResponse,
+  ClearAuditLogsResponse,
+  GetAuditLogsRequest,
+  GetAuditLogStatsResponse,
+} 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 {
+  // Get all available log sources
+  async getLogSources(): Promise<LogSource[]> {
+    return apiClient.request('/logs/analytics/sources');
+  }
+
+  // Get statistics for all log sources
+  async getLogSourceStats(): Promise<LogSourceStats[]> {
+    return apiClient.request('/logs/analytics/stats');
+  }
+
+  // Get logs from a specific source with timestamp-based pagination
+  async getLogsBySource(
+    sourceName: string,
+    limit = 100,
+    beforeTimestamp?: string
+  ): Promise<AnalyticsLogResponse> {
+    const params = new URLSearchParams({
+      limit: limit.toString(),
+    });
+
+    if (beforeTimestamp) {
+      params.append('before_timestamp', beforeTimestamp);
+    }
+
+    return apiClient.request(`/logs/analytics/${sourceName}?${params.toString()}`);
+  }
+
+  // Search across all logs or specific source
+  async searchLogs(
+    query: string,
+    sourceName?: string,
+    limit = 100,
+    offset = 0
+  ): Promise<{
+    records: AnalyticsLogRecord[];
+    total: number;
+  }> {
+    const params = new URLSearchParams({
+      q: query,
+      limit: limit.toString(),
+      offset: offset.toString(),
+    });
+
+    if (sourceName) {
+      params.append('source', sourceName);
+    }
+
+    const response = await apiClient.request(`/logs/analytics/search?${params.toString()}`, {
+      returnFullResponse: true,
+    });
+
+    // Handle response - search returns {logs: [], total: number}
+    if (response.logs && Array.isArray(response.logs)) {
+      return {
+        records: response.logs,
+        total: response.total || response.logs.length,
+      };
+    }
+
+    return {
+      records: [],
+      total: 0,
+    };
+  }
+}
+
+export const logsService = new LogsService();
+export const analyticsService = new AnalyticsService();

package/frontend/src/features/metadata/hooks/useMetadata.ts

@@ -0,0 +1,53 @@
+import { useQuery } from '@tanstack/react-query';
+import { metadataService } from '../services/metadata.service';
+
+interface UseMetadataOptions {
+  enabled?: boolean;
+  staleTime?: number;
+}
+
+export function useMetadata(options?: UseMetadataOptions) {
+  const {
+    data: metadata,
+    isLoading,
+    error,
+    refetch,
+  } = useQuery({
+    queryKey: ['metadata', 'full'],
+    queryFn: () => metadataService.getFullMetadata(),
+    staleTime: options?.staleTime ?? 5 * 60 * 1000, // Cache for 5 minutes by default
+    enabled: options?.enabled ?? true,
+  });
+
+  return {
+    metadata,
+    auth: metadata?.auth,
+    tables: Object.keys(metadata?.database.tables ?? {}),
+    storage: metadata?.storage,
+    version: metadata?.version || 'Unknown',
+    isLoading,
+    error,
+    refetch,
+  };
+}
+
+export function useApiKey(options?: UseMetadataOptions) {
+  const {
+    data: apiKey,
+    isLoading,
+    error,
+    refetch,
+  } = useQuery({
+    queryKey: ['metadata', 'apiKey'],
+    queryFn: () => metadataService.fetchApiKey(),
+    staleTime: options?.staleTime ?? 10 * 60 * 1000, // Cache for 10 minutes by default
+    enabled: options?.enabled ?? true,
+  });
+
+  return {
+    apiKey,
+    isLoading,
+    error,
+    refetch,
+  };
+}

package/frontend/src/features/metadata/page/MetadataPage.tsx

@@ -0,0 +1,136 @@
+import { RefreshCw, Info } from 'lucide-react';
+import { useMetadata } from '../hooks/useMetadata';
+import { Skeleton } from '@/components/radix/Skeleton';
+import { Button } from '@/components/radix/Button';
+import { Alert, AlertDescription } from '@/components/radix/Alert';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/radix/Tooltip';
+import { JsonHighlight } from '@/components';
+
+export default function MetadataPage() {
+  const { metadata, isLoading, error, refetch: refetchMetadata } = useMetadata();
+
+  const handleRefresh = () => {
+    void refetchMetadata();
+  };
+
+  if (error) {
+    return (
+      <main className="min-h-screen bg-bg-gray">
+        <div className="px-8 pt-6 pb-4">
+          <div className="flex items-center">
+            <nav className="flex items-center text-[22px] font-semibold">
+              <span className="text-gray-900 dark:text-white">Metadata</span>
+            </nav>
+          </div>
+        </div>
+        <div className="px-8 py-8">
+          <Alert variant="destructive">
+            <AlertDescription>
+              Failed to load metadata. Please try refreshing the page.
+            </AlertDescription>
+          </Alert>
+        </div>
+      </main>
+    );
+  }
+
+  if (isLoading) {
+    return <MetadataSkeleton />;
+  }
+
+  return (
+    <main className="min-h-screen bg-bg-gray dark:bg-neutral-800">
+      {/* Header */}
+      <div className="sticky top-0 z-30 bg-bg-gray border-b border-gray-200 dark:border-neutral-700 dark:bg-neutral-800">
+        <div className="px-8 pt-6 pb-4">
+          <div className="flex items-center">
+            <nav className="flex items-center text-[22px] font-semibold">
+              <span className="text-gray-900 dark:text-white">Metadata</span>
+            </nav>
+
+            {/* Separator */}
+            <div className="mx-4 h-6 w-px bg-gray-200 dark:bg-neutral-500" />
+
+            {/* Action buttons group */}
+            <div className="flex items-center gap-1">
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button variant="ghost" size="icon" className="h-9 w-9" onClick={handleRefresh}>
+                      <RefreshCw className="h-4 w-4 text-zinc-900 dark:text-white" />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>Refresh Metadata</p>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="px-8 py-8">
+        {/* Metadata Section */}
+        <div className="space-y-6">
+          <div>
+            <h2 className="text-2xl font-semibold text-gray-900 dark:text-white mb-2">
+              System Metadata
+            </h2>
+            <p className="text-gray-600 dark:text-zinc-400">
+              Complete metadata information for the InsForge system
+            </p>
+          </div>
+
+          <div className="bg-white dark:bg-neutral-800 rounded-lg border border-gray-200 dark:border-neutral-700 overflow-hidden">
+            <div className="flex items-center justify-between px-6 pt-4 bg-white dark:bg-neutral-800">
+              <div className="flex items-center gap-2">
+                <Info className="h-5 w-5 text-gray-700 dark:text-white" />
+                <span className="font-medium text-gray-900 dark:text-white">Raw JSON Data</span>
+              </div>
+            </div>
+
+            <div className="px-4 pb-4 pt-4">
+              {!metadata && (
+                <Alert className="border-yellow-200 bg-yellow-50 mb-4">
+                  <AlertDescription className="text-yellow-800">
+                    No metadata available. Please ensure the backend is running and you&apos;re
+                    logged in as an admin.
+                  </AlertDescription>
+                </Alert>
+              )}
+
+              {metadata && <JsonHighlight json={JSON.stringify(metadata, null, 2)} />}
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+}
+
+function MetadataSkeleton() {
+  return (
+    <main className="min-h-screen bg-bg-gray">
+      <div className="px-8 pt-6 pb-4">
+        <div className="flex items-center">
+          <nav className="flex items-center text-[22px] font-semibold">
+            <span className="text-gray-900">Metadata</span>
+          </nav>
+        </div>
+      </div>
+      <div className="px-8 py-8">
+        <div className="space-y-6">
+          <Skeleton className="h-8 w-48" />
+          <Skeleton className="h-4 w-96" />
+          <Skeleton className="h-100" />
+        </div>
+      </div>
+    </main>
+  );
+}

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

@@ -0,0 +1,17 @@
+import { apiClient } from '@/lib/api/client';
+import { AppMetadataSchema } from '@insforge/shared-schemas';
+
+export class MetadataService {
+  async fetchApiKey() {
+    const data = await apiClient.request('/metadata/api-key');
+    return data.apiKey;
+  }
+
+  async getFullMetadata(): Promise<AppMetadataSchema> {
+    return apiClient.request('/metadata', {
+      headers: apiClient.withAccessToken(),
+    });
+  }
+}
+
+export const metadataService = new MetadataService();

package/frontend/src/features/onboard/components/CompletionCard.tsx

@@ -0,0 +1,41 @@
+import { Button } from '@/components/radix/Button';
+import CheckedIcon from '@/assets/icons/checked.svg';
+import { useNavigate } from 'react-router-dom';
+import { useOnboardingCompletion } from '@/lib/hooks/useOnboardingCompletion';
+import { useEffect } from 'react';
+
+export function CompletionCard() {
+  const navigate = useNavigate();
+  const { markAsCompleted } = useOnboardingCompletion();
+
+  // Mark as completed when this component is mounted
+  useEffect(() => {
+    markAsCompleted();
+  }, [markAsCompleted]);
+
+  const handleNavigate = async () => {
+    await navigate('/dashboard');
+  };
+
+  return (
+    <div className="border border-transparent dark:border-neutral-700 rounded-xl bg-white dark:bg-neutral-800 py-8 px-6">
+      <div className="flex flex-col items-center justify-center gap-8">
+        <div className="flex flex-col items-center justify-center gap-4 text-center">
+          <img src={CheckedIcon} alt="Checked" className="w-10 h-10" />
+          <p className="text-lg font-semibold text-black dark:text-white">You are all set!</p>
+          <p className="text-zinc-500 dark:text-zinc-400 text-sm">
+            Your AI agent is now full-stack — powered by <b>InsForge</b>.
+            <br /> Let&apos;s build something <b>real</b>.
+          </p>
+        </div>
+        <Button
+          variant="default"
+          className="px-4 py-2 h-10 text-sm font-medium dark:bg-emerald-300 dark:text-black dark:hover:bg-emerald-200"
+          onClick={() => void handleNavigate()}
+        >
+          Go to Dashboard
+        </Button>
+      </div>
+    </div>
+  );
+}