pglens 1.0.0 → 1.1.0

package/CHANGELOG.md

@@ -5,20 +5,29 @@ 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).
 
-## [Unreleased]
+## [1.1.0] - 2025-11-21
 
 ### Added
-- SSL mode configuration via `--sslmode` flag with support for: `disable`, `require`, `prefer`, `verify-ca`, `verify-full`
-- Automatic SSL mode recommendations when connection fails
-- Enhanced error messages with context-aware suggestions
+
+- Cell content popup dialog for viewing full cell values (double-click any table cell)
+- JSON formatting support for JSONB and JSON values in cell content popup with proper indentation
+- Timezone selector for date/time values with multi-timezone display
+- Select All button in column selector for quick column visibility management
+- Copy-to-clipboard functionality in cell content popup
+
+### Fixed
+
+- JSONB columns now display as readable JSON instead of showing as object
 
 ### Changed
-- Improved production readiness by removing debug code and commented sections
-- Updated connection error handling to provide actionable recommendations
+
+- Table cells now truncate with ellipsis for better table readability
+- Improved cell content viewing experience with dedicated popup dialog
 
 ## [1.0.0] - Initial Release
 
 ### Added
+
 - PostgreSQL database viewer with web interface
 - Table browser with searchable sidebar
 - Multi-tab support for viewing multiple tables simultaneously
@@ -31,11 +40,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Automatic primary key detection for optimized pagination
 - Refresh data functionality
 - PM2 deployment support documentation
+- SSL mode configuration via `--sslmode` flag with support for: `disable`, `require`, `prefer`, `verify-ca`, `verify-full`
+- Automatic SSL mode recommendations when connection fails
+- Enhanced error messages with context-aware suggestions
 
 ### Security
+
 - SQL injection prevention via table name sanitization
 - Input validation for pagination parameters
 
