@memberjunction/ng-artifacts 2.112.0 → 2.113.1

package/dist/lib/components/artifact-viewer-panel.component.js

@@ -1,7 +1,7 @@
-import { Component, Input, Output, EventEmitter, ViewChild, SecurityContext, } from '@angular/core';
-import { Metadata, RunView, LogError } from '@memberjunction/global';
+import { Component, Input, Output, EventEmitter, ViewChild, SecurityContext } from '@angular/core';
+import { Metadata, RunView, LogError } from '@memberjunction/core';
 import { ParseJSONRecursive } from '@memberjunction/global';
-import { ArtifactMetadataEngine, } from '@memberjunction/core-entities';
+import { ArtifactMetadataEngine } from '@memberjunction/core-entities';
 import { MJNotificationService } from '@memberjunction/ng-notifications';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -78,7 +78,7 @@ function ArtifactViewerPanelComponent_Conditional_14_Template(rf, ctx) { if (rf
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵclassProp("in-collection", ctx_r0.isInCollection);
-    i0.ɵɵproperty("title", ctx_r0.isInCollection ? "Saved to " + ctx_r0.artifactCollections.length + " collection(s)" : "Save to Collection");
+    i0.ɵɵproperty("title", ctx_r0.isInCollection ? "Current version saved to " + ctx_r0.currentVersionCollections.length + " collection(s)" : "Save to Collection");
     i0.ɵɵadvance();
     i0.ɵɵclassMap(ctx_r0.isInCollection ? "fas fa-bookmark" : "far fa-bookmark");
 } }
@@ -246,40 +246,41 @@ function ArtifactViewerPanelComponent_Conditional_21_Conditional_33_Template(rf,
     i0.ɵɵrepeater(ctx_r0.filteredAttributes);
 } }
 function ArtifactViewerPanelComponent_Conditional_21_Conditional_35_For_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 61);
+    i0.ɵɵelement(0, "i", 62);
 } }
 function ArtifactViewerPanelComponent_Conditional_21_Conditional_35_For_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 62);
+    i0.ɵɵelement(0, "i", 63);
 } }
 function ArtifactViewerPanelComponent_Conditional_21_Conditional_35_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 59)(1, "div", 60);
-    i0.ɵɵtemplate(2, ArtifactViewerPanelComponent_Conditional_21_Conditional_35_For_2_Conditional_2_Template, 1, 0, "i", 61)(3, ArtifactViewerPanelComponent_Conditional_21_Conditional_35_For_2_Conditional_3_Template, 1, 0, "i", 62);
+    i0.ɵɵelementStart(0, "div", 60);
+    i0.ɵɵlistener("click", function ArtifactViewerPanelComponent_Conditional_21_Conditional_35_For_2_Template_div_click_0_listener() { const link_r12 = i0.ɵɵrestoreView(_r11).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(link_r12.hasAccess ? ctx_r0.onNavigateToLink(link_r12) : null); });
+    i0.ɵɵelementStart(1, "div", 61);
+    i0.ɵɵtemplate(2, ArtifactViewerPanelComponent_Conditional_21_Conditional_35_For_2_Conditional_2_Template, 1, 0, "i", 62)(3, ArtifactViewerPanelComponent_Conditional_21_Conditional_35_For_2_Conditional_3_Template, 1, 0, "i", 63);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 63)(5, "div", 64);
+    i0.ɵɵelementStart(4, "div", 64)(5, "div", 65);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "div", 65);
+    i0.ɵɵelementStart(7, "div", 66);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "div", 66)(10, "button", 67);
-    i0.ɵɵlistener("click", function ArtifactViewerPanelComponent_Conditional_21_Conditional_35_For_2_Template_button_click_10_listener() { const link_r12 = i0.ɵɵrestoreView(_r11).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onNavigateToLink(link_r12)); });
-    i0.ɵɵelement(11, "i", 68);
-    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(9, "div", 67);
+    i0.ɵɵelement(10, "i", 68);
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const link_r12 = ctx.$implicit;
+    i0.ɵɵclassProp("disabled", !link_r12.hasAccess)("clickable", link_r12.hasAccess);
+    i0.ɵɵproperty("title", link_r12.hasAccess ? "Click to open" : "No access");
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(link_r12.type === "conversation" ? 2 : 3);
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(link_r12.name);
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(link_r12.type === "conversation" ? "Conversation" : "Collection");
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("disabled", !link_r12.hasAccess)("title", link_r12.hasAccess ? "Open" : "No access");
 } }
 function ArtifactViewerPanelComponent_Conditional_21_Conditional_35_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 42);
