@memberjunction/ng-artifacts 5.2.0 → 5.3.0

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

@@ -7,6 +7,7 @@ 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 { QueryEngine, ArtifactMetadataEngine } from '@memberjunction/core-entities';
 import { resolveTargetEntity } from '@memberjunction/ng-query-viewer';
 import { BaseArtifactViewerPluginComponent } from '../base-artifact-viewer.component';
 import * as i0 from "@angular/core";
@@ -51,37 +52,146 @@ function DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_9_T
     i0.ɵɵadvance();
     i0.ɵɵclassProp("fa-spin", ctx_r0.IsLoading);
 } }
-function DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+function DataArtifactViewerComponent_Conditional_1_Conditional_0_Case_10_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 19);
-    i0.ɵɵlistener("click", function DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_10_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.ShowSaveDialog = true); });
+    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.ɵɵelementEnd();
 } }
-function DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+function DataArtifactViewerComponent_Conditional_1_Conditional_0_Case_11_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 21);
-    i0.ɵɵlistener("click", function DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_11_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnOpenSavedQuery()); });
+    i0.ɵɵelementStart(0, "span", 21);
     i0.ɵɵelement(1, "i", 22);
-    i0.ɵɵtext(2, " Open Query ");
+    i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "button", 23);
+    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.ɵɵtext(5, " Open Query ");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" Saved at v", ctx_r0.SavedAtVersion, " ");
 } }
-function DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-loading", 15);
+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.ɵɵ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.ɵɵ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.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "div", 35);
+    i0.ɵɵtext(7, "Replace saved query SQL with this version's SQL");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(8, "div", 32);
+    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.ɵɵtext(12, "Save as New Query");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(13, "div", 35);
+    i0.ɵɵtext(14, "Create a new query, keep the original unchanged");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(15, "div", 32);
+    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.ɵɵtext(19, "Open Saved Query");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(20, "div", 35);
+    i0.ɵɵtext(21);
+    i0.ɵɵelementEnd()()()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate1("Update \"", ctx_r0.SavedQueryDisplayName, "\"");
+    i0.ɵɵadvance(16);
+    i0.ɵɵtextInterpolate2("View \"", ctx_r0.SavedQueryDisplayName, "\" (saved at v", ctx_r0.SavedAtVersion, ")");
 } }
-function DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+function DataArtifactViewerComponent_Conditional_1_Conditional_0_Case_12_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 23);
-    i0.ɵɵelement(1, "i", 24);
+    i0.ɵɵelementStart(0, "span", 25);
+    i0.ɵɵelement(1, "i", 26);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 27)(4, "button", 28);
+    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.ɵɵtext(6, " Update Query ");
+    i0.ɵɵelement(7, "i", 29);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(8, DataArtifactViewerComponent_Conditional_1_Conditional_0_Case_12_Conditional_8_Template, 22, 3, "div", 30);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" Saved at v", ctx_r0.SavedAtVersion, " ");
+    i0.ɵɵadvance(6);
+    i0.ɵɵconditional(ctx_r0.ShowUpdateDropdown ? 8 : -1);
+} }
+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.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "button", 40);
+    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.ɵɵtext(5, " Open Query ");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" Query updated at v", ctx_r0.SavedAtVersion, " ");
+} }
+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.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "button", 40);
+    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.ɵɵtext(5, " Open Query ");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(2);
+    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_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 14);
+    i0.ɵɵelement(1, "mj-loading", 41);
+    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_19_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 42);
+    i0.ɵɵelement(1, "i", 43);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 25);
+    i0.ɵɵelementStart(4, "span", 44);
     i0.ɵɵtext(5, "(Showing cached data)");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "mj-query-data-grid", 26);
-    i0.ɵɵlistener("EntityLinkClick", function DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_14_Template_mj_query_data_grid_EntityLinkClick_6_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnEntityLinkClick($event)); });
+    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)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
@@ -90,9 +200,9 @@ function DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_14_
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("ColumnConfigs", ctx_r0.GridColumnConfigs)("Data", ctx_r0.GridData)("ShowToolbar", false)("ShowRefresh", false)("PersistState", false)("SelectionMode", "none");
 } }
-function DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+function DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_20_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1);
-    i0.ɵɵelement(1, "i", 24);
+    i0.ɵɵelement(1, "i", 43);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
@@ -101,10 +211,10 @@ function DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_15_
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(ctx_r0.ErrorMessage);
 } }
