diff --git a/web-console/.editorconfig b/web-console/.editorconfig
index 217a0a23608e..6ee43ffa701a 100644
--- a/web-console/.editorconfig
+++ b/web-console/.editorconfig
@@ -11,3 +11,6 @@ insert_final_newline = true
 [*.md]
 trim_trailing_whitespace = false
 insert_final_newline = false
+
+[*.snap]
+trim_trailing_whitespace = false
diff --git a/web-console/src/druid-models/execution/execution.spec.ts b/web-console/src/druid-models/execution/execution.spec.ts
index 15dc15bf8ebb..62ad7b3d8b14 100644
--- a/web-console/src/druid-models/execution/execution.spec.ts
+++ b/web-console/src/druid-models/execution/execution.spec.ts
@@ -295,6 +295,7 @@ describe('Execution', () => {
           )
         ) EXTEND ("timestamp" VARCHAR, "agent_type" VARCHAR)
         PARTITIONED BY ALL TIME",
+          "sqlQueryId": undefined,
           "stages": Stages {
             "counters": {
               "0": {
@@ -672,6 +673,7 @@ describe('Execution', () => {
           },
           "segmentStatus": undefined,
           "sqlQuery": undefined,
+          "sqlQueryId": undefined,
           "stages": Stages {
             "counters": {
               "0": {
@@ -1156,6 +1158,7 @@ describe('Execution', () => {
           "result": undefined,
           "segmentStatus": undefined,
           "sqlQuery": undefined,
+          "sqlQueryId": undefined,
           "stages": Stages {
             "counters": {
               "0": {
diff --git a/web-console/src/druid-models/execution/execution.ts b/web-console/src/druid-models/execution/execution.ts
index b4fc89fa025c..148c3048c24a 100644
--- a/web-console/src/druid-models/execution/execution.ts
+++ b/web-console/src/druid-models/execution/execution.ts
@@ -176,6 +176,7 @@ export interface ExecutionValue {
   engine: DruidEngine;
   id: string;
   sqlQuery?: string;
+  sqlQueryId?: string;
   nativeQuery?: any;
   queryContext?: QueryContext;
   status?: ExecutionStatus;
@@ -396,6 +397,7 @@ export class Execution {
   public readonly engine: DruidEngine;
   public readonly id: string;
   public readonly sqlQuery?: string;
+  public readonly sqlQueryId?: string;
   public readonly nativeQuery?: any;
   public readonly queryContext?: QueryContext;
   public readonly status?: ExecutionStatus;
@@ -419,6 +421,7 @@ export class Execution {
     this.id = value.id;
     if (!this.id) throw new Error('must have an id');
     this.sqlQuery = value.sqlQuery;
+    this.sqlQueryId = value.sqlQueryId;
     this.nativeQuery = value.nativeQuery;
     this.queryContext = value.queryContext;
     this.status = value.status;
@@ -443,6 +446,7 @@ export class Execution {
       engine: this.engine,
       id: this.id,
       sqlQuery: this.sqlQuery,
+      sqlQueryId: this.sqlQueryId,
       nativeQuery: this.nativeQuery,
       queryContext: this.queryContext,
       status: this.status,
@@ -486,6 +490,14 @@ export class Execution {
     return new Execution(value);
   }
 
+  public changeSqlQueryId(sqlQueryId: string | null | undefined): Execution {
+    if (!sqlQueryId) return this;
+    return new Execution({
+      ...this.valueOf(),
+      sqlQueryId,
+    });
+  }
+
   public changeDestination(destination: ExecutionDestination): Execution {
     return new Execution({
       ...this.valueOf(),
diff --git a/web-console/src/views/workbench-view/execution-details-pane-loader/execution-details-pane-loader.tsx b/web-console/src/views/workbench-view/execution-details-pane-loader/execution-details-pane-loader.tsx
index 21b48826f759..67bfa882c877 100644
--- a/web-console/src/views/workbench-view/execution-details-pane-loader/execution-details-pane-loader.tsx
+++ b/web-console/src/views/workbench-view/execution-details-pane-loader/execution-details-pane-loader.tsx
@@ -35,7 +35,9 @@ async function getDartExecution(sqlQueryId: string, signal: AbortSignal): Promis
 
   if (!data.report) throw new Error('Query not started yet');
 
-  return Execution.fromDartReport(data.report).changeSqlQuery(data.query.sql);
+  return Execution.fromDartReport(data.report)
+    .changeSqlQuery(data.query.sql)
+    .changeSqlQueryId(data.query.sqlQueryId);
 }
 
 export interface ExecutionDetailsPaneLoaderProps {
diff --git a/web-console/src/views/workbench-view/execution-details-pane/__snapshots__/execution-details-pane.spec.tsx.snap b/web-console/src/views/workbench-view/execution-details-pane/__snapshots__/execution-details-pane.spec.tsx.snap
index eff030e9654e..c4a61a71fb03 100644
--- a/web-console/src/views/workbench-view/execution-details-pane/__snapshots__/execution-details-pane.spec.tsx.snap
+++ b/web-console/src/views/workbench-view/execution-details-pane/__snapshots__/execution-details-pane.spec.tsx.snap
@@ -42,7 +42,7 @@ exports[`ExecutionDetailsPane matches snapshot no init tab 1`] = `
     className="execution-details-pane-general"
   >
     <p>
-      General info for 
+      General info for execution ID: 
       <Blueprint5.Tag
         active={false}
         fill={false}
@@ -352,6 +352,7 @@ FROM TABLE(
   )
 ) EXTEND ("timestamp" VARCHAR, "agent_type" VARCHAR)
 PARTITIONED BY DAY",
+          "sqlQueryId": undefined,
           "stages": Stages {
             "counters": {
               "0": {
@@ -994,6 +995,7 @@ FROM TABLE(
   )
 ) EXTEND ("timestamp" VARCHAR, "agent_type" VARCHAR)
 PARTITIONED BY DAY",
+          "sqlQueryId": undefined,
           "stages": Stages {
             "counters": {
               "0": {
@@ -1681,6 +1683,7 @@ FROM TABLE(
   )
 ) EXTEND ("timestamp" VARCHAR, "agent_type" VARCHAR)
 PARTITIONED BY DAY",
+        "sqlQueryId": undefined,
         "stages": Stages {
           "counters": {
             "0": {
diff --git a/web-console/src/views/workbench-view/execution-details-pane/execution-details-pane.tsx b/web-console/src/views/workbench-view/execution-details-pane/execution-details-pane.tsx
index 20e5f342eb3a..23003eb83d43 100644
--- a/web-console/src/views/workbench-view/execution-details-pane/execution-details-pane.tsx
+++ b/web-console/src/views/workbench-view/execution-details-pane/execution-details-pane.tsx
@@ -70,7 +70,13 @@ export const ExecutionDetailsPane = React.memo(function ExecutionDetailsPane(
         return (
           <div className="execution-details-pane-general">
             <p>
-              General info for <Tag minimal>{execution.id}</Tag>
+              General info for execution ID: <Tag minimal>{execution.id}</Tag>
+              {execution.sqlQueryId && (
+                <>
+                  {' '}
+                  (SQL ID <Tag minimal>{execution.sqlQueryId}</Tag>)
+                </>
+              )}
               {ingestDatasource && (
                 <>
                   {' '}