pg_reports 0.5.4 → 0.6.1

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

@@ -233,7 +233,7 @@
   function copyToClipboard(text, btn) {
     navigator.clipboard.writeText(text).then(() => {
       const originalText = btn.textContent;
-      btn.textContent = '✓ Copied!';
+      btn.textContent = PG_REPORTS_I18N.actions.copied_feedback;
       btn.style.background = 'var(--accent-green)';
       btn.style.borderColor = 'var(--accent-green)';
       btn.style.color = 'white';
@@ -244,7 +244,59 @@
         btn.style.color = '';
       }, 1500);
     }).catch(() => {
-      showToast('Failed to copy', 'error');
+      showToast(PG_REPORTS_I18N.errors.copy_failed, 'error');
+    });
+  }
+
+  // AI Prompt builder — assembles a prompt from documentation + report data
+  const aiPromptInstruction = <%== @documentation[:ai_prompt].to_json %>;
+  const aiPromptWhat = <%== @documentation[:what].to_json %>;
+  const aiPromptHow = <%== @documentation[:how].to_json %>;
+  const aiPromptNuances = <%== (@documentation[:nuances] || []).to_json %>;
+
+  function buildAiPrompt() {
+    if (!currentReportData || !currentReportData.data) return null;
+
+    const rows = currentReportData.data.slice(0, 15);
+    const cols = currentReportData.columns || [];
+
+    // Build markdown table from report data
+    let table = '| ' + cols.join(' | ') + ' |\n';
+    table += '| ' + cols.map(() => '---').join(' | ') + ' |\n';
+    rows.forEach(row => {
+      const values = cols.map(c => {
+        const v = row[c];
+        return v == null ? '' : String(v).replace(/\|/g, '\\|').substring(0, 120);
+      });
+      table += '| ' + values.join(' | ') + ' |\n';
+    });
+    if (currentReportData.data.length > 15) {
+      table += `\n(${currentReportData.data.length - 15} more rows omitted)\n`;
+    }
+
+    // Assemble the prompt
+    let prompt = `## Problem\n\n${aiPromptWhat}\n\n${aiPromptHow}\n`;
+    prompt += `\n## What needs to be done\n\n${aiPromptInstruction}\n`;
+    prompt += `\n## Detected issues\n\n${table}`;
+    if (aiPromptNuances.length > 0) {
+      prompt += `\n## Important context\n\n`;
+      aiPromptNuances.forEach(n => { prompt += `- ${n}\n`; });
+    }
+    return prompt;
+  }
+
+  function copyAiPrompt(el) {
+    const prompt = buildAiPrompt();
+    if (!prompt) {
+      showToast(PG_REPORTS_I18N.errors.run_report_first, 'error');
+      return;
+    }
+
+    document.getElementById('dropdown-menu').classList.remove('show');
+    navigator.clipboard.writeText(prompt).then(() => {
+      showToast(PG_REPORTS_I18N.success.ai_prompt_copied);
+    }).catch(() => {
+      showToast(PG_REPORTS_I18N.errors.copy_failed, 'error');
     });
   }
 
