pg_reports 0.9.0 → 1.0.0

data/app/views/pg_reports/dashboard/index.html.erb

@@ -28,7 +28,7 @@
         <%= t("pg_reports.ui.actions.reset_statistics") %>
       </button>
     <% end %>
-    <button type="button" class="btn-icon" onclick="showIdeSettingsModal()" title="<%= t("pg_reports.ui.actions.ide_settings_button_title") %>" aria-label="<%= t("pg_reports.ui.actions.ide_settings_button_title") %>">
+    <button type="button" class="btn-icon" onclick="showSettingsModal()" title="<%= t("pg_reports.ui.actions.settings_button_title") %>" aria-label="<%= t("pg_reports.ui.actions.settings_button_title") %>">
       <svg class="icon icon-lg"><use href="#i-settings"></use></svg>
     </button>
 
@@ -127,47 +127,7 @@ pg_stat_statements.track = all</pre>
 </div>
 
 <!-- IDE Settings Modal -->
-<div id="ide-settings-modal" class="modal" style="display: none;">
-  <div class="modal-content modal-small">
-    <div class="modal-header">
-      <h3><%= t("pg_reports.ui.modals.ide_settings_title") %></h3>
-      <button class="modal-close" onclick="closeIdeSettingsModal()">&times;</button>
-    </div>
-    <div class="modal-body">
-      <p class="settings-label"><%= t("pg_reports.ui.settings.default_ide_label") %></p>
-      <div class="ide-options">
-        <label class="ide-option">
-          <input type="radio" name="default-ide" value="" onchange="setDefaultIde('')">
-          <span><%= t("pg_reports.ui.settings.ide_show_menu") %></span>
-        </label>
-        <label class="ide-option">
-          <input type="radio" name="default-ide" value="vscode-wsl" onchange="setDefaultIde('vscode-wsl')">
-          <span><%= t("pg_reports.ui.settings.ide_vscode_wsl") %></span>
-        </label>
-        <label class="ide-option">
-          <input type="radio" name="default-ide" value="vscode" onchange="setDefaultIde('vscode')">
-          <span><%= t("pg_reports.ui.settings.ide_vscode") %></span>
-        </label>
-        <label class="ide-option">
-          <input type="radio" name="default-ide" value="rubymine" onchange="setDefaultIde('rubymine')">
-          <span><%= t("pg_reports.ui.settings.ide_rubymine") %></span>
-        </label>
-        <label class="ide-option">
-          <input type="radio" name="default-ide" value="intellij" onchange="setDefaultIde('intellij')">
-          <span><%= t("pg_reports.ui.settings.ide_intellij") %></span>
-        </label>
-        <label class="ide-option">
-          <input type="radio" name="default-ide" value="cursor-wsl" onchange="setDefaultIde('cursor-wsl')">
-          <span><%= t("pg_reports.ui.settings.ide_cursor_wsl") %></span>
-        </label>
-        <label class="ide-option">
-          <input type="radio" name="default-ide" value="cursor" onchange="setDefaultIde('cursor')">
-          <span><%= t("pg_reports.ui.settings.ide_cursor") %></span>
-        </label>
-      </div>
-    </div>
-  </div>
-</div>
+<%= render "settings_modal" %>
 
 <!-- Run Query Modal -->
 <div id="run-query-modal" class="modal" style="display: none;">
@@ -239,7 +199,6 @@ end</pre>
           <svg id="sparkline-connections" viewBox="0 0 100 30" preserveAspectRatio="none"></svg>
         </div>
       </div>
-      <div class="metric-status" id="status-connections"></div>
     </div>
 
     <!-- TPS -->
@@ -260,7 +219,6 @@ end</pre>
           <svg id="sparkline-tps" viewBox="0 0 100 30" preserveAspectRatio="none"></svg>
         </div>
       </div>
-      <div class="metric-status" id="status-tps"></div>
     </div>
 
     <!-- Cache Hit Ratio -->
@@ -279,7 +237,6 @@ end</pre>
           <svg id="sparkline-cache" viewBox="0 0 100 30" preserveAspectRatio="none"></svg>
         </div>
       </div>
-      <div class="metric-status" id="status-cache"></div>
     </div>
 
     <!-- Long Running Queries -->
@@ -298,7 +255,6 @@ end</pre>
           <svg id="sparkline-longrunning" viewBox="0 0 100 30" preserveAspectRatio="none"></svg>
         </div>
       </div>
-      <div class="metric-status" id="status-longrunning"></div>
     </div>
 
     <!-- Blocked Queries -->
@@ -317,29 +273,32 @@ end</pre>
           <svg id="sparkline-blocked" viewBox="0 0 100 30" preserveAspectRatio="none"></svg>
         </div>
       </div>
