insforge 0.3.3 → 1.3.0

package/frontend/src/features/visualizer/components/SchemaVisualizer.tsx

@@ -12,23 +12,32 @@ import {
   ConnectionMode,
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
-import { TableNode, VisualizerTableSchema, VisualizerTableColumnSchema } from './TableNode';
+import { TableNode } from './TableNode';
 import { AuthNode } from './AuthNode';
 import { BucketNode } from './BucketNode';
+import { useAllTableSchemas } from '@/features/database/hooks/useTables';
+import { useTheme } from '@/lib/contexts/ThemeContext';
 import {
   AppMetadataSchema,
   StorageBucketSchema,
   AuthMetadataSchema,
+  GetTableSchemaResponse,
 } from '@insforge/shared-schemas';
 
 interface SchemaVisualizerProps {
   metadata: AppMetadataSchema;
   userCount?: number;
+  // Optional external schemas for templates
+  externalSchemas?: GetTableSchemaResponse[];
+  // Control visibility of components
+  showControls?: boolean;
+  showMiniMap?: boolean;
 }
 
 type TableNodeData = {
-  table: VisualizerTableSchema;
+  table: GetTableSchemaResponse;
   referencedColumns: string[];
+  showRecordCount?: boolean;
 };
 
 type BucketNodeData = {
@@ -38,6 +47,7 @@ type BucketNodeData = {
 type AuthNodeData = {
   authMetadata: AuthMetadataSchema;
   userCount?: number;
+  isReferenced?: boolean;
 };
 
 type CustomNodeData = TableNodeData | BucketNodeData | AuthNodeData;
@@ -119,7 +129,7 @@ const getLayoutedElements = (nodes: Node<CustomNodeData>[], edges: BuiltInEdge[]
 
   // Position table nodes in a grid in the middle
   let positionedTableNodes: Node<CustomNodeData>[] = [];
-  if (tableNodes.length > 0) {
+  if (tableNodes.length) {
     const cols = Math.ceil(Math.sqrt(tableNodes.length));
 
     // Group tables by column for better height calculation
@@ -179,53 +189,20 @@ const getNodeColor = (node: Node<CustomNodeData>) => {
   }
 };
 
-export function SchemaVisualizer({ metadata, userCount }: SchemaVisualizerProps) {
-  // Transform the new metadata structure to the visualizer format
-  const tables = useMemo(() => {
-    const tablesRecord = metadata.database.tables;
-    return Object.entries(tablesRecord).map(([tableName, tableData]): VisualizerTableSchema => {
-      // Check for primary key columns from indexes
-      const primaryKeyColumns = new Set<string>();
-
-      tableData.indexes.forEach((index) => {
-        if (index.isPrimary) {
-          // Extract column names from index definition
-          const match = index.indexdef.match(/\(([^)]+)\)/);
-          if (match) {
-            match[1].split(',').forEach((col) => {
-              primaryKeyColumns.add(col.trim().replace(/"/g, ''));
-            });
-          }
-        }
-      });
-
-      // Transform columns from the new schema format
-      const columns = tableData.schema.map((col) => {
-        const column: VisualizerTableColumnSchema = {
-          columnName: col.columnName,
-          type: col.dataType.toLowerCase().substring(0, 4), // Truncate type to first 4 characters
-          isPrimaryKey: primaryKeyColumns.has(col.columnName),
-        };
-
-        // Find foreign key info for this column
-        const foreignKey = tableData.foreignKeys.find((fk) => fk.columnName === col.columnName);
-        if (foreignKey) {
-          column.foreignKey = {
-            referenceTable: foreignKey.foreignTableName,
-            referenceColumn: foreignKey.foreignColumnName,
-          };
-        }
+export function SchemaVisualizer({
+  metadata,
+  userCount,
+  externalSchemas,
+  showControls = true,
+  showMiniMap = true,
+}: SchemaVisualizerProps) {
+  const { resolvedTheme } = useTheme();
 
-        return column;
-      });
+  // Fetch all table schemas (only when external schemas are not provided)
+  const { allSchemas, isLoading: isLoadingSchemas } = useAllTableSchemas(!externalSchemas);
 
-      return {
-        tableName,
-        columns,
-        recordCount: tableData.recordCount ?? 0, // Use actual record count from metadata
-      };
-    });
-  }, [metadata.database.tables]);
+  // Use external schemas if provided, otherwise use fetched schemas
+  const tables = externalSchemas || allSchemas;
 
   const initialNodes = useMemo(() => {
     // First, collect all referenced columns for each table
@@ -254,19 +231,32 @@ export function SchemaVisualizer({ metadata, userCount }: SchemaVisualizerProps)
       data: {
         table,
         referencedColumns: referencedColumnsByTable[table.tableName] || [],
+        showRecordCount: !externalSchemas, // Hide record count when using external schemas (template preview)
       },
     }));
 
+    const nodes: Node<CustomNodeData>[] = [...tableNodes];
+
+    // Add bucket nodes
     const bucketNodes: Node<BucketNodeData>[] = metadata.storage.buckets.map((bucket) => ({
       id: `bucket-${bucket.name}`,
       type: 'bucketNode',
       position: { x: 0, y: 0 },
       data: { bucket },
     }));
+    nodes.push(...bucketNodes);
+
+    // Check if any tables reference users.id
+    const isUsersReferenced = tables.some((table) =>
+      table.columns.some(
+        (column) =>
+          column.foreignKey &&
+          column.foreignKey.referenceTable === 'users' &&
+          column.foreignKey.referenceColumn === 'id'
+      )
+    );
 
-    const nodes: Node<CustomNodeData>[] = [...tableNodes, ...bucketNodes];
-
-    // Add authentication node if authData is provided
+    // Add authentication node
     nodes.push({
       id: 'authentication',
       type: 'authNode',
@@ -274,41 +264,66 @@ export function SchemaVisualizer({ metadata, userCount }: SchemaVisualizerProps)
       data: {
         authMetadata: metadata.auth,
         userCount,
+        isReferenced: isUsersReferenced,
       },
     });
 
     return nodes;
-  }, [metadata, userCount, tables]);
+  }, [tables, metadata, externalSchemas, userCount]);
 
   const initialEdges = useMemo(() => {
     const edges: BuiltInEdge[] = [];
+    const edgeColor = resolvedTheme === 'dark' ? 'white' : '#18181b'; // zinc-950 for light mode
 
     tables.forEach((table) => {
       table.columns.forEach((column) => {
         if (column.foreignKey) {
+          // Check if this is a reference to users.id
+          const isAuthReference =
+            column.foreignKey.referenceTable === 'users' &&
+            column.foreignKey.referenceColumn === 'id';
+
           const edgeId = `${table.tableName}-${column.columnName}-${column.foreignKey.referenceTable}`;
-          edges.push({
-            id: edgeId,
-            source: table.tableName,
-            target: column.foreignKey.referenceTable,
-            sourceHandle: `${column.columnName}-source`,
-            targetHandle: `${column.foreignKey.referenceColumn}-target`,
-            type: 'smoothstep',
-            animated: true,
-            style: { stroke: 'white', strokeWidth: 2, zIndex: 1000 },
-            zIndex: 1000,
-            pathOptions: {
-              offset: 40,
-            },
-          });
+
+          if (isAuthReference) {
+            // Connect to the authentication node
+            edges.push({
+              id: edgeId,
+              source: table.tableName,
+              target: 'authentication',
+              sourceHandle: `${column.columnName}-source`,
+              targetHandle: 'id-target',
+              type: 'smoothstep',
+              animated: true,
+              style: { stroke: edgeColor, strokeWidth: 2, zIndex: 1000 },
+              zIndex: 1000,
+              pathOptions: {
+                offset: 40,
+              },
+            });
+          } else {
+            // Regular table-to-table edge
+            edges.push({
+              id: edgeId,
+              source: table.tableName,
+              target: column.foreignKey.referenceTable,
+              sourceHandle: `${column.columnName}-source`,
+              targetHandle: `${column.foreignKey.referenceColumn}-target`,
+              type: 'smoothstep',
+              animated: true,
+              style: { stroke: edgeColor, strokeWidth: 2, zIndex: 1000 },
+              zIndex: 1000,
+              pathOptions: {
+                offset: 40,
+              },
+            });
+          }
         }
       });
     });
 
-    // Add authentication edges if authData exists
-
     return edges;
-  }, [tables]);
+  }, [tables, resolvedTheme]);
 
   const { nodes: layoutedNodes, edges: layoutedEdges } = useMemo(
     () => getLayoutedElements(initialNodes, initialEdges),
@@ -319,15 +334,26 @@ export function SchemaVisualizer({ metadata, userCount }: SchemaVisualizerProps)
   const [edges, setEdges, onEdgesChange] = useEdgesState(layoutedEdges);
 
   useEffect(() => {
-    setNodes(layoutedNodes);
-    setEdges(layoutedEdges);
-  }, [layoutedNodes, layoutedEdges, setNodes, setEdges]);
+    if (!isLoadingSchemas) {
+      setNodes(layoutedNodes);
+      setEdges(layoutedEdges);
+    }
+  }, [layoutedNodes, layoutedEdges, isLoadingSchemas, setNodes, setEdges]);
 
   const onConnect = useCallback(
     (params: Connection) => setEdges((eds) => addEdge(params, eds)),
     [setEdges]
   );
 