-function DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-query-data-grid", 26);
-    i0.ɵɵlistener("EntityLinkClick", function DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_16_Template_mj_query_data_grid_EntityLinkClick_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnEntityLinkClick($event)); });
+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)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
@@ -122,13 +232,14 @@ function DataArtifactViewerComponent_Conditional_1_Conditional_0_Template(rf, ct
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(8, "div", 10);
     i0.ɵɵconditionalCreate(9, DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_9_Template, 3, 3, "button", 11);
-    i0.ɵɵconditionalCreate(10, DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_10_Template, 3, 0, "button", 12);
-    i0.ɵɵconditionalCreate(11, DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_11_Template, 3, 0, "button", 13);
+    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(12, "div", 14);
-    i0.ɵɵconditionalCreate(13, DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_13_Template, 1, 0, "mj-loading", 15)(14, DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_14_Template, 7, 7)(15, DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_15_Template, 4, 1, "div", 1)(16, DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_16_Template, 1, 6, "mj-query-data-grid", 16);
+    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, 7)(20, DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_20_Template, 4, 1, "div", 1)(21, DataArtifactViewerComponent_Conditional_1_Conditional_0_Conditional_21_Template, 1, 6, "mj-query-data-grid", 16);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
+    let tmp_7_0;
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r0.spec.title || "Data Results");
@@ -141,20 +252,20 @@ function DataArtifactViewerComponent_Conditional_1_Conditional_0_Template(rf, ct
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r0.IsLive ? 9 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.CanSaveQuery ? 10 : -1);
+    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();
-    i0.ɵɵconditional(ctx_r0.spec.savedQueryId ? 11 : -1);
-    i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r0.IsLoading ? 13 : ctx_r0.HasError && ctx_r0.HasData ? 14 : ctx_r0.HasError ? 15 : 16);
+    i0.ɵɵconditional(ctx_r0.IsLoading ? 18 : ctx_r0.HasError && ctx_r0.HasData ? 19 : ctx_r0.HasError ? 20 : 21);
 } }
 function DataArtifactViewerComponent_Conditional_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 4)(1, "div", 5);
-    i0.ɵɵelement(2, "i", 27);
+    i0.ɵɵelement(2, "i", 46);
     i0.ɵɵelementStart(3, "span");
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(5, "div", 28);
-    i0.ɵɵelement(6, "mj-markdown", 29);
+    i0.ɵɵelementStart(5, "div", 47);
+    i0.ɵɵelement(6, "mj-markdown", 48);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
@@ -165,20 +276,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", 30);
+    i0.ɵɵelement(1, "i", 49);
     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, 17, 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, 22, 8)(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);
 } }
 function DataArtifactViewerComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1);
-    i0.ɵɵelement(1, "i", 24);
+    i0.ɵɵelement(1, "i", 43);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
@@ -189,15 +300,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", 30);
+    i0.ɵɵelement(1, "i", 49);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3, "No data to display");
     i0.ɵɵelementEnd()();
 } }
 function DataArtifactViewerComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-save-query-panel", 31);
-    i0.ɵɵlistener("Saved", function DataArtifactViewerComponent_Conditional_4_Template_mj_save_query_panel_Saved_0_listener($event) { i0.ɵɵrestoreView(_r7); 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(_r7); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.ShowSaveDialog = false); });
+    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); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -217,6 +328,7 @@ let DataArtifactViewerComponent = class DataArtifactViewerComponent extends Base
     cdr;
     openEntityRecord = new EventEmitter();
     navigationRequest = new EventEmitter();
+    tabsChanged = new EventEmitter();
     spec = null;
     GridData = [];
     GridColumnConfigs = null;
@@ -225,15 +337,24 @@ let DataArtifactViewerComponent = class DataArtifactViewerComponent extends Base
     HasError = false;
     ErrorMessage = '';
     ShowSaveDialog = false;
+    ShowUpdateDropdown = false;
+    IsSaving = false;
+    SavingMessage = '';
+    /** Query sync state — drives the toolbar UI for saved query actions */
+    QuerySyncState = 'no-query-latest';
+    /** Latest version number for this artifact (from cache) */
+    LatestVersionNumber = 0;
     /** Metadata from live execution (overrides spec.metadata when live) */
     liveRowCount = null;
     liveExecutionTime = null;
