pglens 2.1.0 → 2.2.0

package/.github/workflows/release.yml

@@ -0,0 +1,30 @@
+name: Release
+
+on:
+  workflow_dispatch:
+  push:
+    tags:
+      - "v*"
+
+jobs:
+  build:
+    strategy:
+      matrix:
+        os: [macos-latest, ubuntu-latest, windows-latest]
+    runs-on: ${{ matrix.os }}
+
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - run: npm ci
+      - run: npm run dist
+      - uses: softprops/action-gh-release@v1
+        with:
+          files: |
+            dist/*.dmg
+            dist/*.zip
+            dist/*.exe
+            dist/*.AppImage
+            dist/*.deb

package/CHANGELOG.md

@@ -5,18 +5,35 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.2.0] - 2026-02-02
+
+### Added
+
+- **Row Numbers**: Table rows now display row numbers for easier navigation and reference.
+- **Table Schema Viewer**: View table structure and column definitions directly from the UI.
+- **Spotlight Search**: Quick table search with `Cmd+K` / `Ctrl+K` keyboard shortcut for fast navigation.
+- **Connection Persistence**: Desktop app now saves connections and restores them on restart.
+- **Auto-Updates**: Desktop app automatically checks for updates and notifies when new versions are available.
+
+### Changed
+
+- Cleaner codebase with reduced unnecessary comments.
+
 ## [2.1.0] - 2026-01-11
 
 ### Added
+
 - **Default Landing Page**: The app now defaults to an "All Connections" grid view on startup.
 - **Simplified Sidebar**: Connection management (Edit/Delete) is now centralized on the Landing Page.
 - **Smart View Switching**: Table list and search are hidden until a server is explicitly selected.
 
 ### Changed
+
 - **Navigation Flow**: "Add Connection" and Logo clicks efficiently return you to the Landing Page.
 - **Auto-Connect Disabled**: Adding a new connection returns to the grid instead of auto-opening the server.
 
 ### Fixed
+
 - **View Persistence**: Reconnecting to an active server no longer overwrites open tabs with a loading screen.
 - **Connection Updates**: Fixed issue where the connection grid would not update immediately after adding a server.
 
@@ -83,4 +100,3 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 [1.1.0]: https://github.com/tsvillain/pglens/compare/v1.0.0...v1.1.0
 [1.0.0]: https://github.com/tsvillain/pglens/releases/tag/v1.0.0
-

package/README.md

@@ -5,9 +5,13 @@ A simple PostgreSQL database viewer tool. Perfect to quickly view and explore yo
 ## Features
 
 - 🔌 **Connection Manager**: Manage multiple database connections from a single UI
+- 💾 **Connection Persistence**: Saved connections are restored when you reopen the app
 - 🚀 **Background Service**: Runs as a daemon process for persistent access
 - 🗂️ **Table Browser**: View all tables in your database in a clean, searchable sidebar
+- 🔎 **Spotlight Search**: Quick table search with `Cmd+K` / `Ctrl+K` for fast navigation
 - 📊 **Data Viewer**: Browse table rows with a modern, easy-to-read interface
+- 🔢 **Row Numbers**: Row numbers displayed for easier navigation and reference
+- 📋 **Table Schema**: View table structure and column definitions directly from the UI
 - 📝 **Cell Content Viewer**: Double-click any cell to view full content in a popup
 - 🎨 **JSON/JSONB Formatting**: Auto-formats JSON data with syntax highlighting
 - 🕒 **Timezone Support**: View timestamps in local, UTC, or other timezones
@@ -21,6 +25,7 @@ A simple PostgreSQL database viewer tool. Perfect to quickly view and explore yo
 - 🎨 **Theme Support**: Choose between light, dark, or system theme
 - ⚡ **Optimized Performance**: Uses cursor-based pagination for efficient large table navigation
 - 🔒 **SSL Support**: Configurable SSL modes (Disable, Require, Prefer, Verify CA/Full)
+- 🔄 **Auto-Updates**: Desktop app automatically checks for and installs updates
 - 🚀 **Easy Setup**: Install globally and run with a single command
 
 ## Installation
@@ -54,8 +59,6 @@ pglens url
 
 ### Connect to a Database
 
-### Connect to a Database
-
 1. Open `http://localhost:54321` to see the **All Connections** landing page.
 2. Click the **Add Connection** card or the **+** icon in the grid.
 3. Enter your connection details using one of the tabs:
@@ -77,7 +80,7 @@ pglens stop
 
 1. **Start**: Run `pglens start` to launch the background service
 2. **Connect**: Add one or more database connections via the Web UI
-3. **Explore**: 
+3. **Explore**:
    - Use the sidebar to browse tables across different connections
    - Double-click cells to view detailed content
    - Use the "Columns" menu to toggle visibility
@@ -92,10 +95,40 @@ To develop or modify pglens:
 git clone https://github.com/tsvillain/pglens.git
 cd pglens
 
+# Install dependencies
 # Install dependencies
 npm install
+```
+
+### Run Desktop App
+
+To run the application as a standalone desktop app during development:
+
+```bash
+npm run electron:start
+```
+
+### Build Desktop App
+
+To build the desktop application for your current platform:
 
-# Run locally (starts server in foreground for logs)
+```bash
+npm run dist
+```
+
+To build for specific platforms (requires supported environment):
+
+```bash
+npm run dist:mac    # Build for macOS
+npm run dist:win    # Build for Windows
+npm run dist:linux  # Build for Linux
+```
+
+### Run Server Locally
+
+To run the server locally in foreground:
+
+```bash
 node bin/pglens serve
 ```
 

package/client/app.js

@@ -60,6 +60,19 @@ const connectButton = document.getElementById('connectButton');
 const connectionError = document.getElementById('connectionError');
 const loadingOverlay = document.getElementById('loadingOverlay');
 
+// Spotlight Elements
+const spotlightOverlay = document.getElementById('spotlightOverlay');
+const spotlightInput = document.getElementById('spotlightInput');
+const spotlightResults = document.getElementById('spotlightResults');
+let spotlightSelectedIndex = -1;
+let spotlightMatches = [];
+
+// Schema Dialog UI Elements
+const schemaDialog = document.getElementById('schemaDialog');
+const closeSchemaDialogBtn = document.getElementById('closeSchemaDialog');
+const closeSchemaButton = document.getElementById('closeSchemaButton');
+const schemaTableContainer = document.getElementById('schemaTableContainer');
+
 /**
  * Initialize the application when DOM is ready.
  * Sets up event listeners and loads initial data.
@@ -112,9 +125,8 @@ document.addEventListener('DOMContentLoaded', () => {
   });
 
   sidebarToggle.addEventListener('click', () => {
-    if (tabs.length > 0) {
-      sidebar.classList.toggle('minimized');
-    }
+    sidebar.classList.toggle('minimized');
+    updateSidebarToggleState();
   });
 
   updateSidebarToggleState();
@@ -163,6 +175,66 @@ document.addEventListener('DOMContentLoaded', () => {
   if (newConnectionBtn) {
     newConnectionBtn.addEventListener('click', () => showConnectionDialog(true));
   }
+
+  // Schema Dialog Listeners
+  if (closeSchemaDialogBtn) {
+    closeSchemaDialogBtn.addEventListener('click', hideSchemaDialog);
+  }
+  if (closeSchemaButton) {
+    closeSchemaButton.addEventListener('click', hideSchemaDialog);
+  }
+
+  // Close schema dialog on outside click
+  if (schemaDialog) {
+    schemaDialog.addEventListener('click', (e) => {
+      if (e.target === schemaDialog) {
+        hideSchemaDialog();
+      }
+    });
+  }
+
+  // Spotlight Search Shortcut (Cmd+K / Ctrl+K)
+  document.addEventListener('keydown', (e) => {
+    if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
+      e.preventDefault();
+      // Only toggle if tables are loaded
+      if (allTables && allTables.length > 0) {
+        toggleSpotlight();
+      }
+    }
+
+    // Spotlight Navigation
+    if (spotlightOverlay.style.display !== 'none') {
+      if (e.key === 'Escape') {
+        toggleSpotlight(false);
+      } else if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        navigateSpotlight(1);
+      } else if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        navigateSpotlight(-1);
+      } else if (e.key === 'Enter') {
+        e.preventDefault();
+        executeSpotlightSelection();
+      }
+    }
+  });
+
+  // Spotlight Input Listener
+  if (spotlightInput) {
+    spotlightInput.addEventListener('input', (e) => {
+      filterSpotlight(e.target.value);
+    });
+  }
+
+  // Close spotlight on overlay click
+  if (spotlightOverlay) {
+    spotlightOverlay.addEventListener('click', (e) => {
+      if (e.target === spotlightOverlay) {
+        toggleSpotlight(false);
+      }
+    });
+  }
 });
 
 /**
@@ -216,11 +288,7 @@ function updateThemeIcon() {
 }
 
 function updateSidebarToggleState() {
-  if (tabs.length === 0 && connections.length === 0) {
-    sidebarToggle.disabled = true;
-    sidebarToggle.classList.add('disabled');
-    sidebar.classList.remove('minimized');
-  } else {
+  if (sidebarToggle) {
     sidebarToggle.disabled = false;
     sidebarToggle.classList.remove('disabled');
   }
@@ -286,6 +354,26 @@ function renderConnectionsList() {
       li.classList.add('active');
     }
 
+    // Generate Initials
+    let initials = '';
+    if (conn.name) {
+      const parts = conn.name.trim().split(/\s+/);
+      if (parts.length >= 2) {
+        initials = (parts[0][0] + parts[1][0]).toUpperCase();
+      } else if (conn.name.length >= 2) {
+        initials = conn.name.substring(0, 2).toUpperCase();
+      } else {
+        initials = conn.name.substring(0, 1).toUpperCase();
+      }
+    } else {
+      initials = 'DB';
+    }
+
+    const initialsDiv = document.createElement('div');
+    initialsDiv.className = 'connection-initials';
+    initialsDiv.textContent = initials;
+    li.appendChild(initialsDiv);
+
     const nameSpan = document.createElement('span');
     nameSpan.className = 'connection-name';
     nameSpan.textContent = conn.name;
@@ -301,6 +389,9 @@ function renderConnectionsList() {
     });
 
     connectionsList.appendChild(li);
+
+    // Add tooltip for minimized state
+    li.title = conn.name;
   });
 }
 
@@ -1299,6 +1390,7 @@ async function loadTableData() {
     tab.hasPrimaryKey = data.hasPrimaryKey || false;
     tab.isApproximate = data.isApproximate || false;
     tab.data = data; // Cache data for client-side sorting
+    tab.columns = data.columns; // Store column metadata for schema view
 
     // Update cursor for next page navigation
     if (data.nextCursor) {
@@ -1387,6 +1479,14 @@ function renderTableHeader(tab, columns = [], isShimmer = false) {
         </svg>
         <span class="refresh-text">Refresh</span>
       </button>
+      <button class="menu-button" id="schemaButton" title="View Schema">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+          <line x1="3" y1="9" x2="21" y2="9"></line>
+          <line x1="9" y1="21" x2="9" y2="9"></line>
+        </svg>
+        <span>Schema</span>
+      </button>
       <div class="limit-selector">
         <select id="limitSelect" class="limit-select" title="Rows per page">
           <option value="25" ${tab.limit === 25 ? 'selected' : ''}>25 rows</option>
@@ -1437,6 +1537,13 @@ function renderTableHeader(tab, columns = [], isShimmer = false) {
       refreshButton.addEventListener('click', handleRefresh);
     }
 
+    const schemaButton = tableHeader.querySelector('#schemaButton');
+    if (schemaButton) {
+      schemaButton.addEventListener('click', () => {
+        showSchemaModal(tab.tableName, tab.columns);
+      });
+    }
+
     const limitSelect = tableHeader.querySelector('#limitSelect');
     if (limitSelect) {
       limitSelect.addEventListener('change', (e) => {
@@ -1479,6 +1586,14 @@ function renderShimmerTable(tab) {
   const headerRow = document.createElement('tr');
 
   // Render header placeholders
+  const rowNumTh = document.createElement('th');
+  rowNumTh.className = 'row-number-header';
+  const rowNumSkeleton = document.createElement('div');
+  rowNumSkeleton.className = 'skeleton';
+  rowNumSkeleton.style.width = '30px';
+  rowNumTh.appendChild(rowNumSkeleton);
+  headerRow.appendChild(rowNumTh);
+
   columns.forEach(col => {
     const th = document.createElement('th');
     th.className = 'resizable';
@@ -1497,6 +1612,15 @@ function renderShimmerTable(tab) {
   for (let i = 0; i < 10; i++) {
     const tr = document.createElement('tr');
     tr.className = 'shimmer-row';
+
+    // Row number shimmer cell
+    const rowNumTd = document.createElement('td');
+    const rowNumSkeleton = document.createElement('div');
+    rowNumSkeleton.className = 'skeleton shimmer-cell';
+    rowNumSkeleton.style.width = '20px';
+    rowNumTd.appendChild(rowNumSkeleton);
+    tr.appendChild(rowNumTd);
+
     columns.forEach(() => {
       const td = document.createElement('td');
       const skeleton = document.createElement('div');
@@ -1542,6 +1666,12 @@ function renderTable(data) {
   const thead = document.createElement('thead');
   const headerRow = document.createElement('tr');
 
+  // Add Row Number Header
+  const rowNumTh = document.createElement('th');
+  rowNumTh.className = 'row-number-header';
+  rowNumTh.textContent = '#';
+  headerRow.appendChild(rowNumTh);
+
   visibleColumns.forEach((column, index) => {
     const th = document.createElement('th');
     th.className = 'sortable resizable';
@@ -1663,8 +1793,16 @@ function renderTable(data) {
   // Server-side sorting, so rows are already sorted
   const rows = data.rows || [];
 
-  rows.forEach(row => {
+  rows.forEach((row, rowIndex) => {
     const tr = document.createElement('tr');
+
+    // Add Row Number Cell
+    const rowNumTd = document.createElement('td');
+    rowNumTd.className = 'row-number-cell';
+    const rowNumber = ((tab.page - 1) * tab.limit) + rowIndex + 1;
+    rowNumTd.textContent = rowNumber.toLocaleString();
+    tr.appendChild(rowNumTd);
+
     visibleColumns.forEach(column => {
       const td = document.createElement('td');
 
@@ -2460,3 +2598,177 @@ function hideLoading() {
     loadingOverlay.style.display = 'none';
   }
 }
+
+/**
+ * Show the schema modal for a table.
+ * @param {string} tableName - Name of the table
+ * @param {Object} columns - Column metadata
+ */
+function showSchemaModal(tableName, columns) {
+  const title = schemaDialog.querySelector('h2');
+  title.textContent = `Schema: ${tableName}`;
+
+  renderSchemaTable(columns);
+  schemaDialog.style.display = 'flex';
+}
+
+function hideSchemaDialog() {
+  schemaDialog.style.display = 'none';
+}
+
+/**
+ * Render the schema table inside the modal.
+ * @param {Object} columns - Column metadata
+ */
+function renderSchemaTable(columns) {
+  schemaTableContainer.innerHTML = '';
+
+  const table = document.createElement('table');
+  table.className = 'schema-table';
+
+  const thead = document.createElement('thead');
+  thead.innerHTML = `
+    <tr>
+      <th>Column</th>
+      <th>Type</th>
+      <th>Key</th>
+    </tr>
+  `;
+  table.appendChild(thead);
+
+  const tbody = document.createElement('tbody');
+
+  Object.entries(columns).forEach(([name, meta]) => {
+    const tr = document.createElement('tr');
+
+    // Key Badges
+    let keyBadges = '';
+    if (meta.isPrimaryKey) {
+      keyBadges += '<span class="schema-badge pk">PK</span> ';
+    }
+    if (meta.isForeignKey) {
+      keyBadges += '<span class="schema-badge fk">FK</span> ';
+    }
+    if (meta.isUnique && !meta.isPrimaryKey) {
+      keyBadges += '<span class="schema-badge unique">UQ</span> ';
+    }
+
+    // FK Reference
+    let fkRef = '';
+    if (meta.isForeignKey && meta.foreignKeyRef) {
+      fkRef = `<div class="fk-ref">→ ${meta.foreignKeyRef.table}(${meta.foreignKeyRef.column})</div>`;
+    }
+
+    tr.innerHTML = `
+      <td style="font-weight: 500">${name}</td>
+      <td style="color: var(--text-secondary); font-family: monospace">${meta.dataType}</td>
+      <td>
+        ${keyBadges}
+        ${fkRef}
+      </td>
+    `;
+
+    tbody.appendChild(tr);
+  });
+
+  table.appendChild(tbody);
+  schemaTableContainer.appendChild(table);
+}
+
+// Spotlight Functions
+function toggleSpotlight(show) {
+  if (show === undefined) {
+    show = spotlightOverlay.style.display === 'none';
+  }
+
+  if (show) {
+    spotlightOverlay.style.display = 'flex';
+    spotlightInput.value = '';
+    spotlightInput.focus();
+    filterSpotlight('');
+  } else {
+    spotlightOverlay.style.display = 'none';
+  }
+}
+
+function filterSpotlight(query) {
+  spotlightResults.innerHTML = '';
+  spotlightSelectedIndex = 0;
+
+  if (!allTables || allTables.length === 0) {
+    spotlightResults.innerHTML = '<div class="spotlight-empty">No tables available</div>';
+    spotlightMatches = [];
+    return;
+  }
+
+  const lowerQuery = query.toLowerCase().trim();
+  spotlightMatches = allTables.filter(t => t.toLowerCase().includes(lowerQuery));
+
+  if (spotlightMatches.length === 0) {
+    spotlightResults.innerHTML = '<div class="spotlight-empty">No tables found</div>';
+    return;
+  }
+
+  spotlightMatches.forEach((table, index) => {
+    const div = document.createElement('div');
+    div.className = `spotlight-result-item ${index === 0 ? 'selected' : ''}`;
+    div.dataset.index = index;
+
+    div.innerHTML = `
+      <div class="spotlight-result-icon">
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <line x1="3" y1="6" x2="21" y2="6"></line>
+          <line x1="3" y1="12" x2="21" y2="12"></line>
+          <line x1="3" y1="18" x2="21" y2="18"></line>
+        </svg>
+      </div>
+      <div class="spotlight-result-info">
+        <span class="spotlight-result-name">${table}</span>
+        <span class="spotlight-result-schema">public</span>
+      </div>
+    `;
+
+    div.addEventListener('mousemove', () => {
+      setSpotlightSelection(index);
+    });
+
+    div.addEventListener('click', () => {
+      openSpotlightTable(table);
+    });
+
+    spotlightResults.appendChild(div);
+  });
+}
+
+function navigateSpotlight(direction) {
+  if (spotlightMatches.length === 0) return;
+
+  let newIndex = spotlightSelectedIndex + direction;
+  if (newIndex < 0) newIndex = spotlightMatches.length - 1;
+  if (newIndex >= spotlightMatches.length) newIndex = 0;
+
+  setSpotlightSelection(newIndex);
+}
+
+function setSpotlightSelection(index) {
+  spotlightSelectedIndex = index;
+  const items = spotlightResults.querySelectorAll('.spotlight-result-item');
+  items.forEach(item => item.classList.remove('selected'));
+
+  const selectedItem = items[index];
+  if (selectedItem) {
+    selectedItem.classList.add('selected');
+    selectedItem.scrollIntoView({ block: 'nearest' });
+  }
+}
+
+function executeSpotlightSelection() {
+  if (spotlightSelectedIndex >= 0 && spotlightSelectedIndex < spotlightMatches.length) {
+    openSpotlightTable(spotlightMatches[spotlightSelectedIndex]);
+  }
+}
+
+function openSpotlightTable(tableName) {
+  toggleSpotlight(false);
+  handleTableSelect(tableName);
+}

