ui: surface SQL commenter query tags in insights

This commit adds support for displaying SQL commenter query tags
in the CockroachDB DB Console insights UI, addressing GitHub issue #146664.

Changes:
- Add query_tags to statement insights API response
- Update TypeScript types to include queryTags field
- Add Query Tags column to statement insights table (hidden by default)
- Display query tags on statement insight detail pages
- Add proper column titles and tooltips for query tags

The query tags were already being stored in the backend execution
insights tables by PR #145435. This change surfaces that data in
the frontend UI, allowing users to correlate query performance
with application context provided via SQL commenter tags.

Fixes #146664

Release note (ui change): The DB Console insights page now displays
SQL commenter query tags for statement executions. Query tags provide
application context (such as application name, user ID, or feature flags)
embedded in SQL comments using the sqlcommenter format. This information
can help correlate slow query performance with specific application state.
The Query Tags column is available in the statement insights table but
hidden by default - it can be enabled via the Columns selector.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

Author: angles-n-daemons

pkg/ui/workspaces/cluster-ui/src/api/stmtInsightsApi.ts

@@ -66,6 +66,7 @@ export type StmtInsightsResponseRow = {
   error_code: string;
   last_error_redactable: string;
   status: StatementStatus;
+  query_tags: Array<{ name: string; value: string }>;
 };
 
 const stmtColumns = `
@@ -97,7 +98,8 @@ plan_gist,
 cpu_sql_nanos,
 error_code,
 last_error_redactable,
-status
+status,
+query_tags
 `;
 
 const stmtInsightsOverviewQuery = (req?: StmtInsightsReq): string => {
@@ -241,6 +243,7 @@ export function formatStmtInsights(
       errorCode: row.error_code,
       errorMsg: row.last_error_redactable,
       status: row.status,
+      queryTags: row.query_tags || [],
     } as StmtInsightEvent;
   });
 }

pkg/ui/workspaces/cluster-ui/src/insights/types.ts

@@ -120,6 +120,7 @@ export type StmtInsightEvent = InsightEventBase & {
   execType?: InsightExecEnum;
   status: StatementStatus;
   errorMsg?: string;
+  queryTags?: Array<{ name: string; value: string }>;
 };
 
 export type Insight = {

pkg/ui/workspaces/cluster-ui/src/insights/workloadInsightDetails/statementInsightDetailsOverviewTab.tsx

@@ -171,6 +171,21 @@ export const StatementInsightDetailsOverviewTab: React.FC<
               label="Statement Fingerprint ID"
               value={StatementDetailsLink(insightDetails)}
             />
+            {insightDetails?.queryTags &&
+              insightDetails.queryTags.length > 0 && (
+                <SummaryCardItem
+                  label="Query Tags"
+                  value={
+                    <div>
+                      {insightDetails.queryTags.map((tag, index) => (
+                        <div key={index}>
+                          <strong>{tag.name}:</strong> {tag.value}
+                        </div>
+                      ))}
+                    </div>
+                  }
+                />
+              )}
           </SummaryCard>
         </Col>
       </Row>

pkg/ui/workspaces/cluster-ui/src/insights/workloadInsights/statementInsights/statementInsightsTable.tsx

@@ -146,6 +146,28 @@ export function makeStatementInsightsColumns(): ColumnDescriptor<StmtInsightEven
       sort: (item: StmtInsightEvent) => item.application,
       showByDefault: true,
     },
+    {
+      name: "queryTags",
+      title: insightsTableTitles.queryTags(execType),
+      cell: (item: StmtInsightEvent) => {
+        if (!item.queryTags || item.queryTags.length === 0) {
+          return "N/A";
+        }
+        const tagsStr = item.queryTags
+          .map(tag => `${tag.name}=${tag.value}`)
+          .join(", ");
+        return (
+          <Tooltip placement="bottom" content={tagsStr}>
+            <span className={cx("queries-row")}>{limitText(tagsStr, 30)}</span>
+          </Tooltip>
+        );
+      },
+      sort: (item: StmtInsightEvent) =>
+        item.queryTags
+          ? item.queryTags.map(tag => `${tag.name}=${tag.value}`).join(", ")
+          : "",
+      showByDefault: false,
+    },
     {
       name: "rowsProcessed",
       title: insightsTableTitles.rowsProcessed(execType),

pkg/ui/workspaces/cluster-ui/src/insights/workloadInsights/util/insightsColumns.tsx

@@ -36,6 +36,7 @@ export const insightsColumnLabels = {
   tableName: "Table Name",
   indexName: "Index Name",
   cpu: "SQL CPU Time",
+  queryTags: "Query Tags",
 };
 
 export type InsightsTableColumnKeys = keyof typeof insightsColumnLabels;
@@ -240,4 +241,14 @@ export const insightsTableTitles: InsightsTableTitleType = {
       "cpu",
     );
   },
+  queryTags: (execType: InsightExecEnum) => {
+    return makeToolTip(
+      <p>
+        The query tags extracted from comments in the {execType} query. These
+        tags provide application context and can be used to correlate query
+        performance with client-side application state.
+      </p>,
+      "queryTags",
+    );
+  },
 };

pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.fixture.ts

@@ -15,7 +15,6 @@ import { DEFAULT_STATS_REQ_OPTIONS } from "src/api/statementsApi";
 import { mockStmtStats } from "src/api/testUtils";
 import { RequestError } from "src/util";
 
-
 import { StatementDiagnosticsReport } from "../api";
 
 import { StatementsPageProps } from "./statementsPage";
@@ -414,10 +413,7 @@ export const statementsPagePropsWithRequestError: StatementsPageProps = {
     data: null,
     lastUpdated,
     valid: true,
-    error: new RequestError(
-      403,
-      "this operation requires admin privilege",
-    ),
+    error: new RequestError(403, "this operation requires admin privilege"),
     inFlight: false,
   },
 };