+    /** SQL from the saved query record (for comparison) */
+    savedQuerySql = null;
     constructor(cdr) {
         super();
         this.cdr = cdr;
     }
     get hasDisplayContent() {
-        return this.spec != null && (this.HasData || this.IsLoading || !!this.spec.plan);
+        return this.spec != null && (this.HasData || this.IsLoading);
     }
     get parentShouldShowRawContent() {
         return true;
@@ -250,6 +371,30 @@ let DataArtifactViewerComponent = class DataArtifactViewerComponent extends Base
     get DisplayExecutionTime() {
         return this.liveExecutionTime ?? this.spec?.metadata?.executionTimeMs ?? null;
     }
+    /** Current artifact version number */
+    get CurrentVersionNumber() {
+        return this.artifactVersion?.VersionNumber || 1;
+    }
+    /** Whether this is the latest version of the artifact */
+    get IsLatestVersion() {
+        return this.CurrentVersionNumber === this.LatestVersionNumber;
+    }
+    /**
+     * The effective version number at which the query was last saved/updated.
+     * When viewing an older version, this looks ahead through newer versions
+     * to find the most recent savedAtVersionNumber for the same query,
+     * giving the user accurate context (e.g., "Query updated at v3" instead
+     * of the stale "Saved at v1" from this version's snapshot).
+     */
+    EffectiveSavedAtVersion = null;
+    /** Alias used by the template */
+    get SavedAtVersion() {
+        return this.EffectiveSavedAtVersion;
+    }
+    /** Display name for the saved query */
+    get SavedQueryDisplayName() {
+        return this.spec?.savedQueryName || 'Saved Query';
+    }
     async ngOnInit() {
         try {
             this.spec = this.parseJsonContent();
@@ -260,6 +405,14 @@ let DataArtifactViewerComponent = class DataArtifactViewerComponent extends Base
             }
             // 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) {
+                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();
@@ -267,7 +420,10 @@ let DataArtifactViewerComponent = class DataArtifactViewerComponent extends Base
             else if (this.HasInlineData) {
                 // Fall back to embedded rows
                 this.GridData = this.spec.rows;
+                this.IsLoading = false;
             }
+            // Signal parent that tabs/display content may have changed after async load
+            this.tabsChanged.emit();
         }
         catch (error) {
             this.HasError = true;
@@ -380,10 +536,133 @@ let DataArtifactViewerComponent = class DataArtifactViewerComponent extends Base
             this.GridData = this.spec.rows;
         }
     }
-    /** Whether this query can be saved (has SQL but hasn't been saved yet) */
-    get CanSaveQuery() {
-        return !!this.spec?.metadata?.sql && !this.spec?.savedQueryId;
+    // ─── Query Sync State ────────────────────────────────────────────
+    /**
+     * Initialize query sync state by loading cached metadata.
+     * Resolves the latest version number and compares saved query SQL.
+     */
+    async InitQuerySyncState() {
+        // Ensure artifact cache is loaded (not registered for startup)
+        await ArtifactMetadataEngine.Instance.Config(false);
+        this.LatestVersionNumber = this.resolveLatestVersionNumber();
+        // If cache is stale (doesn't know about the version we're viewing),
+        // force-refresh and re-resolve. This happens when new versions are
+        // created during a conversation after the cache was first loaded.
+        if (this.LatestVersionNumber < this.CurrentVersionNumber) {
+            await ArtifactMetadataEngine.Instance.Config(true);
+            this.LatestVersionNumber = this.resolveLatestVersionNumber();
+        }
+        this.EffectiveSavedAtVersion = this.resolveEffectiveSavedAtVersion();
+        await this.resolveSavedQuerySql();
+        this.QuerySyncState = this.computeQuerySyncState();
     }
+    /**
+     * Determine the latest version number for this artifact from cache.
+     * Falls back to current version if cache miss.
+     */
+    resolveLatestVersionNumber() {
+        if (!this.artifactVersion?.ArtifactID) {
+            return this.CurrentVersionNumber;
+        }
+        const versions = ArtifactMetadataEngine.Instance.GetVersionsForArtifact(this.artifactVersion.ArtifactID);
+        if (versions.length > 0) {
+            // GetVersionsForArtifact returns DESC sorted
+            return versions[0].VersionNumber || 1;
+        }
+        // Cache miss — current version is our best guess
+        return this.CurrentVersionNumber;
+    }
+    /**
+     * Scan all versions of this artifact to find the most recent savedAtVersionNumber
+     * for the same savedQueryId. When viewing an older version, this tells the user
+     * where the query was *actually* last updated, not just what this version's
+     * snapshot recorded at the time.
+     */
+    resolveEffectiveSavedAtVersion() {
+        const queryId = this.spec?.savedQueryId;
+        if (!queryId)
+            return null;
+        // Start with this version's own value
+        let effective = this.spec?.savedAtVersionNumber ?? null;
+        if (!this.artifactVersion?.ArtifactID)
+            return effective;
+        // GetVersionsForArtifact returns DESC sorted — scan all versions
+        const versions = ArtifactMetadataEngine.Instance.GetVersionsForArtifact(this.artifactVersion.ArtifactID);
+        for (const v of versions) {
+            try {
+                if (!v.Content)
+                    continue;
+                const content = typeof v.Content === 'string' ? JSON.parse(v.Content) : v.Content;
+                if (content.savedQueryId === queryId && content.savedAtVersionNumber != null) {
+                    const vSavedAt = content.savedAtVersionNumber;
+                    if (effective == null || vSavedAt > effective) {
+                        effective = vSavedAt;
+                    }
+                }
+            }
+            catch {
+                // Skip versions with unparseable content
+            }
+        }
+        return effective;
+    }
+    /**
+     * Look up the saved query's SQL from QueryEngine cache for comparison.
+     * Only fetches if savedQueryId is present.
+     */
+    async resolveSavedQuerySql() {
+        if (!this.spec?.savedQueryId) {
+            this.savedQuerySql = null;
+            return;
+        }
+        // QueryEngine is registered for startup, should already be loaded
+        let query = QueryEngine.Instance.FindQueryByID(this.spec.savedQueryId);
+        if (!query) {
+            // Cache miss — force refresh and retry
+            await QueryEngine.Instance.Config(true);
+            query = QueryEngine.Instance.FindQueryByID(this.spec.savedQueryId);
+        }
+        this.savedQuerySql = query?.SQL ?? null;
+    }
+    /**
+     * Compute the query sync state from current spec, version, and saved query SQL.
+     * Implements the decision tree from the UX design.
+     */
+    computeQuerySyncState() {
+        const hasSavedQuery = !!this.spec?.savedQueryId;
+        const isLatest = this.IsLatestVersion;
+        if (!hasSavedQuery) {
+            return isLatest ? 'no-query-latest' : 'no-query-older';
+        }
+        // Compare SQL (normalize whitespace for reliable comparison)
+        const specSql = this.normalizeSql(this.spec?.metadata?.sql);
+        const querySql = this.normalizeSql(this.savedQuerySql);
+        const sqlMatches = specSql != null && querySql != null && specSql === querySql;
+        // Only truly synced if SQL matches AND this is the version it was saved at.
+        // Even with identical SQL, a newer version should show the dropdown so the
+        // user can update the version association (re-save at current version).
+        const savedAtCurrent = this.EffectiveSavedAtVersion === this.CurrentVersionNumber;
+        if (sqlMatches && savedAtCurrent) {
+            return 'synced';
+        }
+        // SQL differs — determine position relative to saved version
+        if (isLatest) {
+            return 'outdated-latest';
+        }
+        // Use effective saved-at (looks ahead through newer versions)
+        const savedAt = this.EffectiveSavedAtVersion;
+        if (savedAt != null && this.CurrentVersionNumber < savedAt) {
+            return 'query-ahead'; // query was updated at a newer version
+        }
+        return 'query-behind'; // ahead of saved but not latest
+    }
+    /** Normalize SQL for comparison: trim and collapse whitespace */
+    normalizeSql(sql) {
+        if (sql == null)
+            return null;
+        return sql.trim().replace(/\s+/g, ' ');
+    }
+    // ─── Actions ────────────────────────────────────────────────────
     /** Navigate to the saved query in the Data Explorer's Queries browser */
     OnOpenSavedQuery() {
         if (!this.spec?.savedQueryId)
@@ -394,23 +673,105 @@ let DataArtifactViewerComponent = class DataArtifactViewerComponent extends Base
             queryParams: { queryId: this.spec.savedQueryId }
         });
     }
