@memberjunction/ng-dashboards 6.2.0-edge.5 → 6.2.0-edge.7

package/dist/AI/components/vectors/vector-management-resource.component.js

@@ -4,6 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+var VectorManagementResourceComponent_1;
 /**
  * @fileoverview Vector Management Resource Component
  *
@@ -25,10 +26,11 @@ import { MJNotificationService } from '@memberjunction/ng-notifications';
 import { BuildSingleStaticParamConfiguration, ResolveActionJobTypeID } from '../../../shared/action-scheduled-job';
 import { CronToHumanReadable } from '../autotagging/shared/classify.format';
 import { BuildAutoVectorIndexName, FindMatchingVectorIndex } from './vector-index-auto';
+import { ChosenIndexForSave, IndexesForSelection, SelectDatabase, SelectEmbeddingModel, SelectIndex, } from './vector-store-selection';
 import { BuildVectorAgentContext, ResolveSyncRow, } from './vector-management-agent-context';
 import { ValidateStringParam } from '../../../shared/agent-tool-validation';
 import { WithoutSensitiveFields, SensitiveFieldsInTemplate } from './sensitive-fields';
-import { ENTITY_DOCUMENT_TYPE_BY_USE_CASE, MAX_TEMPLATE_FIELDS, CapSelectedFields, EntityDocumentTypeForUseCase, SuggestionUseCaseForDocumentType, IsVectorizableEntity, TemplateFieldCapRefusal, } from './vector-document-rules';
+import { ENTITY_DOCUMENT_TYPE_BY_USE_CASE, MAX_TEMPLATE_FIELDS, CapSelectedFields, EntityDocumentTypeForUseCase, SuggestionUseCaseForDocumentType, IsVectorizableEntity, SuggestedMatchThresholds, TemplateFieldCapRefusal, } from './vector-document-rules';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
 import * as i2 from "@angular/forms";
@@ -283,7 +285,7 @@ function VectorManagementResourceComponent_ng_template_2_Conditional_1_Condition
 function VectorManagementResourceComponent_ng_template_2_Conditional_1_Conditional_55_Conditional_49_Template(rf, ctx) { if (rf & 1) {
     const _r12 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "select", 80);
-    i0.ɵɵtwoWayListener("ngModelChange", function VectorManagementResourceComponent_ng_template_2_Conditional_1_Conditional_55_Conditional_49_Template_select_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(4); i0.ɵɵtwoWayBindingSet(ctx_r1.EditDocVectorIndexID, $event) || (ctx_r1.EditDocVectorIndexID = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("ngModelChange", function VectorManagementResourceComponent_ng_template_2_Conditional_1_Conditional_55_Conditional_49_Template_select_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnEditVectorIndexChange($event)); });
     i0.ɵɵelementStart(1, "option", 90);
     i0.ɵɵtext(2, "Auto (create/find matching index)");
     i0.ɵɵelementEnd();
@@ -291,7 +293,7 @@ function VectorManagementResourceComponent_ng_template_2_Conditional_1_Condition
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.EditDocVectorIndexID);
+    i0.ɵɵproperty("ngModel", ctx_r1.EditDocVectorIndexID);
     i0.ɵɵadvance(3);
     i0.ɵɵrepeater(ctx_r1.EditFilteredIndexes);
 } }
@@ -367,14 +369,14 @@ function VectorManagementResourceComponent_ng_template_2_Conditional_1_Condition
     i0.ɵɵtext(36, "Embedding Model");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(37, "select", 80);
-    i0.ɵɵtwoWayListener("ngModelChange", function VectorManagementResourceComponent_ng_template_2_Conditional_1_Conditional_55_Template_select_ngModelChange_37_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r1.EditDocAIModelID, $event) || (ctx_r1.EditDocAIModelID = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("ngModelChange", function VectorManagementResourceComponent_ng_template_2_Conditional_1_Conditional_55_Template_select_ngModelChange_37_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnEditEmbeddingModelChange($event)); });
     i0.ɵɵrepeaterCreate(38, VectorManagementResourceComponent_ng_template_2_Conditional_1_Conditional_55_For_39_Template, 2, 2, "option", 81, _forTrack2);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(40, "div", 72)(41, "label", 73);
     i0.ɵɵtext(42, "Vector Database");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(43, "select", 80);
-    i0.ɵɵtwoWayListener("ngModelChange", function VectorManagementResourceComponent_ng_template_2_Conditional_1_Conditional_55_Template_select_ngModelChange_43_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r1.EditDocVectorDBID, $event) || (ctx_r1.EditDocVectorDBID = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("ngModelChange", function VectorManagementResourceComponent_ng_template_2_Conditional_1_Conditional_55_Template_select_ngModelChange_43_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnEditVectorDBChange($event)); });
     i0.ɵɵrepeaterCreate(44, VectorManagementResourceComponent_ng_template_2_Conditional_1_Conditional_55_For_45_Template, 2, 2, "option", 81, _forTrack2);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(46, "div", 72)(47, "label", 73);
@@ -413,11 +415,11 @@ function VectorManagementResourceComponent_ng_template_2_Conditional_1_Condition
     i0.ɵɵadvance(4);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.EditDocName);
     i0.ɵɵadvance(4);
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.EditDocAIModelID);
+    i0.ɵɵproperty("ngModel", ctx_r1.EditDocAIModelID);
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r1.AvailableEmbeddingModels);
     i0.ɵɵadvance(5);
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.EditDocVectorDBID);
+    i0.ɵɵproperty("ngModel", ctx_r1.EditDocVectorDBID);
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r1.vectorDatabases);
     i0.ɵɵadvance(5);
@@ -733,7 +735,7 @@ function VectorManagementResourceComponent_ng_template_2_Conditional_1_Condition
 function VectorManagementResourceComponent_ng_template_2_Conditional_1_Conditional_58_Conditional_10_Conditional_49_Template(rf, ctx) { if (rf & 1) {
     const _r29 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "select", 80);
-    i0.ɵɵtwoWayListener("ngModelChange", function VectorManagementResourceComponent_ng_template_2_Conditional_1_Conditional_58_Conditional_10_Conditional_49_Template_select_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r29); const ctx_r1 = i0.ɵɵnextContext(5); i0.ɵɵtwoWayBindingSet(ctx_r1.SelectedVectorIndexID, $event) || (ctx_r1.SelectedVectorIndexID = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("ngModelChange", function VectorManagementResourceComponent_ng_template_2_Conditional_1_Conditional_58_Conditional_10_Conditional_49_Template_select_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r29); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.OnSuggestVectorIndexChange($event)); });
     i0.ɵɵelementStart(1, "option", 90);
     i0.ɵɵtext(2, "Auto (create/find matching index)");
     i0.ɵɵelementEnd();
@@ -741,7 +743,7 @@ function VectorManagementResourceComponent_ng_template_2_Conditional_1_Condition
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(5);
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.SelectedVectorIndexID);
+    i0.ɵɵproperty("ngModel", ctx_r1.SelectedVectorIndexID);
     i0.ɵɵadvance(3);
     i0.ɵɵrepeater(ctx_r1.FilteredIndexesForSelectedDB);
 } }
@@ -815,14 +817,14 @@ function VectorManagementResourceComponent_ng_template_2_Conditional_1_Condition
     i0.ɵɵtext(36, "Embedding Model");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(37, "select", 80);
-    i0.ɵɵtwoWayListener("ngModelChange", function VectorManagementResourceComponent_ng_template_2_Conditional_1_Conditional_58_Conditional_10_Template_select_ngModelChange_37_listener($event) { i0.ɵɵrestoreView(_r24); const ctx_r1 = i0.ɵɵnextContext(4); i0.ɵɵtwoWayBindingSet(ctx_r1.SelectedEmbeddingModelID, $event) || (ctx_r1.SelectedEmbeddingModelID = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("ngModelChange", function VectorManagementResourceComponent_ng_template_2_Conditional_1_Conditional_58_Conditional_10_Template_select_ngModelChange_37_listener($event) { i0.ɵɵrestoreView(_r24); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnSuggestEmbeddingModelChange($event)); });
     i0.ɵɵrepeaterCreate(38, VectorManagementResourceComponent_ng_template_2_Conditional_1_Conditional_58_Conditional_10_For_39_Template, 2, 2, "option", 81, _forTrack2);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(40, "div", 143)(41, "label", 73);
     i0.ɵɵtext(42, "Vector Database");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(43, "select", 80);
-    i0.ɵɵtwoWayListener("ngModelChange", function VectorManagementResourceComponent_ng_template_2_Conditional_1_Conditional_58_Conditional_10_Template_select_ngModelChange_43_listener($event) { i0.ɵɵrestoreView(_r24); const ctx_r1 = i0.ɵɵnextContext(4); i0.ɵɵtwoWayBindingSet(ctx_r1.SelectedVectorDBID, $event) || (ctx_r1.SelectedVectorDBID = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("ngModelChange", function VectorManagementResourceComponent_ng_template_2_Conditional_1_Conditional_58_Conditional_10_Template_select_ngModelChange_43_listener($event) { i0.ɵɵrestoreView(_r24); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnSuggestVectorDBChange($event)); });
     i0.ɵɵrepeaterCreate(44, VectorManagementResourceComponent_ng_template_2_Conditional_1_Conditional_58_Conditional_10_For_45_Template, 2, 2, "option", 81, _forTrack2);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(46, "div", 143)(47, "label", 73);
@@ -850,11 +852,11 @@ function VectorManagementResourceComponent_ng_template_2_Conditional_1_Condition
     i0.ɵɵadvance(5);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.SaveDocumentName);
     i0.ɵɵadvance(4);
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.SelectedEmbeddingModelID);
+    i0.ɵɵproperty("ngModel", ctx_r1.SelectedEmbeddingModelID);
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r1.AvailableEmbeddingModels);
     i0.ɵɵadvance(5);
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.SelectedVectorDBID);
+    i0.ɵɵproperty("ngModel", ctx_r1.SelectedVectorDBID);
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r1.vectorDatabases);
     i0.ɵɵadvance(5);
@@ -996,10 +998,16 @@ function VectorManagementResourceComponent_ng_template_2_Template(rf, ctx) { if
     i0.ɵɵconditional(ctx_r1.IsLoading ? 0 : 1);
 } }
 let VectorManagementResourceComponent = class VectorManagementResourceComponent extends BaseResourceComponent {
+    static { VectorManagementResourceComponent_1 = this; }
     cdr = inject(ChangeDetectorRef);
     activityService = inject(ActivityService);
     navigationService = inject(NavigationService);
     destroy$ = new Subject();
+    /**
+     * How long a sync may go without a progress event before the tab stops waiting. Reaching it does
+     * not mean the sync finished (see subscribeToPipelineProgress).
+     */
+    static SYNC_SILENCE_LIMIT_MS = 2 * 60 * 1000;
     /** View mode: 'index' = Option A (shared index as hero, entity docs as children),
      *  'operations' = Option C (operations monitoring with real-time sync status) */
     ViewMode = 'index';
@@ -1091,6 +1099,7 @@ let VectorManagementResourceComponent = class VectorManagementResourceComponent
                 ResultType: 'simple',
                 OrderBy: 'Priority ASC',
                 MaxRows: 1,
+                SkipTotalRowCount: true,
             });
             if (result.Success && result.Results.length > 0 && result.Results[0].TemplateText) {
                 this.EditDocTemplate = result.Results[0].TemplateText;
@@ -1121,8 +1130,10 @@ let VectorManagementResourceComponent = class VectorManagementResourceComponent
             doc.AIModelID = aiModelID;
             // "Auto (create/find matching index)" resolves to a real index for this DB + model, so the
             // syncer always has one to write into; without both parts there is nothing to match.
-            doc.VectorIndexID = this.EditDocVectorIndexID
-                ? this.EditDocVectorIndexID
+            // A chosen index counts only when it matches the database and model shown.
+            const chosenIndex = ChosenIndexForSave(this.editSelection, this.AvailableVectorIndexes);
+            doc.VectorIndexID = chosenIndex
+                ? chosenIndex.ID
                 : (vectorDatabaseID && aiModelID
                     ? await this.resolveOrCreateVectorIndex(vectorDatabaseID, aiModelID, this.EditDocEntityName)
                     : null);
@@ -1161,6 +1172,7 @@ let VectorManagementResourceComponent = class VectorManagementResourceComponent
                 ResultType: 'entity_object',
                 OrderBy: 'Priority ASC',
                 MaxRows: 1,
+                SkipTotalRowCount: true,
             });
             if (result.Success && result.Results.length > 0) {
                 const content = result.Results[0];
@@ -1318,6 +1330,7 @@ let VectorManagementResourceComponent = class VectorManagementResourceComponent
             Fields: ['ID'],
             ResultType: 'simple',
             MaxRows: 1,
+            SkipTotalRowCount: true,
         });
         if (result.Success && result.Results.length > 0) {
             return result.Results[0].ID;
@@ -1350,18 +1363,56 @@ let VectorManagementResourceComponent = class VectorManagementResourceComponent
     AvailableVectorIndexes = [];
     /** Selected vector index ID — if user picks an existing one */
     SelectedVectorIndexID = '';
-    /** Indexes filtered by the currently selected vector DB (for create/edit forms) */
+    /**
+     * The indexes the suggestion panel offers: those in the selected database built with the selected
+     * embedding model, so a chosen index can never store a different model than the one shown.
+     */
     get FilteredIndexesForSelectedDB() {
-        const dbId = this.SelectedVectorDBID || this.EditDocVectorDBID;
-        if (!dbId)
-            return this.AvailableVectorIndexes;
-        return this.AvailableVectorIndexes.filter(i => i.VectorDatabaseID === dbId);
+        return IndexesForSelection(this.AvailableVectorIndexes, this.SelectedVectorDBID, this.SelectedEmbeddingModelID);
     }
-    /** Indexes filtered by the edit panel's selected vector DB */
+    /** The indexes the edit panel offers, matched to its database and embedding model the same way. */
     get EditFilteredIndexes() {
-        if (!this.EditDocVectorDBID)
-            return this.AvailableVectorIndexes;
-        return this.AvailableVectorIndexes.filter(i => i.VectorDatabaseID === this.EditDocVectorDBID);
+        return IndexesForSelection(this.AvailableVectorIndexes, this.EditDocVectorDBID, this.EditDocAIModelID);
+    }
+    /** Suggestion panel: picking an index moves the model and database dropdowns to its values. */
+    OnSuggestVectorIndexChange(indexID) {
+        this.applySuggestSelection(SelectIndex(this.suggestSelection, this.AvailableVectorIndexes, indexID));
+    }
+    /** Suggestion panel: a chosen index from another database goes back to Auto. */
+    OnSuggestVectorDBChange(databaseID) {
+        this.applySuggestSelection(SelectDatabase(this.suggestSelection, this.AvailableVectorIndexes, databaseID));
+    }
+    /** Suggestion panel: a chosen index built with another model goes back to Auto. */
+    OnSuggestEmbeddingModelChange(embeddingModelID) {
+        this.applySuggestSelection(SelectEmbeddingModel(this.suggestSelection, this.AvailableVectorIndexes, embeddingModelID));
+    }
+    /** Edit panel: picking an index moves the model and database dropdowns to its values. */
+    OnEditVectorIndexChange(indexID) {
+        this.applyEditSelection(SelectIndex(this.editSelection, this.AvailableVectorIndexes, indexID));
+    }
+    /** Edit panel: a chosen index from another database goes back to Auto. */
+    OnEditVectorDBChange(databaseID) {
+        this.applyEditSelection(SelectDatabase(this.editSelection, this.AvailableVectorIndexes, databaseID));
+    }
+    /** Edit panel: a chosen index built with another model goes back to Auto. */
+    OnEditEmbeddingModelChange(embeddingModelID) {
+        this.applyEditSelection(SelectEmbeddingModel(this.editSelection, this.AvailableVectorIndexes, embeddingModelID));
+    }
+    get suggestSelection() {
+        return { EmbeddingModelID: this.SelectedEmbeddingModelID, VectorDatabaseID: this.SelectedVectorDBID, VectorIndexID: this.SelectedVectorIndexID };
+    }
+    applySuggestSelection(selection) {
+        this.SelectedEmbeddingModelID = selection.EmbeddingModelID;
+        this.SelectedVectorDBID = selection.VectorDatabaseID;
+        this.SelectedVectorIndexID = selection.VectorIndexID;
+    }
+    get editSelection() {
+        return { EmbeddingModelID: this.EditDocAIModelID, VectorDatabaseID: this.EditDocVectorDBID, VectorIndexID: this.EditDocVectorIndexID };
+    }
+    applyEditSelection(selection) {
+        this.EditDocAIModelID = selection.EmbeddingModelID;
+        this.EditDocVectorDBID = selection.VectorDatabaseID;
+        this.EditDocVectorIndexID = selection.VectorIndexID;
     }
     /** Grouped entity list for the suggestion panel — schemas as groups, entities as items */
     EntityGroups = [];
@@ -1648,11 +1699,19 @@ let VectorManagementResourceComponent = class VectorManagementResourceComponent
         `;
         let idleTimer = null;
         const activityID = this.activityService.Start('Vector sync', { icon: 'fa-solid fa-cubes', detail: entityName, progress: 0 });
-        const finishSync = (success) => {
+        /**
+         * 'success' and 'error' come only from the server's own complete / error events.
+         * 'unconfirmed' is a long silence (a dropped connection, say): the row is refreshed from the
+         * database, but nothing claims the run finished, because the server may still be working.
+         */
+        const finishSync = (outcome) => {
             if (idleTimer)
                 clearTimeout(idleTimer);
             rxSub?.unsubscribe();
-            this.activityService.Complete(activityID, success ? 'success' : 'error', success ? `${entityName} vectorized` : `Failed for ${entityName}`);
+            const success = outcome !== 'error';
+            this.activityService.Complete(activityID, success ? 'success' : 'error', outcome === 'success' ? `${entityName} vectorized`
+                : outcome === 'error' ? `Failed for ${entityName}`
+                    : `${entityName}: no progress received`);
             // Use setTimeout to defer state changes to the next macrotask,
             // avoiding ExpressionChangedAfterItHasBeenCheckedError.
             // (Promise.resolve microtasks run between Angular's check passes
@@ -1660,10 +1719,15 @@ let VectorManagementResourceComponent = class VectorManagementResourceComponent
             setTimeout(async () => {
                 try {
                     this.removeSyncingId(entityDocumentId);
-                    if (success) {
+                    if (outcome === 'success') {
                         MJNotificationService.Instance.CreateSimpleNotification(`Vectorization complete for ${entityName}`, 'success', 3000);
                         await this.refreshSyncRow(entityDocumentId);
                     }
+                    else if (outcome === 'unconfirmed') {
+                        MJNotificationService.Instance.CreateSimpleNotification(`No progress received for ${entityName} in ${VectorManagementResourceComponent_1.SYNC_SILENCE_LIMIT_MS / 60000} minutes, ` +
+                            `so the result can't be confirmed. The vector count shown is what is stored now; refresh later to check.`, 'warning', 8000);
+                        await this.refreshSyncRow(entityDocumentId);
+                    }
                     else {
                         this.updateRowStatus(entityDocumentId, 'Error');
                         MJNotificationService.Instance.CreateSimpleNotification(`Vectorization failed for ${entityName}`, 'error', 5000);
@@ -1679,16 +1743,17 @@ let VectorManagementResourceComponent = class VectorManagementResourceComponent
                 }
             });
         };