-      <div class="metric-status" id="status-blocked"></div>
     </div>
   </div>
 </div>
 
-<!-- Query Monitoring Panel: taps ActiveSupport::Notifications in the host
-     application's process. There is no host app in standalone mode, so the
-     panel is hidden entirely rather than showing a monitor with nothing to
-     monitor. -->
-<% unless PgReports.config.standalone %>
+<!-- Query Monitoring Panel: captures from ActiveSupport::Notifications in the
+     host application's processes, or by sampling pg_stat_activity in standalone
+     mode, where there is no host application. -->
+<% if PgReports.config.query_monitor_available? %>
 <div id="query-monitoring" class="query-monitoring-panel" style="display: none;">
   <div class="query-monitoring-header">
     <div class="query-monitoring-title">
       <span class="monitoring-indicator" id="monitor-indicator"></span>
       <span><%= t("pg_reports.ui.monitoring.query_monitor_title") %></span>
-      <span class="query-monitoring-scope" tabindex="0" data-tooltip="<%= t("pg_reports.ui.monitoring.scope_note_long", default: "Query Monitor subscribes to ActiveSupport::Notifications in the host application's process. It captures every SQL the host app runs, on whichever database the host app is connected to. The dashboard's database selector does not change this scope.") %>">
-        <%= t("pg_reports.ui.monitoring.scope_note_short", default: "scope: host application") %>
+      <% scope_note = PgReports.config.standalone ? "sampled" : "host" %>
+      <span class="query-monitoring-scope" tabindex="0" data-tooltip="<%= t("pg_reports.ui.monitoring.scope_note_long_#{scope_note}") %>">
+        <%= t("pg_reports.ui.monitoring.scope_note_short_#{scope_note}") %>
       </span>
       <span class="session-badge" id="session-badge" style="display: none;">
-        <%= t("pg_reports.ui.monitoring.session_label") %> <strong id="session-id"></strong>
+        <%= t("pg_reports.ui.monitoring.auto_stop_label") %> <strong id="monitor-countdown"></strong>
       </span>
     </div>
     <div class="query-monitoring-controls">
+      <div class="query-source-switch" id="query-source-switch" role="group" aria-label="<%= t("pg_reports.ui.monitoring.source_switch_label") %>" hidden>
+        <button type="button" data-source="notifications" title="<%= t("pg_reports.ui.monitoring.source_notifications_title") %>" onclick="selectQueryMonitorSource('notifications')"><%= t("pg_reports.ui.monitoring.source_notifications") %></button>
+        <button type="button" data-source="activity" title="<%= t("pg_reports.ui.monitoring.source_activity_title") %>" onclick="selectQueryMonitorSource('activity')"><%= t("pg_reports.ui.monitoring.source_activity") %></button>
+      </div>
       <button class="btn btn-primary" onclick="startQueryMonitoring(this)" id="start-monitor-btn">
         <%= t("pg_reports.ui.actions.start_monitoring") %>
       </button>
@@ -365,10 +324,28 @@ end</pre>
     </div>
   </div>
 
+  <div class="query-scope-warning" id="query-scope-warning" style="display: none;">
+    <%= t("pg_reports.ui.monitoring.scope_process_warning") %>
+  </div>
+
+  <div class="query-scope-warning" id="query-visibility-warning" style="display: none;"></div>
+  <div class="query-scope-warning query-monitor-error" id="query-monitor-error" style="display: none;"></div>
+
   <div class="query-feed" id="query-feed">
-    <div class="query-feed-empty">
+    <div class="query-feed-empty" id="query-feed-empty">
       <%= t("pg_reports.ui.monitoring.feed_empty") %>
     </div>
+    <table class="query-feed-table" id="query-feed-table" style="display: none;">
+      <thead>
+        <tr>
+          <th class="col-time"><%= t("pg_reports.ui.monitoring.col_time") %></th>
+          <th class="col-duration"><%= t("pg_reports.ui.monitoring.col_duration") %></th>
+          <th class="col-source"><%= t("pg_reports.ui.monitoring.col_source") %></th>
+          <th class="col-sql"><%= t("pg_reports.ui.monitoring.col_sql") %></th>
+        </tr>
+      </thead>
+      <tbody id="query-feed-body"></tbody>
+    </table>
   </div>
 </div>
 <% end %>
@@ -654,11 +631,14 @@ end</pre>
      value colour and the sparkline, never by a coloured edge: "healthy" is
      the common case and should read as quiet, not decorated. */
   .live-metric-card {
+    display: flex;
+    flex-direction: column;
     background: var(--bg-tertiary);
     border: 1px solid var(--border-color);
     border-radius: var(--radius);
     padding: 0.875rem 1rem;
-    position: relative;
+    /* The trend band below bleeds to the card's edges. */
+    overflow: hidden;
     transition: border-color 0.12s ease;
   }
 