package/client/index.html

@@ -86,6 +86,42 @@
       </div>
     </div>
 
+    <!-- Schema Dialog -->
+    <div class="connection-dialog-overlay" id="schemaDialog" style="display: none;">
+      <div class="connection-dialog schema-dialog-content">
+        <div class="connection-dialog-header">
+          <h2>Table Schema</h2>
+          <button class="close-dialog-button" id="closeSchemaDialog">×</button>
+        </div>
+        <div class="connection-dialog-body schema-body">
+          <div class="schema-table-container" id="schemaTableContainer">
+            <!-- Schema table rendered here -->
+          </div>
+        </div>
+        <div class="connection-dialog-footer">
+          <button class="button-primary" id="closeSchemaButton">Close</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Spotlight Search Dialog -->
+    <div class="spotlight-overlay" id="spotlightOverlay" style="display: none;">
+      <div class="spotlight-modal">
+        <div class="spotlight-search-container">
+          <svg class="search-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+            stroke-width="2">
+            <circle cx="11" cy="11" r="8"></circle>
+            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+          </svg>
+          <input type="text" id="spotlightInput" placeholder="Search tables..." autocomplete="off">
+          <div class="spotlight-shortcut-hint">Cmd + K</div>
+        </div>
+        <div class="spotlight-results" id="spotlightResults">
+          <!-- Results will be rendered here -->
+        </div>
+      </div>
+    </div>
+
     <div class="sidebar" id="sidebar">
       <div class="sidebar-header">
         <div class="sidebar-header-top">
@@ -118,7 +154,7 @@
             <h3>Tables <span class="table-count" id="tableCount">0</span></h3>
           </div>
           <div class="sidebar-search-container">
-            <input type="text" class="sidebar-search" id="sidebarSearch" placeholder="Search tables..." />
+            <input type="text" class="sidebar-search" id="sidebarSearch" placeholder="Search tables (Cmd+K)..." />
             <div class="theme-selector">
               <button class="theme-button" id="themeButton" title="Theme">
                 <span class="theme-icon">🌓</span>