@@ -299,15 +351,15 @@
 
     for (const problem of problems) {
       const levelClass = problem.level === 'critical' ? 'critical' : 'warning';
-      const levelText = problem.level === 'critical' ? '🔴 Critical' : '⚠️ Warning';
+      const levelText = problem.level === 'critical' ? PG_REPORTS_I18N.levels.critical : PG_REPORTS_I18N.levels.warning;
 
       html += `
         <div class="problem-field">
           <span class="problem-field-label">${escapeHtml(problem.field)} (${levelText})</span>
           <div class="problem-field-value ${levelClass}">
-            Current: ${escapeHtml(String(problem.value))}
-            <br>Threshold: warning=${problem.threshold.warning}, critical=${problem.threshold.critical}
-            ${problem.threshold.inverted ? '<br><em>(inverted: lower values are worse)</em>' : ''}
+            ${PG_REPORTS_I18N.sections.current_label} ${escapeHtml(String(problem.value))}
+            <br>${PG_REPORTS_I18N.sections.threshold_label} ${PG_REPORTS_I18N.sections.warning_eq}=${problem.threshold.warning}, ${PG_REPORTS_I18N.sections.critical_eq}=${problem.threshold.critical}
+            ${problem.threshold.inverted ? '<br><em>' + PG_REPORTS_I18N.sections.threshold_inverted_long + '</em>' : ''}
           </div>
         </div>
       `;
@@ -320,7 +372,7 @@
     if (explanation) {
       html += `
         <div class="problem-explanation">
-          <h4>💡 Recommendation</h4>
+          <h4>${PG_REPORTS_I18N.sections.recommendation}</h4>
           <p>${escapeHtml(explanation)}</p>
         </div>
       `;
@@ -580,7 +632,7 @@
         <div class="row-detail-item${isLongText ? ' full-width' : ''}">
           <span class="row-detail-label">${escapeHtml(col)}</span>
           <div class="row-detail-value ${valueClass}">${escapeHtml(strValue)}</div>
-          ${isQuery ? `<button class="copy-btn" data-query="${escapeHtmlAttr(strValue)}" onclick="event.stopPropagation(); copyQueryFromButton(this)">📋 Copy Query</button>` : ''}
+          ${isQuery ? `<button class="copy-btn" data-query="${escapeHtmlAttr(strValue)}" onclick="event.stopPropagation(); copyQueryFromButton(this)">${PG_REPORTS_I18N.actions.copy_query}</button>` : ''}
         </div>
       `;
     });
@@ -632,7 +684,7 @@
 
     if (button) {
       button.disabled = true;
-      button.innerHTML = '<span class="spinner" style="width:16px;height:16px;border-width:2px;display:inline-block;vertical-align:middle;"></span> Running...';
+      button.innerHTML = '<span class="spinner" style="width:16px;height:16px;border-width:2px;display:inline-block;vertical-align:middle;"></span> ' + PG_REPORTS_I18N.actions.running;
     }
 
     if (loadingEl) loadingEl.style.display = 'flex';
@@ -688,7 +740,7 @@
           `;
         }
 
-        // Show download and telegram buttons
+        // Show export and telegram buttons
         if (downloadDropdown) downloadDropdown.style.display = 'inline-block';
         if (telegramBtn) telegramBtn.style.display = 'inline-flex';
 
@@ -709,18 +761,18 @@
           renderTableBody(data.data, data.columns, thresholds, problemFields);
         }
 
-        showToast('Report generated successfully');
+        showToast(PG_REPORTS_I18N.success.report_generated);
       } else {
-        showToast(data.error || 'Failed to run report', 'error');
+        showToast(data.error || PG_REPORTS_I18N.errors.run_report_failed, 'error');
       }
     } catch (error) {
       if (loadingEl) loadingEl.style.display = 'none';
-      showToast('Network error: ' + error.message, 'error');
+      showToast(PG_REPORTS_I18N.errors.network_error_prefix + ' ' + error.message, 'error');
     }
 
     if (button) {
       button.disabled = false;
-      button.innerHTML = '▶ Run Report';
+      button.innerHTML = PG_REPORTS_I18N.actions.run_report;
     }
   }
 
@@ -833,8 +885,8 @@
       // Remove
       saved.splice(existingIdx, 1);
       btn.classList.remove('saved');
-      btn.textContent = '📌 Save for Comparison';
-      showToast('Record removed from saved');
+      btn.textContent = PG_REPORTS_I18N.actions.save_for_comparison;
+      showToast(PG_REPORTS_I18N.success.record_removed_saved);
     } else {
       // Add
       saved.unshift({
@@ -843,8 +895,8 @@
         data: row
       });
       btn.classList.add('saved');
-      btn.textContent = '📌 Saved';
-      showToast('Record saved for comparison');
+      btn.textContent = PG_REPORTS_I18N.actions.saved_marker;
+      showToast(PG_REPORTS_I18N.success.record_saved);
     }
 
     saveSavedRecords(saved);
