@memberjunction/ng-artifacts 5.28.0 → 5.29.0

package/dist/lib/components/plugins/data-artifact-viewer.component.js

@@ -6,16 +6,18 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { Component, Output, EventEmitter } from '@angular/core';
 import { RegisterClass } from '@memberjunction/global';
-import { Metadata, RunQuery, CompositeKey, KeyValuePair } from '@memberjunction/core';
+import { DataSnapshot, NormalizeToTables, Metadata, RunQuery, CompositeKey, KeyValuePair } from '@memberjunction/core';
 import { QueryEngine, ArtifactMetadataEngine } from '@memberjunction/core-entities';
 import { resolveTargetEntity } from '@memberjunction/ng-query-viewer';
 import { BaseArtifactViewerPluginComponent } from '../base-artifact-viewer.component';
+import { buildMultiTableSql } from '../../snapshot-helpers';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
 import * as i2 from "@memberjunction/ng-markdown";
 import * as i3 from "@memberjunction/ng-query-viewer";
 import * as i4 from "@memberjunction/ng-shared-generic";
 import * as i5 from "./save-query-dialog.component";
+const _forTrack0 = ($index, $item) => $item.name;
 function DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 7);
     i0.ɵɵtext(1, "Live");
@@ -41,9 +43,9 @@ function DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_7_T
 } }
 function DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 17);
+    i0.ɵɵelementStart(0, "button", 19);
     i0.ɵɵlistener("click", function DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_9_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnRefresh()); });
-    i0.ɵɵelement(1, "i", 18);
+    i0.ɵɵelement(1, "i", 20);
     i0.ɵɵtext(2, " Refresh ");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -54,21 +56,21 @@ function DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_9_T
 } }
 function DataArtifactViewerComponent_Conditional_1_Conditional_0_Case_10_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 19);
+    i0.ɵɵelementStart(0, "button", 21);
     i0.ɵɵlistener("click", function DataArtifactViewerComponent_Conditional_1_Conditional_0_Case_10_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnShowSaveDialog()); });
-    i0.ɵɵelement(1, "i", 20);
-    i0.ɵɵtext(2, " Save Query ");
+    i0.ɵɵelement(1, "i", 22);
+    i0.ɵɵtext(2, " Save Query");
     i0.ɵɵelementEnd();
 } }
 function DataArtifactViewerComponent_Conditional_1_Conditional_0_Case_11_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "span", 21);
-    i0.ɵɵelement(1, "i", 22);
+    i0.ɵɵelementStart(0, "span", 23);
+    i0.ɵɵelement(1, "i", 24);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "button", 23);
+    i0.ɵɵelementStart(3, "button", 25);
     i0.ɵɵlistener("click", function DataArtifactViewerComponent_Conditional_1_Conditional_0_Case_11_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnOpenSavedQuery()); });
-    i0.ɵɵelement(4, "i", 24);
+    i0.ɵɵelement(4, "i", 26);
     i0.ɵɵtext(5, " Open Query ");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -78,33 +80,33 @@ function DataArtifactViewerComponent_Conditional_1_Conditional_0_Case_11_Templat
 } }
 function DataArtifactViewerComponent_Conditional_1_Conditional_0_Case_12_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 31);
+    i0.ɵɵelementStart(0, "div", 33);
     i0.ɵɵlistener("click", function DataArtifactViewerComponent_Conditional_1_Conditional_0_Case_12_Conditional_8_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r6); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(1, "div", 32);
+    i0.ɵɵelementStart(1, "div", 34);
     i0.ɵɵlistener("click", function DataArtifactViewerComponent_Conditional_1_Conditional_0_Case_12_Conditional_8_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.OnUpdateExistingQuery()); });
-    i0.ɵɵelement(2, "i", 33);
-    i0.ɵɵelementStart(3, "div")(4, "div", 34);
+    i0.ɵɵelement(2, "i", 35);
+    i0.ɵɵelementStart(3, "div")(4, "div", 36);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 35);
+    i0.ɵɵelementStart(6, "div", 37);
     i0.ɵɵtext(7, "Replace saved query SQL with this version's SQL");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(8, "div", 32);
+    i0.ɵɵelementStart(8, "div", 34);
     i0.ɵɵlistener("click", function DataArtifactViewerComponent_Conditional_1_Conditional_0_Case_12_Conditional_8_Template_div_click_8_listener() { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.OnSaveAsNewQuery()); });
-    i0.ɵɵelement(9, "i", 36);
-    i0.ɵɵelementStart(10, "div")(11, "div", 34);
+    i0.ɵɵelement(9, "i", 38);
+    i0.ɵɵelementStart(10, "div")(11, "div", 36);
     i0.ɵɵtext(12, "Save as New Query");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "div", 35);
+    i0.ɵɵelementStart(13, "div", 37);
     i0.ɵɵtext(14, "Create a new query, keep the original unchanged");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(15, "div", 32);
+    i0.ɵɵelementStart(15, "div", 34);
     i0.ɵɵlistener("click", function DataArtifactViewerComponent_Conditional_1_Conditional_0_Case_12_Conditional_8_Template_div_click_15_listener() { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(4); ctx_r0.OnOpenSavedQuery(); return i0.ɵɵresetView(ctx_r0.OnCloseDropdown()); });
-    i0.ɵɵelement(16, "i", 37);
-    i0.ɵɵelementStart(17, "div")(18, "div", 34);
+    i0.ɵɵelement(16, "i", 39);
+    i0.ɵɵelementStart(17, "div")(18, "div", 36);
     i0.ɵɵtext(19, "Open Saved Query");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(20, "div", 35);
+    i0.ɵɵelementStart(20, "div", 37);
     i0.ɵɵtext(21);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
@@ -116,17 +118,17 @@ function DataArtifactViewerComponent_Conditional_1_Conditional_0_Case_12_Conditi
 } }
 function DataArtifactViewerComponent_Conditional_1_Conditional_0_Case_12_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "span", 25);
-    i0.ɵɵelement(1, "i", 26);
+    i0.ɵɵelementStart(0, "span", 27);
+    i0.ɵɵelement(1, "i", 28);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 27)(4, "button", 28);
+    i0.ɵɵelementStart(3, "div", 29)(4, "button", 30);
     i0.ɵɵlistener("click", function DataArtifactViewerComponent_Conditional_1_Conditional_0_Case_12_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnToggleUpdateDropdown()); });
-    i0.ɵɵelement(5, "i", 20);
+    i0.ɵɵelement(5, "i", 22);
     i0.ɵɵtext(6, " Update Query ");
-    i0.ɵɵelement(7, "i", 29);
+    i0.ɵɵelement(7, "i", 31);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(8, DataArtifactViewerComponent_Conditional_1_Conditional_0_Case_12_Conditional_8_Template, 22, 3, "div", 30);
+    i0.ɵɵconditionalCreate(8, DataArtifactViewerComponent_Conditional_1_Conditional_0_Case_12_Conditional_8_Template, 22, 3, "div", 32);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
@@ -137,13 +139,13 @@ function DataArtifactViewerComponent_Conditional_1_Conditional_0_Case_12_Templat
 } }
 function DataArtifactViewerComponent_Conditional_1_Conditional_0_Case_13_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "span", 38);
-    i0.ɵɵelement(1, "i", 39);
+    i0.ɵɵelementStart(0, "span", 40);
+    i0.ɵɵelement(1, "i", 41);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "button", 40);
+    i0.ɵɵelementStart(3, "button", 42);
     i0.ɵɵlistener("click", function DataArtifactViewerComponent_Conditional_1_Conditional_0_Case_13_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnOpenSavedQuery()); });
-    i0.ɵɵelement(4, "i", 24);
+    i0.ɵɵelement(4, "i", 26);
     i0.ɵɵtext(5, " Open Query ");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -153,13 +155,13 @@ function DataArtifactViewerComponent_Conditional_1_Conditional_0_Case_13_Templat
 } }
 function DataArtifactViewerComponent_Conditional_1_Conditional_0_Case_14_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "span", 38);
-    i0.ɵɵelement(1, "i", 39);
+    i0.ɵɵelementStart(0, "span", 40);
+    i0.ɵɵelement(1, "i", 41);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "button", 40);
+    i0.ɵɵelementStart(3, "button", 42);
     i0.ɵɵlistener("click", function DataArtifactViewerComponent_Conditional_1_Conditional_0_Case_14_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r8); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnOpenSavedQuery()); });
-    i0.ɵɵelement(4, "i", 24);
+    i0.ɵɵelement(4, "i", 26);
     i0.ɵɵtext(5, " Open Query ");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -168,30 +170,99 @@ function DataArtifactViewerComponent_Conditional_1_Conditional_0_Case_14_Templat
     i0.ɵɵtextInterpolate1(" Saved at v", ctx_r0.SavedAtVersion, " ");
 } }
 function DataArtifactViewerComponent_Conditional_1_Conditional_0_Case_15_Template(rf, ctx) { }
+function DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_16_For_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 46);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const table_r11 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" (", (table_r11.metadata == null ? null : table_r11.metadata.rowCount) ?? table_r11.rows.length, " rows) ");
+} }
+function DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_16_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 44);
+    i0.ɵɵlistener("click", function DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_16_For_2_Template_button_click_0_listener() { const ɵ$index_131_r10 = i0.ɵɵrestoreView(_r9).$index; const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.OnTableTabClick(ɵ$index_131_r10)); });
+    i0.ɵɵelementStart(1, "span", 45);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(3, DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_16_For_2_Conditional_3_Template, 2, 1, "span", 46);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const table_r11 = ctx.$implicit;
+    const ɵ$index_131_r10 = ctx.$index;
+    const ctx_r0 = i0.ɵɵnextContext(4);
+    i0.ɵɵclassProp("active", ɵ$index_131_r10 === ctx_r0.ActiveTableIndex);
+    i0.ɵɵproperty("title", table_r11.description || table_r11.name);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(table_r11.name);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((table_r11.metadata == null ? null : table_r11.metadata.rowCount) != null || table_r11.rows.length ? 3 : -1);
+} }
+function DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 13);
+    i0.ɵɵrepeaterCreate(1, DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_16_For_2_Template, 4, 5, "button", 43, _forTrack0);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r0.ResolvedTables);
+} }
+function DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_17_For_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 47)(1, "span", 48);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 49);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const comp_r12 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("title", comp_r12.description || comp_r12.name);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(comp_r12.name);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", comp_r12.formattedValue || comp_r12.value, " ");
+} }
+function DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_17_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_17_For_2_Conditional_0_Template, 5, 3, "div", 47);
+} if (rf & 2) {
+    const comp_r12 = ctx.$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(4);
+    i0.ɵɵconditional(!ctx_r0.IsMultiTable || !comp_r12.table || comp_r12.table === (ctx_r0.ActiveTable == null ? null : ctx_r0.ActiveTable.name) ? 0 : -1);
+} }
 function DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_17_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 14);
