UI Update

index.html

@@ -5,7 +5,92 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>DuckDB Explorer</title>
     <style>
-        /* --- Keep the existing CSS from the previous answer --- */
+        /* --- THEME VARIABLES --- */
+        :root {
+            --bg-color: #f4f7f6;
+            --text-color: #333;
+            --header-bg: #4CAF50;
+            --header-text: white;
+            --sidebar-bg: #e9ecef;
+            --sidebar-text: #495057;
+            --sidebar-hover-bg: #d4dadf;
+            --sidebar-active-bg: #007bff;
+            --sidebar-active-text: white;
+            --content-bg: #fff;
+            --border-color: #dee2e6;
+            --border-color-light: #e9ecef;
+            --table-header-bg: #f8f9fa;
+            --table-row-even-bg: #fdfdfe;
+            --button-primary-bg: #28a745;
+            --button-primary-hover-bg: #218838;
+            --button-primary-text: white;
+            --status-success-bg: #d1e7dd;
+            --status-success-text: #0f5132;
+            --status-success-border: #badbcc;
+            --status-error-bg: #f8d7da;
+            --status-error-text: #842029;
+            --status-error-border: #f5c2c7;
+            --loader-border: #f3f3f3;
+            --loader-spinner: #007bff; /* Use primary blue for spinner */
+            --input-border: #ced4da;
+            --input-bg: #fff;
+            --link-color: #007bff;
+        }
+
+        @media (prefers-color-scheme: dark) {
+            :root {
+                --bg-color: #1a1a1a; /* Darker background */
+                --text-color: #e8e8e8; /* Lighter text */
+                --header-bg: #2a622d; /* Darker header */
+                --header-text: #e8e8e8;
+                --sidebar-bg: #2c2c2c; /* Dark sidebar */
+                --sidebar-text: #adb5bd;
+                --sidebar-hover-bg: #444;
+                --sidebar-active-bg: #0056b3; /* Darker blue */
+                --sidebar-active-text: white;
+                --content-bg: #212121; /* Dark content area */
+                --border-color: #444;
+                --border-color-light: #333;
+                --table-header-bg: #2c2c2c;
+                --table-row-even-bg: #252525;
+                --button-primary-bg: #218838; /* Keep green accessible */
+                --button-primary-hover-bg: #1e7e34;
+                --button-primary-text: white;
+                --status-success-bg: #143620;
+                --status-success-text: #a3cfbb;
+                --status-success-border: #2a622d;
+                --status-error-bg: #58151c;
+                --status-error-text: #f5c6cb;
+                --status-error-border: #842029;
+                --loader-border: #444;
+                --loader-spinner: #4dabf7; /* Lighter blue for dark */
+                --input-border: #555;
+                --input-bg: #333;
+                --link-color: #4dabf7;
+            }
+            /* Ensure inputs inherit text color */
+            input[type="text"], textarea {
+                color: var(--text-color);
+                background-color: var(--input-bg);
+            }
+             /* Ensure table cells inherit text color */
+             th, td {
+                color: var(--text-color);
+             }
+             /* Placeholder text color for dark mode */
+            ::placeholder {
+                color: #888;
+                opacity: 1; /* Firefox */
+            }
+            :-ms-input-placeholder { /* Internet Explorer 10-11 */
+                color: #888;
+            }
+            ::-ms-input-placeholder { /* Microsoft Edge */
+                color: #888;
+            }
+        }
+
+        /* --- General Styles --- */
         body {
             font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
             margin: 0;
@@ -13,156 +98,164 @@
             display: flex;
             flex-direction: column;
             height: 100vh;
-            background-color: #f4f7f6;
-            color: #333;
+            background-color: var(--bg-color);
+            color: var(--text-color);
+            transition: background-color 0.3s, color 0.3s; /* Smooth theme transition */
+        }
+        a {
+             color: var(--link-color);
         }
 
