Add enhanced query insights UI with categorization

This update introduces a revamped Query Insights page with clear categorization and sorting based on optimization priority, execution frequency, and performance metrics. New features include query classification, compact SQL previews, and a detailed view for selected queries, improving user experience and actionable insights. Styling enhancements provide a more intuitive and visually appealing interface.

frontend/src/styles.css

@@ -253,6 +253,124 @@ button {
   color: #bfd0ea;
 }
 
+.query-insights-page .query-toolbar {
+  display: grid;
+  grid-template-columns: minmax(240px, 420px);
+  align-items: end;
+}
+
+.query-category {
+  cursor: pointer;
+  transition: transform 0.15s ease, border-color 0.15s ease;
+}
+
+.query-category:hover {
+  transform: translateY(-1px);
+  border-color: #4da8ee;
+}
+
+.query-category h4 {
+  margin: 0 0 2px 0;
+}
+
+.query-category small {
+  color: #9bb5d4;
+  display: block;
+  margin-bottom: 8px;
+}
+
+.query-kpi {
+  margin: 4px 0;
+}
+
+.query-kpi span {
+  display: block;
+  color: #9bb5d4;
+  font-size: 12px;
+}
+
+.query-kpi strong {
+  font-size: 14px;
+}
+
+.query-state {
+  display: inline-block;
+  padding: 3px 8px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 700;
+  margin-bottom: 6px;
+  border: 1px solid transparent;
+}
+
+.query-state.danger {
+  color: #fecaca;
+  background: #3b1d23;
+  border-color: #b64a4a;
+}
+
+.query-state.warn {
+  color: #fde68a;
+  background: #3c2d14;
+  border-color: #9b7b2f;
+}
+
+.query-state.info {
+  color: #bfdbfe;
+  background: #172a4a;
+  border-color: #3d67a7;
+}
+
+.query-state.ok {
+  color: #bbf7d0;
+  background: #133126;
+  border-color: #2f8f63;
+}
+
+.query-list table tbody tr.active-row {
+  background: #15345f70;
+}
+
+.query-list .table-link {
+  display: inline-block;
+  border: 0;
+  background: transparent;
+  color: #d7e7ff;
+  padding: 0;
+  text-align: left;
+  cursor: pointer;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: "Space Grotesk", "Segoe UI", sans-serif;
+}
+
+.query-detail .sql-block {
+  margin-top: 10px;
+  background: #0a1c3a;
+  border: 1px solid #2b578b;
+  border-radius: 10px;
+  padding: 10px;
+  max-height: 360px;
+  overflow: auto;
+}
+
+.query-detail .sql-block code {
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: #d4e7ff;
+  font-family: "Consolas", "SFMono-Regular", Menlo, monospace;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.query-hint {
+  margin-top: 10px;
+  color: #9eb8d6;
+  font-size: 13px;
+}
+
 .targets-page h2 {
   margin-top: 4px;
   margin-bottom: 16px;