insforge 0.3.2 → 1.2.10

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

@@ -1,34 +1,35 @@
-import { Lock, FormInput, Users } from 'lucide-react';
-import GoogleIcon from '@/assets/logos/google.svg';
-import GithubIcon from '@/assets/logos/github.svg';
+import { Lock, FormInput, Users, Circle } from 'lucide-react';
+import { Handle, Position } from '@xyflow/react';
 import { AuthMetadataSchema } from '@insforge/shared-schemas';
 import { cn } from '@/lib/utils/utils';
 import { useOAuthConfig } from '@/features/auth/hooks/useOAuthConfig';
+import { oauthProviders } from '@/features/auth/helpers';
 
 interface AuthNodeProps {
   data: {
     authMetadata: AuthMetadataSchema;
     userCount?: number;
+    isReferenced?: boolean; // Whether any tables have foreign keys to users.id
   };
 }
 
 export function AuthNode({ data }: AuthNodeProps) {
-  const { authMetadata, userCount } = data;
+  const { authMetadata, userCount, isReferenced = false } = data;
   const { isProviderConfigured } = useOAuthConfig();
 
-  const enabledCount = authMetadata.oauths.length;
+  const enabledCount = authMetadata.oauths.length + 1;
 
   return (
-    <div className="bg-neutral-900 rounded-lg border border-[#363636] min-w-[280px]">
+    <div className="bg-white dark:bg-neutral-900 rounded-lg border border-gray-300 dark:border-[#363636] min-w-[280px] shadow-sm">
       {/* Auth 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-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">
+            <h3 className="text-sm font-medium text-zinc-950 dark:text-white">Authentication</h3>
+            <p className="text-xs text-zinc-600 dark:text-neutral-300">
               {enabledCount} provider{enabledCount !== 1 ? 's' : ''} enabled
             </p>
           </div>
@@ -39,67 +40,82 @@ export function AuthNode({ data }: AuthNodeProps) {
       </div>
 
       {/* Auth Providers */}
-      <div className="p-2 space-y-2 border-b border-neutral-800">
+      <div className="p-2 space-y-2 border-b border-gray-200 dark:border-neutral-800">
         {/* Email/Password */}
-        <div className="flex items-center justify-between p-2.5 bg-neutral-800 rounded">
+        <div className="flex items-center justify-between p-2.5 bg-gray-100 dark: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>
+            <FormInput className="w-5 h-5 text-zinc-700 dark:text-neutral-300" />
+            <span className="text-sm text-zinc-700 dark: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>
+        {/* OAuth Providers */}
+        {oauthProviders.map((provider) => {
+          const isEnabled = isProviderConfigured(provider.id);
+          return (
+            <div
+              key={provider.id}
+              className="flex items-center justify-between p-2.5 bg-gray-100 dark:bg-neutral-800 rounded"
+            >
+              <div className="flex items-center gap-2.5">
+                <div className="w-5 h-5 flex items-center justify-center [&>svg]:w-5 [&>svg]:h-5">
+                  {provider.icon}
+                </div>
+                <span className="text-sm text-zinc-700 dark:text-neutral-300">{provider.name}</span>
+              </div>
+              <div
+                className={cn(
+                  'px-1.5 py-0.5 rounded flex items-center',
+                  isEnabled
+                    ? 'bg-lime-200 text-lime-900'
+                    : 'bg-gray-200 dark:bg-neutral-700 text-gray-600 dark:text-neutral-300'
+                )}
+              >
+                <span className="text-xs font-medium">{isEnabled ? '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 justify-between p-3 border-t border-gray-300 dark:border-neutral-700 relative">
+        {/* Target handle for auth.id references - positioned at right bottom corner */}
+        <Handle
+          type="target"
+          position={Position.Right}
+          id="id-target"
+          className="!w-3 !h-3 !opacity-0 !border-0 !pointer-events-none"
+          style={{
+            right: 16,
+            bottom: 16,
+            top: 'auto',
+            transform: 'none',
+            pointerEvents: 'none',
+          }}
+          isConnectable={false}
+        />
+
         <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>
+          <Users className="w-5 h-5 text-zinc-700 dark:text-neutral-300" />
+          <span className="text-sm text-zinc-700 dark:text-neutral-300">Users</span>
+          <span className="text-xs text-zinc-500 dark:text-neutral-400">{userCount ?? 0}</span>
         </div>
         <div className="flex items-center">
-          {userCount !== undefined && <span className="text-xs text-neutral-400">{userCount}</span>}
+          {isReferenced ? (
+            <div className="w-5 h-5 flex items-center justify-center relative">
+              <Circle
+                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-zinc-950 dark:bg-white rounded-full absolute" />
+            </div>
+          ) : (
+            <Circle className="w-5 h-5 text-gray-400 dark:text-neutral-700 fill-gray-100 dark:fill-neutral-800 stroke-current" />
+          )}
         </div>
       </div>
     </div>

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

@@ -11,16 +11,16 @@ export function BucketNode({ data }: BucketNodeProps) {
   const { bucket } = data;
 
   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">
       {/* Bucket 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-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">
+            <h3 className="text-sm font-medium text-zinc-950 dark:text-white">{bucket.name}</h3>
+            <p className="text-xs text-zinc-600 dark:text-neutral-300">
               {bucket.objectCount ? `${bucket.objectCount} files` : '0 files'}
             </p>
           </div>

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 { useTables } 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 if external schemas are not provided
+  const { allSchemas, isLoadingSchemas } = useTables();
 
-      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>
         )}