+        /* --- Header --- */
         header {
-            background-color: #4CAF50; /* Changed color slightly */
-            color: white;
-            padding: 15px 20px; /* Slightly more padding */
+            background-color: var(--header-bg);
+            color: var(--header-text);
+            padding: 15px 20px;
             display: flex;
             align-items: center;
             box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-            font-size: 1.2em; /* Bigger title */
+            font-size: 1.2em;
             font-weight: bold;
+            transition: background-color 0.3s, color 0.3s;
         }
-         /* Style for the loader inside the header */
          header .loader {
-             border: 3px solid #f3f3f3; /* Light grey */
-             border-top: 3px solid #fff; /* White */
+             border: 3px solid var(--loader-border);
+             border-top: 3px solid var(--header-text); /* Match header text */
              border-radius: 50%;
              width: 18px;
              height: 18px;
              animation: spin 1s linear infinite;
-             display: none; /* Hidden by default */
-             margin-left: 15px; /* Space from title */
+             display: none;
+             margin-left: 15px;
          }
 
+        /* --- Container --- */
         .container {
             display: flex;
             flex: 1;
-            overflow: hidden; /* Prevent overall container scroll */
+            overflow: hidden;
         }
 
+        /* --- Sidebar --- */
         #sidebar {
-            width: 220px; /* Slightly wider */
-            background-color: #e9ecef;
+            width: 220px;
+            background-color: var(--sidebar-bg);
             padding: 15px;
             overflow-y: auto;
-            border-right: 1px solid #dee2e6;
+            border-right: 1px solid var(--border-color);
+            transition: background-color 0.3s;
         }
-
         #sidebar h3 {
             margin-top: 0;
-            margin-bottom: 15px; /* More space */
-            color: #495057;
-            border-bottom: 1px solid #ced4da;
+            margin-bottom: 15px;
+            color: var(--sidebar-text);
+            border-bottom: 1px solid var(--border-color);
             padding-bottom: 10px;
         }
-
         #tableList {
             list-style: none;
             padding: 0;
             margin: 0;
         }
-
         #tableList li {
-            padding: 8px 10px; /* More padding */
+            padding: 8px 10px;
             cursor: pointer;
             border-radius: 4px;
             margin-bottom: 5px;
-            transition: background-color 0.2s, color 0.2s; /* Add color transition */
+            transition: background-color 0.2s, color 0.2s;
             font-size: 0.95em;
-            color: #343a40;
+            color: var(--sidebar-text); /* Use variable */
         }
-
         #tableList li:hover {
-            background-color: #d4dadf;
+            background-color: var(--sidebar-hover-bg);
         }
         #tableList li.active {
-             background-color: #007bff; /* Bootstrap primary blue */
-             color: white;
+             background-color: var(--sidebar-active-bg);
+             color: var(--sidebar-active-text);
              font-weight: bold;
         }
 
-
+        /* --- Main Content --- */
         #mainContent {
             flex: 1;
             display: flex;
             flex-direction: column;
             padding: 20px;
-            overflow: hidden; /* Prevent main content scroll */
+            overflow: hidden;
         }
-
         .content-area {
             flex: 1;
             display: flex;
             flex-direction: column;
-            overflow: hidden; /* Child takes scroll */
-            gap: 15px; /* Add gap between content boxes */
+            overflow: hidden;
+            gap: 15px;
         }
-
          #schemaDisplay, #dataDisplayContainer, #queryResultContainer {
-             background-color: #fff;
-             border: 1px solid #dee2e6;
-             border-radius: 5px; /* Slightly more rounded */
+             background-color: var(--content-bg);
+             border: 1px solid var(--border-color);
+             border-radius: 5px;
              padding: 15px;
-             margin-bottom: 0; /* Remove margin, use gap instead */
-             overflow: auto; /* Allow scrolling within these areas */
-             box-shadow: 0 1px 3px rgba(0,0,0,0.05); /* Subtle shadow */
+             margin-bottom: 0;
+             overflow: auto;
+             box-shadow: 0 1px 3px rgba(0,0,0,0.05);
+             transition: background-color 0.3s, border-color 0.3s;
          }
         #schemaDisplay h4, #dataDisplayContainer h4, #queryResultContainer h4 {
              margin-top: 0;
