insforge 0.3.1

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

@@ -0,0 +1,107 @@
+import { Lock, FormInput, Users } from 'lucide-react';
+import GoogleIcon from '@/assets/logos/google.svg';
+import GithubIcon from '@/assets/logos/github.svg';
+import { AuthMetadataSchema } from '@insforge/shared-schemas';
+import { cn } from '@/lib/utils/utils';
+import { useOAuthConfig } from '@/features/auth/hooks/useOAuthConfig';
+
+interface AuthNodeProps {
+  data: {
+    authMetadata: AuthMetadataSchema;
+    userCount?: number;
+  };
+}
+
+export function AuthNode({ data }: AuthNodeProps) {
+  const { authMetadata, userCount } = data;
+  const { isProviderConfigured } = useOAuthConfig();
+
+  const enabledCount = authMetadata.oauths.length;
+
+  return (
+    <div className="bg-neutral-900 rounded-lg border border-[#363636] min-w-[280px]">
+      {/* Auth Header */}
+      <div className="flex items-center justify-between p-2 border-b border-neutral-800">
+        <div className="flex items-center gap-2">
+          <div className="flex items-center justify-center w-11 h-11 bg-lime-300 rounded p-1.5">
+            <Lock className="w-5 h-5 text-neutral-900" />
+          </div>
+          <div className="flex-1">
+            <h3 className="text-sm font-medium text-white">Authentication</h3>
+            <p className="text-xs text-neutral-300">
+              {enabledCount} provider{enabledCount !== 1 ? 's' : ''} enabled
+            </p>
+          </div>
+        </div>
+        {/* <div className="p-1.5">
+          <ExternalLink className="w-4 h-4 text-neutral-400" />
+        </div> */}
+      </div>
+
+      {/* Auth Providers */}
+      <div className="p-2 space-y-2 border-b border-neutral-800">
+        {/* Email/Password */}
+        <div className="flex items-center justify-between p-2.5 bg-neutral-800 rounded">
+          <div className="flex items-center gap-2.5">
+            <FormInput className="w-5 h-5 text-neutral-300" />
+            <span className="text-sm text-neutral-300">Email/Password</span>
+          </div>
+          <div className="px-1.5 py-0.5 bg-lime-200 rounded flex items-center">
+            <span className="text-xs font-medium text-lime-900">Enabled</span>
+          </div>
+        </div>
+
+        {/* Google OAuth */}
+        <div className="flex items-center justify-between p-2.5 bg-neutral-800 rounded">
+          <div className="flex items-center gap-2.5">
+            <img src={GoogleIcon} alt="google" className="h-5 w-5" />
+            <span className="text-sm text-neutral-300">Google OAuth</span>
+          </div>
+          <div
+            className={cn(
+              'px-1.5 py-0.5 rounded flex items-center',
+              isProviderConfigured('google')
+                ? 'bg-lime-200 text-lime-900'
+                : 'bg-neutral-700 text-neutral-300'
+            )}
+          >
+            <span className="text-xs font-medium">
+              {isProviderConfigured('google') ? 'Enabled' : 'Disabled'}
+            </span>
+          </div>
+        </div>
+
+        {/* GitHub OAuth */}
+        <div className="flex items-center justify-between p-2.5 bg-neutral-800 rounded">
+          <div className="flex items-center gap-2.5">
+            <img src={GithubIcon} alt="github" className="h-5 w-5" />
+            <span className="text-sm text-neutral-300">GitHub OAuth</span>
+          </div>
+          <div
+            className={cn(
+              'px-1.5 py-0.5 rounded flex items-center',
+              isProviderConfigured('github')
+                ? 'bg-lime-200 text-lime-900'
+                : 'bg-neutral-700 text-neutral-300'
+            )}
+          >
+            <span className="text-xs font-medium">
+              {isProviderConfigured('github') ? 'Enabled' : 'Disabled'}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      {/* Users Section */}
+      <div className="flex items-center justify-between p-3 border-t border-neutral-700">
+        <div className="flex items-center gap-2.5">
+          <Users className="w-5 h-5 text-neutral-300" />
+          <span className="text-sm text-neutral-300">Users</span>
+        </div>
+        <div className="flex items-center">
+          {userCount !== undefined && <span className="text-xs text-neutral-400">{userCount}</span>}
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,34 @@
+import { HardDrive } from 'lucide-react';
+import { BucketMetadataSchema } from '@insforge/shared-schemas';
+
+interface BucketNodeProps {
+  data: {
+    bucket: BucketMetadataSchema;
+  };
+}
+
+export function BucketNode({ data }: BucketNodeProps) {
+  const { bucket } = data;
+
+  return (
+    <div className="bg-neutral-900 rounded-lg border border-[#363636] min-w-[320px]">
+      {/* Bucket Header */}
+      <div className="flex items-center justify-between p-2 border-b border-neutral-800">
+        <div className="flex items-center gap-2">
+          <div className="flex items-center justify-center w-11 h-11 bg-blue-300 rounded p-1.5">
+            <HardDrive className="w-5 h-5 text-neutral-900" />
+          </div>
+          <div className="flex-1">
+            <h3 className="text-sm font-medium text-white">{bucket.name}</h3>
+            <p className="text-xs text-neutral-300">
+              {bucket.objectCount ? `${bucket.objectCount} files` : '0 files'}
+            </p>
+          </div>
+        </div>
+        {/* <div className="p-1.5">
+          <ExternalLink className="w-4 h-4 text-neutral-400" />
+        </div> */}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,359 @@
+import { useCallback, useEffect, useMemo } from 'react';
+import {
+  ReactFlow,
+  Node,
+  BuiltInEdge,
+  Controls,
+  MiniMap,
+  useNodesState,
+  useEdgesState,
+  addEdge,
+  Connection,
+  ConnectionMode,
+} from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+import { TableNode, VisualizerTableSchema, VisualizerTableColumnSchema } from './TableNode';
+import { AuthNode } from './AuthNode';
+import { BucketNode } from './BucketNode';
+import {
+  AppMetadataSchema,
+  StorageBucketSchema,
+  AuthMetadataSchema,
+} from '@insforge/shared-schemas';
+
+interface SchemaVisualizerProps {
+  metadata: AppMetadataSchema;
+  userCount?: number;
+}
+
+type TableNodeData = {
+  table: VisualizerTableSchema;
+  referencedColumns: string[];
+};
+
+type BucketNodeData = {
+  bucket: StorageBucketSchema;
+};
+
+type AuthNodeData = {
+  authMetadata: AuthMetadataSchema;
+  userCount?: number;
+};
+
+type CustomNodeData = TableNodeData | BucketNodeData | AuthNodeData;
+
+const nodeTypes = {
+  tableNode: TableNode,
+  authNode: AuthNode,
+  bucketNode: BucketNode,
+};
+
+const getLayoutedElements = (nodes: Node<CustomNodeData>[], edges: BuiltInEdge[]) => {
+  // Fixed dimensions
+  const nodeWidth = 280;
+
+  // Calculate actual node heights based on content
+  const calculateNodeHeight = (node: Node<CustomNodeData>) => {
+    if (node.type === 'authNode') {
+      // Auth node has fixed content
+      return 150;
+    } else if (node.type === 'tableNode') {
+      // Table node height depends on columns
+      const tableData = node.data as TableNodeData;
+      const columnCount = tableData.table?.columns?.length || 0;
+      const headerHeight = 64; // Header with table name
+      const columnHeight = 48; // Each column row height
+      const contentHeight = columnCount > 0 ? columnCount * columnHeight : 100; // Empty state height
+      return headerHeight + contentHeight;
+    } else if (node.type === 'bucketNode') {
+      // Bucket node has relatively fixed height
+      return 200;
+    }
+    return 200; // Default
+  };
+
+  // Layout parameters
+  const horizontalGap = 100; // Gap between columns
+  const verticalGap = 80; // Gap between nodes in same column
+  const canvasMargin = 50;
+
+  // Group nodes by type
+  const authNodes = nodes.filter((node) => node.type === 'authNode');
+  const tableNodes = nodes.filter((node) => node.type === 'tableNode');
+  const bucketNodes = nodes.filter((node) => node.type === 'bucketNode');
+
+  // Calculate column X positions
+  const authX = canvasMargin;
+  const tableStartX = authX + nodeWidth + horizontalGap * 2;
+  const bucketX =
+    tableStartX +
+    Math.ceil(Math.sqrt(tableNodes.length)) * (nodeWidth + horizontalGap) +
+    horizontalGap;
+
+  // Helper function to distribute nodes vertically with dynamic heights
+  const distributeVerticallyDynamic = (
+    nodesToPosition: Node<CustomNodeData>[],
+    startY: number = canvasMargin
+  ) => {
+    const positions: number[] = [];
+    let currentY = startY;
+
+    nodesToPosition.forEach((node) => {
+      positions.push(currentY);
+      const nodeHeight = calculateNodeHeight(node);
+      currentY += nodeHeight + verticalGap;
+    });
+
+    return positions;
+  };
+
+  // Position auth nodes in left column
+  const authYPositions = distributeVerticallyDynamic(authNodes);
+  const positionedAuthNodes = authNodes.map((node, index) => ({
+    ...node,
+    position: {
+      x: authX,
+      y: authYPositions[index],
+    },
+  }));
+
+  // Position table nodes in a grid in the middle
+  let positionedTableNodes: Node<CustomNodeData>[] = [];
+  if (tableNodes.length > 0) {
+    const cols = Math.ceil(Math.sqrt(tableNodes.length));
+
+    // Group tables by column for better height calculation
+    const tablesByColumn: Node<CustomNodeData>[][] = [];
+    for (let col = 0; col < cols; col++) {
+      tablesByColumn[col] = [];
+    }
+
+    tableNodes.forEach((node, index) => {
+      const col = index % cols;
+      tablesByColumn[col].push(node);
+    });
+
+    // Calculate Y positions for each column independently
+    const columnYPositions: number[][] = tablesByColumn.map((columnNodes) =>
+      distributeVerticallyDynamic(columnNodes)
+    );
+
+    positionedTableNodes = tableNodes.map((node, index) => {
+      const col = index % cols;
+      const rowInColumn = Math.floor(index / cols);
+
+      return {
+        ...node,
+        position: {
+          x: tableStartX + col * (nodeWidth + horizontalGap),
+          y: columnYPositions[col][rowInColumn],
+        },
+      };
+    });
+  }
+
+  // Position bucket nodes in right column
+  const bucketYPositions = distributeVerticallyDynamic(bucketNodes);
+  const positionedBucketNodes = bucketNodes.map((node, index) => ({
+    ...node,
+    position: {
+      x: bucketX,
+      y: bucketYPositions[index],
+    },
+  }));
+
+  // Combine all positioned nodes
+  const layoutedNodes = [...positionedAuthNodes, ...positionedTableNodes, ...positionedBucketNodes];
+
+  return { nodes: layoutedNodes, edges };
+};
+
+const getNodeColor = (node: Node<CustomNodeData>) => {
+  switch (node.type) {
+    case 'authNode':
+      return '#bef264';
+    case 'bucketNode':
+      return '#93c5fd';
+    default:
+      return '#6ee7b7';
+  }
+};
+
+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,
+          };
+        }
+
+        return column;
+      });
+
+      return {
+        tableName,
+        columns,
+        recordCount: tableData.recordCount ?? 0, // Use actual record count from metadata
+      };
+    });
+  }, [metadata.database.tables]);
+
+  const initialNodes = useMemo(() => {
+    // First, collect all referenced columns for each table
+    const referencedColumnsByTable: Record<string, string[]> = {};
+
+    tables.forEach((table) => {
+      table.columns.forEach((column) => {
+        if (column.foreignKey) {
+          const targetTable = column.foreignKey.referenceTable;
+          const targetColumn = column.foreignKey.referenceColumn;
+
+          if (!referencedColumnsByTable[targetTable]) {
+            referencedColumnsByTable[targetTable] = [];
+          }
+          if (!referencedColumnsByTable[targetTable].includes(targetColumn)) {
+            referencedColumnsByTable[targetTable].push(targetColumn);
+          }
+        }
+      });
+    });
+
+    const tableNodes: Node<TableNodeData>[] = tables.map((table) => ({
+      id: table.tableName,
+      type: 'tableNode',
+      position: { x: 0, y: 0 },
+      data: {
+        table,
+        referencedColumns: referencedColumnsByTable[table.tableName] || [],
+      },
+    }));
+
+    const bucketNodes: Node<BucketNodeData>[] = metadata.storage.buckets.map((bucket) => ({
+      id: `bucket-${bucket.name}`,
+      type: 'bucketNode',
+      position: { x: 0, y: 0 },
+      data: { bucket },
+    }));
+
+    const nodes: Node<CustomNodeData>[] = [...tableNodes, ...bucketNodes];
+
+    // Add authentication node if authData is provided
+    nodes.push({
+      id: 'authentication',
+      type: 'authNode',
+      position: { x: 0, y: 0 },
+      data: {
+        authMetadata: metadata.auth,
+        userCount,
+      },
+    });
+
+    return nodes;
+  }, [metadata, userCount, tables]);
+
+  const initialEdges = useMemo(() => {
+    const edges: BuiltInEdge[] = [];
+
+    tables.forEach((table) => {
+      table.columns.forEach((column) => {
+        if (column.foreignKey) {
+          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,
+            },
+          });
+        }
+      });
+    });
+
+    // Add authentication edges if authData exists
+
+    return edges;
+  }, [tables]);
+
+  const { nodes: layoutedNodes, edges: layoutedEdges } = useMemo(
+    () => getLayoutedElements(initialNodes, initialEdges),
+    [initialNodes, initialEdges]
+  );
+
+  const [nodes, setNodes, onNodesChange] = useNodesState(layoutedNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(layoutedEdges);
+
+  useEffect(() => {
+    setNodes(layoutedNodes);
+    setEdges(layoutedEdges);
+  }, [layoutedNodes, layoutedEdges, setNodes, setEdges]);
+
+  const onConnect = useCallback(
+    (params: Connection) => setEdges((eds) => addEdge(params, eds)),
+    [setEdges]
+  );
+
+  return (
+    <div className="w-full h-full">
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        onConnect={onConnect}
+        nodeTypes={nodeTypes}
+        connectionMode={ConnectionMode.Loose}
+        fitView
+        fitViewOptions={{ padding: 1, maxZoom: 2, minZoom: 1 }}
+        minZoom={0.1}
+        maxZoom={2}
+        proOptions={{ hideAttribution: true }}
+        elevateEdgesOnSelect={true}
+        colorMode="dark"
+        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)} />
+      </ReactFlow>
+    </div>
+  );
+}

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