-[Unreleased]: https://github.com/tsvillain/pglens/compare/v1.0.0...HEAD
+[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/client/app.js

@@ -424,6 +424,27 @@ function handleRefresh() {
   loadTableData();
 }
 
+/**
+ * Check if a value is a JSON object or array (JSONB/JSON type).
+ * Excludes null, Date objects, and other non-JSON types.
+ * @param {*} value - Value to check
+ * @returns {boolean} True if value is a JSON object or array
+ */
+function isJsonValue(value) {
+  if (value === null || value === undefined) {
+    return false;
+  }
+
+  if (typeof value === 'object') {
+    if (value instanceof Date) {
+      return false;
+    }
+    return Array.isArray(value) || Object.prototype.toString.call(value) === '[object Object]';
+  }
+
+  return false;
+}
+
 /**
  * Load table data for the active tab.
  * Uses cursor-based pagination for tables with primary keys (more efficient for large datasets).
@@ -538,7 +559,6 @@ function renderTable(data) {
 
   visibleColumns.forEach((column, index) => {
     const th = document.createElement('th');
-    th.textContent = column;
     th.className = 'sortable resizable';
     th.dataset.column = column;
 
@@ -549,6 +569,78 @@ function renderTable(data) {
       th.style.minWidth = '120px';
     }
 
+    const columnHeader = document.createElement('div');
+    columnHeader.className = 'column-header';
+
+    // Column name with key badges
+    const columnNameRow = document.createElement('div');
+    columnNameRow.className = 'column-name-row';
+
+    const columnName = document.createElement('div');
+    columnName.className = 'column-name';
+    columnName.textContent = column;
+    columnNameRow.appendChild(columnName);
+
+    const columnMeta = data.columns && data.columns[column] ? data.columns[column] : null;
+
+    let dataType = '';
+    let isPrimaryKey = false;
+    let isForeignKey = false;
+    let foreignKeyRef = null;
+    let isUnique = false;
+
+    if (columnMeta) {
+      if (typeof columnMeta === 'string') {
+        dataType = columnMeta;
+      } else {
+        dataType = columnMeta.dataType || '';
+        isPrimaryKey = columnMeta.isPrimaryKey || false;
+        isForeignKey = columnMeta.isForeignKey || false;
+        foreignKeyRef = columnMeta.foreignKeyRef || null;
+        isUnique = columnMeta.isUnique || false;
+      }
+    }
+
+    const keyBadges = document.createElement('div');
+    keyBadges.className = 'key-badges';
+
+    if (isPrimaryKey) {
+      const pkBadge = document.createElement('span');
+      pkBadge.className = 'key-badge key-badge-pk';
+      pkBadge.textContent = 'PK';
+      pkBadge.title = 'Primary Key';
+      keyBadges.appendChild(pkBadge);
+    }
+
+    if (isForeignKey && foreignKeyRef) {
+      const fkBadge = document.createElement('span');
+      fkBadge.className = 'key-badge key-badge-fk';
+      fkBadge.textContent = 'FK';
+      fkBadge.title = `Foreign Key → ${foreignKeyRef.table}.${foreignKeyRef.column}`;
+      keyBadges.appendChild(fkBadge);
+    }
+
+    if (isUnique && !isPrimaryKey) {
+      const uqBadge = document.createElement('span');
+      uqBadge.className = 'key-badge key-badge-uq';
+      uqBadge.textContent = 'UQ';
+      uqBadge.title = 'Unique Constraint';
+      keyBadges.appendChild(uqBadge);
+    }
+
+    if (keyBadges.children.length > 0) {
+      columnNameRow.appendChild(keyBadges);
+    }
+
+    // Column datatype
+    const columnDatatype = document.createElement('div');
+    columnDatatype.className = 'column-datatype';
+    columnDatatype.textContent = dataType;
+
+    columnHeader.appendChild(columnNameRow);
+    columnHeader.appendChild(columnDatatype);
+    th.appendChild(columnHeader);
+
     if (tab.sortColumn === column) {
       th.classList.add(`sorted-${tab.sortDirection}`);
     }
@@ -597,11 +689,34 @@ function renderTable(data) {
       }
 
       const value = row[column];
+
+      // Store original value for popup
+      td.dataset.originalValue = value !== null && value !== undefined
+        ? (isJsonValue(value) ? JSON.stringify(value, null, 2) : String(value))
+        : 'NULL';
+      td.dataset.columnName = column;
+
+      td.addEventListener('dblclick', (e) => {
+        e.stopPropagation();
+        showCellContentPopup(column, value);
+      });
+
+      td.style.cursor = 'pointer';
+
       if (value === null || value === undefined) {
         const nullSpan = document.createElement('span');
         nullSpan.className = 'null-value';
         nullSpan.textContent = 'NULL';
         td.appendChild(nullSpan);
+      } else if (isJsonValue(value)) {
+        const jsonPre = document.createElement('pre');
+        jsonPre.className = 'json-value';
+        try {
+          jsonPre.textContent = JSON.stringify(value, null, 2);
+        } catch (e) {
+          jsonPre.textContent = String(value);
+        }
+        td.appendChild(jsonPre);
       } else {
         td.textContent = String(value);
       }
@@ -636,6 +751,7 @@ function setupColumnSelector(tab, columns, tableHeader) {
   const columnButton = tableHeader.querySelector('#columnButton');
   const columnMenu = tableHeader.querySelector('#columnMenu');
   const columnMenuOptions = tableHeader.querySelector('#columnMenuOptions');
+  const columnMenuHeader = tableHeader.querySelector('.column-menu-header');
 
   if (!columnButton || !columnMenu || !columnMenuOptions) {
     console.warn('Column selector elements not found');
@@ -644,6 +760,55 @@ function setupColumnSelector(tab, columns, tableHeader) {
 
   columnMenuOptions.innerHTML = '';
 
+  // Check if any columns are hidden
+  const hasHiddenColumns = tab.hiddenColumns && tab.hiddenColumns.length > 0;
+
+  if (columnMenuHeader) {
+    let headerTitle = columnMenuHeader.querySelector('.column-menu-header-title');
+    if (!headerTitle) {
+      const headerText = columnMenuHeader.textContent.trim();
+      columnMenuHeader.innerHTML = '';
+      headerTitle = document.createElement('span');
+      headerTitle.className = 'column-menu-header-title';
+      headerTitle.textContent = headerText || 'Columns';
+      columnMenuHeader.appendChild(headerTitle);
+    }
+
+    let selectAllButton = columnMenuHeader.querySelector('.column-select-all-button');
+    if (hasHiddenColumns) {
+      if (!selectAllButton) {
+        selectAllButton = document.createElement('button');
+        selectAllButton.className = 'column-select-all-button';
+        selectAllButton.textContent = 'Select All';
+        selectAllButton.title = 'Show all columns';
+        selectAllButton.addEventListener('click', (e) => {
+          e.stopPropagation();
+          // Show all columns
+          tab.hiddenColumns = [];
+          if (tab.data) {
+            renderTable(tab.data);
+            requestAnimationFrame(() => {
+              const newTableHeader = document.querySelector('.table-header');
+              if (newTableHeader) {
+                const newColumnMenu = newTableHeader.querySelector('#columnMenu');
+                if (newColumnMenu) {
+                  newColumnMenu.style.display = 'block';
+                  const columns = Object.keys(tab.data.rows[0] || {});
+                  setupColumnSelector(tab, columns, newTableHeader);
+                  updateColumnButtonLabel(tab, columns, newTableHeader);
+                }
+              }
+            });
+          }
+        });
+        columnMenuHeader.appendChild(selectAllButton);
+      }
+      selectAllButton.style.display = 'block';
+    } else if (selectAllButton) {
+      selectAllButton.style.display = 'none';
+    }
+  }
+
   columns.forEach(column => {
     const label = document.createElement('label');
     label.className = 'column-option';
@@ -836,9 +1001,26 @@ function getSortedRows(rows, tab) {
       return tab.sortDirection === 'asc' ? aVal - bVal : bVal - aVal;
     }
 
-    // String comparison (case-insensitive)
-    const aStr = String(aVal).toLowerCase();
-    const bStr = String(bVal).toLowerCase();
+    let aStr, bStr;
+    if (isJsonValue(aVal)) {
+      try {
+        aStr = JSON.stringify(aVal).toLowerCase();
+      } catch (e) {
+        aStr = String(aVal).toLowerCase();
+      }
+    } else {
+      aStr = String(aVal).toLowerCase();
+    }
+
+    if (isJsonValue(bVal)) {
+      try {
+        bStr = JSON.stringify(bVal).toLowerCase();
+      } catch (e) {
+        bStr = String(bVal).toLowerCase();
+      }
+    } else {
+      bStr = String(bVal).toLowerCase();
+    }
 
     if (tab.sortDirection === 'asc') {
       return aStr < bStr ? -1 : aStr > bStr ? 1 : 0;
@@ -926,3 +1108,357 @@ function handlePageChange(newPage) {
 }
 
 window.handlePageChange = handlePageChange;
+
+/**
+ * Check if a value is a date/time value and parse it.
+ * Detects Date objects, ISO date strings, and PostgreSQL timestamp strings.
+ * @param {*} value - Value to check
+ * @returns {Date|null} Parsed Date object if valid date/time, null otherwise
+ */
+function isDateTimeValue(value) {
+  if (value === null || value === undefined) {
+    return null;
+  }
+
+  if (value instanceof Date) {
+    return isNaN(value.getTime()) ? null : value;
+  }
+
+  if (typeof value === 'string') {
+    const trimmed = value.trim();
+    if (trimmed === '' || trimmed === 'NULL') {
+      return null;
+    }
+
+    // Try parsing as ISO date string or PostgreSQL timestamp
+    // PostgreSQL timestamps: '2024-01-01 12:00:00' or '2024-01-01 12:00:00.123' or with timezone
+    // ISO strings: '2024-01-01T12:00:00' or '2024-01-01T12:00:00Z' or with timezone offset
+    const date = new Date(trimmed);
+    if (!isNaN(date.getTime())) {
+      const datePattern = /^\d{4}-\d{2}-\d{2}/;
+      if (datePattern.test(trimmed)) {
+        return date;
+      }
+    }
+  }
+
+  return null;
+}
+
+/**
+ * Get user's current timezone.
+ * @returns {string} IANA timezone identifier (e.g., 'America/New_York')
+ */
+function getCurrentTimezone() {
+  try {
+    return Intl.DateTimeFormat().resolvedOptions().timeZone;
+  } catch (e) {
+    return 'UTC';
+  }
+}
+
+/**
+ * Get list of common timezones.
+ * @returns {Array<{value: string, label: string}>} Array of timezone objects
+ */
+function getCommonTimezones() {
+  const timezones = [
+    { value: 'UTC', label: 'UTC (Coordinated Universal Time)' },
+    { value: 'America/New_York', label: 'America/New_York (EST/EDT)' },
+    { value: 'America/Chicago', label: 'America/Chicago (CST/CDT)' },
+    { value: 'America/Denver', label: 'America/Denver (MST/MDT)' },
+    { value: 'America/Los_Angeles', label: 'America/Los_Angeles (PST/PDT)' },
+    { value: 'Europe/London', label: 'Europe/London (GMT/BST)' },
+    { value: 'Europe/Paris', label: 'Europe/Paris (CET/CEST)' },
+    { value: 'Europe/Berlin', label: 'Europe/Berlin (CET/CEST)' },
+    { value: 'Asia/Tokyo', label: 'Asia/Tokyo (JST)' },
+    { value: 'Asia/Shanghai', label: 'Asia/Shanghai (CST)' },
+    { value: 'Asia/Dubai', label: 'Asia/Dubai (GST)' },
+    { value: 'Asia/Kolkata', label: 'Asia/Kolkata (IST)' },
+    { value: 'Australia/Sydney', label: 'Australia/Sydney (AEDT/AEST)' },
+    { value: 'Pacific/Auckland', label: 'Pacific/Auckland (NZDT/NZST)' },
+  ];
+
+  // Add current timezone if not already in list
+  const currentTz = getCurrentTimezone();
+  const hasCurrent = timezones.some(tz => tz.value === currentTz);
+  if (!hasCurrent && currentTz !== 'UTC') {
+    timezones.unshift({ value: currentTz, label: `${currentTz} (Current)` });
+  }
+
+  return timezones;
+}
+
+/**
+ * Format date/time in specified timezone.
+ * @param {Date} date - Date object to format
+ * @param {string} timezone - IANA timezone identifier
+ * @returns {string} Formatted date/time string with timezone info
+ */
+function formatDateTimeInTimezone(date, timezone) {
+  try {
+    const formatter = new Intl.DateTimeFormat('en-US', {
+      timeZone: timezone,
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit',
+      fractionalSecondDigits: 3,
+      hour12: false,
+    });
+
+    const parts = formatter.formatToParts(date);
+    const year = parts.find(p => p.type === 'year').value;
+    const month = parts.find(p => p.type === 'month').value;
+    const day = parts.find(p => p.type === 'day').value;
+    const hour = parts.find(p => p.type === 'hour').value;
+    const minute = parts.find(p => p.type === 'minute').value;
+    const second = parts.find(p => p.type === 'second').value;
+    const fractionalSecond = parts.find(p => p.type === 'fractionalSecond')?.value || '';
+
+    const tzFormatter = new Intl.DateTimeFormat('en-US', {
+      timeZone: timezone,
+      timeZoneName: 'short',
+    });
+    const tzParts = tzFormatter.formatToParts(date);
+    const tzName = tzParts.find(p => p.type === 'timeZoneName')?.value || timezone;
+
+    const dateStr = `${year}-${month}-${day}`;
+    const timeStr = `${hour}:${minute}:${second}${fractionalSecond ? '.' + fractionalSecond : ''}`;
+
+    return `${dateStr} ${timeStr} ${tzName}`;
+  } catch (e) {
+    return date.toISOString();
+  }
+}
+
+/**
+ * Format cell content for display in popup dialog.
+ * Handles JSON values, null values, JSON strings, date/time values, and regular text appropriately.
+ * @param {*} value - The cell value to format
+ * @returns {Object} Object with formatted content, isJson flag, isDateTime flag, and dateValue: { content: string, isJson: boolean, isDateTime: boolean, dateValue: Date | null }
+ */
+function formatCellContentForPopup(value, timezone = null) {
+  if (value === null || value === undefined) {
+    return { content: 'NULL', isJson: false, isDateTime: false, dateValue: null };
+  }
+
+  const dateValue = isDateTimeValue(value);
+  if (dateValue) {
+    const tz = timezone || getCurrentTimezone();
+    const formatted = formatDateTimeInTimezone(dateValue, tz);
+    return { content: formatted, isJson: false, isDateTime: true, dateValue: dateValue };
+  }
+
+  // Handle JSON objects/arrays
+  if (isJsonValue(value)) {
+    try {
+      return { content: JSON.stringify(value, null, 2), isJson: true, isDateTime: false, dateValue: null };
+    } catch (e) {
+      return { content: String(value), isJson: false, isDateTime: false, dateValue: null };
+    }
+  }
+
+  // Handle string values - check if it's a JSON string
+  if (typeof value === 'string') {
+    const trimmed = value.trim();
+    // Check if string looks like JSON (starts with { or [)
+    if ((trimmed.startsWith('{') && trimmed.endsWith('}')) ||
+      (trimmed.startsWith('[') && trimmed.endsWith(']'))) {
+      try {
+        const parsed = JSON.parse(trimmed);
+        return { content: JSON.stringify(parsed, null, 2), isJson: true, isDateTime: false, dateValue: null };
+      } catch (e) {
+        return { content: String(value), isJson: false, isDateTime: false, dateValue: null };
+      }
+    }
+  }
+
+  return { content: String(value), isJson: false, isDateTime: false, dateValue: null };
+}
+
+/**
+ * Show popup dialog with full cell content.
+ * @param {string} column - Column name
+ * @param {*} value - Cell value
+ */
+function showCellContentPopup(column, value) {
+  closeCellContentPopup();
+
+  const overlay = document.createElement('div');
+  overlay.className = 'cell-popup-overlay';
+  overlay.addEventListener('click', (e) => {
+    if (e.target === overlay) {
+      closeCellContentPopup();
+    }
+  });
+
+  const dialog = document.createElement('div');
+  dialog.className = 'cell-popup-dialog';
+  dialog.addEventListener('click', (e) => {
+    e.stopPropagation();
+  });
+
+  const formatted = formatCellContentForPopup(value);
+  const formattedContent = formatted.content;
+  const isJson = formatted.isJson;
+  const isDateTime = formatted.isDateTime;
+  const dateValue = formatted.dateValue;
+
+  let currentTimezone = getCurrentTimezone();
+
+  const header = document.createElement('div');
+  header.className = 'cell-popup-header';
+
+  const title = document.createElement('h3');
+  title.className = 'cell-popup-title';
+  title.textContent = column;
+  header.appendChild(title);
+
+  const headerActions = document.createElement('div');
+  headerActions.className = 'cell-popup-actions';
+
+  let timezoneSelect = null;
+  if (isDateTime && dateValue) {
+    timezoneSelect = document.createElement('select');
+    timezoneSelect.className = 'cell-popup-timezone';
+    timezoneSelect.title = 'Select timezone';
+
+    const timezones = getCommonTimezones();
+    timezones.forEach(tz => {
+      const option = document.createElement('option');
+      option.value = tz.value;
+      option.textContent = tz.label;
+      if (tz.value === currentTimezone) {
+        option.selected = true;
+      }
+      timezoneSelect.appendChild(option);
+    });
+
+    headerActions.appendChild(timezoneSelect);
+  }
+
+  const copyButton = document.createElement('button');
+  copyButton.className = 'cell-popup-copy';
+  copyButton.innerHTML = '📋';
+  copyButton.title = 'Copy to clipboard';
+
+  const updateContent = () => {
+    if (value === null || value === undefined) {
+      content.classList.add('null-content');
+      content.classList.remove('json-value-popup', 'datetime-value-popup');
+      content.textContent = 'NULL';
+    } else if (isJson) {
+      const formatted = formatCellContentForPopup(value, currentTimezone);
+      content.classList.add('json-value-popup');
+      content.classList.remove('null-content', 'datetime-value-popup');
+      content.textContent = formatted.content;
+    } else if (isDateTime && dateValue) {
+      content.classList.add('datetime-value-popup');
+      content.classList.remove('null-content', 'json-value-popup');
+
+      // Show multiple timezone formats
+      const localTz = formatDateTimeInTimezone(dateValue, getCurrentTimezone());
+      const utcTz = formatDateTimeInTimezone(dateValue, 'UTC');
+      const selectedTz = formatDateTimeInTimezone(dateValue, currentTimezone);
+
+      let displayText = `Local (${getCurrentTimezone()}): ${localTz}\n`;
+      displayText += `UTC: ${utcTz}\n`;
+      if (currentTimezone !== getCurrentTimezone() && currentTimezone !== 'UTC') {
+        displayText += `Selected (${currentTimezone}): ${selectedTz}`;
+      }
+
+      content.textContent = displayText;
+    } else {
+      const formatted = formatCellContentForPopup(value, currentTimezone);
+      content.classList.remove('null-content', 'json-value-popup', 'datetime-value-popup');
+      content.textContent = formatted.content;
+    }
+
+    // Update copy button to use current formatted content
+    const finalFormatted = formatCellContentForPopup(value, currentTimezone);
+    copyButton._formattedContent = finalFormatted.content;
+  };
+
+  copyButton.addEventListener('click', async () => {
+    try {
+      const textToCopy = copyButton._formattedContent || formattedContent;
+      await navigator.clipboard.writeText(textToCopy);
+      copyButton.innerHTML = '✓';
+      copyButton.title = 'Copied!';
+      copyButton.classList.add('copied');
+      setTimeout(() => {
+        copyButton.innerHTML = '📋';
+        copyButton.title = 'Copy to clipboard';
+        copyButton.classList.remove('copied');
+      }, 2000);
+    } catch (err) {
+      console.error('Failed to copy:', err);
+      copyButton.innerHTML = '✗';
+      copyButton.title = 'Copy failed';
+      setTimeout(() => {
+        copyButton.innerHTML = '📋';
+        copyButton.title = 'Copy to clipboard';
+      }, 2000);
+    }
+  });
+  copyButton._formattedContent = formattedContent;
+  headerActions.appendChild(copyButton);
+
+  const closeButton = document.createElement('button');
+  closeButton.className = 'cell-popup-close';
+  closeButton.innerHTML = '×';
+  closeButton.title = 'Close';
+  closeButton.addEventListener('click', closeCellContentPopup);
+  headerActions.appendChild(closeButton);
+
+  header.appendChild(headerActions);
+
+  const body = document.createElement('div');
+  body.className = 'cell-popup-body';
+
+  const content = document.createElement('pre');
+  content.className = 'cell-popup-content';
+
+  updateContent();
+
+  if (timezoneSelect) {
+    timezoneSelect.addEventListener('change', (e) => {
+      currentTimezone = e.target.value;
+      updateContent();
+    });
+  }
+
+  body.appendChild(content);
+
+  dialog.appendChild(header);
+  dialog.appendChild(body);
+  overlay.appendChild(dialog);
+
+  document.body.appendChild(overlay);
+
+  const escapeHandler = (e) => {
+    if (e.key === 'Escape') {
+      closeCellContentPopup();
+    }
+  };
+  overlay.dataset.escapeHandler = 'true';
+  document.addEventListener('keydown', escapeHandler);
+
+  overlay._escapeHandler = escapeHandler;
+}
+
+/**
+ * Close the cell content popup dialog.
+ */
+function closeCellContentPopup() {
+  const overlay = document.querySelector('.cell-popup-overlay');
+  if (overlay) {
+    if (overlay._escapeHandler) {
+      document.removeEventListener('keydown', overlay._escapeHandler);
+    }
+    overlay.remove();
+  }
+}

package/client/styles.css

@@ -526,11 +526,88 @@ th {
   font-weight: var(--font-weight-semibold);
   color: var(--text-primary);
   border-bottom: 1px solid var(--border-subtle);
-  white-space: nowrap;
+  white-space: normal;
   font-size: var(--font-size-xs);
-  text-transform: uppercase;
   letter-spacing: 0.05em;
   position: relative;
+  vertical-align: bottom;
+}
+
+.column-header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  min-height: 100%;
+}
+
+.column-name-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+  line-height: 1.2;
+}
+
+.column-name {
+  line-height: 1.2;
+}
+
+.key-badges {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  flex-shrink: 0;
+}
+
+.key-badge {
+  display: inline-block;
+  padding: 2px 4px;
+  font-size: 9px;
+  font-weight: var(--font-weight-bold);
+  border-radius: 3px;
+  line-height: 1;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  white-space: nowrap;
+}
+
+.key-badge-pk {
+  background-color: #3b82f6;
+  color: #ffffff;
+}
+
+[data-theme="dark"] .key-badge-pk {
+  background-color: #60a5fa;
+  color: #0f172a;
+}
+
+.key-badge-fk {
+  background-color: #f59e0b;
+  color: #ffffff;
+}
+
+[data-theme="dark"] .key-badge-fk {
+  background-color: #fbbf24;
+  color: #0f172a;
+}
+
+.key-badge-uq {
+  background-color: #10b981;
+  color: #ffffff;
+}
+
+[data-theme="dark"] .key-badge-uq {
+  background-color: #34d399;
+  color: #0f172a;
+}
+
+.column-datatype {
+  font-size: 10px;
+  font-weight: var(--font-weight-normal);
+  color: var(--text-secondary);
+  text-transform: none;
+  letter-spacing: 0;
+  line-height: 1.2;
+  opacity: 0.8;
 }
 
 th.resizable {
@@ -591,9 +668,10 @@ td {
   padding: var(--space-3) var(--space-4);
   border-bottom: 1px solid var(--border-subtle);
   color: var(--text-primary);
-  word-break: break-word;
+  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  max-width: 200px;
 }
 
 tr:hover {
@@ -605,6 +683,198 @@ tr:hover {
   font-style: italic;
 }
 
+.json-value {
+  margin: 0;
+  padding: 0;
+  font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas,
+    "Courier New", monospace;
+  font-size: var(--font-size-xs);
+  line-height: 1.4;
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
+
+/* JSON value in popup - preserve formatting */
+.json-value-popup {
+  white-space: pre-wrap;
+  word-break: break-word;
+  overflow-wrap: break-word;
+}
+
+/* Cell Content Popup Dialog */
+.cell-popup-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 10000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-4);
+  animation: fadeIn var(--transition-base);
+}
+
+[data-theme="dark"] .cell-popup-overlay {
+  background-color: rgba(0, 0, 0, 0.7);
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.cell-popup-dialog {
+  background-color: var(--bg-base);
+  border-radius: var(--radius-lg);
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+  max-width: 90vw;
+  max-height: 90vh;
+  width: 600px;
+  display: flex;
+  flex-direction: column;
+  animation: slideUp var(--transition-base);
+  border: 1px solid var(--border-subtle);
+}
+
+[data-theme="dark"] .cell-popup-dialog {
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
+}
+
+@keyframes slideUp {
+  from {
+    transform: translateY(20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.cell-popup-header {
+  padding: var(--space-4) var(--space-6);
+  border-bottom: 1px solid var(--border-subtle);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: var(--bg-elevated);
+  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+}
+
+.cell-popup-title {
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-primary);
+  margin: 0;
+  flex: 1;
+}
+
+.cell-popup-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.cell-popup-timezone {
+  padding: var(--space-2) var(--space-3);
+  font-size: var(--font-size-sm);
+  font-family: inherit;
+  color: var(--text-primary);
+  background-color: var(--bg-base);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  min-width: 200px;
+}
+
+.cell-popup-timezone:hover {
+  border-color: var(--border-default);
+  background-color: var(--bg-hover);
+}
+
+.cell-popup-timezone:focus {
+  outline: none;
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
+}
+
+.cell-popup-copy,
+.cell-popup-close {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: var(--space-2);
+  color: var(--text-secondary);
+  font-size: var(--font-size-xl);
+  line-height: 1;
+  border-radius: var(--radius-sm);
+  transition: all var(--transition-fast);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+}
+
+.cell-popup-copy:hover,
+.cell-popup-close:hover {
+  background-color: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.cell-popup-copy.copied {
+  color: var(--color-success);
+  background-color: var(--bg-hover);
+}
+
+.cell-popup-body {
+  padding: var(--space-6);
+  overflow-y: auto;
+  flex: 1;
+  min-height: 0;
+}
+
+.cell-popup-content {
+  font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas,
+    "Courier New", monospace;
+  font-size: var(--font-size-sm);
+  line-height: 1.6;
+  color: var(--text-primary);
+  white-space: pre-wrap;
+  word-break: break-word;
+  overflow-wrap: break-word;
+  background-color: var(--bg-elevated);
+  padding: var(--space-4);
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border-subtle);
+  max-height: 60vh;
+  overflow-y: auto;
+}
+
+.cell-popup-content.null-content {
+  color: var(--text-tertiary);
+  font-style: italic;
+  font-family: inherit;
+}
+
+.cell-popup-content.datetime-value-popup {
+  font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas,
+    "Courier New", monospace;
+  line-height: 1.8;
+  white-space: pre-wrap;
+}
+
 .column-selector {
   position: relative;
 }
@@ -632,6 +902,33 @@ tr:hover {
   color: var(--text-primary);
   border-bottom: 1px solid var(--border-subtle);
   background-color: var(--bg-elevated);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+}
+
+.column-menu-header-title {
+  flex: 1;
+}
+
+.column-select-all-button {
+  padding: var(--space-1) var(--space-3);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-primary);
+  background-color: transparent;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  white-space: nowrap;
+}
+
+.column-select-all-button:hover {
+  background-color: var(--bg-hover);
+  border-color: var(--color-primary);
+  color: var(--color-primary);
 }
 
 .column-menu-options {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pglens",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "A simple PostgreSQL database viewer tool",
   "main": "src/server.js",
   "bin": {

package/src/routes/api.js

@@ -88,6 +88,147 @@ async function getPrimaryKeyColumn(pool, tableName) {
   }
 }
 
+/**
+ * Get foreign key relationships for a table.
+ * Queries information_schema to get foreign key constraints and their references.
+ * @param {Pool} pool - Database connection pool
+ * @param {string} tableName - Name of the table
+ * @returns {Promise<Object>} Object mapping column names to their foreign key references { table, column }
+ */
+async function getForeignKeyRelations(pool, tableName) {
+  try {
+    const fkQuery = `
+      SELECT
+        kcu.column_name,
+        ccu.table_name AS foreign_table_name,
+        ccu.column_name AS foreign_column_name
+      FROM information_schema.table_constraints AS tc
+      JOIN information_schema.key_column_usage AS kcu
+        ON tc.constraint_name = kcu.constraint_name
+        AND tc.table_schema = kcu.table_schema
+      JOIN information_schema.constraint_column_usage AS ccu
+        ON ccu.constraint_name = tc.constraint_name
+        AND ccu.table_schema = tc.table_schema
+      WHERE tc.constraint_type = 'FOREIGN KEY'
+        AND tc.table_name = $1
+        AND tc.table_schema = 'public';
+    `;
+    const result = await pool.query(fkQuery, [tableName]);
+    const foreignKeys = {};
+    result.rows.forEach(row => {
+      foreignKeys[row.column_name] = {
+        table: row.foreign_table_name,
+        column: row.foreign_column_name
+      };
+    });
+    return foreignKeys;
+  } catch (error) {
+    console.error('Error getting foreign key relations:', error);
+    return {};
+  }
+}
+
+/**
+ * Get all primary key columns for a table.
+ * @param {Pool} pool - Database connection pool
+ * @param {string} tableName - Name of the table
+ * @returns {Promise<Set>} Set of primary key column names
+ */
+async function getPrimaryKeyColumns(pool, tableName) {
+  try {
+    const pkQuery = `
+      SELECT kcu.column_name
+      FROM information_schema.table_constraints tc
+      JOIN information_schema.key_column_usage kcu
+        ON tc.constraint_name = kcu.constraint_name
+        AND tc.table_schema = kcu.table_schema
+      WHERE tc.constraint_type = 'PRIMARY KEY'
+        AND tc.table_name = $1
+        AND tc.table_schema = 'public';
+    `;
+    const result = await pool.query(pkQuery, [tableName]);
+    const pkColumns = new Set();
+    result.rows.forEach(row => {
+      pkColumns.add(row.column_name);
+    });
+    return pkColumns;
+  } catch (error) {
+    console.error('Error getting primary key columns:', error);
+    return new Set();
+  }
+}
+
+/**
+ * Get all unique constraint columns for a table.
+ * @param {Pool} pool - Database connection pool
+ * @param {string} tableName - Name of the table
+ * @returns {Promise<Set>} Set of unique constraint column names
+ */
+async function getUniqueColumns(pool, tableName) {
+  try {
+    const uniqueQuery = `
+      SELECT kcu.column_name
+      FROM information_schema.table_constraints tc
+      JOIN information_schema.key_column_usage kcu
+        ON tc.constraint_name = kcu.constraint_name
+        AND tc.table_schema = kcu.table_schema
+      WHERE tc.constraint_type = 'UNIQUE'
+        AND tc.table_name = $1
+        AND tc.table_schema = 'public';
+    `;
+    const result = await pool.query(uniqueQuery, [tableName]);
+    const uniqueColumns = new Set();
+    result.rows.forEach(row => {
+      uniqueColumns.add(row.column_name);
+    });
+    return uniqueColumns;
+  } catch (error) {
+    console.error('Error getting unique columns:', error);
+    return new Set();
+  }
+}
+
+/**
+ * Get column metadata (datatypes and key relationships) for a table.
+ * Queries information_schema.columns to get column names and their data types,
+ * and includes key relationship information (primary keys, foreign keys, unique constraints).
+ * @param {Pool} pool - Database connection pool
+ * @param {string} tableName - Name of the table
+ * @returns {Promise<Object>} Object mapping column names to metadata objects with dataType, isPrimaryKey, isForeignKey, foreignKeyRef, isUnique
+ */
+async function getColumnMetadata(pool, tableName) {
+  try {
+    const metadataQuery = `
+      SELECT column_name, data_type
+      FROM information_schema.columns
+      WHERE table_schema = 'public'
+        AND table_name = $1
+      ORDER BY ordinal_position;
+    `;
+    const result = await pool.query(metadataQuery, [tableName]);
+
+    const primaryKeyColumns = await getPrimaryKeyColumns(pool, tableName);
+    const foreignKeyRelations = await getForeignKeyRelations(pool, tableName);
+    const uniqueColumns = await getUniqueColumns(pool, tableName);
+
+    const columns = {};
+    result.rows.forEach(row => {
+      const columnName = row.column_name;
+      columns[columnName] = {
+        dataType: row.data_type,
+        isPrimaryKey: primaryKeyColumns.has(columnName),
+        isForeignKey: !!foreignKeyRelations[columnName],
+        foreignKeyRef: foreignKeyRelations[columnName] || null,
+        isUnique: uniqueColumns.has(columnName)
+      };
+    });
+    return columns;
+  } catch (error) {
+    console.error('Error getting column metadata:', error);
+    return {};
+  }
+}
+
 /**
  * GET /api/tables/:tableName
  * 
@@ -110,7 +251,13 @@ async function getPrimaryKeyColumn(pool, tableName) {
  *   limit: number,
  *   isApproximate: boolean,
  *   nextCursor: string|null,
- *   hasPrimaryKey: boolean
+ *   hasPrimaryKey: boolean,
+ *   columns: Object - Map of column names to metadata objects with:
+ *     - dataType: string
+ *     - isPrimaryKey: boolean
+ *     - isForeignKey: boolean
+ *     - foreignKeyRef: { table: string, column: string } | null
+ *     - isUnique: boolean
  * }
  */
 router.get('/tables/:tableName', async (req, res) => {
@@ -126,6 +273,7 @@ router.get('/tables/:tableName', async (req, res) => {
 
     const pool = getPool();
     const primaryKeyColumn = await getPrimaryKeyColumn(pool, tableName);
+    const columnMetadata = await getColumnMetadata(pool, tableName);
 
     const countQuery = `SELECT COUNT(*) as total FROM "${tableName}"`;
     const countResult = await pool.query(countQuery);
@@ -188,6 +336,7 @@ router.get('/tables/:tableName', async (req, res) => {
       isApproximate,
       nextCursor,
       hasPrimaryKey: !!primaryKeyColumn,
+      columns: columnMetadata,
     };
     res.json(responseData);
   } catch (error) {