-             color: #495057;
-             border-bottom: 1px solid #eee;
+             color: var(--sidebar-text); /* Match sidebar heading color */
+             border-bottom: 1px solid var(--border-color-light);
              padding-bottom: 10px;
              margin-bottom: 15px;
         }
-
-
          #dataDisplayContainer {
-             flex: 1; /* Takes remaining space */
-             display: flex; /* Use flex for inner scroll */
+             flex: 1;
+             display: flex;
              flex-direction: column;
          }
          #dataDisplay {
-             flex: 1; /* Allow div itself to scroll */
+             flex: 1;
              overflow: auto;
-             min-height: 100px; /* Ensure it has some height */
+             min-height: 100px;
          }
+          #schemaDisplay p, #dataDisplayContainer p {
+              color: #888; /* Placeholder text color */
+          }
 
 
+        /* --- Query Area --- */
         #queryArea {
             padding-top: 20px;
-            border-top: 1px solid #dee2e6;
-            background-color: #f8f9fa; /* Slight background */
+            border-top: 1px solid var(--border-color);
+            background-color: var(--content-bg); /* Match content bg */
             padding: 15px;
             border-radius: 5px;
             box-shadow: 0 -1px 3px rgba(0,0,0,0.05);
+            margin-top: 15px; /* Add margin instead of relying on flex */
+            transition: background-color 0.3s, border-color 0.3s;
         }
          #queryArea h4 {
              margin-top: 0;
              margin-bottom: 10px;
-             color: #495057;
+             color: var(--sidebar-text);
          }
-
         #queryArea textarea {
             width: 100%;
             min-height: 80px;
             padding: 10px;
-            border: 1px solid #ced4da; /* Match theme */
+            border: 1px solid var(--input-border);
             border-radius: 4px;
             box-sizing: border-box;
             font-family: monospace;
             margin-bottom: 10px;
-            resize: vertical; /* Allow vertical resize */
+            resize: vertical;
+            background-color: var(--input-bg); /* Input background */
+            color: var(--text-color); /* Input text color */
+            transition: background-color 0.3s, border-color 0.3s, color 0.3s;
         }
-
         #queryArea button {
             padding: 10px 20px;
-            background-color: #28a745; /* Bootstrap success green */
-            color: white;
+            background-color: var(--button-primary-bg);
+            color: var(--button-primary-text);
             border: none;
             border-radius: 4px;
             cursor: pointer;
@@ -170,58 +263,73 @@
             font-weight: bold;
         }
         #queryArea button:hover {
-            background-color: #218838;
+            background-color: var(--button-primary-hover-bg);
         }
 
+        /* --- Tables --- */
         table {
             width: 100%;
             border-collapse: collapse;
-            margin-top: 0; /* Remove margin */
-            font-size: 0.9em; /* Slightly smaller table font */
+            margin-top: 0;
+            font-size: 0.9em;
         }
-
         th, td {
-            border: 1px solid #e9ecef; /* Lighter border */
-            padding: 10px 12px; /* Adjust padding */
+            border: 1px solid var(--border-color-light);
+            padding: 10px 12px;
             text-align: left;
             white-space: nowrap;
-            max-width: 250px; /* Prevent very wide columns */
+            max-width: 250px;
             overflow: hidden;
             text-overflow: ellipsis;
+             color: var(--text-color); /* Inherit text color */
+             transition: border-color 0.3s;
         }
-
         th {
-            background-color: #f8f9fa; /* Very light header */
-            font-weight: 600; /* Slightly bolder */
-            position: sticky; /* Sticky headers */
+            background-color: var(--table-header-bg);
+            font-weight: 600;
+            position: sticky;
             top: 0;
             z-index: 1;
+            transition: background-color 0.3s;
         }
-
         tr:nth-child(even) {
-            background-color: #fdfdfe; /* Very subtle striping */
+            background-color: var(--table-row-even-bg);
+             transition: background-color 0.3s;
         }
+         tr:nth-child(odd) {
+             background-color: var(--content-bg); /* Match content background */
+             transition: background-color 0.3s;
+         }
 
+         /* --- Status Message --- */
          #statusMessage {
              padding: 10px 15px;
              margin-top: 15px;
              border-radius: 4px;