-    i0.ɵɵelement(1, "mj-loading", 41);
+    i0.ɵɵrepeaterCreate(1, DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_17_For_2_Template, 1, 1, null, null, _forTrack0);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r0.spec.computations);
+} }
+function DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 16);
+    i0.ɵɵelement(1, "mj-loading", 50);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
     i0.ɵɵproperty("text", ctx_r0.SavingMessage);
 } }
-function DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-loading", 15);
+function DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_20_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-loading", 17);
 } }
-function DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_19_Template(rf, ctx) { if (rf & 1) {
-    const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 42);
-    i0.ɵɵelement(1, "i", 43);
+function DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+    const _r13 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 51);
+    i0.ɵɵelement(1, "i", 52);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 44);
+    i0.ɵɵelementStart(4, "span", 53);
     i0.ɵɵtext(5, "(Showing cached data)");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "mj-query-data-grid", 45);
-    i0.ɵɵlistener("EntityLinkClick", function DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_19_Template_mj_query_data_grid_EntityLinkClick_6_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnEntityLinkClick($event)); })("PageChange", function DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_19_Template_mj_query_data_grid_PageChange_6_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnPageChange($event)); });
+    i0.ɵɵelementStart(6, "mj-query-data-grid", 54);
+    i0.ɵɵlistener("EntityLinkClick", function DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_21_Template_mj_query_data_grid_EntityLinkClick_6_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnEntityLinkClick($event)); })("PageChange", function DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_21_Template_mj_query_data_grid_PageChange_6_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnPageChange($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
@@ -200,9 +271,9 @@ function DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_19_
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("ColumnConfigs", ctx_r0.GridColumnConfigs)("Data", ctx_r0.GridData)("TotalRowCount", ctx_r0.PagerTotalRowCount)("PageNumber", ctx_r0.PagerPageNumber)("PageSize", ctx_r0.PagerPageSize)("ShowToolbar", false)("ShowRefresh", false)("PersistState", false)("SelectionMode", "none");
 } }
-function DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_20_Template(rf, ctx) { if (rf & 1) {
+function DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_22_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1);
-    i0.ɵɵelement(1, "i", 43);
+    i0.ɵɵelement(1, "i", 52);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
@@ -211,10 +282,10 @@ function DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_20_
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(ctx_r0.ErrorMessage);
 } }
-function DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_21_Template(rf, ctx) { if (rf & 1) {
-    const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-query-data-grid", 45);
-    i0.ɵɵlistener("EntityLinkClick", function DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_21_Template_mj_query_data_grid_EntityLinkClick_0_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnEntityLinkClick($event)); })("PageChange", function DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_21_Template_mj_query_data_grid_PageChange_0_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnPageChange($event)); });
+function DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_23_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-query-data-grid", 54);
+    i0.ɵɵlistener("EntityLinkClick", function DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_23_Template_mj_query_data_grid_EntityLinkClick_0_listener($event) { i0.ɵɵrestoreView(_r14); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnEntityLinkClick($event)); })("PageChange", function DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_23_Template_mj_query_data_grid_PageChange_0_listener($event) { i0.ɵɵrestoreView(_r14); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnPageChange($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
@@ -234,9 +305,11 @@ function DataArtifactViewerComponent_Conditional_1_Conditional_0_Template(rf, ct
     i0.ɵɵconditionalCreate(9, DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_9_Template, 3, 3, "button", 11);
     i0.ɵɵconditionalCreate(10, DataArtifactViewerComponent_Conditional_1_Conditional_0_Case_10_Template, 3, 0, "button", 12)(11, DataArtifactViewerComponent_Conditional_1_Conditional_0_Case_11_Template, 6, 1)(12, DataArtifactViewerComponent_Conditional_1_Conditional_0_Case_12_Template, 9, 2)(13, DataArtifactViewerComponent_Conditional_1_Conditional_0_Case_13_Template, 6, 1)(14, DataArtifactViewerComponent_Conditional_1_Conditional_0_Case_14_Template, 6, 1)(15, DataArtifactViewerComponent_Conditional_1_Conditional_0_Case_15_Template, 0, 0);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(16, "div", 13);
-    i0.ɵɵconditionalCreate(17, DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_17_Template, 2, 1, "div", 14);
-    i0.ɵɵconditionalCreate(18, DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_18_Template, 1, 0, "mj-loading", 15)(19, DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_19_Template, 7, 10)(20, DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_20_Template, 4, 1, "div", 1)(21, DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_21_Template, 1, 9, "mj-query-data-grid", 16);
+    i0.ɵɵconditionalCreate(16, DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_16_Template, 3, 0, "div", 13);
+    i0.ɵɵconditionalCreate(17, DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_17_Template, 3, 0, "div", 14);
+    i0.ɵɵelementStart(18, "div", 15);
+    i0.ɵɵconditionalCreate(19, DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_19_Template, 2, 1, "div", 16);
+    i0.ɵɵconditionalCreate(20, DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_20_Template, 1, 0, "mj-loading", 17)(21, DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_21_Template, 7, 10)(22, DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_22_Template, 4, 1, "div", 1)(23, DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_23_Template, 1, 9, "mj-query-data-grid", 18);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     let tmp_7_0;
@@ -253,19 +326,23 @@ function DataArtifactViewerComponent_Conditional_1_Conditional_0_Template(rf, ct
     i0.ɵɵconditional(ctx_r0.IsLive ? 9 : -1);
     i0.ɵɵadvance();
     i0.ɵɵconditional((tmp_7_0 = ctx_r0.QuerySyncState) === "no-query-latest" ? 10 : tmp_7_0 === "synced" ? 11 : tmp_7_0 === "outdated-latest" ? 12 : tmp_7_0 === "query-ahead" ? 13 : tmp_7_0 === "query-behind" ? 14 : tmp_7_0 === "no-query-older" ? 15 : -1);
-    i0.ɵɵadvance(7);
-    i0.ɵɵconditional(ctx_r0.IsSaving ? 17 : -1);
+    i0.ɵɵadvance(6);
+    i0.ɵɵconditional(ctx_r0.IsMultiTable ? 16 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((ctx_r0.spec.computations == null ? null : ctx_r0.spec.computations.length) ? 17 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r0.IsSaving ? 19 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.IsLoading ? 18 : ctx_r0.HasError && ctx_r0.HasData ? 19 : ctx_r0.HasError ? 20 : 21);
+    i0.ɵɵconditional(ctx_r0.IsLoading ? 20 : ctx_r0.HasError && ctx_r0.HasData ? 21 : ctx_r0.HasError ? 22 : 23);
 } }
 function DataArtifactViewerComponent_Conditional_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 4)(1, "div", 5);
-    i0.ɵɵelement(2, "i", 46);
+    i0.ɵɵelement(2, "i", 55);
     i0.ɵɵelementStart(3, "span");
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(5, "div", 47);
-    i0.ɵɵelement(6, "mj-markdown", 48);
+    i0.ɵɵelementStart(5, "div", 56);
+    i0.ɵɵelement(6, "mj-markdown", 57);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
@@ -276,20 +353,20 @@ function DataArtifactViewerComponent_Conditional_1_Conditional_1_Template(rf, ct
 } }
 function DataArtifactViewerComponent_Conditional_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 2);
-    i0.ɵɵelement(1, "i", 49);
+    i0.ɵɵelement(1, "i", 58);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3, "No data to display");
     i0.ɵɵelementEnd()();
 } }
 function DataArtifactViewerComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, DataArtifactViewerComponent_Conditional_1_Conditional_0_Template, 22, 8)(1, DataArtifactViewerComponent_Conditional_1_Conditional_1_Template, 7, 6)(2, DataArtifactViewerComponent_Conditional_1_Conditional_2_Template, 4, 0, "div", 2);
+    i0.ɵɵconditionalCreate(0, DataArtifactViewerComponent_Conditional_1_Conditional_0_Template, 24, 10)(1, DataArtifactViewerComponent_Conditional_1_Conditional_1_Template, 7, 6)(2, DataArtifactViewerComponent_Conditional_1_Conditional_2_Template, 4, 0, "div", 2);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵconditional(ctx_r0.HasData || ctx_r0.IsLoading ? 0 : ctx_r0.spec.plan ? 1 : 2);
+    i0.ɵɵconditional(ctx_r0.HasData || ctx_r0.IsLoading || ctx_r0.ResolvedTables.length > 0 ? 0 : ctx_r0.spec.plan ? 1 : 2);
 } }
 function DataArtifactViewerComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1);
-    i0.ɵɵelement(1, "i", 43);
+    i0.ɵɵelement(1, "i", 52);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
@@ -300,15 +377,15 @@ function DataArtifactViewerComponent_Conditional_2_Template(rf, ctx) { if (rf &
 } }
 function DataArtifactViewerComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 2);
-    i0.ɵɵelement(1, "i", 49);
+    i0.ɵɵelement(1, "i", 58);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3, "No data to display");
     i0.ɵɵelementEnd()();
 } }
 function DataArtifactViewerComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-save-query-panel", 50);