@@ -0,0 +1,152 @@
+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;
+}
+
+interface TableNodeProps {
+  data: {
+    table: VisualizerTableSchema;
+    referencedColumns?: string[]; // List of column names that are referenced by other tables
+  };
+}
+
+export function TableNode({ data }: TableNodeProps) {
+  const { table, referencedColumns = [] } = data;
+
+  const getColumnIcon = (isReferenced: boolean = false) => {
+    // If column is referenced by another table (has incoming connections)
+    // Show outer gray diamond with inner white diamond
+    if (isReferenced) {
+      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" />
+          {/* Inner white diamond */}
+          <div className="w-2 h-2 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>
+    );
+  };
+
+  return (
+    <div className="bg-neutral-900 rounded-lg border border-[#363636] min-w-[320px]">
+      {/* Table Header */}
+      <div className="flex items-center justify-between p-2 border-b 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>
+          </div>
+        </div>
+        {/* <div className="p-1.5">
+          <ExternalLink className="w-4 h-4 text-neutral-400" />
+        </div> */}
+      </div>
+
+      {/* Columns */}
+      <div>
+        {table.columns.map((column) => (
+          <div
+            key={column.columnName}
+            className="flex items-center justify-between p-3 border-b border-neutral-800 relative"
+          >
+            {/* Source handle for foreign key columns - invisible and non-interactive */}
+            {column.foreignKey && (
+              <Handle
+                type="source"
+                position={Position.Right}
+                id={`${column.columnName}-source`}
+                className="!w-3 !h-3 !opacity-0 !border-0 !pointer-events-none"
+                style={{
+                  right: 16,
+                  top: '50%',
+                  transform: 'translateY(-50%)',
+                  pointerEvents: 'none',
+                }}
+                isConnectable={false}
+              />
+            )}
+
+            {/* Target handle for columns that can be referenced - invisible and non-interactive */}
+            {referencedColumns.includes(column.columnName) && (
+              <Handle
+                type="target"
+                position={Position.Left}
+                id={`${column.columnName}-target`}
+                className="!w-3 !h-3 !opacity-0 !border-0 !pointer-events-none"
+                style={{
+                  left: 16,
+                  top: '50%',
+                  transform: 'translateY(-50%)',
+                  pointerEvents: 'none',
+                }}
+                isConnectable={false}
+              />
+            )}
+
+            <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" />}
+            </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>
+              {/* 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"
+                    strokeWidth={1.5}
+                  />
+                  <div className="w-2 h-2 bg-white rounded-full absolute" />
+                </div>
+              ) : (
+                <Circle className="w-5 h-5 text-neutral-700 fill-neutral-800 stroke-current" />
+              )}
+            </div>
+          </div>
+        ))}
+
+        {/* Empty state */}
+        {table.columns.length === 0 && (
+          <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>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,24 @@
+export function VisualizerSkeleton() {
+  return (
+    <div className="relative min-h-screen bg-neutral-800 overflow-hidden">
+      {/* Dot Matrix Background */}
+      <div
+        className="absolute inset-0 opacity-50"
+        style={{
+          backgroundImage: `radial-gradient(circle, #3B3B3B 1px, transparent 1px)`,
+          backgroundSize: '12px 12px',
+        }}
+      />
+
+      {/* 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="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>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,5 @@
+export { TableNode } from './TableNode';
+export { AuthNode } from './AuthNode';
+export { BucketNode } from './BucketNode';
+export { SchemaVisualizer } from './SchemaVisualizer';
+export { VisualizerSkeleton } from './VisualizerSkeleton';