-             display: none; /* Hidden by default */
+             display: none;
              font-size: 0.9em;
+             transition: background-color 0.3s, color 0.3s, border-color 0.3s;
          }
-
         #statusMessage.success {
-            background-color: #d1e7dd;
-            color: #0f5132;
-            border: 1px solid #badbcc;
+            background-color: var(--status-success-bg);
+            color: var(--status-success-text);
+            border: 1px solid var(--status-success-border);
         }
-
         #statusMessage.error {
-            background-color: #f8d7da;
-            color: #842029;
-            border: 1px solid #f5c2c7;
+            background-color: var(--status-error-bg);
+            color: var(--status-error-text);
+            border: 1px solid var(--status-error-border);
         }
-         /* Loader animation */
+         /* --- Loader --- */
+         .loader {
+             border: 4px solid var(--loader-border);
+             border-top: 4px solid var(--loader-spinner);
+             border-radius: 50%;
+             width: 20px;
+             height: 20px;
+             animation: spin 1s linear infinite;
+             display: none;
+         }
          @keyframes spin {
              0% { transform: rotate(0deg); }
              100% { transform: rotate(360deg); }
@@ -247,12 +355,12 @@
             <div class="content-area">
                 <div id="schemaDisplay">
                     <h4>Schema</h4>
-                    <p>Select a table from the list.</p>
+                    <p id="schemaPlaceholder">Select a table from the list.</p>
                     <table id="schemaTable"></table>
                 </div>
                 <div id="dataDisplayContainer">
                      <h4>Data <span id="tableDataHeader"></span></h4>
-                     <p>Select a table from the list.</p>
+                     <p id="dataPlaceholder">Select a table from the list.</p>
                     <div id="dataDisplay">
                         <table id="dataTable"></table>
                     </div>
@@ -280,9 +388,11 @@
         const tableList = document.getElementById('tableList');
         const schemaDisplay = document.getElementById('schemaDisplay');
         const schemaTable = document.getElementById('schemaTable');
+        const schemaPlaceholder = document.getElementById('schemaPlaceholder'); // Added
         const dataDisplayContainer = document.getElementById('dataDisplayContainer');
         const dataDisplay = document.getElementById('dataDisplay');
         const dataTable = document.getElementById('dataTable');
+        const dataPlaceholder = document.getElementById('dataPlaceholder'); // Added
         const tableDataHeader = document.getElementById('tableDataHeader');
         const sqlInput = document.getElementById('sqlInput');
         const runSqlButton = document.getElementById('runSqlButton');
@@ -292,12 +402,14 @@
         const statusMessage = document.getElementById('statusMessage');
         const loadingIndicator = document.getElementById('loadingIndicator');
 
-        // --- API URL is now relative ---
+        // --- API URL is relative ---
         const API_BASE_URL = '';
         let currentTables = [];
         let selectedTable = null;
+        let pollingIntervalId = null;
+        const POLLING_INTERVAL_MS = 1000; // Refresh table list every 10 seconds
 
-        // --- Utility Functions (keep existing showLoader, showStatus, clearStatus, renderTable, renderSchema) ---
+        // --- Utility Functions (keep existing) ---
         function showLoader(show) {
             loadingIndicator.style.display = show ? 'inline-block' : 'none';
         }
@@ -317,7 +429,7 @@
         async function fetchAPI(endpoint, options = {}) {
             showLoader(true);
             clearStatus();
-            const url = `${API_BASE_URL}${endpoint}`; // API_BASE_URL is now ''
+            const url = `${API_BASE_URL}${endpoint}`;
             try {
                 const response = await fetch(url, options);
                 if (!response.ok) {
@@ -328,10 +440,12 @@
                     } catch (e) { /* Ignore */ }
                     throw new Error(errorDetail);
                 }
-                 if (response.headers.get("content-type")?.includes("application/json")) {
-                    return await response.json();
+                 // Check if the response is likely JSON before trying to parse
+                 const contentType = response.headers.get("content-type");
+                 if (contentType && contentType.includes("application/json")) {
+                     return await response.json();
                  }
-                 // Handle potential non-JSON success responses if needed
+                 // Assume text for non-JSON or if content-type is missing
                  return await response.text();
             } catch (error) {
                 console.error('API Fetch Error:', error);
@@ -344,7 +458,12 @@
 
         function renderTable(data, tableElement) {
             tableElement.innerHTML = '';
-            if (!data || data.length === 0) {
+             if (!data || !Array.isArray(data)) { // Check if data is an array
+                 tableElement.innerHTML = '<tbody><tr><td>Invalid data format received.</td></tr></tbody>';
+                 console.error("Invalid data format for renderTable:", data);
+                 return;
+             }
+            if (data.length === 0) {
                 tableElement.innerHTML = '<tbody><tr><td>No data available.</td></tr></tbody>';
                 return;
             }
@@ -362,28 +481,31 @@
                 headers.forEach(header => {
                     const cell = row.insertCell();
                     const value = rowData[header];
-                    // Better null/undefined check and string conversion
                     cell.textContent = (value === null || value === undefined) ? 'NULL' : String(value);
                  });
             });
         }
 
+        // --- renderSchema FIX ---
         function renderSchema(schemaData) {
-            const tableElement = schemaTable;
-            tableElement.innerHTML = '';
+             // Target the table directly
+             schemaTable.innerHTML = ''; // Clear previous table content
+             schemaPlaceholder.style.display = 'none'; // Hide placeholder
+
             if (!schemaData || !schemaData.columns || schemaData.columns.length === 0) {
-                schemaDisplay.innerHTML = '<h4>Schema</h4><p>No schema information available.</p>';
+                schemaTable.innerHTML = '<tbody><tr><td colspan="2">No schema information available.</td></tr></tbody>';
                 return;
             }
-            schemaDisplay.innerHTML = '<h4>Schema</h4>';
-            const thead = tableElement.createTHead();
+
+            const thead = schemaTable.createTHead();
             const headerRow = thead.insertRow();
             ['Name', 'Type'].forEach(headerText => {
                 const th = document.createElement('th');
                 th.textContent = headerText;
                 headerRow.appendChild(th);
             });
-            const tbody = tableElement.createTBody();
+
+            const tbody = schemaTable.createTBody();
             schemaData.columns.forEach(column => {
                 const row = tbody.insertRow();
                 row.insertCell().textContent = column.name;
@@ -391,35 +513,72 @@
             });
          }
 
+
         // --- Event Handlers (Modified) ---
 
-        async function loadTables() {
-            // No need to get API_BASE_URL from input anymore
-            tableList.innerHTML = '<li>Loading tables...</li>'; // Indicate loading
-             schemaTable.innerHTML = ''; // Clear schema
-             dataTable.innerHTML = ''; // Clear data
-             tableDataHeader.textContent = '';
-             queryResultContainer.style.display = 'none';
+        async function loadTables(isPolling = false) {
+            if (!isPolling) {
+                tableList.innerHTML = '<li>Loading tables...</li>';
+                schemaTable.innerHTML = '';
+                dataTable.innerHTML = '';
+                tableDataHeader.textContent = '';
+                queryResultContainer.style.display = 'none';
+                schemaPlaceholder.style.display = 'block'; // Show placeholders initially
+                dataPlaceholder.style.display = 'block';
+            }
             try {
-                currentTables = await fetchAPI('/tables');
-                displayTables(currentTables);
-                showStatus("Tables loaded.", false);
-                 // Clear placeholder texts
-                 if (currentTables.length > 0) {
-                     schemaDisplay.innerHTML = '<h4>Schema</h4><p>Select a table from the list.</p>';
-                     dataDisplayContainer.querySelector('p').style.display = 'block'; // Show prompt
-                 } else {
-                     schemaDisplay.innerHTML = '<h4>Schema</h4><p>No tables found in the database.</p>';
-                      dataDisplayContainer.querySelector('p').style.display = 'block';
+                const newTables = await fetchAPI('/tables');
+                // Check if the list actually changed before re-rendering
+                if (!isPolling || JSON.stringify(newTables) !== JSON.stringify(currentTables)) {
+                    console.log("Table list changed, updating UI.");
+                    currentTables = newTables;
+                    displayTables(currentTables);
+                    if (!isPolling) {
+                         showStatus("Tables loaded.", false);
+                    }
+                     // If the currently selected table disappeared, clear the displays
+                    if (selectedTable && !currentTables.includes(selectedTable)) {
+                         console.log(`Selected table "${selectedTable}" removed.`);
+                         selectedTable = null;
+                         tableDataHeader.textContent = '';
+                         schemaDisplay.innerHTML = '<h4>Schema</h4><p id="schemaPlaceholder">Select a table from the list.</p><table id="schemaTable"></table>';
+                         dataDisplayContainer.innerHTML = '<h4>Data <span id="tableDataHeader"></span></h4><p id="dataPlaceholder">Select a table from the list.</p><div id="dataDisplay"><table id="dataTable"></table></div>';
+                         // Re-assign potentially overwritten elements
+                         schemaTable = document.getElementById('schemaTable');
+                         dataTable = document.getElementById('dataTable');
+                         schemaPlaceholder = document.getElementById('schemaPlaceholder');
+                         dataPlaceholder = document.getElementById('dataPlaceholder');
+                         tableDataHeader = document.getElementById('tableDataHeader');
+                     } else if (selectedTable && !isPolling) {
+                         // Optionally refresh current table view if needed,
+                         // but might be disruptive. Let's skip for now.
+                         // handleTableSelection(tableList.querySelector(`li[data-table-name="${selectedTable}"]`));
+                     }
                  }
+
+                 // Clear placeholders if tables loaded successfully
+                 if (currentTables.length > 0 && !isPolling) {
+                     schemaPlaceholder.style.display = 'none';
+                     dataPlaceholder.style.display = 'none';
+                 } else if (currentTables.length === 0 && !isPolling) {
+                      tableList.innerHTML = '<li>No tables found.</li>';
+                     schemaPlaceholder.textContent = 'No tables found in the database.';
+                     dataPlaceholder.textContent = 'No tables found in the database.';
+                 }
+
             } catch (error) {
-                tableList.innerHTML = '<li>Error loading tables.</li>';
+                if (!isPolling) { // Only show initial load error prominently
+                    tableList.innerHTML = '<li>Error loading tables.</li>';
+                    schemaPlaceholder.textContent = 'Error loading tables.';
+                    dataPlaceholder.textContent = 'Error loading tables.';
+                } else {
+                    console.error("Polling error:", error); // Log polling errors quietly
+                }
             }
         }
 
-        // --- displayTables and handleTableSelection remain the same ---
         function displayTables(tables) {
-            tableList.innerHTML = ''; // Clear list
+            tableList.innerHTML = '';
             if (tables.length === 0) {
                 tableList.innerHTML = '<li>No tables found.</li>';
                 return;
@@ -427,8 +586,12 @@
             tables.sort().forEach(tableName => {
                 const li = document.createElement('li');
                 li.textContent = tableName;
-                li.dataset.tableName = tableName; // Store table name
+                li.dataset.tableName = tableName;
                 li.onclick = () => handleTableSelection(li);
+                // Re-apply active class if this table was selected
+                if (tableName === selectedTable) {
+                    li.classList.add('active');
+                }
                 tableList.appendChild(li);
             });
         }
@@ -444,42 +607,49 @@
             if (!selectedTable) return;
 
             queryResultContainer.style.display = 'none';
-            dataDisplayContainer.style.display = 'flex'; // Make sure it's flex
-             dataDisplayContainer.querySelector('p').style.display = 'none'; // Hide prompt
+            dataDisplayContainer.style.display = 'flex';
+            dataPlaceholder.style.display = 'none'; // Hide placeholder
 
             tableDataHeader.textContent = `for table "${selectedTable}"`;
-             schemaDisplay.innerHTML = '<h4>Schema</h4>'; // Keep header
-             schemaTable.innerHTML = '<tbody><tr><td>Loading schema...</td></tr></tbody>';
-             dataTable.innerHTML = '<tbody><tr><td>Loading data...</td></tr></tbody>';
+            schemaPlaceholder.style.display = 'none'; // Hide placeholder
+            schemaTable.innerHTML = '<tbody><tr><td colspan="2">Loading schema...</td></tr></tbody>';
+            dataTable.innerHTML = '<tbody><tr><td>Loading data...</td></tr></tbody>';
 
             try {
-                // Fetch schema and data concurrently
                 const [schemaResponse, tableDataResponse] = await Promise.all([
                     fetchAPI(`/tables/${selectedTable}/schema`),
-                    fetchAPI(`/tables/${selectedTable}?limit=100`) // Default limit
+                    fetchAPI(`/tables/${selectedTable}?limit=100`)
                 ]);
                 renderSchema(schemaResponse);
                 renderTable(tableDataResponse, dataTable);
             } catch (error) {
-                 // Error already shown by fetchAPI
                  schemaTable.innerHTML = '<tbody><tr><td colspan="2">Error loading schema.</td></tr></tbody>';
                  dataTable.innerHTML = '<tbody><tr><td>Error loading data.</td></tr></tbody>';
             }
         }
 
 
-        // --- runCustomQuery remains mostly the same ---
          async function runCustomQuery() {
              const sql = sqlInput.value.trim();
              if (!sql) {
                  showStatus("SQL query cannot be empty.", true);
                  return;
              }
-             // No need to check API_BASE_URL anymore
 
-            dataDisplayContainer.style.display = 'none'; // Hide table data
-             dataDisplayContainer.querySelector('p').style.display = 'none'; // Hide prompt
-            queryResultContainer.style.display = 'block'; // Show query results area
+             // Clear active selection in sidebar if a custom query is run
+             const currentActive = tableList.querySelector('.active');
+             if (currentActive) {
+                 currentActive.classList.remove('active');
+             }
+             selectedTable = null; // Deselect table
+
+            dataDisplayContainer.style.display = 'none';
+            dataPlaceholder.style.display = 'none';
+             schemaPlaceholder.style.display = 'block'; // Show placeholders again
+             schemaTable.innerHTML = '';
+             tableDataHeader.textContent = '';
+
+            queryResultContainer.style.display = 'block';
             queryResultTable.innerHTML = '<tbody><tr><td>Running query...</td></tr></tbody>';
 
 
@@ -495,16 +665,47 @@
                  showStatus("Query executed successfully.", false);
              } catch (error) {
                  queryResultTable.innerHTML = '<tbody><tr><td>Error executing query. See status message.</td></tr></tbody>';
-                 // Error is shown by fetchAPI
+             }
+         }
+
+         // --- Polling Function ---
+         function startPolling() {
+             stopPolling(); // Clear existing interval if any
+             console.log(`Starting polling every ${POLLING_INTERVAL_MS / 1000} seconds.`);
+             pollingIntervalId = setInterval(() => loadTables(true), POLLING_INTERVAL_MS);
+         }
+
+         function stopPolling() {
+             if (pollingIntervalId) {
+                 console.log("Stopping polling.");
+                 clearInterval(pollingIntervalId);
+                 pollingIntervalId = null;
              }
          }
 
         // --- Initial Setup ---
-        // Remove connectButton listener
         runSqlButton.onclick = runCustomQuery;
 
-        // Load tables automatically when the page loads
-        document.addEventListener('DOMContentLoaded', loadTables);
+        // Load tables automatically when the page loads and start polling
+        document.addEventListener('DOMContentLoaded', () => {
+            loadTables().then(() => {
+                // Start polling only after the initial load succeeds
+                if (currentTables.length >= 0) { // Start even if no tables initially
+                    startPolling();
+                }
+            });
+        });
+
+        // Optional: Stop polling when the page is hidden (e.g., tab switched)
+        // document.addEventListener("visibilitychange", () => {
+        //     if (document.visibilityState === 'hidden') {
+        //         stopPolling();
+        //     } else {
+        //         // Optionally restart polling immediately or wait for next interval
+        //         loadTables(); // Refresh immediately when tab becomes visible
+        //         startPolling();
+        //     }
+        // });
 
     </script>