-        // Reset idle timer on every event. When no events arrive for 5s,
-        // assume the pipeline is done (handles missing 'complete' event).
+        // Reset on every event. Silence is not success: the server reports progress in 5% steps,
+        // and with a remote embedding model one step can take far longer than a few seconds, so a
+        // short silence routinely reported "Synced" while most records were still being embedded.
         const resetIdleTimer = () => {
             if (idleTimer)
                 clearTimeout(idleTimer);
             idleTimer = setTimeout(() => {
                 if (this.IsSyncing(entityDocumentId)) {
-                    finishSync(true);
+                    finishSync('unconfirmed');
                 }
-            }, 5000);
+            }, VectorManagementResourceComponent_1.SYNC_SILENCE_LIMIT_MS);
         };
         // Start the idle timer immediately in case no events ever arrive
         resetIdleTimer();
@@ -1703,10 +1768,10 @@ let VectorManagementResourceComponent = class VectorManagementResourceComponent
                 this.updateRowProgress(entityDocumentId, pct);
                 this.cdr.detectChanges();
                 if (stage === 'complete') {
-                    finishSync(true);
+                    finishSync('success');
                 }
                 else if (stage === 'error') {
-                    finishSync(false);
+                    finishSync('error');
                 }
                 else {
                     // Got a progress event — reset idle timer
@@ -1715,7 +1780,7 @@ let VectorManagementResourceComponent = class VectorManagementResourceComponent
             },
             error: (err) => {
                 console.error(`[VectorManagement] Pipeline subscription error:`, err);
-                finishSync(false);
+                finishSync('error');
             }
         });
     }
@@ -1959,6 +2024,12 @@ let VectorManagementResourceComponent = class VectorManagementResourceComponent
             entityDoc.Status = 'Active';
             // Populate required FK fields from existing data
             await this.populateEntityDocumentFKs(entityDoc);
+            // The panel shows the model's match thresholds; store them rather than leaving the defaults.
+            const thresholds = SuggestedMatchThresholds(this.SuggestionResult.potentialMatchThreshold, this.SuggestionResult.absoluteMatchThreshold);
+            if (thresholds) {
+                entityDoc.PotentialMatchThreshold = thresholds.Potential;
+                entityDoc.AbsoluteMatchThreshold = thresholds.Absolute;
+            }
             const saved = await entityDoc.Save();
             if (saved) {
                 MJNotificationService.Instance.CreateSimpleNotification(`Entity Document "${this.SaveDocumentName}" created successfully`, 'success', 3000);
@@ -2049,8 +2120,9 @@ let VectorManagementResourceComponent = class VectorManagementResourceComponent
         // hands out its own cached array, which this component must not mutate.
         this.vectorIndexes = [...AIEngineBase.Instance.VectorIndexes];
         // Build per-EntityDocument aggregate stats (vector count + last synced).
-        // Each query fetches only the most recent row (MaxRows: 1) and uses
-        // TotalRowCount for the actual vector count — avoids loading all rows.
+        // Each query fetches the two most recent rows and uses TotalRowCount for the
+        // vector count, which avoids loading all rows. A full page triggers the
+        // count, and a short page is itself the total.
         // AI Models come from a different domain — fetched in the same batch.
         const rv = RunView.FromMetadataProvider(this.ProviderToUse);
         const erdQueries = this.entityDocuments.map(doc => ({
@@ -2075,7 +2147,7 @@ let VectorManagementResourceComponent = class VectorManagementResourceComponent
                 const rows = result.Results;
                 const lastDate = rows.length > 0 ? new Date(rows[0].__mj_UpdatedAt) : null;
                 this.erdStats.set(this.entityDocuments[i].ID, {
-                    vectorCount: result.TotalRowCount,
+                    vectorCount: result.TotalRowCount ?? 0,
                     lastSynced: lastDate,
                 });
             }
@@ -2229,10 +2301,9 @@ let VectorManagementResourceComponent = class VectorManagementResourceComponent
             VectorDatabaseID: vi.VectorDatabaseID,
             EmbeddingModelID: vi.EmbeddingModelID
         }));
-        // Pre-select first index if available
-        if (this.AvailableVectorIndexes.length > 0 && !this.SelectedVectorIndexID) {
-            this.SelectedVectorIndexID = this.AvailableVectorIndexes[0].ID;
-        }
+        // No index is pre-selected: the first index is whatever happens to sort first (here, another
+        // feature's shared index), and a chosen index decides the database and model Save stores.
+        // Auto finds or creates the index for the database and model shown.
     }
     /** Find the best embedding model from loaded AI models */
     findEmbeddingModel() {
@@ -2288,9 +2359,9 @@ let VectorManagementResourceComponent = class VectorManagementResourceComponent
         // An explicitly chosen index fixes the DB + model. "Auto (create/find matching index)" resolves
         // (or creates) the index for the chosen DB + model, so the syncer always has a VectorIndexID:
         // it refuses to run without one, which made the Auto choice a dead end before.
-        const chosen = this.SelectedVectorIndexID
-            ? this.AvailableVectorIndexes.find(i => UUIDsEqual(i.ID, this.SelectedVectorIndexID))
-            : undefined;
+        // Only an index that matches the database and model shown counts as chosen, so the stored
+        // database and model are always the ones the dropdowns displayed.
+        const chosen = ChosenIndexForSave(this.suggestSelection, this.AvailableVectorIndexes);
         if (chosen) {
             entityDoc.VectorDatabaseID = chosen.VectorDatabaseID;
             entityDoc.AIModelID = chosen.EmbeddingModelID;
@@ -2351,7 +2422,7 @@ let VectorManagementResourceComponent = class VectorManagementResourceComponent
         // a field the picker never offered. Refuse before anything is written — once values
         // reach the vector index they are retrievable by similarity search, outside the
         // entity permissions that guard the source column, and not fully reversible.
-        const sensitive = SensitiveFieldsInTemplate(templateText);
+        const sensitive = SensitiveFieldsInTemplate(templateText, this.vectorFieldPurpose(this.SuggestUseCase));
         if (sensitive.length > 0) {
             throw new Error(`This template references ${sensitive.length === 1 ? 'a field' : 'fields'} that must not be ` +
                 `vectorized: ${sensitive.join(', ')}. Embedding copies the values into the vector index, ` +
@@ -2435,6 +2506,7 @@ let VectorManagementResourceComponent = class VectorManagementResourceComponent
             ExtraFilter: `Name='${EscapeSQLString(this.SaveDocumentName)}'`,
             ResultType: 'entity_object',
             MaxRows: 1,
+            SkipTotalRowCount: true,
         });
         if (existing.Success && existing.Results.length > 0) {
             const priorDoc = existing.Results[0];
@@ -2479,6 +2551,7 @@ let VectorManagementResourceComponent = class VectorManagementResourceComponent
                 : `Name='${EscapeSQLString(templateName)}' AND UserID='${md.CurrentUser.ID}'`,
             ResultType: 'entity_object',
             MaxRows: 1,
+            SkipTotalRowCount: true,
         });
         if (existing.Success && existing.Results.length > 0) {
             return existing.Results[0];
@@ -2503,6 +2576,7 @@ let VectorManagementResourceComponent = class VectorManagementResourceComponent
             ResultType: 'entity_object',
             OrderBy: 'Priority ASC',
             MaxRows: 1,
+            SkipTotalRowCount: true,
         });
         if (existing.Success && existing.Results.length > 0) {
             return existing.Results[0];
@@ -2520,6 +2594,7 @@ let VectorManagementResourceComponent = class VectorManagementResourceComponent
             Fields: ['Name'],
             ResultType: 'simple',
             MaxRows: 1,
+            SkipTotalRowCount: true,
         });
         return result.Success && result.Results.length > 0 && result.Results[0].Name === name;
     }
@@ -2579,7 +2654,7 @@ let VectorManagementResourceComponent = class VectorManagementResourceComponent
             BypassCache: true,
         });
         if (result.Success) {
-            row.VectorCount = result.TotalRowCount;
+            row.VectorCount = result.TotalRowCount ?? 0;
             row.LastSynced = result.Results.length > 0 ? new Date(result.Results[0].__mj_UpdatedAt) : (row.LastSynced ?? new Date());
             row.Status = row.VectorCount > 0 ? 'Synced' : 'Pending';
             row.PercentComplete = 100;
@@ -2646,11 +2721,19 @@ let VectorManagementResourceComponent = class VectorManagementResourceComponent
         }
         return prompt;
     }