-    i0.ɵɵrepeaterCreate(1, ArtifactViewerPanelComponent_Conditional_21_Conditional_35_For_2_Template, 12, 5, "div", 59, _forTrack1);
+    i0.ɵɵrepeaterCreate(1, ArtifactViewerPanelComponent_Conditional_21_Conditional_35_For_2_Template, 11, 8, "div", 59, _forTrack1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
@@ -460,7 +461,8 @@ export class ArtifactViewerPanelComponent {
     error = null;
     jsonContent = '';
     showVersionDropdown = false;
-    artifactCollections = [];
+    artifactCollections = []; // All collections for ALL versions
+    currentVersionCollections = []; // Collections containing CURRENT version only
     primaryCollection = null;
     // Tabbed interface
     activeTab = 'display'; // Changed to string to support dynamic tabs
@@ -472,6 +474,7 @@ export class ArtifactViewerPanelComponent {
     originConversation = null;
     allCollections = [];
     hasAccessToOriginConversation = false;
+    originConversationVersionId = null; // Version ID that came from origin conversation
     // Dynamic tabs from plugin
     get allTabs() {
         // Start with Display tab (cannot be removed)
@@ -484,7 +487,7 @@ export class ArtifactViewerPanelComponent {
         }
         // Get tabs to remove from plugin (case-insensitive)
         const removals = this.pluginViewer?.pluginInstance?.GetStandardTabRemovals?.() || [];
-        const removalsLower = removals.map((r) => r.toLowerCase());
+        const removalsLower = removals.map(r => r.toLowerCase());
         // Add standard tabs (unless plugin removed them)
         if (!removalsLower.includes('json')) {
             tabs.push('JSON');
@@ -492,8 +495,8 @@ export class ArtifactViewerPanelComponent {
         if (!removalsLower.includes('details')) {
             tabs.push('Details');
         }
-        // Always add Links tab (unless plugin explicitly removes it)
-        if (!removalsLower.includes('links')) {
+        // Only add Links tab if there are links to show (unless plugin explicitly removes it)
+        if (!removalsLower.includes('links') && this.linksToShow.length > 0) {
             tabs.push('Links');
         }
         return tabs;
@@ -504,11 +507,13 @@ export class ArtifactViewerPanelComponent {
             const pluginTabs = this.pluginViewer.pluginInstance.GetAdditionalTabs();
             const pluginTab = pluginTabs.find((t) => t.label.toLowerCase() === tabName.toLowerCase());
             if (pluginTab) {
-                const content = typeof pluginTab.content === 'function' ? pluginTab.content() : pluginTab.content;
+                const content = typeof pluginTab.content === 'function'
+                    ? pluginTab.content()
+                    : pluginTab.content;
                 return {
                     type: pluginTab.contentType,
                     content: content,
-                    language: pluginTab.language,
+                    language: pluginTab.language
                 };
             }
         }
@@ -531,7 +536,6 @@ export class ArtifactViewerPanelComponent {
         if (this.refreshTrigger) {
             this.refreshTrigger.pipe(takeUntil(this.destroy$)).subscribe(async (data) => {
                 if (data.artifactId === this.artifactId) {
-                    console.log(`📦 Refreshing artifact viewer to version ${data.versionNumber}`);
                     // Reload all versions to get any new ones
                     await this.loadArtifact(data.versionNumber);
                 }
@@ -539,6 +543,10 @@ export class ArtifactViewerPanelComponent {
         }
         // Load artifact with specified version if provided
         await this.loadArtifact(this.versionNumber);
+        // Track that user viewed this artifact
+        if (this.artifactVersion?.ID && this.currentUser) {
+            this.trackArtifactUsage('Viewed');
+        }
     }
     async ngOnChanges(changes) {
         // Reload artifact when artifactId changes
@@ -549,17 +557,19 @@ export class ArtifactViewerPanelComponent {
         if (changes['versionNumber'] && !changes['versionNumber'].firstChange) {
             const newVersionNumber = changes['versionNumber'].currentValue;
             if (newVersionNumber != null) {
-                console.log(`📦 Version number changed to ${newVersionNumber}, switching version`);
                 // Check if we already have this version loaded (avoid reload if possible)
-                const targetVersion = this.allVersions.find((v) => v.VersionNumber === newVersionNumber);
+                const targetVersion = this.allVersions.find(v => v.VersionNumber === newVersionNumber);
                 if (targetVersion) {
                     // Just switch to the version we already have
                     this.artifactVersion = targetVersion;
                     this.selectedVersionNumber = targetVersion.VersionNumber || 1;
                     this.jsonContent = this.FormatJSON(targetVersion.Content || '{}');
-                    console.log(`📦 Switched to cached version ${this.selectedVersionNumber}`);
                     // Load version attributes
                     await this.loadVersionAttributes();
+                    // Reload collection associations for this version
+                    await this.loadCollectionAssociations();
+                    // Reload links data
+                    await this.loadLinksData();
                 }
                 else {
                     // Need to reload to get this version (shouldn't normally happen)
@@ -576,6 +586,8 @@ export class ArtifactViewerPanelComponent {
         try {
             this.isLoading = true;
             this.error = null;
+            // Clear links data from previous artifact to prevent stale Links tab
+            this.clearLinksData();
             const md = new Metadata();
             // Load artifact
             this.artifact = await md.GetEntityObject('MJ: Artifacts', this.currentUser);
@@ -592,21 +604,19 @@ export class ArtifactViewerPanelComponent {
                 EntityName: 'MJ: Artifact Versions',
                 ExtraFilter: `ArtifactID='${this.artifactId}'`,
                 OrderBy: 'VersionNumber DESC',
-                ResultType: 'entity_object',
+                ResultType: 'entity_object'
             }, this.currentUser);
             if (result.Success && result.Results && result.Results.length > 0) {
                 this.allVersions = result.Results;
                 // If target version specified, try to load it
                 if (targetVersionNumber) {
-                    const targetVersion = this.allVersions.find((v) => v.VersionNumber === targetVersionNumber);
+                    const targetVersion = this.allVersions.find(v => v.VersionNumber === targetVersionNumber);
                     if (targetVersion) {
-                        console.log(`📦 Loading specified version ${targetVersionNumber}`);
                         this.artifactVersion = targetVersion;
                         this.selectedVersionNumber = targetVersion.VersionNumber || 1;
                         this.jsonContent = this.FormatJSON(targetVersion.Content || '{}');
                     }
                     else {
-                        console.warn(`📦 Version ${targetVersionNumber} not found, defaulting to latest`);
                         // Target version not found, default to latest
                         this.artifactVersion = result.Results[0];
                         this.selectedVersionNumber = this.artifactVersion.VersionNumber || 1;
@@ -625,7 +635,6 @@ export class ArtifactViewerPanelComponent {
                 await this.loadCollectionAssociations();
                 // Load links data
                 await this.loadLinksData();
-                console.log(`📦 Loaded ${this.allVersions.length} versions for artifact ${this.artifactId}, showing v${this.selectedVersionNumber}`);
             }
             else {
                 this.error = 'No artifact version found';
@@ -639,6 +648,15 @@ export class ArtifactViewerPanelComponent {
             this.isLoading = false;
         }
     }
+    /**
+     * Clear all links-related data to prevent stale data when switching artifacts
+     */
+    clearLinksData() {
+        this.allCollections = [];
+        this.originConversation = null;
+        this.hasAccessToOriginConversation = false;
+        this.originConversationVersionId = null;
+    }
     async loadArtifactType() {
         if (!this.artifact?.Type) {
             return;
@@ -649,7 +667,6 @@ export class ArtifactViewerPanelComponent {
             if (artifactType) {
                 // Resolve DriverClass by traversing parent hierarchy if needed
                 this.artifactTypeDriverClass = await this.resolveDriverClassForType(artifactType);
-                console.log(`📦 Loaded artifact type "${this.artifact.Type}", DriverClass: ${this.artifactTypeDriverClass || 'none'}`);
             }
         }
         catch (err) {
@@ -665,13 +682,13 @@ export class ArtifactViewerPanelComponent {
             const result = await rv.RunView({
                 EntityName: 'MJ: Artifact Version Attributes',
                 ExtraFilter: `ArtifactVersionID='${this.artifactVersion.ID}'`,
-                ResultType: 'entity_object',
+                ResultType: 'entity_object'
             }, this.currentUser);
             if (result.Success && result.Results) {
                 this.versionAttributes = result.Results;
                 // Check for displayMarkdown or displayHtml attributes
-                const displayMarkdownAttr = this.versionAttributes.find((a) => a.Name?.toLowerCase() === 'displaymarkdown');
-                const displayHtmlAttr = this.versionAttributes.find((a) => a.Name?.toLowerCase() === 'displayhtml');
+                const displayMarkdownAttr = this.versionAttributes.find(a => a.Name?.toLowerCase() === 'displaymarkdown');
+                const displayHtmlAttr = this.versionAttributes.find(a => a.Name?.toLowerCase() === 'displayhtml');
                 // Parse values - they might be JSON-encoded strings
                 this.displayMarkdown = this.parseAttributeValue(displayMarkdownAttr?.Value);
                 this.displayHtml = this.parseAttributeValue(displayHtmlAttr?.Value);
@@ -690,7 +707,6 @@ export class ArtifactViewerPanelComponent {
                 else {
                     this.activeTab = 'details';
                 }
-                console.log(`📦 Loaded ${this.versionAttributes.length} attributes, displayMarkdown=${!!this.displayMarkdown}, displayHtml=${!!this.displayHtml}, hasDisplayTab=${this.hasDisplayTab}, activeTab=${this.activeTab}`);
             }
         }
         catch (err) {
@@ -730,12 +746,12 @@ export class ArtifactViewerPanelComponent {
     }
     get contentType() {
         // Try to get content type from artifact type or attributes
-        const contentTypeAttr = this.versionAttributes.find((a) => a.Name?.toLowerCase() === 'contenttype');
+        const contentTypeAttr = this.versionAttributes.find(a => a.Name?.toLowerCase() === 'contenttype');
         return contentTypeAttr?.Value || undefined;
     }
     get filteredAttributes() {
         // Filter out displayMarkdown and displayHtml as they're shown in the Display tab
-        return this.versionAttributes.filter((attr) => {
+        return this.versionAttributes.filter(attr => {
             const name = attr.Name?.toLowerCase();
             return name !== 'displaymarkdown' && name !== 'displayhtml';
         });
@@ -779,20 +795,35 @@ export class ArtifactViewerPanelComponent {
             return;
         try {
             const rv = new RunView();
+            // Load ALL collection associations for ALL versions of this artifact
             const result = await rv.RunView({
                 EntityName: 'MJ: Collection Artifacts',
-                ExtraFilter: `ArtifactID='${this.artifactId}'`,
-                ResultType: 'entity_object',
+                ExtraFilter: `ArtifactVersionID IN (
+          SELECT ID FROM [__mj].[vwArtifactVersions] WHERE ArtifactID='${this.artifactId}'
+        )`,
+                ResultType: 'entity_object'
             }, this.currentUser);
             if (result.Success && result.Results) {
                 this.artifactCollections = result.Results;
+                // Filter to get only collections containing the CURRENT version
+                const currentVersionId = this.artifactVersion?.ID;
+                if (currentVersionId) {
+                    // Type-safe comparison: ensure both IDs are strings and match exactly
+                    const currentIdStr = String(currentVersionId).toLowerCase();
+                    this.currentVersionCollections = result.Results.filter(ca => {
+                        const versionIdStr = String(ca.ArtifactVersionID || '').toLowerCase();
+                        return versionIdStr && currentIdStr && versionIdStr === currentIdStr;
+                    });
+                }
+                else {
+                    this.currentVersionCollections = [];
+                }
                 // Load the primary collection details if exists
                 if (this.artifactCollections.length > 0) {
                     const collectionId = this.artifactCollections[0].CollectionID;
                     const md = new Metadata();
                     this.primaryCollection = await md.GetEntityObject('MJ: Collections', this.currentUser);
                     await this.primaryCollection.Load(collectionId);
-                    console.log(`📦 Artifact is in ${this.artifactCollections.length} collection(s)`);
                 }
                 else {
                     this.primaryCollection = null;
@@ -804,7 +835,14 @@ export class ArtifactViewerPanelComponent {
         }
     }
     get isInCollection() {
-        return this.artifactCollections.length > 0;
+        return this.currentVersionCollections.length > 0;
+    }
+    /**
+     * Get collection IDs that already contain the current version
+     * Used to exclude them from the save picker
+     */
+    get currentVersionCollectionIds() {
+        return this.currentVersionCollections.map(ca => ca.CollectionID);
     }
     onCopyToClipboard() {
         // Get content from the currently active tab instead of always copying jsonContent
@@ -820,12 +858,7 @@ export class ArtifactViewerPanelComponent {
     onCopyDisplayContent() {
         const content = this.displayHtml || this.displayMarkdown;
         if (content) {
-            navigator.clipboard
-                .writeText(content)
-                .then(() => {
-                console.log('✅ Copied display content to clipboard');
-            })
-                .catch((err) => {
+            navigator.clipboard.writeText(content).catch(err => {
                 console.error('Failed to copy to clipboard:', err);
             });
         }
@@ -886,18 +919,27 @@ export class ArtifactViewerPanelComponent {
         this.showVersionDropdown = false;
         // Load attributes for the selected version
         await this.loadVersionAttributes();
+        // CRITICAL FIX: Reload collection associations for this version
+        // This ensures bookmark button and Links tab reflect the correct state
+        await this.loadCollectionAssociations();
+        // Also reload links data to update conversation/collection links
+        await this.loadLinksData();
     }
     async onSaveToLibrary() {
         // Always show the collection picker modal
         // Artifacts can be saved to multiple collections
         this.saveToCollectionRequested.emit({
             artifactId: this.artifactId,
-            excludedCollectionIds: this.excludedCollectionIds,
+            excludedCollectionIds: this.excludedCollectionIds
         });
     }
     get excludedCollectionIds() {
-        // Return IDs of collections that already contain this artifact
-        return this.artifactCollections.map((ca) => ca.CollectionID);
+        // Return IDs of collections that already contain the CURRENT VERSION
+        // This allows saving different versions to the same collection
+        const excluded = this.currentVersionCollections
+            .filter(ca => ca.CollectionID)
+            .map(ca => String(ca.CollectionID));
+        return excluded;
     }
     /**
      * Called by parent component after user selects collections in the picker.
@@ -910,34 +952,39 @@ export class ArtifactViewerPanelComponent {
         try {
             const md = new Metadata();
             let successCount = 0;
-            // Save artifact to each selected collection
+            // Get current version ID - save the version being viewed
+            const currentVersionId = this.artifactVersion?.ID;
+            if (!currentVersionId) {
+                console.error('No current version ID available');
+                MJNotificationService.Instance.CreateSimpleNotification('Cannot save: no version selected', 'error');
+                return false;
+            }
+            // Save artifact version to each selected collection
             for (const collectionId of collectionIds) {
-                // Double check it doesn't already exist
+                // Double check this exact version doesn't already exist in the collection
                 const rv = new RunView();
                 const existingResult = await rv.RunView({
                     EntityName: 'MJ: Collection Artifacts',
-                    ExtraFilter: `CollectionID='${collectionId}' AND ArtifactID='${this.artifactId}'`,
-                    ResultType: 'entity_object',
+                    ExtraFilter: `CollectionID='${collectionId}' AND ArtifactVersionID='${currentVersionId}'`,
+                    ResultType: 'entity_object'
                 }, this.currentUser);
                 if (existingResult.Success && existingResult.Results && existingResult.Results.length > 0) {
-                    console.log(`Artifact already in collection ${collectionId}, skipping`);
                     continue;
                 }
-                // Create junction record
+                // Create junction record with version ID
                 const collectionArtifact = await md.GetEntityObject('MJ: Collection Artifacts', this.currentUser);
                 collectionArtifact.CollectionID = collectionId;
-                collectionArtifact.ArtifactID = this.artifactId;
+                collectionArtifact.ArtifactVersionID = currentVersionId;
                 collectionArtifact.Sequence = 0;
                 const saved = await collectionArtifact.Save();
                 if (saved) {
                     successCount++;
                 }
                 else {
-                    console.error(`Failed to save artifact to collection ${collectionId}`);
+                    console.error(`Failed to save artifact version to collection ${collectionId}`);
                 }
             }
             if (successCount > 0) {
-                console.log(`✅ Saved artifact to ${successCount} collection(s)`);
                 MJNotificationService.Instance.CreateSimpleNotification(`Artifact saved to ${successCount} collection(s) successfully!`, 'success', 3000);
                 // Reload collection associations to update the bookmark icon state
                 await this.loadCollectionAssociations();
@@ -961,24 +1008,28 @@ export class ArtifactViewerPanelComponent {
     async loadLinksData() {
         if (!this.artifactId)
             return;
+        // Clear old links data first to prevent stale data from previous artifact
+        this.clearLinksData();
         try {
             const md = new Metadata();
             const rv = new RunView();
-            // Load all collections containing this artifact
+            // Load all collections containing any version of this artifact
             const collArtifactsResult = await rv.RunView({
                 EntityName: 'MJ: Collection Artifacts',
-                ExtraFilter: `ArtifactID='${this.artifactId}'`,
-                ResultType: 'entity_object',
+                ExtraFilter: `ArtifactVersionID IN (
+          SELECT ID FROM [__mj].[vwArtifactVersions] WHERE ArtifactID='${this.artifactId}'
+        )`,
+                ResultType: 'entity_object'
             }, this.currentUser);
             if (collArtifactsResult.Success && collArtifactsResult.Results) {
                 // Get unique collection IDs
-                const collectionIds = [...new Set(collArtifactsResult.Results.map((ca) => ca.CollectionID))];
+                const collectionIds = [...new Set(collArtifactsResult.Results.map(ca => ca.CollectionID))];
                 if (collectionIds.length > 0) {
-                    const collectionsFilter = collectionIds.map((id) => `ID='${id}'`).join(' OR ');
+                    const collectionsFilter = collectionIds.map(id => `ID='${id}'`).join(' OR ');
                     const collectionsResult = await rv.RunView({
                         EntityName: 'MJ: Collections',
                         ExtraFilter: collectionsFilter,
-                        ResultType: 'entity_object',
+                        ResultType: 'entity_object'
                     }, this.currentUser);
                     if (collectionsResult.Success && collectionsResult.Results) {
                         this.allCollections = collectionsResult.Results;
@@ -988,17 +1039,20 @@ export class ArtifactViewerPanelComponent {
             // Load origin conversation (if artifact came from conversation)
             // Artifacts are linked to conversations via ConversationDetailArtifact -> ConversationDetail -> Conversation
             // Get all version IDs for this artifact
-            const versionIds = this.allVersions.map((v) => v.ID);
+            const versionIds = this.allVersions.map(v => v.ID);
             if (versionIds.length > 0) {
-                const versionFilter = versionIds.map((id) => `ArtifactVersionID='${id}'`).join(' OR ');
+                const versionFilter = versionIds.map(id => `ArtifactVersionID='${id}'`).join(' OR ');
                 const convDetailArtifactsResult = await rv.RunView({
                     EntityName: 'MJ: Conversation Detail Artifacts',
                     ExtraFilter: versionFilter,
                     MaxRows: 1,
-                    ResultType: 'entity_object',
+                    ResultType: 'entity_object'
                 }, this.currentUser);
                 if (convDetailArtifactsResult.Success && convDetailArtifactsResult.Results && convDetailArtifactsResult.Results.length > 0) {
                     const conversationDetailId = convDetailArtifactsResult.Results[0].ConversationDetailID;
+                    const artifactVersionId = convDetailArtifactsResult.Results[0].ArtifactVersionID;
+                    // Store which version came from the origin conversation
+                    this.originConversationVersionId = artifactVersionId;
                     // Load the conversation detail to get the conversation ID
                     const conversationDetail = await md.GetEntityObject('Conversation Details', this.currentUser);
                     const detailLoaded = await conversationDetail.Load(conversationDetailId);
@@ -1014,15 +1068,16 @@ export class ArtifactViewerPanelComponent {
                                 EntityName: 'Conversation Details',
                                 ExtraFilter: `ConversationID='${conversation.ID}' AND UserID='${this.currentUser.ID}'`,
                                 MaxRows: 1,
-                                ResultType: 'simple',
+                                ResultType: 'simple'
                             }, this.currentUser);
-                            const userIsParticipant = participantResult.Success && participantResult.Results && participantResult.Results.length > 0;
+                            const userIsParticipant = participantResult.Success &&
+                                participantResult.Results &&
+                                participantResult.Results.length > 0;
                             this.hasAccessToOriginConversation = userIsOwner || userIsParticipant;
                         }
                     }
                 }
             }
-            console.log(`🔗 Loaded links: ${this.allCollections.length} collections, origin conversation: ${this.originConversation?.Name || 'none'}, viewContext: ${this.viewContext}`);
         }
         catch (error) {
             console.error('Error loading links data:', error);
@@ -1030,28 +1085,34 @@ export class ArtifactViewerPanelComponent {
     }
     get linksToShow() {
         const links = [];
-        // Add origin conversation if viewing in collection
-        if (this.viewContext === 'collection' && this.originConversation) {
-            links.push({
-                type: 'conversation',
-                id: this.originConversation.ID,
-                name: this.originConversation.Name || 'Untitled Conversation',
-                hasAccess: this.hasAccessToOriginConversation,
-            });
+        // Get current version ID being viewed
+        const currentVersionId = this.artifactVersion?.ID;
+        // RULE: In conversation context, show ONLY collection links
+        // RULE: In collection context, show ONLY conversation links
+        if (this.viewContext === 'conversation') {
+            // Show all collections containing this artifact (any version)
+            for (const collection of this.allCollections) {
+                links.push({
+                    type: 'collection',
+                    id: collection.ID,
+                    name: collection.Name,
+                    hasAccess: true
+                });
+            }
         }
-        // Add all collections (excluding current context if applicable)
-        for (const collection of this.allCollections) {
-            if (this.viewContext === 'collection' && collection.ID === this.contextCollectionId) {
-                // Skip current collection
-                continue;
+        else if (this.viewContext === 'collection') {
+            // Show origin conversation if it exists
+            // Show for ALL versions of the artifact, not just the original version that was added
+            if (this.originConversation) {
+                links.push({
+                    type: 'conversation',
+                    id: this.originConversation.ID,
+                    name: this.originConversation.Name || 'Untitled Conversation',
+                    hasAccess: this.hasAccessToOriginConversation
+                });
             }
-            links.push({
-                type: 'collection',
-                id: collection.ID,
-                name: collection.Name,
-                hasAccess: true, // User can see it, so they have access
-            });
         }
+        // If viewContext is null, show nothing (no links)
         return links;
     }
     /**
@@ -1061,9 +1122,13 @@ export class ArtifactViewerPanelComponent {
         if (!link.hasAccess) {
             return;
         }
+        // Include artifact ID, version number, and version ID so destination can show the artifact with correct URL
         this.navigateToLink.emit({
             type: link.type,
             id: link.id,
+            artifactId: this.artifactId,
+            versionNumber: this.selectedVersionNumber,
+            versionId: this.artifactVersion?.ID
         });
     }
     onClose() {
@@ -1079,23 +1144,17 @@ export class ArtifactViewerPanelComponent {
     async resolveDriverClassForType(artifactType) {
         // Check if current artifact type has a DriverClass
         if (artifactType.DriverClass) {
-            console.log(`✅ Found DriverClass '${artifactType.DriverClass}' on artifact type '${artifactType.Name}'`);
             return artifactType.DriverClass;
         }
         // No DriverClass on current type - check if it has a parent
         if (artifactType.ParentID) {
-            console.log(`🔍 No DriverClass on '${artifactType.Name}', checking parent...`);
             const parentType = await this.getArtifactTypeById(artifactType.ParentID);
             if (parentType) {
                 // Recursively check parent
                 return await this.resolveDriverClassForType(parentType);
             }
-            else {
-                console.warn(`⚠️ Parent artifact type '${artifactType.ParentID}' not found`);
-            }
         }
         // Reached root with no DriverClass
-        console.log(`❌ No DriverClass found in hierarchy for '${artifactType.Name}'`);
         return null;
     }
     /**
@@ -1127,7 +1186,7 @@ export class ArtifactViewerPanelComponent {
             const parseOptions = {
                 extractInlineJson: true,
                 maxDepth: 100,
-                debug: false,
+                debug: false
             };
             const parsed = ParseJSONRecursive(obj, parseOptions);
             // Finally stringify with formatting
@@ -1151,11 +1210,11 @@ export class ArtifactViewerPanelComponent {
     GetTabIcon(tabName) {
         // Base tabs
         const baseIcons = {
-            Display: 'fas fa-eye',
-            Code: 'fas fa-code',
-            JSON: 'fas fa-file-code',
-            Details: 'fas fa-info-circle',
-            Links: 'fas fa-link',
+            'Display': 'fas fa-eye',
+            'Code': 'fas fa-code',
+            'JSON': 'fas fa-file-code',
+            'Details': 'fas fa-info-circle',
+            'Links': 'fas fa-link'
         };
         if (baseIcons[tabName]) {
             return baseIcons[tabName];
@@ -1189,13 +1248,40 @@ export class ArtifactViewerPanelComponent {
     SetActiveTab(tabName) {
         this.activeTab = tabName.toLowerCase();
     }
+    /**
+     * Track artifact usage event
+     */
+    async trackArtifactUsage(usageType) {
+        try {
+            if (!this.artifactVersion?.ID || !this.currentUser?.ID) {
+                return;
+            }
+            const md = new Metadata();
+            const usage = await md.GetEntityObject('MJ: Artifact Uses');
+            usage.ArtifactVersionID = this.artifactVersion.ID;
+            usage.UserID = this.currentUser.ID;
+            usage.UsageType = usageType;
+            usage.UsageContext = JSON.stringify({
+                viewContext: this.viewContext,
+                contextCollectionId: this.contextCollectionId,
+                timestamp: new Date().toISOString()
+            });
+            // Save asynchronously - don't block UI
+            usage.Save().catch(error => {
+                console.error('Failed to track artifact usage:', error);
+            });
+        }
+        catch (error) {
+            console.error('Error tracking artifact usage:', error);
+        }
+    }
     static ɵfac = function ArtifactViewerPanelComponent_Factory(t) { return new (t || ArtifactViewerPanelComponent)(i0.ɵɵdirectiveInject(i1.MJNotificationService), i0.ɵɵdirectiveInject(i2.DomSanitizer)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ArtifactViewerPanelComponent, selectors: [["mj-artifact-viewer-panel"]], viewQuery: function ArtifactViewerPanelComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(ArtifactTypePluginViewerComponent, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.pluginViewer = _t.first);
-        } }, inputs: { artifactId: "artifactId", currentUser: "currentUser", environmentId: "environmentId", versionNumber: "versionNumber", showSaveToCollection: "showSaveToCollection", refreshTrigger: "refreshTrigger", viewContext: "viewContext", contextCollectionId: "contextCollectionId", canShare: "canShare", canEdit: "canEdit" }, outputs: { closed: "closed", saveToCollectionRequested: "saveToCollectionRequested", navigateToLink: "navigateToLink", shareRequested: "shareRequested" }, features: [i0.ɵɵNgOnChangesFeature], decls: 22, vars: 12, consts: [[1, "artifact-viewer-panel"], [1, "panel-header"], [1, "panel-header-left"], [1, "fas", "fa-cube"], [1, "header-description"], [1, "panel-header-right"], [1, "version-selector", 3, "click"], [1, "fas", "fa-history"], [1, "version-label"], [1, "fas", "fa-chevron-down", "dropdown-icon", 3, "open"], [1, "version-dropdown"], [1, "save-to-collection-btn", 3, "in-collection", "title"], ["title", "Share", 1, "share-btn"], ["title", "Close", 1, "close-btn", 3, "click"], [1, "fas", "fa-times"], [1, "panel-content"], [1, "loading-state"], [1, "error-state"], [1, "artifact-content-wrapper"], [1, "fas", "fa-chevron-down", "dropdown-icon"], [1, "version-dropdown", 3, "click"], [1, "version-option", 3, "selected"], [1, "version-option", 3, "click"], [1, "version-number"], [1, "version-date"], [1, "fas", "fa-check"], [1, "save-to-collection-btn", 3, "click", "title"], ["title", "Share", 1, "share-btn", 3, "click"], [1, "fas", "fa-share-nodes"], [1, "fas", "fa-spinner", "fa-spin"], [1, "fas", "fa-exclamation-triangle"], [1, "tab-navigation"], [1, "tab-btn", 3, "active"], [1, "tab-content"], [1, "plugin-container", 3, "display"], [1, "display-content"], [1, "details-content"], [1, "artifact-meta"], [1, "meta-item"], [1, "meta-item", "full-width"], [1, "attributes-section"], [1, "links-container"], [1, "links-section"], [1, "empty-state"], [1, "tab-btn", 3, "click"], [3, "class"], [1, "plugin-container"], [3, "artifactVersion", "artifactTypeName", "contentType", "readonly"], [1, "display-toolbar"], ["title", "Print", 1, "btn-icon", 3, "click"], [1, "fas", "fa-print"], ["title", "Copy Content", 1, "btn-icon", 3, "click"], [1, "fas", "fa-copy"], [1, "markdown-content"], [1, "html-content", 3, "innerHTML"], [3, "data"], [1, "attributes-list"], [1, "attribute-item"], [1, "attribute-empty-pill"], [1, "link-item"], [1, "link-icon"], [1, "fas", "fa-comments"], [1, "fas", "fa-folder"], [1, "link-content"], [1, "link-name"], [1, "link-type"], [1, "link-actions"], [1, "link-action-btn", 3, "click", "disabled", "title"], [1, "fas", "fa-arrow-right"], [1, "fas", "fa-link"], [1, "dynamic-tab-content"], [1, "markdown-viewer", 3, "innerHTML"], [1, "json-viewer"], [1, "code-viewer"], [1, "html-viewer", 3, "innerHTML"], [1, "plaintext-viewer"], [1, "json-toolbar"], ["title", "Copy JSON", 1, "btn-icon", 3, "click"], [1, "json-editor-container"], [2, "width", "100%", "height", "100%", 3, "value", "language", "readonly", "lineWrapping"], [1, "code-toolbar"], ["title", "Copy Code", 1, "btn-icon", 3, "click"], [1, "code-editor-container"]], template: function ArtifactViewerPanelComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { artifactId: "artifactId", currentUser: "currentUser", environmentId: "environmentId", versionNumber: "versionNumber", showSaveToCollection: "showSaveToCollection", refreshTrigger: "refreshTrigger", viewContext: "viewContext", contextCollectionId: "contextCollectionId", canShare: "canShare", canEdit: "canEdit" }, outputs: { closed: "closed", saveToCollectionRequested: "saveToCollectionRequested", navigateToLink: "navigateToLink", shareRequested: "shareRequested" }, features: [i0.ɵɵNgOnChangesFeature], decls: 22, vars: 12, consts: [[1, "artifact-viewer-panel"], [1, "panel-header"], [1, "panel-header-left"], [1, "fas", "fa-cube"], [1, "header-description"], [1, "panel-header-right"], [1, "version-selector", 3, "click"], [1, "fas", "fa-history"], [1, "version-label"], [1, "fas", "fa-chevron-down", "dropdown-icon", 3, "open"], [1, "version-dropdown"], [1, "save-to-collection-btn", 3, "in-collection", "title"], ["title", "Share", 1, "share-btn"], ["title", "Close", 1, "close-btn", 3, "click"], [1, "fas", "fa-times"], [1, "panel-content"], [1, "loading-state"], [1, "error-state"], [1, "artifact-content-wrapper"], [1, "fas", "fa-chevron-down", "dropdown-icon"], [1, "version-dropdown", 3, "click"], [1, "version-option", 3, "selected"], [1, "version-option", 3, "click"], [1, "version-number"], [1, "version-date"], [1, "fas", "fa-check"], [1, "save-to-collection-btn", 3, "click", "title"], ["title", "Share", 1, "share-btn", 3, "click"], [1, "fas", "fa-share-nodes"], [1, "fas", "fa-spinner", "fa-spin"], [1, "fas", "fa-exclamation-triangle"], [1, "tab-navigation"], [1, "tab-btn", 3, "active"], [1, "tab-content"], [1, "plugin-container", 3, "display"], [1, "display-content"], [1, "details-content"], [1, "artifact-meta"], [1, "meta-item"], [1, "meta-item", "full-width"], [1, "attributes-section"], [1, "links-container"], [1, "links-section"], [1, "empty-state"], [1, "tab-btn", 3, "click"], [3, "class"], [1, "plugin-container"], [3, "artifactVersion", "artifactTypeName", "contentType", "readonly"], [1, "display-toolbar"], ["title", "Print", 1, "btn-icon", 3, "click"], [1, "fas", "fa-print"], ["title", "Copy Content", 1, "btn-icon", 3, "click"], [1, "fas", "fa-copy"], [1, "markdown-content"], [1, "html-content", 3, "innerHTML"], [3, "data"], [1, "attributes-list"], [1, "attribute-item"], [1, "attribute-empty-pill"], [1, "link-item", 3, "disabled", "clickable", "title"], [1, "link-item", 3, "click", "title"], [1, "link-icon"], [1, "fas", "fa-comments"], [1, "fas", "fa-folder"], [1, "link-content"], [1, "link-name"], [1, "link-type"], [1, "link-actions"], [1, "fas", "fa-arrow-right"], [1, "fas", "fa-link"], [1, "dynamic-tab-content"], [1, "markdown-viewer", 3, "innerHTML"], [1, "json-viewer"], [1, "code-viewer"], [1, "html-viewer", 3, "innerHTML"], [1, "plaintext-viewer"], [1, "json-toolbar"], ["title", "Copy JSON", 1, "btn-icon", 3, "click"], [1, "json-editor-container"], [2, "width", "100%", "height", "100%", 3, "value", "language", "readonly", "lineWrapping"], [1, "code-toolbar"], ["title", "Copy Code", 1, "btn-icon", 3, "click"], [1, "code-editor-container"]], template: function ArtifactViewerPanelComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "h3");
             i0.ɵɵelement(4, "i", 3);
             i0.ɵɵtext(5);
@@ -1203,7 +1289,7 @@ export class ArtifactViewerPanelComponent {
             i0.ɵɵtemplate(6, ArtifactViewerPanelComponent_Conditional_6_Template, 2, 1, "p", 4);
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(7, "div", 5)(8, "div", 6);
-            i0.ɵɵlistener("click", function ArtifactViewerPanelComponent_Template_div_click_8_listener() { return ctx.toggleVersionDropdown(); });
+            i0.ɵɵlistener("click", function ArtifactViewerPanelComponent_Template_div_click_8_listener() { return ctx.viewContext !== "collection" && ctx.toggleVersionDropdown(); });
             i0.ɵɵelement(9, "i", 7);
             i0.ɵɵelementStart(10, "span", 8);
             i0.ɵɵtext(11);
@@ -1224,11 +1310,11 @@ export class ArtifactViewerPanelComponent {
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.displayDescription ? 6 : -1);
             i0.ɵɵadvance(2);
-            i0.ɵɵclassProp("clickable", ctx.allVersions.length > 1);
+            i0.ɵɵclassProp("clickable", ctx.allVersions.length > 1 && ctx.viewContext !== "collection");
             i0.ɵɵadvance(3);
             i0.ɵɵtextInterpolate1("v", ctx.selectedVersionNumber, "");
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.allVersions.length > 1 ? 12 : -1);
+            i0.ɵɵconditional(ctx.allVersions.length > 1 && ctx.viewContext !== "collection" ? 12 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.showVersionDropdown ? 13 : -1);
             i0.ɵɵadvance();
@@ -1241,11 +1327,11 @@ export class ArtifactViewerPanelComponent {
             i0.ɵɵconditional(ctx.error ? 20 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(!ctx.isLoading && !ctx.error && ctx.artifact ? 21 : -1);
-        } }, dependencies: [i3.MarkdownComponent, i4.CodeEditorComponent, i5.ArtifactTypePluginViewerComponent, i6.DatePipe], styles: [".artifact-viewer-panel[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  background: white;\n  border-left: 1px solid #E5E7EB;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  box-sizing: border-box;\n}\n\n.panel-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding: 12px 16px;\n  border-bottom: 1px solid #E5E7EB;\n  background: white;\n  flex-shrink: 0;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.panel-header-left[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n  margin-right: 16px;\n}\n\n.panel-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n  font-weight: 600;\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  word-wrap: break-word;\n  overflow-wrap: break-word;\n}\n\n.panel-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #6366F1;\n  flex-shrink: 0;\n  margin-top: 2px;\n}\n\n.header-description[_ngcontent-%COMP%] {\n  margin: 4px 0 0 0;\n  font-size: 12px;\n  color: #6B7280;\n  font-weight: normal;\n  word-wrap: break-word;\n  overflow-wrap: break-word;\n}\n\n.panel-header-right[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex-shrink: 0;\n}\n\n.version-selector[_ngcontent-%COMP%] {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  background: #F3F4F6;\n  border-radius: 12px;\n  font-size: 12px;\n  color: #6B7280;\n  font-weight: 500;\n  transition: all 0.2s;\n}\n\n.version-selector.clickable[_ngcontent-%COMP%] {\n  cursor: pointer;\n}\n\n.version-selector.clickable[_ngcontent-%COMP%]:hover {\n  background: #E5E7EB;\n}\n\n.version-selector[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n}\n\n.version-selector[_ngcontent-%COMP%]   .dropdown-icon[_ngcontent-%COMP%] {\n  margin-left: 2px;\n  transition: transform 0.2s;\n}\n\n.version-selector[_ngcontent-%COMP%]   .dropdown-icon.open[_ngcontent-%COMP%] {\n  transform: rotate(180deg);\n}\n\n.version-label[_ngcontent-%COMP%] {\n  font-family: monospace;\n}\n\n.version-dropdown[_ngcontent-%COMP%] {\n  position: absolute;\n  top: calc(100% + 4px);\n  right: 0;\n  min-width: 200px;\n  background: white;\n  border: 1px solid #E5E7EB;\n  border-radius: 8px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n  z-index: 1000;\n  overflow: hidden;\n}\n\n.version-option[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 12px;\n  cursor: pointer;\n  transition: background 0.15s;\n  font-size: 13px;\n}\n\n.version-option[_ngcontent-%COMP%]:hover {\n  background: #F9FAFB;\n}\n\n.version-option.selected[_ngcontent-%COMP%] {\n  background: #EEF2FF;\n  color: #4F46E5;\n}\n\n.version-option[_ngcontent-%COMP%]   .version-number[_ngcontent-%COMP%] {\n  font-family: monospace;\n  font-weight: 600;\n  min-width: 35px;\n}\n\n.version-option[_ngcontent-%COMP%]   .version-date[_ngcontent-%COMP%] {\n  flex: 1;\n  color: #6B7280;\n  font-size: 12px;\n}\n\n.version-option[_ngcontent-%COMP%]   i.fa-check[_ngcontent-%COMP%] {\n  color: #10B981;\n  margin-left: auto;\n}\n\n.save-to-collection-btn[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: #9CA3AF;\n  padding: 6px;\n  border-radius: 4px;\n  transition: all 0.2s;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n}\n\n.save-to-collection-btn[_ngcontent-%COMP%]:hover {\n  background: #F3F4F6;\n  color: #6B7280;\n}\n\n.save-to-collection-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n.save-to-collection-btn.in-collection[_ngcontent-%COMP%] {\n  color: #6366F1; \n\n}\n\n.save-to-collection-btn.in-collection[_ngcontent-%COMP%]:hover {\n  background: #EEF2FF;\n  color: #4F46E5;\n}\n\n.share-btn[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: #9CA3AF;\n  padding: 6px;\n  border-radius: 4px;\n  transition: all 0.2s;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n}\n\n.share-btn[_ngcontent-%COMP%]:hover {\n  background: #F3F4F6;\n  color: #6366F1;\n}\n\n.share-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n.close-btn[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: #6B7280;\n  padding: 6px;\n  border-radius: 4px;\n  transition: all 0.2s;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n}\n\n.close-btn[_ngcontent-%COMP%]:hover {\n  background: #F3F4F6;\n  color: #111827;\n}\n\n.close-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n.panel-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: hidden;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.artifact-content-wrapper[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  min-height: 0;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.loading-state[_ngcontent-%COMP%], \n.error-state[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  padding: 40px 20px;\n  color: #6B7280;\n}\n\n.error-state[_ngcontent-%COMP%] {\n  color: #DC2626;\n}\n\n.loading-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 24px;\n}\n\n.artifact-meta[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n  gap: 16px;\n  margin-bottom: 16px;\n  padding: 16px;\n  background: #F9FAFB;\n  border-radius: 8px;\n  flex-shrink: 0;\n}\n\n.meta-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.meta-item[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  font-size: 12px;\n  font-weight: 500;\n  color: #6B7280;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.meta-item[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: #111827;\n}\n\n.artifact-description[_ngcontent-%COMP%] {\n  padding: 12px;\n  margin-bottom: 16px;\n  background: #EFF6FF;\n  border-left: 3px solid #3B82F6;\n  border-radius: 4px;\n  color: #1E40AF;\n  font-size: 14px;\n  flex-shrink: 0;\n}\n\n.json-viewer[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  border: 1px solid #E5E7EB;\n  border-radius: 8px;\n  overflow: hidden;\n  min-height: 0;\n}\n\n.json-editor-container[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: hidden;\n  min-height: 0;\n}\n\n.json-toolbar[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n  padding: 8px 12px;\n  background: #F9FAFB;\n  border-bottom: 1px solid #E5E7EB;\n  flex-shrink: 0;\n}\n\n.btn-icon[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: white;\n  border: 1px solid #D1D5DB;\n  border-radius: 4px;\n  padding: 6px 12px;\n  cursor: pointer;\n  color: #374151;\n  font-size: 14px;\n  transition: all 0.2s;\n}\n\n.btn-icon[_ngcontent-%COMP%]:hover {\n  background: #F3F4F6;\n  border-color: #9CA3AF;\n}\n\n.btn-icon.btn-primary[_ngcontent-%COMP%] {\n  background: #4F46E5;\n  border-color: #4F46E5;\n  color: white;\n}\n\n.btn-icon.btn-primary[_ngcontent-%COMP%]:hover {\n  background: #4338CA;\n  border-color: #4338CA;\n}\n\n.btn-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n\n\n.modal-overlay[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 10000;\n}\n\n.modal-content[_ngcontent-%COMP%] {\n  background: white;\n  border-radius: 12px;\n  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);\n  max-width: 500px;\n  width: 90%;\n  max-height: 90vh;\n  display: flex;\n  flex-direction: column;\n}\n\n.modal-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px 20px;\n  border-bottom: 1px solid #E5E7EB;\n}\n\n.modal-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.modal-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #F59E0B;\n}\n\n.modal-body[_ngcontent-%COMP%] {\n  padding: 20px;\n  overflow-y: auto;\n}\n\n.modal-footer[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: flex-end;\n  gap: 12px;\n  padding: 16px 20px;\n  border-top: 1px solid #E5E7EB;\n}\n\n.form-section[_ngcontent-%COMP%] {\n  margin-bottom: 20px;\n}\n\n.form-section[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  display: block;\n  margin-bottom: 8px;\n  font-size: 14px;\n  font-weight: 500;\n  color: #374151;\n}\n\n.form-select[_ngcontent-%COMP%], \n.form-input[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 10px 12px;\n  border: 1px solid #D1D5DB;\n  border-radius: 6px;\n  font-size: 14px;\n  color: #111827;\n  background: white;\n  transition: border-color 0.2s;\n}\n\n.form-select[_ngcontent-%COMP%]:focus, \n.form-input[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: #4F46E5;\n  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);\n}\n\n.divider[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  margin: 24px 0;\n  color: #9CA3AF;\n  font-size: 12px;\n  font-weight: 500;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.divider[_ngcontent-%COMP%]::before, \n.divider[_ngcontent-%COMP%]::after {\n  content: '';\n  flex: 1;\n  height: 1px;\n  background: #E5E7EB;\n}\n\n.divider[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  padding: 0 12px;\n}\n\n.create-collection-row[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n}\n\n.create-collection-row[_ngcontent-%COMP%]   .form-input[_ngcontent-%COMP%] {\n  flex: 1;\n}\n\n.btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 16px;\n  border: none;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.2s;\n  white-space: nowrap;\n}\n\n.btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.btn-primary[_ngcontent-%COMP%] {\n  background: #4F46E5;\n  color: white;\n}\n\n.btn-primary[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: #4338CA;\n}\n\n.btn-secondary[_ngcontent-%COMP%] {\n  background: white;\n  border: 1px solid #D1D5DB;\n  color: #374151;\n}\n\n.btn-secondary[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: #F3F4F6;\n}\n\n\n\n.tab-navigation[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 0;\n  border-bottom: 2px solid #E5E7EB;\n  padding: 0 16px;\n  background: white;\n}\n\n.tab-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 12px 20px;\n  background: transparent;\n  border: none;\n  border-bottom: 2px solid transparent;\n  margin-bottom: -2px;\n  color: #6B7280;\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 150ms ease;\n}\n\n.tab-btn[_ngcontent-%COMP%]:hover {\n  color: #1e40af;\n  background: #F9FAFB;\n}\n\n.tab-btn.active[_ngcontent-%COMP%] {\n  color: #1e40af;\n  border-bottom-color: #1e40af;\n}\n\n.tab-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n\n\n.tab-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: auto;\n  width: 100%;\n  box-sizing: border-box;\n  margin-bottom: 5px;\n  min-width: 0;\n}\n\n.display-content[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n  overflow: hidden;\n  min-height: 0;\n  min-width: 0;\n  padding: 7px;\n}\n\n.display-toolbar[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 12px;\n  right: 12px;\n  display: flex;\n  gap: 8px;\n  z-index: 10;\n}\n\n.markdown-content[_ngcontent-%COMP%], \n.html-content[_ngcontent-%COMP%] {\n  flex: 1;\n  font-size: 14px;\n  line-height: 1.6;\n  width: 100%;\n  padding: 20px 10px 5px 20px; \n\n  box-sizing: border-box;\n  overflow: auto;\n  min-height: 0;\n}\n\n.details-content[_ngcontent-%COMP%] {\n  padding: 20px;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.details-content[_ngcontent-%COMP%]   .artifact-meta[_ngcontent-%COMP%] {\n  margin-bottom: 0;\n  padding: 20px;\n}\n\n.details-content[_ngcontent-%COMP%]   .meta-item.full-width[_ngcontent-%COMP%] {\n  grid-column: 1 / -1;\n}\n\n.attributes-section[_ngcontent-%COMP%] {\n  margin-top: 24px;\n  padding: 24px;\n  background: #F9FAFB;\n  border-radius: 8px;\n}\n\n.attributes-section[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n  margin: 0 0 16px 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: #111827;\n}\n\n.attributes-list[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n  gap: 16px;\n}\n\n.attribute-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 12px;\n  background: white;\n  border-radius: 6px;\n  border: 1px solid #E5E7EB;\n}\n\n.attribute-item[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 600;\n  color: #6B7280;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.attribute-item[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: #111827;\n  word-break: break-word;\n}\n\n.attribute-empty-pill[_ngcontent-%COMP%] {\n  display: inline-block;\n  padding: 2px 8px;\n  background: #F3F4F6;\n  color: #9CA3AF;\n  font-size: 11px;\n  font-weight: 500;\n  border-radius: 4px;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n\n\n.links-container[_ngcontent-%COMP%] {\n  padding: 20px;\n}\n\n.links-section[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.link-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px;\n  background: #F9FAFB;\n  border: 1px solid #E5E7EB;\n  border-radius: 8px;\n  transition: all 0.15s;\n}\n\n.link-item[_ngcontent-%COMP%]:hover {\n  border-color: #1e40af;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.05);\n}\n\n.link-icon[_ngcontent-%COMP%] {\n  width: 40px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: white;\n  border-radius: 8px;\n  flex-shrink: 0;\n}\n\n.link-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 18px;\n  color: #1e40af;\n}\n\n.link-content[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.link-name[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 500;\n  color: #111827;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.link-type[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: #6B7280;\n  margin-top: 2px;\n}\n\n.link-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n}\n\n.link-action-btn[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: white;\n  border: 1px solid #D1D5DB;\n  border-radius: 6px;\n  color: #1e40af;\n  cursor: pointer;\n  transition: all 0.15s;\n}\n\n.link-action-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: #EFF6FF;\n  border-color: #1e40af;\n}\n\n.link-action-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  color: #9CA3AF;\n}\n\n.links-container[_ngcontent-%COMP%]   .empty-state[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 48px 24px;\n  color: #9CA3AF;\n  text-align: center;\n}\n\n.links-container[_ngcontent-%COMP%]   .empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 48px;\n  margin-bottom: 16px;\n  opacity: 0.3;\n}\n\n.links-container[_ngcontent-%COMP%]   .empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n}\n\n\n\n.dynamic-tab-content[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  padding: 16px;\n}\n\n.markdown-viewer[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: auto;\n  padding: 20px;\n  background: white;\n  line-height: 1.6;\n}\n\n.markdown-viewer[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%], .markdown-viewer[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%], .markdown-viewer[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin-top: 24px;\n  margin-bottom: 12px;\n  font-weight: 600;\n}\n\n.markdown-viewer[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] { font-size: 24px; }\n.markdown-viewer[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] { font-size: 20px; }\n.markdown-viewer[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] { font-size: 18px; }\n\n.markdown-viewer[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin-bottom: 12px;\n}\n\n.markdown-viewer[_ngcontent-%COMP%]   ul[_ngcontent-%COMP%], .markdown-viewer[_ngcontent-%COMP%]   ol[_ngcontent-%COMP%] {\n  margin-bottom: 12px;\n  padding-left: 24px;\n}\n\n.markdown-viewer[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n  background: #f3f4f6;\n  padding: 2px 6px;\n  border-radius: 3px;\n  font-family: 'Courier New', monospace;\n  font-size: 13px;\n}\n\n.markdown-viewer[_ngcontent-%COMP%]   pre[_ngcontent-%COMP%] {\n  background: #f3f4f6;\n  padding: 12px;\n  border-radius: 6px;\n  overflow-x: auto;\n  margin-bottom: 12px;\n}\n\n.markdown-viewer[_ngcontent-%COMP%]   pre[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n  background: none;\n  padding: 0;\n}\n\n.code-viewer[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  border: 1px solid #E5E7EB;\n  border-radius: 8px;\n  overflow: hidden;\n  min-height: 0;\n}\n\n.code-toolbar[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n  padding: 8px 12px;\n  background: #F9FAFB;\n  border-bottom: 1px solid #E5E7EB;\n  flex-shrink: 0;\n}\n\n.code-editor-container[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: hidden;\n  min-height: 0;\n}\n\n.plaintext-viewer[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: auto;\n  padding: 12px;\n  background: #f9fafb;\n  font-family: 'Courier New', monospace;\n  font-size: 13px;\n  white-space: pre-wrap;\n}\n\n.html-viewer[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: auto;\n  padding: 20px;\n  background: white;\n}"] });
+        } }, dependencies: [i3.MarkdownComponent, i4.CodeEditorComponent, i5.ArtifactTypePluginViewerComponent, i6.DatePipe], styles: [".artifact-viewer-panel[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  background: white;\n  border-left: 1px solid #E5E7EB;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  box-sizing: border-box;\n}\n\n.panel-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding: 12px 16px;\n  border-bottom: 1px solid #E5E7EB;\n  background: white;\n  flex-shrink: 0;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.panel-header-left[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n  margin-right: 16px;\n}\n\n.panel-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n  font-weight: 600;\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  word-wrap: break-word;\n  overflow-wrap: break-word;\n}\n\n.panel-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #6366F1;\n  flex-shrink: 0;\n  margin-top: 2px;\n}\n\n.header-description[_ngcontent-%COMP%] {\n  margin: 4px 0 0 0;\n  font-size: 12px;\n  color: #6B7280;\n  font-weight: normal;\n  word-wrap: break-word;\n  overflow-wrap: break-word;\n}\n\n.panel-header-right[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex-shrink: 0;\n}\n\n.version-selector[_ngcontent-%COMP%] {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  background: #F3F4F6;\n  border-radius: 12px;\n  font-size: 12px;\n  color: #6B7280;\n  font-weight: 500;\n  transition: all 0.2s;\n}\n\n.version-selector.clickable[_ngcontent-%COMP%] {\n  cursor: pointer;\n}\n\n.version-selector.clickable[_ngcontent-%COMP%]:hover {\n  background: #E5E7EB;\n}\n\n.version-selector[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n}\n\n.version-selector[_ngcontent-%COMP%]   .dropdown-icon[_ngcontent-%COMP%] {\n  margin-left: 2px;\n  transition: transform 0.2s;\n}\n\n.version-selector[_ngcontent-%COMP%]   .dropdown-icon.open[_ngcontent-%COMP%] {\n  transform: rotate(180deg);\n}\n\n.version-label[_ngcontent-%COMP%] {\n  font-family: monospace;\n}\n\n.version-dropdown[_ngcontent-%COMP%] {\n  position: absolute;\n  top: calc(100% + 4px);\n  right: 0;\n  min-width: 200px;\n  background: white;\n  border: 1px solid #E5E7EB;\n  border-radius: 8px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n  z-index: 1000;\n  overflow: hidden;\n}\n\n.version-option[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 12px;\n  cursor: pointer;\n  transition: background 0.15s;\n  font-size: 13px;\n}\n\n.version-option[_ngcontent-%COMP%]:hover {\n  background: #F9FAFB;\n}\n\n.version-option.selected[_ngcontent-%COMP%] {\n  background: #EEF2FF;\n  color: #4F46E5;\n}\n\n.version-option[_ngcontent-%COMP%]   .version-number[_ngcontent-%COMP%] {\n  font-family: monospace;\n  font-weight: 600;\n  min-width: 35px;\n}\n\n.version-option[_ngcontent-%COMP%]   .version-date[_ngcontent-%COMP%] {\n  flex: 1;\n  color: #6B7280;\n  font-size: 12px;\n}\n\n.version-option[_ngcontent-%COMP%]   i.fa-check[_ngcontent-%COMP%] {\n  color: #10B981;\n  margin-left: auto;\n}\n\n.save-to-collection-btn[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: #9CA3AF;\n  padding: 6px;\n  border-radius: 4px;\n  transition: all 0.2s;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n}\n\n.save-to-collection-btn[_ngcontent-%COMP%]:hover {\n  background: #F3F4F6;\n  color: #6B7280;\n}\n\n.save-to-collection-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n.save-to-collection-btn.in-collection[_ngcontent-%COMP%] {\n  color: #6366F1; \n\n}\n\n.save-to-collection-btn.in-collection[_ngcontent-%COMP%]:hover {\n  background: #EEF2FF;\n  color: #4F46E5;\n}\n\n.share-btn[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: #9CA3AF;\n  padding: 6px;\n  border-radius: 4px;\n  transition: all 0.2s;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n}\n\n.share-btn[_ngcontent-%COMP%]:hover {\n  background: #F3F4F6;\n  color: #6366F1;\n}\n\n.share-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n.close-btn[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: #6B7280;\n  padding: 6px;\n  border-radius: 4px;\n  transition: all 0.2s;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n}\n\n.close-btn[_ngcontent-%COMP%]:hover {\n  background: #F3F4F6;\n  color: #111827;\n}\n\n.close-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n.panel-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: hidden;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.artifact-content-wrapper[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  min-height: 0;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.loading-state[_ngcontent-%COMP%], \n.error-state[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  padding: 40px 20px;\n  color: #6B7280;\n}\n\n.error-state[_ngcontent-%COMP%] {\n  color: #DC2626;\n}\n\n.loading-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 24px;\n}\n\n.artifact-meta[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n  gap: 16px;\n  margin-bottom: 16px;\n  padding: 16px;\n  background: #F9FAFB;\n  border-radius: 8px;\n  flex-shrink: 0;\n}\n\n.meta-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.meta-item[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  font-size: 12px;\n  font-weight: 500;\n  color: #6B7280;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.meta-item[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: #111827;\n}\n\n.artifact-description[_ngcontent-%COMP%] {\n  padding: 12px;\n  margin-bottom: 16px;\n  background: #EFF6FF;\n  border-left: 3px solid #3B82F6;\n  border-radius: 4px;\n  color: #1E40AF;\n  font-size: 14px;\n  flex-shrink: 0;\n}\n\n.json-viewer[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  border: 1px solid #E5E7EB;\n  border-radius: 8px;\n  overflow: hidden;\n  min-height: 0;\n}\n\n.json-editor-container[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: hidden;\n  min-height: 0;\n}\n\n.json-toolbar[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n  padding: 8px 12px;\n  background: #F9FAFB;\n  border-bottom: 1px solid #E5E7EB;\n  flex-shrink: 0;\n}\n\n.btn-icon[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: white;\n  border: 1px solid #D1D5DB;\n  border-radius: 4px;\n  padding: 6px 12px;\n  cursor: pointer;\n  color: #374151;\n  font-size: 14px;\n  transition: all 0.2s;\n}\n\n.btn-icon[_ngcontent-%COMP%]:hover {\n  background: #F3F4F6;\n  border-color: #9CA3AF;\n}\n\n.btn-icon.btn-primary[_ngcontent-%COMP%] {\n  background: #4F46E5;\n  border-color: #4F46E5;\n  color: white;\n}\n\n.btn-icon.btn-primary[_ngcontent-%COMP%]:hover {\n  background: #4338CA;\n  border-color: #4338CA;\n}\n\n.btn-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n\n\n.modal-overlay[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 10000;\n}\n\n.modal-content[_ngcontent-%COMP%] {\n  background: white;\n  border-radius: 12px;\n  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);\n  max-width: 500px;\n  width: 90%;\n  max-height: 90vh;\n  display: flex;\n  flex-direction: column;\n}\n\n.modal-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px 20px;\n  border-bottom: 1px solid #E5E7EB;\n}\n\n.modal-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.modal-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #F59E0B;\n}\n\n.modal-body[_ngcontent-%COMP%] {\n  padding: 20px;\n  overflow-y: auto;\n}\n\n.modal-footer[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: flex-end;\n  gap: 12px;\n  padding: 16px 20px;\n  border-top: 1px solid #E5E7EB;\n}\n\n.form-section[_ngcontent-%COMP%] {\n  margin-bottom: 20px;\n}\n\n.form-section[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  display: block;\n  margin-bottom: 8px;\n  font-size: 14px;\n  font-weight: 500;\n  color: #374151;\n}\n\n.form-select[_ngcontent-%COMP%], \n.form-input[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 10px 12px;\n  border: 1px solid #D1D5DB;\n  border-radius: 6px;\n  font-size: 14px;\n  color: #111827;\n  background: white;\n  transition: border-color 0.2s;\n}\n\n.form-select[_ngcontent-%COMP%]:focus, \n.form-input[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: #4F46E5;\n  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);\n}\n\n.divider[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  margin: 24px 0;\n  color: #9CA3AF;\n  font-size: 12px;\n  font-weight: 500;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.divider[_ngcontent-%COMP%]::before, \n.divider[_ngcontent-%COMP%]::after {\n  content: '';\n  flex: 1;\n  height: 1px;\n  background: #E5E7EB;\n}\n\n.divider[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  padding: 0 12px;\n}\n\n.create-collection-row[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n}\n\n.create-collection-row[_ngcontent-%COMP%]   .form-input[_ngcontent-%COMP%] {\n  flex: 1;\n}\n\n.btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 16px;\n  border: none;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.2s;\n  white-space: nowrap;\n}\n\n.btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.btn-primary[_ngcontent-%COMP%] {\n  background: #4F46E5;\n  color: white;\n}\n\n.btn-primary[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: #4338CA;\n}\n\n.btn-secondary[_ngcontent-%COMP%] {\n  background: white;\n  border: 1px solid #D1D5DB;\n  color: #374151;\n}\n\n.btn-secondary[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: #F3F4F6;\n}\n\n\n\n.tab-navigation[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 0;\n  border-bottom: 2px solid #E5E7EB;\n  padding: 0 16px;\n  background: white;\n}\n\n.tab-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 12px 20px;\n  background: transparent;\n  border: none;\n  border-bottom: 2px solid transparent;\n  margin-bottom: -2px;\n  color: #6B7280;\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 150ms ease;\n}\n\n.tab-btn[_ngcontent-%COMP%]:hover {\n  color: #1e40af;\n  background: #F9FAFB;\n}\n\n.tab-btn.active[_ngcontent-%COMP%] {\n  color: #1e40af;\n  border-bottom-color: #1e40af;\n}\n\n.tab-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n\n\n.tab-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: auto;\n  width: 100%;\n  box-sizing: border-box;\n  margin-bottom: 5px;\n  min-width: 0;\n}\n\n.display-content[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n  overflow: hidden;\n  min-height: 0;\n  min-width: 0;\n  padding: 7px;\n}\n\n.display-toolbar[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 12px;\n  right: 12px;\n  display: flex;\n  gap: 8px;\n  z-index: 10;\n}\n\n.markdown-content[_ngcontent-%COMP%], \n.html-content[_ngcontent-%COMP%] {\n  flex: 1;\n  font-size: 14px;\n  line-height: 1.6;\n  width: 100%;\n  padding: 20px 10px 5px 20px; \n\n  box-sizing: border-box;\n  overflow: auto;\n  min-height: 0;\n}\n\n.details-content[_ngcontent-%COMP%] {\n  padding: 20px;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.details-content[_ngcontent-%COMP%]   .artifact-meta[_ngcontent-%COMP%] {\n  margin-bottom: 0;\n  padding: 20px;\n}\n\n.details-content[_ngcontent-%COMP%]   .meta-item.full-width[_ngcontent-%COMP%] {\n  grid-column: 1 / -1;\n}\n\n.attributes-section[_ngcontent-%COMP%] {\n  margin-top: 24px;\n  padding: 24px;\n  background: #F9FAFB;\n  border-radius: 8px;\n}\n\n.attributes-section[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n  margin: 0 0 16px 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: #111827;\n}\n\n.attributes-list[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n  gap: 16px;\n}\n\n.attribute-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 12px;\n  background: white;\n  border-radius: 6px;\n  border: 1px solid #E5E7EB;\n}\n\n.attribute-item[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 600;\n  color: #6B7280;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.attribute-item[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: #111827;\n  word-break: break-word;\n}\n\n.attribute-empty-pill[_ngcontent-%COMP%] {\n  display: inline-block;\n  padding: 2px 8px;\n  background: #F3F4F6;\n  color: #9CA3AF;\n  font-size: 11px;\n  font-weight: 500;\n  border-radius: 4px;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n\n\n.links-container[_ngcontent-%COMP%] {\n  padding: 20px;\n}\n\n.links-section[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.link-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px;\n  background: #F9FAFB;\n  border: 1px solid #E5E7EB;\n  border-radius: 8px;\n  transition: all 0.15s;\n}\n\n.link-item.clickable[_ngcontent-%COMP%] {\n  cursor: pointer;\n}\n\n.link-item.clickable[_ngcontent-%COMP%]:hover {\n  border-color: #1e40af;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.05);\n  background: #F3F4F6;\n}\n\n.link-item.disabled[_ngcontent-%COMP%] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.link-item[_ngcontent-%COMP%]:hover {\n  border-color: #1e40af;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.05);\n}\n\n.link-icon[_ngcontent-%COMP%] {\n  width: 40px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: white;\n  border-radius: 8px;\n  flex-shrink: 0;\n}\n\n.link-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 18px;\n  color: #1e40af;\n}\n\n.link-content[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.link-name[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 500;\n  color: #111827;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.link-type[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: #6B7280;\n  margin-top: 2px;\n}\n\n.link-actions[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  flex-shrink: 0;\n}\n\n.link-actions[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: #6B7280;\n  transition: all 0.15s;\n}\n\n.link-item.clickable[_ngcontent-%COMP%]:hover   .link-actions[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #1e40af;\n  transform: translateX(2px);\n}\n\n.links-container[_ngcontent-%COMP%]   .empty-state[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 48px 24px;\n  color: #9CA3AF;\n  text-align: center;\n}\n\n.links-container[_ngcontent-%COMP%]   .empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 48px;\n  margin-bottom: 16px;\n  opacity: 0.3;\n}\n\n.links-container[_ngcontent-%COMP%]   .empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n}\n\n\n\n.dynamic-tab-content[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  padding: 16px;\n}\n\n.markdown-viewer[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: auto;\n  padding: 20px;\n  background: white;\n  line-height: 1.6;\n}\n\n.markdown-viewer[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%], .markdown-viewer[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%], .markdown-viewer[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin-top: 24px;\n  margin-bottom: 12px;\n  font-weight: 600;\n}\n\n.markdown-viewer[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] { font-size: 24px; }\n.markdown-viewer[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] { font-size: 20px; }\n.markdown-viewer[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] { font-size: 18px; }\n\n.markdown-viewer[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin-bottom: 12px;\n}\n\n.markdown-viewer[_ngcontent-%COMP%]   ul[_ngcontent-%COMP%], .markdown-viewer[_ngcontent-%COMP%]   ol[_ngcontent-%COMP%] {\n  margin-bottom: 12px;\n  padding-left: 24px;\n}\n\n.markdown-viewer[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n  background: #f3f4f6;\n  padding: 2px 6px;\n  border-radius: 3px;\n  font-family: 'Courier New', monospace;\n  font-size: 13px;\n}\n\n.markdown-viewer[_ngcontent-%COMP%]   pre[_ngcontent-%COMP%] {\n  background: #f3f4f6;\n  padding: 12px;\n  border-radius: 6px;\n  overflow-x: auto;\n  margin-bottom: 12px;\n}\n\n.markdown-viewer[_ngcontent-%COMP%]   pre[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n  background: none;\n  padding: 0;\n}\n\n.code-viewer[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  border: 1px solid #E5E7EB;\n  border-radius: 8px;\n  overflow: hidden;\n  min-height: 0;\n}\n\n.code-toolbar[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n  padding: 8px 12px;\n  background: #F9FAFB;\n  border-bottom: 1px solid #E5E7EB;\n  flex-shrink: 0;\n}\n\n.code-editor-container[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: hidden;\n  min-height: 0;\n}\n\n.plaintext-viewer[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: auto;\n  padding: 12px;\n  background: #f9fafb;\n  font-family: 'Courier New', monospace;\n  font-size: 13px;\n  white-space: pre-wrap;\n}\n\n.html-viewer[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: auto;\n  padding: 20px;\n  background: white;\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ArtifactViewerPanelComponent, [{
         type: Component,
-        args: [{ selector: 'mj-artifact-viewer-panel', template: "<div class=\"artifact-viewer-panel\">\n  <div class=\"panel-header\">\n    <div class=\"panel-header-left\">\n      <h3>\n        <i class=\"fas fa-cube\"></i>\n        {{ displayName }}\n      </h3>\n      @if (displayDescription) {\n        <p class=\"header-description\">{{ displayDescription }}</p>\n      }\n    </div>\n    <div class=\"panel-header-right\">\n      <div class=\"version-selector\" [class.clickable]=\"allVersions.length > 1\" (click)=\"toggleVersionDropdown()\">\n        <i class=\"fas fa-history\"></i>\n        <span class=\"version-label\">v{{ selectedVersionNumber }}</span>\n        @if (allVersions.length > 1) {\n          <i class=\"fas fa-chevron-down dropdown-icon\" [class.open]=\"showVersionDropdown\"></i>\n        }\n        @if (showVersionDropdown) {\n          <div class=\"version-dropdown\" (click)=\"$event.stopPropagation()\">\n            @for (version of allVersions; track version.ID) {\n              <div class=\"version-option\"\n                   [class.selected]=\"version.VersionNumber === selectedVersionNumber\"\n                   (click)=\"selectVersion(version); $event.stopPropagation()\">\n                <span class=\"version-number\">v{{ version.VersionNumber }}</span>\n                <span class=\"version-date\">{{ version.__mj_CreatedAt | date:'short' }}</span>\n                @if (version.VersionNumber === selectedVersionNumber) {\n                  <i class=\"fas fa-check\"></i>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n      @if (showSaveToCollection) {\n        <button class=\"save-to-collection-btn\"\n                [class.in-collection]=\"isInCollection\"\n                (click)=\"onSaveToLibrary()\"\n                [title]=\"isInCollection ? 'Saved to ' + artifactCollections.length + ' collection(s)' : 'Save to Collection'\">\n          <i [class]=\"isInCollection ? 'fas fa-bookmark' : 'far fa-bookmark'\"></i>\n        </button>\n      }\n      @if (canShare) {\n        <button class=\"share-btn\"\n                (click)=\"onShare()\"\n                title=\"Share\">\n          <i class=\"fas fa-share-nodes\"></i>\n        </button>\n      }\n      <button class=\"close-btn\" (click)=\"onClose()\" title=\"Close\">\n        <i class=\"fas fa-times\"></i>\n      </button>\n    </div>\n  </div>\n\n  <div class=\"panel-content\">\n    @if (isLoading) {\n      <div class=\"loading-state\">\n        <i class=\"fas fa-spinner fa-spin\"></i>\n        <span>Loading artifact...</span>\n      </div>\n    }\n\n    @if (error) {\n      <div class=\"error-state\">\n        <i class=\"fas fa-exclamation-triangle\"></i>\n        <span>{{ error }}</span>\n      </div>\n    }\n\n    @if (!isLoading && !error && artifact) {\n      <div class=\"artifact-content-wrapper\">\n        <!-- Tab Navigation (Dynamic) -->\n        <div class=\"tab-navigation\">\n          @for (tab of allTabs; track tab) {\n            <button class=\"tab-btn\"\n                    [class.active]=\"activeTab === tab.toLowerCase()\"\n                    (click)=\"SetActiveTab(tab)\">\n              @if (GetTabIcon(tab)) {\n                <i [class]=\"GetTabIcon(tab)!\"></i>\n              }\n              {{ tab }}\n            </button>\n          }\n        </div>\n\n        <!-- Tab Content (Dynamic) -->\n        <div class=\"tab-content\">\n          <!-- Plugin Viewer - Created once, kept alive, shown/hidden with CSS -->\n          @if (hasPlugin && artifactVersion && artifactTypeName) {\n            <div class=\"plugin-container\" [style.display]=\"activeTab === 'display' ? 'block' : 'none'\">\n              <mj-artifact-type-plugin-viewer\n                [artifactVersion]=\"artifactVersion\"\n                [artifactTypeName]=\"artifactTypeName\"\n                [contentType]=\"contentType\"\n                [readonly]=\"true\">\n              </mj-artifact-type-plugin-viewer>\n            </div>\n          }\n\n          <!-- Display Tab - Fallback content when no plugin -->\n          @if (activeTab === 'display' && (!hasPlugin || !artifactVersion)) {\n            <div class=\"display-content\">\n              @if (displayMarkdown || displayHtml) {\n                <!-- Fallback to extracted markdown/HTML attributes -->\n                <div class=\"display-toolbar\">\n                  <button class=\"btn-icon\" title=\"Print\" (click)=\"onPrintDisplayContent()\">\n                    <i class=\"fas fa-print\"></i> Print\n                  </button>\n                  <button class=\"btn-icon\" title=\"Copy Content\" (click)=\"onCopyDisplayContent()\">\n                    <i class=\"fas fa-copy\"></i> Copy\n                  </button>\n                </div>\n                @if (displayMarkdown) {\n                  <div class=\"markdown-content\">\n                    <markdown [data]=\"displayMarkdown\"></markdown>\n                  </div>\n                } @else if (displayHtml) {\n                  <div class=\"html-content\" [innerHTML]=\"displayHtml\"></div>\n                }\n              }\n            </div>\n          }\n\n          <!-- Details Tab - Artifact metadata (always in DOM, hidden with CSS) -->\n          <div class=\"details-content\" [style.display]=\"activeTab === 'details' ? 'block' : 'none'\">\n              <div class=\"artifact-meta\">\n                <div class=\"meta-item\">\n                  <label>Type</label>\n                  <span>{{ artifact.Type }}</span>\n                </div>\n                <div class=\"meta-item\">\n                  <label>Version</label>\n                  <span>{{ artifactVersion?.VersionNumber || 1 }}</span>\n                </div>\n                <div class=\"meta-item\">\n                  <label>Created</label>\n                  <span>{{ artifact.__mj_CreatedAt | date:'short' }}</span>\n                </div>\n                <div class=\"meta-item\">\n                  <label>Updated</label>\n                  <span>{{ artifactVersion?.__mj_UpdatedAt | date:'short' }}</span>\n                </div>\n                @if (artifact.Description) {\n                  <div class=\"meta-item full-width\">\n                    <label>Artifact Description</label>\n                    <span>{{ artifact.Description }}</span>\n                  </div>\n                }\n                @if (artifactVersion?.Description && artifact.Description && artifactVersion?.Description !== artifact.Description) {\n                  <div class=\"meta-item full-width\">\n                    <label>Version Description</label>\n                    <span>{{ artifactVersion?.Description }}</span>\n                  </div>\n                }\n              </div>\n\n              <!-- Version Attributes -->\n              @if (filteredAttributes.length > 0) {\n                <div class=\"attributes-section\">\n                  <h4>Version Attributes</h4>\n                  <div class=\"attributes-list\">\n                    @for (attr of filteredAttributes; track attr.ID) {\n                      <div class=\"attribute-item\">\n                        <label>{{ attr.Name }}</label>\n                        @if (attr.Value) {\n                          <span>{{ attr.Value }}</span>\n                        } @else {\n                          <span class=\"attribute-empty-pill\">Empty</span>\n                        }\n                      </div>\n                    }\n                  </div>\n                </div>\n              }\n            </div>\n\n          <!-- Links Tab - Conversations and Collections (always in DOM, hidden with CSS) -->\n          <div class=\"links-container\" [style.display]=\"activeTab === 'links' ? 'block' : 'none'\">\n            @if (linksToShow.length > 0) {\n              <div class=\"links-section\">\n                @for (link of linksToShow; track link.id) {\n                  <div class=\"link-item\">\n                    <div class=\"link-icon\">\n                      @if (link.type === 'conversation') {\n                        <i class=\"fas fa-comments\"></i>\n                      } @else {\n                        <i class=\"fas fa-folder\"></i>\n                      }\n                    </div>\n                    <div class=\"link-content\">\n                      <div class=\"link-name\">{{ link.name }}</div>\n                      <div class=\"link-type\">{{ link.type === 'conversation' ? 'Conversation' : 'Collection' }}</div>\n                    </div>\n                    <div class=\"link-actions\">\n                      <button\n                        class=\"link-action-btn\"\n                        [disabled]=\"!link.hasAccess\"\n                        [title]=\"link.hasAccess ? 'Open' : 'No access'\"\n                        (click)=\"onNavigateToLink(link)\">\n                        <i class=\"fas fa-arrow-right\"></i>\n                      </button>\n                    </div>\n                  </div>\n                }\n              </div>\n            } @else {\n              <div class=\"empty-state\">\n                <i class=\"fas fa-link\"></i>\n                <p>No links available</p>\n              </div>\n            }\n          </div>\n\n          <!-- Dynamic Plugin Tabs and Base Tabs (JSON, etc.) -->\n          @if (activeTab !== 'display' && activeTab !== 'details' && activeTab !== 'links') {\n            @if (GetTabContent(activeTab); as tabData) {\n              <div class=\"dynamic-tab-content\">\n                @switch (tabData.type) {\n                  @case ('markdown') {\n                    <div class=\"markdown-viewer\" [innerHTML]=\"RenderMarkdown(tabData.content)\"></div>\n                  }\n                  @case ('json') {\n                    <div class=\"json-viewer\">\n                      <div class=\"json-toolbar\">\n                        <button class=\"btn-icon\" title=\"Copy JSON\" (click)=\"onCopyToClipboard()\">\n                          <i class=\"fas fa-copy\"></i> Copy\n                        </button>\n                      </div>\n                      <div class=\"json-editor-container\">\n                        <mj-code-editor\n                          [value]=\"tabData.content\"\n                          [language]=\"'json'\"\n                          [readonly]=\"true\"\n                          [lineWrapping]=\"true\"\n                          style=\"width: 100%; height: 100%;\">\n                        </mj-code-editor>\n                      </div>\n                    </div>\n                  }\n                  @case ('code') {\n                    <div class=\"code-viewer\">\n                      <div class=\"code-toolbar\">\n                        <button class=\"btn-icon\" title=\"Copy Code\" (click)=\"onCopyToClipboard()\">\n                          <i class=\"fas fa-copy\"></i> Copy\n                        </button>\n                      </div>\n                      <div class=\"code-editor-container\">\n                        <mj-code-editor\n                          [value]=\"tabData.content\"\n                          [language]=\"tabData.language || 'typescript'\"\n                          [readonly]=\"true\"\n                          [lineWrapping]=\"true\"\n                          style=\"width: 100%; height: 100%;\">\n                        </mj-code-editor>\n                      </div>\n                    </div>\n                  }\n                  @case ('html') {\n                    <div class=\"html-viewer\" [innerHTML]=\"tabData.content\"></div>\n                  }\n                  @case ('plaintext') {\n                    <pre class=\"plaintext-viewer\">{{ tabData.content }}</pre>\n                  }\n                }\n              </div>\n            }\n          }\n        </div>\n      </div>\n    }\n  </div>\n</div>\n\n", styles: [".artifact-viewer-panel {\n  width: 100%;\n  height: 100%;\n  background: white;\n  border-left: 1px solid #E5E7EB;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  box-sizing: border-box;\n}\n\n.panel-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding: 12px 16px;\n  border-bottom: 1px solid #E5E7EB;\n  background: white;\n  flex-shrink: 0;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.panel-header-left {\n  flex: 1;\n  min-width: 0;\n  margin-right: 16px;\n}\n\n.panel-header h3 {\n  margin: 0;\n  font-size: 14px;\n  font-weight: 600;\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  word-wrap: break-word;\n  overflow-wrap: break-word;\n}\n\n.panel-header h3 i {\n  color: #6366F1;\n  flex-shrink: 0;\n  margin-top: 2px;\n}\n\n.header-description {\n  margin: 4px 0 0 0;\n  font-size: 12px;\n  color: #6B7280;\n  font-weight: normal;\n  word-wrap: break-word;\n  overflow-wrap: break-word;\n}\n\n.panel-header-right {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex-shrink: 0;\n}\n\n.version-selector {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  background: #F3F4F6;\n  border-radius: 12px;\n  font-size: 12px;\n  color: #6B7280;\n  font-weight: 500;\n  transition: all 0.2s;\n}\n\n.version-selector.clickable {\n  cursor: pointer;\n}\n\n.version-selector.clickable:hover {\n  background: #E5E7EB;\n}\n\n.version-selector i {\n  font-size: 11px;\n}\n\n.version-selector .dropdown-icon {\n  margin-left: 2px;\n  transition: transform 0.2s;\n}\n\n.version-selector .dropdown-icon.open {\n  transform: rotate(180deg);\n}\n\n.version-label {\n  font-family: monospace;\n}\n\n.version-dropdown {\n  position: absolute;\n  top: calc(100% + 4px);\n  right: 0;\n  min-width: 200px;\n  background: white;\n  border: 1px solid #E5E7EB;\n  border-radius: 8px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n  z-index: 1000;\n  overflow: hidden;\n}\n\n.version-option {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 12px;\n  cursor: pointer;\n  transition: background 0.15s;\n  font-size: 13px;\n}\n\n.version-option:hover {\n  background: #F9FAFB;\n}\n\n.version-option.selected {\n  background: #EEF2FF;\n  color: #4F46E5;\n}\n\n.version-option .version-number {\n  font-family: monospace;\n  font-weight: 600;\n  min-width: 35px;\n}\n\n.version-option .version-date {\n  flex: 1;\n  color: #6B7280;\n  font-size: 12px;\n}\n\n.version-option i.fa-check {\n  color: #10B981;\n  margin-left: auto;\n}\n\n.save-to-collection-btn {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: #9CA3AF;\n  padding: 6px;\n  border-radius: 4px;\n  transition: all 0.2s;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n}\n\n.save-to-collection-btn:hover {\n  background: #F3F4F6;\n  color: #6B7280;\n}\n\n.save-to-collection-btn i {\n  font-size: 14px;\n}\n\n.save-to-collection-btn.in-collection {\n  color: #6366F1; /* Indigo color to indicate it's saved */\n}\n\n.save-to-collection-btn.in-collection:hover {\n  background: #EEF2FF;\n  color: #4F46E5;\n}\n\n.share-btn {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: #9CA3AF;\n  padding: 6px;\n  border-radius: 4px;\n  transition: all 0.2s;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n}\n\n.share-btn:hover {\n  background: #F3F4F6;\n  color: #6366F1;\n}\n\n.share-btn i {\n  font-size: 14px;\n}\n\n.close-btn {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: #6B7280;\n  padding: 6px;\n  border-radius: 4px;\n  transition: all 0.2s;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n}\n\n.close-btn:hover {\n  background: #F3F4F6;\n  color: #111827;\n}\n\n.close-btn i {\n  font-size: 14px;\n}\n\n.panel-content {\n  flex: 1;\n  overflow: hidden;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.artifact-content-wrapper {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  min-height: 0;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.loading-state,\n.error-state {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  padding: 40px 20px;\n  color: #6B7280;\n}\n\n.error-state {\n  color: #DC2626;\n}\n\n.loading-state i {\n  font-size: 24px;\n}\n\n.artifact-meta {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n  gap: 16px;\n  margin-bottom: 16px;\n  padding: 16px;\n  background: #F9FAFB;\n  border-radius: 8px;\n  flex-shrink: 0;\n}\n\n.meta-item {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.meta-item label {\n  font-size: 12px;\n  font-weight: 500;\n  color: #6B7280;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.meta-item span {\n  font-size: 14px;\n  color: #111827;\n}\n\n.artifact-description {\n  padding: 12px;\n  margin-bottom: 16px;\n  background: #EFF6FF;\n  border-left: 3px solid #3B82F6;\n  border-radius: 4px;\n  color: #1E40AF;\n  font-size: 14px;\n  flex-shrink: 0;\n}\n\n.json-viewer {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  border: 1px solid #E5E7EB;\n  border-radius: 8px;\n  overflow: hidden;\n  min-height: 0;\n}\n\n.json-editor-container {\n  flex: 1;\n  overflow: hidden;\n  min-height: 0;\n}\n\n.json-toolbar {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n  padding: 8px 12px;\n  background: #F9FAFB;\n  border-bottom: 1px solid #E5E7EB;\n  flex-shrink: 0;\n}\n\n.btn-icon {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: white;\n  border: 1px solid #D1D5DB;\n  border-radius: 4px;\n  padding: 6px 12px;\n  cursor: pointer;\n  color: #374151;\n  font-size: 14px;\n  transition: all 0.2s;\n}\n\n.btn-icon:hover {\n  background: #F3F4F6;\n  border-color: #9CA3AF;\n}\n\n.btn-icon.btn-primary {\n  background: #4F46E5;\n  border-color: #4F46E5;\n  color: white;\n}\n\n.btn-icon.btn-primary:hover {\n  background: #4338CA;\n  border-color: #4338CA;\n}\n\n.btn-icon i {\n  font-size: 14px;\n}\n\n/* Library Dialog Styles */\n.modal-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 10000;\n}\n\n.modal-content {\n  background: white;\n  border-radius: 12px;\n  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);\n  max-width: 500px;\n  width: 90%;\n  max-height: 90vh;\n  display: flex;\n  flex-direction: column;\n}\n\n.modal-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px 20px;\n  border-bottom: 1px solid #E5E7EB;\n}\n\n.modal-header h3 {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.modal-header h3 i {\n  color: #F59E0B;\n}\n\n.modal-body {\n  padding: 20px;\n  overflow-y: auto;\n}\n\n.modal-footer {\n  display: flex;\n  justify-content: flex-end;\n  gap: 12px;\n  padding: 16px 20px;\n  border-top: 1px solid #E5E7EB;\n}\n\n.form-section {\n  margin-bottom: 20px;\n}\n\n.form-section label {\n  display: block;\n  margin-bottom: 8px;\n  font-size: 14px;\n  font-weight: 500;\n  color: #374151;\n}\n\n.form-select,\n.form-input {\n  width: 100%;\n  padding: 10px 12px;\n  border: 1px solid #D1D5DB;\n  border-radius: 6px;\n  font-size: 14px;\n  color: #111827;\n  background: white;\n  transition: border-color 0.2s;\n}\n\n.form-select:focus,\n.form-input:focus {\n  outline: none;\n  border-color: #4F46E5;\n  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);\n}\n\n.divider {\n  display: flex;\n  align-items: center;\n  margin: 24px 0;\n  color: #9CA3AF;\n  font-size: 12px;\n  font-weight: 500;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.divider::before,\n.divider::after {\n  content: '';\n  flex: 1;\n  height: 1px;\n  background: #E5E7EB;\n}\n\n.divider span {\n  padding: 0 12px;\n}\n\n.create-collection-row {\n  display: flex;\n  gap: 8px;\n}\n\n.create-collection-row .form-input {\n  flex: 1;\n}\n\n.btn {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 16px;\n  border: none;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.2s;\n  white-space: nowrap;\n}\n\n.btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.btn-primary {\n  background: #4F46E5;\n  color: white;\n}\n\n.btn-primary:hover:not(:disabled) {\n  background: #4338CA;\n}\n\n.btn-secondary {\n  background: white;\n  border: 1px solid #D1D5DB;\n  color: #374151;\n}\n\n.btn-secondary:hover:not(:disabled) {\n  background: #F3F4F6;\n}\n\n/* Tab Navigation */\n.tab-navigation {\n  display: flex;\n  gap: 0;\n  border-bottom: 2px solid #E5E7EB;\n  padding: 0 16px;\n  background: white;\n}\n\n.tab-btn {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 12px 20px;\n  background: transparent;\n  border: none;\n  border-bottom: 2px solid transparent;\n  margin-bottom: -2px;\n  color: #6B7280;\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 150ms ease;\n}\n\n.tab-btn:hover {\n  color: #1e40af;\n  background: #F9FAFB;\n}\n\n.tab-btn.active {\n  color: #1e40af;\n  border-bottom-color: #1e40af;\n}\n\n.tab-btn i {\n  font-size: 14px;\n}\n\n/* Tab Content */\n.tab-content {\n  flex: 1;\n  overflow: auto;\n  width: 100%;\n  box-sizing: border-box;\n  margin-bottom: 5px;\n  min-width: 0;\n}\n\n.display-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n  overflow: hidden;\n  min-height: 0;\n  min-width: 0;\n  padding: 7px;\n}\n\n.display-toolbar {\n  position: absolute;\n  top: 12px;\n  right: 12px;\n  display: flex;\n  gap: 8px;\n  z-index: 10;\n}\n\n.markdown-content,\n.html-content {\n  flex: 1;\n  font-size: 14px;\n  line-height: 1.6;\n  width: 100%;\n  padding: 20px 10px 5px 20px; /* top right bottom left */\n  box-sizing: border-box;\n  overflow: auto;\n  min-height: 0;\n}\n\n.details-content {\n  padding: 20px;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.details-content .artifact-meta {\n  margin-bottom: 0;\n  padding: 20px;\n}\n\n.details-content .meta-item.full-width {\n  grid-column: 1 / -1;\n}\n\n.attributes-section {\n  margin-top: 24px;\n  padding: 24px;\n  background: #F9FAFB;\n  border-radius: 8px;\n}\n\n.attributes-section h4 {\n  margin: 0 0 16px 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: #111827;\n}\n\n.attributes-list {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n  gap: 16px;\n}\n\n.attribute-item {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 12px;\n  background: white;\n  border-radius: 6px;\n  border: 1px solid #E5E7EB;\n}\n\n.attribute-item label {\n  font-size: 11px;\n  font-weight: 600;\n  color: #6B7280;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.attribute-item span {\n  font-size: 13px;\n  color: #111827;\n  word-break: break-word;\n}\n\n.attribute-empty-pill {\n  display: inline-block;\n  padding: 2px 8px;\n  background: #F3F4F6;\n  color: #9CA3AF;\n  font-size: 11px;\n  font-weight: 500;\n  border-radius: 4px;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n/* Links Tab */\n.links-container {\n  padding: 20px;\n}\n\n.links-section {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.link-item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px;\n  background: #F9FAFB;\n  border: 1px solid #E5E7EB;\n  border-radius: 8px;\n  transition: all 0.15s;\n}\n\n.link-item:hover {\n  border-color: #1e40af;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.05);\n}\n\n.link-icon {\n  width: 40px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: white;\n  border-radius: 8px;\n  flex-shrink: 0;\n}\n\n.link-icon i {\n  font-size: 18px;\n  color: #1e40af;\n}\n\n.link-content {\n  flex: 1;\n  min-width: 0;\n}\n\n.link-name {\n  font-size: 14px;\n  font-weight: 500;\n  color: #111827;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.link-type {\n  font-size: 12px;\n  color: #6B7280;\n  margin-top: 2px;\n}\n\n.link-actions {\n  display: flex;\n  gap: 8px;\n}\n\n.link-action-btn {\n  width: 32px;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: white;\n  border: 1px solid #D1D5DB;\n  border-radius: 6px;\n  color: #1e40af;\n  cursor: pointer;\n  transition: all 0.15s;\n}\n\n.link-action-btn:hover:not(:disabled) {\n  background: #EFF6FF;\n  border-color: #1e40af;\n}\n\n.link-action-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  color: #9CA3AF;\n}\n\n.links-container .empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 48px 24px;\n  color: #9CA3AF;\n  text-align: center;\n}\n\n.links-container .empty-state i {\n  font-size: 48px;\n  margin-bottom: 16px;\n  opacity: 0.3;\n}\n\n.links-container .empty-state p {\n  margin: 0;\n  font-size: 14px;\n}\n\n/* Dynamic Tab Content Styles */\n.dynamic-tab-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  padding: 16px;\n}\n\n.markdown-viewer {\n  flex: 1;\n  overflow: auto;\n  padding: 20px;\n  background: white;\n  line-height: 1.6;\n}\n\n.markdown-viewer h1, .markdown-viewer h2, .markdown-viewer h3 {\n  margin-top: 24px;\n  margin-bottom: 12px;\n  font-weight: 600;\n}\n\n.markdown-viewer h1 { font-size: 24px; }\n.markdown-viewer h2 { font-size: 20px; }\n.markdown-viewer h3 { font-size: 18px; }\n\n.markdown-viewer p {\n  margin-bottom: 12px;\n}\n\n.markdown-viewer ul, .markdown-viewer ol {\n  margin-bottom: 12px;\n  padding-left: 24px;\n}\n\n.markdown-viewer code {\n  background: #f3f4f6;\n  padding: 2px 6px;\n  border-radius: 3px;\n  font-family: 'Courier New', monospace;\n  font-size: 13px;\n}\n\n.markdown-viewer pre {\n  background: #f3f4f6;\n  padding: 12px;\n  border-radius: 6px;\n  overflow-x: auto;\n  margin-bottom: 12px;\n}\n\n.markdown-viewer pre code {\n  background: none;\n  padding: 0;\n}\n\n.code-viewer {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  border: 1px solid #E5E7EB;\n  border-radius: 8px;\n  overflow: hidden;\n  min-height: 0;\n}\n\n.code-toolbar {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n  padding: 8px 12px;\n  background: #F9FAFB;\n  border-bottom: 1px solid #E5E7EB;\n  flex-shrink: 0;\n}\n\n.code-editor-container {\n  flex: 1;\n  overflow: hidden;\n  min-height: 0;\n}\n\n.plaintext-viewer {\n  flex: 1;\n  overflow: auto;\n  padding: 12px;\n  background: #f9fafb;\n  font-family: 'Courier New', monospace;\n  font-size: 13px;\n  white-space: pre-wrap;\n}\n\n.html-viewer {\n  flex: 1;\n  overflow: auto;\n  padding: 20px;\n  background: white;\n}\n"] }]
+        args: [{ selector: 'mj-artifact-viewer-panel', template: "<div class=\"artifact-viewer-panel\">\n  <div class=\"panel-header\">\n    <div class=\"panel-header-left\">\n      <h3>\n        <i class=\"fas fa-cube\"></i>\n        {{ displayName }}\n      </h3>\n      @if (displayDescription) {\n        <p class=\"header-description\">{{ displayDescription }}</p>\n      }\n    </div>\n    <div class=\"panel-header-right\">\n      <div class=\"version-selector\"\n           [class.clickable]=\"allVersions.length > 1 && viewContext !== 'collection'\"\n           (click)=\"viewContext !== 'collection' && toggleVersionDropdown()\">\n        <i class=\"fas fa-history\"></i>\n        <span class=\"version-label\">v{{ selectedVersionNumber }}</span>\n        @if (allVersions.length > 1 && viewContext !== 'collection') {\n          <i class=\"fas fa-chevron-down dropdown-icon\" [class.open]=\"showVersionDropdown\"></i>\n        }\n        @if (showVersionDropdown) {\n          <div class=\"version-dropdown\" (click)=\"$event.stopPropagation()\">\n            @for (version of allVersions; track version.ID) {\n              <div class=\"version-option\"\n                   [class.selected]=\"version.VersionNumber === selectedVersionNumber\"\n                   (click)=\"selectVersion(version); $event.stopPropagation()\">\n                <span class=\"version-number\">v{{ version.VersionNumber }}</span>\n                <span class=\"version-date\">{{ version.__mj_CreatedAt | date:'short' }}</span>\n                @if (version.VersionNumber === selectedVersionNumber) {\n                  <i class=\"fas fa-check\"></i>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n      @if (showSaveToCollection) {\n        <button class=\"save-to-collection-btn\"\n                [class.in-collection]=\"isInCollection\"\n                (click)=\"onSaveToLibrary()\"\n                [title]=\"isInCollection ? 'Current version saved to ' + currentVersionCollections.length + ' collection(s)' : 'Save to Collection'\">\n          <i [class]=\"isInCollection ? 'fas fa-bookmark' : 'far fa-bookmark'\"></i>\n        </button>\n      }\n      @if (canShare) {\n        <button class=\"share-btn\"\n                (click)=\"onShare()\"\n                title=\"Share\">\n          <i class=\"fas fa-share-nodes\"></i>\n        </button>\n      }\n      <button class=\"close-btn\" (click)=\"onClose()\" title=\"Close\">\n        <i class=\"fas fa-times\"></i>\n      </button>\n    </div>\n  </div>\n\n  <div class=\"panel-content\">\n    @if (isLoading) {\n      <div class=\"loading-state\">\n        <i class=\"fas fa-spinner fa-spin\"></i>\n        <span>Loading artifact...</span>\n      </div>\n    }\n\n    @if (error) {\n      <div class=\"error-state\">\n        <i class=\"fas fa-exclamation-triangle\"></i>\n        <span>{{ error }}</span>\n      </div>\n    }\n\n    @if (!isLoading && !error && artifact) {\n      <div class=\"artifact-content-wrapper\">\n        <!-- Tab Navigation (Dynamic) -->\n        <div class=\"tab-navigation\">\n          @for (tab of allTabs; track tab) {\n            <button class=\"tab-btn\"\n                    [class.active]=\"activeTab === tab.toLowerCase()\"\n                    (click)=\"SetActiveTab(tab)\">\n              @if (GetTabIcon(tab)) {\n                <i [class]=\"GetTabIcon(tab)!\"></i>\n              }\n              {{ tab }}\n            </button>\n          }\n        </div>\n\n        <!-- Tab Content (Dynamic) -->\n        <div class=\"tab-content\">\n          <!-- Plugin Viewer - Created once, kept alive, shown/hidden with CSS -->\n          @if (hasPlugin && artifactVersion && artifactTypeName) {\n            <div class=\"plugin-container\" [style.display]=\"activeTab === 'display' ? 'block' : 'none'\">\n              <mj-artifact-type-plugin-viewer\n                [artifactVersion]=\"artifactVersion\"\n                [artifactTypeName]=\"artifactTypeName\"\n                [contentType]=\"contentType\"\n                [readonly]=\"true\">\n              </mj-artifact-type-plugin-viewer>\n            </div>\n          }\n\n          <!-- Display Tab - Fallback content when no plugin -->\n          @if (activeTab === 'display' && (!hasPlugin || !artifactVersion)) {\n            <div class=\"display-content\">\n              @if (displayMarkdown || displayHtml) {\n                <!-- Fallback to extracted markdown/HTML attributes -->\n                <div class=\"display-toolbar\">\n                  <button class=\"btn-icon\" title=\"Print\" (click)=\"onPrintDisplayContent()\">\n                    <i class=\"fas fa-print\"></i> Print\n                  </button>\n                  <button class=\"btn-icon\" title=\"Copy Content\" (click)=\"onCopyDisplayContent()\">\n                    <i class=\"fas fa-copy\"></i> Copy\n                  </button>\n                </div>\n                @if (displayMarkdown) {\n                  <div class=\"markdown-content\">\n                    <markdown [data]=\"displayMarkdown\"></markdown>\n                  </div>\n                } @else if (displayHtml) {\n                  <div class=\"html-content\" [innerHTML]=\"displayHtml\"></div>\n                }\n              }\n            </div>\n          }\n\n          <!-- Details Tab - Artifact metadata (always in DOM, hidden with CSS) -->\n          <div class=\"details-content\" [style.display]=\"activeTab === 'details' ? 'block' : 'none'\">\n              <div class=\"artifact-meta\">\n                <div class=\"meta-item\">\n                  <label>Type</label>\n                  <span>{{ artifact.Type }}</span>\n                </div>\n                <div class=\"meta-item\">\n                  <label>Version</label>\n                  <span>{{ artifactVersion?.VersionNumber || 1 }}</span>\n                </div>\n                <div class=\"meta-item\">\n                  <label>Created</label>\n                  <span>{{ artifact.__mj_CreatedAt | date:'short' }}</span>\n                </div>\n                <div class=\"meta-item\">\n                  <label>Updated</label>\n                  <span>{{ artifactVersion?.__mj_UpdatedAt | date:'short' }}</span>\n                </div>\n                @if (artifact.Description) {\n                  <div class=\"meta-item full-width\">\n                    <label>Artifact Description</label>\n                    <span>{{ artifact.Description }}</span>\n                  </div>\n                }\n                @if (artifactVersion?.Description && artifact.Description && artifactVersion?.Description !== artifact.Description) {\n                  <div class=\"meta-item full-width\">\n                    <label>Version Description</label>\n                    <span>{{ artifactVersion?.Description }}</span>\n                  </div>\n                }\n              </div>\n\n              <!-- Version Attributes -->\n              @if (filteredAttributes.length > 0) {\n                <div class=\"attributes-section\">\n                  <h4>Version Attributes</h4>\n                  <div class=\"attributes-list\">\n                    @for (attr of filteredAttributes; track attr.ID) {\n                      <div class=\"attribute-item\">\n                        <label>{{ attr.Name }}</label>\n                        @if (attr.Value) {\n                          <span>{{ attr.Value }}</span>\n                        } @else {\n                          <span class=\"attribute-empty-pill\">Empty</span>\n                        }\n                      </div>\n                    }\n                  </div>\n                </div>\n              }\n            </div>\n\n          <!-- Links Tab - Conversations and Collections (always in DOM, hidden with CSS) -->\n          <div class=\"links-container\" [style.display]=\"activeTab === 'links' ? 'block' : 'none'\">\n            @if (linksToShow.length > 0) {\n              <div class=\"links-section\">\n                @for (link of linksToShow; track link.id) {\n                  <div class=\"link-item\"\n                       [class.disabled]=\"!link.hasAccess\"\n                       [class.clickable]=\"link.hasAccess\"\n                       (click)=\"link.hasAccess ? onNavigateToLink(link) : null\"\n                       [title]=\"link.hasAccess ? 'Click to open' : 'No access'\">\n                    <div class=\"link-icon\">\n                      @if (link.type === 'conversation') {\n                        <i class=\"fas fa-comments\"></i>\n                      } @else {\n                        <i class=\"fas fa-folder\"></i>\n                      }\n                    </div>\n                    <div class=\"link-content\">\n                      <div class=\"link-name\">{{ link.name }}</div>\n                      <div class=\"link-type\">{{ link.type === 'conversation' ? 'Conversation' : 'Collection' }}</div>\n                    </div>\n                    <div class=\"link-actions\">\n                      <i class=\"fas fa-arrow-right\"></i>\n                    </div>\n                  </div>\n                }\n              </div>\n            } @else {\n              <div class=\"empty-state\">\n                <i class=\"fas fa-link\"></i>\n                <p>No links available</p>\n              </div>\n            }\n          </div>\n\n          <!-- Dynamic Plugin Tabs and Base Tabs (JSON, etc.) -->\n          @if (activeTab !== 'display' && activeTab !== 'details' && activeTab !== 'links') {\n            @if (GetTabContent(activeTab); as tabData) {\n              <div class=\"dynamic-tab-content\">\n                @switch (tabData.type) {\n                  @case ('markdown') {\n                    <div class=\"markdown-viewer\" [innerHTML]=\"RenderMarkdown(tabData.content)\"></div>\n                  }\n                  @case ('json') {\n                    <div class=\"json-viewer\">\n                      <div class=\"json-toolbar\">\n                        <button class=\"btn-icon\" title=\"Copy JSON\" (click)=\"onCopyToClipboard()\">\n                          <i class=\"fas fa-copy\"></i> Copy\n                        </button>\n                      </div>\n                      <div class=\"json-editor-container\">\n                        <mj-code-editor\n                          [value]=\"tabData.content\"\n                          [language]=\"'json'\"\n                          [readonly]=\"true\"\n                          [lineWrapping]=\"true\"\n                          style=\"width: 100%; height: 100%;\">\n                        </mj-code-editor>\n                      </div>\n                    </div>\n                  }\n                  @case ('code') {\n                    <div class=\"code-viewer\">\n                      <div class=\"code-toolbar\">\n                        <button class=\"btn-icon\" title=\"Copy Code\" (click)=\"onCopyToClipboard()\">\n                          <i class=\"fas fa-copy\"></i> Copy\n                        </button>\n                      </div>\n                      <div class=\"code-editor-container\">\n                        <mj-code-editor\n                          [value]=\"tabData.content\"\n                          [language]=\"tabData.language || 'typescript'\"\n                          [readonly]=\"true\"\n                          [lineWrapping]=\"true\"\n                          style=\"width: 100%; height: 100%;\">\n                        </mj-code-editor>\n                      </div>\n                    </div>\n                  }\n                  @case ('html') {\n                    <div class=\"html-viewer\" [innerHTML]=\"tabData.content\"></div>\n                  }\n                  @case ('plaintext') {\n                    <pre class=\"plaintext-viewer\">{{ tabData.content }}</pre>\n                  }\n                }\n              </div>\n            }\n          }\n        </div>\n      </div>\n    }\n  </div>\n</div>\n\n", styles: [".artifact-viewer-panel {\n  width: 100%;\n  height: 100%;\n  background: white;\n  border-left: 1px solid #E5E7EB;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  box-sizing: border-box;\n}\n\n.panel-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding: 12px 16px;\n  border-bottom: 1px solid #E5E7EB;\n  background: white;\n  flex-shrink: 0;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.panel-header-left {\n  flex: 1;\n  min-width: 0;\n  margin-right: 16px;\n}\n\n.panel-header h3 {\n  margin: 0;\n  font-size: 14px;\n  font-weight: 600;\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  word-wrap: break-word;\n  overflow-wrap: break-word;\n}\n\n.panel-header h3 i {\n  color: #6366F1;\n  flex-shrink: 0;\n  margin-top: 2px;\n}\n\n.header-description {\n  margin: 4px 0 0 0;\n  font-size: 12px;\n  color: #6B7280;\n  font-weight: normal;\n  word-wrap: break-word;\n  overflow-wrap: break-word;\n}\n\n.panel-header-right {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex-shrink: 0;\n}\n\n.version-selector {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  background: #F3F4F6;\n  border-radius: 12px;\n  font-size: 12px;\n  color: #6B7280;\n  font-weight: 500;\n  transition: all 0.2s;\n}\n\n.version-selector.clickable {\n  cursor: pointer;\n}\n\n.version-selector.clickable:hover {\n  background: #E5E7EB;\n}\n\n.version-selector i {\n  font-size: 11px;\n}\n\n.version-selector .dropdown-icon {\n  margin-left: 2px;\n  transition: transform 0.2s;\n}\n\n.version-selector .dropdown-icon.open {\n  transform: rotate(180deg);\n}\n\n.version-label {\n  font-family: monospace;\n}\n\n.version-dropdown {\n  position: absolute;\n  top: calc(100% + 4px);\n  right: 0;\n  min-width: 200px;\n  background: white;\n  border: 1px solid #E5E7EB;\n  border-radius: 8px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n  z-index: 1000;\n  overflow: hidden;\n}\n\n.version-option {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 12px;\n  cursor: pointer;\n  transition: background 0.15s;\n  font-size: 13px;\n}\n\n.version-option:hover {\n  background: #F9FAFB;\n}\n\n.version-option.selected {\n  background: #EEF2FF;\n  color: #4F46E5;\n}\n\n.version-option .version-number {\n  font-family: monospace;\n  font-weight: 600;\n  min-width: 35px;\n}\n\n.version-option .version-date {\n  flex: 1;\n  color: #6B7280;\n  font-size: 12px;\n}\n\n.version-option i.fa-check {\n  color: #10B981;\n  margin-left: auto;\n}\n\n.save-to-collection-btn {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: #9CA3AF;\n  padding: 6px;\n  border-radius: 4px;\n  transition: all 0.2s;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n}\n\n.save-to-collection-btn:hover {\n  background: #F3F4F6;\n  color: #6B7280;\n}\n\n.save-to-collection-btn i {\n  font-size: 14px;\n}\n\n.save-to-collection-btn.in-collection {\n  color: #6366F1; /* Indigo color to indicate it's saved */\n}\n\n.save-to-collection-btn.in-collection:hover {\n  background: #EEF2FF;\n  color: #4F46E5;\n}\n\n.share-btn {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: #9CA3AF;\n  padding: 6px;\n  border-radius: 4px;\n  transition: all 0.2s;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n}\n\n.share-btn:hover {\n  background: #F3F4F6;\n  color: #6366F1;\n}\n\n.share-btn i {\n  font-size: 14px;\n}\n\n.close-btn {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: #6B7280;\n  padding: 6px;\n  border-radius: 4px;\n  transition: all 0.2s;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n}\n\n.close-btn:hover {\n  background: #F3F4F6;\n  color: #111827;\n}\n\n.close-btn i {\n  font-size: 14px;\n}\n\n.panel-content {\n  flex: 1;\n  overflow: hidden;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.artifact-content-wrapper {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  min-height: 0;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.loading-state,\n.error-state {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  padding: 40px 20px;\n  color: #6B7280;\n}\n\n.error-state {\n  color: #DC2626;\n}\n\n.loading-state i {\n  font-size: 24px;\n}\n\n.artifact-meta {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n  gap: 16px;\n  margin-bottom: 16px;\n  padding: 16px;\n  background: #F9FAFB;\n  border-radius: 8px;\n  flex-shrink: 0;\n}\n\n.meta-item {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.meta-item label {\n  font-size: 12px;\n  font-weight: 500;\n  color: #6B7280;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.meta-item span {\n  font-size: 14px;\n  color: #111827;\n}\n\n.artifact-description {\n  padding: 12px;\n  margin-bottom: 16px;\n  background: #EFF6FF;\n  border-left: 3px solid #3B82F6;\n  border-radius: 4px;\n  color: #1E40AF;\n  font-size: 14px;\n  flex-shrink: 0;\n}\n\n.json-viewer {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  border: 1px solid #E5E7EB;\n  border-radius: 8px;\n  overflow: hidden;\n  min-height: 0;\n}\n\n.json-editor-container {\n  flex: 1;\n  overflow: hidden;\n  min-height: 0;\n}\n\n.json-toolbar {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n  padding: 8px 12px;\n  background: #F9FAFB;\n  border-bottom: 1px solid #E5E7EB;\n  flex-shrink: 0;\n}\n\n.btn-icon {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: white;\n  border: 1px solid #D1D5DB;\n  border-radius: 4px;\n  padding: 6px 12px;\n  cursor: pointer;\n  color: #374151;\n  font-size: 14px;\n  transition: all 0.2s;\n}\n\n.btn-icon:hover {\n  background: #F3F4F6;\n  border-color: #9CA3AF;\n}\n\n.btn-icon.btn-primary {\n  background: #4F46E5;\n  border-color: #4F46E5;\n  color: white;\n}\n\n.btn-icon.btn-primary:hover {\n  background: #4338CA;\n  border-color: #4338CA;\n}\n\n.btn-icon i {\n  font-size: 14px;\n}\n\n/* Library Dialog Styles */\n.modal-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 10000;\n}\n\n.modal-content {\n  background: white;\n  border-radius: 12px;\n  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);\n  max-width: 500px;\n  width: 90%;\n  max-height: 90vh;\n  display: flex;\n  flex-direction: column;\n}\n\n.modal-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px 20px;\n  border-bottom: 1px solid #E5E7EB;\n}\n\n.modal-header h3 {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.modal-header h3 i {\n  color: #F59E0B;\n}\n\n.modal-body {\n  padding: 20px;\n  overflow-y: auto;\n}\n\n.modal-footer {\n  display: flex;\n  justify-content: flex-end;\n  gap: 12px;\n  padding: 16px 20px;\n  border-top: 1px solid #E5E7EB;\n}\n\n.form-section {\n  margin-bottom: 20px;\n}\n\n.form-section label {\n  display: block;\n  margin-bottom: 8px;\n  font-size: 14px;\n  font-weight: 500;\n  color: #374151;\n}\n\n.form-select,\n.form-input {\n  width: 100%;\n  padding: 10px 12px;\n  border: 1px solid #D1D5DB;\n  border-radius: 6px;\n  font-size: 14px;\n  color: #111827;\n  background: white;\n  transition: border-color 0.2s;\n}\n\n.form-select:focus,\n.form-input:focus {\n  outline: none;\n  border-color: #4F46E5;\n  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);\n}\n\n.divider {\n  display: flex;\n  align-items: center;\n  margin: 24px 0;\n  color: #9CA3AF;\n  font-size: 12px;\n  font-weight: 500;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.divider::before,\n.divider::after {\n  content: '';\n  flex: 1;\n  height: 1px;\n  background: #E5E7EB;\n}\n\n.divider span {\n  padding: 0 12px;\n}\n\n.create-collection-row {\n  display: flex;\n  gap: 8px;\n}\n\n.create-collection-row .form-input {\n  flex: 1;\n}\n\n.btn {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 16px;\n  border: none;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.2s;\n  white-space: nowrap;\n}\n\n.btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.btn-primary {\n  background: #4F46E5;\n  color: white;\n}\n\n.btn-primary:hover:not(:disabled) {\n  background: #4338CA;\n}\n\n.btn-secondary {\n  background: white;\n  border: 1px solid #D1D5DB;\n  color: #374151;\n}\n\n.btn-secondary:hover:not(:disabled) {\n  background: #F3F4F6;\n}\n\n/* Tab Navigation */\n.tab-navigation {\n  display: flex;\n  gap: 0;\n  border-bottom: 2px solid #E5E7EB;\n  padding: 0 16px;\n  background: white;\n}\n\n.tab-btn {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 12px 20px;\n  background: transparent;\n  border: none;\n  border-bottom: 2px solid transparent;\n  margin-bottom: -2px;\n  color: #6B7280;\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 150ms ease;\n}\n\n.tab-btn:hover {\n  color: #1e40af;\n  background: #F9FAFB;\n}\n\n.tab-btn.active {\n  color: #1e40af;\n  border-bottom-color: #1e40af;\n}\n\n.tab-btn i {\n  font-size: 14px;\n}\n\n/* Tab Content */\n.tab-content {\n  flex: 1;\n  overflow: auto;\n  width: 100%;\n  box-sizing: border-box;\n  margin-bottom: 5px;\n  min-width: 0;\n}\n\n.display-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n  overflow: hidden;\n  min-height: 0;\n  min-width: 0;\n  padding: 7px;\n}\n\n.display-toolbar {\n  position: absolute;\n  top: 12px;\n  right: 12px;\n  display: flex;\n  gap: 8px;\n  z-index: 10;\n}\n\n.markdown-content,\n.html-content {\n  flex: 1;\n  font-size: 14px;\n  line-height: 1.6;\n  width: 100%;\n  padding: 20px 10px 5px 20px; /* top right bottom left */\n  box-sizing: border-box;\n  overflow: auto;\n  min-height: 0;\n}\n\n.details-content {\n  padding: 20px;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.details-content .artifact-meta {\n  margin-bottom: 0;\n  padding: 20px;\n}\n\n.details-content .meta-item.full-width {\n  grid-column: 1 / -1;\n}\n\n.attributes-section {\n  margin-top: 24px;\n  padding: 24px;\n  background: #F9FAFB;\n  border-radius: 8px;\n}\n\n.attributes-section h4 {\n  margin: 0 0 16px 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: #111827;\n}\n\n.attributes-list {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n  gap: 16px;\n}\n\n.attribute-item {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 12px;\n  background: white;\n  border-radius: 6px;\n  border: 1px solid #E5E7EB;\n}\n\n.attribute-item label {\n  font-size: 11px;\n  font-weight: 600;\n  color: #6B7280;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.attribute-item span {\n  font-size: 13px;\n  color: #111827;\n  word-break: break-word;\n}\n\n.attribute-empty-pill {\n  display: inline-block;\n  padding: 2px 8px;\n  background: #F3F4F6;\n  color: #9CA3AF;\n  font-size: 11px;\n  font-weight: 500;\n  border-radius: 4px;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n/* Links Tab */\n.links-container {\n  padding: 20px;\n}\n\n.links-section {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.link-item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px;\n  background: #F9FAFB;\n  border: 1px solid #E5E7EB;\n  border-radius: 8px;\n  transition: all 0.15s;\n}\n\n.link-item.clickable {\n  cursor: pointer;\n}\n\n.link-item.clickable:hover {\n  border-color: #1e40af;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.05);\n  background: #F3F4F6;\n}\n\n.link-item.disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.link-item:hover {\n  border-color: #1e40af;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.05);\n}\n\n.link-icon {\n  width: 40px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: white;\n  border-radius: 8px;\n  flex-shrink: 0;\n}\n\n.link-icon i {\n  font-size: 18px;\n  color: #1e40af;\n}\n\n.link-content {\n  flex: 1;\n  min-width: 0;\n}\n\n.link-name {\n  font-size: 14px;\n  font-weight: 500;\n  color: #111827;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.link-type {\n  font-size: 12px;\n  color: #6B7280;\n  margin-top: 2px;\n}\n\n.link-actions {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  flex-shrink: 0;\n}\n\n.link-actions i {\n  font-size: 14px;\n  color: #6B7280;\n  transition: all 0.15s;\n}\n\n.link-item.clickable:hover .link-actions i {\n  color: #1e40af;\n  transform: translateX(2px);\n}\n\n.links-container .empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 48px 24px;\n  color: #9CA3AF;\n  text-align: center;\n}\n\n.links-container .empty-state i {\n  font-size: 48px;\n  margin-bottom: 16px;\n  opacity: 0.3;\n}\n\n.links-container .empty-state p {\n  margin: 0;\n  font-size: 14px;\n}\n\n/* Dynamic Tab Content Styles */\n.dynamic-tab-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  padding: 16px;\n}\n\n.markdown-viewer {\n  flex: 1;\n  overflow: auto;\n  padding: 20px;\n  background: white;\n  line-height: 1.6;\n}\n\n.markdown-viewer h1, .markdown-viewer h2, .markdown-viewer h3 {\n  margin-top: 24px;\n  margin-bottom: 12px;\n  font-weight: 600;\n}\n\n.markdown-viewer h1 { font-size: 24px; }\n.markdown-viewer h2 { font-size: 20px; }\n.markdown-viewer h3 { font-size: 18px; }\n\n.markdown-viewer p {\n  margin-bottom: 12px;\n}\n\n.markdown-viewer ul, .markdown-viewer ol {\n  margin-bottom: 12px;\n  padding-left: 24px;\n}\n\n.markdown-viewer code {\n  background: #f3f4f6;\n  padding: 2px 6px;\n  border-radius: 3px;\n  font-family: 'Courier New', monospace;\n  font-size: 13px;\n}\n\n.markdown-viewer pre {\n  background: #f3f4f6;\n  padding: 12px;\n  border-radius: 6px;\n  overflow-x: auto;\n  margin-bottom: 12px;\n}\n\n.markdown-viewer pre code {\n  background: none;\n  padding: 0;\n}\n\n.code-viewer {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  border: 1px solid #E5E7EB;\n  border-radius: 8px;\n  overflow: hidden;\n  min-height: 0;\n}\n\n.code-toolbar {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n  padding: 8px 12px;\n  background: #F9FAFB;\n  border-bottom: 1px solid #E5E7EB;\n  flex-shrink: 0;\n}\n\n.code-editor-container {\n  flex: 1;\n  overflow: hidden;\n  min-height: 0;\n}\n\n.plaintext-viewer {\n  flex: 1;\n  overflow: auto;\n  padding: 12px;\n  background: #f9fafb;\n  font-family: 'Courier New', monospace;\n  font-size: 13px;\n  white-space: pre-wrap;\n}\n\n.html-viewer {\n  flex: 1;\n  overflow: auto;\n  padding: 20px;\n  background: white;\n}\n"] }]
     }], () => [{ type: i1.MJNotificationService }, { type: i2.DomSanitizer }], { artifactId: [{
             type: Input
         }], currentUser: [{
@@ -1278,5 +1364,5 @@ export class ArtifactViewerPanelComponent {
             type: ViewChild,
             args: [ArtifactTypePluginViewerComponent]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ArtifactViewerPanelComponent, { className: "ArtifactViewerPanelComponent", filePath: "src/lib/components/artifact-viewer-panel.component.ts", lineNumber: 40 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ArtifactViewerPanelComponent, { className: "ArtifactViewerPanelComponent", filePath: "src/lib/components/artifact-viewer-panel.component.ts", lineNumber: 18 }); })();
 //# sourceMappingURL=artifact-viewer-panel.component.js.map