+  // Don't render ReactFlow until data is loaded (only if not using external schemas)
+  if (!externalSchemas && isLoadingSchemas) {
+    return (
+      <div className="w-full h-full flex items-center justify-center text-white">
+        Loading schemas...
+      </div>
+    );
+  }
+
   return (
     <div className="w-full h-full">
       <ReactFlow
@@ -339,20 +365,22 @@ export function SchemaVisualizer({ metadata, userCount }: SchemaVisualizerProps)
         nodeTypes={nodeTypes}
         connectionMode={ConnectionMode.Loose}
         fitView
-        fitViewOptions={{ padding: 1, maxZoom: 2, minZoom: 1 }}
+        fitViewOptions={{ padding: 1, maxZoom: 2, minZoom: 0.8 }}
         minZoom={0.1}
         maxZoom={2}
         proOptions={{ hideAttribution: true }}
         elevateEdgesOnSelect={true}
-        colorMode="dark"
+        colorMode={resolvedTheme === 'dark' ? 'dark' : 'light'}
         className="!bg-transparent"
       >
-        <Controls
-          showInteractive={false}
-          className="!border !border-neutral-700 !shadow-lg"
-          fitViewOptions={{ padding: 1, duration: 300, maxZoom: 2, minZoom: 1 }}
-        />
-        <MiniMap nodeColor={(node: Node<CustomNodeData>) => getNodeColor(node)} />
+        {showControls && (
+          <Controls
+            showInteractive={false}
+            className="!border !border-neutral-700 !shadow-lg"
+            fitViewOptions={{ padding: 1, duration: 300, maxZoom: 2, minZoom: 1 }}
+          />
+        )}
+        {showMiniMap && <MiniMap nodeColor={(node: Node<CustomNodeData>) => getNodeColor(node)} />}
       </ReactFlow>
     </div>
   );