-    /** Handle successful save from the dialog */
+    /** Show the save panel for creating a brand-new query */
+    OnShowSaveDialog() {
+        this.ShowSaveDialog = true;
+        this.ShowUpdateDropdown = false;
+    }
+    /** Toggle the update query dropdown */
+    OnToggleUpdateDropdown() {
+        this.ShowUpdateDropdown = !this.ShowUpdateDropdown;
+    }
+    /** Close the dropdown (e.g., on outside click) */
+    OnCloseDropdown() {
+        this.ShowUpdateDropdown = false;
+    }
+    /**
+     * Update the existing saved query's SQL to match this version.
+     * Only available from the latest version (Scenario 3).
+     */
+    async OnUpdateExistingQuery() {
+        this.ShowUpdateDropdown = false;
+        if (!this.spec?.savedQueryId || !this.spec.metadata?.sql)
+            return;
+        this.IsSaving = true;
+        this.SavingMessage = `Updating "${this.SavedQueryDisplayName}"...`;
+        this.cdr.detectChanges();
+        try {
+            const md = new Metadata();
+            const query = await md.GetEntityObject('MJ: Queries');
+            const loaded = await query.Load(this.spec.savedQueryId);
+            if (!loaded) {
+                console.error('Failed to load saved query for update');
+                return;
+            }
+            query.SQL = this.spec.metadata.sql;
+            const saved = await query.Save();
+            if (saved) {
+                // Update spec with new version tracking
+                this.spec.savedAtVersionNumber = this.CurrentVersionNumber;
+                await this.PersistArtifactContent();
+                // Refresh caches so future lookups see the updated data
+                await QueryEngine.Instance.Config(true);
+                await ArtifactMetadataEngine.Instance.Config(true);
+                await md.Refresh();
+                this.savedQuerySql = this.spec.metadata.sql;
+                this.EffectiveSavedAtVersion = this.CurrentVersionNumber;
+                this.QuerySyncState = 'synced';
+            }
+        }
+        catch (error) {
+            console.error('Failed to update saved query:', error);
+        }
+        finally {
+            this.IsSaving = false;
+            this.cdr.detectChanges();
+        }
+    }
+    /**
+     * Save as a new query (from the dropdown).
+     * Opens the save dialog which creates a fresh query record.
+     */
+    OnSaveAsNewQuery() {
+        this.ShowUpdateDropdown = false;
+        this.ShowSaveDialog = true;
+    }
+    /** Handle successful save from the dialog (both initial save and "save as new") */
     async OnQuerySaved(event) {
         this.ShowSaveDialog = false;
-        // Mutate spec to record the saved query
-        this.spec.savedQueryId = event.queryId;
-        this.spec.savedQueryName = event.queryName;
-        // Persist updated content to artifact version
-        await this.UpdateArtifactContent();
+        this.IsSaving = true;
+        this.SavingMessage = 'Saving query...';
         this.cdr.detectChanges();
+        try {
+            // Update spec with saved query info and version tracking
+            this.spec.savedQueryId = event.queryId;
+            this.spec.savedQueryName = event.queryName;
+            this.spec.savedAtVersionNumber = this.CurrentVersionNumber;
+            // Persist and refresh caches
+            await this.PersistArtifactContent();
+            await QueryEngine.Instance.Config(true);
+            await ArtifactMetadataEngine.Instance.Config(true);
+            await new Metadata().Refresh();
+            this.savedQuerySql = this.spec.metadata?.sql ?? null;
+            this.EffectiveSavedAtVersion = this.CurrentVersionNumber;
+            this.QuerySyncState = 'synced';
+        }
+        catch (error) {
+            console.error('Failed to save query:', error);
+        }
+        finally {
+            this.IsSaving = false;
+            this.cdr.detectChanges();
+        }
     }
     /** Persist updated spec back to the artifact version entity */