@@ -861,24 +913,24 @@
     const btn = document.querySelector(`.btn-save[onclick*="'${rowId}'"]`);
     if (btn) {
       btn.classList.remove('saved');
-      btn.textContent = '📌 Save for Comparison';
+      btn.textContent = PG_REPORTS_I18N.actions.save_for_comparison;
     }
 
-    showToast('Record removed');
+    showToast(PG_REPORTS_I18N.success.record_removed);
   }
 
   function clearAllSavedRecords() {
-    if (!confirm('Remove all saved records for this report?')) return;
+    if (!confirm(PG_REPORTS_I18N.saved.confirm_clear_all)) return;
     saveSavedRecords([]);
     renderSavedRecords();
 
     // Update all buttons in table
     document.querySelectorAll('.btn-save.saved').forEach(btn => {
       btn.classList.remove('saved');
-      btn.textContent = '📌 Save for Comparison';
+      btn.textContent = PG_REPORTS_I18N.actions.save_for_comparison;
     });
 
-    showToast('All saved records cleared');
+    showToast(PG_REPORTS_I18N.success.all_saved_cleared);
   }
 
   function renderSavedRecords() {
@@ -907,9 +959,9 @@
       html += `
         <div class="saved-record-card" id="saved-card-${idx}" onclick="toggleSavedRecordDetail(${idx}, event)">
           <div class="saved-record-header">
-            <span class="saved-record-time">▸ Saved: ${savedTime}</span>
-            <span class="saved-record-expand-hint">Click to expand</span>
-            <button class="saved-record-remove" onclick="event.stopPropagation(); removeSavedRecord('${record.id}')" title="Remove">×</button>
+            <span class="saved-record-time">${PG_REPORTS_I18N.saved.saved_at_prefix} ${savedTime}</span>
+            <span class="saved-record-expand-hint">${PG_REPORTS_I18N.saved.click_to_expand}</span>
+            <button class="saved-record-remove" onclick="event.stopPropagation(); removeSavedRecord('${record.id}')" title="${PG_REPORTS_I18N.saved.remove_title}">×</button>
           </div>
           <div class="saved-record-data">
       `;
@@ -1034,7 +1086,7 @@
       const query = decodeURIComponent(escape(atob(queryBase64)));
       runExplainAnalyze(query, queryHash);
     } catch (e) {
-      showToast('Failed to decode query', 'error');
+      showToast(PG_REPORTS_I18N.errors.decode_query_failed, 'error');
     }
   }
 