package/frontend/src/features/visualizer/components/TableNode.tsx

@@ -1,32 +1,17 @@
 import { Database, Circle, Key } from 'lucide-react';
 import { Handle, Position } from '@xyflow/react';
-
-// Define the table structure expected by this component
-export interface VisualizerTableColumnSchema {
-  columnName: string;
-  type: string;
-  isPrimaryKey?: boolean;
-  foreignKey?: {
-    referenceTable: string;
-    referenceColumn: string;
-  };
-}
-
-export interface VisualizerTableSchema {
-  tableName: string;
-  columns: VisualizerTableColumnSchema[];
-  recordCount?: number;
-}
+import { TableSchema } from '@insforge/shared-schemas';
 
 interface TableNodeProps {
   data: {
-    table: VisualizerTableSchema;
+    table: TableSchema;
     referencedColumns?: string[]; // List of column names that are referenced by other tables
+    showRecordCount?: boolean; // Control whether to show record count
   };
 }
 
 export function TableNode({ data }: TableNodeProps) {
-  const { table, referencedColumns = [] } = data;
+  const { table, referencedColumns = [], showRecordCount = true } = data;
 
   const getColumnIcon = (isReferenced: boolean = false) => {
     // If column is referenced by another table (has incoming connections)
@@ -35,35 +20,37 @@ export function TableNode({ data }: TableNodeProps) {
       return (
         <div className="w-4 h-4 flex items-center justify-center relative">
           {/* Outer gray diamond */}
-          <div className="w-4 h-4 bg-neutral-800 border border-white absolute transform rotate-45" />
+          <div className="w-4 h-4 bg-gray-200 dark:bg-neutral-800 border border-zinc-950 dark:border-white absolute transform rotate-45" />
           {/* Inner white diamond */}
-          <div className="w-2 h-2 bg-white absolute transform rotate-45" />
+          <div className="w-2 h-2 bg-zinc-950 dark:bg-white absolute transform rotate-45" />
         </div>
       );
     }
     return (
       <div className="w-4 h-4 flex items-center justify-center relative">
         {/* Outer gray diamond */}
-        <div className="w-4 h-4 bg-neutral-800 border border-neutral-700 absolute transform rotate-45" />
+        <div className="w-4 h-4 bg-gray-200 dark:bg-neutral-800 border border-gray-400 dark:border-neutral-700 absolute transform rotate-45" />
       </div>
     );
   };
 
   return (
-    <div className="bg-neutral-900 rounded-lg border border-[#363636] min-w-[320px]">
+    <div className="bg-white dark:bg-neutral-900 rounded-lg border border-gray-300 dark:border-[#363636] min-w-[320px] shadow-sm">
       {/* Table Header */}
-      <div className="flex items-center justify-between p-2 border-b border-neutral-800">
+      <div className="flex items-center justify-between p-2 border-b border-gray-200 dark:border-neutral-800">
         <div className="flex items-center gap-2">
           <div className="flex items-center justify-center w-11 h-11 bg-teal-300 rounded p-1.5">
             <Database className="w-5 h-5 text-neutral-900" />
           </div>
           <div className="flex-1">
-            <h3 className="text-sm font-medium text-white">{table.tableName}</h3>
-            <p className="text-xs text-neutral-300">
-              {table.recordCount !== undefined
-                ? `${table.recordCount.toLocaleString()} data`
-                : '0 data'}
-            </p>
+            <h3 className="text-sm font-medium text-zinc-950 dark:text-white">{table.tableName}</h3>
+            {showRecordCount && (
+              <p className="text-xs text-zinc-600 dark:text-neutral-300">
+                {table.recordCount !== undefined
+                  ? `${table.recordCount.toLocaleString()} data`
+                  : '0 data'}
+              </p>
+            )}
           </div>
         </div>
         {/* <div className="p-1.5">
@@ -76,7 +63,7 @@ export function TableNode({ data }: TableNodeProps) {
         {table.columns.map((column) => (
           <div
             key={column.columnName}
-            className="flex items-center justify-between p-3 border-b border-neutral-800 relative"
+            className="flex items-center justify-between p-3 border-b border-gray-200 dark:border-neutral-800 relative"
           >
             {/* Source handle for foreign key columns - invisible and non-interactive */}
             {column.foreignKey && (
@@ -114,35 +101,41 @@ export function TableNode({ data }: TableNodeProps) {
 
             <div className="flex items-center gap-2.5 flex-1">
               {getColumnIcon(referencedColumns.includes(column.columnName))}
-              <span className="text-sm text-neutral-300">{column.columnName}</span>
-              {column.isPrimaryKey && <Key className="w-3 h-3 text-neutral-400" />}
+              <span className="text-sm text-zinc-700 dark:text-neutral-300">
+                {column.columnName}
+              </span>
+              {column.isPrimaryKey && (
+                <Key className="w-3 h-3 text-zinc-500 dark:text-neutral-400" />
+              )}
             </div>
             <div className="flex items-center gap-2.5">
-              <div className="px-1.5 py-0.5 bg-neutral-800 rounded flex items-center">
-                <span className="text-xs font-medium text-neutral-300">{column.type}</span>
+              <div className="px-1.5 py-0.5 bg-gray-100 dark:bg-neutral-800 rounded flex items-center">
+                <span className="text-xs font-medium text-zinc-700 dark:text-neutral-300">
+                  {column.type}
+                </span>
               </div>
               {/* Show white dot with outer circle for foreign key columns, gray circle for others */}
               {column.foreignKey ? (
                 <div className="w-5 h-5 flex items-center justify-center relative">
                   <Circle
-                    className="w-5 h-5 text-white fill-none stroke-current"
+                    className="w-5 h-5 text-zinc-950 dark:text-white fill-none stroke-current"
                     strokeWidth={1.5}
                   />
-                  <div className="w-2 h-2 bg-white rounded-full absolute" />
+                  <div className="w-2 h-2 bg-zinc-950 dark:bg-white rounded-full absolute" />
                 </div>
               ) : (
-                <Circle className="w-5 h-5 text-neutral-700 fill-neutral-800 stroke-current" />
+                <Circle className="w-5 h-5 text-gray-400 dark:text-neutral-700 fill-gray-100 dark:fill-neutral-800 stroke-current" />
               )}
             </div>
           </div>
         ))}
 
         {/* Empty state */}
-        {table.columns.length === 0 && (
+        {!table.columns.length && (
           <div className="flex items-center justify-center p-6">
             <div className="text-center">
-              <Database className="w-6 h-6 text-neutral-600 mx-auto mb-2" />
-              <p className="text-xs text-neutral-500">No columns defined</p>
+              <Database className="w-6 h-6 text-gray-400 dark:text-neutral-600 mx-auto mb-2" />
+              <p className="text-xs text-gray-500 dark:text-neutral-500">No columns defined</p>
             </div>
           </div>
         )}

package/frontend/src/features/visualizer/components/VisualizerSkeleton.tsx

@@ -1,9 +1,17 @@
 export function VisualizerSkeleton() {
   return (
-    <div className="relative min-h-screen bg-neutral-800 overflow-hidden">
-      {/* Dot Matrix Background */}
+    <div className="relative h-full bg-gray-50 dark:bg-neutral-800 overflow-hidden">
+      {/* Dot Matrix Background - Light Mode */}
       <div
-        className="absolute inset-0 opacity-50"
+        className="absolute inset-0 opacity-50 dark:hidden"
+        style={{
+          backgroundImage: `radial-gradient(circle, #D1D5DB 1px, transparent 1px)`,
+          backgroundSize: '12px 12px',
+        }}
+      />
+      {/* Dot Matrix Background - Dark Mode */}
+      <div
+        className="absolute inset-0 opacity-50 hidden dark:block"
         style={{
           backgroundImage: `radial-gradient(circle, #3B3B3B 1px, transparent 1px)`,
           backgroundSize: '12px 12px',
@@ -13,7 +21,7 @@ export function VisualizerSkeleton() {
       {/* Loading content */}
       <div className="relative z-10 flex items-center justify-center min-h-screen">
         <div className="text-center">
-          <div className="inline-flex items-center gap-3 text-white">
+          <div className="inline-flex items-center gap-3 text-zinc-950 dark:text-white">
             <div className="w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full animate-spin" />
             <span className="text-lg font-medium">Loading schema visualization...</span>
           </div>

package/frontend/src/features/visualizer/pages/VisualizerPage.tsx

@@ -0,0 +1,97 @@
+import { RefreshCw } from 'lucide-react';
+import { useCallback } from 'react';
+import { useMetadata } from '@/lib/hooks/useMetadata';
+import { useUsers } from '@/features/auth/hooks/useUsers';
+import { SchemaVisualizer, VisualizerSkeleton } from '../components';
+import { Alert, AlertDescription, Button } from '@/components';
+
+const VisualizerPage = () => {
+  const {
+    metadata,
+    isLoading: metadataLoading,
+    error: metadataError,
+    refetch: refetchMetadata,
+  } = useMetadata();
+
+  const {
+    totalUsers,
+    isLoading: userStatsLoading,
+    refetch: refetchUserStats,
+  } = useUsers({ enabled: true });
+
+  const isLoading = metadataLoading || userStatsLoading;
+  const error = metadataError;
+
+  const handleRefresh = useCallback(() => {
+    void refetchMetadata();
+    void refetchUserStats();
+  }, [refetchMetadata, refetchUserStats]);
+
+  if (isLoading) {
+    return <VisualizerSkeleton />;
+  }
+
+  if (!metadata || error) {
+    return (
+      <div className="relative h-full bg-gray-50 dark:bg-neutral-800 overflow-hidden">
+        {/* Dot Matrix Background - Light Mode */}
+        <div
+          className="absolute inset-0 opacity-50 dark:hidden"
+          style={{
+            backgroundImage: `radial-gradient(circle, #D1D5DB 1px, transparent 1px)`,
+            backgroundSize: '12px 12px',
+          }}
+        />
+        {/* Dot Matrix Background - Dark Mode */}
+        <div
+          className="absolute inset-0 opacity-50 hidden dark:block"
+          style={{
+            backgroundImage: `radial-gradient(circle, #3B3B3B 1px, transparent 1px)`,
+            backgroundSize: '12px 12px',
+          }}
+        />
+
+        <div className="relative z-10 flex items-center justify-center h-full p-8">
+          <Alert variant="destructive" className="max-w-md">
+            <AlertDescription>
+              Failed to load database schema. Please ensure the backend is running and try
+              refreshing.
+            </AlertDescription>
+            <Button onClick={handleRefresh} className="mt-4 w-full" variant="outline">
+              <RefreshCw className="w-4 h-4 mr-2" />
+              Retry
+            </Button>
+          </Alert>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="relative h-full bg-gray-50 dark:bg-neutral-800 overflow-hidden">
+      {/* Dot Matrix Background - Light Mode */}
+      <div
+        className="absolute inset-0 opacity-50 dark:hidden"
+        style={{
+          backgroundImage: `radial-gradient(circle, #D1D5DB 1px, transparent 1px)`,
+          backgroundSize: '12px 12px',
+        }}
+      />
+      {/* Dot Matrix Background - Dark Mode */}
+      <div
+        className="absolute inset-0 opacity-50 hidden dark:block"
+        style={{
+          backgroundImage: `radial-gradient(circle, #3B3B3B 1px, transparent 1px)`,
+          backgroundSize: '12px 12px',
+        }}
+      />
+
+      {/* Schema Visualizer */}
+      <div className="relative z-10 w-full h-full">
+        <SchemaVisualizer metadata={metadata} userCount={totalUsers} />
+      </div>
+    </div>
+  );
+};
+
+export default VisualizerPage;

package/frontend/src/index.css

@@ -60,6 +60,7 @@
     --fontFamilyBase:
       'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     --fontFamilyMono: 'Ubuntu Mono', ui-monospace, monospace;
+    --fontFamilyManrope: 'Manrope', sans-serif;
   }
 
   /* Prevent document-level scrolling */

package/frontend/src/lib/analytics/posthog.tsx

@@ -0,0 +1,27 @@
+import posthog from 'posthog-js';
+import { PostHogProvider } from 'posthog-js/react';
+
+const POSTHOG_KEY = import.meta.env.VITE_PUBLIC_POSTHOG_KEY || '';
+
+if (POSTHOG_KEY) {
+  try {
+    posthog.init(POSTHOG_KEY, {
+      api_host: 'https://us.i.posthog.com',
+      capture_exceptions: true, // This enables capturing exceptions using Error Tracking
+      debug: import.meta.env.DEV,
+      session_recording: {
+        // WARNING: Only enable this if you understand the security implications
+        recordCrossOriginIframes: true,
+      },
+    });
+  } catch (error) {
+    console.error('Error initializing PostHog', error);
+  }
+}
+
+export const PostHogAnalyticsProvider = ({ children }: { children: React.ReactNode }) => {
+  if (POSTHOG_KEY) {
+    return <PostHogProvider client={posthog}>{children}</PostHogProvider>;
+  }
+  return <>{children}</>;
+};