+    /**
+     * What a document for this use case embeds its fields for. Only a duplicate-detection document
+     * may embed a date of birth (see sensitive-fields.ts).
+     */
+    vectorFieldPurpose(useCase) {
+        return EntityDocumentTypeForUseCase(useCase) === 'Record Duplicate' ? 'duplicate-detection' : 'other';
+    }
     /** Build the data payload for the suggestion prompt */
     buildPromptData(entity, useCase) {
         // LAYER 1 of the sensitive-field refusal: the model never sees these columns, so it
         // cannot suggest them. See sensitive-fields.ts for why this cannot live in the prompt.
-        const fields = WithoutSensitiveFields(entity.Fields).map(f => ({
+        const purpose = this.vectorFieldPurpose(useCase);
+        const fields = WithoutSensitiveFields(entity.Fields, purpose).map(f => ({
             Name: f.Name,
             Type: f.Type,
             IsPrimaryKey: f.IsPrimaryKey,
@@ -2667,7 +2750,7 @@ let VectorManagementResourceComponent = class VectorManagementResourceComponent
             const relatedEntity = md.Entities.find(e => e.Name === r.RelatedEntity);
             // Layer 1 covers related entities too: their fields reach the model here.
             const relFields = relatedEntity
-                ? WithoutSensitiveFields(relatedEntity.Fields)
+                ? WithoutSensitiveFields(relatedEntity.Fields, purpose)
                     .filter(f => !f.IsPrimaryKey && f.Type !== 'datetimeoffset')
                     .map(f => f.Name)
                 : [];
@@ -2701,20 +2784,20 @@ let VectorManagementResourceComponent = class VectorManagementResourceComponent
             i0.ɵɵconditional(ctx.HideToolbar ? 1 : -1);
         } }, dependencies: [i1.NgTemplateOutlet, i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.DefaultValueAccessor, i2.CheckboxControlValueAccessor, i2.SelectControlValueAccessor, i2.NgControlStatus, i2.NgModel, i3.CodeEditorComponent, i4.LoadingComponent, i5.KPICardComponent, i6.MJPageHeaderComponent, i6.MJPageLayoutComponent, i6.MJPageBodyComponent, i6.MJViewToggleComponent, i6.MJEmptyStateComponent, i6.MJAlertComponent, i1.DecimalPipe], styles: ["\n\n\n\n\n\n\n.vector-loading[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: 400px;\n}\n\n\n.view-mode-toggle[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 0.25rem;\n    padding: 0 24px 0;\n    margin-bottom: -12px;\n}\n\n.view-mode-btn[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.4rem;\n    padding: 0.4rem 0.85rem;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n    font-size: 0.82rem;\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.view-mode-btn[_ngcontent-%COMP%]:hover {\n    color: var(--mj-text-primary);\n    background: var(--mj-bg-surface-hover);\n}\n\n.view-mode-btn-active[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\n}\n\n\n.vector-dashboard[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n    padding: 24px;\n    background: var(--mj-bg-page);\n    min-height: 100%;\n}\n\n\n.kpi-row[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    gap: 16px;\n}\n\n@media (max-width: 1200px) {\n    .kpi-row[_ngcontent-%COMP%] {\n        grid-template-columns: repeat(2, 1fr);\n    }\n}\n\n@media (max-width: 600px) {\n    .kpi-row[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n    }\n}\n\n\n.content-area[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 1fr 300px;\n    gap: 24px;\n    align-items: start;\n}\n\n@media (max-width: 1024px) {\n    .content-area[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n    }\n}\n\n\n.sync-table-panel[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 12px;\n    overflow: hidden;\n}\n\n.panel-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 20px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.panel-title[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 15px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.panel-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    font-size: 14px;\n}\n\n.refresh-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 14px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n    font-size: 12px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.refresh-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-hover);\n    color: var(--mj-text-primary);\n    border-color: var(--mj-border-strong);\n}\n\n\n.table-wrapper[_ngcontent-%COMP%] {\n    overflow-x: auto;\n}\n\n.sync-table[_ngcontent-%COMP%] {\n    width: 100%;\n    border-collapse: collapse;\n}\n\n.sync-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n    padding: 10px 16px;\n    font-size: 11px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--mj-text-muted);\n    background: var(--mj-bg-surface-card);\n    border-bottom: 1px solid var(--mj-border-default);\n    text-align: left;\n    white-space: nowrap;\n}\n\n.sync-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n    padding: 12px 16px;\n    font-size: 13px;\n    color: var(--mj-text-primary);\n    border-bottom: 1px solid var(--mj-border-subtle);\n    vertical-align: middle;\n}\n\n.sync-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-hover);\n}\n\n.sync-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child   td[_ngcontent-%COMP%] {\n    border-bottom: none;\n}\n\n.text-right[_ngcontent-%COMP%] {\n    text-align: right;\n}\n\n.text-center[_ngcontent-%COMP%] {\n    text-align: center;\n}\n\n.entity-name[_ngcontent-%COMP%] {\n    font-weight: 600;\n}\n\n.document-name[_ngcontent-%COMP%] {\n    color: var(--mj-text-secondary);\n}\n\n.document-type[_ngcontent-%COMP%] {\n    color: var(--mj-text-secondary);\n    white-space: nowrap;\n}\n\n.vector-count[_ngcontent-%COMP%] {\n    font-variant-numeric: tabular-nums;\n    font-weight: 600;\n}\n\n.last-synced[_ngcontent-%COMP%] {\n    color: var(--mj-text-secondary);\n    font-size: 12px;\n    white-space: nowrap;\n}\n\n\n\n.actions-cell[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 6px;\n    align-items: center;\n    justify-content: center;\n}\n\n.schedule-btn[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 30px;\n    height: 30px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    background: transparent;\n    color: var(--mj-text-muted);\n    font-size: 12px;\n    cursor: pointer;\n    transition: all 0.15s;\n}\n\n.schedule-btn[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    border-color: var(--mj-brand-primary);\n}\n\n.edit-btn[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 30px;\n    height: 30px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    background: transparent;\n    color: var(--mj-text-muted);\n    font-size: 12px;\n    cursor: pointer;\n    transition: all 0.15s;\n}\n\n.edit-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-hover);\n    color: var(--mj-text-primary);\n    border-color: var(--mj-border-strong);\n}\n\n\n.schedule-dialog[_ngcontent-%COMP%] {\n    width: 440px;\n    max-width: 90vw;\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);\n    overflow: hidden;\n}\n\n.schedule-cron-preview[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 0 0;\n    font-size: 0.82rem;\n    color: var(--mj-text-muted);\n}\n\n.schedule-toggle-row[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 12px;\n}\n\n.edit-delete-btn[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 16px;\n    border: 1px solid var(--mj-status-error-border);\n    border-radius: 6px;\n    background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n    color: var(--mj-status-error-text);\n    font-size: 13px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: all 0.15s;\n}\n\n.edit-delete-btn[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-status-error) 20%, var(--mj-bg-surface));\n}\n\n.edit-readonly-value[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n    padding: 8px 0;\n}\n\n\n.status-badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    padding: 4px 10px;\n    border-radius: 999px;\n    font-size: 11px;\n    font-weight: 600;\n    white-space: nowrap;\n}\n\n.status-synced[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-success) 12%, var(--mj-bg-surface));\n    color: var(--mj-status-success-text, var(--mj-status-success));\n}\n\n.status-syncing[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n}\n\n.status-error[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-error) 12%, var(--mj-bg-surface));\n    color: var(--mj-status-error-text, var(--mj-status-error));\n}\n\n.status-pending[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-warning) 12%, var(--mj-bg-surface));\n    color: var(--mj-status-warning-text, var(--mj-status-warning));\n}\n\n\n.sync-btn[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    padding: 5px 12px;\n    border: 1px solid var(--mj-brand-primary);\n    border-radius: 6px;\n    background: transparent;\n    color: var(--mj-brand-primary);\n    font-size: 12px;\n    font-weight: 600;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.sync-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n}\n\n.sync-btn[_ngcontent-%COMP%]:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n}\n\n\n\n\n.sidebar[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n}\n\n.sidebar-card[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 12px;\n    padding: 16px 20px;\n}\n\n.sidebar-title[_ngcontent-%COMP%] {\n    margin: 0 0 14px 0;\n    font-size: 13px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.sidebar-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    font-size: 13px;\n}\n\n\n.health-row[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-bottom: 6px;\n}\n\n.health-dot[_ngcontent-%COMP%] {\n    width: 10px;\n    height: 10px;\n    border-radius: 50%;\n    flex-shrink: 0;\n}\n\n.health-healthy[_ngcontent-%COMP%] {\n    background: var(--mj-status-success);\n    box-shadow: 0 0 6px color-mix(in srgb, var(--mj-status-success) 50%, transparent);\n}\n\n.health-degraded[_ngcontent-%COMP%] {\n    background: var(--mj-status-warning);\n    box-shadow: 0 0 6px color-mix(in srgb, var(--mj-status-warning) 50%, transparent);\n}\n\n.health-offline[_ngcontent-%COMP%] {\n    background: var(--mj-status-error);\n    box-shadow: 0 0 6px color-mix(in srgb, var(--mj-status-error) 50%, transparent);\n}\n\n.health-label[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.health-status[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-text-muted);\n    padding-left: 18px;\n}\n\n.health-reason[_ngcontent-%COMP%] {\n    font-size: 11px;\n    line-height: 1.4;\n    color: var(--mj-text-muted);\n    padding-left: 18px;\n    margin-top: 4px;\n}\n\n\n.model-info[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.info-row[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n}\n\n.info-label[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-text-muted);\n}\n\n.info-value[_ngcontent-%COMP%] {\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n\n.gauge-container[_ngcontent-%COMP%] {\n    margin-bottom: 8px;\n}\n\n.gauge-bar[_ngcontent-%COMP%] {\n    height: 8px;\n    border-radius: 4px;\n    background: var(--mj-bg-surface-sunken);\n    overflow: hidden;\n    margin-bottom: 6px;\n}\n\n.gauge-fill[_ngcontent-%COMP%] {\n    height: 100%;\n    border-radius: 4px;\n    background: var(--mj-brand-primary);\n    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);\n    min-width: 2px;\n}\n\n.gauge-label[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n}\n\n.storage-detail[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-text-muted);\n}\n\n\n.panel-actions[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n\n.suggest-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 14px;\n    border: 1px solid var(--mj-brand-primary);\n    border-radius: 6px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-brand-primary);\n    font-size: 12px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.suggest-btn[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border-color: var(--mj-brand-primary-hover);\n}\n\n\n.slide-panel-overlay[_ngcontent-%COMP%] {\n    position: fixed;\n    inset: 0;\n    background: var(--mj-bg-overlay);\n    z-index: 100000;\n}\n\n.slide-panel[_ngcontent-%COMP%] {\n    position: fixed;\n    top: 0;\n    right: 0;\n    height: 100vh;\n    width: 480px;\n    max-width: 90vw;\n    background: var(--mj-bg-surface);\n    box-shadow: -4px 0 24px color-mix(in srgb, var(--mj-text-primary) 12%, transparent);\n    transform: translateX(100%);\n    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    overflow-y: auto;\n}\n\n.slide-panel.open[_ngcontent-%COMP%] {\n    transform: translateX(0);\n}\n\n.suggest-dialog-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 20px 24px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.suggest-dialog-title[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 16px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.suggest-dialog-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n}\n\n.suggest-close-btn[_ngcontent-%COMP%] {\n    border: none;\n    background: none;\n    color: var(--mj-text-muted);\n    font-size: 16px;\n    cursor: pointer;\n    padding: 4px;\n}\n\n.suggest-close-btn[_ngcontent-%COMP%]:hover {\n    color: var(--mj-text-primary);\n}\n\n.suggest-dialog-body[_ngcontent-%COMP%] {\n    padding: 24px;\n}\n\n\n.suggest-form[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n}\n\n.suggest-field[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n}\n\n.suggest-label[_ngcontent-%COMP%] {\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n}\n\n.suggest-select[_ngcontent-%COMP%] {\n    padding: 8px 12px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-primary);\n    font-size: 13px;\n}\n\n.suggest-select[_ngcontent-%COMP%]:focus {\n    outline: none;\n    border-color: var(--mj-border-focus);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n\n\n.use-case-options[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n    flex-wrap: wrap;\n}\n\n.use-case-btn[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 16px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n    font-size: 13px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.use-case-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-hover);\n    border-color: var(--mj-border-strong);\n    color: var(--mj-text-primary);\n}\n\n.use-case-btn-active[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\n    font-weight: 600;\n}\n\n.use-case-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 12px;\n}\n\n\n\n.entity-picker[_ngcontent-%COMP%] {\n    position: relative;\n}\n\n.entity-picker-trigger[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    width: 100%;\n    padding: 9px 12px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-primary);\n    font-size: 13px;\n    cursor: pointer;\n    text-align: left;\n    transition: border-color 0.15s;\n}\n\n.entity-picker-trigger[_ngcontent-%COMP%]:hover {\n    border-color: var(--mj-border-strong);\n}\n\n.entity-picker-placeholder[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n    flex: 1;\n}\n\n.entity-picker-value[_ngcontent-%COMP%] {\n    flex: 1;\n    font-weight: 500;\n}\n\n.entity-picker-arrow[_ngcontent-%COMP%] {\n    font-size: 10px;\n    color: var(--mj-text-muted);\n    transition: transform 0.2s;\n}\n\n.entity-picker-dropdown[_ngcontent-%COMP%] {\n    position: absolute;\n    top: calc(100% + 4px);\n    left: 0;\n    right: 0;\n    background: var(--mj-bg-surface-elevated, var(--mj-bg-surface));\n    border: 1px solid var(--mj-border-default);\n    border-radius: 10px;\n    box-shadow: 0 8px 32px color-mix(in srgb, var(--mj-text-primary) 15%, transparent);\n    z-index: 100;\n    max-height: 350px;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n}\n\n.entity-picker-search[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 14px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.entity-picker-search[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n    font-size: 13px;\n}\n\n.entity-picker-search-input[_ngcontent-%COMP%] {\n    flex: 1;\n    border: none;\n    background: transparent;\n    color: var(--mj-text-primary);\n    font-size: 13px;\n    outline: none;\n}\n\n.entity-picker-search-input[_ngcontent-%COMP%]::placeholder {\n    color: var(--mj-text-disabled);\n}\n\n.entity-picker-list[_ngcontent-%COMP%] {\n    overflow-y: auto;\n    max-height: 300px;\n    padding: 4px 0;\n}\n\n.entity-picker-group-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 14px 4px;\n    font-size: 11px;\n    font-weight: 700;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    position: sticky;\n    top: 0;\n    background: var(--mj-bg-surface-elevated, var(--mj-bg-surface));\n}\n\n.entity-picker-group-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 10px;\n}\n\n.entity-picker-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    width: 100%;\n    padding: 7px 14px 7px 28px;\n    border: none;\n    background: transparent;\n    color: var(--mj-text-primary);\n    font-size: 13px;\n    cursor: pointer;\n    text-align: left;\n    transition: background 0.1s;\n}\n\n.entity-picker-item[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-hover);\n}\n\n.entity-picker-item-selected[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    font-weight: 600;\n}\n\n.entity-picker-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--mj-text-muted);\n}\n\n.entity-picker-item-selected[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n}\n\n.entity-picker-item-focused[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-hover);\n    outline: 2px solid var(--mj-brand-primary);\n    outline-offset: -2px;\n}\n\n.entity-picker-empty[_ngcontent-%COMP%] {\n    padding: 20px 14px;\n    text-align: center;\n    color: var(--mj-text-disabled);\n    font-size: 13px;\n}\n\n\n\n.template-editor-wrapper[_ngcontent-%COMP%] {\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    overflow: hidden;\n    min-height: 120px;\n    max-height: 300px;\n}\n\n.template-editor-wrapper[_ngcontent-%COMP%]     .cm-editor {\n    min-height: 120px;\n    max-height: 300px;\n    font-size: 13px;\n}\n\n.suggest-submit-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 6px;\n    padding: 10px 20px;\n    border: none;\n    border-radius: 6px;\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    font-size: 13px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: background 0.2s ease;\n}\n\n.suggest-submit-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n    background: var(--mj-brand-primary-hover);\n}\n\n\n.suggest-submit-btn[_ngcontent-%COMP%]:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n}\n\n\n.suggest-result[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n}\n\n.result-section[_ngcontent-%COMP%] {\n    border-bottom: 1px solid var(--mj-border-subtle);\n    padding-bottom: 12px;\n}\n\n.result-section[_ngcontent-%COMP%]:last-child {\n    border-bottom: none;\n}\n\n.result-heading[_ngcontent-%COMP%] {\n    margin: 0 0 8px 0;\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.result-template[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-sunken);\n    border: 1px solid var(--mj-border-subtle);\n    border-radius: 6px;\n    padding: 12px;\n    font-size: 12px;\n    color: var(--mj-text-primary);\n    white-space: pre-wrap;\n    word-break: break-all;\n    margin: 0;\n}\n\n.result-tags[_ngcontent-%COMP%] {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 6px;\n}\n\n.result-tag[_ngcontent-%COMP%] {\n    padding: 3px 10px;\n    border-radius: 12px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    font-size: 12px;\n    font-weight: 500;\n}\n\n.result-relationship[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 4px 0;\n}\n\n.rel-name[_ngcontent-%COMP%] {\n    font-weight: 600;\n    font-size: 13px;\n    color: var(--mj-text-primary);\n}\n\n.rel-fields[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-text-muted);\n}\n\n.result-thresholds[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 24px;\n}\n\n.threshold-item[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n}\n\n.threshold-label[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-text-muted);\n}\n\n.threshold-value[_ngcontent-%COMP%] {\n    font-size: 18px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.result-reasoning[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n    line-height: 1.5;\n}\n\n.result-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n    padding-top: 8px;\n}\n\n.suggest-close-action[_ngcontent-%COMP%] {\n    padding: 10px 20px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n    font-size: 13px;\n    font-weight: 500;\n    cursor: pointer;\n}\n\n.suggest-close-action[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-hover);\n}\n\n\n.suggest-input[_ngcontent-%COMP%] {\n    padding: 8px 12px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-primary);\n    font-size: 13px;\n    width: 100%;\n    box-sizing: border-box;\n}\n\n.suggest-input[_ngcontent-%COMP%]:focus {\n    outline: none;\n    border-color: var(--mj-border-focus);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n\n.suggest-try-again-btn[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    color: var(--mj-brand-primary);\n    border: 1px solid var(--mj-brand-primary);\n}\n\n.suggest-try-again-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n\n.save-spinner[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 8px 0;\n}\n\n\n.edit-template-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 8px;\n}\n\n.edit-regenerate-btn[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    padding: 4px 10px;\n    border: 1px solid var(--mj-brand-primary);\n    border-radius: 6px;\n    background: transparent;\n    color: var(--mj-brand-primary);\n    font-size: 11px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: all 0.15s ease;\n    white-space: nowrap;\n}\n\n.edit-regenerate-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.edit-regenerate-btn[_ngcontent-%COMP%]:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n}\n\n\n.no-index-warning-dialog[_ngcontent-%COMP%] {\n    position: fixed;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    width: 440px;\n    max-width: 90vw;\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    box-shadow: 0 20px 60px color-mix(in srgb, var(--mj-text-primary) 20%, transparent);\n    padding: 32px;\n    text-align: center;\n}\n\n.no-index-warning-icon[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 56px;\n    height: 56px;\n    margin: 0 auto 16px;\n    border-radius: 50%;\n    background: color-mix(in srgb, var(--mj-status-warning) 12%, var(--mj-bg-surface));\n}\n\n.no-index-warning-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 24px;\n    color: var(--mj-status-warning);\n}\n\n.no-index-warning-title[_ngcontent-%COMP%] {\n    margin: 0 0 8px 0;\n    font-size: 18px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.no-index-warning-message[_ngcontent-%COMP%] {\n    margin: 0 0 24px 0;\n    font-size: 14px;\n    line-height: 1.5;\n    color: var(--mj-text-secondary);\n}\n\n.no-index-warning-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n    justify-content: center;\n}\n\n\n\n\n\n@media (max-width: 768px) {\n    .panel-header[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 12px;\n    }\n\n    .panel-actions[_ngcontent-%COMP%] {\n        flex-wrap: wrap;\n    }\n}\n\n@media (max-width: 600px) {\n    .slide-panel[_ngcontent-%COMP%] {\n        width: 100vw;\n        max-width: 100vw;\n    }\n}\n\n@media (max-width: 480px) {\n    .vector-dashboard[_ngcontent-%COMP%] {\n        padding: 12px;\n    }\n\n    .suggest-btn[_ngcontent-%COMP%]   .suggest-btn-text[_ngcontent-%COMP%] {\n        display: none;\n    }\n}"] });
 };
-VectorManagementResourceComponent = __decorate([
+VectorManagementResourceComponent = VectorManagementResourceComponent_1 = __decorate([
     RegisterClass(BaseResourceComponent, 'VectorManagementResource')
 ], VectorManagementResourceComponent);
 export { VectorManagementResourceComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(VectorManagementResourceComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'app-vector-management-resource', template: "@if (!HideToolbar) {\n  <mj-page-layout>\n    <mj-page-header\n      Title=\"Vector Management\"\n      Icon=\"fa-solid fa-cubes\"\n      Subtitle=\"Vector index health, embeddings, and entity sync status\">\n      <div actions>\n        <mj-view-toggle\n          [Options]=\"VectorViewOptions\"\n          [ActiveKey]=\"ViewMode\"\n          (KeyChange)=\"ViewMode = $any($event)\">\n        </mj-view-toggle>\n      </div>\n    </mj-page-header>\n    <mj-page-body [Flex]=\"true\">\n      <ng-container *ngTemplateOutlet=\"vectorBody\"></ng-container>\n    </mj-page-body>\n  </mj-page-layout>\n}\n@if (HideToolbar) {\n  <ng-container *ngTemplateOutlet=\"vectorBody\"></ng-container>\n}\n\n<ng-template #vectorBody>\n@if (IsLoading) {\n  <div class=\"vector-loading\">\n    <mj-loading text=\"Loading vector management data...\"></mj-loading>\n  </div>\n} @else {\n  <div class=\"vector-dashboard\">\n\n    <!-- KPI Cards Row -->\n    <div class=\"kpi-row\">\n      @for (card of KPICards; track card.title) {\n        <app-kpi-card [data]=\"card\"></app-kpi-card>\n      }\n    </div>\n\n    <!-- Main Content Area: Table + Sidebar -->\n    <div class=\"content-area\">\n      <!-- Entity Sync Table -->\n      <div class=\"sync-table-panel\">\n        <div class=\"panel-header\">\n          <h3 class=\"panel-title\">\n            <i class=\"fa-solid fa-table-list\"></i>\n            Entity Sync Status\n          </h3>\n          <div class=\"panel-actions\">\n            <button class=\"suggest-btn\" (click)=\"OpenSuggestDialog()\" title=\"Use AI to suggest an Entity Document template\">\n              <i class=\"fa-solid fa-wand-magic-sparkles\"></i>\n              <span class=\"suggest-btn-text\">Suggest Document</span>\n            </button>\n            <button class=\"refresh-btn\" (click)=\"LoadData(true)\" title=\"Refresh data\">\n              <i class=\"fa-solid fa-arrows-rotate\"></i>\n              Refresh\n            </button>\n          </div>\n        </div>\n\n        @if (SyncRows.length === 0) {\n          <mj-empty-state Icon=\"fa-solid fa-folder-open\"\n            Title=\"No entity documents configured for vectorization.\" />\n        } @else {\n          <div class=\"table-wrapper\">\n            <table class=\"sync-table\">\n              <thead>\n                <tr>\n                  <th>Entity</th>\n                  <th>Document</th>\n                  <th>Type</th>\n                  <th class=\"text-right\">Vectors</th>\n                  <th>Last Synced</th>\n                  <th>Status</th>\n                  <th class=\"text-center\">Actions</th>\n                </tr>\n              </thead>\n              <tbody>\n                @for (row of SyncRows; track row.EntityDocumentID) {\n                  <tr>\n                    <td class=\"entity-name\">{{ row.EntityName }}</td>\n                    <td class=\"document-name\">{{ row.DocumentName }}</td>\n                    <td class=\"document-type\">{{ row.DocumentType }}</td>\n                    <td class=\"text-right vector-count\">{{ row.VectorCount | number }}</td>\n                    <td class=\"last-synced\">{{ FormatDate(row.LastSynced) }}</td>\n                    <td>\n                      <span class=\"status-badge\" [class]=\"GetStatusClass(row.Status)\">\n                        <i [class]=\"GetStatusIcon(row.Status)\"></i>\n                        @if (row.Status === 'Syncing' && row.PercentComplete > 0) {\n                          {{ row.PercentComplete }}%\n                        } @else {\n                          {{ row.Status }}\n                        }\n                      </span>\n                    </td>\n                    <td class=\"text-center actions-cell\">\n                      <button\n                        class=\"sync-btn\"\n                        [disabled]=\"IsSyncing(row.EntityDocumentID)\"\n                        (click)=\"SyncEntity(row.EntityDocumentID)\"\n                        title=\"Sync now\">\n                        @if (IsSyncing(row.EntityDocumentID)) {\n                          <i class=\"fa-solid fa-spinner fa-spin\"></i>\n                          {{ row.PercentComplete > 0 ? row.PercentComplete + '%' : 'Sync' }}\n                        } @else {\n                          <i class=\"fa-solid fa-play\"></i>\n                          Sync\n                        }\n                      </button>\n                      <button\n                        class=\"schedule-btn\"\n                        (click)=\"OpenScheduleSyncDialog(row.EntityDocumentID)\"\n                        title=\"Schedule recurring sync\">\n                        <i class=\"fa-regular fa-clock\"></i>\n                      </button>\n                      <button\n                        class=\"edit-btn\"\n                        (click)=\"OpenEditPanel(row.EntityDocumentID)\"\n                        title=\"Edit entity document\">\n                        <i class=\"fa-solid fa-pen\"></i>\n                      </button>\n                    </td>\n                  </tr>\n                }\n              </tbody>\n            </table>\n          </div>\n        }\n      </div>\n\n      <!-- Sidebar Panels -->\n      <div class=\"sidebar\">\n        <!-- Vector DB Health -->\n        <div class=\"sidebar-card\">\n          <h4 class=\"sidebar-title\">\n            <i class=\"fa-solid fa-heart-pulse\"></i>\n            Vector DB Health\n          </h4>\n          <div class=\"health-row\">\n            <span class=\"health-dot\" [class]=\"DBHealthClass\"></span>\n            <span class=\"health-label\">{{ VectorDBName }}</span>\n          </div>\n          <div class=\"health-status\" [title]=\"VectorDBStatusReason\">{{ VectorDBStatus }}</div>\n          @if (VectorDBStatusReason) {\n            <div class=\"health-reason\">{{ VectorDBStatusReason }}</div>\n          }\n        </div>\n\n        <!-- Embedding Model Info -->\n        <div class=\"sidebar-card\">\n          <h4 class=\"sidebar-title\">\n            <i class=\"fa-solid fa-microchip\"></i>\n            Embedding Model\n          </h4>\n          <div class=\"model-info\">\n            <div class=\"info-row\">\n              <span class=\"info-label\">Model</span>\n              <span class=\"info-value\" [title]=\"'Embeddings are generated by this model; the index above stores the resulting vectors.'\">{{ EmbeddingModel.Name }}</span>\n            </div>\n            @if (EmbeddingModel.Dimensions != null) {\n              <div class=\"info-row\">\n                <span class=\"info-label\">Dimensions</span>\n                <span class=\"info-value\">{{ EmbeddingModel.Dimensions | number }}</span>\n              </div>\n            }\n          </div>\n        </div>\n\n        <!-- Storage Usage -->\n        <div class=\"sidebar-card\">\n          <h4 class=\"sidebar-title\">\n            <i class=\"fa-solid fa-hard-drive\"></i>\n            Vectorization Coverage\n          </h4>\n          <div class=\"gauge-container\">\n            <div class=\"gauge-bar\">\n              <div class=\"gauge-fill\" [style.width.%]=\"StorageUsagePercent\"></div>\n            </div>\n            <div class=\"gauge-label\">{{ StorageLabel }} of records vectorized</div>\n          </div>\n          <div class=\"storage-detail\">\n            {{ TotalVectors | number }} vectors stored\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Edit Entity Document Slide-in Panel -->\n  @if (ShowEditPanel) {\n    <div class=\"slide-panel-overlay\" (click)=\"CloseEditPanel()\">\n      <div class=\"slide-panel open\" (click)=\"$event.stopPropagation()\">\n        <div class=\"suggest-dialog-header\">\n          <h3 class=\"suggest-dialog-title\">\n            <i class=\"fa-solid fa-pen\"></i>\n            Edit Entity Document\n          </h3>\n          <button class=\"suggest-close-btn\" (click)=\"CloseEditPanel()\">\n            <i class=\"fa-solid fa-times\"></i>\n          </button>\n        </div>\n        <div class=\"suggest-dialog-body\">\n          <div class=\"suggest-form\">\n            <div class=\"suggest-field\">\n              <label class=\"suggest-label\">Entity</label>\n              <span class=\"edit-readonly-value\">{{ EditDocEntityName }}</span>\n            </div>\n            <div class=\"suggest-field\">\n              <label class=\"suggest-label\">Type</label>\n              <span class=\"edit-readonly-value\">{{ EditDocType }}</span>\n            </div>\n\n            <!-- Template Section -->\n            <div class=\"suggest-field\">\n              <div class=\"edit-template-header\">\n                <label class=\"suggest-label\">Template</label>\n                <button class=\"edit-regenerate-btn\"\n                        [disabled]=\"IsEditRegenerating\"\n                        (click)=\"RegenerateTemplate()\"\n                        title=\"Regenerate template using AI\">\n                  @if (IsEditRegenerating) {\n                    <i class=\"fa-solid fa-spinner fa-spin\"></i> Regenerating...\n                  } @else {\n                    <i class=\"fa-solid fa-wand-magic-sparkles\"></i> Regenerate with AI\n                  }\n                </button>\n              </div>\n              <div class=\"template-editor-wrapper\">\n                <mj-code-editor\n                  [value]=\"EditDocTemplate\"\n                  language=\"markdown\"\n                  [readonly]=\"false\"\n                  [lineWrapping]=\"true\"\n                  (change)=\"OnEditTemplateChange($event)\">\n                </mj-code-editor>\n              </div>\n            </div>\n\n            <!-- Selected Fields (parsed from template) -->\n            @if (EditDocSelectedFields.length > 0) {\n              <div class=\"suggest-field\">\n                <label class=\"suggest-label\">Selected Fields</label>\n                <div class=\"result-tags\">\n                  @for (field of EditDocSelectedFields; track field) {\n                    <span class=\"result-tag\">{{ field }}</span>\n                  }\n                </div>\n              </div>\n            }\n\n            <div class=\"suggest-field\">\n              <label class=\"suggest-label\">Document Name</label>\n              <input class=\"suggest-input\" type=\"text\" [(ngModel)]=\"EditDocName\" />\n            </div>\n            <div class=\"suggest-field\">\n              <label class=\"suggest-label\">Embedding Model</label>\n              <select class=\"suggest-select\" [(ngModel)]=\"EditDocAIModelID\">\n                @for (model of AvailableEmbeddingModels; track model.ID) {\n                  <option [value]=\"model.ID\">{{ model.Name }}</option>\n                }\n              </select>\n            </div>\n            <div class=\"suggest-field\">\n              <label class=\"suggest-label\">Vector Database</label>\n              <select class=\"suggest-select\" [(ngModel)]=\"EditDocVectorDBID\">\n                @for (db of vectorDatabases; track db.ID) {\n                  <option [value]=\"db.ID\">{{ db.Name }}</option>\n                }\n              </select>\n            </div>\n            <div class=\"suggest-field\">\n              <label class=\"suggest-label\">Vector Index</label>\n              @if (EditFilteredIndexes.length > 0) {\n                <select class=\"suggest-select\" [(ngModel)]=\"EditDocVectorIndexID\">\n                  <option value=\"\">Auto (create/find matching index)</option>\n                  @for (idx of EditFilteredIndexes; track idx.ID) {\n                    <option [value]=\"idx.ID\">{{ idx.Name }}</option>\n                  }\n                </select>\n              } @else {\n                <span class=\"edit-readonly-value\" style=\"font-size: 13px; color: var(--mj-text-muted);\">\n                  No indexes for this database \u2014 one will be created automatically on sync\n                </span>\n              }\n            </div>\n            <div class=\"suggest-field\">\n              <label class=\"suggest-label\">Status</label>\n              <select class=\"suggest-select\" [(ngModel)]=\"EditDocStatus\">\n                <option value=\"Active\">Active</option>\n                <option value=\"Inactive\">Inactive</option>\n              </select>\n            </div>\n            <div class=\"result-actions\" style=\"margin-top: 1rem\">\n              @if (IsEditSaving || IsEditDeleting) {\n                <mj-loading text=\"Saving...\" size=\"small\"></mj-loading>\n              } @else {\n                <button class=\"suggest-submit-btn\" (click)=\"SaveEditedDocument()\">\n                  <i class=\"fa-solid fa-save\"></i> Save Changes\n                </button>\n                <button class=\"edit-delete-btn\" (click)=\"DeleteEntityDocument()\">\n                  <i class=\"fa-solid fa-trash-can\"></i> Delete\n                </button>\n                <button class=\"suggest-close-action\" (click)=\"CloseEditPanel()\">\n                  Cancel\n                </button>\n              }\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  }\n\n  <!-- Schedule Sync Dialog -->\n  @if (ShowScheduleSyncDialog) {\n    <div class=\"slide-panel-overlay\" (click)=\"CloseScheduleSyncDialog()\">\n      <div class=\"schedule-dialog\" (click)=\"$event.stopPropagation()\">\n        <div class=\"suggest-dialog-header\">\n          <h3 class=\"suggest-dialog-title\">\n            <i class=\"fa-regular fa-clock\"></i>\n            Schedule Vector Sync\n          </h3>\n          <button class=\"suggest-close-btn\" (click)=\"CloseScheduleSyncDialog()\">\n            <i class=\"fa-solid fa-times\"></i>\n          </button>\n        </div>\n        <div class=\"suggest-dialog-body\">\n          <div class=\"suggest-form\">\n            <div class=\"suggest-field\">\n              <label class=\"suggest-label\">Entity Document</label>\n              <span class=\"edit-readonly-value\">{{ ScheduleSyncDocName }}</span>\n            </div>\n            <div class=\"suggest-field\">\n              <label class=\"suggest-label\">Action</label>\n              <span class=\"edit-readonly-value\">__VectorizeEntity</span>\n            </div>\n            <div class=\"suggest-field\">\n              <label class=\"suggest-label\">Cron Expression</label>\n              <input class=\"suggest-input\" type=\"text\" [(ngModel)]=\"ScheduleSyncCron\" placeholder=\"0 2 * * *\" />\n              <div class=\"schedule-cron-preview\">\n                <i class=\"fa-solid fa-info-circle\"></i>\n                {{ GetScheduleCronPreview(ScheduleSyncCron) }}\n              </div>\n            </div>\n            <div class=\"suggest-field schedule-toggle-row\">\n              <label class=\"suggest-label\">Enabled</label>\n              <input type=\"checkbox\" class=\"mj-checkbox\" [(ngModel)]=\"ScheduleSyncEnabled\" />\n            </div>\n            <div class=\"result-actions\" style=\"margin-top: 1rem\">\n              @if (ScheduleSyncSaving) {\n                <mj-loading text=\"Saving...\" size=\"small\"></mj-loading>\n              } @else {\n                <button class=\"suggest-submit-btn\" (click)=\"SaveScheduleSync()\">\n                  <i class=\"fa-solid fa-check\"></i> Create Schedule\n                </button>\n                <button class=\"suggest-close-action\" (click)=\"CloseScheduleSyncDialog()\">\n                  Cancel\n                </button>\n              }\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  }\n\n  <!-- No Vector Index Warning Dialog -->\n  @if (ShowNoIndexWarning) {\n    <div class=\"slide-panel-overlay\" (click)=\"CloseNoIndexWarning()\">\n      <div class=\"no-index-warning-dialog\" (click)=\"$event.stopPropagation()\">\n        <div class=\"no-index-warning-icon\">\n          <i class=\"fa-solid fa-triangle-exclamation\"></i>\n        </div>\n        <h3 class=\"no-index-warning-title\">Vector Index Required</h3>\n        <p class=\"no-index-warning-message\">\n          You need to create at least one vector database and index before creating entity documents.\n          Go to the Configuration section to set up a vector database and create an index.\n        </p>\n        <div class=\"no-index-warning-actions\">\n          <button class=\"suggest-submit-btn\" (click)=\"GoToConfiguration()\">\n            <i class=\"fa-solid fa-gear\"></i> Go to Configuration\n          </button>\n          <button class=\"suggest-close-action\" (click)=\"CloseNoIndexWarning()\">\n            Close\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n\n  <!-- Suggest Document Slide-in Panel -->\n  @if (ShowSuggestDialog) {\n    <div class=\"slide-panel-overlay\" (click)=\"CloseSuggestDialog()\">\n      <div class=\"slide-panel\" [class.open]=\"ShowSuggestDialog\" (click)=\"$event.stopPropagation()\">\n        <div class=\"suggest-dialog-header\">\n          <h3 class=\"suggest-dialog-title\">\n            <i class=\"fa-solid fa-wand-magic-sparkles\"></i>\n            AI Document Suggestion\n          </h3>\n          <button class=\"suggest-close-btn\" (click)=\"CloseSuggestDialog()\">\n            <i class=\"fa-solid fa-times\"></i>\n          </button>\n        </div>\n        <div class=\"suggest-dialog-body\">\n          @if (!SuggestionResult) {\n            <div class=\"suggest-form\">\n              <div class=\"suggest-field\">\n                <label class=\"suggest-label\">Entity</label>\n                <div class=\"entity-picker\">\n                  <button class=\"entity-picker-trigger\" (click)=\"ToggleEntityPicker()\">\n                    @if (SuggestEntityName) {\n                      <i class=\"fa-solid fa-table\"></i>\n                      <span class=\"entity-picker-value\">{{ SuggestEntityName }}</span>\n                    } @else {\n                      <i class=\"fa-solid fa-search\"></i>\n                      <span class=\"entity-picker-placeholder\">Search and select an entity...</span>\n                    }\n                    <i class=\"fa-solid fa-chevron-down entity-picker-arrow\"></i>\n                  </button>\n                  @if (ShowEntityPicker) {\n                    <div class=\"entity-picker-dropdown\" (mousedown)=\"$event.stopPropagation()\">\n                      <div class=\"entity-picker-search\">\n                        <i class=\"fa-solid fa-search\"></i>\n                        <input #entitySearchInput\n                               type=\"text\"\n                               class=\"entity-picker-search-input\"\n                               placeholder=\"Filter entities...\"\n                               [(ngModel)]=\"EntitySearchText\"\n                               (input)=\"FilterEntities()\"\n                               (keydown)=\"OnEntityPickerKeyDown($event)\" />\n                      </div>\n                      <div class=\"entity-picker-list\">\n                        @for (group of FilteredEntityGroups; track group.SchemaName) {\n                          <div class=\"entity-picker-group\">\n                            <div class=\"entity-picker-group-header\">\n                              <i class=\"fa-solid fa-database\"></i>\n                              {{ group.SchemaName }}\n                            </div>\n                            @for (entity of group.Entities; track entity.ID) {\n                              <button class=\"entity-picker-item\"\n                                      [class.entity-picker-item-selected]=\"entity.Name === SuggestEntityName\"\n                                      [class.entity-picker-item-focused]=\"FlatFilteredEntities[SelectedEntityIndex]?.ID === entity.ID\"\n                                      (click)=\"SelectEntity(entity.Name)\">\n                                <i class=\"fa-solid fa-table\"></i>\n                                {{ entity.Name }}\n                              </button>\n                            }\n                          </div>\n                        }\n                        @if (FilteredEntityGroups.length === 0) {\n                          <div class=\"entity-picker-empty\">\n                            No entities matching \"{{ EntitySearchText }}\"\n                          </div>\n                        }\n                      </div>\n                    </div>\n                  }\n                </div>\n              </div>\n              <div class=\"suggest-field\">\n                <label class=\"suggest-label\">Use Case</label>\n                <div class=\"use-case-options\">\n                  <button class=\"use-case-btn\"\n                          [class.use-case-btn-active]=\"SuggestUseCase === 'duplicate detection'\"\n                          (click)=\"SuggestUseCase = 'duplicate detection'\">\n                    <i class=\"fa-solid fa-clone\"></i>\n                    Duplicate Detection\n                  </button>\n                  <button class=\"use-case-btn\"\n                          [class.use-case-btn-active]=\"SuggestUseCase === 'search'\"\n                          (click)=\"SuggestUseCase = 'search'\">\n                    <i class=\"fa-solid fa-magnifying-glass\"></i>\n                    Search\n                  </button>\n                </div>\n              </div>\n              <button class=\"suggest-submit-btn\"\n                      [disabled]=\"IsSuggesting || !SuggestEntityName\"\n                      (click)=\"RunSuggestion()\">\n                @if (IsSuggesting) {\n                  <i class=\"fa-solid fa-spinner fa-spin\"></i> Generating with AI...\n                } @else {\n                  <i class=\"fa-solid fa-wand-magic-sparkles\"></i> Generate Template\n                }\n              </button>\n              @if (SuggestionError) {\n                <mj-alert Variant=\"error\" Size=\"sm\">{{ SuggestionError }}</mj-alert>\n              }\n            </div>\n          } @else {\n            <div class=\"suggest-result\">\n              <div class=\"result-section\">\n                <h4 class=\"result-heading\">Suggested Template</h4>\n                <div class=\"template-editor-wrapper\">\n                  <mj-code-editor\n                    [value]=\"EditableTemplate\"\n                    language=\"markdown\"\n                    [readonly]=\"false\"\n                    [lineWrapping]=\"true\"\n                    (change)=\"OnTemplateChange($event)\">\n                  </mj-code-editor>\n                </div>\n              </div>\n              <div class=\"result-section\">\n                <h4 class=\"result-heading\">Selected Fields</h4>\n                <div class=\"result-tags\">\n                  @for (field of SuggestionResult.selectedFields; track field) {\n                    <span class=\"result-tag\">{{ field }}</span>\n                  }\n                </div>\n              </div>\n              @if ((SuggestionResult.selectedRelationships?.length ?? 0) > 0) {\n                <div class=\"result-section\">\n                  <h4 class=\"result-heading\">Related Entities</h4>\n                  @for (rel of SuggestionResult.selectedRelationships; track rel.name) {\n                    <div class=\"result-relationship\">\n                      <span class=\"rel-name\">{{ rel.name }}</span>\n                      <span class=\"rel-fields\">{{ rel.fields.join(', ') }}</span>\n                    </div>\n                  }\n                </div>\n              }\n              <div class=\"result-section result-thresholds\">\n                <div class=\"threshold-item\">\n                  <span class=\"threshold-label\">Potential Match</span>\n                  <span class=\"threshold-value\">{{ (SuggestionResult.potentialMatchThreshold * 100).toFixed(0) }}%</span>\n                </div>\n                <div class=\"threshold-item\">\n                  <span class=\"threshold-label\">Absolute Match</span>\n                  <span class=\"threshold-value\">{{ (SuggestionResult.absoluteMatchThreshold * 100).toFixed(0) }}%</span>\n                </div>\n              </div>\n              <div class=\"result-section\">\n                <h4 class=\"result-heading\">Reasoning</h4>\n                <p class=\"result-reasoning\">{{ SuggestionResult.reasoning }}</p>\n              </div>\n              <div class=\"result-section\">\n                <div class=\"suggest-field\">\n                  <label class=\"suggest-label\">Document Name</label>\n                  <input class=\"suggest-input\" type=\"text\" [(ngModel)]=\"SaveDocumentName\" />\n                </div>\n                <div class=\"suggest-field\" style=\"margin-top: 0.75rem\">\n                  <label class=\"suggest-label\">Embedding Model</label>\n                  <select class=\"suggest-select\" [(ngModel)]=\"SelectedEmbeddingModelID\">\n                    @for (model of AvailableEmbeddingModels; track model.ID) {\n                      <option [value]=\"model.ID\">{{ model.Name }}</option>\n                    }\n                  </select>\n                </div>\n                <div class=\"suggest-field\" style=\"margin-top: 0.75rem\">\n                  <label class=\"suggest-label\">Vector Database</label>\n                  <select class=\"suggest-select\" [(ngModel)]=\"SelectedVectorDBID\">\n                    @for (db of vectorDatabases; track db.ID) {\n                      <option [value]=\"db.ID\">{{ db.Name }}</option>\n                    }\n                  </select>\n                </div>\n                <div class=\"suggest-field\" style=\"margin-top: 0.75rem\">\n                  <label class=\"suggest-label\">Vector Index</label>\n                  @if (FilteredIndexesForSelectedDB.length > 0) {\n                    <select class=\"suggest-select\" [(ngModel)]=\"SelectedVectorIndexID\">\n                      <option value=\"\">Auto (create/find matching index)</option>\n                      @for (idx of FilteredIndexesForSelectedDB; track idx.ID) {\n                        <option [value]=\"idx.ID\">{{ idx.Name }}</option>\n                      }\n                    </select>\n                  } @else {\n                    <span class=\"edit-readonly-value\" style=\"font-size: 13px; color: var(--mj-text-muted);\">\n                      No indexes yet \u2014 create one in Configuration > Vector Database, or one will be created on sync\n                    </span>\n                  }\n                </div>\n              </div>\n              <div class=\"result-actions\">\n                @if (IsSavingDocument) {\n                  <div class=\"save-spinner\">\n                    <mj-loading text=\"Saving...\" size=\"small\"></mj-loading>\n                  </div>\n                } @else {\n                  <button class=\"suggest-submit-btn\" (click)=\"SaveAsEntityDocument()\">\n                    <i class=\"fa-solid fa-floppy-disk\"></i> Save as Entity Document\n                  </button>\n                  <button class=\"suggest-submit-btn suggest-try-again-btn\" (click)=\"ClearSuggestion()\">\n                    <i class=\"fa-solid fa-rotate\"></i> Try Again\n                  </button>\n                  <button class=\"suggest-close-action\" (click)=\"CloseSuggestDialog()\">\n                    Close\n                  </button>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  }\n}\n</ng-template>\n", styles: ["/* ================================================================\n   Vector Management Dashboard\n   All colors use MJ design tokens from _tokens.scss\n   ================================================================ */\n\n\n/* --- Loading state --- */\n.vector-loading {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: 400px;\n}\n\n/* --- View Mode Toggle --- */\n.view-mode-toggle {\n    display: flex;\n    gap: 0.25rem;\n    padding: 0 24px 0;\n    margin-bottom: -12px;\n}\n\n.view-mode-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.4rem;\n    padding: 0.4rem 0.85rem;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n    font-size: 0.82rem;\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.view-mode-btn:hover {\n    color: var(--mj-text-primary);\n    background: var(--mj-bg-surface-hover);\n}\n\n.view-mode-btn-active {\n    background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\n}\n\n/* --- Dashboard container --- */\n.vector-dashboard {\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n    padding: 24px;\n    background: var(--mj-bg-page);\n    min-height: 100%;\n}\n\n/* --- KPI cards row --- */\n.kpi-row {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    gap: 16px;\n}\n\n@media (max-width: 1200px) {\n    .kpi-row {\n        grid-template-columns: repeat(2, 1fr);\n    }\n}\n\n@media (max-width: 600px) {\n    .kpi-row {\n        grid-template-columns: 1fr;\n    }\n}\n\n/* --- Main content: table + sidebar --- */\n.content-area {\n    display: grid;\n    grid-template-columns: 1fr 300px;\n    gap: 24px;\n    align-items: start;\n}\n\n@media (max-width: 1024px) {\n    .content-area {\n        grid-template-columns: 1fr;\n    }\n}\n\n/* --- Sync table panel --- */\n.sync-table-panel {\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 12px;\n    overflow: hidden;\n}\n\n.panel-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 20px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.panel-title {\n    margin: 0;\n    font-size: 15px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.panel-title i {\n    color: var(--mj-brand-primary);\n    font-size: 14px;\n}\n\n.refresh-btn {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 14px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n    font-size: 12px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.refresh-btn:hover {\n    background: var(--mj-bg-surface-hover);\n    color: var(--mj-text-primary);\n    border-color: var(--mj-border-strong);\n}\n\n/* --- Table --- */\n.table-wrapper {\n    overflow-x: auto;\n}\n\n.sync-table {\n    width: 100%;\n    border-collapse: collapse;\n}\n\n.sync-table th {\n    padding: 10px 16px;\n    font-size: 11px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--mj-text-muted);\n    background: var(--mj-bg-surface-card);\n    border-bottom: 1px solid var(--mj-border-default);\n    text-align: left;\n    white-space: nowrap;\n}\n\n.sync-table td {\n    padding: 12px 16px;\n    font-size: 13px;\n    color: var(--mj-text-primary);\n    border-bottom: 1px solid var(--mj-border-subtle);\n    vertical-align: middle;\n}\n\n.sync-table tbody tr:hover {\n    background: var(--mj-bg-surface-hover);\n}\n\n.sync-table tbody tr:last-child td {\n    border-bottom: none;\n}\n\n.text-right {\n    text-align: right;\n}\n\n.text-center {\n    text-align: center;\n}\n\n.entity-name {\n    font-weight: 600;\n}\n\n.document-name {\n    color: var(--mj-text-secondary);\n}\n\n.document-type {\n    color: var(--mj-text-secondary);\n    white-space: nowrap;\n}\n\n.vector-count {\n    font-variant-numeric: tabular-nums;\n    font-weight: 600;\n}\n\n.last-synced {\n    color: var(--mj-text-secondary);\n    font-size: 12px;\n    white-space: nowrap;\n}\n\n/* --- Action buttons in table --- */\n\n.actions-cell {\n    display: flex;\n    gap: 6px;\n    align-items: center;\n    justify-content: center;\n}\n\n.schedule-btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 30px;\n    height: 30px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    background: transparent;\n    color: var(--mj-text-muted);\n    font-size: 12px;\n    cursor: pointer;\n    transition: all 0.15s;\n}\n\n.schedule-btn:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    border-color: var(--mj-brand-primary);\n}\n\n.edit-btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 30px;\n    height: 30px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    background: transparent;\n    color: var(--mj-text-muted);\n    font-size: 12px;\n    cursor: pointer;\n    transition: all 0.15s;\n}\n\n.edit-btn:hover {\n    background: var(--mj-bg-surface-hover);\n    color: var(--mj-text-primary);\n    border-color: var(--mj-border-strong);\n}\n\n/* --- Schedule Dialog --- */\n.schedule-dialog {\n    width: 440px;\n    max-width: 90vw;\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);\n    overflow: hidden;\n}\n\n.schedule-cron-preview {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 0 0;\n    font-size: 0.82rem;\n    color: var(--mj-text-muted);\n}\n\n.schedule-toggle-row {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 12px;\n}\n\n.edit-delete-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 16px;\n    border: 1px solid var(--mj-status-error-border);\n    border-radius: 6px;\n    background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n    color: var(--mj-status-error-text);\n    font-size: 13px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: all 0.15s;\n}\n\n.edit-delete-btn:hover {\n    background: color-mix(in srgb, var(--mj-status-error) 20%, var(--mj-bg-surface));\n}\n\n.edit-readonly-value {\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n    padding: 8px 0;\n}\n\n/* --- Status badges --- */\n.status-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    padding: 4px 10px;\n    border-radius: 999px;\n    font-size: 11px;\n    font-weight: 600;\n    white-space: nowrap;\n}\n\n.status-synced {\n    background: color-mix(in srgb, var(--mj-status-success) 12%, var(--mj-bg-surface));\n    color: var(--mj-status-success-text, var(--mj-status-success));\n}\n\n.status-syncing {\n    background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n}\n\n.status-error {\n    background: color-mix(in srgb, var(--mj-status-error) 12%, var(--mj-bg-surface));\n    color: var(--mj-status-error-text, var(--mj-status-error));\n}\n\n.status-pending {\n    background: color-mix(in srgb, var(--mj-status-warning) 12%, var(--mj-bg-surface));\n    color: var(--mj-status-warning-text, var(--mj-status-warning));\n}\n\n/* --- Sync button --- */\n.sync-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    padding: 5px 12px;\n    border: 1px solid var(--mj-brand-primary);\n    border-radius: 6px;\n    background: transparent;\n    color: var(--mj-brand-primary);\n    font-size: 12px;\n    font-weight: 600;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.sync-btn:hover:not(:disabled) {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n}\n\n.sync-btn:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n}\n\n/* ================================================================\n   Sidebar\n   ================================================================ */\n.sidebar {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n}\n\n.sidebar-card {\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 12px;\n    padding: 16px 20px;\n}\n\n.sidebar-title {\n    margin: 0 0 14px 0;\n    font-size: 13px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.sidebar-title i {\n    color: var(--mj-brand-primary);\n    font-size: 13px;\n}\n\n/* --- Vector DB Health --- */\n.health-row {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-bottom: 6px;\n}\n\n.health-dot {\n    width: 10px;\n    height: 10px;\n    border-radius: 50%;\n    flex-shrink: 0;\n}\n\n.health-healthy {\n    background: var(--mj-status-success);\n    box-shadow: 0 0 6px color-mix(in srgb, var(--mj-status-success) 50%, transparent);\n}\n\n.health-degraded {\n    background: var(--mj-status-warning);\n    box-shadow: 0 0 6px color-mix(in srgb, var(--mj-status-warning) 50%, transparent);\n}\n\n.health-offline {\n    background: var(--mj-status-error);\n    box-shadow: 0 0 6px color-mix(in srgb, var(--mj-status-error) 50%, transparent);\n}\n\n.health-label {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.health-status {\n    font-size: 12px;\n    color: var(--mj-text-muted);\n    padding-left: 18px;\n}\n\n.health-reason {\n    font-size: 11px;\n    line-height: 1.4;\n    color: var(--mj-text-muted);\n    padding-left: 18px;\n    margin-top: 4px;\n}\n\n/* --- Model Info --- */\n.model-info {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.info-row {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n}\n\n.info-label {\n    font-size: 12px;\n    color: var(--mj-text-muted);\n}\n\n.info-value {\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n/* --- Storage / Coverage Gauge --- */\n.gauge-container {\n    margin-bottom: 8px;\n}\n\n.gauge-bar {\n    height: 8px;\n    border-radius: 4px;\n    background: var(--mj-bg-surface-sunken);\n    overflow: hidden;\n    margin-bottom: 6px;\n}\n\n.gauge-fill {\n    height: 100%;\n    border-radius: 4px;\n    background: var(--mj-brand-primary);\n    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);\n    min-width: 2px;\n}\n\n.gauge-label {\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n}\n\n.storage-detail {\n    font-size: 12px;\n    color: var(--mj-text-muted);\n}\n\n/* --- Panel actions row --- */\n.panel-actions {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n/* --- Suggest Document Button --- */\n.suggest-btn {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 14px;\n    border: 1px solid var(--mj-brand-primary);\n    border-radius: 6px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-brand-primary);\n    font-size: 12px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.suggest-btn:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border-color: var(--mj-brand-primary-hover);\n}\n\n/* --- Slide-in Panel Overlay --- */\n.slide-panel-overlay {\n    position: fixed;\n    inset: 0;\n    background: var(--mj-bg-overlay);\n    z-index: 100000;\n}\n\n.slide-panel {\n    position: fixed;\n    top: 0;\n    right: 0;\n    height: 100vh;\n    width: 480px;\n    max-width: 90vw;\n    background: var(--mj-bg-surface);\n    box-shadow: -4px 0 24px color-mix(in srgb, var(--mj-text-primary) 12%, transparent);\n    transform: translateX(100%);\n    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    overflow-y: auto;\n}\n\n.slide-panel.open {\n    transform: translateX(0);\n}\n\n.suggest-dialog-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 20px 24px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.suggest-dialog-title {\n    margin: 0;\n    font-size: 16px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.suggest-dialog-title i {\n    color: var(--mj-brand-primary);\n}\n\n.suggest-close-btn {\n    border: none;\n    background: none;\n    color: var(--mj-text-muted);\n    font-size: 16px;\n    cursor: pointer;\n    padding: 4px;\n}\n\n.suggest-close-btn:hover {\n    color: var(--mj-text-primary);\n}\n\n.suggest-dialog-body {\n    padding: 24px;\n}\n\n/* --- Suggest Form --- */\n.suggest-form {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n}\n\n.suggest-field {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n}\n\n.suggest-label {\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n}\n\n.suggest-select {\n    padding: 8px 12px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-primary);\n    font-size: 13px;\n}\n\n.suggest-select:focus {\n    outline: none;\n    border-color: var(--mj-border-focus);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n/* ---- Use Case Button Group ---- */\n\n.use-case-options {\n    display: flex;\n    gap: 8px;\n    flex-wrap: wrap;\n}\n\n.use-case-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 16px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n    font-size: 13px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.use-case-btn:hover {\n    background: var(--mj-bg-surface-hover);\n    border-color: var(--mj-border-strong);\n    color: var(--mj-text-primary);\n}\n\n.use-case-btn-active {\n    background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\n    font-weight: 600;\n}\n\n.use-case-btn i {\n    font-size: 12px;\n}\n\n/* ---- Entity Picker (grouped by schema) ---- */\n\n.entity-picker {\n    position: relative;\n}\n\n.entity-picker-trigger {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    width: 100%;\n    padding: 9px 12px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-primary);\n    font-size: 13px;\n    cursor: pointer;\n    text-align: left;\n    transition: border-color 0.15s;\n}\n\n.entity-picker-trigger:hover {\n    border-color: var(--mj-border-strong);\n}\n\n.entity-picker-placeholder {\n    color: var(--mj-text-muted);\n    flex: 1;\n}\n\n.entity-picker-value {\n    flex: 1;\n    font-weight: 500;\n}\n\n.entity-picker-arrow {\n    font-size: 10px;\n    color: var(--mj-text-muted);\n    transition: transform 0.2s;\n}\n\n.entity-picker-dropdown {\n    position: absolute;\n    top: calc(100% + 4px);\n    left: 0;\n    right: 0;\n    background: var(--mj-bg-surface-elevated, var(--mj-bg-surface));\n    border: 1px solid var(--mj-border-default);\n    border-radius: 10px;\n    box-shadow: 0 8px 32px color-mix(in srgb, var(--mj-text-primary) 15%, transparent);\n    z-index: 100;\n    max-height: 350px;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n}\n\n.entity-picker-search {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 14px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.entity-picker-search i {\n    color: var(--mj-text-muted);\n    font-size: 13px;\n}\n\n.entity-picker-search-input {\n    flex: 1;\n    border: none;\n    background: transparent;\n    color: var(--mj-text-primary);\n    font-size: 13px;\n    outline: none;\n}\n\n.entity-picker-search-input::placeholder {\n    color: var(--mj-text-disabled);\n}\n\n.entity-picker-list {\n    overflow-y: auto;\n    max-height: 300px;\n    padding: 4px 0;\n}\n\n.entity-picker-group-header {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 14px 4px;\n    font-size: 11px;\n    font-weight: 700;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    position: sticky;\n    top: 0;\n    background: var(--mj-bg-surface-elevated, var(--mj-bg-surface));\n}\n\n.entity-picker-group-header i {\n    font-size: 10px;\n}\n\n.entity-picker-item {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    width: 100%;\n    padding: 7px 14px 7px 28px;\n    border: none;\n    background: transparent;\n    color: var(--mj-text-primary);\n    font-size: 13px;\n    cursor: pointer;\n    text-align: left;\n    transition: background 0.1s;\n}\n\n.entity-picker-item:hover {\n    background: var(--mj-bg-surface-hover);\n}\n\n.entity-picker-item-selected {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    font-weight: 600;\n}\n\n.entity-picker-item i {\n    font-size: 11px;\n    color: var(--mj-text-muted);\n}\n\n.entity-picker-item-selected i {\n    color: var(--mj-brand-primary);\n}\n\n.entity-picker-item-focused {\n    background: var(--mj-bg-surface-hover);\n    outline: 2px solid var(--mj-brand-primary);\n    outline-offset: -2px;\n}\n\n.entity-picker-empty {\n    padding: 20px 14px;\n    text-align: center;\n    color: var(--mj-text-disabled);\n    font-size: 13px;\n}\n\n/* ---- Template Editor ---- */\n\n.template-editor-wrapper {\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    overflow: hidden;\n    min-height: 120px;\n    max-height: 300px;\n}\n\n.template-editor-wrapper ::ng-deep .cm-editor {\n    min-height: 120px;\n    max-height: 300px;\n    font-size: 13px;\n}\n\n.suggest-submit-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 6px;\n    padding: 10px 20px;\n    border: none;\n    border-radius: 6px;\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    font-size: 13px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: background 0.2s ease;\n}\n\n.suggest-submit-btn:hover:not(:disabled) {\n    background: var(--mj-brand-primary-hover);\n}\n\n\n.suggest-submit-btn:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n}\n\n/* --- Suggestion Result --- */\n.suggest-result {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n}\n\n.result-section {\n    border-bottom: 1px solid var(--mj-border-subtle);\n    padding-bottom: 12px;\n}\n\n.result-section:last-child {\n    border-bottom: none;\n}\n\n.result-heading {\n    margin: 0 0 8px 0;\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.result-template {\n    background: var(--mj-bg-surface-sunken);\n    border: 1px solid var(--mj-border-subtle);\n    border-radius: 6px;\n    padding: 12px;\n    font-size: 12px;\n    color: var(--mj-text-primary);\n    white-space: pre-wrap;\n    word-break: break-all;\n    margin: 0;\n}\n\n.result-tags {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 6px;\n}\n\n.result-tag {\n    padding: 3px 10px;\n    border-radius: 12px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    font-size: 12px;\n    font-weight: 500;\n}\n\n.result-relationship {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 4px 0;\n}\n\n.rel-name {\n    font-weight: 600;\n    font-size: 13px;\n    color: var(--mj-text-primary);\n}\n\n.rel-fields {\n    font-size: 12px;\n    color: var(--mj-text-muted);\n}\n\n.result-thresholds {\n    display: flex;\n    gap: 24px;\n}\n\n.threshold-item {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n}\n\n.threshold-label {\n    font-size: 12px;\n    color: var(--mj-text-muted);\n}\n\n.threshold-value {\n    font-size: 18px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.result-reasoning {\n    margin: 0;\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n    line-height: 1.5;\n}\n\n.result-actions {\n    display: flex;\n    gap: 8px;\n    padding-top: 8px;\n}\n\n.suggest-close-action {\n    padding: 10px 20px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n    font-size: 13px;\n    font-weight: 500;\n    cursor: pointer;\n}\n\n.suggest-close-action:hover {\n    background: var(--mj-bg-surface-hover);\n}\n\n/* --- Suggest Input --- */\n.suggest-input {\n    padding: 8px 12px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-primary);\n    font-size: 13px;\n    width: 100%;\n    box-sizing: border-box;\n}\n\n.suggest-input:focus {\n    outline: none;\n    border-color: var(--mj-border-focus);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n/* --- Try Again Button (secondary style) --- */\n.suggest-try-again-btn {\n    background: var(--mj-bg-surface);\n    color: var(--mj-brand-primary);\n    border: 1px solid var(--mj-brand-primary);\n}\n\n.suggest-try-again-btn:hover:not(:disabled) {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n/* --- Save Spinner --- */\n.save-spinner {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 8px 0;\n}\n\n/* --- Edit Panel Template Header --- */\n.edit-template-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 8px;\n}\n\n.edit-regenerate-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    padding: 4px 10px;\n    border: 1px solid var(--mj-brand-primary);\n    border-radius: 6px;\n    background: transparent;\n    color: var(--mj-brand-primary);\n    font-size: 11px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: all 0.15s ease;\n    white-space: nowrap;\n}\n\n.edit-regenerate-btn:hover:not(:disabled) {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.edit-regenerate-btn:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n}\n\n/* --- No Vector Index Warning Dialog --- */\n.no-index-warning-dialog {\n    position: fixed;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    width: 440px;\n    max-width: 90vw;\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    box-shadow: 0 20px 60px color-mix(in srgb, var(--mj-text-primary) 20%, transparent);\n    padding: 32px;\n    text-align: center;\n}\n\n.no-index-warning-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 56px;\n    height: 56px;\n    margin: 0 auto 16px;\n    border-radius: 50%;\n    background: color-mix(in srgb, var(--mj-status-warning) 12%, var(--mj-bg-surface));\n}\n\n.no-index-warning-icon i {\n    font-size: 24px;\n    color: var(--mj-status-warning);\n}\n\n.no-index-warning-title {\n    margin: 0 0 8px 0;\n    font-size: 18px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.no-index-warning-message {\n    margin: 0 0 24px 0;\n    font-size: 14px;\n    line-height: 1.5;\n    color: var(--mj-text-secondary);\n}\n\n.no-index-warning-actions {\n    display: flex;\n    gap: 8px;\n    justify-content: center;\n}\n\n/* ================================================================\n   Responsive \u2014 Vector Management\n   ================================================================ */\n\n@media (max-width: 768px) {\n    .panel-header {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 12px;\n    }\n\n    .panel-actions {\n        flex-wrap: wrap;\n    }\n}\n\n@media (max-width: 600px) {\n    .slide-panel {\n        width: 100vw;\n        max-width: 100vw;\n    }\n}\n\n@media (max-width: 480px) {\n    .vector-dashboard {\n        padding: 12px;\n    }\n\n    .suggest-btn .suggest-btn-text {\n        display: none;\n    }\n}\n"] }]
+        args: [{ standalone: false, selector: 'app-vector-management-resource', template: "@if (!HideToolbar) {\n  <mj-page-layout>\n    <mj-page-header\n      Title=\"Vector Management\"\n      Icon=\"fa-solid fa-cubes\"\n      Subtitle=\"Vector index health, embeddings, and entity sync status\">\n      <div actions>\n        <mj-view-toggle\n          [Options]=\"VectorViewOptions\"\n          [ActiveKey]=\"ViewMode\"\n          (KeyChange)=\"ViewMode = $any($event)\">\n        </mj-view-toggle>\n      </div>\n    </mj-page-header>\n    <mj-page-body [Flex]=\"true\">\n      <ng-container *ngTemplateOutlet=\"vectorBody\"></ng-container>\n    </mj-page-body>\n  </mj-page-layout>\n}\n@if (HideToolbar) {\n  <ng-container *ngTemplateOutlet=\"vectorBody\"></ng-container>\n}\n\n<ng-template #vectorBody>\n@if (IsLoading) {\n  <div class=\"vector-loading\">\n    <mj-loading text=\"Loading vector management data...\"></mj-loading>\n  </div>\n} @else {\n  <div class=\"vector-dashboard\">\n\n    <!-- KPI Cards Row -->\n    <div class=\"kpi-row\">\n      @for (card of KPICards; track card.title) {\n        <app-kpi-card [data]=\"card\"></app-kpi-card>\n      }\n    </div>\n\n    <!-- Main Content Area: Table + Sidebar -->\n    <div class=\"content-area\">\n      <!-- Entity Sync Table -->\n      <div class=\"sync-table-panel\">\n        <div class=\"panel-header\">\n          <h3 class=\"panel-title\">\n            <i class=\"fa-solid fa-table-list\"></i>\n            Entity Sync Status\n          </h3>\n          <div class=\"panel-actions\">\n            <button class=\"suggest-btn\" (click)=\"OpenSuggestDialog()\" title=\"Use AI to suggest an Entity Document template\">\n              <i class=\"fa-solid fa-wand-magic-sparkles\"></i>\n              <span class=\"suggest-btn-text\">Suggest Document</span>\n            </button>\n            <button class=\"refresh-btn\" (click)=\"LoadData(true)\" title=\"Refresh data\">\n              <i class=\"fa-solid fa-arrows-rotate\"></i>\n              Refresh\n            </button>\n          </div>\n        </div>\n\n        @if (SyncRows.length === 0) {\n          <mj-empty-state Icon=\"fa-solid fa-folder-open\"\n            Title=\"No entity documents configured for vectorization.\" />\n        } @else {\n          <div class=\"table-wrapper\">\n            <table class=\"sync-table\">\n              <thead>\n                <tr>\n                  <th>Entity</th>\n                  <th>Document</th>\n                  <th>Type</th>\n                  <th class=\"text-right\">Vectors</th>\n                  <th>Last Synced</th>\n                  <th>Status</th>\n                  <th class=\"text-center\">Actions</th>\n                </tr>\n              </thead>\n              <tbody>\n                @for (row of SyncRows; track row.EntityDocumentID) {\n                  <tr>\n                    <td class=\"entity-name\">{{ row.EntityName }}</td>\n                    <td class=\"document-name\">{{ row.DocumentName }}</td>\n                    <td class=\"document-type\">{{ row.DocumentType }}</td>\n                    <td class=\"text-right vector-count\">{{ row.VectorCount | number }}</td>\n                    <td class=\"last-synced\">{{ FormatDate(row.LastSynced) }}</td>\n                    <td>\n                      <span class=\"status-badge\" [class]=\"GetStatusClass(row.Status)\">\n                        <i [class]=\"GetStatusIcon(row.Status)\"></i>\n                        @if (row.Status === 'Syncing' && row.PercentComplete > 0) {\n                          {{ row.PercentComplete }}%\n                        } @else {\n                          {{ row.Status }}\n                        }\n                      </span>\n                    </td>\n                    <td class=\"text-center actions-cell\">\n                      <button\n                        class=\"sync-btn\"\n                        [disabled]=\"IsSyncing(row.EntityDocumentID)\"\n                        (click)=\"SyncEntity(row.EntityDocumentID)\"\n                        title=\"Sync now\">\n                        @if (IsSyncing(row.EntityDocumentID)) {\n                          <i class=\"fa-solid fa-spinner fa-spin\"></i>\n                          {{ row.PercentComplete > 0 ? row.PercentComplete + '%' : 'Sync' }}\n                        } @else {\n                          <i class=\"fa-solid fa-play\"></i>\n                          Sync\n                        }\n                      </button>\n                      <button\n                        class=\"schedule-btn\"\n                        (click)=\"OpenScheduleSyncDialog(row.EntityDocumentID)\"\n                        title=\"Schedule recurring sync\">\n                        <i class=\"fa-regular fa-clock\"></i>\n                      </button>\n                      <button\n                        class=\"edit-btn\"\n                        (click)=\"OpenEditPanel(row.EntityDocumentID)\"\n                        title=\"Edit entity document\">\n                        <i class=\"fa-solid fa-pen\"></i>\n                      </button>\n                    </td>\n                  </tr>\n                }\n              </tbody>\n            </table>\n          </div>\n        }\n      </div>\n\n      <!-- Sidebar Panels -->\n      <div class=\"sidebar\">\n        <!-- Vector DB Health -->\n        <div class=\"sidebar-card\">\n          <h4 class=\"sidebar-title\">\n            <i class=\"fa-solid fa-heart-pulse\"></i>\n            Vector DB Health\n          </h4>\n          <div class=\"health-row\">\n            <span class=\"health-dot\" [class]=\"DBHealthClass\"></span>\n            <span class=\"health-label\">{{ VectorDBName }}</span>\n          </div>\n          <div class=\"health-status\" [title]=\"VectorDBStatusReason\">{{ VectorDBStatus }}</div>\n          @if (VectorDBStatusReason) {\n            <div class=\"health-reason\">{{ VectorDBStatusReason }}</div>\n          }\n        </div>\n\n        <!-- Embedding Model Info -->\n        <div class=\"sidebar-card\">\n          <h4 class=\"sidebar-title\">\n            <i class=\"fa-solid fa-microchip\"></i>\n            Embedding Model\n          </h4>\n          <div class=\"model-info\">\n            <div class=\"info-row\">\n              <span class=\"info-label\">Model</span>\n              <span class=\"info-value\" [title]=\"'Embeddings are generated by this model; the index above stores the resulting vectors.'\">{{ EmbeddingModel.Name }}</span>\n            </div>\n            @if (EmbeddingModel.Dimensions != null) {\n              <div class=\"info-row\">\n                <span class=\"info-label\">Dimensions</span>\n                <span class=\"info-value\">{{ EmbeddingModel.Dimensions | number }}</span>\n              </div>\n            }\n          </div>\n        </div>\n\n        <!-- Storage Usage -->\n        <div class=\"sidebar-card\">\n          <h4 class=\"sidebar-title\">\n            <i class=\"fa-solid fa-hard-drive\"></i>\n            Vectorization Coverage\n          </h4>\n          <div class=\"gauge-container\">\n            <div class=\"gauge-bar\">\n              <div class=\"gauge-fill\" [style.width.%]=\"StorageUsagePercent\"></div>\n            </div>\n            <div class=\"gauge-label\">{{ StorageLabel }} of records vectorized</div>\n          </div>\n          <div class=\"storage-detail\">\n            {{ TotalVectors | number }} vectors stored\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Edit Entity Document Slide-in Panel -->\n  @if (ShowEditPanel) {\n    <div class=\"slide-panel-overlay\" (click)=\"CloseEditPanel()\">\n      <div class=\"slide-panel open\" (click)=\"$event.stopPropagation()\">\n        <div class=\"suggest-dialog-header\">\n          <h3 class=\"suggest-dialog-title\">\n            <i class=\"fa-solid fa-pen\"></i>\n            Edit Entity Document\n          </h3>\n          <button class=\"suggest-close-btn\" (click)=\"CloseEditPanel()\">\n            <i class=\"fa-solid fa-times\"></i>\n          </button>\n        </div>\n        <div class=\"suggest-dialog-body\">\n          <div class=\"suggest-form\">\n            <div class=\"suggest-field\">\n              <label class=\"suggest-label\">Entity</label>\n              <span class=\"edit-readonly-value\">{{ EditDocEntityName }}</span>\n            </div>\n            <div class=\"suggest-field\">\n              <label class=\"suggest-label\">Type</label>\n              <span class=\"edit-readonly-value\">{{ EditDocType }}</span>\n            </div>\n\n            <!-- Template Section -->\n            <div class=\"suggest-field\">\n              <div class=\"edit-template-header\">\n                <label class=\"suggest-label\">Template</label>\n                <button class=\"edit-regenerate-btn\"\n                        [disabled]=\"IsEditRegenerating\"\n                        (click)=\"RegenerateTemplate()\"\n                        title=\"Regenerate template using AI\">\n                  @if (IsEditRegenerating) {\n                    <i class=\"fa-solid fa-spinner fa-spin\"></i> Regenerating...\n                  } @else {\n                    <i class=\"fa-solid fa-wand-magic-sparkles\"></i> Regenerate with AI\n                  }\n                </button>\n              </div>\n              <div class=\"template-editor-wrapper\">\n                <mj-code-editor\n                  [value]=\"EditDocTemplate\"\n                  language=\"markdown\"\n                  [readonly]=\"false\"\n                  [lineWrapping]=\"true\"\n                  (change)=\"OnEditTemplateChange($event)\">\n                </mj-code-editor>\n              </div>\n            </div>\n\n            <!-- Selected Fields (parsed from template) -->\n            @if (EditDocSelectedFields.length > 0) {\n              <div class=\"suggest-field\">\n                <label class=\"suggest-label\">Selected Fields</label>\n                <div class=\"result-tags\">\n                  @for (field of EditDocSelectedFields; track field) {\n                    <span class=\"result-tag\">{{ field }}</span>\n                  }\n                </div>\n              </div>\n            }\n\n            <div class=\"suggest-field\">\n              <label class=\"suggest-label\">Document Name</label>\n              <input class=\"suggest-input\" type=\"text\" [(ngModel)]=\"EditDocName\" />\n            </div>\n            <div class=\"suggest-field\">\n              <label class=\"suggest-label\">Embedding Model</label>\n              <select class=\"suggest-select\" [ngModel]=\"EditDocAIModelID\" (ngModelChange)=\"OnEditEmbeddingModelChange($event)\">\n                @for (model of AvailableEmbeddingModels; track model.ID) {\n                  <option [value]=\"model.ID\">{{ model.Name }}</option>\n                }\n              </select>\n            </div>\n            <div class=\"suggest-field\">\n              <label class=\"suggest-label\">Vector Database</label>\n              <select class=\"suggest-select\" [ngModel]=\"EditDocVectorDBID\" (ngModelChange)=\"OnEditVectorDBChange($event)\">\n                @for (db of vectorDatabases; track db.ID) {\n                  <option [value]=\"db.ID\">{{ db.Name }}</option>\n                }\n              </select>\n            </div>\n            <div class=\"suggest-field\">\n              <label class=\"suggest-label\">Vector Index</label>\n              @if (EditFilteredIndexes.length > 0) {\n                <select class=\"suggest-select\" [ngModel]=\"EditDocVectorIndexID\" (ngModelChange)=\"OnEditVectorIndexChange($event)\">\n                  <option value=\"\">Auto (create/find matching index)</option>\n                  @for (idx of EditFilteredIndexes; track idx.ID) {\n                    <option [value]=\"idx.ID\">{{ idx.Name }}</option>\n                  }\n                </select>\n              } @else {\n                <span class=\"edit-readonly-value\" style=\"font-size: 13px; color: var(--mj-text-muted);\">\n                  No indexes for this database \u2014 one will be created automatically on sync\n                </span>\n              }\n            </div>\n            <div class=\"suggest-field\">\n              <label class=\"suggest-label\">Status</label>\n              <select class=\"suggest-select\" [(ngModel)]=\"EditDocStatus\">\n                <option value=\"Active\">Active</option>\n                <option value=\"Inactive\">Inactive</option>\n              </select>\n            </div>\n            <div class=\"result-actions\" style=\"margin-top: 1rem\">\n              @if (IsEditSaving || IsEditDeleting) {\n                <mj-loading text=\"Saving...\" size=\"small\"></mj-loading>\n              } @else {\n                <button class=\"suggest-submit-btn\" (click)=\"SaveEditedDocument()\">\n                  <i class=\"fa-solid fa-save\"></i> Save Changes\n                </button>\n                <button class=\"edit-delete-btn\" (click)=\"DeleteEntityDocument()\">\n                  <i class=\"fa-solid fa-trash-can\"></i> Delete\n                </button>\n                <button class=\"suggest-close-action\" (click)=\"CloseEditPanel()\">\n                  Cancel\n                </button>\n              }\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  }\n\n  <!-- Schedule Sync Dialog -->\n  @if (ShowScheduleSyncDialog) {\n    <div class=\"slide-panel-overlay\" (click)=\"CloseScheduleSyncDialog()\">\n      <div class=\"schedule-dialog\" (click)=\"$event.stopPropagation()\">\n        <div class=\"suggest-dialog-header\">\n          <h3 class=\"suggest-dialog-title\">\n            <i class=\"fa-regular fa-clock\"></i>\n            Schedule Vector Sync\n          </h3>\n          <button class=\"suggest-close-btn\" (click)=\"CloseScheduleSyncDialog()\">\n            <i class=\"fa-solid fa-times\"></i>\n          </button>\n        </div>\n        <div class=\"suggest-dialog-body\">\n          <div class=\"suggest-form\">\n            <div class=\"suggest-field\">\n              <label class=\"suggest-label\">Entity Document</label>\n              <span class=\"edit-readonly-value\">{{ ScheduleSyncDocName }}</span>\n            </div>\n            <div class=\"suggest-field\">\n              <label class=\"suggest-label\">Action</label>\n              <span class=\"edit-readonly-value\">__VectorizeEntity</span>\n            </div>\n            <div class=\"suggest-field\">\n              <label class=\"suggest-label\">Cron Expression</label>\n              <input class=\"suggest-input\" type=\"text\" [(ngModel)]=\"ScheduleSyncCron\" placeholder=\"0 2 * * *\" />\n              <div class=\"schedule-cron-preview\">\n                <i class=\"fa-solid fa-info-circle\"></i>\n                {{ GetScheduleCronPreview(ScheduleSyncCron) }}\n              </div>\n            </div>\n            <div class=\"suggest-field schedule-toggle-row\">\n              <label class=\"suggest-label\">Enabled</label>\n              <input type=\"checkbox\" class=\"mj-checkbox\" [(ngModel)]=\"ScheduleSyncEnabled\" />\n            </div>\n            <div class=\"result-actions\" style=\"margin-top: 1rem\">\n              @if (ScheduleSyncSaving) {\n                <mj-loading text=\"Saving...\" size=\"small\"></mj-loading>\n              } @else {\n                <button class=\"suggest-submit-btn\" (click)=\"SaveScheduleSync()\">\n                  <i class=\"fa-solid fa-check\"></i> Create Schedule\n                </button>\n                <button class=\"suggest-close-action\" (click)=\"CloseScheduleSyncDialog()\">\n                  Cancel\n                </button>\n              }\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  }\n\n  <!-- No Vector Index Warning Dialog -->\n  @if (ShowNoIndexWarning) {\n    <div class=\"slide-panel-overlay\" (click)=\"CloseNoIndexWarning()\">\n      <div class=\"no-index-warning-dialog\" (click)=\"$event.stopPropagation()\">\n        <div class=\"no-index-warning-icon\">\n          <i class=\"fa-solid fa-triangle-exclamation\"></i>\n        </div>\n        <h3 class=\"no-index-warning-title\">Vector Index Required</h3>\n        <p class=\"no-index-warning-message\">\n          You need to create at least one vector database and index before creating entity documents.\n          Go to the Configuration section to set up a vector database and create an index.\n        </p>\n        <div class=\"no-index-warning-actions\">\n          <button class=\"suggest-submit-btn\" (click)=\"GoToConfiguration()\">\n            <i class=\"fa-solid fa-gear\"></i> Go to Configuration\n          </button>\n          <button class=\"suggest-close-action\" (click)=\"CloseNoIndexWarning()\">\n            Close\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n\n  <!-- Suggest Document Slide-in Panel -->\n  @if (ShowSuggestDialog) {\n    <div class=\"slide-panel-overlay\" (click)=\"CloseSuggestDialog()\">\n      <div class=\"slide-panel\" [class.open]=\"ShowSuggestDialog\" (click)=\"$event.stopPropagation()\">\n        <div class=\"suggest-dialog-header\">\n          <h3 class=\"suggest-dialog-title\">\n            <i class=\"fa-solid fa-wand-magic-sparkles\"></i>\n            AI Document Suggestion\n          </h3>\n          <button class=\"suggest-close-btn\" (click)=\"CloseSuggestDialog()\">\n            <i class=\"fa-solid fa-times\"></i>\n          </button>\n        </div>\n        <div class=\"suggest-dialog-body\">\n          @if (!SuggestionResult) {\n            <div class=\"suggest-form\">\n              <div class=\"suggest-field\">\n                <label class=\"suggest-label\">Entity</label>\n                <div class=\"entity-picker\">\n                  <button class=\"entity-picker-trigger\" (click)=\"ToggleEntityPicker()\">\n                    @if (SuggestEntityName) {\n                      <i class=\"fa-solid fa-table\"></i>\n                      <span class=\"entity-picker-value\">{{ SuggestEntityName }}</span>\n                    } @else {\n                      <i class=\"fa-solid fa-search\"></i>\n                      <span class=\"entity-picker-placeholder\">Search and select an entity...</span>\n                    }\n                    <i class=\"fa-solid fa-chevron-down entity-picker-arrow\"></i>\n                  </button>\n                  @if (ShowEntityPicker) {\n                    <div class=\"entity-picker-dropdown\" (mousedown)=\"$event.stopPropagation()\">\n                      <div class=\"entity-picker-search\">\n                        <i class=\"fa-solid fa-search\"></i>\n                        <input #entitySearchInput\n                               type=\"text\"\n                               class=\"entity-picker-search-input\"\n                               placeholder=\"Filter entities...\"\n                               [(ngModel)]=\"EntitySearchText\"\n                               (input)=\"FilterEntities()\"\n                               (keydown)=\"OnEntityPickerKeyDown($event)\" />\n                      </div>\n                      <div class=\"entity-picker-list\">\n                        @for (group of FilteredEntityGroups; track group.SchemaName) {\n                          <div class=\"entity-picker-group\">\n                            <div class=\"entity-picker-group-header\">\n                              <i class=\"fa-solid fa-database\"></i>\n                              {{ group.SchemaName }}\n                            </div>\n                            @for (entity of group.Entities; track entity.ID) {\n                              <button class=\"entity-picker-item\"\n                                      [class.entity-picker-item-selected]=\"entity.Name === SuggestEntityName\"\n                                      [class.entity-picker-item-focused]=\"FlatFilteredEntities[SelectedEntityIndex]?.ID === entity.ID\"\n                                      (click)=\"SelectEntity(entity.Name)\">\n                                <i class=\"fa-solid fa-table\"></i>\n                                {{ entity.Name }}\n                              </button>\n                            }\n                          </div>\n                        }\n                        @if (FilteredEntityGroups.length === 0) {\n                          <div class=\"entity-picker-empty\">\n                            No entities matching \"{{ EntitySearchText }}\"\n                          </div>\n                        }\n                      </div>\n                    </div>\n                  }\n                </div>\n              </div>\n              <div class=\"suggest-field\">\n                <label class=\"suggest-label\">Use Case</label>\n                <div class=\"use-case-options\">\n                  <button class=\"use-case-btn\"\n                          [class.use-case-btn-active]=\"SuggestUseCase === 'duplicate detection'\"\n                          (click)=\"SuggestUseCase = 'duplicate detection'\">\n                    <i class=\"fa-solid fa-clone\"></i>\n                    Duplicate Detection\n                  </button>\n                  <button class=\"use-case-btn\"\n                          [class.use-case-btn-active]=\"SuggestUseCase === 'search'\"\n                          (click)=\"SuggestUseCase = 'search'\">\n                    <i class=\"fa-solid fa-magnifying-glass\"></i>\n                    Search\n                  </button>\n                </div>\n              </div>\n              <button class=\"suggest-submit-btn\"\n                      [disabled]=\"IsSuggesting || !SuggestEntityName\"\n                      (click)=\"RunSuggestion()\">\n                @if (IsSuggesting) {\n                  <i class=\"fa-solid fa-spinner fa-spin\"></i> Generating with AI...\n                } @else {\n                  <i class=\"fa-solid fa-wand-magic-sparkles\"></i> Generate Template\n                }\n              </button>\n              @if (SuggestionError) {\n                <mj-alert Variant=\"error\" Size=\"sm\">{{ SuggestionError }}</mj-alert>\n              }\n            </div>\n          } @else {\n            <div class=\"suggest-result\">\n              <div class=\"result-section\">\n                <h4 class=\"result-heading\">Suggested Template</h4>\n                <div class=\"template-editor-wrapper\">\n                  <mj-code-editor\n                    [value]=\"EditableTemplate\"\n                    language=\"markdown\"\n                    [readonly]=\"false\"\n                    [lineWrapping]=\"true\"\n                    (change)=\"OnTemplateChange($event)\">\n                  </mj-code-editor>\n                </div>\n              </div>\n              <div class=\"result-section\">\n                <h4 class=\"result-heading\">Selected Fields</h4>\n                <div class=\"result-tags\">\n                  @for (field of SuggestionResult.selectedFields; track field) {\n                    <span class=\"result-tag\">{{ field }}</span>\n                  }\n                </div>\n              </div>\n              @if ((SuggestionResult.selectedRelationships?.length ?? 0) > 0) {\n                <div class=\"result-section\">\n                  <h4 class=\"result-heading\">Related Entities</h4>\n                  @for (rel of SuggestionResult.selectedRelationships; track rel.name) {\n                    <div class=\"result-relationship\">\n                      <span class=\"rel-name\">{{ rel.name }}</span>\n                      <span class=\"rel-fields\">{{ rel.fields.join(', ') }}</span>\n                    </div>\n                  }\n                </div>\n              }\n              <div class=\"result-section result-thresholds\">\n                <div class=\"threshold-item\">\n                  <span class=\"threshold-label\">Potential Match</span>\n                  <span class=\"threshold-value\">{{ (SuggestionResult.potentialMatchThreshold * 100).toFixed(0) }}%</span>\n                </div>\n                <div class=\"threshold-item\">\n                  <span class=\"threshold-label\">Absolute Match</span>\n                  <span class=\"threshold-value\">{{ (SuggestionResult.absoluteMatchThreshold * 100).toFixed(0) }}%</span>\n                </div>\n              </div>\n              <div class=\"result-section\">\n                <h4 class=\"result-heading\">Reasoning</h4>\n                <p class=\"result-reasoning\">{{ SuggestionResult.reasoning }}</p>\n              </div>\n              <div class=\"result-section\">\n                <div class=\"suggest-field\">\n                  <label class=\"suggest-label\">Document Name</label>\n                  <input class=\"suggest-input\" type=\"text\" [(ngModel)]=\"SaveDocumentName\" />\n                </div>\n                <div class=\"suggest-field\" style=\"margin-top: 0.75rem\">\n                  <label class=\"suggest-label\">Embedding Model</label>\n                  <select class=\"suggest-select\" [ngModel]=\"SelectedEmbeddingModelID\" (ngModelChange)=\"OnSuggestEmbeddingModelChange($event)\">\n                    @for (model of AvailableEmbeddingModels; track model.ID) {\n                      <option [value]=\"model.ID\">{{ model.Name }}</option>\n                    }\n                  </select>\n                </div>\n                <div class=\"suggest-field\" style=\"margin-top: 0.75rem\">\n                  <label class=\"suggest-label\">Vector Database</label>\n                  <select class=\"suggest-select\" [ngModel]=\"SelectedVectorDBID\" (ngModelChange)=\"OnSuggestVectorDBChange($event)\">\n                    @for (db of vectorDatabases; track db.ID) {\n                      <option [value]=\"db.ID\">{{ db.Name }}</option>\n                    }\n                  </select>\n                </div>\n                <div class=\"suggest-field\" style=\"margin-top: 0.75rem\">\n                  <label class=\"suggest-label\">Vector Index</label>\n                  @if (FilteredIndexesForSelectedDB.length > 0) {\n                    <select class=\"suggest-select\" [ngModel]=\"SelectedVectorIndexID\" (ngModelChange)=\"OnSuggestVectorIndexChange($event)\">\n                      <option value=\"\">Auto (create/find matching index)</option>\n                      @for (idx of FilteredIndexesForSelectedDB; track idx.ID) {\n                        <option [value]=\"idx.ID\">{{ idx.Name }}</option>\n                      }\n                    </select>\n                  } @else {\n                    <span class=\"edit-readonly-value\" style=\"font-size: 13px; color: var(--mj-text-muted);\">\n                      No indexes yet \u2014 create one in Configuration > Vector Database, or one will be created on sync\n                    </span>\n                  }\n                </div>\n              </div>\n              <div class=\"result-actions\">\n                @if (IsSavingDocument) {\n                  <div class=\"save-spinner\">\n                    <mj-loading text=\"Saving...\" size=\"small\"></mj-loading>\n                  </div>\n                } @else {\n                  <button class=\"suggest-submit-btn\" (click)=\"SaveAsEntityDocument()\">\n                    <i class=\"fa-solid fa-floppy-disk\"></i> Save as Entity Document\n                  </button>\n                  <button class=\"suggest-submit-btn suggest-try-again-btn\" (click)=\"ClearSuggestion()\">\n                    <i class=\"fa-solid fa-rotate\"></i> Try Again\n                  </button>\n                  <button class=\"suggest-close-action\" (click)=\"CloseSuggestDialog()\">\n                    Close\n                  </button>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  }\n}\n</ng-template>\n", styles: ["/* ================================================================\n   Vector Management Dashboard\n   All colors use MJ design tokens from _tokens.scss\n   ================================================================ */\n\n\n/* --- Loading state --- */\n.vector-loading {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: 400px;\n}\n\n/* --- View Mode Toggle --- */\n.view-mode-toggle {\n    display: flex;\n    gap: 0.25rem;\n    padding: 0 24px 0;\n    margin-bottom: -12px;\n}\n\n.view-mode-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.4rem;\n    padding: 0.4rem 0.85rem;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n    font-size: 0.82rem;\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.view-mode-btn:hover {\n    color: var(--mj-text-primary);\n    background: var(--mj-bg-surface-hover);\n}\n\n.view-mode-btn-active {\n    background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\n}\n\n/* --- Dashboard container --- */\n.vector-dashboard {\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n    padding: 24px;\n    background: var(--mj-bg-page);\n    min-height: 100%;\n}\n\n/* --- KPI cards row --- */\n.kpi-row {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    gap: 16px;\n}\n\n@media (max-width: 1200px) {\n    .kpi-row {\n        grid-template-columns: repeat(2, 1fr);\n    }\n}\n\n@media (max-width: 600px) {\n    .kpi-row {\n        grid-template-columns: 1fr;\n    }\n}\n\n/* --- Main content: table + sidebar --- */\n.content-area {\n    display: grid;\n    grid-template-columns: 1fr 300px;\n    gap: 24px;\n    align-items: start;\n}\n\n@media (max-width: 1024px) {\n    .content-area {\n        grid-template-columns: 1fr;\n    }\n}\n\n/* --- Sync table panel --- */\n.sync-table-panel {\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 12px;\n    overflow: hidden;\n}\n\n.panel-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 20px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.panel-title {\n    margin: 0;\n    font-size: 15px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.panel-title i {\n    color: var(--mj-brand-primary);\n    font-size: 14px;\n}\n\n.refresh-btn {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 14px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n    font-size: 12px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.refresh-btn:hover {\n    background: var(--mj-bg-surface-hover);\n    color: var(--mj-text-primary);\n    border-color: var(--mj-border-strong);\n}\n\n/* --- Table --- */\n.table-wrapper {\n    overflow-x: auto;\n}\n\n.sync-table {\n    width: 100%;\n    border-collapse: collapse;\n}\n\n.sync-table th {\n    padding: 10px 16px;\n    font-size: 11px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--mj-text-muted);\n    background: var(--mj-bg-surface-card);\n    border-bottom: 1px solid var(--mj-border-default);\n    text-align: left;\n    white-space: nowrap;\n}\n\n.sync-table td {\n    padding: 12px 16px;\n    font-size: 13px;\n    color: var(--mj-text-primary);\n    border-bottom: 1px solid var(--mj-border-subtle);\n    vertical-align: middle;\n}\n\n.sync-table tbody tr:hover {\n    background: var(--mj-bg-surface-hover);\n}\n\n.sync-table tbody tr:last-child td {\n    border-bottom: none;\n}\n\n.text-right {\n    text-align: right;\n}\n\n.text-center {\n    text-align: center;\n}\n\n.entity-name {\n    font-weight: 600;\n}\n\n.document-name {\n    color: var(--mj-text-secondary);\n}\n\n.document-type {\n    color: var(--mj-text-secondary);\n    white-space: nowrap;\n}\n\n.vector-count {\n    font-variant-numeric: tabular-nums;\n    font-weight: 600;\n}\n\n.last-synced {\n    color: var(--mj-text-secondary);\n    font-size: 12px;\n    white-space: nowrap;\n}\n\n/* --- Action buttons in table --- */\n\n.actions-cell {\n    display: flex;\n    gap: 6px;\n    align-items: center;\n    justify-content: center;\n}\n\n.schedule-btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 30px;\n    height: 30px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    background: transparent;\n    color: var(--mj-text-muted);\n    font-size: 12px;\n    cursor: pointer;\n    transition: all 0.15s;\n}\n\n.schedule-btn:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    border-color: var(--mj-brand-primary);\n}\n\n.edit-btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 30px;\n    height: 30px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    background: transparent;\n    color: var(--mj-text-muted);\n    font-size: 12px;\n    cursor: pointer;\n    transition: all 0.15s;\n}\n\n.edit-btn:hover {\n    background: var(--mj-bg-surface-hover);\n    color: var(--mj-text-primary);\n    border-color: var(--mj-border-strong);\n}\n\n/* --- Schedule Dialog --- */\n.schedule-dialog {\n    width: 440px;\n    max-width: 90vw;\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);\n    overflow: hidden;\n}\n\n.schedule-cron-preview {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 0 0;\n    font-size: 0.82rem;\n    color: var(--mj-text-muted);\n}\n\n.schedule-toggle-row {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 12px;\n}\n\n.edit-delete-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 16px;\n    border: 1px solid var(--mj-status-error-border);\n    border-radius: 6px;\n    background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n    color: var(--mj-status-error-text);\n    font-size: 13px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: all 0.15s;\n}\n\n.edit-delete-btn:hover {\n    background: color-mix(in srgb, var(--mj-status-error) 20%, var(--mj-bg-surface));\n}\n\n.edit-readonly-value {\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n    padding: 8px 0;\n}\n\n/* --- Status badges --- */\n.status-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    padding: 4px 10px;\n    border-radius: 999px;\n    font-size: 11px;\n    font-weight: 600;\n    white-space: nowrap;\n}\n\n.status-synced {\n    background: color-mix(in srgb, var(--mj-status-success) 12%, var(--mj-bg-surface));\n    color: var(--mj-status-success-text, var(--mj-status-success));\n}\n\n.status-syncing {\n    background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n}\n\n.status-error {\n    background: color-mix(in srgb, var(--mj-status-error) 12%, var(--mj-bg-surface));\n    color: var(--mj-status-error-text, var(--mj-status-error));\n}\n\n.status-pending {\n    background: color-mix(in srgb, var(--mj-status-warning) 12%, var(--mj-bg-surface));\n    color: var(--mj-status-warning-text, var(--mj-status-warning));\n}\n\n/* --- Sync button --- */\n.sync-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    padding: 5px 12px;\n    border: 1px solid var(--mj-brand-primary);\n    border-radius: 6px;\n    background: transparent;\n    color: var(--mj-brand-primary);\n    font-size: 12px;\n    font-weight: 600;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.sync-btn:hover:not(:disabled) {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n}\n\n.sync-btn:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n}\n\n/* ================================================================\n   Sidebar\n   ================================================================ */\n.sidebar {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n}\n\n.sidebar-card {\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 12px;\n    padding: 16px 20px;\n}\n\n.sidebar-title {\n    margin: 0 0 14px 0;\n    font-size: 13px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.sidebar-title i {\n    color: var(--mj-brand-primary);\n    font-size: 13px;\n}\n\n/* --- Vector DB Health --- */\n.health-row {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-bottom: 6px;\n}\n\n.health-dot {\n    width: 10px;\n    height: 10px;\n    border-radius: 50%;\n    flex-shrink: 0;\n}\n\n.health-healthy {\n    background: var(--mj-status-success);\n    box-shadow: 0 0 6px color-mix(in srgb, var(--mj-status-success) 50%, transparent);\n}\n\n.health-degraded {\n    background: var(--mj-status-warning);\n    box-shadow: 0 0 6px color-mix(in srgb, var(--mj-status-warning) 50%, transparent);\n}\n\n.health-offline {\n    background: var(--mj-status-error);\n    box-shadow: 0 0 6px color-mix(in srgb, var(--mj-status-error) 50%, transparent);\n}\n\n.health-label {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.health-status {\n    font-size: 12px;\n    color: var(--mj-text-muted);\n    padding-left: 18px;\n}\n\n.health-reason {\n    font-size: 11px;\n    line-height: 1.4;\n    color: var(--mj-text-muted);\n    padding-left: 18px;\n    margin-top: 4px;\n}\n\n/* --- Model Info --- */\n.model-info {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.info-row {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n}\n\n.info-label {\n    font-size: 12px;\n    color: var(--mj-text-muted);\n}\n\n.info-value {\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n/* --- Storage / Coverage Gauge --- */\n.gauge-container {\n    margin-bottom: 8px;\n}\n\n.gauge-bar {\n    height: 8px;\n    border-radius: 4px;\n    background: var(--mj-bg-surface-sunken);\n    overflow: hidden;\n    margin-bottom: 6px;\n}\n\n.gauge-fill {\n    height: 100%;\n    border-radius: 4px;\n    background: var(--mj-brand-primary);\n    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);\n    min-width: 2px;\n}\n\n.gauge-label {\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n}\n\n.storage-detail {\n    font-size: 12px;\n    color: var(--mj-text-muted);\n}\n\n/* --- Panel actions row --- */\n.panel-actions {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n/* --- Suggest Document Button --- */\n.suggest-btn {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 14px;\n    border: 1px solid var(--mj-brand-primary);\n    border-radius: 6px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-brand-primary);\n    font-size: 12px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.suggest-btn:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border-color: var(--mj-brand-primary-hover);\n}\n\n/* --- Slide-in Panel Overlay --- */\n.slide-panel-overlay {\n    position: fixed;\n    inset: 0;\n    background: var(--mj-bg-overlay);\n    z-index: 100000;\n}\n\n.slide-panel {\n    position: fixed;\n    top: 0;\n    right: 0;\n    height: 100vh;\n    width: 480px;\n    max-width: 90vw;\n    background: var(--mj-bg-surface);\n    box-shadow: -4px 0 24px color-mix(in srgb, var(--mj-text-primary) 12%, transparent);\n    transform: translateX(100%);\n    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    overflow-y: auto;\n}\n\n.slide-panel.open {\n    transform: translateX(0);\n}\n\n.suggest-dialog-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 20px 24px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.suggest-dialog-title {\n    margin: 0;\n    font-size: 16px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.suggest-dialog-title i {\n    color: var(--mj-brand-primary);\n}\n\n.suggest-close-btn {\n    border: none;\n    background: none;\n    color: var(--mj-text-muted);\n    font-size: 16px;\n    cursor: pointer;\n    padding: 4px;\n}\n\n.suggest-close-btn:hover {\n    color: var(--mj-text-primary);\n}\n\n.suggest-dialog-body {\n    padding: 24px;\n}\n\n/* --- Suggest Form --- */\n.suggest-form {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n}\n\n.suggest-field {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n}\n\n.suggest-label {\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n}\n\n.suggest-select {\n    padding: 8px 12px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-primary);\n    font-size: 13px;\n}\n\n.suggest-select:focus {\n    outline: none;\n    border-color: var(--mj-border-focus);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n/* ---- Use Case Button Group ---- */\n\n.use-case-options {\n    display: flex;\n    gap: 8px;\n    flex-wrap: wrap;\n}\n\n.use-case-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 16px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n    font-size: 13px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.use-case-btn:hover {\n    background: var(--mj-bg-surface-hover);\n    border-color: var(--mj-border-strong);\n    color: var(--mj-text-primary);\n}\n\n.use-case-btn-active {\n    background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\n    font-weight: 600;\n}\n\n.use-case-btn i {\n    font-size: 12px;\n}\n\n/* ---- Entity Picker (grouped by schema) ---- */\n\n.entity-picker {\n    position: relative;\n}\n\n.entity-picker-trigger {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    width: 100%;\n    padding: 9px 12px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-primary);\n    font-size: 13px;\n    cursor: pointer;\n    text-align: left;\n    transition: border-color 0.15s;\n}\n\n.entity-picker-trigger:hover {\n    border-color: var(--mj-border-strong);\n}\n\n.entity-picker-placeholder {\n    color: var(--mj-text-muted);\n    flex: 1;\n}\n\n.entity-picker-value {\n    flex: 1;\n    font-weight: 500;\n}\n\n.entity-picker-arrow {\n    font-size: 10px;\n    color: var(--mj-text-muted);\n    transition: transform 0.2s;\n}\n\n.entity-picker-dropdown {\n    position: absolute;\n    top: calc(100% + 4px);\n    left: 0;\n    right: 0;\n    background: var(--mj-bg-surface-elevated, var(--mj-bg-surface));\n    border: 1px solid var(--mj-border-default);\n    border-radius: 10px;\n    box-shadow: 0 8px 32px color-mix(in srgb, var(--mj-text-primary) 15%, transparent);\n    z-index: 100;\n    max-height: 350px;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n}\n\n.entity-picker-search {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 14px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.entity-picker-search i {\n    color: var(--mj-text-muted);\n    font-size: 13px;\n}\n\n.entity-picker-search-input {\n    flex: 1;\n    border: none;\n    background: transparent;\n    color: var(--mj-text-primary);\n    font-size: 13px;\n    outline: none;\n}\n\n.entity-picker-search-input::placeholder {\n    color: var(--mj-text-disabled);\n}\n\n.entity-picker-list {\n    overflow-y: auto;\n    max-height: 300px;\n    padding: 4px 0;\n}\n\n.entity-picker-group-header {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 14px 4px;\n    font-size: 11px;\n    font-weight: 700;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    position: sticky;\n    top: 0;\n    background: var(--mj-bg-surface-elevated, var(--mj-bg-surface));\n}\n\n.entity-picker-group-header i {\n    font-size: 10px;\n}\n\n.entity-picker-item {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    width: 100%;\n    padding: 7px 14px 7px 28px;\n    border: none;\n    background: transparent;\n    color: var(--mj-text-primary);\n    font-size: 13px;\n    cursor: pointer;\n    text-align: left;\n    transition: background 0.1s;\n}\n\n.entity-picker-item:hover {\n    background: var(--mj-bg-surface-hover);\n}\n\n.entity-picker-item-selected {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    font-weight: 600;\n}\n\n.entity-picker-item i {\n    font-size: 11px;\n    color: var(--mj-text-muted);\n}\n\n.entity-picker-item-selected i {\n    color: var(--mj-brand-primary);\n}\n\n.entity-picker-item-focused {\n    background: var(--mj-bg-surface-hover);\n    outline: 2px solid var(--mj-brand-primary);\n    outline-offset: -2px;\n}\n\n.entity-picker-empty {\n    padding: 20px 14px;\n    text-align: center;\n    color: var(--mj-text-disabled);\n    font-size: 13px;\n}\n\n/* ---- Template Editor ---- */\n\n.template-editor-wrapper {\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    overflow: hidden;\n    min-height: 120px;\n    max-height: 300px;\n}\n\n.template-editor-wrapper ::ng-deep .cm-editor {\n    min-height: 120px;\n    max-height: 300px;\n    font-size: 13px;\n}\n\n.suggest-submit-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 6px;\n    padding: 10px 20px;\n    border: none;\n    border-radius: 6px;\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    font-size: 13px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: background 0.2s ease;\n}\n\n.suggest-submit-btn:hover:not(:disabled) {\n    background: var(--mj-brand-primary-hover);\n}\n\n\n.suggest-submit-btn:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n}\n\n/* --- Suggestion Result --- */\n.suggest-result {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n}\n\n.result-section {\n    border-bottom: 1px solid var(--mj-border-subtle);\n    padding-bottom: 12px;\n}\n\n.result-section:last-child {\n    border-bottom: none;\n}\n\n.result-heading {\n    margin: 0 0 8px 0;\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.result-template {\n    background: var(--mj-bg-surface-sunken);\n    border: 1px solid var(--mj-border-subtle);\n    border-radius: 6px;\n    padding: 12px;\n    font-size: 12px;\n    color: var(--mj-text-primary);\n    white-space: pre-wrap;\n    word-break: break-all;\n    margin: 0;\n}\n\n.result-tags {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 6px;\n}\n\n.result-tag {\n    padding: 3px 10px;\n    border-radius: 12px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    font-size: 12px;\n    font-weight: 500;\n}\n\n.result-relationship {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 4px 0;\n}\n\n.rel-name {\n    font-weight: 600;\n    font-size: 13px;\n    color: var(--mj-text-primary);\n}\n\n.rel-fields {\n    font-size: 12px;\n    color: var(--mj-text-muted);\n}\n\n.result-thresholds {\n    display: flex;\n    gap: 24px;\n}\n\n.threshold-item {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n}\n\n.threshold-label {\n    font-size: 12px;\n    color: var(--mj-text-muted);\n}\n\n.threshold-value {\n    font-size: 18px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.result-reasoning {\n    margin: 0;\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n    line-height: 1.5;\n}\n\n.result-actions {\n    display: flex;\n    gap: 8px;\n    padding-top: 8px;\n}\n\n.suggest-close-action {\n    padding: 10px 20px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n    font-size: 13px;\n    font-weight: 500;\n    cursor: pointer;\n}\n\n.suggest-close-action:hover {\n    background: var(--mj-bg-surface-hover);\n}\n\n/* --- Suggest Input --- */\n.suggest-input {\n    padding: 8px 12px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-primary);\n    font-size: 13px;\n    width: 100%;\n    box-sizing: border-box;\n}\n\n.suggest-input:focus {\n    outline: none;\n    border-color: var(--mj-border-focus);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n/* --- Try Again Button (secondary style) --- */\n.suggest-try-again-btn {\n    background: var(--mj-bg-surface);\n    color: var(--mj-brand-primary);\n    border: 1px solid var(--mj-brand-primary);\n}\n\n.suggest-try-again-btn:hover:not(:disabled) {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n/* --- Save Spinner --- */\n.save-spinner {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 8px 0;\n}\n\n/* --- Edit Panel Template Header --- */\n.edit-template-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 8px;\n}\n\n.edit-regenerate-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    padding: 4px 10px;\n    border: 1px solid var(--mj-brand-primary);\n    border-radius: 6px;\n    background: transparent;\n    color: var(--mj-brand-primary);\n    font-size: 11px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: all 0.15s ease;\n    white-space: nowrap;\n}\n\n.edit-regenerate-btn:hover:not(:disabled) {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.edit-regenerate-btn:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n}\n\n/* --- No Vector Index Warning Dialog --- */\n.no-index-warning-dialog {\n    position: fixed;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    width: 440px;\n    max-width: 90vw;\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    box-shadow: 0 20px 60px color-mix(in srgb, var(--mj-text-primary) 20%, transparent);\n    padding: 32px;\n    text-align: center;\n}\n\n.no-index-warning-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 56px;\n    height: 56px;\n    margin: 0 auto 16px;\n    border-radius: 50%;\n    background: color-mix(in srgb, var(--mj-status-warning) 12%, var(--mj-bg-surface));\n}\n\n.no-index-warning-icon i {\n    font-size: 24px;\n    color: var(--mj-status-warning);\n}\n\n.no-index-warning-title {\n    margin: 0 0 8px 0;\n    font-size: 18px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.no-index-warning-message {\n    margin: 0 0 24px 0;\n    font-size: 14px;\n    line-height: 1.5;\n    color: var(--mj-text-secondary);\n}\n\n.no-index-warning-actions {\n    display: flex;\n    gap: 8px;\n    justify-content: center;\n}\n\n/* ================================================================\n   Responsive \u2014 Vector Management\n   ================================================================ */\n\n@media (max-width: 768px) {\n    .panel-header {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 12px;\n    }\n\n    .panel-actions {\n        flex-wrap: wrap;\n    }\n}\n\n@media (max-width: 600px) {\n    .slide-panel {\n        width: 100vw;\n        max-width: 100vw;\n    }\n}\n\n@media (max-width: 480px) {\n    .vector-dashboard {\n        padding: 12px;\n    }\n\n    .suggest-btn .suggest-btn-text {\n        display: none;\n    }\n}\n"] }]
     }], null, { HideToolbar: [{
             type: Input
         }], EntitySearchInput: [{
             type: ViewChild,
             args: ['entitySearchInput']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(VectorManagementResourceComponent, { className: "VectorManagementResourceComponent", filePath: "src/AI/components/vectors/vector-management-resource.component.ts", lineNumber: 92 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(VectorManagementResourceComponent, { className: "VectorManagementResourceComponent", filePath: "src/AI/components/vectors/vector-management-resource.component.ts", lineNumber: 102 }); })();
 export function LoadVectorManagementResource() {
     // Prevents tree-shaking
 }