pg_reports 0.9.1 → 1.0.0

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

@@ -277,24 +277,28 @@ end</pre>
   </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>
@@ -320,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 %>
@@ -1380,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;
@@ -1443,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) {
@@ -1472,39 +1501,124 @@ end</pre>
 
   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);
@@ -1560,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();
@@ -1568,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;
       }
@@ -1599,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');
@@ -1624,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';
 
@@ -1638,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');
@@ -1651,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) {
@@ -1697,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');
     }
   }
 

data/bin/pg_reports

@@ -46,7 +46,7 @@ banner = <<~BANNER
 
   Configuration is layered, lowest to highest precedence:
     PG_REPORTS_* env vars  <  config file  <  the flags below.
-  A config file (--config, else ./pg_reports.rb or config/pg_reports.rb) is
+  A config file (--config PATH, never loaded unless you name it) is
   plain Ruby calling `PgReports.configure` — the way to set every option that
   has no flag (thresholds, Telegram, Grafana, dashboard_auth, …).
 
@@ -60,7 +60,7 @@ parser = OptionParser.new do |o|
   o.on("-m", "--mount PATH", "Path to mount the dashboard at (default: /)") { |v| options[:mount] = v }
   o.on("-d", "--database-url URL", "PostgreSQL connection URL") { |v| options[:database_url] = v }
   o.on("-s", "--server NAME", "Web server to use (e.g. puma, webrick)") { |v| options[:server] = v }
-  o.on("-c", "--config PATH", "Ruby config file to load (default: ./pg_reports.rb or config/pg_reports.rb)") { |v| options[:config_file] = v }
+  o.on("-c", "--config PATH", "Ruby config file to load") { |v| options[:config_file] = v }
   o.on("--[no-]allow-raw-query-execution", "Allow running raw SQL / EXPLAIN ANALYZE from the dashboard") { |v| overrides[:allow_raw_query_execution] = v }
   o.on("--[no-]allow-migration-creation", "Allow the dashboard to write migration files to db/migrate/") { |v| overrides[:allow_migration_creation] = v }
   o.on("--[no-]external-fonts", "Load Google Fonts in the dashboard (off by default)") { |v| overrides[:load_external_fonts] = v }