-    i0.ɵɵlistener("Saved", function DataArtifactViewerComponent_Conditional_4_Template_mj_save_query_panel_Saved_0_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnQuerySaved($event)); })("Cancelled", function DataArtifactViewerComponent_Conditional_4_Template_mj_save_query_panel_Cancelled_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.ShowSaveDialog = false); });
+    const _r15 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-save-query-panel", 59);
+    i0.ɵɵlistener("Saved", function DataArtifactViewerComponent_Conditional_4_Template_mj_save_query_panel_Saved_0_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnQuerySaved($event)); })("Cancelled", function DataArtifactViewerComponent_Conditional_4_Template_mj_save_query_panel_Cancelled_0_listener() { i0.ɵɵrestoreView(_r15); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.ShowSaveDialog = false); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -344,6 +421,25 @@ let DataArtifactViewerComponent = class DataArtifactViewerComponent extends Base
     PagerTotalRowCount = 0;
     PagerPageNumber = 1;
     PagerPageSize = 100;
+    // ─── Multi-Table State ───
+    /** All resolved tables (from multi-table or wrapped single-table) */
+    ResolvedTables = [];
+    /** Index of the currently active table tab */
+    ActiveTableIndex = 0;
+    /** Per-table paging state */
+    tablePageState = new Map();
+    /** Per-table live data cache (loaded lazily on tab switch) */
+    tableDataCache = new Map();
+    /** Per-table column configs cache */
+    tableColumnConfigsCache = new Map();
+    /** Whether we're in multi-table mode */
+    get IsMultiTable() {
+        return this.ResolvedTables.length > 1;
+    }
+    /** The currently active table */
+    get ActiveTable() {
+        return this.ResolvedTables[this.ActiveTableIndex] ?? null;
+    }
     /** Query sync state — drives the toolbar UI for saved query actions */
     QuerySyncState = 'no-query-latest';
     /** Latest version number for this artifact (from cache) */
@@ -358,7 +454,7 @@ let DataArtifactViewerComponent = class DataArtifactViewerComponent extends Base
         this.cdr = cdr;
     }
     get hasDisplayContent() {
-        return this.spec != null && (this.HasData || this.IsLoading);
+        return this.spec != null && (this.HasData || this.IsLoading || this.ResolvedTables.length > 0);
     }
     get parentShouldShowRawContent() {
         return true;
@@ -367,7 +463,9 @@ let DataArtifactViewerComponent = class DataArtifactViewerComponent extends Base
         return this.GridData.length > 0;
     }
     get HasInlineData() {
-        return !!(this.spec?.rows && this.spec.rows.length > 0);
+        // Check root-level rows (legacy single-table) or any resolved table with rows
+        return !!(this.spec?.rows && this.spec.rows.length > 0) ||
+            this.ResolvedTables.some(t => t.rows && t.rows.length > 0);
     }
     get DisplayRowCount() {
         return this.liveRowCount ?? this.spec?.metadata?.rowCount ?? null;
@@ -407,24 +505,28 @@ let DataArtifactViewerComponent = class DataArtifactViewerComponent extends Base
                 this.ErrorMessage = 'Failed to parse data artifact content';
                 return;
             }
-            // Build enriched column configs from agent metadata (if available)
-            this.GridColumnConfigs = this.BuildColumnConfigs();
-            // Set loading early (synchronously) so hasDisplayContent is true immediately.
-            // This ensures the Display tab is available when onPluginLoaded fires,
-            // showing a loading indicator instead of briefly flashing the Plan tab.
-            if (this.spec.metadata?.sql || this.HasInlineData) {
+            // Resolve to tables array (handles both single and multi-table)
+            this.ResolvedTables = NormalizeToTables(this.spec, this.spec.title || 'Results');
+            if (this.ResolvedTables.length === 0 && !this.spec.plan) {
+                return;
+            }
+            // Build enriched column configs for the first table
+            if (this.ResolvedTables.length > 0) {
+                this.GridColumnConfigs = this.BuildColumnConfigsForTable(this.ResolvedTables[0]);
+            }
+            // Initialize paging state for all tables
+            for (let i = 0; i < this.ResolvedTables.length; i++) {
+                this.tablePageState.set(i, { pageNumber: 1, pageSize: 100, totalRowCount: 0 });
+            }
+            // Set loading early (synchronously) so hasDisplayContent is true immediately
+            if (this.ResolvedTables.some(t => t.metadata?.sql) || this.HasInlineData) {
                 this.IsLoading = true;
             }
             // Load cached metadata and resolve query sync state
             await this.InitQuerySyncState();
-            // If SQL is available, execute it live
-            if (this.spec.metadata?.sql) {
-                await this.LoadLiveData();
-            }
-            else if (this.HasInlineData) {
-                // Fall back to embedded rows
-                this.GridData = this.spec.rows;
-                this.IsLoading = false;
+            // Load data for the first (active) table
+            if (this.ResolvedTables.length > 0) {
+                await this.LoadTableData(0);
             }
             // Signal parent that tabs/display content may have changed after async load
             this.tabsChanged.emit();
@@ -435,12 +537,11 @@ let DataArtifactViewerComponent = class DataArtifactViewerComponent extends Base
         }
     }
     /**
-     * Re-execute the live SQL query
+     * Re-execute the live SQL query for the active table
      */
     async OnRefresh() {
-        if (this.spec?.metadata?.sql) {
-            await this.LoadLiveData();
-        }
+        this.tableDataCache.delete(this.ActiveTableIndex);
+        await this.LoadTableData(this.ActiveTableIndex);
     }
     /**
      * Handle entity link click from the grid and bubble up as openEntityRecord.
@@ -460,53 +561,98 @@ let DataArtifactViewerComponent = class DataArtifactViewerComponent extends Base
     }
     /**
      * Handle page change from the data grid's embedded pager.
-     * Re-executes the live SQL with the new page parameters.
+     * Re-executes the query for the active table with new page parameters.
      */
     async OnPageChange(event) {
-        if (!this.spec?.metadata?.sql)
+        const pageState = this.tablePageState.get(this.ActiveTableIndex);
+        if (!pageState)
+            return;
+        pageState.pageNumber = event.PageNumber;
+        pageState.pageSize = event.PageSize;
+        // Clear cache so it reloads
+        this.tableDataCache.delete(this.ActiveTableIndex);
+        await this.LoadTableData(this.ActiveTableIndex);
+    }
+    /**
+     * Switch to a different table tab.
+     * Loads data lazily if not already cached.
+     */
+    async OnTableTabClick(index) {
+        if (index === this.ActiveTableIndex)
             return;
-        this.PagerPageNumber = event.PageNumber;
-        this.PagerPageSize = event.PageSize;
-        await this.LoadLiveData();
+        this.ActiveTableIndex = index;
+        const table = this.ResolvedTables[index];
+        if (!table)
+            return;
+        // Use cached column configs or build new
+        if (!this.tableColumnConfigsCache.has(index)) {
+            const configs = this.BuildColumnConfigsForTable(table);
+            if (configs)
+                this.tableColumnConfigsCache.set(index, configs);
+        }
+        this.GridColumnConfigs = this.tableColumnConfigsCache.get(index) ?? null;
+        // Use cached data or load fresh
+        if (this.tableDataCache.has(index)) {
+            this.GridData = this.tableDataCache.get(index);
+            const pageState = this.tablePageState.get(index);
+            this.PagerPageNumber = pageState.pageNumber;
+            this.PagerPageSize = pageState.pageSize;
+            this.PagerTotalRowCount = pageState.totalRowCount;
+        }
+        else {
+            await this.LoadTableData(index);
+        }
+        this.cdr.detectChanges();
     }
     /**
-     * Execute the SQL query via RunQuery and populate the grid.
-     * Falls back to inline data on error.
+     * Load data for a specific table.
+     * Handles live SQL execution, inline rows, and caching.
      */