@@ -674,7 +654,7 @@ end</pre>
     display: flex;
     align-items: center;
     gap: 0.5rem;
-    margin-bottom: 0.625rem;
+    margin-bottom: 0.25rem;
   }
 
   .metric-icon {
@@ -693,6 +673,9 @@ end</pre>
   .metric-body {
     display: flex;
     flex-direction: column;
+    /* Figures hug the right edge; the trend band below opts back out. */
+    align-items: flex-end;
+    flex: 1;
     gap: 0.1875rem;
   }
 
@@ -719,17 +702,27 @@ end</pre>
   }
 
   .metric-detail {
+    max-width: 100%;
     font-size: 0.7rem;
     color: var(--text-muted);
+    text-align: right;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
 
-  /* Sparkline */
+  /* Trend band. Negative margins cancel the card's padding so it spans the full
+     width and sits flush with the bottom edge — as a floating inset line it left
+     the lower half of the card reading as dead space. `margin-top: auto` keeps
+     it pinned down when cards in a row differ in height. */
   .metric-sparkline {
-    height: 28px;
-    margin-top: 0.625rem;
+    /* Full width, regardless of the right-alignment its siblings use. */
+    align-self: stretch;
+    height: 2.25rem;
+    /* auto keeps the band on the bottom edge when cards in a row differ in
+       height; the negative side/bottom margins cancel the card's padding. */
+    margin: auto -1rem -0.875rem;
+    padding-top: 0.5rem;
     color: var(--text-muted);
   }
 
@@ -742,20 +735,6 @@ end</pre>
     display: block;
   }
 
-  /* Status indicator */
-  .metric-status {
-    position: absolute;
-    top: 0.75rem;
-    right: 0.75rem;
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    background: var(--border-strong);
-  }
-
-  .metric-status.warning { background: var(--accent-amber); }
-  .metric-status.critical { background: var(--accent-rose); }
-
   /* Run Query Modal */
   .modal-run-query {
     max-width: 1100px;
@@ -1329,23 +1308,30 @@ end</pre>
 
     const width = 100;
     const height = 30;
+    // No horizontal inset: the band spans the card's full width, so the trace
+    // should reach both edges. Vertical inset only, to keep the stroke from
+    // being clipped at the extremes.
     const padding = 2;
 
     const min = Math.min(...data);
     const max = Math.max(...data);
-    const range = max - min || 1;
+    const range = max - min;
 
     const points = data.map((value, index) => {
-      const x = padding + (index / (data.length - 1)) * (width - 2 * padding);
-      const y = height - padding - ((value - min) / range) * (height - 2 * padding);
+      const x = (index / (data.length - 1)) * width;
+      // A series that never moves is drawn mid-band: pinned to the floor it
+      // reads as "zero" (or as a stray underline) rather than "steady".
+      const y = range === 0
+        ? height / 2
+        : height - padding - ((value - min) / range) * (height - 2 * padding);
       return { x, y };
     });
 
     const pathD = points.map((p, i) => (i === 0 ? `M ${p.x} ${p.y}` : `L ${p.x} ${p.y}`)).join(' ');
 
     const areaD = pathD +
-      ` L ${points[points.length - 1].x} ${height - padding}` +
-      ` L ${points[0].x} ${height - padding} Z`;
+      ` L ${points[points.length - 1].x} ${height}` +
+      ` L ${points[0].x} ${height} Z`;
 
     const area = document.createElementNS('http://www.w3.org/2000/svg', 'path');
     area.setAttribute('d', areaD);
@@ -1366,8 +1352,7 @@ end</pre>
 
   function updateStatus(metric, value, badDirection) {
     const card = document.querySelector(`[data-metric="${metric}"]`);
-    const statusDot = document.getElementById(`status-${metric}`);
-    if (!card || !statusDot) return;
+    if (!card) return;
 
     const thresholds = LIVE_CONFIG.thresholds[metric];
     let status = 'ok';
@@ -1384,8 +1369,6 @@ end</pre>
 
     card.classList.remove('status-ok', 'status-warning', 'status-critical');
     card.classList.add(`status-${status}`);
-    statusDot.classList.remove('ok', 'warning', 'critical');
-    statusDot.classList.add(status);
   }
 
   document.addEventListener('DOMContentLoaded', initLiveMonitoring);
@@ -1407,10 +1390,6 @@ end</pre>
     'cursor': 5
   };
 
