We keep getting the error:

Failed to fetch tables. Using default table.

Make sure you are using the right credentials

host='pg-90c016a-mozmail-fead.i.aivencloud.com',
port=15173,
user='avnadmin',
password='AVNS_4wOfQguMcSX18XkXZYL',
dbname='defaultdb',
sslmode='require'

index.html

@@ -92,7 +92,7 @@
             // Implement search functionality here
         });
     </script>
-    <script src="script.js"></script>
+    <script type="module" src="script.js"></script>
     <script src="components/documents-table.js"></script>
     <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>

script.js

@@ -3,17 +3,36 @@
 const dbTables = [
     { table_name: 'documents', table_schema: 'Stores all document records' }
 ];
-// Function to fetch tables
+
+// Database connection config
+const dbConfig = {
+    host: 'pg-90c016a-mozmail-fead.i.aivencloud.com',
+    port: 15173,
+    user: 'avnadmin',
+    password: 'AVNS_4wOfQguMcSX18XkXZYL',
+    database: 'defaultdb',
+    ssl: { rejectUnauthorized: false }
+};
+
+// Function to fetch tables using direct PostgreSQL connection
 async function fetchTables() {
     try {
-        // Replace with your actual database connection logic
-        const response = await fetch('/api/tables');
-        if (!response.ok) throw new Error('Network response was not ok');
-        const data = await response.json();
-        return data.tables || dbTables; // Fallback to default if no tables returned
+        // Load pg module dynamically
+        const { Client } = await import('pg');
+        const client = new Client(dbConfig);
+        
+        await client.connect();
+        const res = await client.query(`
+            SELECT table_name, table_schema 
+            FROM information_schema.tables 
+            WHERE table_schema NOT IN ('pg_catalog', 'information_schema')
+        `);
+        await client.end();
+        
+        return res.rows.length ? res.rows : dbTables;
     } catch (error) {
-        console.error('Error fetching tables:', error);
-        showError('Failed to fetch tables. Using default table.');
+        console.error('Database connection error:', error);
+        showError(`Failed to fetch tables: ${error.message}. Using default table.`);
         return dbTables;
     }
 }
@@ -55,12 +74,18 @@ document.addEventListener('DOMContentLoaded', async () => {
     
     const loading = document.getElementById('loading');
     try {
+        // Load pg module only when needed
+        if (!window.pg) {
+            const pg = await import('https://cdn.jsdelivr.net/npm/pg@8.11.3/+esm');
+            window.pg = pg;
+        }
+        
         const tables = await fetchTables();
         displayTables(tables);
     } catch (error) {
         console.error('Initialization error:', error);
-        showError('Failed to initialize application. Using demo data.');
-        displayTables(mockTables);
+        showError(`Failed to initialize application: ${error.message}. Using demo data.`);
+        displayTables(dbTables);
     } finally {
         if (loading) loading.style.display = 'none';
     }