-    async UpdateArtifactContent() {
+    async PersistArtifactContent() {
         if (!this.artifactVersion || !this.spec)
             return;
         this.artifactVersion.Content = JSON.stringify(this.spec);
         await this.artifactVersion.Save();
     }
+    // ─── Tabs ───────────────────────────────────────────────────────
     /**
      * Provide Plan tab (markdown) and SQL tab (code) when available
      */
@@ -436,7 +797,7 @@ let DataArtifactViewerComponent = class DataArtifactViewerComponent extends Base
         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"], [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"], ["title", "Open saved query record", 1, "btn-icon", "btn-open"], [1, "grid-container"], ["text", "Loading data..."], ["Height", "100%", 3, "ColumnConfigs", "Data", "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"], ["title", "Open saved query record", 1, "btn-icon", "btn-open", 3, "click"], [1, "fas", "fa-external-link-alt"], [1, "error-banner"], [1, "fas", "fa-exclamation-triangle"], [1, "fallback-note"], ["Height", "100%", 3, "EntityLinkClick", "ColumnConfigs", "Data", "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"]], 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"], [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", "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", "#6c757d"], [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", "ColumnConfigs", "Data", "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"]], 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, 3, "mj-save-query-panel", 3);
@@ -447,7 +808,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: #f8f9fa;\n      border-bottom: 1px solid #dee2e6;\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: #333;\n    }\n\n    .data-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: #6c757d;\n    }\n\n    .row-count[_ngcontent-%COMP%] {\n      padding: 2px 8px;\n      background: #e9ecef;\n      border-radius: 10px;\n      font-size: 11px;\n      font-weight: 500;\n      color: #495057;\n    }\n\n    .exec-time[_ngcontent-%COMP%] {\n      padding: 2px 8px;\n      background: #d4edda;\n      border-radius: 10px;\n      font-size: 11px;\n      font-weight: 500;\n      color: #155724;\n    }\n\n    .live-badge[_ngcontent-%COMP%] {\n      padding: 2px 8px;\n      background: #cce5ff;\n      border-radius: 10px;\n      font-size: 11px;\n      font-weight: 600;\n      color: #004085;\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: white;\n      border: 1px solid #ced4da;\n      border-radius: 4px;\n      cursor: pointer;\n      font-size: 11px;\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      color: #495057;\n    }\n\n    .btn-icon[_ngcontent-%COMP%]:hover {\n      background: #e9ecef;\n      border-color: #adb5bd;\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: #16a34a;\n      border-color: #86efac;\n    }\n\n    .btn-icon.btn-save[_ngcontent-%COMP%]:hover {\n      background: #f0fdf4;\n      border-color: #16a34a;\n    }\n\n    .btn-icon.btn-open[_ngcontent-%COMP%] {\n      color: #2563eb;\n      border-color: #93c5fd;\n    }\n\n    .btn-icon.btn-open[_ngcontent-%COMP%]:hover {\n      background: #eff6ff;\n      border-color: #2563eb;\n    }\n\n    .grid-container[_ngcontent-%COMP%] {\n      flex: 1;\n      overflow: hidden;\n      min-height: 200px;\n      height: 500px;\n    }\n\n    .error-banner[_ngcontent-%COMP%] {\n      padding: 8px 12px;\n      background: #fff3cd;\n      border-bottom: 1px solid #ffc107;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      font-size: 12px;\n      color: #856404;\n    }\n\n    .fallback-note[_ngcontent-%COMP%] {\n      font-style: italic;\n      color: #6c757d;\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: #6c757d;\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: #dc3545;\n    }\n\n    .plan-content[_ngcontent-%COMP%] {\n      flex: 1;\n      overflow: auto;\n      padding: 16px;\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: #f8f9fa;\n  border-bottom: 1px solid #dee2e6;\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: #333;\n}\n\n.data-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #6c757d;\n}\n\n.row-count[_ngcontent-%COMP%] {\n  padding: 2px 8px;\n  background: #e9ecef;\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 500;\n  color: #495057;\n}\n\n.exec-time[_ngcontent-%COMP%] {\n  padding: 2px 8px;\n  background: #d4edda;\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 500;\n  color: #155724;\n}\n\n.live-badge[_ngcontent-%COMP%] {\n  padding: 2px 8px;\n  background: #cce5ff;\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 600;\n  color: #004085;\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: white;\n  border: 1px solid #ced4da;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 11px;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  color: #495057;\n}\n\n.btn-icon[_ngcontent-%COMP%]:hover {\n  background: #e9ecef;\n  border-color: #adb5bd;\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: #16a34a;\n  border-color: #86efac;\n}\n\n.btn-icon.btn-save[_ngcontent-%COMP%]:hover {\n  background: #f0fdf4;\n  border-color: #16a34a;\n}\n\n.btn-icon.btn-open[_ngcontent-%COMP%] {\n  color: #2563eb;\n  border-color: #93c5fd;\n}\n\n.btn-icon.btn-open[_ngcontent-%COMP%]:hover {\n  background: #eff6ff;\n  border-color: #2563eb;\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: rgba(255, 255, 255, 0.8);\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: #fff3cd;\n  border-bottom: 1px solid #ffc107;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 12px;\n  color: #856404;\n}\n\n.fallback-note[_ngcontent-%COMP%] {\n  font-style: italic;\n  color: #6c757d;\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: #6c757d;\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: #dc3545;\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: #d1fae5;\n  color: #065f46;\n}\n\n.query-badge-outdated[_ngcontent-%COMP%] {\n  background: #fff3cd;\n  color: #856404;\n}\n\n.query-badge-muted[_ngcontent-%COMP%] {\n  background: #f3f4f6;\n  color: #9ca3af;\n}\n\n\n\n.dropdown-wrapper[_ngcontent-%COMP%] {\n  position: relative;\n}\n\n.btn-icon.btn-warning[_ngcontent-%COMP%] {\n  color: #d97706;\n  border-color: #fcd34d;\n}\n\n.btn-icon.btn-warning[_ngcontent-%COMP%]:hover {\n  background: #fffbeb;\n  border-color: #d97706;\n}\n\n.btn-icon.btn-muted[_ngcontent-%COMP%] {\n  color: #9ca3af;\n  border-color: #e5e7eb;\n}\n\n\n\n.query-dropdown[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 100%;\n  right: 0;\n  margin-top: 4px;\n  background: white;\n  border: 1px solid #dee2e6;\n  border-radius: 8px;\n  box-shadow: 0 4px 16px rgba(0,0,0,0.12);\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 #f0f0f0;\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: #f8f9fa;\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: #6c757d;\n  margin-top: 2px;\n}"] });
 };
 DataArtifactViewerComponent = __decorate([
     RegisterClass(BaseArtifactViewerPluginComponent, 'DataArtifactViewerPlugin')
@@ -455,136 +816,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">
-      @if (spec) {
-        @if (HasData || IsLoading) {
-          <!-- Toolbar -->
-          <div class="data-toolbar">
-            <div class="data-title">
-              <i class="fas fa-table"></i>
-              <span>{{ spec.title || 'Data Results' }}</span>
-              @if (IsLive) {
-                <span class="live-badge">Live</span>
-              }
-              @if (DisplayRowCount != null) {
-                <span class="row-count">{{ DisplayRowCount }} rows</span>
-              }
-              @if (DisplayExecutionTime != null) {
-                <span class="exec-time">{{ DisplayExecutionTime }}ms</span>
-              }
-            </div>
-            <div class="data-actions">
-              @if (IsLive) {
-                <button class="btn-icon" title="Refresh data" (click)="OnRefresh()" [disabled]="IsLoading">
-                  <i class="fas fa-sync-alt" [class.fa-spin]="IsLoading"></i> Refresh
-                </button>
-              }
-              @if (CanSaveQuery) {
-                <button class="btn-icon btn-save" title="Save as reusable query"
-                  (click)="ShowSaveDialog = true">
-                  <i class="fas fa-save"></i> Save Query
-                </button>
-              }
-              @if (spec.savedQueryId) {
-                <button class="btn-icon btn-open" title="Open saved query record"
-                  (click)="OnOpenSavedQuery()">
-                  <i class="fas fa-external-link-alt"></i> Open Query
-                </button>
-              }
-            </div>
-          </div>
-
-          <!-- Grid -->
-          <div class="grid-container">
-            @if (IsLoading) {
-              <mj-loading text="Loading data..."></mj-loading>
-            } @else if (HasError && HasData) {
-              <div class="error-banner">
-                <i class="fas fa-exclamation-triangle"></i>
-                <span>{{ ErrorMessage }}</span>
-                <span class="fallback-note">(Showing cached data)</span>
-              </div>
-              <mj-query-data-grid
-                [ColumnConfigs]="GridColumnConfigs"
-                [Data]="GridData"
-                [ShowToolbar]="false"
-                [ShowRefresh]="false"
-                [PersistState]="false"
-                [SelectionMode]="'none'"
-                (EntityLinkClick)="OnEntityLinkClick($event)"
-                Height="100%">
-              </mj-query-data-grid>
-            } @else if (HasError) {
-              <div class="error-state">
-                <i class="fas fa-exclamation-triangle"></i>
-                <p>{{ ErrorMessage }}</p>
-              </div>
-            } @else {
-              <mj-query-data-grid
-                [ColumnConfigs]="GridColumnConfigs"
-                [Data]="GridData"
-                [ShowToolbar]="false"
-                [ShowRefresh]="false"
-                [PersistState]="false"
-                [SelectionMode]="'none'"
-                (EntityLinkClick)="OnEntityLinkClick($event)"
-                Height="100%">
-              </mj-query-data-grid>
-            }
-          </div>
-        } @else if (spec.plan) {
-          <!-- Plan-only view (no results yet) -->
-          <div class="data-toolbar">
-            <div class="data-title">
-              <i class="fas fa-diagram-project"></i>
-              <span>{{ spec.title || 'Query Plan' }}</span>
-            </div>
-          </div>
-          <div class="plan-content">
-            <mj-markdown
-              [data]="spec.plan"
-              [enableMermaid]="true"
-              [enableHighlight]="true"
-              [enableCollapsibleHeadings]="false"
-              [enableSmartypants]="true">
-            </mj-markdown>
-          </div>
-        } @else {
-          <!-- No data and no plan -->
-          <div class="empty-state">
-            <i class="fas fa-inbox"></i>
-            <p>No data to display</p>
-          </div>
-        }
-      } @else if (HasError) {
-        <div class="error-state">
-          <i class="fas fa-exclamation-triangle"></i>
-          <p>{{ ErrorMessage }}</p>
-        </div>
-      } @else {
-        <div class="empty-state">
-          <i class="fas fa-inbox"></i>
-          <p>No data to display</p>
-        </div>
-      }
-
-      <!-- Save Query Panel (slide-in) -->
-      @if (ShowSaveDialog) {
-        <mj-save-query-panel
-          [QueryName]="spec?.title || 'Untitled Query'"
-          [QueryDescription]="''"
-          [SQL]="spec?.metadata?.sql || ''"
-          (Saved)="OnQuerySaved($event)"
-          (Cancelled)="ShowSaveDialog = false">
-        </mj-save-query-panel>
-      }
-    </div>
-  `, styles: ["\n    .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: #f8f9fa;\n      border-bottom: 1px solid #dee2e6;\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: #333;\n    }\n\n    .data-title i {\n      color: #6c757d;\n    }\n\n    .row-count {\n      padding: 2px 8px;\n      background: #e9ecef;\n      border-radius: 10px;\n      font-size: 11px;\n      font-weight: 500;\n      color: #495057;\n    }\n\n    .exec-time {\n      padding: 2px 8px;\n      background: #d4edda;\n      border-radius: 10px;\n      font-size: 11px;\n      font-weight: 500;\n      color: #155724;\n    }\n\n    .live-badge {\n      padding: 2px 8px;\n      background: #cce5ff;\n      border-radius: 10px;\n      font-size: 11px;\n      font-weight: 600;\n      color: #004085;\n    }\n\n    .data-actions {\n      display: flex;\n      gap: 6px;\n    }\n\n    .btn-icon {\n      padding: 4px 10px;\n      background: white;\n      border: 1px solid #ced4da;\n      border-radius: 4px;\n      cursor: pointer;\n      font-size: 11px;\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      color: #495057;\n    }\n\n    .btn-icon:hover {\n      background: #e9ecef;\n      border-color: #adb5bd;\n    }\n\n    .btn-icon:disabled {\n      opacity: 0.6;\n      cursor: not-allowed;\n    }\n\n    .btn-icon.btn-save {\n      color: #16a34a;\n      border-color: #86efac;\n    }\n\n    .btn-icon.btn-save:hover {\n      background: #f0fdf4;\n      border-color: #16a34a;\n    }\n\n    .btn-icon.btn-open {\n      color: #2563eb;\n      border-color: #93c5fd;\n    }\n\n    .btn-icon.btn-open:hover {\n      background: #eff6ff;\n      border-color: #2563eb;\n    }\n\n    .grid-container {\n      flex: 1;\n      overflow: hidden;\n      min-height: 200px;\n      height: 500px;\n    }\n\n    .error-banner {\n      padding: 8px 12px;\n      background: #fff3cd;\n      border-bottom: 1px solid #ffc107;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      font-size: 12px;\n      color: #856404;\n    }\n\n    .fallback-note {\n      font-style: italic;\n      color: #6c757d;\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: #6c757d;\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: #dc3545;\n    }\n\n    .plan-content {\n      flex: 1;\n      overflow: auto;\n      padding: 16px;\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) {\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:#6c757d\"></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            [ShowToolbar]=\"false\"\n            [ShowRefresh]=\"false\"\n            [PersistState]=\"false\"\n            [SelectionMode]=\"'none'\"\n            (EntityLinkClick)=\"OnEntityLinkClick($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            [ShowToolbar]=\"false\"\n            [ShowRefresh]=\"false\"\n            [PersistState]=\"false\"\n            [SelectionMode]=\"'none'\"\n            (EntityLinkClick)=\"OnEntityLinkClick($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      (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: #f8f9fa;\n  border-bottom: 1px solid #dee2e6;\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: #333;\n}\n\n.data-title i {\n  color: #6c757d;\n}\n\n.row-count {\n  padding: 2px 8px;\n  background: #e9ecef;\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 500;\n  color: #495057;\n}\n\n.exec-time {\n  padding: 2px 8px;\n  background: #d4edda;\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 500;\n  color: #155724;\n}\n\n.live-badge {\n  padding: 2px 8px;\n  background: #cce5ff;\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 600;\n  color: #004085;\n}\n\n.data-actions {\n  display: flex;\n  gap: 6px;\n}\n\n.btn-icon {\n  padding: 4px 10px;\n  background: white;\n  border: 1px solid #ced4da;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 11px;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  color: #495057;\n}\n\n.btn-icon:hover {\n  background: #e9ecef;\n  border-color: #adb5bd;\n}\n\n.btn-icon:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.btn-icon.btn-save {\n  color: #16a34a;\n  border-color: #86efac;\n}\n\n.btn-icon.btn-save:hover {\n  background: #f0fdf4;\n  border-color: #16a34a;\n}\n\n.btn-icon.btn-open {\n  color: #2563eb;\n  border-color: #93c5fd;\n}\n\n.btn-icon.btn-open:hover {\n  background: #eff6ff;\n  border-color: #2563eb;\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: rgba(255, 255, 255, 0.8);\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: #fff3cd;\n  border-bottom: 1px solid #ffc107;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 12px;\n  color: #856404;\n}\n\n.fallback-note {\n  font-style: italic;\n  color: #6c757d;\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: #6c757d;\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: #dc3545;\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: #d1fae5;\n  color: #065f46;\n}\n\n.query-badge-outdated {\n  background: #fff3cd;\n  color: #856404;\n}\n\n.query-badge-muted {\n  background: #f3f4f6;\n  color: #9ca3af;\n}\n\n/* Dropdown wrapper */\n.dropdown-wrapper {\n  position: relative;\n}\n\n.btn-icon.btn-warning {\n  color: #d97706;\n  border-color: #fcd34d;\n}\n\n.btn-icon.btn-warning:hover {\n  background: #fffbeb;\n  border-color: #d97706;\n}\n\n.btn-icon.btn-muted {\n  color: #9ca3af;\n  border-color: #e5e7eb;\n}\n\n/* Query actions dropdown */\n.query-dropdown {\n  position: absolute;\n  top: 100%;\n  right: 0;\n  margin-top: 4px;\n  background: white;\n  border: 1px solid #dee2e6;\n  border-radius: 8px;\n  box-shadow: 0 4px 16px rgba(0,0,0,0.12);\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 #f0f0f0;\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: #f8f9fa;\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: #6c757d;\n  margin-top: 2px;\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: 369 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DataArtifactViewerComponent, { className: "DataArtifactViewerComponent", filePath: "src/lib/components/plugins/data-artifact-viewer.component.ts", lineNumber: 108 }); })();
 //# sourceMappingURL=data-artifact-viewer.component.js.map