-  function getDefaultIde() {
-    return localStorage.getItem('pgReportsDefaultIde') || '';
-  }
-
   function generateIdeUrls(filePath, lineNumber) {
     if (!filePath) return [];
 
@@ -1423,40 +1402,45 @@ end</pre>
     const line = lineNumber || 1;
     const urls = [];
 
+    // The path can come from a SQL comment, which anyone with database access
+    // can write, so it is encoded here and never reaches a URL as it was.
+    const urlPath = absolutePath.split('/').map(encodeURIComponent).join('/');
+    const urlParam = encodeURIComponent(absolutePath);
+
     // VSCode (WSL Remote format)
     urls.push({
       name: PG_REPORTS_I18N.settings.ide_vscode_wsl,
-      url: `vscode://vscode-remote/wsl+${wslDistro}${absolutePath}:${line}`
+      url: `vscode://vscode-remote/wsl+${wslDistro}${urlPath}:${line}`
     });
 
     // VSCode (direct path)
     urls.push({
       name: PG_REPORTS_I18N.settings.ide_vscode,
-      url: `vscode://file${absolutePath}:${line}`
+      url: `vscode://file${urlPath}:${line}`
     });
 
     // RubyMine
     urls.push({
       name: PG_REPORTS_I18N.settings.ide_rubymine,
-      url: `rubymine://open?file=${absolutePath}&line=${line}`
+      url: `rubymine://open?file=${urlParam}&line=${line}`
     });
 
     // IntelliJ
     urls.push({
       name: PG_REPORTS_I18N.settings.ide_intellij,
-      url: `idea://open?file=${absolutePath}&line=${line}`
+      url: `idea://open?file=${urlParam}&line=${line}`
     });
 
     // Cursor (WSL Remote format)
     urls.push({
       name: PG_REPORTS_I18N.settings.ide_cursor_wsl,
-      url: `cursor://vscode-remote/wsl+${wslDistro}${absolutePath}:${line}`
+      url: `cursor://vscode-remote/wsl+${wslDistro}${urlPath}:${line}`
     });
 
     // Cursor (direct path)
     urls.push({
       name: PG_REPORTS_I18N.settings.ide_cursor,
-      url: `cursor://file${absolutePath}:${line}`
+      url: `cursor://file${urlPath}:${line}`
     });
 
     return urls;
@@ -1486,11 +1470,13 @@ end</pre>
     const menu = document.getElementById('ide-menu');
     const overlay = document.getElementById('ide-dropdown-overlay');
 
-    let menuHtml = '';
-    ideUrls.forEach(ide => {
-      menuHtml += `<a href="${ide.url}" onclick="closeIdeMenu()">${ide.name}</a>`;
-    });
-    menu.innerHTML = menuHtml;
+    menu.replaceChildren(...ideUrls.map(ide => {
+      const link = document.createElement('a');
+      link.href = ide.url;
+      link.textContent = ide.name;
+      link.addEventListener('click', closeIdeMenu);
+      return link;
+    }));
 
     // Position menu near the clicked element
     if (event && event.target) {
@@ -1509,80 +1495,130 @@ end</pre>
     document.getElementById('ide-dropdown-overlay')?.classList.remove('show');
   }
 
-  function showIdeSettingsModal() {
-    const modal = document.getElementById('ide-settings-modal');
-    modal.style.display = 'flex';
-    loadIdeSettingsState();
-  }
-
-  function closeIdeSettingsModal() {
-    document.getElementById('ide-settings-modal').style.display = 'none';
-  }
-
-  function setDefaultIde(ideKey) {
-    if (ideKey) {
-      localStorage.setItem('pgReportsDefaultIde', ideKey);
-    } else {
-      localStorage.removeItem('pgReportsDefaultIde');
-    }
-  }
-
-  function loadIdeSettingsState() {
-    const currentIde = getDefaultIde();
-    const radios = document.querySelectorAll('input[name="default-ide"]');
-    radios.forEach(radio => {
-      radio.checked = (radio.value === currentIde);
-    });
-  }
-
-  // Close IDE settings modal on backdrop click
-  document.addEventListener('DOMContentLoaded', function() {
-    document.getElementById('ide-settings-modal')?.addEventListener('click', function(e) {
-      if (e.target === this) {
-        closeIdeSettingsModal();
-      }
-    });
-  });
-
   // ============================================
   // Query Monitoring
   // ============================================
 
   const QUERY_MONITOR_CONFIG = {
     pollInterval: 2000,
-    maxQueries: 50
+    // Reaching every process takes one flush, so a stopped session settles shortly after
+    settleDelay: 1200,
+    maxQueries: 100
   };
 
   let queryMonitorEnabled = false;
   let queryMonitorPollTimer = null;
+  let queryMonitorCountdownTimer = null;
+  let queryMonitorExpiresAt = null;
   let currentSessionId = null;
   let queryCount = 0;
+  let queryLastSeq = 0;
+  let queryMonitorSource = null;
+  const queryFeedData = new WeakMap();
+
+  function readSavedQueryMonitorSource() {
+    try {
+      return localStorage.getItem('pgReportsMonitorSource');
+    } catch (error) {
+      return null;
+    }
+  }
+
+  function selectQueryMonitorSource(source) {
+    queryMonitorSource = source;
+    try {
+      localStorage.setItem('pgReportsMonitorSource', source);
+    } catch (error) {
+      // Only the remembered choice is lost
+    }
+    renderQueryMonitorSource();
+  }
+
+  function renderQueryMonitorSource() {
+    const chip = document.querySelector('.query-monitoring-scope');
+    const key = queryMonitorSource === 'activity' ? 'sampled' : 'host';
+    chip.textContent = PG_REPORTS_I18N.monitoring[`scope_note_short_${key}`];
+    chip.dataset.tooltip = PG_REPORTS_I18N.monitoring[`scope_note_long_${key}`];
+
+    document.querySelectorAll('#query-source-switch button').forEach(button => {
+      button.classList.toggle('active', button.dataset.source === queryMonitorSource);
+      button.disabled = queryMonitorEnabled;
+    });
+  }
+
+  function applyQueryMonitorSources(data) {
+    const available = data.available_sources || [];
+    document.getElementById('query-source-switch').hidden = available.length < 2;
+
+    const saved = readSavedQueryMonitorSource();
+    // A running session decides; otherwise the viewer's last choice, if still on offer
+    queryMonitorSource = data.enabled || !available.includes(saved) ? data.source : saved;
+    renderQueryMonitorSource();
+  }
 
   function initQueryMonitoring() {
     const panel = document.getElementById('query-monitoring');
     if (!panel) return;
 
+    document.getElementById('query-feed-body').addEventListener('click', handleQueryFeedClick);
+
     // Check initial status
     checkQueryMonitorStatus();
   }
 
+  function applyQueryMonitorStatus(data) {
+    if (data.max_queries) QUERY_MONITOR_CONFIG.maxQueries = data.max_queries;
+    if (typeof data.query_count === 'number') queryCount = data.query_count;
+
+    document.getElementById('query-count').textContent = queryCount;
+    document.getElementById('query-scope-warning').style.display = data.scope === 'process' ? 'block' : 'none';
+
+    const visibilityWarning = document.getElementById('query-visibility-warning');
+    visibilityWarning.style.display = data.hidden_sessions > 0 ? 'block' : 'none';
+    visibilityWarning.textContent = pgReportsFormat(PG_REPORTS_I18N.monitoring.hidden_sessions_warning, { count: data.hidden_sessions });
+
+    queryMonitorExpiresAt = data.enabled && typeof data.expires_in === 'number'
+      ? Date.now() + data.expires_in * 1000
+      : null;
+    renderQueryMonitorCountdown();
+  }
+
+  function renderQueryMonitorError(message) {
+    const element = document.getElementById('query-monitor-error');
+    element.style.display = message ? 'block' : 'none';
+    element.textContent = message ? `${PG_REPORTS_I18N.errors.query_monitoring_error}: ${message}` : '';
+  }
+
+  function renderQueryMonitorCountdown() {
+    const element = document.getElementById('monitor-countdown');
+    if (!element || queryMonitorExpiresAt === null) return;
+
+    const seconds = Math.max(0, Math.ceil((queryMonitorExpiresAt - Date.now()) / 1000));
+    element.textContent = `${Math.floor(seconds / 60)}:${String(seconds % 60).padStart(2, '0')}`;
+  }
+
   async function checkQueryMonitorStatus() {
     try {
       const response = await fetch(`${pgReportsRoot}/query_monitor/status`);
       const data = await response.json();
 
       queryHistoryAvailable = data.history_available === true;
+      applyQueryMonitorStatus(data);
+      renderQueryMonitorError(data.success ? data.capture_error : data.error);
+      queryMonitorEnabled = data.success && data.enabled;
+      applyQueryMonitorSources(data);
 
       if (data.success && data.enabled) {
         queryMonitorEnabled = true;
         currentSessionId = data.session_id;
-        queryCount = data.query_count;
         updateQueryMonitorUI(true);
         startQueryMonitorPolling();
       } else {
         // Monitoring not active
         queryMonitorEnabled = false;
         updateQueryMonitorUI(false);
+        // The last session's queries outlive it, so a reload does not lose them
+        if (queryCount > 0) fetchQueryFeed();
       }
     } catch (error) {
       console.error('Failed to check query monitor status:', error);
@@ -1638,7 +1674,8 @@ end</pre>
         headers: {
           'Content-Type': 'application/json',
           'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]')?.content || ''
-        }
+        },
+        body: JSON.stringify({ source: queryMonitorSource })
       });
 
       const data = await response.json();