@@ -1155,7 +1207,7 @@
     // Show problems list
     if (data.problems && data.problems.length > 0) {
       html += '<div class="explain-problems">';
-      html += '<div class="explain-problems-header">⚠️ Detected Issues</div>';
+      html += '<div class="explain-problems-header">' + PG_REPORTS_I18N.sections.detected_issues + '</div>';
       html += '<div class="explain-problems-list">';
 
       data.problems.forEach(problem => {
@@ -1167,7 +1219,7 @@
         html += '<span class="explain-problem-icon">' + severityIcon + '</span>';
         html += '<span class="explain-problem-message">' + escapeHtml(problem.message) + '</span>';
         if (problem.line_number) {
-          html += '<span class="explain-problem-line">Line ' + problem.line_number + '</span>';
+          html += '<span class="explain-problem-line">' + PG_REPORTS_I18N.sections.line_label + ' ' + problem.line_number + '</span>';
         }
         html += '</div>';
         if (problem.details) {
@@ -1187,8 +1239,8 @@
     if (data.annotated_lines && data.annotated_lines.length > 0) {
       html += '<div class="explain-output">';
       html += '<div class="explain-output-header">';
-      html += '📊 Execution Plan';
-      html += '<button class="btn-copy-small" onclick="copyExplainOutput()" title="Copy to clipboard">📋 Copy</button>';
+      html += PG_REPORTS_I18N.sections.execution_plan;
+      html += '<button class="btn-copy-small" onclick="copyExplainOutput()" title="' + PG_REPORTS_I18N.actions.copy_to_clipboard_title + '">' + PG_REPORTS_I18N.actions.copy + '</button>';
       html += '</div>';
       html += '<div class="explain-lines">';
 
@@ -1272,9 +1324,9 @@
     const text = Array.from(lines).map(line => line.textContent).join('\n');
 
     navigator.clipboard.writeText(text).then(() => {
-      showToast('EXPLAIN output copied to clipboard');
+      showToast(PG_REPORTS_I18N.success.explain_copied);
     }).catch(() => {
-      showToast('Failed to copy', 'error');
+      showToast(PG_REPORTS_I18N.errors.copy_failed, 'error');
     });
   }
 
@@ -1285,11 +1337,10 @@
 
     // Security check
     if (!allowRawQueryExecution) {
-      const message = '⚠️ EXPLAIN ANALYZE отключен. Включите в конфигурации: config.allow_raw_query_execution = true';
-      showToast(message, 'error');
+      showToast(PG_REPORTS_I18N.errors.explain_disabled_toast, 'error');
       content.innerHTML = `<div class="error-message">
-        <strong>⚠️ Query execution is disabled</strong><br><br>
-        To enable this feature, add to your configuration:<br>
+        <strong>${PG_REPORTS_I18N.modals.query_execution_disabled_title}</strong><br><br>
+        ${PG_REPORTS_I18N.modals.query_execution_disabled_intro}<br>
         <code style="display: block; margin-top: 0.5rem; padding: 0.5rem; background: rgba(0,0,0,0.2); border-radius: 4px;">
 PgReports.configure do |config|<br>
 &nbsp;&nbsp;config.allow_raw_query_execution = true<br>
@@ -1320,11 +1371,11 @@ end
       if (data.success) {
         content.innerHTML = renderExplainAnalysis(data);
       } else {
-        content.innerHTML = `<div class="error-message">${escapeHtml(data.error || 'Failed to run EXPLAIN ANALYZE')}</div>`;
+        content.innerHTML = `<div class="error-message">${escapeHtml(data.error || PG_REPORTS_I18N.errors.explain_analyze_failed)}</div>`;
       }
     } catch (error) {
       loading.style.display = 'none';
-      content.innerHTML = `<div class="error-message">Network error: ${escapeHtml(error.message)}</div>`;
+      content.innerHTML = `<div class="error-message">${PG_REPORTS_I18N.errors.network_error_prefix} ${escapeHtml(error.message)}</div>`;
     }
   }
 
@@ -1335,11 +1386,10 @@ end
 
     // Security check
     if (!allowRawQueryExecution) {
-      const message = '⚠️ Выполнение запросов отключено. Включите в конфигурации: config.allow_raw_query_execution = true';
-      showToast(message, 'error');
+      showToast(PG_REPORTS_I18N.errors.execute_disabled_toast, 'error');
       content.innerHTML = `<div class="error-message">
-        <strong>⚠️ Query execution is disabled</strong><br><br>
-        To enable this feature, add to your configuration:<br>
+        <strong>${PG_REPORTS_I18N.modals.query_execution_disabled_title}</strong><br><br>
+        ${PG_REPORTS_I18N.modals.query_execution_disabled_intro}<br>
         <code style="display: block; margin-top: 0.5rem; padding: 0.5rem; background: rgba(0,0,0,0.2); border-radius: 4px;">
 PgReports.configure do |config|<br>
 &nbsp;&nbsp;config.allow_raw_query_execution = true<br>
@@ -1372,8 +1422,8 @@ end
 
         // Show info
         html += `<div class="query-results-info">
-          <span>Rows: <span class="count">${data.count}</span></span>
-          <span>Execution time: <span class="time">${data.execution_time} ms</span></span>
+          <span>${PG_REPORTS_I18N.results.rows_label} <span class="count">${data.count}</span></span>
+          <span>${PG_REPORTS_I18N.results.execution_time_label} <span class="time">${data.execution_time} ms</span></span>
         </div>`;
 
         if (data.rows && data.rows.length > 0) {
@@ -1393,7 +1443,7 @@ end
             html += '<tr>';
             data.columns.forEach(col => {
               const value = row[col];
-              const displayValue = value === null ? '<null>' : String(value);
+              const displayValue = value === null ? PG_REPORTS_I18N.results.null_placeholder : String(value);
               html += `<td title="${escapeHtmlAttr(displayValue)}">${escapeHtml(displayValue)}</td>`;
             });
             html += '</tr>';
@@ -1404,19 +1454,19 @@ end
           html += '</div>';
 
           if (data.truncated) {
-            html += `<p style="margin-top: 0.5rem; color: var(--text-muted); font-size: 0.75rem;">Showing first ${data.rows.length} of ${data.total_count} rows</p>`;
+            html += `<p style="margin-top: 0.5rem; color: var(--text-muted); font-size: 0.75rem;">${pgReportsFormat(PG_REPORTS_I18N.results.showing_first_of_total, { count: data.rows.length, total: data.total_count })}</p>`;
           }
         } else {
-          html += '<p style="margin-top: 1rem; color: var(--text-muted);">No rows returned</p>';
+          html += '<p style="margin-top: 1rem; color: var(--text-muted);">' + PG_REPORTS_I18N.results.no_rows_returned + '</p>';
         }
 
         content.innerHTML = html;
       } else {
-        content.innerHTML = `<div class="error-message">${escapeHtml(data.error || 'Failed to execute query')}</div>`;
+        content.innerHTML = `<div class="error-message">${escapeHtml(data.error || PG_REPORTS_I18N.errors.execute_query_failed)}</div>`;
       }
     } catch (error) {
       loading.style.display = 'none';
-      content.innerHTML = `<div class="error-message">Network error: ${escapeHtml(error.message)}</div>`;
+      content.innerHTML = `<div class="error-message">${PG_REPORTS_I18N.errors.network_error_prefix} ${escapeHtml(error.message)}</div>`;
     }
   }
 
@@ -1491,9 +1541,9 @@ end
   function copyMigrationCode() {
     if (!currentMigrationData) return;
     navigator.clipboard.writeText(currentMigrationData.code).then(() => {
-      showToast('Migration code copied to clipboard');
+      showToast(PG_REPORTS_I18N.success.migration_copied);
     }).catch(() => {
-      showToast('Failed to copy', 'error');
+      showToast(PG_REPORTS_I18N.errors.copy_failed, 'error');
     });
   }
 
@@ -1540,7 +1590,7 @@ end
       const data = await response.json();
 
       if (data.success) {
-        showToast('Migration file created');
+        showToast(PG_REPORTS_I18N.success.migration_created);
         closeMigrationModal();
 
         // Open in IDE if path provided
@@ -1555,10 +1605,10 @@ end
           }
         }
       } else {
-        showToast(data.error || 'Failed to create migration', 'error');
+        showToast(data.error || PG_REPORTS_I18N.errors.create_migration_failed, 'error');
       }
     } catch (error) {
-      showToast('Network error: ' + error.message, 'error');
+      showToast(PG_REPORTS_I18N.errors.network_error_prefix + ' ' + error.message, 'error');
     }
   }
 </script>

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

