pg_reports 0.7.0 → 0.8.1

data/app/views/layouts/pg_reports/application.html.erb

@@ -113,13 +113,32 @@
       display: flex;
       align-items: center;
       gap: 0.4rem;
-      padding: 0.4rem 0.75rem;
+      height: 2.125rem;
+      padding: 0 0.75rem;
       background: var(--bg-tertiary);
       border: 1px solid var(--border-color);
       border-radius: 4px;
       font-size: 0.75rem;
     }
 
+    .header-badge-clickable {
+      cursor: pointer;
+      font-family: inherit;
+      color: inherit;
+      transition: border-color 0.15s ease, background 0.15s ease;
+    }
+
+    .header-badge-clickable:hover {
+      background: var(--bg-card);
+      border-color: var(--text-muted);
+    }
+
+    .badge-info-icon {
+      color: var(--text-muted);
+      font-size: 0.85rem;
+      line-height: 1;
+    }
+
     .badge-dot {
       width: 8px;
       height: 8px;
@@ -306,13 +325,14 @@
     }
 
     .btn-primary {
-      background: var(--accent-purple);
-      color: #fff;
-      border-color: var(--accent-purple);
+      background: rgba(124, 138, 246, 0.14);
+      color: var(--accent-purple);
+      border-color: rgba(124, 138, 246, 0.35);
     }
 
     .btn-primary:hover {
-      background: #6b79e4;
+      background: rgba(124, 138, 246, 0.24);
+      border-color: rgba(124, 138, 246, 0.55);
     }
 
     .btn-secondary {
@@ -633,6 +653,51 @@
       font-size: 0.9rem;
     }
 