@@ -1646,11 +1683,13 @@ end</pre>
       if (data.success) {
         queryMonitorEnabled = true;
         currentSessionId = data.session_id;
+        clearQueryFeed();
         updateQueryMonitorUI(true);
+        renderQueryMonitorSource();
         startQueryMonitorPolling();
         showToast(data.message);
       } else {
-        showToast(data.message || PG_REPORTS_I18N.errors.start_monitoring_failed, 'error');
+        showToast(data.message || data.error || PG_REPORTS_I18N.errors.start_monitoring_failed, 'error');
         button.disabled = false;
         button.innerHTML = PG_REPORTS_I18N.actions.start_monitoring;
       }
@@ -1677,11 +1716,7 @@ end</pre>
       const data = await response.json();
 
       if (data.success) {
-        queryMonitorEnabled = false;
-        currentSessionId = null;
-        stopQueryMonitorPolling();
-
-        updateQueryMonitorUI(false);
+        endQueryMonitoringSession();
         showToast(data.message);
       } else {
         showToast(data.message || PG_REPORTS_I18N.errors.stop_monitoring_failed, 'error');
@@ -1702,9 +1737,7 @@ end</pre>
     const stopBtn = document.getElementById('stop-monitor-btn');
     const loadHistoryBtn = document.getElementById('load-history-btn');
     const sessionBadge = document.getElementById('session-badge');
-    const sessionIdEl = document.getElementById('session-id');
     const downloadDropdown = document.getElementById('monitor-download-dropdown');
-    const feed = document.getElementById('query-feed');
 
     panel.style.display = 'block';
 
@@ -1716,7 +1749,6 @@ end</pre>
       stopBtn.innerHTML = PG_REPORTS_I18N.actions.stop_monitoring;
       loadHistoryBtn.style.display = 'none';  // Hide when monitoring active
       sessionBadge.style.display = 'inline-block';
-      sessionIdEl.textContent = currentSessionId ? currentSessionId.substring(0, 8) : '';
       downloadDropdown.style.display = 'inline-block';
     } else {
       indicator.classList.remove('active');
@@ -1729,14 +1761,10 @@ end</pre>
       sessionBadge.style.display = 'none';
 
       // Keep results visible after stopping, only hide download if no queries
-      const hasQueries = queryCount > 0;
-      downloadDropdown.style.display = hasQueries ? 'inline-block' : 'none';
-
-      // Only clear feed if no queries captured
-      if (!hasQueries) {
-        feed.innerHTML = '<div class="query-feed-empty">' + PG_REPORTS_I18N.monitoring.feed_empty + '</div>';
-      }
+      downloadDropdown.style.display = queryCount > 0 ? 'inline-block' : 'none';
     }