-    async LoadLiveData() {
+    async LoadTableData(tableIndex) {
+        const table = this.ResolvedTables[tableIndex];
+        if (!table)
+            return;
         this.IsLoading = true;
         this.HasError = false;
         this.cdr.detectChanges();
         try {
-            const rq = new RunQuery();
-            const startRow = (this.PagerPageNumber - 1) * this.PagerPageSize;
-            const result = await rq.RunQuery({
-                SQL: this.spec.metadata.sql,
-                StartRow: startRow,
-                MaxRows: this.PagerPageSize
-            });
-            if (result.Success) {
-                this.GridData = result.Results;
-                this.liveRowCount = result.RowCount;
-                this.liveExecutionTime = result.ExecutionTime;
-                this.IsLive = true;
-                // Update pager state from result
-                if (result.TotalRowCount != null) {
-                    this.PagerTotalRowCount = result.TotalRowCount;
-                }
-                if (result.PageNumber != null) {
-                    this.PagerPageNumber = result.PageNumber;
+            if (table.metadata?.sql) {
+                // Live SQL execution
+                const pageState = this.tablePageState.get(tableIndex);
+                const rq = new RunQuery();
+                const startRow = (pageState.pageNumber - 1) * pageState.pageSize;
+                const result = await rq.RunQuery({
+                    SQL: table.metadata.sql,
+                    StartRow: startRow,
+                    MaxRows: pageState.pageSize
+                });
+                if (result.Success) {
+                    this.tableDataCache.set(tableIndex, result.Results);
+                    this.GridData = result.Results;
+                    this.IsLive = true;
+                    pageState.totalRowCount = result.TotalRowCount ?? result.RowCount ?? 0;
+                    this.PagerTotalRowCount = pageState.totalRowCount;
+                    this.PagerPageNumber = pageState.pageNumber;
+                    this.PagerPageSize = pageState.pageSize;
+                    this.liveRowCount = result.RowCount;
+                    this.liveExecutionTime = result.ExecutionTime;
                 }
-                if (result.PageSize != null) {
-                    this.PagerPageSize = result.PageSize;
+                else {
+                    this.HandleTableError(tableIndex, result.ErrorMessage || 'Query failed');
                 }
             }
+            else if (table.rows && table.rows.length > 0) {
+                // Inline data
+                this.tableDataCache.set(tableIndex, table.rows);
+                this.GridData = table.rows;
+                this.liveRowCount = table.rows.length;
+            }
             else {
-                this.HandleQueryError(result.ErrorMessage || 'Query execution failed');
+                this.GridData = [];
             }
         }
         catch (error) {
-            this.HandleQueryError(error instanceof Error ? error.message : 'Query execution failed');
+            this.HandleTableError(tableIndex, error instanceof Error ? error.message : 'Load failed');
         }
         finally {
             this.IsLoading = false;
@@ -514,18 +660,19 @@ let DataArtifactViewerComponent = class DataArtifactViewerComponent extends Base
         }
     }
     /**
-     * Build QueryGridColumnConfig[] from enriched artifact column metadata.
+     * Build QueryGridColumnConfig[] from a DataTable's column metadata.
      * Returns null if columns have no entity metadata (grid falls back to auto-inference).
      */
-    BuildColumnConfigs() {
-        if (!this.spec?.columns?.length)
+    BuildColumnConfigsForTable(table) {
+        const columns = table.columns;
+        if (!columns?.length)
             return null;
         // Only build if at least one column has entity metadata or type info
-        const hasMetadata = this.spec.columns.some(c => c.sourceEntity || c.sqlBaseType);
+        const hasMetadata = columns.some(c => c.sourceEntity || c.sqlBaseType);
         if (!hasMetadata)
             return null;
         const md = new Metadata();
-        return this.spec.columns.map((col, index) => {
+        return columns.map((col, index) => {
             const target = resolveTargetEntity(col.sourceEntity, col.sourceFieldName, md);
             const isEntityLink = !!(target.targetEntityName && (target.isPrimaryKey || target.isForeignKey));
             const baseType = (col.sqlBaseType || 'nvarchar').toLowerCase();
@@ -536,15 +683,18 @@ let DataArtifactViewerComponent = class DataArtifactViewerComponent extends Base
             else if (baseType === 'bit') {
                 align = 'center';
             }
+            // Support both displayName (new) and headerName (legacy) for backward compat
+            const colAny = col;
+            const title = col.displayName || colAny['headerName'] || col.field;
             return {
                 field: col.field,
-                title: col.headerName || col.field,
+                title,
                 visible: true,
                 sortable: true,
                 resizable: true,
                 reorderable: true,
                 sqlBaseType: col.sqlBaseType || 'nvarchar',
-                sqlFullType: col.sqlBaseType || 'nvarchar',
+                sqlFullType: col.sqlFullType || col.sqlBaseType || 'nvarchar',
                 align,
                 order: index,
                 sourceEntityName: col.sourceEntity,
@@ -560,13 +710,14 @@ let DataArtifactViewerComponent = class DataArtifactViewerComponent extends Base
         });
     }
     /**
-     * Handle a query error by setting error state and falling back to inline data
+     * Handle a table load error by setting error state and falling back to inline data
      */
-    HandleQueryError(message) {
+    HandleTableError(tableIndex, message) {
         this.HasError = true;
         this.ErrorMessage = message;
-        if (this.HasInlineData) {
-            this.GridData = this.spec.rows;
+        const table = this.ResolvedTables[tableIndex];
+        if (table?.rows && table.rows.length > 0) {
+            this.GridData = table.rows;
         }
     }
     // ─── Query Sync State ────────────────────────────────────────────
@@ -807,9 +958,35 @@ let DataArtifactViewerComponent = class DataArtifactViewerComponent extends Base
         this.artifactVersion.Content = JSON.stringify(this.spec);
         await this.artifactVersion.Save();
     }
+    /**
+     * Returns a DataSnapshot with live grid data, current page state,
+     * and query sync state.
+     */
+    GetCurrentStateSnapshot() {
+        if (!this.spec)
+            return null;
+        const tables = NormalizeToTables(this.spec, this.spec.title || 'Results');
+        const activeTable = tables[this.ActiveTableIndex];
+        if (activeTable) {
+            // Override with live data for the active table
+            if (this.IsLive)
+                activeTable.rows = this.GridData;
+            activeTable.pageNumber = this.PagerPageNumber;
+            activeTable.metadata = {
+                ...activeTable.metadata,
+                ...(this.liveRowCount != null ? { rowCount: this.liveRowCount } : {}),
+                ...(this.liveExecutionTime != null
+                    ? { executionTimeMs: this.liveExecutionTime } : {}),
+                ...(this.PagerTotalRowCount > 0
+                    ? { totalAvailableRows: this.PagerTotalRowCount } : {}),
+                pageSize: this.PagerPageSize
+            };
+        }
+        return DataSnapshot.FromTables(tables, this.spec.title);
+    }
     // ─── Tabs ───────────────────────────────────────────────────────
     /**
-     * Provide Plan tab (markdown) and SQL tab (code) when available
+     * Provide Plan tab (markdown), SQL tab (code), and Interpretation tab when available
      */
     GetAdditionalTabs() {
         const tabs = [];
@@ -821,7 +998,20 @@ let DataArtifactViewerComponent = class DataArtifactViewerComponent extends Base
                 content: this.spec.plan
             });
         }
-        if (this.spec?.metadata?.sql) {
+        // SQL tab — multi-table shows all queries with headers
+        if (this.IsMultiTable) {
+            const multiSql = buildMultiTableSql(this.ResolvedTables);
+            if (multiSql) {
+                tabs.push({
+                    label: 'SQL',
+                    icon: 'fa-database',
+                    contentType: 'code',
+                    language: 'sql',
+                    content: multiSql
+                });
+            }
+        }
+        else if (this.spec?.metadata?.sql) {
             tabs.push({
                 label: 'SQL',
                 icon: 'fa-database',
@@ -830,10 +1020,19 @@ let DataArtifactViewerComponent = class DataArtifactViewerComponent extends Base
                 content: this.spec.metadata.sql
             });
         }
+        // Interpretation tab
+        if (this.spec?.interpretation) {
+            tabs.push({
+                label: 'Interpretation',
+                icon: 'fa-lightbulb',
+                contentType: 'markdown',
+                content: this.spec.interpretation
+            });
+        }
         return tabs;
     }
     static ɵfac = function DataArtifactViewerComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || DataArtifactViewerComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DataArtifactViewerComponent, selectors: [["mj-data-artifact-viewer"]], outputs: { openEntityRecord: "openEntityRecord", navigationRequest: "navigationRequest" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 5, vars: 3, consts: [[1, "data-artifact-viewer", 3, "ngClass"], [1, "error-state"], [1, "empty-state"], [3, "QueryName", "QueryDescription", "SQL", "Plan"], [1, "data-toolbar"], [1, "data-title"], [1, "fas", "fa-table"], [1, "live-badge"], [1, "row-count"], [1, "exec-time"], [1, "data-actions"], ["title", "Refresh data", 1, "btn-icon", 3, "disabled"], ["title", "Save as reusable query", 1, "btn-icon", "btn-save"], [1, "grid-container"], [1, "saving-overlay"], ["text", "Loading data..."], ["Height", "100%", 3, "ColumnConfigs", "Data", "TotalRowCount", "PageNumber", "PageSize", "ShowToolbar", "ShowRefresh", "PersistState", "SelectionMode"], ["title", "Refresh data", 1, "btn-icon", 3, "click", "disabled"], [1, "fas", "fa-sync-alt"], ["title", "Save as reusable query", 1, "btn-icon", "btn-save", 3, "click"], [1, "fas", "fa-save"], [1, "query-badge", "query-badge-synced"], [1, "fas", "fa-check"], ["title", "Open saved query record", 1, "btn-icon", "btn-open", 3, "click"], [1, "fas", "fa-external-link-alt"], [1, "query-badge", "query-badge-outdated"], [1, "fas", "fa-circle-exclamation"], [1, "dropdown-wrapper"], ["title", "Update or save query", 1, "btn-icon", "btn-warning", 3, "click"], [1, "fas", "fa-caret-down"], [1, "query-dropdown"], [1, "query-dropdown", 3, "click"], [1, "query-dropdown-item", 3, "click"], [1, "fas", "fa-arrow-up-from-bracket", 2, "color", "#d97706"], [1, "dropdown-label"], [1, "dropdown-desc"], [1, "fas", "fa-plus", 2, "color", "#16a34a"], [1, "fas", "fa-external-link-alt", 2, "color", "var(--mj-text-muted)"], [1, "query-badge", "query-badge-muted"], [1, "fas", "fa-clock-rotate-left"], ["title", "Open saved query record", 1, "btn-icon", "btn-muted", 3, "click"], [3, "text"], [1, "error-banner"], [1, "fas", "fa-exclamation-triangle"], [1, "fallback-note"], ["Height", "100%", 3, "EntityLinkClick", "PageChange", "ColumnConfigs", "Data", "TotalRowCount", "PageNumber", "PageSize", "ShowToolbar", "ShowRefresh", "PersistState", "SelectionMode"], [1, "fas", "fa-diagram-project"], [1, "plan-content"], [3, "data", "enableMermaid", "enableHighlight", "enableCollapsibleHeadings", "enableSmartypants"], [1, "fas", "fa-inbox"], [3, "Saved", "Cancelled", "QueryName", "QueryDescription", "SQL", "Plan"]], template: function DataArtifactViewerComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DataArtifactViewerComponent, selectors: [["mj-data-artifact-viewer"]], outputs: { openEntityRecord: "openEntityRecord", navigationRequest: "navigationRequest" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 5, vars: 3, consts: [[1, "data-artifact-viewer", 3, "ngClass"], [1, "error-state"], [1, "empty-state"], [3, "QueryName", "QueryDescription", "SQL", "Plan"], [1, "data-toolbar"], [1, "data-title"], [1, "fas", "fa-table"], [1, "live-badge"], [1, "row-count"], [1, "exec-time"], [1, "data-actions"], ["title", "Refresh data", 1, "btn-icon", 3, "disabled"], ["title", "Save as reusable query", 1, "btn-icon", "btn-save"], [1, "table-tabs"], [1, "computations-bar"], [1, "grid-container"], [1, "saving-overlay"], ["text", "Loading data..."], ["Height", "100%", 3, "ColumnConfigs", "Data", "TotalRowCount", "PageNumber", "PageSize", "ShowToolbar", "ShowRefresh", "PersistState", "SelectionMode"], ["title", "Refresh data", 1, "btn-icon", 3, "click", "disabled"], [1, "fas", "fa-sync-alt"], ["title", "Save as reusable query", 1, "btn-icon", "btn-save", 3, "click"], [1, "fas", "fa-save"], [1, "query-badge", "query-badge-synced"], [1, "fas", "fa-check"], ["title", "Open saved query record", 1, "btn-icon", "btn-open", 3, "click"], [1, "fas", "fa-external-link-alt"], [1, "query-badge", "query-badge-outdated"], [1, "fas", "fa-circle-exclamation"], [1, "dropdown-wrapper"], ["title", "Update or save query", 1, "btn-icon", "btn-warning", 3, "click"], [1, "fas", "fa-caret-down"], [1, "query-dropdown"], [1, "query-dropdown", 3, "click"], [1, "query-dropdown-item", 3, "click"], [1, "fas", "fa-arrow-up-from-bracket", 2, "color", "#d97706"], [1, "dropdown-label"], [1, "dropdown-desc"], [1, "fas", "fa-plus", 2, "color", "#16a34a"], [1, "fas", "fa-external-link-alt", 2, "color", "var(--mj-text-muted)"], [1, "query-badge", "query-badge-muted"], [1, "fas", "fa-clock-rotate-left"], ["title", "Open saved query record", 1, "btn-icon", "btn-muted", 3, "click"], [1, "table-tab", 3, "active", "title"], [1, "table-tab", 3, "click", "title"], [1, "table-tab-name"], [1, "table-tab-count"], [1, "computation-chip", 3, "title"], [1, "computation-label"], [1, "computation-value"], [3, "text"], [1, "error-banner"], [1, "fas", "fa-exclamation-triangle"], [1, "fallback-note"], ["Height", "100%", 3, "EntityLinkClick", "PageChange", "ColumnConfigs", "Data", "TotalRowCount", "PageNumber", "PageSize", "ShowToolbar", "ShowRefresh", "PersistState", "SelectionMode"], [1, "fas", "fa-diagram-project"], [1, "plan-content"], [3, "data", "enableMermaid", "enableHighlight", "enableCollapsibleHeadings", "enableSmartypants"], [1, "fas", "fa-inbox"], [3, "Saved", "Cancelled", "QueryName", "QueryDescription", "SQL", "Plan"]], template: function DataArtifactViewerComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵconditionalCreate(1, DataArtifactViewerComponent_Conditional_1_Template, 3, 1)(2, DataArtifactViewerComponent_Conditional_2_Template, 4, 1, "div", 1)(3, DataArtifactViewerComponent_Conditional_3_Template, 4, 0, "div", 2);
             i0.ɵɵconditionalCreate(4, DataArtifactViewerComponent_Conditional_4_Template, 1, 4, "mj-save-query-panel", 3);
@@ -844,7 +1043,7 @@ let DataArtifactViewerComponent = class DataArtifactViewerComponent extends Base
             i0.ɵɵconditional(ctx.spec ? 1 : ctx.HasError ? 2 : 3);
             i0.ɵɵadvance(3);
             i0.ɵɵconditional(ctx.ShowSaveDialog ? 4 : -1);
-        } }, dependencies: [i1.NgClass, i2.MarkdownComponent, i3.QueryDataGridComponent, i4.LoadingComponent, i5.SaveQueryPanelComponent], styles: [".data-artifact-viewer[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n}\n\n.data-toolbar[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 8px 12px;\n  background: var(--mj-bg-surface-sunken);\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.data-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-weight: 600;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n}\n\n.data-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n}\n\n.row-count[_ngcontent-%COMP%] {\n  padding: 2px 8px;\n  background: var(--mj-border-default);\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n}\n\n.exec-time[_ngcontent-%COMP%] {\n  padding: 2px 8px;\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 500;\n  color: var(--mj-status-success);\n}\n\n.live-badge[_ngcontent-%COMP%] {\n  padding: 2px 8px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-brand-primary);\n}\n\n.data-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 6px;\n}\n\n.btn-icon[_ngcontent-%COMP%] {\n  padding: 4px 10px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 11px;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  color: var(--mj-text-secondary);\n}\n\n.btn-icon[_ngcontent-%COMP%]:hover {\n  background: var(--mj-border-default);\n  border-color: var(--mj-text-disabled);\n}\n\n.btn-icon[_ngcontent-%COMP%]:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.btn-icon.btn-save[_ngcontent-%COMP%] {\n  color: var(--mj-status-success);\n  border-color: color-mix(in srgb, var(--mj-status-success) 30%, var(--mj-bg-surface));\n}\n\n.btn-icon.btn-save[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-status-success) 8%, var(--mj-bg-surface));\n  border-color: var(--mj-status-success);\n}\n\n.btn-icon.btn-open[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-bg-surface));\n}\n\n.btn-icon.btn-open[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  border-color: var(--mj-brand-primary);\n}\n\n.grid-container[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: hidden;\n  min-height: 200px;\n  height: 500px;\n  position: relative;\n}\n\n\n\n.saving-overlay[_ngcontent-%COMP%] {\n  position: absolute;\n  inset: 0;\n  background: color-mix(in srgb, var(--mj-bg-surface) 80%, transparent);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 50;\n}\n\n.error-banner[_ngcontent-%COMP%] {\n  padding: 8px 12px;\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  border-bottom: 1px solid var(--mj-status-warning);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 12px;\n  color: var(--mj-status-warning);\n}\n\n.fallback-note[_ngcontent-%COMP%] {\n  font-style: italic;\n  color: var(--mj-text-muted);\n}\n\n.empty-state[_ngcontent-%COMP%], .error-state[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 200px;\n  color: var(--mj-text-muted);\n  text-align: center;\n  gap: 12px;\n}\n\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], .error-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 32px;\n}\n\n.error-state[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n\n.plan-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: auto;\n  padding: 16px;\n}\n\n\n\n.query-badge[_ngcontent-%COMP%] {\n  padding: 2px 8px;\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 600;\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  white-space: nowrap;\n}\n\n.query-badge-synced[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n.query-badge-outdated[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.query-badge-muted[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-disabled);\n}\n\n\n\n.dropdown-wrapper[_ngcontent-%COMP%] {\n  position: relative;\n}\n\n.btn-icon.btn-warning[_ngcontent-%COMP%] {\n  color: var(--mj-status-warning);\n  border-color: color-mix(in srgb, var(--mj-status-warning) 30%, var(--mj-bg-surface));\n}\n\n.btn-icon.btn-warning[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-status-warning) 8%, var(--mj-bg-surface));\n  border-color: var(--mj-status-warning);\n}\n\n.btn-icon.btn-muted[_ngcontent-%COMP%] {\n  color: var(--mj-text-disabled);\n  border-color: var(--mj-border-default);\n}\n\n\n\n.query-dropdown[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 100%;\n  right: 0;\n  margin-top: 4px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  box-shadow: var(--mj-shadow-md);\n  overflow: hidden;\n  min-width: 280px;\n  z-index: 100;\n}\n\n.query-dropdown-item[_ngcontent-%COMP%] {\n  padding: 10px 14px;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  font-size: 12px;\n  cursor: pointer;\n  border-bottom: 1px solid var(--mj-border-default);\n  transition: background 0.1s;\n}\n\n.query-dropdown-item[_ngcontent-%COMP%]:last-child {\n  border-bottom: none;\n}\n\n.query-dropdown-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.query-dropdown-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  width: 16px;\n  text-align: center;\n  flex-shrink: 0;\n}\n\n.dropdown-label[_ngcontent-%COMP%] {\n  font-weight: 500;\n}\n\n.dropdown-desc[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  margin-top: 2px;\n}"] });
+        } }, dependencies: [i1.NgClass, i2.MarkdownComponent, i3.QueryDataGridComponent, i4.LoadingComponent, i5.SaveQueryPanelComponent], styles: [".data-artifact-viewer[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n}\n\n.data-toolbar[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 8px 12px;\n  background: var(--mj-bg-surface-sunken);\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.data-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-weight: 600;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n}\n\n.data-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n}\n\n.row-count[_ngcontent-%COMP%] {\n  padding: 2px 8px;\n  background: var(--mj-border-default);\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n}\n\n.exec-time[_ngcontent-%COMP%] {\n  padding: 2px 8px;\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 500;\n  color: var(--mj-status-success);\n}\n\n.live-badge[_ngcontent-%COMP%] {\n  padding: 2px 8px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-brand-primary);\n}\n\n.data-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 6px;\n}\n\n.btn-icon[_ngcontent-%COMP%] {\n  padding: 4px 10px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 11px;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  color: var(--mj-text-secondary);\n}\n\n.btn-icon[_ngcontent-%COMP%]:hover {\n  background: var(--mj-border-default);\n  border-color: var(--mj-text-disabled);\n}\n\n.btn-icon[_ngcontent-%COMP%]:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.btn-icon.btn-save[_ngcontent-%COMP%] {\n  color: var(--mj-status-success);\n  border-color: color-mix(in srgb, var(--mj-status-success) 30%, var(--mj-bg-surface));\n}\n\n.btn-icon.btn-save[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-status-success) 8%, var(--mj-bg-surface));\n  border-color: var(--mj-status-success);\n}\n\n.btn-icon.btn-open[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-bg-surface));\n}\n\n.btn-icon.btn-open[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  border-color: var(--mj-brand-primary);\n}\n\n.grid-container[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: hidden;\n  min-height: 200px;\n  height: 500px;\n  position: relative;\n}\n\n\n\n.saving-overlay[_ngcontent-%COMP%] {\n  position: absolute;\n  inset: 0;\n  background: color-mix(in srgb, var(--mj-bg-surface) 80%, transparent);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 50;\n}\n\n.error-banner[_ngcontent-%COMP%] {\n  padding: 8px 12px;\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  border-bottom: 1px solid var(--mj-status-warning);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 12px;\n  color: var(--mj-status-warning);\n}\n\n.fallback-note[_ngcontent-%COMP%] {\n  font-style: italic;\n  color: var(--mj-text-muted);\n}\n\n.empty-state[_ngcontent-%COMP%], .error-state[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 200px;\n  color: var(--mj-text-muted);\n  text-align: center;\n  gap: 12px;\n}\n\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], .error-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 32px;\n}\n\n.error-state[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n\n.plan-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: auto;\n  padding: 16px;\n}\n\n\n\n.query-badge[_ngcontent-%COMP%] {\n  padding: 2px 8px;\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 600;\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  white-space: nowrap;\n}\n\n.query-badge-synced[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n.query-badge-outdated[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.query-badge-muted[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-disabled);\n}\n\n\n\n.dropdown-wrapper[_ngcontent-%COMP%] {\n  position: relative;\n}\n\n.btn-icon.btn-warning[_ngcontent-%COMP%] {\n  color: var(--mj-status-warning);\n  border-color: color-mix(in srgb, var(--mj-status-warning) 30%, var(--mj-bg-surface));\n}\n\n.btn-icon.btn-warning[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-status-warning) 8%, var(--mj-bg-surface));\n  border-color: var(--mj-status-warning);\n}\n\n.btn-icon.btn-muted[_ngcontent-%COMP%] {\n  color: var(--mj-text-disabled);\n  border-color: var(--mj-border-default);\n}\n\n\n\n.query-dropdown[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 100%;\n  right: 0;\n  margin-top: 4px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  box-shadow: var(--mj-shadow-md);\n  overflow: hidden;\n  min-width: 280px;\n  z-index: 100;\n}\n\n.query-dropdown-item[_ngcontent-%COMP%] {\n  padding: 10px 14px;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  font-size: 12px;\n  cursor: pointer;\n  border-bottom: 1px solid var(--mj-border-default);\n  transition: background 0.1s;\n}\n\n.query-dropdown-item[_ngcontent-%COMP%]:last-child {\n  border-bottom: none;\n}\n\n.query-dropdown-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.query-dropdown-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  width: 16px;\n  text-align: center;\n  flex-shrink: 0;\n}\n\n.dropdown-label[_ngcontent-%COMP%] {\n  font-weight: 500;\n}\n\n.dropdown-desc[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  margin-top: 2px;\n}\n\n\n\n\n.table-tabs[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 0;\n  border-bottom: 2px solid var(--mj-border-default);\n  padding: 0 var(--mj-spacing-md, 16px);\n  background: var(--mj-bg-surface);\n  overflow-x: auto;\n}\n\n.table-tab[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 16px;\n  border: none;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  border-bottom: 2px solid transparent;\n  margin-bottom: -2px;\n  transition: color 150ms ease, border-color 150ms ease;\n  white-space: nowrap;\n}\n\n.table-tab[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface-hover);\n}\n\n.table-tab.active[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.table-tab-name[_ngcontent-%COMP%] {\n  text-transform: capitalize;\n}\n\n.table-tab-count[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  font-weight: 400;\n  font-size: 12px;\n}\n\n.table-tab.active[_ngcontent-%COMP%]   .table-tab-count[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  opacity: 0.7;\n}\n\n\n\n\n.computations-bar[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 12px;\n  padding: 8px 16px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-subtle);\n  overflow-x: auto;\n  flex-wrap: wrap;\n}\n\n.computation-chip[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 12px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 16px;\n  font-size: 13px;\n  white-space: nowrap;\n}\n\n.computation-label[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n  font-weight: 400;\n}\n\n.computation-value[_ngcontent-%COMP%] {\n  color: var(--mj-text-primary);\n  font-weight: 600;\n}"] });
 };
 DataArtifactViewerComponent = __decorate([
     RegisterClass(BaseArtifactViewerPluginComponent, 'DataArtifactViewerPlugin')
@@ -852,11 +1051,11 @@ DataArtifactViewerComponent = __decorate([
 export { DataArtifactViewerComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DataArtifactViewerComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-data-artifact-viewer', template: "<div class=\"data-artifact-viewer\" [ngClass]=\"cssClass\">\n  @if (spec) {\n    @if (HasData || IsLoading) {\n      <!-- Toolbar -->\n      <div class=\"data-toolbar\">\n        <div class=\"data-title\">\n          <i class=\"fas fa-table\"></i>\n          <span>{{ spec.title || 'Data Results' }}</span>\n          @if (IsLive) {\n            <span class=\"live-badge\">Live</span>\n          }\n          @if (DisplayRowCount != null) {\n            <span class=\"row-count\">{{ DisplayRowCount }} rows</span>\n          }\n          @if (DisplayExecutionTime != null) {\n            <span class=\"exec-time\">{{ DisplayExecutionTime }}ms</span>\n          }\n        </div>\n        <div class=\"data-actions\">\n          @if (IsLive) {\n            <button class=\"btn-icon\" title=\"Refresh data\" (click)=\"OnRefresh()\" [disabled]=\"IsLoading\">\n              <i class=\"fas fa-sync-alt\" [class.fa-spin]=\"IsLoading\"></i> Refresh\n            </button>\n          }\n\n          @switch (QuerySyncState) {\n            <!-- S1: No saved query, latest version \u2192 Save Query -->\n            @case ('no-query-latest') {\n              <button class=\"btn-icon btn-save\" title=\"Save as reusable query\"\n                (click)=\"OnShowSaveDialog()\">\n                <i class=\"fas fa-save\"></i> Save Query\n              </button>\n            }\n\n            <!-- S2: SQL matches \u2192 green badge + Open -->\n            @case ('synced') {\n              <span class=\"query-badge query-badge-synced\">\n                <i class=\"fas fa-check\"></i> Saved at v{{ SavedAtVersion }}\n              </span>\n              <button class=\"btn-icon btn-open\" title=\"Open saved query record\"\n                (click)=\"OnOpenSavedQuery()\">\n                <i class=\"fas fa-external-link-alt\"></i> Open Query\n              </button>\n            }\n\n            <!-- S3: SQL differs, latest version \u2192 amber badge + dropdown -->\n            @case ('outdated-latest') {\n              <span class=\"query-badge query-badge-outdated\">\n                <i class=\"fas fa-circle-exclamation\"></i> Saved at v{{ SavedAtVersion }}\n              </span>\n              <div class=\"dropdown-wrapper\">\n                <button class=\"btn-icon btn-warning\" title=\"Update or save query\"\n                  (click)=\"OnToggleUpdateDropdown()\">\n                  <i class=\"fas fa-save\"></i> Update Query <i class=\"fas fa-caret-down\"></i>\n                </button>\n                @if (ShowUpdateDropdown) {\n                  <div class=\"query-dropdown\" (click)=\"$event.stopPropagation()\">\n                    <div class=\"query-dropdown-item\" (click)=\"OnUpdateExistingQuery()\">\n                      <i class=\"fas fa-arrow-up-from-bracket\" style=\"color:#d97706\"></i>\n                      <div>\n                        <div class=\"dropdown-label\">Update \"{{ SavedQueryDisplayName }}\"</div>\n                        <div class=\"dropdown-desc\">Replace saved query SQL with this version's SQL</div>\n                      </div>\n                    </div>\n                    <div class=\"query-dropdown-item\" (click)=\"OnSaveAsNewQuery()\">\n                      <i class=\"fas fa-plus\" style=\"color:#16a34a\"></i>\n                      <div>\n                        <div class=\"dropdown-label\">Save as New Query</div>\n                        <div class=\"dropdown-desc\">Create a new query, keep the original unchanged</div>\n                      </div>\n                    </div>\n                    <div class=\"query-dropdown-item\" (click)=\"OnOpenSavedQuery(); OnCloseDropdown()\">\n                      <i class=\"fas fa-external-link-alt\" style=\"color:var(--mj-text-muted)\"></i>\n                      <div>\n                        <div class=\"dropdown-label\">Open Saved Query</div>\n                        <div class=\"dropdown-desc\">View \"{{ SavedQueryDisplayName }}\" (saved at v{{ SavedAtVersion }})</div>\n                      </div>\n                    </div>\n                  </div>\n                }\n              </div>\n            }\n\n            <!-- S4: Older version, query was updated ahead -->\n            @case ('query-ahead') {\n              <span class=\"query-badge query-badge-muted\">\n                <i class=\"fas fa-clock-rotate-left\"></i> Query updated at v{{ SavedAtVersion }}\n              </span>\n              <button class=\"btn-icon btn-muted\" title=\"Open saved query record\"\n                (click)=\"OnOpenSavedQuery()\">\n                <i class=\"fas fa-external-link-alt\"></i> Open Query\n              </button>\n            }\n\n            <!-- S5: Middle version, saved at older, not latest -->\n            @case ('query-behind') {\n              <span class=\"query-badge query-badge-muted\">\n                <i class=\"fas fa-clock-rotate-left\"></i> Saved at v{{ SavedAtVersion }}\n              </span>\n              <button class=\"btn-icon btn-muted\" title=\"Open saved query record\"\n                (click)=\"OnOpenSavedQuery()\">\n                <i class=\"fas fa-external-link-alt\"></i> Open Query\n              </button>\n            }\n\n            <!-- S6: No saved query, older version \u2192 no actions -->\n            @case ('no-query-older') {\n              <!-- No query actions available on older versions -->\n            }\n          }\n        </div>\n      </div>\n\n      <!-- Grid -->\n      <div class=\"grid-container\">\n        <!-- Saving overlay -->\n        @if (IsSaving) {\n          <div class=\"saving-overlay\">\n            <mj-loading [text]=\"SavingMessage\"></mj-loading>\n          </div>\n        }\n        @if (IsLoading) {\n          <mj-loading text=\"Loading data...\"></mj-loading>\n        } @else if (HasError && HasData) {\n          <div class=\"error-banner\">\n            <i class=\"fas fa-exclamation-triangle\"></i>\n            <span>{{ ErrorMessage }}</span>\n            <span class=\"fallback-note\">(Showing cached data)</span>\n          </div>\n          <mj-query-data-grid\n            [ColumnConfigs]=\"GridColumnConfigs\"\n            [Data]=\"GridData\"\n            [TotalRowCount]=\"PagerTotalRowCount\"\n            [PageNumber]=\"PagerPageNumber\"\n            [PageSize]=\"PagerPageSize\"\n            [ShowToolbar]=\"false\"\n            [ShowRefresh]=\"false\"\n            [PersistState]=\"false\"\n            [SelectionMode]=\"'none'\"\n            (EntityLinkClick)=\"OnEntityLinkClick($event)\"\n            (PageChange)=\"OnPageChange($event)\"\n            Height=\"100%\">\n          </mj-query-data-grid>\n        } @else if (HasError) {\n          <div class=\"error-state\">\n            <i class=\"fas fa-exclamation-triangle\"></i>\n            <p>{{ ErrorMessage }}</p>\n          </div>\n        } @else {\n          <mj-query-data-grid\n            [ColumnConfigs]=\"GridColumnConfigs\"\n            [Data]=\"GridData\"\n            [TotalRowCount]=\"PagerTotalRowCount\"\n            [PageNumber]=\"PagerPageNumber\"\n            [PageSize]=\"PagerPageSize\"\n            [ShowToolbar]=\"false\"\n            [ShowRefresh]=\"false\"\n            [PersistState]=\"false\"\n            [SelectionMode]=\"'none'\"\n            (EntityLinkClick)=\"OnEntityLinkClick($event)\"\n            (PageChange)=\"OnPageChange($event)\"\n            Height=\"100%\">\n          </mj-query-data-grid>\n        }\n      </div>\n    } @else if (spec.plan) {\n      <!-- Plan-only view (no results yet) -->\n      <div class=\"data-toolbar\">\n        <div class=\"data-title\">\n          <i class=\"fas fa-diagram-project\"></i>\n          <span>{{ spec.title || 'Query Plan' }}</span>\n        </div>\n      </div>\n      <div class=\"plan-content\">\n        <mj-markdown\n          [data]=\"spec.plan\"\n          [enableMermaid]=\"true\"\n          [enableHighlight]=\"true\"\n          [enableCollapsibleHeadings]=\"false\"\n          [enableSmartypants]=\"true\">\n        </mj-markdown>\n      </div>\n    } @else {\n      <!-- No data and no plan -->\n      <div class=\"empty-state\">\n        <i class=\"fas fa-inbox\"></i>\n        <p>No data to display</p>\n      </div>\n    }\n  } @else if (HasError) {\n    <div class=\"error-state\">\n      <i class=\"fas fa-exclamation-triangle\"></i>\n      <p>{{ ErrorMessage }}</p>\n    </div>\n  } @else {\n    <div class=\"empty-state\">\n      <i class=\"fas fa-inbox\"></i>\n      <p>No data to display</p>\n    </div>\n  }\n\n  <!-- Save Query Panel (slide-in) -->\n  @if (ShowSaveDialog) {\n    <mj-save-query-panel\n      [QueryName]=\"spec?.title || 'Untitled Query'\"\n      [QueryDescription]=\"''\"\n      [SQL]=\"spec?.metadata?.sql || ''\"\n      [Plan]=\"spec?.plan || ''\"\n      (Saved)=\"OnQuerySaved($event)\"\n      (Cancelled)=\"ShowSaveDialog = false\">\n    </mj-save-query-panel>\n  }\n</div>\n", styles: [".data-artifact-viewer {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n}\n\n.data-toolbar {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 8px 12px;\n  background: var(--mj-bg-surface-sunken);\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.data-title {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-weight: 600;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n}\n\n.data-title i {\n  color: var(--mj-text-muted);\n}\n\n.row-count {\n  padding: 2px 8px;\n  background: var(--mj-border-default);\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n}\n\n.exec-time {\n  padding: 2px 8px;\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 500;\n  color: var(--mj-status-success);\n}\n\n.live-badge {\n  padding: 2px 8px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-brand-primary);\n}\n\n.data-actions {\n  display: flex;\n  gap: 6px;\n}\n\n.btn-icon {\n  padding: 4px 10px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 11px;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  color: var(--mj-text-secondary);\n}\n\n.btn-icon:hover {\n  background: var(--mj-border-default);\n  border-color: var(--mj-text-disabled);\n}\n\n.btn-icon:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.btn-icon.btn-save {\n  color: var(--mj-status-success);\n  border-color: color-mix(in srgb, var(--mj-status-success) 30%, var(--mj-bg-surface));\n}\n\n.btn-icon.btn-save:hover {\n  background: color-mix(in srgb, var(--mj-status-success) 8%, var(--mj-bg-surface));\n  border-color: var(--mj-status-success);\n}\n\n.btn-icon.btn-open {\n  color: var(--mj-brand-primary);\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-bg-surface));\n}\n\n.btn-icon.btn-open:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  border-color: var(--mj-brand-primary);\n}\n\n.grid-container {\n  flex: 1;\n  overflow: hidden;\n  min-height: 200px;\n  height: 500px;\n  position: relative;\n}\n\n/* Saving overlay \u2014 semi-transparent panel over the grid */\n.saving-overlay {\n  position: absolute;\n  inset: 0;\n  background: color-mix(in srgb, var(--mj-bg-surface) 80%, transparent);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 50;\n}\n\n.error-banner {\n  padding: 8px 12px;\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  border-bottom: 1px solid var(--mj-status-warning);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 12px;\n  color: var(--mj-status-warning);\n}\n\n.fallback-note {\n  font-style: italic;\n  color: var(--mj-text-muted);\n}\n\n.empty-state, .error-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 200px;\n  color: var(--mj-text-muted);\n  text-align: center;\n  gap: 12px;\n}\n\n.empty-state i, .error-state i {\n  font-size: 32px;\n}\n\n.error-state {\n  color: var(--mj-status-error);\n}\n\n.plan-content {\n  flex: 1;\n  overflow: auto;\n  padding: 16px;\n}\n\n/* Query sync badges */\n.query-badge {\n  padding: 2px 8px;\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 600;\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  white-space: nowrap;\n}\n\n.query-badge-synced {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n.query-badge-outdated {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.query-badge-muted {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-disabled);\n}\n\n/* Dropdown wrapper */\n.dropdown-wrapper {\n  position: relative;\n}\n\n.btn-icon.btn-warning {\n  color: var(--mj-status-warning);\n  border-color: color-mix(in srgb, var(--mj-status-warning) 30%, var(--mj-bg-surface));\n}\n\n.btn-icon.btn-warning:hover {\n  background: color-mix(in srgb, var(--mj-status-warning) 8%, var(--mj-bg-surface));\n  border-color: var(--mj-status-warning);\n}\n\n.btn-icon.btn-muted {\n  color: var(--mj-text-disabled);\n  border-color: var(--mj-border-default);\n}\n\n/* Query actions dropdown */\n.query-dropdown {\n  position: absolute;\n  top: 100%;\n  right: 0;\n  margin-top: 4px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  box-shadow: var(--mj-shadow-md);\n  overflow: hidden;\n  min-width: 280px;\n  z-index: 100;\n}\n\n.query-dropdown-item {\n  padding: 10px 14px;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  font-size: 12px;\n  cursor: pointer;\n  border-bottom: 1px solid var(--mj-border-default);\n  transition: background 0.1s;\n}\n\n.query-dropdown-item:last-child {\n  border-bottom: none;\n}\n\n.query-dropdown-item:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.query-dropdown-item i {\n  width: 16px;\n  text-align: center;\n  flex-shrink: 0;\n}\n\n.dropdown-label {\n  font-weight: 500;\n}\n\n.dropdown-desc {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  margin-top: 2px;\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-data-artifact-viewer', template: "<div class=\"data-artifact-viewer\" [ngClass]=\"cssClass\">\n  @if (spec) {\n    @if (HasData || IsLoading || ResolvedTables.length > 0) {\n      <!-- Toolbar -->\n      <div class=\"data-toolbar\">\n        <div class=\"data-title\">\n          <i class=\"fas fa-table\"></i>\n          <span>{{ spec.title || \"Data Results\" }}</span>\n          @if (IsLive) {\n            <span class=\"live-badge\">Live</span>\n          }\n          @if (DisplayRowCount != null) {\n            <span class=\"row-count\">{{ DisplayRowCount }} rows</span>\n          }\n          @if (DisplayExecutionTime != null) {\n            <span class=\"exec-time\">{{ DisplayExecutionTime }}ms</span>\n          }\n        </div>\n        <div class=\"data-actions\">\n          @if (IsLive) {\n            <button class=\"btn-icon\" title=\"Refresh data\" (click)=\"OnRefresh()\" [disabled]=\"IsLoading\">\n              <i class=\"fas fa-sync-alt\" [class.fa-spin]=\"IsLoading\"></i> Refresh\n            </button>\n          }\n\n          @switch (QuerySyncState) {\n            <!-- S1: No saved query, latest version \u2192 Save Query -->\n            @case (\"no-query-latest\") {\n              <button class=\"btn-icon btn-save\" title=\"Save as reusable query\" (click)=\"OnShowSaveDialog()\"><i class=\"fas fa-save\"></i> Save Query</button>\n            }\n\n            <!-- S2: SQL matches \u2192 green badge + Open -->\n            @case (\"synced\") {\n              <span class=\"query-badge query-badge-synced\"> <i class=\"fas fa-check\"></i> Saved at v{{ SavedAtVersion }} </span>\n              <button class=\"btn-icon btn-open\" title=\"Open saved query record\" (click)=\"OnOpenSavedQuery()\">\n                <i class=\"fas fa-external-link-alt\"></i> Open Query\n              </button>\n            }\n\n            <!-- S3: SQL differs, latest version \u2192 amber badge + dropdown -->\n            @case (\"outdated-latest\") {\n              <span class=\"query-badge query-badge-outdated\"> <i class=\"fas fa-circle-exclamation\"></i> Saved at v{{ SavedAtVersion }} </span>\n              <div class=\"dropdown-wrapper\">\n                <button class=\"btn-icon btn-warning\" title=\"Update or save query\" (click)=\"OnToggleUpdateDropdown()\">\n                  <i class=\"fas fa-save\"></i> Update Query <i class=\"fas fa-caret-down\"></i>\n                </button>\n                @if (ShowUpdateDropdown) {\n                  <div class=\"query-dropdown\" (click)=\"$event.stopPropagation()\">\n                    <div class=\"query-dropdown-item\" (click)=\"OnUpdateExistingQuery()\">\n                      <i class=\"fas fa-arrow-up-from-bracket\" style=\"color: #d97706\"></i>\n                      <div>\n                        <div class=\"dropdown-label\">Update \"{{ SavedQueryDisplayName }}\"</div>\n                        <div class=\"dropdown-desc\">Replace saved query SQL with this version's SQL</div>\n                      </div>\n                    </div>\n                    <div class=\"query-dropdown-item\" (click)=\"OnSaveAsNewQuery()\">\n                      <i class=\"fas fa-plus\" style=\"color: #16a34a\"></i>\n                      <div>\n                        <div class=\"dropdown-label\">Save as New Query</div>\n                        <div class=\"dropdown-desc\">Create a new query, keep the original unchanged</div>\n                      </div>\n                    </div>\n                    <div class=\"query-dropdown-item\" (click)=\"OnOpenSavedQuery(); OnCloseDropdown()\">\n                      <i class=\"fas fa-external-link-alt\" style=\"color: var(--mj-text-muted)\"></i>\n                      <div>\n                        <div class=\"dropdown-label\">Open Saved Query</div>\n                        <div class=\"dropdown-desc\">View \"{{ SavedQueryDisplayName }}\" (saved at v{{ SavedAtVersion }})</div>\n                      </div>\n                    </div>\n                  </div>\n                }\n              </div>\n            }\n\n            <!-- S4: Older version, query was updated ahead -->\n            @case (\"query-ahead\") {\n              <span class=\"query-badge query-badge-muted\"> <i class=\"fas fa-clock-rotate-left\"></i> Query updated at v{{ SavedAtVersion }} </span>\n              <button class=\"btn-icon btn-muted\" title=\"Open saved query record\" (click)=\"OnOpenSavedQuery()\">\n                <i class=\"fas fa-external-link-alt\"></i> Open Query\n              </button>\n            }\n\n            <!-- S5: Middle version, saved at older, not latest -->\n            @case (\"query-behind\") {\n              <span class=\"query-badge query-badge-muted\"> <i class=\"fas fa-clock-rotate-left\"></i> Saved at v{{ SavedAtVersion }} </span>\n              <button class=\"btn-icon btn-muted\" title=\"Open saved query record\" (click)=\"OnOpenSavedQuery()\">\n                <i class=\"fas fa-external-link-alt\"></i> Open Query\n              </button>\n            }\n\n            <!-- S6: No saved query, older version \u2192 no actions -->\n            @case (\"no-query-older\") {\n              <!-- No query actions available on older versions -->\n            }\n          }\n        </div>\n      </div>\n\n      <!-- Multi-table tab strip -->\n      @if (IsMultiTable) {\n        <div class=\"table-tabs\">\n          @for (table of ResolvedTables; track table.name; let i = $index) {\n            <button class=\"table-tab\" [class.active]=\"i === ActiveTableIndex\" [title]=\"table.description || table.name\" (click)=\"OnTableTabClick(i)\">\n              <span class=\"table-tab-name\">{{ table.name }}</span>\n              @if (table.metadata?.rowCount != null || table.rows.length) {\n                <span class=\"table-tab-count\"> ({{ table.metadata?.rowCount ?? table.rows.length }} rows) </span>\n              }\n            </button>\n          }\n        </div>\n      }\n\n      <!-- Computations summary bar -->\n      @if (spec.computations?.length) {\n        <div class=\"computations-bar\">\n          @for (comp of spec.computations; track comp.name) {\n            @if (!IsMultiTable || !comp.table || comp.table === ActiveTable?.name) {\n              <div class=\"computation-chip\" [title]=\"comp.description || comp.name\">\n                <span class=\"computation-label\">{{ comp.name }}</span>\n                <span class=\"computation-value\">\n                  {{ comp.formattedValue || comp.value }}\n                </span>\n              </div>\n            }\n          }\n        </div>\n      }\n\n      <!-- Grid -->\n      <div class=\"grid-container\">\n        <!-- Saving overlay -->\n        @if (IsSaving) {\n          <div class=\"saving-overlay\">\n            <mj-loading [text]=\"SavingMessage\"></mj-loading>\n          </div>\n        }\n        @if (IsLoading) {\n          <mj-loading text=\"Loading data...\"></mj-loading>\n        } @else if (HasError && HasData) {\n          <div class=\"error-banner\">\n            <i class=\"fas fa-exclamation-triangle\"></i>\n            <span>{{ ErrorMessage }}</span>\n            <span class=\"fallback-note\">(Showing cached data)</span>\n          </div>\n          <mj-query-data-grid\n            [ColumnConfigs]=\"GridColumnConfigs\"\n            [Data]=\"GridData\"\n            [TotalRowCount]=\"PagerTotalRowCount\"\n            [PageNumber]=\"PagerPageNumber\"\n            [PageSize]=\"PagerPageSize\"\n            [ShowToolbar]=\"false\"\n            [ShowRefresh]=\"false\"\n            [PersistState]=\"false\"\n            [SelectionMode]=\"'none'\"\n            (EntityLinkClick)=\"OnEntityLinkClick($event)\"\n            (PageChange)=\"OnPageChange($event)\"\n            Height=\"100%\"\n          >\n          </mj-query-data-grid>\n        } @else if (HasError) {\n          <div class=\"error-state\">\n            <i class=\"fas fa-exclamation-triangle\"></i>\n            <p>{{ ErrorMessage }}</p>\n          </div>\n        } @else {\n          <mj-query-data-grid\n            [ColumnConfigs]=\"GridColumnConfigs\"\n            [Data]=\"GridData\"\n            [TotalRowCount]=\"PagerTotalRowCount\"\n            [PageNumber]=\"PagerPageNumber\"\n            [PageSize]=\"PagerPageSize\"\n            [ShowToolbar]=\"false\"\n            [ShowRefresh]=\"false\"\n            [PersistState]=\"false\"\n            [SelectionMode]=\"'none'\"\n            (EntityLinkClick)=\"OnEntityLinkClick($event)\"\n            (PageChange)=\"OnPageChange($event)\"\n            Height=\"100%\"\n          >\n          </mj-query-data-grid>\n        }\n      </div>\n    } @else if (spec.plan) {\n      <!-- Plan-only view (no results yet) -->\n      <div class=\"data-toolbar\">\n        <div class=\"data-title\">\n          <i class=\"fas fa-diagram-project\"></i>\n          <span>{{ spec.title || \"Query Plan\" }}</span>\n        </div>\n      </div>\n      <div class=\"plan-content\">\n        <mj-markdown [data]=\"spec.plan\" [enableMermaid]=\"true\" [enableHighlight]=\"true\" [enableCollapsibleHeadings]=\"false\" [enableSmartypants]=\"true\">\n        </mj-markdown>\n      </div>\n    } @else {\n      <!-- No data and no plan -->\n      <div class=\"empty-state\">\n        <i class=\"fas fa-inbox\"></i>\n        <p>No data to display</p>\n      </div>\n    }\n  } @else if (HasError) {\n    <div class=\"error-state\">\n      <i class=\"fas fa-exclamation-triangle\"></i>\n      <p>{{ ErrorMessage }}</p>\n    </div>\n  } @else {\n    <div class=\"empty-state\">\n      <i class=\"fas fa-inbox\"></i>\n      <p>No data to display</p>\n    </div>\n  }\n\n  <!-- Save Query Panel (slide-in) -->\n  @if (ShowSaveDialog) {\n    <mj-save-query-panel\n      [QueryName]=\"spec?.title || 'Untitled Query'\"\n      [QueryDescription]=\"''\"\n      [SQL]=\"spec?.metadata?.sql || ''\"\n      [Plan]=\"spec?.plan || ''\"\n      (Saved)=\"OnQuerySaved($event)\"\n      (Cancelled)=\"ShowSaveDialog = false\"\n    >\n    </mj-save-query-panel>\n  }\n</div>\n", styles: [".data-artifact-viewer {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n}\n\n.data-toolbar {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 8px 12px;\n  background: var(--mj-bg-surface-sunken);\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.data-title {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-weight: 600;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n}\n\n.data-title i {\n  color: var(--mj-text-muted);\n}\n\n.row-count {\n  padding: 2px 8px;\n  background: var(--mj-border-default);\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n}\n\n.exec-time {\n  padding: 2px 8px;\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 500;\n  color: var(--mj-status-success);\n}\n\n.live-badge {\n  padding: 2px 8px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-brand-primary);\n}\n\n.data-actions {\n  display: flex;\n  gap: 6px;\n}\n\n.btn-icon {\n  padding: 4px 10px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 11px;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  color: var(--mj-text-secondary);\n}\n\n.btn-icon:hover {\n  background: var(--mj-border-default);\n  border-color: var(--mj-text-disabled);\n}\n\n.btn-icon:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.btn-icon.btn-save {\n  color: var(--mj-status-success);\n  border-color: color-mix(in srgb, var(--mj-status-success) 30%, var(--mj-bg-surface));\n}\n\n.btn-icon.btn-save:hover {\n  background: color-mix(in srgb, var(--mj-status-success) 8%, var(--mj-bg-surface));\n  border-color: var(--mj-status-success);\n}\n\n.btn-icon.btn-open {\n  color: var(--mj-brand-primary);\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-bg-surface));\n}\n\n.btn-icon.btn-open:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  border-color: var(--mj-brand-primary);\n}\n\n.grid-container {\n  flex: 1;\n  overflow: hidden;\n  min-height: 200px;\n  height: 500px;\n  position: relative;\n}\n\n/* Saving overlay \u2014 semi-transparent panel over the grid */\n.saving-overlay {\n  position: absolute;\n  inset: 0;\n  background: color-mix(in srgb, var(--mj-bg-surface) 80%, transparent);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 50;\n}\n\n.error-banner {\n  padding: 8px 12px;\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  border-bottom: 1px solid var(--mj-status-warning);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 12px;\n  color: var(--mj-status-warning);\n}\n\n.fallback-note {\n  font-style: italic;\n  color: var(--mj-text-muted);\n}\n\n.empty-state, .error-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 200px;\n  color: var(--mj-text-muted);\n  text-align: center;\n  gap: 12px;\n}\n\n.empty-state i, .error-state i {\n  font-size: 32px;\n}\n\n.error-state {\n  color: var(--mj-status-error);\n}\n\n.plan-content {\n  flex: 1;\n  overflow: auto;\n  padding: 16px;\n}\n\n/* Query sync badges */\n.query-badge {\n  padding: 2px 8px;\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 600;\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  white-space: nowrap;\n}\n\n.query-badge-synced {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n.query-badge-outdated {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.query-badge-muted {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-disabled);\n}\n\n/* Dropdown wrapper */\n.dropdown-wrapper {\n  position: relative;\n}\n\n.btn-icon.btn-warning {\n  color: var(--mj-status-warning);\n  border-color: color-mix(in srgb, var(--mj-status-warning) 30%, var(--mj-bg-surface));\n}\n\n.btn-icon.btn-warning:hover {\n  background: color-mix(in srgb, var(--mj-status-warning) 8%, var(--mj-bg-surface));\n  border-color: var(--mj-status-warning);\n}\n\n.btn-icon.btn-muted {\n  color: var(--mj-text-disabled);\n  border-color: var(--mj-border-default);\n}\n\n/* Query actions dropdown */\n.query-dropdown {\n  position: absolute;\n  top: 100%;\n  right: 0;\n  margin-top: 4px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  box-shadow: var(--mj-shadow-md);\n  overflow: hidden;\n  min-width: 280px;\n  z-index: 100;\n}\n\n.query-dropdown-item {\n  padding: 10px 14px;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  font-size: 12px;\n  cursor: pointer;\n  border-bottom: 1px solid var(--mj-border-default);\n  transition: background 0.1s;\n}\n\n.query-dropdown-item:last-child {\n  border-bottom: none;\n}\n\n.query-dropdown-item:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.query-dropdown-item i {\n  width: 16px;\n  text-align: center;\n  flex-shrink: 0;\n}\n\n.dropdown-label {\n  font-weight: 500;\n}\n\n.dropdown-desc {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  margin-top: 2px;\n}\n\n/* \u2500\u2500\u2500 Table Tab Strip \u2500\u2500\u2500 */\n\n.table-tabs {\n  display: flex;\n  gap: 0;\n  border-bottom: 2px solid var(--mj-border-default);\n  padding: 0 var(--mj-spacing-md, 16px);\n  background: var(--mj-bg-surface);\n  overflow-x: auto;\n}\n\n.table-tab {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 16px;\n  border: none;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  border-bottom: 2px solid transparent;\n  margin-bottom: -2px;\n  transition: color 150ms ease, border-color 150ms ease;\n  white-space: nowrap;\n}\n\n.table-tab:hover {\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface-hover);\n}\n\n.table-tab.active {\n  color: var(--mj-brand-primary);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.table-tab-name {\n  text-transform: capitalize;\n}\n\n.table-tab-count {\n  color: var(--mj-text-muted);\n  font-weight: 400;\n  font-size: 12px;\n}\n\n.table-tab.active .table-tab-count {\n  color: var(--mj-brand-primary);\n  opacity: 0.7;\n}\n\n/* \u2500\u2500\u2500 Computations Summary Bar \u2500\u2500\u2500 */\n\n.computations-bar {\n  display: flex;\n  gap: 12px;\n  padding: 8px 16px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-subtle);\n  overflow-x: auto;\n  flex-wrap: wrap;\n}\n\n.computation-chip {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 12px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 16px;\n  font-size: 13px;\n  white-space: nowrap;\n}\n\n.computation-label {\n  color: var(--mj-text-secondary);\n  font-weight: 400;\n}\n\n.computation-value {\n  color: var(--mj-text-primary);\n  font-weight: 600;\n}\n"] }]
     }], () => [{ type: i0.ChangeDetectorRef }], { openEntityRecord: [{
             type: Output
         }], navigationRequest: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DataArtifactViewerComponent, { className: "DataArtifactViewerComponent", filePath: "src/lib/components/plugins/data-artifact-viewer.component.ts", lineNumber: 109 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DataArtifactViewerComponent, { className: "DataArtifactViewerComponent", filePath: "src/lib/components/plugins/data-artifact-viewer.component.ts", lineNumber: 69 }); })();
 //# sourceMappingURL=data-artifact-viewer.component.js.map