@@ -3,7 +3,7 @@
   .documentation-section {
     background: var(--bg-card);
     border: 1px solid var(--border-color);
-    border-radius: 12px;
+    border-radius: 6px;
     overflow: hidden;
   }
 
@@ -138,9 +138,9 @@
     margin-top: 4px;
     background: var(--bg-card);
     border: 1px solid var(--border-color);
-    border-radius: 10px;
+    border-radius: 6px;
     min-width: 160px;
-    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
     z-index: 100;
     overflow: hidden;
   }
@@ -167,6 +167,26 @@
     border-bottom: 1px solid var(--border-color);
   }
 
+  .dropdown-divider {
+    height: 0;
+    margin: 0;
+    border-top: 1px solid var(--border-color);
+  }
+
+  .dropdown-menu .ai-icon {
+    display: inline-block;
+    font-size: 0.6rem;
+    font-weight: 800;
+    background: #8b5cf6;
+    color: #fff;
+    border-radius: 3px;
+    padding: 0.1rem 0.3rem;
+    letter-spacing: 0.03em;
+    line-height: 1.2;
+    vertical-align: middle;
+    margin-right: 0.2rem;
+  }
+
   /* Clickable rows */
   .results-table tbody tr.data-row {
     cursor: pointer;
@@ -260,11 +280,29 @@
   .problem-modal-content {
     background: var(--bg-card);
     border: 1px solid var(--border-color);
-    border-radius: 16px;
+    border-radius: 6px;
     max-width: 600px;
     width: 90%;
     max-height: 80vh;
     overflow: auto;
+    scrollbar-width: thin;
+    scrollbar-color: var(--border-color) var(--bg-secondary);
+  }
+
+  .problem-modal-content::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+  .problem-modal-content::-webkit-scrollbar-track {
+    background: var(--bg-secondary);
+    border-radius: 4px;
+  }
+  .problem-modal-content::-webkit-scrollbar-thumb {
+    background: var(--border-color);
+    border-radius: 4px;
+  }
+  .problem-modal-content::-webkit-scrollbar-thumb:hover {
+    background: var(--text-muted);
   }
 
   .problem-modal-header {
@@ -649,7 +687,7 @@
   .saved-records-section {
     background: var(--bg-card);
     border: 1px solid var(--accent-purple);
-    border-radius: 12px;
+    border-radius: 6px;
     margin-bottom: 1rem;
     overflow: hidden;
   }
@@ -1161,7 +1199,7 @@
   .filter-section {
     background: var(--bg-card);
     border: 1px solid var(--border-color);
-    border-radius: 12px;
+    border-radius: 6px;
     overflow: hidden;
   }
 
@@ -1272,7 +1310,7 @@
   /* Summary card at top */
   .explain-summary {
     background: var(--bg-card);
-    border-radius: 12px;
+    border-radius: 6px;
     padding: 1.25rem;
     margin-bottom: 1.5rem;
     border-left: 4px solid var(--accent-blue);
@@ -1344,7 +1382,7 @@
   .explain-stat {
     background: var(--bg-card);
     border: 1px solid var(--border-color);
-    border-radius: 10px;
+    border-radius: 6px;
     padding: 1rem;
     display: flex;
     flex-direction: column;
@@ -1387,7 +1425,7 @@
   .explain-problems {
     background: var(--bg-card);
     border: 1px solid var(--border-color);
-    border-radius: 12px;
+    border-radius: 6px;
     padding: 1.25rem;
     margin-bottom: 1.5rem;
   }
@@ -1482,7 +1520,7 @@
   .explain-output {
     background: var(--bg-card);
     border: 1px solid var(--border-color);
-    border-radius: 12px;
+    border-radius: 6px;
     overflow: hidden;
   }
 
@@ -1633,7 +1671,7 @@
     overflow-x: auto;
     background: var(--bg-card);
     border: 1px solid var(--border-color);
-    border-radius: 12px;
+    border-radius: 6px;
     padding: 1.25rem;
     color: var(--text-secondary);
   }