+    .query-monitoring-scope {
+      position: relative;
+      font-weight: 400;
+      font-size: 0.75rem;
+      color: var(--text-muted);
+      background: var(--bg-tertiary);
+      padding: 0.125rem 0.5rem;
+      border-radius: 999px;
+      cursor: help;
+    }
+
+    .query-monitoring-scope::after {
+      content: attr(data-tooltip);
+      position: absolute;
+      top: calc(100% + 8px);
+      left: 0;
+      z-index: 100;
+      width: max-content;
+      max-width: 320px;
+      padding: 0.6rem 0.75rem;
+      background: var(--bg-card);
+      color: var(--text-secondary);
+      border: 1px solid var(--border-color);
+      border-radius: 6px;
+      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
+      font-size: 0.75rem;
+      font-weight: 400;
+      line-height: 1.5;
+      white-space: normal;
+      text-align: left;
+      opacity: 0;
+      visibility: hidden;
+      transform: translateY(-4px);
+      transition: opacity 0.15s ease, transform 0.15s ease;
+      pointer-events: none;
+    }
+
+    .query-monitoring-scope:hover::after,
+    .query-monitoring-scope:focus::after,
+    .query-monitoring-scope:focus-visible::after {
+      opacity: 1;
+      visibility: visible;
+      transform: translateY(0);
+    }
+
     .monitoring-indicator {
       width: 7px;
       height: 7px;
@@ -989,6 +1054,125 @@
     .modal-small {
       max-width: 360px;
     }
+
+    .modal-medium {
+      max-width: 560px;
+    }
+
+    /* Database selector — used inside .live-monitoring-title and .breadcrumb.
+       Sizes to fit its longest option (no artificial cap), capped at the
+       parent's available width so it never overruns neighboring controls. */
+    .db-selector-form {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.5rem;
+      margin: 0;
+      max-width: 100%;
+      min-width: 0;
+    }
+
+    .db-selector-label {
+      font-size: 0.75rem;
+      color: var(--text-secondary);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      font-weight: 600;
+      white-space: nowrap;
+    }
+
+    .db-selector {
+      background: var(--bg-card, rgba(255, 255, 255, 0.04));
+      color: var(--text-primary);
+      border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
+      border-radius: 6px;
+      padding: 0.375rem 0.625rem;
+      font-size: 0.875rem;
+      cursor: pointer;
+      width: auto;
+      max-width: 100%;
+      min-width: 0;
+    }
+
+    .db-selector option.is-default {
+      font-weight: 700;
+    }
+
+    .db-selector:hover {
+      border-color: var(--accent-blue, #6b9fe8);
+    }
+
+    .db-selector:focus {
+      outline: none;
+      border-color: var(--accent-blue, #6b9fe8);
+      box-shadow: 0 0 0 2px rgba(107, 159, 232, 0.2);
+    }
+
+    .db-selector-static {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.5rem;
+      font-size: 0.875rem;
+      color: var(--text-secondary);
+    }
+
+    .db-selector-static strong {
+      color: var(--text-primary);
+    }
+
+    .db-selector-error {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.375rem;
+      padding: 0.375rem 0.625rem;
+      background: rgba(232, 107, 107, 0.1);
+      border: 1px solid rgba(232, 107, 107, 0.3);
+      border-radius: 6px;
+      font-size: 0.8125rem;
+      color: var(--accent-red, #e86b6b);
+      cursor: help;
+    }
+
+    .breadcrumb-spacer {
+      flex: 1;
+    }
+
+    .breadcrumb {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+
+    .db-error-banner {
+      background: rgba(232, 107, 107, 0.08);
+      border: 1px solid rgba(232, 107, 107, 0.3);
+      border-radius: 8px;
+      padding: 0.875rem 1.125rem;
+      margin-bottom: 1rem;
+      display: flex;
+      flex-direction: column;
+      gap: 0.375rem;
+    }
+
+    .db-error-banner strong {
+      color: var(--accent-red, #e86b6b);
+      font-size: 0.9375rem;
+    }
+
+    .db-error-banner span {
+      font-size: 0.875rem;
+      color: var(--text-secondary);
+    }
+
+    .db-error-banner code {
+      font-family: ui-monospace, SFMono-Regular, monospace;
+      font-size: 0.8125rem;
+      background: rgba(0, 0, 0, 0.25);
+      padding: 0.375rem 0.625rem;
+      border-radius: 4px;
+      color: var(--text-primary);
+      display: inline-block;
+      width: fit-content;
+    }
   </style>
 </head>
 <body>
@@ -1003,7 +1187,10 @@
   <div id="ide-menu" class="ide-menu"></div>
 
   <script>
-    const pgReportsRoot = document.querySelector('meta[name="pg-reports-root"]')?.content || '/pg_reports';
+    // Trailing slash stripped so `${pgReportsRoot}/foo` never becomes `//foo` —
+    // a protocol-relative URL (host "foo") — when the engine is mounted at "/"
+    // (e.g. standalone mode), where the mount path resolves to "/".
+    const pgReportsRoot = (document.querySelector('meta[name="pg-reports-root"]')?.content || '/pg_reports').replace(/\/+$/, '');
     window.PG_REPORTS_I18N = <%= raw I18n.t("pg_reports.ui").to_json %>;
 
     // Format strings with %{var} placeholders
@@ -1012,6 +1199,26 @@
       return template.replace(/%\{(\w+)\}/g, function(_, k) { return vars[k] != null ? vars[k] : ''; });
     };
 
+    // Close the topmost open modal on ESC. Applies to every `.modal` that has a
+    // close (×) button — it triggers that button so each modal's own close
+    // handler (and any cleanup) runs.
+    document.addEventListener('keydown', function(e) {
+      if (e.key !== 'Escape' && e.key !== 'Esc') return;
+      const open = Array.prototype.slice.call(document.querySelectorAll('.modal'))
+        .filter(function(m) {
+          return getComputedStyle(m).display !== 'none' && m.querySelector('.modal-close');
+        });
+      if (!open.length) return;
+      e.preventDefault();
+      const modal = open[open.length - 1];
+      const closeBtn = modal.querySelector('.modal-close');
+      if (closeBtn) {
+        closeBtn.click();
+      } else {
+        modal.style.display = 'none';
+      }
+    });
+
     function showToast(message, type = 'success') {
       const toast = document.getElementById('toast');
       toast.textContent = message;

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

@@ -0,0 +1,39 @@
+<%# locals: (show_label: true) %>
+<% if @available_databases.present? && @available_databases.size > 1 %>
+  <form class="db-selector-form"
+        action="<%= switch_database_path %>"
+        method="post"
+        data-turbo="false">
+    <input type="hidden" name="authenticity_token" value="<%= form_authenticity_token %>">
+    <% if local_assigns.fetch(:show_label, true) %>
+      <label class="db-selector-label" for="pg-reports-db-select">
+        <%= t("pg_reports.ui.database_selector.label", default: "Database") %>
+      </label>
+    <% end %>
+    <select id="pg-reports-db-select"
+            name="database"
+            class="db-selector"
+            onchange="this.form.submit()">
+      <% @available_databases.each do |row| %>
+        <option value="<%= row["name"] %>"
+                class="<%= "is-default" if row["name"] == @target_default_database %>"
+                <%= "selected" if row["name"] == @selected_database %>>
+          <%= row["name"] %><%= " (#{row["size"]})" if row["size"].present? %>
+        </option>
+      <% end %>
+    </select>
+  </form>
+<% elsif @available_databases.present? && @available_databases.size == 1 %>
+  <span class="db-selector-static">
+    <% if local_assigns.fetch(:show_label, true) %>
+      <span class="db-selector-label">
+        <%= t("pg_reports.ui.database_selector.label", default: "Database") %>:
+      </span>
+    <% end %>
+    <strong><%= @available_databases.first["name"] %></strong>
+  </span>
+<% elsif @database_error %>
+  <span class="db-selector-error" title="<%= @database_error[:detail] %>">
+    ⚠ <%= @database_error[:title] %>
+  </span>
+<% end %>

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

@@ -0,0 +1,27 @@
+<%# locals: (show_label: true) %>
+<% if @available_targets.present? && @available_targets.size > 1 %>
+  <form class="db-selector-form"
+        action="<%= switch_target_path %>"
+        method="post"
+        data-turbo="false">
+    <input type="hidden" name="authenticity_token" value="<%= form_authenticity_token %>">
+    <% if local_assigns.fetch(:show_label, true) %>
+      <label class="db-selector-label" for="pg-reports-target-select">
+        <%= t("pg_reports.ui.target_selector.label", default: "Target") %>
+      </label>
+    <% end %>
+    <select id="pg-reports-target-select"
+            name="target"
+            class="db-selector"
+            onchange="this.form.submit()">
+      <% default_target_name = PgReports.connection_registry.default_name %>
+      <% @available_targets.each do |target| %>
+        <option value="<%= target.name %>"
+                class="<%= "is-default" if target.name == default_target_name %>"
+                <%= "selected" if target.name == @selected_target %>>
+          <%= target.name %><%= " (#{target.default_database})" if target.default_database.present? %>
+        </option>
+      <% end %>
+    </select>
+  </form>
+<% end %>

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

@@ -1,5 +1,15 @@
 <%= csrf_meta_tags %>
 
+<% if @database_error %>
+  <div class="db-error-banner">
+    <strong><%= @database_error[:title] %></strong>
+    <span><%= @database_error[:detail] %></span>
+    <% if @database_error[:hint] %>
+      <code><%= @database_error[:hint] %></code>
+    <% end %>
+  </div>
+<% end %>
+
 <header class="header">
   <div class="logo">
     <div class="logo-icon">🐘</div>
@@ -17,28 +27,34 @@
       <button class="btn btn-small btn-muted" onclick="showResetConfirmModal()" id="reset-btn">
         <%= t("pg_reports.ui.actions.reset_statistics") %>
       </button>
-    <% else %>
-      <button class="btn btn-small btn-primary" onclick="enablePgStatStatements(this)" id="enable-btn">
-        <%= t("pg_reports.ui.actions.create_extension") %>
-      </button>
-      <button class="btn-info" onclick="showPgStatInfo()">?</button>
     <% end %>
     <button class="btn-info" onclick="showIdeSettingsModal()" title="<%= t("pg_reports.ui.actions.ide_settings_button_title") %>">⚙️</button>
-    <div class="header-badge" id="pg-stat-badge">
-      <% if @pg_stat_status[:ready] %>
+
+    <% if !@pg_stat_status[:connected] %>
+      <div class="header-badge" id="pg-stat-badge">
+        <span class="badge-dot error"></span>
+        <span><%= t("pg_reports.ui.status.disconnected") %></span>
+      </div>
+    <% elsif @pg_stat_status[:ready] %>
+      <div class="header-badge" id="pg-stat-badge">
         <span class="badge-dot"></span>
         <span><%= t("pg_reports.ui.status.pg_stat_ready") %></span>
-      <% elsif @pg_stat_status[:extension_installed] %>
+      </div>
+    <% elsif @pg_stat_status[:extension_installed] %>
+      <button type="button" class="header-badge header-badge-clickable" id="pg-stat-badge"
+              onclick="showPgStatInfo()" title="<%= t("pg_reports.ui.status.click_for_details") %>">
         <span class="badge-dot warning"></span>
-        <span><%= t("pg_reports.ui.status.extension_installed") %></span>
-      <% elsif @pg_stat_status[:preloaded] %>
+        <span><%= t("pg_reports.ui.status.not_preloaded") %></span>
+        <span class="badge-info-icon" aria-hidden="true">ⓘ</span>
+      </button>
+    <% else %>
+      <button type="button" class="header-badge header-badge-clickable" id="pg-stat-badge"
+              onclick="showCreateExtensionModal()" title="<%= t("pg_reports.ui.status.click_for_details") %>">
         <span class="badge-dot warning"></span>
-        <span><%= t("pg_reports.ui.status.preloaded") %></span>
-      <% else %>
-        <span class="badge-dot error"></span>
-        <span><%= t("pg_reports.ui.status.not_configured") %></span>
-      <% end %>
-    </div>
+        <span><%= t("pg_reports.ui.status.extension_missing") %></span>
+        <span class="badge-info-icon" aria-hidden="true">ⓘ</span>
+      </button>
+    <% end %>
   </div>
 </header>
 
@@ -71,6 +87,25 @@ pg_stat_statements.track = all</pre>
   </div>
 </div>
 
+<!-- Create extension modal -->
+<div id="create-extension-modal" class="modal" style="display: none;">
+  <div class="modal-content modal-medium">
+    <div class="modal-header">
+      <h3><%= t("pg_reports.ui.modals.create_extension_title") %></h3>
+      <button class="modal-close" onclick="closeCreateExtensionModal()">×</button>
+    </div>
+    <div class="modal-body">
+      <p><%= t("pg_reports.ui.modals.create_extension_intro") %></p>
+      <pre>CREATE EXTENSION IF NOT EXISTS pg_stat_statements;</pre>
+      <p class="warning-subtext"><%= t("pg_reports.ui.modals.create_extension_note") %></p>
+      <div class="modal-actions">
+        <button class="btn btn-secondary" onclick="closeCreateExtensionModal()"><%= t("pg_reports.ui.actions.cancel") %></button>
+        <button class="btn btn-primary" onclick="enablePgStatStatements(this)" id="modal-create-extension-btn"><%= t("pg_reports.ui.actions.create_extension") %></button>
+      </div>
+    </div>
+  </div>
+</div>
+
 <!-- Reset statistics confirmation modal -->
 <div id="reset-confirm-modal" class="modal" style="display: none;">
   <div class="modal-content modal-small">
@@ -138,9 +173,8 @@ pg_stat_statements.track = all</pre>
     <div class="live-monitoring-title">
       <span class="live-indicator"></span>
       <span><%= t("pg_reports.ui.monitoring.live_title") %></span>
-      <span class="database-badge">
-        <strong><%= @current_database %></strong>
-      </span>
+      <%= render "target_selector", show_label: false %>
+      <%= render "database_selector", show_label: false %>
     </div>
     <div class="live-monitoring-controls">
       <span class="live-monitoring-interval"><%= t("pg_reports.ui.monitoring.update_interval") %></span>
@@ -258,6 +292,9 @@ pg_stat_statements.track = all</pre>
     <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") %>
+      </span>
       <span class="session-badge" id="session-badge" style="display: none;">
         <%= t("pg_reports.ui.monitoring.session_label") %> <strong id="session-id"></strong>
       </span>
@@ -297,11 +334,20 @@ pg_stat_statements.track = all</pre>
 
 <div class="categories-grid">
   <% @categories.each do |category_key, category| %>
-    <div class="category-card<%= ' disabled' if category_key == :queries && !@pg_stat_status[:ready] %>">
-      <% if category_key == :queries && !@pg_stat_status[:ready] %>
+    <%
+      requires_pg_stat = (category_key == :queries && !@pg_stat_status[:ready])
+      target_disabled_reason = category_disabled_reason(category_key)
+      is_disabled = requires_pg_stat || target_disabled_reason.present?
+    %>
+    <div class="category-card<%= ' disabled' if is_disabled %>">
+      <% if requires_pg_stat %>
         <div class="category-warning">
           <%= t("pg_reports.ui.categories.requires_pg_stat") %>
         </div>
+      <% elsif target_disabled_reason %>
+        <div class="category-warning">
+          <%= target_disabled_reason %>
+        </div>
       <% end %>
       <div class="category-header">
         <div class="category-icon" style="background: <%= category[:color] %>20; color: <%= category[:color] %>;">
@@ -313,7 +359,7 @@ pg_stat_statements.track = all</pre>
 
       <div class="reports-list">
         <% category[:reports].each do |report_key, report| %>
-          <% if category_key == :queries && !@pg_stat_status[:ready] %>
+          <% if is_disabled %>
             <div class="report-link disabled">
               <div class="report-link-info">
                 <span class="report-link-name">
@@ -342,7 +388,37 @@ pg_stat_statements.track = all</pre>
   <% end %>
 </div>
 
+<footer class="dashboard-footer">
+  <a href="https://github.com/deadalice/pg_reports" target="_blank" rel="noopener noreferrer">github.com/deadalice/pg_reports</a>
+  <span class="footer-sep">·</span>
+  <a href="mailto:deadalice@gmail.com">deadalice@gmail.com</a>
+</footer>
+
 <style>
+  .dashboard-footer {
+    margin-top: 2rem;
+    padding-top: 1.25rem;
+    border-top: 1px solid var(--border-color);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.6rem;
+    flex-wrap: wrap;
+    color: var(--text-muted);
+    font-size: 0.8rem;
+  }
+  .dashboard-footer a {
+    color: var(--text-secondary);
+    text-decoration: none;
+  }
+  .dashboard-footer a:hover {
+    color: var(--accent-purple);
+    text-decoration: underline;
+  }
+  .dashboard-footer .footer-sep {
+    opacity: 0.5;
+  }
+
   .header-actions {
     display: flex;
     align-items: center;
@@ -354,15 +430,26 @@ pg_stat_statements.track = all</pre>
     font-size: 0.8rem;
   }
 
+  /* Keep the header action button the same height as the status badge and
+     the settings button (all 2.125rem); inline-flex centers the label so no
+     vertical padding is needed. */
+  .header-actions .btn {
+    height: 2.125rem;
+    padding: 0 1rem;
+  }
+
   .btn-info {
-    width: 24px;
-    height: 24px;
+    width: 2.125rem;
+    height: 2.125rem;
     padding: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
     background: var(--bg-tertiary);
     color: var(--text-muted);
     border: 1px solid var(--border-color);
-    border-radius: 50%;
-    font-size: 0.8rem;
+    border-radius: 4px;
+    font-size: 0.9rem;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.15s;
@@ -410,7 +497,7 @@ pg_stat_statements.track = all</pre>
 
   .category-warning {
     padding: 0.625rem 1rem;
-    margin: -1.5rem -1.5rem 1rem -1.5rem;
+    margin: -1rem -1rem 1rem -1rem;
     background: rgba(245, 158, 11, 0.1);
     border-bottom: 1px solid rgba(245, 158, 11, 0.2);
     border-radius: 6px 6px 0 0;
@@ -613,22 +700,6 @@ pg_stat_statements.track = all</pre>
     font-size: 1rem;
   }
 
-  .database-badge {
-    margin-left: 0.5rem;
-    padding: 0.375rem 0.75rem;
-    background: var(--bg-tertiary);
-    border: 1px solid var(--border-color);
-    border-radius: 8px;
-    font-size: 0.75rem;
-    font-weight: 500;
-    color: var(--text-secondary);
-  }
-
-  .database-badge strong {
-    color: var(--text-primary);
-    font-weight: 600;
-  }
-
   .live-indicator {
     width: 8px;
     height: 8px;
@@ -852,6 +923,18 @@ pg_stat_statements.track = all</pre>
     if (e.target === this) closePgStatModal();
   });
 
+  function showCreateExtensionModal() {
+    document.getElementById('create-extension-modal').style.display = 'flex';
+  }
+
+  function closeCreateExtensionModal() {
+    document.getElementById('create-extension-modal').style.display = 'none';
+  }
+
+  document.getElementById('create-extension-modal')?.addEventListener('click', function(e) {
+    if (e.target === this) closeCreateExtensionModal();
+  });
+
   function showResetConfirmModal() {
     document.getElementById('reset-confirm-modal').style.display = 'flex';
   }
@@ -918,6 +1001,7 @@ pg_stat_statements.track = all</pre>
       } else {
         showToast(data.message, 'error');
         if (data.requires_restart) {
+          closeCreateExtensionModal();
           showPgStatInfo();
         }
         button.disabled = false;
@@ -990,13 +1074,12 @@ pg_stat_statements.track = all</pre>
     if (!panel) return;
 
     panel.style.display = 'block';
-    panel.innerHTML = `
-      <div class="live-monitoring-header">
-        <div class="live-monitoring-title">
-          <span class="badge-dot error"></span>
-          <span>${PG_REPORTS_I18N.status.monitoring_unavailable}</span>
-        </div>
-      </div>
+
+    // Replace only the metrics grid; preserve the header (which holds the
+    // database selector) so the user can still switch databases when metrics
+    // are unavailable on the current one.
+    const grid = panel.querySelector('.live-metrics-grid');
+    const fallbackHTML = `
       <div style="padding: 2rem; text-align: center; color: var(--text-muted);">
         <p style="margin-bottom: 1rem;">${PG_REPORTS_I18N.errors.unable_fetch_metrics}</p>
         <p style="font-size: 0.875rem;">${PG_REPORTS_I18N.errors.possible_causes}</p>
@@ -1010,6 +1093,16 @@ pg_stat_statements.track = all</pre>
         </button>
       </div>
     `;
+
+    if (grid) {
+      grid.outerHTML = fallbackHTML;
+    } else {
+      panel.insertAdjacentHTML('beforeend', fallbackHTML);
+    }
+
+    // Surface the unavailable status next to the live indicator.
+    const indicator = panel.querySelector('.live-indicator');
+    if (indicator) indicator.classList.add('error');
   }
 
   function startPolling() {

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

@@ -7,6 +7,10 @@
     <span><%= @categories[@category][:name] %></span>
     <span>/</span>
     <span><%= @report_info[:name] %></span>
+
+    <span class="breadcrumb-spacer"></span>
+    <%= render "target_selector" %>
+    <%= render "database_selector" %>
   </nav>
 
   <div class="report-header">