+
+    renderQueryFeedEmptyState(enabled);
   }
 
   function toggleMonitorDownloadMenu(event) {
@@ -1775,126 +1803,206 @@ end</pre>
   });
 
   function startQueryMonitorPolling() {
-    if (queryMonitorPollTimer) clearInterval(queryMonitorPollTimer);
+    stopQueryMonitorPolling();
 
     fetchQueryFeed(); // Immediate fetch
     queryMonitorPollTimer = setInterval(fetchQueryFeed, QUERY_MONITOR_CONFIG.pollInterval);
+    queryMonitorCountdownTimer = setInterval(renderQueryMonitorCountdown, 1000);
   }
 
   function stopQueryMonitorPolling() {
-    if (queryMonitorPollTimer) {
-      clearInterval(queryMonitorPollTimer);
-      queryMonitorPollTimer = null;
-    }
+    clearInterval(queryMonitorPollTimer);
+    clearInterval(queryMonitorCountdownTimer);
+    queryMonitorPollTimer = null;
+    queryMonitorCountdownTimer = null;
   }
 
-  async function fetchQueryFeed() {
-    if (!queryMonitorEnabled) return;
+  // Shared by the Stop button and a session that ended on its own. Rows stay.
+  function endQueryMonitoringSession() {
+    queryMonitorEnabled = false;
+    stopQueryMonitorPolling();
+    updateQueryMonitorUI(false);
+    renderQueryMonitorSource();
+    setTimeout(fetchQueryFeed, QUERY_MONITOR_CONFIG.settleDelay);
+  }
 
+  async function fetchQueryFeed() {
     try {
-      const response = await fetch(
-        `${pgReportsRoot}/query_monitor/feed?limit=${QUERY_MONITOR_CONFIG.maxQueries}&session_id=${currentSessionId || ''}`
-      );
+      const params = new URLSearchParams({
+        limit: QUERY_MONITOR_CONFIG.maxQueries,
+        since: queryLastSeq,
+        session_id: currentSessionId || ''
+      });
+      const response = await fetch(`${pgReportsRoot}/query_monitor/feed?${params}`);
       const data = await response.json();
 
-      if (data.success && data.queries) {
-        renderQueryFeed(data.queries);
-      } else if (!data.success) {
-        // Server returned an error (e.g., "Monitoring not active")
-        const errorMsg = data.message || data.error || PG_REPORTS_I18N.errors.query_monitoring_error;
-        showToast(errorMsg, 'error');
+      if (!data.success) {
+        renderQueryMonitorError(data.error);
+        return;
+      }
 
-        // Stop polling and update UI since monitoring is not active
-        queryMonitorEnabled = false;
-        currentSessionId = null;
-        stopQueryMonitorPolling();
+      renderQueryMonitorError(data.capture_error);
+      const wasEnabled = queryMonitorEnabled;
+
+      // Someone restarted monitoring: the sequence numbers belong to a new session
+      if (data.enabled && data.session_id !== currentSessionId) {
+        currentSessionId = data.session_id;
+        queryMonitorEnabled = true;
+        clearQueryFeed();
+        applyQueryMonitorSources(data);
+      }
+
+      applyQueryMonitorStatus(data);
+      appendQueries(data.queries);
+      queryLastSeq = Math.max(queryLastSeq, data.last_seq);
+
+      if (wasEnabled && !data.enabled) {
+        showToast(PG_REPORTS_I18N.monitoring.session_ended);
+        endQueryMonitoringSession();
+      } else if (!queryMonitorEnabled) {
+        // Enough rows arrived after the stop to change what can be downloaded
         updateQueryMonitorUI(false);
       }
     } catch (error) {
       console.error('Failed to fetch query feed:', error);
-      showToast(PG_REPORTS_I18N.errors.network_error_prefix + ' ' + error.message, 'error');
     }
   }
 
+  function clearQueryFeed() {
+    document.getElementById('query-feed-body').replaceChildren();
+    queryLastSeq = 0;
+    queryCount = 0;
+    document.getElementById('query-count').textContent = '0';
+    renderQueryFeedEmptyState(queryMonitorEnabled);
+  }
+
+  function renderQueryFeedEmptyState(enabled) {
+    const hasRows = document.getElementById('query-feed-body').children.length > 0;
+    const empty = document.getElementById('query-feed-empty');
+
+    document.getElementById('query-feed-table').style.display = hasRows ? 'table' : 'none';
+    empty.style.display = hasRows ? 'none' : 'block';
+    empty.textContent = enabled ? PG_REPORTS_I18N.monitoring.feed_no_queries : PG_REPORTS_I18N.monitoring.feed_empty;
+  }
+
+  // Replaces the table with a finished list, such as the history from the log file
   function renderQueryFeed(queries) {
+    clearQueryFeed();
+    appendQueries(queries);
+    queryCount = queries.length;
+    document.getElementById('query-count').textContent = queryCount;
+  }
+
+  // Rows are only added, never redrawn, so an expanded query and the reader's
+  // scroll position survive every poll. `queries` arrive oldest first.
+  function appendQueries(queries) {
+    if (queries.length === 0) return;
+
     const feed = document.getElementById('query-feed');
+    const body = document.getElementById('query-feed-body');
+    const heightBefore = body.offsetHeight;
 
-    if (queries.length === 0) {
-      feed.innerHTML = '<div class="query-feed-empty">' + PG_REPORTS_I18N.monitoring.feed_no_queries + '</div>';
-      queryCount = 0;
-      document.getElementById('query-count').textContent = '0';
-      return;
+    queries.forEach(query => body.prepend(buildQueryRow(query)));
+
+    let rows = body.querySelectorAll('.query-row').length;
+    while (rows > QUERY_MONITOR_CONFIG.maxQueries) {
+      if (body.lastElementChild.classList.contains('query-row')) rows--;
+      body.lastElementChild.remove();
     }
 
-    queryCount = queries.length;
-    document.getElementById('query-count').textContent = queryCount;
+    renderQueryFeedEmptyState(queryMonitorEnabled);
+
+    // Someone reading further down keeps their place as rows arrive on top
+    if (feed.scrollTop > 0) feed.scrollTop += body.offsetHeight - heightBefore;
+  }
+
+  function buildQueryCell(className, text) {
+    const cell = document.createElement('td');
+    cell.className = className;
+    cell.textContent = text;
+    return cell;
+  }
+
+  function buildQuerySourceLink(query) {
+    const location = query.source_location;
+    if (!location || !location.file) return null;
 
-    // Render queries in reverse chronological order
-    const html = queries.slice().reverse().map(query => renderQueryItem(query)).join('');
-    feed.innerHTML = html;
+    const link = document.createElement('a');
+    link.href = '#';
+    link.className = 'query-source-link';
+    link.dataset.file = location.file;
+    link.dataset.line = location.line;
+    link.title = `${location.file}:${location.line}`;
+    // The tail of the path is what tells two rows apart in a narrow column
+    link.textContent = `${location.file.split('/').slice(-2).join('/')}:${location.line}`;
+    return link;
   }
 
-  function renderQueryItem(query) {
-    const duration = query.duration_ms;
+  function buildQueryRow(query) {
+    const row = document.createElement('tr');
+    row.className = 'query-row';
+    queryFeedData.set(row, query);
+
+    const duration = Number(query.duration_ms) || 0;
     const durationClass = duration < 10 ? 'fast' : duration > 100 ? 'slow' : '';
-    const timestamp = new Date(query.timestamp).toLocaleTimeString();
-    const queryId = `query-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-
-    let sourceInfo = PG_REPORTS_I18N.monitoring.unknown_source;
-    if (query.source_location && query.source_location.file) {
-      const file = query.source_location.file;
-      const line = query.source_location.line;
-      sourceInfo = `<a href="#" onclick="openInIDE('${escapeHtml(file)}', ${line}, event); return false;">
-         ${escapeHtml(file)}:${line}
-       </a>`;
+
+    row.append(
+      buildQueryCell('col-time', new Date(query.timestamp).toLocaleTimeString()),
+      buildQueryCell(`col-duration query-duration ${durationClass}`, duration.toFixed(1)),
+      buildQueryCell('col-source', ''),
+      buildQueryCell('col-sql', String(query.sql || '').replace(/\s+/g, ' ').trim())
+    );
+
+    const link = buildQuerySourceLink(query);
+    const sourceCell = row.querySelector('.col-source');
+    if (link) {
+      sourceCell.append(link);
+    } else {
+      sourceCell.textContent = query.source || query.name || PG_REPORTS_I18N.monitoring.unknown_source;
     }
 
-    // Prepare SQL: collapse to single line and truncate
-    const fullSql = query.sql.trim();
-    const collapsedSql = fullSql.replace(/\s+/g, ' ').trim();
-    const truncatedSql = collapsedSql.length > 100
-      ? collapsedSql.substring(0, 100) + '...'
-      : collapsedSql;
-
-    return `
-      <div class="query-item">
-        <div class="query-header">
-          <div class="query-meta">
-            <span class="query-timestamp">${timestamp}</span>
-            <span class="query-duration ${durationClass}">${duration.toFixed(2)}ms</span>
-            <span class="query-source">${sourceInfo}</span>
-          </div>
-          <button class="query-expand-btn" onclick="toggleQueryExpand('${queryId}')" title="${PG_REPORTS_I18N.monitoring.expand_collapse_title}">
-            <span id="${queryId}-icon">▼</span>
-          </button>
-        </div>
-        <div class="query-sql-wrapper">
-          <div class="query-sql query-sql-collapsed" id="${queryId}-sql">
-            ${escapeHtml(truncatedSql)}
-          </div>
-          <div class="query-sql query-sql-expanded" id="${queryId}-sql-full" style="display: none;">
-            ${escapeHtml(fullSql)}
-          </div>
-        </div>
-      </div>
-    `;
+    return row;
+  }
+
+  function buildQueryDetail(query) {
+    const row = document.createElement('tr');
+    row.className = 'query-row-detail';
+
+    const cell = document.createElement('td');
+    cell.colSpan = 4;
+
+    const link = buildQuerySourceLink(query);
+    if (link) {
+      link.textContent = link.title;
+      cell.append(link);
+    }
+
+    const sql = document.createElement('pre');
+    sql.textContent = String(query.sql || '').trim();
+    cell.append(sql);
+
+    row.append(cell);
+    return row;
   }
 
-  function toggleQueryExpand(queryId) {
-    const collapsedEl = document.getElementById(`${queryId}-sql`);
-    const expandedEl = document.getElementById(`${queryId}-sql-full`);
-    const iconEl = document.getElementById(`${queryId}-icon`);
+  function handleQueryFeedClick(event) {
+    const link = event.target.closest('.query-source-link');
+    if (link) {
+      openInIDE(link.dataset.file, Number(link.dataset.line), event);
+      event.preventDefault();
+      return;
+    }
+
+    const row = event.target.closest('.query-row');
+    if (!row || String(window.getSelection())) return;
 
-    if (collapsedEl.style.display === 'none') {
-      // Currently expanded, collapse it
-      collapsedEl.style.display = 'block';
-      expandedEl.style.display = 'none';
-      iconEl.textContent = '▼';
+    const detail = row.nextElementSibling;
+    if (detail && detail.classList.contains('query-row-detail')) {
+      detail.remove();
+      row.classList.remove('expanded');
     } else {
-      // Currently collapsed, expand it
-      collapsedEl.style.display = 'none';
-      expandedEl.style.display = 'block';
-      iconEl.textContent = '▲';
+      row.after(buildQueryDetail(queryFeedData.get(row)));
+      row.classList.add('expanded');
     }
   }