@memberjunction/ng-conversations 5.1.0 → 5.3.0

package/dist/lib/components/conversation/conversation-chat-area.component.js

@@ -1,5 +1,6 @@
 import { Component, Input, Output, EventEmitter, ViewChild, ViewChildren } from '@angular/core';
 import { RunView, RunQuery, Metadata, CompositeKey, LogStatusEx } from '@memberjunction/core';
+import { ArtifactMetadataEngine } from '@memberjunction/core-entities';
 import { AIEngineBase } from '@memberjunction/ai-engine-base';
 import { LazyArtifactInfo } from '../../models/lazy-artifact-info';
 import { parseConversationDetailComplete } from '../../models/conversation-complete-query.model';
@@ -234,7 +235,7 @@ function ConversationChatAreaComponent_Conditional_7_Template(rf, ctx) { if (rf
     const _r13 = i0.ɵɵgetCurrentView();
     i0.ɵɵconditionalCreate(0, ConversationChatAreaComponent_Conditional_7_Conditional_0_Template, 1, 0, "div", 57);
     i0.ɵɵelementStart(1, "div", 58)(2, "mj-artifact-viewer-panel", 59);
-    i0.ɵɵlistener("closed", function ConversationChatAreaComponent_Conditional_7_Template_mj_artifact_viewer_panel_closed_2_listener() { i0.ɵɵrestoreView(_r13); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onCloseArtifactPanel()); })("saveToCollectionRequested", function ConversationChatAreaComponent_Conditional_7_Template_mj_artifact_viewer_panel_saveToCollectionRequested_2_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onSaveToCollectionRequested($event)); })("navigateToLink", function ConversationChatAreaComponent_Conditional_7_Template_mj_artifact_viewer_panel_navigateToLink_2_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onArtifactLinkNavigation($event)); })("shareRequested", function ConversationChatAreaComponent_Conditional_7_Template_mj_artifact_viewer_panel_shareRequested_2_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onArtifactShareRequested($event)); })("maximizeToggled", function ConversationChatAreaComponent_Conditional_7_Template_mj_artifact_viewer_panel_maximizeToggled_2_listener() { i0.ɵɵrestoreView(_r13); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleMaximizeArtifactPane()); })("openEntityRecord", function ConversationChatAreaComponent_Conditional_7_Template_mj_artifact_viewer_panel_openEntityRecord_2_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onOpenEntityRecord($event)); });
+    i0.ɵɵlistener("closed", function ConversationChatAreaComponent_Conditional_7_Template_mj_artifact_viewer_panel_closed_2_listener() { i0.ɵɵrestoreView(_r13); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onCloseArtifactPanel()); })("saveToCollectionRequested", function ConversationChatAreaComponent_Conditional_7_Template_mj_artifact_viewer_panel_saveToCollectionRequested_2_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onSaveToCollectionRequested($event)); })("navigateToLink", function ConversationChatAreaComponent_Conditional_7_Template_mj_artifact_viewer_panel_navigateToLink_2_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onArtifactLinkNavigation($event)); })("shareRequested", function ConversationChatAreaComponent_Conditional_7_Template_mj_artifact_viewer_panel_shareRequested_2_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onArtifactShareRequested($event)); })("maximizeToggled", function ConversationChatAreaComponent_Conditional_7_Template_mj_artifact_viewer_panel_maximizeToggled_2_listener() { i0.ɵɵrestoreView(_r13); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleMaximizeArtifactPane()); })("openEntityRecord", function ConversationChatAreaComponent_Conditional_7_Template_mj_artifact_viewer_panel_openEntityRecord_2_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onOpenEntityRecord($event)); })("navigationRequest", function ConversationChatAreaComponent_Conditional_7_Template_mj_artifact_viewer_panel_navigationRequest_2_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onNavigationRequest($event)); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -480,6 +481,7 @@ export class ConversationChatAreaComponent {
     showSidebarToggle = false;
     conversationRenamed = new EventEmitter();
     openEntityRecord = new EventEmitter();
+    navigationRequest = new EventEmitter();
     taskClicked = new EventEmitter();
     artifactLinkClicked = new EventEmitter();
     sidebarToggleClicked = new EventEmitter();
@@ -508,6 +510,7 @@ export class ConversationChatAreaComponent {
     userAvatarMap = new Map();
     memberCount = 1;
     artifactCount = 0;
+    artifactCountDisplay = 0;
     isShared = false;
     showExportModal = false;
     showAgentPanel = false;
@@ -544,7 +547,7 @@ export class ConversationChatAreaComponent {
     systemArtifactsByDetailId = new Map();
     // Cached combined artifacts map - updated when toggle changes
     _combinedArtifactsMap = null;
-    // Agent run mapping: ConversationDetailID -> AIAgentRunEntityExtended
+    // Agent run mapping: ConversationDetailID -> MJAIAgentRunEntityExtended
     // Loaded once per conversation and kept in sync as new runs are created
     agentRunsByDetailId = new Map();
     /**
@@ -575,6 +578,9 @@ export class ConversationChatAreaComponent {
     artifactViewerRefresh$ = new Subject();
     // Track initialization state to prevent loading messages before agents are ready
     isInitialized = false;
+    // Track whether we had active agents on the current conversation's last poll cycle.
+    // Used to detect when polling transitions from active → no active agents (completion via poll).
+    hadActiveAgents = false;
     // Resize state
     isResizing = false;
     startX = 0;
@@ -617,6 +623,10 @@ export class ConversationChatAreaComponent {
             console.warn('⚠️ Mention autocomplete not initialized by workspace, initializing now...');
             await this.mentionAutocompleteService.initialize(this.currentUser);
         }
+        // Ensure ArtifactMetadataEngine is loaded so LazyArtifactInfo can
+        // resolve versions from its always-fresh in-memory cache.
+        // Config(false) is a no-op if already loaded by another component.
+        await ArtifactMetadataEngine.Instance.Config(false, this.currentUser);
         // Initialize attachment support based on agent modalities
         await this.initializeAttachmentSupport();
         // Load saved artifact pane width
@@ -642,6 +652,27 @@ export class ConversationChatAreaComponent {
                 await this.handleMessageCompletion(message, event.agentRunId);
             }
         });
+        // Subscribe to polling-based agent state as a secondary fallback for completion detection.
+        // The sessionId is persisted in localStorage and reused on refresh, so WebSocket events
+        // normally arrive correctly. However, there's a brief timing gap between page load and
+        // WebSocket reconnection where events can be lost. The catch-up check in
+        // detectAndReconnectToInProgressRuns() is the primary fallback; polling is the last resort.
+        this.agentStateService.activeAgents$
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(async (agents) => {
+            if (!this.conversationId)
+                return;
+            const conversationAgents = agents.filter(a => a.run.ConversationID === this.conversationId);
+            const hasActiveAgents = conversationAgents.length > 0;
+            if (this.hadActiveAgents && !hasActiveAgents) {
+                // Agents just completed — reload messages to pick up final response and any
+                // delegated-agent messages that were created during the run.
+                this.invalidateConversationCache(this.conversationId);
+                await this.reloadMessagesForActiveConversation();
+                this.cdr.detectChanges();
+            }
+            this.hadActiveAgents = hasActiveAgents;
+        });
     }
     /**
      * Initializes attachment support by checking if the conversation manager agent (Sage)
@@ -746,6 +777,9 @@ export class ConversationChatAreaComponent {
         // Clearing causes bugs: global tasks panel blanks out, no notifications when switching
         this.showArtifactPanel = false;
         this.selectedArtifactId = null;
+        // Reset poll-based completion tracking whenever we switch conversations,
+        // so the first empty poll on the new conversation doesn't trigger a spurious reload.
+        this.hadActiveAgents = false;
         if (conversationId) {
             this.currentlyLoadingConversationId = conversationId;
             if (!this.messageInputMetadataCache.has(conversationId)) {
@@ -754,9 +788,15 @@ export class ConversationChatAreaComponent {
                     conversationName: this.conversation?.Name || null
                 });
             }
-            this.isLoadingConversation = true;
-            this.messages = [];
-            this.cdr.detectChanges();
+            // Only show loading spinner if we don't have cached data for this conversation.
+            // When switching between previously visited conversations, the cache provides
+            // instant display without the loading flash.
+            const hasCachedData = this.conversationDataCache.has(conversationId);
+            if (!hasCachedData) {
+                this.isLoadingConversation = true;
+                this.messages = [];
+                this.cdr.detectChanges();
+            }
             try {
                 await this.loadMessages(conversationId);
                 await this.restoreActiveTasks(conversationId);
@@ -949,7 +989,7 @@ export class ConversationChatAreaComponent {
                 const parsed = parseConversationDetailComplete(row);
                 // Build agent runs map
                 if (parsed.agentRuns.length > 0) {
-                    // Convert AgentRunJSON to AIAgentRunEntityExtended
+                    // Convert AgentRunJSON to MJAIAgentRunEntityExtended
                     const agentRunData = parsed.agentRuns[0]; // Should only be one per detail
                     const agentRun = await md.GetEntityObject('MJ: AI Agent Runs', this.currentUser);
                     // Convert ISO date strings to Date objects
@@ -1016,6 +1056,7 @@ export class ConversationChatAreaComponent {
             this._combinedArtifactsMap = null;
             // Update artifact count for header display (unique artifacts, not versions)
             this.artifactCount = this.calculateUniqueArtifactCount();
+            this.updateArtifactCountDisplay();
             // Debug: Log summary
             const systemArtifactCount = this.systemArtifactsByDetailId.size;
             const attachmentCount = this.attachmentsByDetailId.size;
@@ -1074,6 +1115,10 @@ export class ConversationChatAreaComponent {
         }
         // Scroll to bottom when new message is sent
         this.scrollToBottom = true;
+        // Force change detection — zone.js 0.15 no longer patches graphql-ws WebSocket callbacks,
+        // so progress updates that arrive via PubSub run outside Angular's zone. Without this,
+        // the UI does not update when the messages array is modified from a streaming callback.
+        this.cdr.detectChanges();
     }
     /**
      * Loads attachments for a single message and adds them to the attachmentsByDetailId map.
@@ -1163,6 +1208,14 @@ export class ConversationChatAreaComponent {
         this.messages = [...this.messages];
         this.cdr.detectChanges();
     }
+    /**
+     * Public entry point to reload messages in the active conversation.
+     * Called by the parent resource wrapper when the user clicks the Refresh button,
+     * so that new agent responses are visible without a full page reload.
+     */
+    async reloadMessages() {
+        await this.reloadMessagesForActiveConversation();
+    }
     /**
      * Reload messages for the active conversation from the database
      * Called when completion is detected to discover newly delegated agent messages
@@ -1185,8 +1238,22 @@ export class ConversationChatAreaComponent {
                 ResultType: 'entity_object'
             }, this.currentUser);
             if (result.Success && result.Results && result.Results.length > 0) {
-                // Update messages with reloaded data
-                this.messages = result.Results;
+                // Merge DB results with existing client-side messages rather than replacing entirely.
+                // This prevents dropping messages added client-side (e.g., by handleSubAgentInvocation)
+                // that haven't appeared in the DB query results yet due to timing.
+                const merged = new Map();
+                // Add all DB messages (fresh data)
+                for (const msg of result.Results) {
+                    merged.set(msg.ID, msg);
+                }
+                // Preserve client-side messages not yet in DB
+                for (const msg of this.messages) {
+                    if (!merged.has(msg.ID)) {
+                        merged.set(msg.ID, msg);
+                    }
+                }
+                this.messages = Array.from(merged.values())
+                    .sort((a, b) => (a.__mj_CreatedAt?.getTime() || 0) - (b.__mj_CreatedAt?.getTime() || 0));
                 // Find newly discovered messages (delegated agents)
                 const newMessages = result.Results.filter(m => !existingMessageIds.has(m.ID));
                 // Load agent runs for new messages so completion detector can reload artifacts
@@ -1221,6 +1288,8 @@ export class ConversationChatAreaComponent {
     async handleMessageCompletion(message, _agentRunId) {
         try {
             LogStatusEx({ message: `🎉 Handling completion for message ${message.ID}`, verboseOnly: true });
+            // Snapshot artifact IDs before reload to detect newly created artifacts
+            const artifactIdsBefore = this.collectAllArtifactIds();
             // Reload message from database to get final content and status
             await message.Load(message.ID);
             // Reload agent run to get final status, timestamps, and cost
@@ -1233,20 +1302,22 @@ export class ConversationChatAreaComponent {
             // Reload messages to pick up newly delegated agent messages
             // When Sage delegates to Marketing Agent, a new message is created
             await this.reloadMessagesForActiveConversation();
+            // Invalidate cache since reloadMessages may have loaded new delegated-agent messages
+            // that are not in the cache set by reloadArtifactsForMessage().
+            // Without this, navigating away and back would show stale data.
+            if (message.ConversationID) {
+                this.invalidateConversationCache(message.ConversationID);
+            }
             // Update inProgressMessageIds to include new delegated agents
             // This triggers callback registration via the setter in message-input
             this.inProgressMessageIds = [...this.messages
                     .filter(m => m.Status === 'In-Progress')
                     .map(m => m.ID)];
-            // Auto-open artifact panel if this message has artifacts and no artifact is currently shown
-            if (this.artifactsByDetailId.has(message.ID) && !this.showArtifactPanel) {
-                const artifactList = this.artifactsByDetailId.get(message.ID);
-                if (artifactList && artifactList.length > 0) {
-                    // Show the LAST (most recent) artifact
-                    this.selectedArtifactId = artifactList[artifactList.length - 1].artifactId;
-                    this.showArtifactPanel = true;
-                    await this.loadArtifactPermissions(this.selectedArtifactId);
-                }
+            // Auto-open artifact panel if NEW artifacts were discovered (not just the triggering message).
+            // When Sage delegates to a sub-agent (e.g., Skip), the artifact is on the sub-agent's
+            // message, not Sage's. Checking only the triggering message would miss delegated artifacts.
+            if (!this.showArtifactPanel) {
+                await this.autoOpenNewArtifact(artifactIdsBefore);
             }
             // Remove task from ActiveTasksService (clears spinner in conversation list)
             const task = this.activeTasks.getByConversationDetailId(message.ID);
@@ -1260,6 +1331,7 @@ export class ConversationChatAreaComponent {
         }
         catch (error) {
             console.error(`Error handling message completion for ${message.ID}:`, error);
+            this.cdr.detectChanges();
         }
     }
     async onAgentResponse(event) {
@@ -1277,18 +1349,13 @@ export class ConversationChatAreaComponent {
         if (event.agentResult?.agentRun?.ID) {
             await this.addAgentRunToMap(event.message.ID, event.agentResult.agentRun.ID, true); // forceRefresh = true
         }
+        // Snapshot artifact IDs before reload to detect newly created artifacts
+        const artifactIdsBefore = this.collectAllArtifactIds();
         // Reload artifact mapping for this message to pick up newly created artifacts
         await this.reloadArtifactsForMessage(event.message.ID);
-        // Auto-open artifact panel if this message has artifacts and no artifact is currently shown
-        if (this.artifactsByDetailId.has(event.message.ID) && !this.showArtifactPanel) {
-            const artifactList = this.artifactsByDetailId.get(event.message.ID);
-            if (artifactList && artifactList.length > 0) {
-                // Show the LAST (most recent) artifact - uses display data, no lazy load needed
-                this.selectedArtifactId = artifactList[artifactList.length - 1].artifactId;
-                this.showArtifactPanel = true;
-                // Load permissions for the new artifact
-                await this.loadArtifactPermissions(this.selectedArtifactId);
-            }
+        // Auto-open artifact panel if NEW artifacts were discovered
+        if (!this.showArtifactPanel) {
+            await this.autoOpenNewArtifact(artifactIdsBefore);
         }
         // Force change detection to update the UI
         this.cdr.detectChanges();
@@ -1331,9 +1398,11 @@ export class ConversationChatAreaComponent {
         }
     }
     /**
-     * Reload artifacts for a specific message ID
-     * Called after an artifact is created to update the UI immediately
-     * Invalidates and refreshes the conversation cache
+     * Reload artifacts for a conversation, triggered by a specific message ID.
+     * Processes ALL messages in the conversation (not just the trigger message)
+     * so that artifacts from delegated sub-agent messages are also picked up.
+     * Called after an artifact is created to update the UI immediately.
+     * Invalidates and refreshes the conversation cache.
      */
     async reloadArtifactsForMessage(conversationDetailId) {
         LogStatusEx({ message: `🔄 Reloading artifacts for message ${conversationDetailId}`, verboseOnly: true });
@@ -1351,7 +1420,7 @@ export class ConversationChatAreaComponent {
             // Use optimized single query to reload all conversation data
             const result = await rq.RunQuery({
                 QueryName: 'GetConversationComplete',
-                CategoryPath: '/MJ/Conversations',
+                CategoryPath: 'MJ/Conversations',
                 Parameters: { ConversationID: detail.ConversationID }
             }, this.currentUser);
             if (!result.Success || !result.Results) {
@@ -1362,47 +1431,60 @@ export class ConversationChatAreaComponent {
             // Update cache with fresh data
             const conversationData = result.Results;
             this.conversationDataCache.set(detail.ConversationID, conversationData);
-            // Find the specific conversation detail we're reloading and update its artifacts
+            // Process ALL messages in the conversation to pick up artifacts from
+            // delegated sub-agent messages (e.g., when Sage delegates to Skip,
+            // the artifact is on Skip's message, not Sage's)
             for (const row of conversationData) {
-                if (row.ID === conversationDetailId) {
-                    const parsed = parseConversationDetailComplete(row);
-                    // Clear existing artifacts for this detail and rebuild
-                    this.artifactsByDetailId.delete(conversationDetailId);
-                    this.systemArtifactsByDetailId.delete(conversationDetailId);
-                    if (parsed.artifacts.length > 0) {
-                        const artifactList = [];
-                        const systemArtifactList = [];
-                        for (const artifactData of parsed.artifacts) {
-                            const lazyInfo = new LazyArtifactInfo(artifactData, this.currentUser);
-                            // Separate system-only artifacts from user-visible artifacts
-                            if (artifactData.Visibility === 'System Only') {
-                                systemArtifactList.push(lazyInfo);
-                            }
-                            else {
-                                artifactList.push(lazyInfo);
-                            }
-                            LogStatusEx({ message: `✅ Loaded artifact ${artifactData.ArtifactID} v${artifactData.VersionNumber} for message ${conversationDetailId}`, verboseOnly: true });
-                        }
-                        // Add to appropriate maps
-                        if (artifactList.length > 0) {
-                            this.artifactsByDetailId.set(conversationDetailId, artifactList);
-                        }
-                        if (systemArtifactList.length > 0) {
-                            this.systemArtifactsByDetailId.set(conversationDetailId, systemArtifactList);
-                        }
-                    }
-                    // Create new Map reference to trigger Angular change detection
-                    this.artifactsByDetailId = new Map(this.artifactsByDetailId);
-                    // Update artifact count
-                    this.artifactCount = this.calculateUniqueArtifactCount();
-                    break; // Found and updated the target message
-                }
+                this.updateArtifactsForRow(row);
             }
+            // Create new Map reference to trigger Angular change detection
+            this.artifactsByDetailId = new Map(this.artifactsByDetailId);
+            this._combinedArtifactsMap = null; // Clear cache so effectiveArtifactsMap rebuilds
+            // Update artifact count
+            this.artifactCount = this.calculateUniqueArtifactCount();
+            this.updateArtifactCountDisplay();
         }
         catch (error) {
             console.error('Failed to reload artifacts for message:', error);
         }
     }
+    /**
+     * Update artifact maps for a single conversation detail row.
+     * Clears existing entries for the row and rebuilds from parsed data.
+     */
+    updateArtifactsForRow(row) {
+        const rowId = row.ID;
+        if (!rowId) {
+            return;
+        }
+        const parsed = parseConversationDetailComplete(row);
+        // Clear existing artifacts for this detail and rebuild
+        this.artifactsByDetailId.delete(rowId);
+        this.systemArtifactsByDetailId.delete(rowId);
+        if (parsed.artifacts.length === 0) {
+            return;
+        }
+        const artifactList = [];
+        const systemArtifactList = [];
+        for (const artifactData of parsed.artifacts) {
+            const lazyInfo = new LazyArtifactInfo(artifactData, this.currentUser);
+            // Separate system-only artifacts from user-visible artifacts
+            if (artifactData.Visibility === 'System Only') {
+                systemArtifactList.push(lazyInfo);
+            }
+            else {
+                artifactList.push(lazyInfo);
+            }
+            LogStatusEx({ message: `✅ Loaded artifact ${artifactData.ArtifactID} v${artifactData.VersionNumber} for message ${rowId}`, verboseOnly: true });
+        }
+        // Add to appropriate maps
+        if (artifactList.length > 0) {
+            this.artifactsByDetailId.set(rowId, artifactList);
+        }
+        if (systemArtifactList.length > 0) {
+            this.systemArtifactsByDetailId.set(rowId, systemArtifactList);
+        }
+    }
     openProjectSelector() {
         this.showProjectSelector = true;
     }
@@ -1413,18 +1495,19 @@ export class ConversationChatAreaComponent {
         this.showArtifactsModal = true;
     }
     /**
-     * Calculate count of unique artifacts (not versions)
-     * Works with LazyArtifactInfo - uses artifactId from display data
-     * Respects showSystemArtifacts toggle to update count dynamically
+     * Recompute the cached artifactCountDisplay from the effective artifacts map.
+     * Must be called whenever artifactsByDetailId, systemArtifactsByDetailId,
+     * or showSystemArtifacts changes, instead of using a getter that can produce
+     * different values between Angular change-detection passes (NG0100).
      */
-    get artifactCountDisplay() {
+    updateArtifactCountDisplay() {
         const uniqueArtifactIds = new Set();
         for (const artifactList of this.effectiveArtifactsMap.values()) {
             for (const info of artifactList) {
                 uniqueArtifactIds.add(info.artifactId);
             }
         }
-        return uniqueArtifactIds.size;
+        this.artifactCountDisplay = uniqueArtifactIds.size;
     }
     /**
      * Calculate count of unique artifacts (not versions) - user-visible only
@@ -1439,6 +1522,39 @@ export class ConversationChatAreaComponent {
         }
         return uniqueArtifactIds.size;
     }
+    /**
+     * Collect all currently known artifact IDs across all messages.
+     * Used as a "before" snapshot to detect newly created artifacts after a reload.
+     */
+    collectAllArtifactIds() {
+        const ids = new Set();
+        for (const artifactList of this.artifactsByDetailId.values()) {
+            for (const info of artifactList) {
+                ids.add(info.artifactId);
+            }
+        }
+        return ids;
+    }
+    /**
+     * Auto-open the artifact panel for the most recent NEW artifact.
+     * Compares current artifacts against a pre-reload snapshot to find
+     * only artifacts that were just discovered (avoiding re-opening for old artifacts).
+     * Searches artifactsByDetailId directly rather than iterating this.messages,
+     * because reloadMessagesForActiveConversation can temporarily remove messages
+     * from this.messages during concurrent operations.
+     */
+    async autoOpenNewArtifact(artifactIdsBefore) {
+        for (const [detailId, artifactList] of this.artifactsByDetailId) {
+            const newArtifact = artifactList.find(a => !artifactIdsBefore.has(a.artifactId));
+            if (newArtifact) {
+                this.selectedArtifactId = newArtifact.artifactId;
+                this.showArtifactPanel = true;
+                await this.loadArtifactPermissions(newArtifact.artifactId);
+                LogStatusEx({ message: `🎨 Auto-opening new artifact ${newArtifact.artifactId} from detail ${detailId}`, verboseOnly: true });
+                return;
+            }
+        }
+    }
     /**
      * Get the effective artifacts map based on showSystemArtifacts toggle
      * Combines user-visible and system artifacts when toggle is on
@@ -1480,6 +1596,7 @@ export class ConversationChatAreaComponent {
     toggleSystemArtifacts() {
         this.showSystemArtifacts = !this.showSystemArtifacts;
         this._combinedArtifactsMap = null; // Clear cache
+        this.updateArtifactCountDisplay();
         this.cdr.detectChanges(); // Force update
     }
     /**
@@ -1707,29 +1824,30 @@ export class ConversationChatAreaComponent {
         this.cdr.detectChanges();
     }
     async onArtifactCreated(data) {
-        // Reload artifacts to get full entities
+        // Snapshot artifact IDs before reload to detect newly created artifacts
+        const artifactIdsBefore = this.collectAllArtifactIds();
+        // Reload artifacts to get full entities (processes ALL messages in the conversation)
         await this.reloadArtifactsForMessage(data.conversationDetailId);
-        const artifactList = this.artifactsByDetailId.get(data.conversationDetailId);
         // Auto-open artifact panel if no artifact currently shown
         if (!this.showArtifactPanel) {
-            if (artifactList && artifactList.length > 0) {
-                // Show the LAST (most recent) artifact - use actual ID from map, not empty event data
-                this.selectedArtifactId = artifactList[artifactList.length - 1].artifactId;
-                this.showArtifactPanel = true;
-                // Load permissions for the new artifact
-                await this.loadArtifactPermissions(this.selectedArtifactId);
-            }
+            // Use robust auto-open that checks ALL messages for new artifacts.
+            // When a sub-agent (e.g., Skip) creates an artifact on a different ConversationDetail
+            // than the one specified in the event, checking only data.conversationDetailId would miss it.
+            await this.autoOpenNewArtifact(artifactIdsBefore);
         }
-        else if (this.selectedArtifactId && artifactList && artifactList.length > 0) {
+        else if (this.selectedArtifactId) {
             // Panel is already open - check if new artifact is a new version of currently displayed artifact
-            const currentArtifact = artifactList.find(a => a.artifactId === this.selectedArtifactId);
-            if (currentArtifact) {
-                // New version of the same artifact - refresh to show latest version
-                const latestVersion = artifactList[artifactList.length - 1];
-                this.artifactViewerRefresh$.next({
-                    artifactId: latestVersion.artifactId,
-                    versionNumber: latestVersion.versionNumber
-                });
+            const artifactList = this.artifactsByDetailId.get(data.conversationDetailId);
+            if (artifactList && artifactList.length > 0) {
+                const currentArtifact = artifactList.find(a => a.artifactId === this.selectedArtifactId);
+                if (currentArtifact) {
+                    // New version of the same artifact - refresh to show latest version
+                    const latestVersion = artifactList[artifactList.length - 1];
+                    this.artifactViewerRefresh$.next({
+                        artifactId: latestVersion.artifactId,
+                        versionNumber: latestVersion.versionNumber
+                    });
+                }
             }
         }
         // Force change detection to update the UI immediately
@@ -1772,6 +1890,7 @@ export class ConversationChatAreaComponent {
             this.showCollectionPicker = false;
             this.collectionPickerArtifactId = null;
             this.collectionPickerExcludedIds = [];
+            this.cdr.detectChanges();
         }
     }
     onCollectionPickerCancelled() {
@@ -1936,6 +2055,10 @@ export class ConversationChatAreaComponent {
         // Pass the event up to the parent component (workspace or explorer wrapper)
         this.openEntityRecord.emit(event);
     }
+    onNavigationRequest(event) {
+        // Pass the event up to the parent component for app-level navigation
+        this.navigationRequest.emit(event);
+    }
     viewTestRun(testRunId) {
         // Open the test run record in the entity viewer
         const compositeKey = new CompositeKey();
@@ -1957,8 +2080,9 @@ export class ConversationChatAreaComponent {
         };
         const dialogRef = this.dialogService.open({
             content: TestFeedbackDialogComponent,
+            title: 'Provide Test Feedback',
             width: 600,
-            height: 680
+            minHeight: 500
         });
         const dialogInstance = dialogRef.content.instance;
         dialogInstance.data = dialogData;
@@ -2022,6 +2146,7 @@ export class ConversationChatAreaComponent {
         if (artifact) {
             this.artifactToShare = artifact;
             this.isArtifactShareModalOpen = true;
+            this.cdr.detectChanges();
         }
     }
     /**
@@ -2030,6 +2155,7 @@ export class ConversationChatAreaComponent {
     onArtifactShareModalClose() {
         this.isArtifactShareModalOpen = false;
         this.artifactToShare = null;
+        this.cdr.detectChanges();
     }
     /**
      * Handle successful share - refresh permissions
@@ -2041,6 +2167,7 @@ export class ConversationChatAreaComponent {
         if (this.selectedArtifactId) {
             await this.loadArtifactPermissions(this.selectedArtifactId);
         }
+        this.cdr.detectChanges();
     }
     // Scroll functionality (pattern from skip-chat)
     checkScroll() {
@@ -2085,32 +2212,38 @@ export class ConversationChatAreaComponent {
         }
     }
     /**
-     * Detect in-progress agent runs/tasks and reconnect to their streaming updates
-     * Called after loading a conversation to resume progress tracking
+     * Detect in-progress agent runs/tasks and reconnect to their streaming updates.
+     * Called after loading a conversation to resume progress tracking.
+     *
+     * Also handles the "timing gap" scenario: if an agent completed between the page
+     * refresh and the WebSocket reconnection, the completion PubSub event is lost.
+     * We catch this by comparing message status against the agent run status from
+     * the database — if the run is already complete, we handle the completion immediately.
      */
     async detectAndReconnectToInProgressRuns(conversationId) {
-        // Check for in-progress messages
         const inProgressMessages = this.messages.filter(m => m.Status === 'In-Progress' && m.Role === 'AI');
         if (inProgressMessages.length === 0) {
             return;
         }
-        LogStatusEx({ message: `🔄 Found ${inProgressMessages.length} in-progress messages, reconnecting...`, verboseOnly: true });
-        // For each in-progress message, check if there's an active agent run
+        LogStatusEx({ message: `🔄 Found ${inProgressMessages.length} in-progress messages, checking status...`, verboseOnly: true });
+        const completedStatuses = ['Completed', 'Failed', 'Error', 'Cancelled'];
         for (const message of inProgressMessages) {
-            if (message.AgentID) {
-                // Check agent state service for this run
-                const agentRun = this.agentRunsByDetailId.get(message.ID);
-                if (agentRun && agentRun.Status === 'Running') {
-                    LogStatusEx({ message: `🔌 Reconnecting to agent run ${agentRun.ID} for message ${message.ID}`, verboseOnly: true });
-                    // Agent state service polling will automatically pick this up
-                    // The WebSocket subscription is already active via PushStatusUpdates()
-                    // No additional action needed - just log for visibility
-                }
+            const agentRun = this.agentRunsByDetailId.get(message.ID);
+            if (!agentRun) {
+                // No agent run yet — fire-and-forget may not have created it.
+                // Polling will pick this up once the server creates the run.
+                LogStatusEx({ message: `⏳ No agent run found for in-progress message ${message.ID}, waiting for server...`, verboseOnly: true });
+                continue;
+            }
+            if (completedStatuses.includes(agentRun.Status)) {
+                // Agent completed during the WebSocket reconnection gap — handle now
+                LogStatusEx({ message: `🔄 Agent run ${agentRun.ID} already completed (${agentRun.Status}) for message ${message.ID}, handling catch-up...`, verboseOnly: true });
+                await this.handleMessageCompletion(message, agentRun.ID);
+            }
+            else {
+                LogStatusEx({ message: `🔌 Agent run ${agentRun.ID} still ${agentRun.Status} for message ${message.ID}, WebSocket will receive updates`, verboseOnly: true });
             }
         }
-        // Agent state service is already polling via startPolling() in onConversationChanged()
-        // WebSocket subscription is already active via message-input component's subscribeToPushStatus()
-        // Both will automatically receive updates for these in-progress runs
     }
     /**
      * Handle pending artifact navigation from collection
@@ -2216,7 +2349,7 @@ export class ConversationChatAreaComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.scrollContainer = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.artifactViewerComponent = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.messageInputComponents = _t);
-        } }, inputs: { environmentId: "environmentId", currentUser: "currentUser", conversationId: "conversationId", conversation: "conversation", threadId: "threadId", isNewConversation: "isNewConversation", pendingMessage: "pendingMessage", pendingAttachments: "pendingAttachments", pendingArtifactId: "pendingArtifactId", pendingArtifactVersionNumber: "pendingArtifactVersionNumber", showSidebarToggle: "showSidebarToggle" }, outputs: { conversationRenamed: "conversationRenamed", openEntityRecord: "openEntityRecord", taskClicked: "taskClicked", artifactLinkClicked: "artifactLinkClicked", sidebarToggleClicked: "sidebarToggleClicked", conversationCreated: "conversationCreated", threadOpened: "threadOpened", threadClosed: "threadClosed", pendingArtifactConsumed: "pendingArtifactConsumed", pendingMessageConsumed: "pendingMessageConsumed", pendingMessageRequested: "pendingMessageRequested" }, standalone: false, decls: 16, vars: 21, consts: [["scrollContainer", ""], ["messageInput", ""], [1, "chat-area"], [1, "chat-header"], [1, "chat-content-area"], [1, "chat-messages-pane"], [3, "currentUser", "disabled", "showSidebarToggle"], [1, "conversation-loading-state"], [1, "chat-messages-wrapper"], [3, "saved", "cancelled", "isOpen", "artifact", "currentUser"], [3, "parentMessageId", "conversationId", "currentUser"], [3, "cancelled", "exported", "isVisible", "conversation", "currentUser"], [3, "cancelled", "membersChanged", "isVisible", "conversation", "currentUser"], [1, "modal-overlay"], [3, "isOpen", "environmentId", "currentUser", "excludeCollectionIds"], [3, "imageUrl", "alt", "fileName", "visible"], [1, "chat-info"], ["title", "Show conversations", 1, "sidebar-toggle-btn"], [1, "chat-title"], ["title", "Assign to project", 1, "project-tag"], ["title", "View Test Run", 1, "test-indicator"], [3, "togglePanel", "agentSelected", "conversationId", "currentUser"], [1, "chat-actions", "chat-actions-buttons"], ["title", "View artifacts", 1, "artifact-indicator"], ["title", "View members", 1, "chat-members"], ["title", "Export conversation", 1, "action-btn", 3, "click"], [1, "fas", "fa-download"], [1, "btn-label"], [1, "action-btn", "share-btn", 3, "click", "title"], [1, "fas", "fa-share-nodes"], ["title", "Show conversations", 1, "sidebar-toggle-btn", 3, "click"], [1, "fas", "fa-table-columns"], ["title", "Assign to project", 1, "project-tag", 3, "click"], [1, "fas", "fa-folder"], ["title", "View Test Run", 1, "test-indicator", 3, "click"], [1, "fas", "fa-flask"], ["title", "View artifacts", 1, "artifact-indicator", 3, "click"], [1, "fas", "fa-cube"], [1, "artifact-badge"], ["title", "View members", 1, "chat-members", 3, "click"], [1, "fas", "fa-users"], [1, "members-badge"], [3, "sidebarToggleClicked", "messageSent", "currentUser", "disabled", "showSidebarToggle"], ["text", "Loading conversation...", "size", "large"], [1, "upload-indicator-overlay"], [1, "chat-messages-container", 3, "scroll"], [3, "replyInThread", "viewThread", "retryMessage", "testFeedbackMessage", "artifactClicked", "messageEdited", "openEntityRecord", "suggestedResponseSelected", "attachmentClicked", "messages", "conversation", "currentUser", "isProcessing", "artifactMap", "agentRunMap", "ratingsMap", "userAvatarMap", "attachmentsMap"], [1, "scroll-to-bottom-icon", 2, "left", "50%"], [1, "chat-input-container"], [1, "loading-peripheral-placeholder"], [1, "message-input-container-wrapper"], ["size", "medium", 3, "text"], [1, "scroll-to-bottom-icon", 2, "left", "50%", 3, "click"], [1, "fas", "fa-arrow-down"], ["text", "Loading conversation data...", "size", "medium"], [3, "hidden", "conversationId", "conversationName", "currentUser", "conversationHistory", "artifactsByDetailId", "systemArtifactsByDetailId", "agentRunsByDetailId", "inProgressMessageIds", "disabled", "enableAttachments", "maxAttachments", "maxAttachmentSizeBytes", "acceptedFileTypes", "initialMessage", "initialAttachments"], [3, "messageSent", "agentResponse", "agentRunDetected", "agentRunUpdate", "messageComplete", "artifactCreated", "conversationRenamed", "intentCheckStarted", "intentCheckCompleted", "uploadStateChanged", "hidden", "conversationId", "conversationName", "currentUser", "conversationHistory", "artifactsByDetailId", "systemArtifactsByDetailId", "agentRunsByDetailId", "inProgressMessageIds", "disabled", "enableAttachments", "maxAttachments", "maxAttachmentSizeBytes", "acceptedFileTypes", "initialMessage", "initialAttachments"], [1, "resize-handle"], [1, "chat-artifact-pane"], [3, "closed", "saveToCollectionRequested", "navigateToLink", "shareRequested", "maximizeToggled", "openEntityRecord", "artifactId", "currentUser", "environmentId", "versionNumber", "viewContext", "canShare", "canEdit", "isMaximized", "refreshTrigger"], [1, "resize-handle", 3, "mousedown", "touchstart"], [3, "closed", "replyAdded", "parentMessageId", "conversationId", "currentUser"], [1, "modal-overlay", 3, "click"], [1, "modal-content", "project-selector-modal", 3, "click"], [1, "modal-header"], [1, "modal-close-btn", 3, "click"], [1, "fas", "fa-times"], [1, "modal-body"], [3, "projectSelected", "environmentId", "currentUser", "selectedProjectId"], [1, "modal-content", "artifacts-modal", 3, "click"], [1, "modal-header-actions"], ["title", "Toggle system artifacts visibility", 1, "toggle-system-btn", 3, "active"], [1, "modal-body", "artifacts-grid"], [1, "empty-state"], [1, "artifact-modal-card", 3, "expanded", "system-artifact"], ["title", "Toggle system artifacts visibility", 1, "toggle-system-btn", 3, "click"], [1, "fas", "fa-cog"], [1, "fas", "fa-cube", 2, "font-size", "48px", "color", "#D1D5DB", "margin-bottom", "16px"], [2, "color", "#6B7280", "font-size", "14px"], [1, "artifact-modal-card"], [1, "artifact-card-header", 3, "click"], [1, "artifact-modal-icon"], [1, "fas", "fa-file-code"], [1, "artifact-modal-info"], [1, "artifact-modal-title"], [1, "artifact-modal-meta"], [1, "expand-btn"], [1, "artifact-modal-action"], [1, "fas", "fa-external-link-alt"], [1, "artifact-versions-list"], [1, "expand-btn", 3, "click"], [1, "fas"], [1, "artifact-version-item"], [1, "artifact-version-item", 3, "click"], [1, "version-badge"], [1, "version-open-text"], [1, "fas", "fa-arrow-right"], [3, "saved", "cancelled", "isOpen", "environmentId", "currentUser", "excludeCollectionIds"], [3, "closed", "imageUrl", "alt", "fileName", "visible"]], template: function ConversationChatAreaComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { environmentId: "environmentId", currentUser: "currentUser", conversationId: "conversationId", conversation: "conversation", threadId: "threadId", isNewConversation: "isNewConversation", pendingMessage: "pendingMessage", pendingAttachments: "pendingAttachments", pendingArtifactId: "pendingArtifactId", pendingArtifactVersionNumber: "pendingArtifactVersionNumber", showSidebarToggle: "showSidebarToggle" }, outputs: { conversationRenamed: "conversationRenamed", openEntityRecord: "openEntityRecord", navigationRequest: "navigationRequest", taskClicked: "taskClicked", artifactLinkClicked: "artifactLinkClicked", sidebarToggleClicked: "sidebarToggleClicked", conversationCreated: "conversationCreated", threadOpened: "threadOpened", threadClosed: "threadClosed", pendingArtifactConsumed: "pendingArtifactConsumed", pendingMessageConsumed: "pendingMessageConsumed", pendingMessageRequested: "pendingMessageRequested" }, standalone: false, decls: 16, vars: 21, consts: [["scrollContainer", ""], ["messageInput", ""], [1, "chat-area"], [1, "chat-header"], [1, "chat-content-area"], [1, "chat-messages-pane"], [3, "currentUser", "disabled", "showSidebarToggle"], [1, "conversation-loading-state"], [1, "chat-messages-wrapper"], [3, "saved", "cancelled", "isOpen", "artifact", "currentUser"], [3, "parentMessageId", "conversationId", "currentUser"], [3, "cancelled", "exported", "isVisible", "conversation", "currentUser"], [3, "cancelled", "membersChanged", "isVisible", "conversation", "currentUser"], [1, "modal-overlay"], [3, "isOpen", "environmentId", "currentUser", "excludeCollectionIds"], [3, "imageUrl", "alt", "fileName", "visible"], [1, "chat-info"], ["title", "Show conversations", 1, "sidebar-toggle-btn"], [1, "chat-title"], ["title", "Assign to project", 1, "project-tag"], ["title", "View Test Run", 1, "test-indicator"], [3, "togglePanel", "agentSelected", "conversationId", "currentUser"], [1, "chat-actions", "chat-actions-buttons"], ["title", "View artifacts", 1, "artifact-indicator"], ["title", "View members", 1, "chat-members"], ["title", "Export conversation", 1, "action-btn", 3, "click"], [1, "fas", "fa-download"], [1, "btn-label"], [1, "action-btn", "share-btn", 3, "click", "title"], [1, "fas", "fa-share-nodes"], ["title", "Show conversations", 1, "sidebar-toggle-btn", 3, "click"], [1, "fas", "fa-table-columns"], ["title", "Assign to project", 1, "project-tag", 3, "click"], [1, "fas", "fa-folder"], ["title", "View Test Run", 1, "test-indicator", 3, "click"], [1, "fas", "fa-flask"], ["title", "View artifacts", 1, "artifact-indicator", 3, "click"], [1, "fas", "fa-cube"], [1, "artifact-badge"], ["title", "View members", 1, "chat-members", 3, "click"], [1, "fas", "fa-users"], [1, "members-badge"], [3, "sidebarToggleClicked", "messageSent", "currentUser", "disabled", "showSidebarToggle"], ["text", "Loading conversation...", "size", "large"], [1, "upload-indicator-overlay"], [1, "chat-messages-container", 3, "scroll"], [3, "replyInThread", "viewThread", "retryMessage", "testFeedbackMessage", "artifactClicked", "messageEdited", "openEntityRecord", "suggestedResponseSelected", "attachmentClicked", "messages", "conversation", "currentUser", "isProcessing", "artifactMap", "agentRunMap", "ratingsMap", "userAvatarMap", "attachmentsMap"], [1, "scroll-to-bottom-icon", 2, "left", "50%"], [1, "chat-input-container"], [1, "loading-peripheral-placeholder"], [1, "message-input-container-wrapper"], ["size", "medium", 3, "text"], [1, "scroll-to-bottom-icon", 2, "left", "50%", 3, "click"], [1, "fas", "fa-arrow-down"], ["text", "Loading conversation data...", "size", "medium"], [3, "hidden", "conversationId", "conversationName", "currentUser", "conversationHistory", "artifactsByDetailId", "systemArtifactsByDetailId", "agentRunsByDetailId", "inProgressMessageIds", "disabled", "enableAttachments", "maxAttachments", "maxAttachmentSizeBytes", "acceptedFileTypes", "initialMessage", "initialAttachments"], [3, "messageSent", "agentResponse", "agentRunDetected", "agentRunUpdate", "messageComplete", "artifactCreated", "conversationRenamed", "intentCheckStarted", "intentCheckCompleted", "uploadStateChanged", "hidden", "conversationId", "conversationName", "currentUser", "conversationHistory", "artifactsByDetailId", "systemArtifactsByDetailId", "agentRunsByDetailId", "inProgressMessageIds", "disabled", "enableAttachments", "maxAttachments", "maxAttachmentSizeBytes", "acceptedFileTypes", "initialMessage", "initialAttachments"], [1, "resize-handle"], [1, "chat-artifact-pane"], [3, "closed", "saveToCollectionRequested", "navigateToLink", "shareRequested", "maximizeToggled", "openEntityRecord", "navigationRequest", "artifactId", "currentUser", "environmentId", "versionNumber", "viewContext", "canShare", "canEdit", "isMaximized", "refreshTrigger"], [1, "resize-handle", 3, "mousedown", "touchstart"], [3, "closed", "replyAdded", "parentMessageId", "conversationId", "currentUser"], [1, "modal-overlay", 3, "click"], [1, "modal-content", "project-selector-modal", 3, "click"], [1, "modal-header"], [1, "modal-close-btn", 3, "click"], [1, "fas", "fa-times"], [1, "modal-body"], [3, "projectSelected", "environmentId", "currentUser", "selectedProjectId"], [1, "modal-content", "artifacts-modal", 3, "click"], [1, "modal-header-actions"], ["title", "Toggle system artifacts visibility", 1, "toggle-system-btn", 3, "active"], [1, "modal-body", "artifacts-grid"], [1, "empty-state"], [1, "artifact-modal-card", 3, "expanded", "system-artifact"], ["title", "Toggle system artifacts visibility", 1, "toggle-system-btn", 3, "click"], [1, "fas", "fa-cog"], [1, "fas", "fa-cube", 2, "font-size", "48px", "color", "#D1D5DB", "margin-bottom", "16px"], [2, "color", "#6B7280", "font-size", "14px"], [1, "artifact-modal-card"], [1, "artifact-card-header", 3, "click"], [1, "artifact-modal-icon"], [1, "fas", "fa-file-code"], [1, "artifact-modal-info"], [1, "artifact-modal-title"], [1, "artifact-modal-meta"], [1, "expand-btn"], [1, "artifact-modal-action"], [1, "fas", "fa-external-link-alt"], [1, "artifact-versions-list"], [1, "expand-btn", 3, "click"], [1, "fas"], [1, "artifact-version-item"], [1, "artifact-version-item", 3, "click"], [1, "version-badge"], [1, "version-open-text"], [1, "fas", "fa-arrow-right"], [3, "saved", "cancelled", "isOpen", "environmentId", "currentUser", "excludeCollectionIds"], [3, "closed", "imageUrl", "alt", "fileName", "visible"]], template: function ConversationChatAreaComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 2);
             i0.ɵɵconditionalCreate(1, ConversationChatAreaComponent_Conditional_1_Template, 20, 15, "div", 3);
             i0.ɵɵelementStart(2, "div", 4)(3, "div", 5);
@@ -2266,7 +2399,7 @@ export class ConversationChatAreaComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ConversationChatAreaComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-conversation-chat-area', template: "<div class=\"chat-area\">\n  <!-- Fixed Header -->\n  @if (conversation) {\n    <div class=\"chat-header\">\n      <div class=\"chat-info\" [class.with-sidebar-toggle]=\"showSidebarToggle\">\n        @if (showSidebarToggle) {\n          <button class=\"sidebar-toggle-btn\"\n            (click)=\"sidebarToggleClicked.emit()\"\n            title=\"Show conversations\">\n            <i class=\"fas fa-table-columns\"></i>\n          </button>\n        }\n        <div class=\"chat-title\">{{ conversation.Name }}</div>\n        @if (conversation.ProjectID) {\n          <button class=\"project-tag\" (click)=\"openProjectSelector()\" title=\"Assign to project\">\n            <i class=\"fas fa-folder\"></i>\n            <span>{{ conversation.Project || 'Project' }}</span>\n          </button>\n        }\n        @if (conversation.TestRunID) {\n          <button class=\"test-indicator\" (click)=\"viewTestRun(conversation.TestRunID)\" title=\"View Test Run\">\n            <i class=\"fas fa-flask\"></i>\n            <span>Test</span>\n          </button>\n        }\n        <mj-active-agent-indicator\n          [conversationId]=\"conversation.ID\"\n          [currentUser]=\"currentUser\"\n          (togglePanel)=\"onToggleAgentPanel()\"\n          (agentSelected)=\"onAgentSelected($event)\">\n        </mj-active-agent-indicator>\n      </div>\n      <div class=\"chat-actions chat-actions-buttons\">\n        @if (artifactCountDisplay > 0) {\n          <button class=\"artifact-indicator\" (click)=\"viewArtifacts()\" title=\"View artifacts\">\n            <i class=\"fas fa-cube\"></i>\n            <span class=\"artifact-badge\">{{ artifactCountDisplay }}</span>\n          </button>\n        }\n        @if (memberCount > 1) {\n          <button class=\"chat-members\" (click)=\"toggleMembersModal()\" title=\"View members\">\n            <i class=\"fas fa-users\"></i>\n            <span class=\"members-badge\">{{ memberCount }}</span>\n          </button>\n        }\n        <button class=\"action-btn\" (click)=\"exportConversation()\" title=\"Export conversation\">\n          <i class=\"fas fa-download\"></i>\n          <span class=\"btn-label\">Export</span>\n        </button>\n        <button class=\"action-btn share-btn\"\n          [class.shared]=\"isShared\"\n          (click)=\"shareConversation()\"\n          [title]=\"isShared ? 'Manage sharing' : 'Share conversation'\">\n          <i class=\"fas fa-share-nodes\"></i>\n          <span class=\"btn-label\">Share</span>\n        </button>\n        <mj-active-agent-indicator\n          [conversationId]=\"conversation.ID\"\n          [currentUser]=\"currentUser\"\n          (togglePanel)=\"onToggleAgentPanel()\"\n          (agentSelected)=\"onAgentSelected($event)\">\n        </mj-active-agent-indicator>\n      </div>\n    </div>\n  }\n\n  <!-- Messages and Artifact Split Layout -->\n  <div class=\"chat-content-area\">\n    <!-- Messages Pane -->\n    <div class=\"chat-messages-pane\"\n      [class.full-width]=\"!showArtifactPanel\"\n      [class.hidden]=\"isArtifactPaneMaximized\">\n      @if (isNewConversation || !conversationId) {\n        <!-- Empty State - No conversation selected OR new unsaved conversation -->\n        <mj-conversation-empty-state\n          [currentUser]=\"currentUser\"\n          [disabled]=\"isProcessing\"\n          [showSidebarToggle]=\"showSidebarToggle\"\n          (sidebarToggleClicked)=\"sidebarToggleClicked.emit()\"\n          (messageSent)=\"onEmptyStateMessageSent($event)\">\n        </mj-conversation-empty-state>\n      } @else if (isLoadingConversation) {\n        <!-- Loading State - Show centered spinner while conversation loads -->\n        <div class=\"conversation-loading-state\">\n          <mj-loading text=\"Loading conversation...\" size=\"large\"></mj-loading>\n        </div>\n      } @else {\n        <!-- Normal Message View -->\n        <div class=\"chat-messages-wrapper\">\n          <!-- Upload Indicator Overlay (centered in conversation area) -->\n          @if (isUploadingAttachments) {\n            <div class=\"upload-indicator-overlay\">\n              <mj-loading [text]=\"uploadingMessage\" size=\"medium\"></mj-loading>\n            </div>\n          }\n          <div class=\"chat-messages-container\" #scrollContainer (scroll)=\"checkScroll()\">\n            <mj-conversation-message-list\n              [messages]=\"messages\"\n              [conversation]=\"conversation\"\n              [currentUser]=\"currentUser\"\n              [isProcessing]=\"isProcessing\"\n              [artifactMap]=\"effectiveArtifactsMap\"\n              [agentRunMap]=\"agentRunsByDetailId\"\n              [ratingsMap]=\"ratingsByDetailId\"\n              [userAvatarMap]=\"userAvatarMap\"\n              [attachmentsMap]=\"attachmentsByDetailId\"\n              (replyInThread)=\"onReplyInThread($event)\"\n              (viewThread)=\"onViewThread($event)\"\n              (retryMessage)=\"onRetryMessage($event)\"\n              (testFeedbackMessage)=\"onTestFeedbackMessage($event)\"\n              (artifactClicked)=\"onArtifactClicked($event)\"\n              (messageEdited)=\"onMessageEdited($event)\"\n              (openEntityRecord)=\"onOpenEntityRecord($event)\"\n              (suggestedResponseSelected)=\"onSuggestedResponseSelected($event)\"\n              (attachmentClicked)=\"onAttachmentClicked($event)\">\n            </mj-conversation-message-list>\n\n            <!-- Scroll to Bottom Icon (positioned within scroll container for proper centering) -->\n            @if (showScrollToBottomIcon && messages && messages.length > 0) {\n              <span class=\"scroll-to-bottom-icon\" style=\"left: 50%;\"\n                (click)=\"scrollToBottomAnimate()\">\n                <i class=\"fas fa-arrow-down\"></i>\n              </span>\n            }\n          </div>\n\n          <!-- Fixed Input Area -->\n          <div class=\"chat-input-container\">\n            @if (isLoadingPeripheralData) {\n              <!-- Loading State -->\n              <div class=\"loading-peripheral-placeholder\">\n                <mj-loading text=\"Loading conversation data...\" size=\"medium\"></mj-loading>\n              </div>\n            } @else {\n              <!-- Input Component - Multiple instances cached, only one visible -->\n              <div class=\"message-input-container-wrapper\">\n                @for (inputRef of getCachedInputs(); track inputRef.conversationId) {\n                  <mj-message-input\n                    #messageInput\n                    [hidden]=\"inputRef.conversationId !== conversationId\"\n                    [conversationId]=\"inputRef.conversationId\"\n                    [conversationName]=\"inputRef.conversationName\"\n                    [currentUser]=\"currentUser\"\n                    [conversationHistory]=\"inputRef.conversationId === conversationId ? messages : []\"\n                    [artifactsByDetailId]=\"inputRef.conversationId === conversationId ? artifactsByDetailId : emptyArtifactsMap\"\n                    [systemArtifactsByDetailId]=\"inputRef.conversationId === conversationId ? systemArtifactsByDetailId : emptyArtifactsMap\"\n                    [agentRunsByDetailId]=\"inputRef.conversationId === conversationId ? agentRunsByDetailId : emptyAgentRunsMap\"\n                    [inProgressMessageIds]=\"inputRef.conversationId === conversationId ? inProgressMessageIds : emptyInProgressIds\"\n                    [disabled]=\"isProcessing\"\n                    [enableAttachments]=\"enableAttachments\"\n                    [maxAttachments]=\"maxAttachments\"\n                    [maxAttachmentSizeBytes]=\"maxAttachmentSizeBytes\"\n                    [acceptedFileTypes]=\"acceptedFileTypes\"\n                    [initialMessage]=\"inputRef.conversationId === conversationId ? pendingMessage : null\"\n                    [initialAttachments]=\"inputRef.conversationId === conversationId ? pendingAttachments : null\"\n                    (messageSent)=\"onMessageSent($event)\"\n                    (agentResponse)=\"onAgentResponse($event)\"\n                    (agentRunDetected)=\"onAgentRunDetected($event)\"\n                    (agentRunUpdate)=\"onAgentRunUpdate($event)\"\n                    (messageComplete)=\"onMessageComplete($event)\"\n                    (artifactCreated)=\"onArtifactCreated($event)\"\n                    (conversationRenamed)=\"onConversationRenamed($event)\"\n                    (intentCheckStarted)=\"onIntentCheckStarted()\"\n                    (intentCheckCompleted)=\"onIntentCheckCompleted()\"\n                    (uploadStateChanged)=\"onUploadStateChanged($event)\">\n                  </mj-message-input>\n                }\n              </div>\n            }\n          </div>\n        </div>\n      }\n    </div>\n\n    <!-- Artifact Viewer Pane -->\n    @if (showArtifactPanel && selectedArtifactId) {\n      @if (!isArtifactPaneMaximized) {\n        <div class=\"resize-handle\" (mousedown)=\"onResizeStart($event)\" (touchstart)=\"onResizeTouchStart($event)\"></div>\n      }\n      <div class=\"chat-artifact-pane\"\n        [style.width.%]=\"artifactPaneWidth\"\n        [class.maximized]=\"isArtifactPaneMaximized\">\n        <mj-artifact-viewer-panel\n          [artifactId]=\"selectedArtifactId\"\n          [currentUser]=\"currentUser\"\n          [environmentId]=\"environmentId\"\n          [versionNumber]=\"selectedVersionNumber\"\n          [viewContext]=\"'conversation'\"\n          [canShare]=\"canShareSelectedArtifact\"\n          [canEdit]=\"canEditSelectedArtifact\"\n          [isMaximized]=\"isArtifactPaneMaximized\"\n          [refreshTrigger]=\"artifactViewerRefresh$\"\n          (closed)=\"onCloseArtifactPanel()\"\n          (saveToCollectionRequested)=\"onSaveToCollectionRequested($event)\"\n          (navigateToLink)=\"onArtifactLinkNavigation($event)\"\n          (shareRequested)=\"onArtifactShareRequested($event)\"\n          (maximizeToggled)=\"toggleMaximizeArtifactPane()\"\n          (openEntityRecord)=\"onOpenEntityRecord($event)\">\n        </mj-artifact-viewer-panel>\n      </div>\n    }\n\n    <!-- Artifact Share Modal -->\n    <mj-artifact-share-modal\n      [isOpen]=\"isArtifactShareModalOpen\"\n      [artifact]=\"artifactToShare\"\n      [currentUser]=\"currentUser\"\n      (saved)=\"onArtifactShared()\"\n      (cancelled)=\"onArtifactShareModalClose()\">\n    </mj-artifact-share-modal>\n  </div>\n</div>\n\n<!-- Thread Panel -->\n@if (threadId) {\n  <mj-thread-panel\n    [parentMessageId]=\"threadId\"\n    [conversationId]=\"conversationId || ''\"\n    [currentUser]=\"currentUser\"\n    (closed)=\"onLocalThreadClosed()\"\n    (replyAdded)=\"onThreadReplyAdded($event)\">\n  </mj-thread-panel>\n}\n\n<!-- Export Modal -->\n<mj-export-modal\n  [isVisible]=\"showExportModal\"\n  [conversation]=\"conversation || undefined\"\n  [currentUser]=\"currentUser\"\n  (cancelled)=\"onExportModalCancelled()\"\n  (exported)=\"onExportModalComplete()\">\n</mj-export-modal>\n\n<!-- Members Modal -->\n<mj-members-modal\n  [isVisible]=\"showMembersModal\"\n  [conversation]=\"conversation || undefined\"\n  [currentUser]=\"currentUser\"\n  (cancelled)=\"showMembersModal = false\"\n  (membersChanged)=\"showMembersModal = false\">\n</mj-members-modal>\n\n<!-- Project Selector Modal -->\n@if (showProjectSelector && conversation) {\n  <div class=\"modal-overlay\" (click)=\"showProjectSelector = false\">\n    <div class=\"modal-content project-selector-modal\" (click)=\"$event.stopPropagation()\">\n      <div class=\"modal-header\">\n        <h3>Assign Project</h3>\n        <button class=\"modal-close-btn\" (click)=\"showProjectSelector = false\">\n          <i class=\"fas fa-times\"></i>\n        </button>\n      </div>\n      <div class=\"modal-body\">\n        <mj-project-selector\n          [environmentId]=\"environmentId\"\n          [currentUser]=\"currentUser\"\n          [selectedProjectId]=\"conversation.ProjectID\"\n          (projectSelected)=\"onProjectSelected($event)\">\n        </mj-project-selector>\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Artifacts Modal -->\n@if (showArtifactsModal) {\n  <div class=\"modal-overlay\" (click)=\"showArtifactsModal = false\">\n    <div class=\"modal-content artifacts-modal\" (click)=\"$event.stopPropagation()\">\n      <div class=\"modal-header\">\n        <h3>Conversation Artifacts</h3>\n        <div class=\"modal-header-actions\">\n          @if (hasSystemArtifacts) {\n            <button class=\"toggle-system-btn\"\n              [class.active]=\"showSystemArtifacts\"\n              (click)=\"toggleSystemArtifacts()\"\n              title=\"Toggle system artifacts visibility\">\n              <i class=\"fas fa-cog\"></i>\n              <span>{{ showSystemArtifacts ? 'Hide' : 'Show' }} System</span>\n            </button>\n          }\n          <button class=\"modal-close-btn\" (click)=\"showArtifactsModal = false\">\n            <i class=\"fas fa-times\"></i>\n          </button>\n        </div>\n      </div>\n      <div class=\"modal-body artifacts-grid\">\n        @if (artifactsByDetailId.size === 0) {\n          <div class=\"empty-state\">\n            <i class=\"fas fa-cube\" style=\"font-size: 48px; color: #D1D5DB; margin-bottom: 16px;\"></i>\n            <p style=\"color: #6B7280; font-size: 14px;\">No artifacts in this conversation yet</p>\n          </div>\n        }\n        @for (artifact of getArtifactsArray(); track artifact.artifactId) {\n          <div class=\"artifact-modal-card\"\n            [class.expanded]=\"expandedArtifactId === artifact.artifactId\"\n            [class.system-artifact]=\"artifact.visibility === 'System Only'\">\n            <!-- Main card header - click to open latest version -->\n            <div class=\"artifact-card-header\" (click)=\"openArtifactFromModal(artifact.artifactId)\">\n              <div class=\"artifact-modal-icon\">\n                <i class=\"fas fa-file-code\"></i>\n              </div>\n              <div class=\"artifact-modal-info\">\n                <div class=\"artifact-modal-title\">{{artifact.name}}</div>\n                <div class=\"artifact-modal-meta\">\n                  @if (artifact.versionCount > 1) {\n                    {{artifact.versionCount}} versions\n                  } @else {\n                    1 version\n                  }\n                </div>\n              </div>\n              @if (artifact.versionCount > 1) {\n                <button class=\"expand-btn\" (click)=\"toggleArtifactExpansion(artifact.artifactId, $event)\">\n                  <i class=\"fas\" [class.fa-chevron-down]=\"expandedArtifactId !== artifact.artifactId\"\n                  [class.fa-chevron-up]=\"expandedArtifactId === artifact.artifactId\"></i>\n                </button>\n              }\n              <div class=\"artifact-modal-action\">\n                <i class=\"fas fa-external-link-alt\"></i>\n              </div>\n            </div>\n\n            <!-- Expanded version list -->\n            @if (expandedArtifactId === artifact.artifactId && artifact.versionCount > 1) {\n              <div class=\"artifact-versions-list\">\n                @for (version of artifact.versions; track version.versionId) {\n                  <div class=\"artifact-version-item\" (click)=\"openArtifactFromModal(artifact.artifactId, version.versionNumber); $event.stopPropagation()\">\n                    <span class=\"version-badge\">v{{version.versionNumber}}</span>\n                    <span class=\"version-open-text\">Open this version</span>\n                    <i class=\"fas fa-arrow-right\"></i>\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Collection Picker Modal -->\n@if (showCollectionPicker) {\n  <mj-artifact-collection-picker-modal\n    [isOpen]=\"showCollectionPicker\"\n    [environmentId]=\"environmentId\"\n    [currentUser]=\"currentUser\"\n    [excludeCollectionIds]=\"collectionPickerExcludedIds\"\n    (saved)=\"onCollectionPickerSaved($event)\"\n    (cancelled)=\"onCollectionPickerCancelled()\">\n  </mj-artifact-collection-picker-modal>\n}\n\n<!-- Image Viewer Modal -->\n@if (showImageViewer) {\n  <mj-image-viewer\n    [imageUrl]=\"selectedImageUrl\"\n    [alt]=\"selectedImageAlt\"\n    [fileName]=\"selectedImageFileName\"\n    [visible]=\"showImageViewer\"\n    (closed)=\"onImageViewerClosed()\">\n  </mj-image-viewer>\n}", styles: [":host {\n  display: flex;\n  width: 100%;\n  height: 100%;\n}\n\n.chat-area {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n\n.chat-header {\n  flex-shrink: 0;\n  padding: 12px 20px;\n  border-bottom: 1px solid #D9D9D9;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 16px;\n  background: #FFF;\n  z-index: 10;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n}\n\n.chat-info {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n  min-width: 0;\n}\n\n/* Sidebar toggle button in header */\n.sidebar-toggle-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  background: transparent;\n  border: none;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  flex-shrink: 0;\n}\n\n.sidebar-toggle-btn:hover {\n  background: rgba(0, 0, 0, 0.08);\n}\n\n.sidebar-toggle-btn:active {\n  background: rgba(0, 0, 0, 0.12);\n}\n\n.sidebar-toggle-btn i {\n  color: #666;\n  font-size: 18px;\n  transition: color 0.15s ease;\n}\n\n.sidebar-toggle-btn:hover i {\n  color: #333;\n}\n\n.chat-title {\n  font-size: 16px;\n  font-weight: 600;\n  color: #333;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.project-tag {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  background: #F4F4F4;\n  border: 1px solid #D9D9D9;\n  border-radius: 16px;\n  font-size: 11px;\n  font-weight: 600;\n  color: #AAA;\n  cursor: pointer;\n  transition: all 0.2s;\n  height: 28px;\n  margin-left: 12px;\n}\n\n.project-tag:hover {\n  background: #D9D9D9;\n  border-color: #AAA;\n}\n\n.project-tag i {\n  font-size: 10px;\n}\n\n.test-indicator {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  background: #FFF8E1;\n  border: 1px solid #FFD54F;\n  border-radius: 16px;\n  font-size: 11px;\n  font-weight: 600;\n  color: #F57C00;\n  cursor: pointer;\n  transition: all 0.2s;\n  height: 28px;\n  margin-left: 8px;\n}\n\n.test-indicator:hover {\n  background: #FFE082;\n  border-color: #FFA000;\n}\n\n.test-indicator i {\n  font-size: 10px;\n}\n\n.chat-members,\n.artifact-indicator {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  padding: 6px 8px;\n  background: transparent;\n  border: 1px solid #E5E7EB;\n  border-radius: 6px;\n  font-size: 14px;\n  color: #6B7280;\n  cursor: pointer;\n  transition: all 150ms ease;\n}\n\n.chat-members:hover,\n.artifact-indicator:hover {\n  background: #F9FAFB;\n  color: #111827;\n}\n\n/* Badge overlay for artifact and member counts */\n.artifact-badge,\n.members-badge {\n  position: absolute;\n  top: -6px;\n  right: -6px;\n  min-width: 16px;\n  height: 16px;\n  padding: 0 4px;\n  background: #3B82F6;\n  color: white;\n  font-size: 10px;\n  font-weight: 600;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n}\n\n.members-badge {\n  background: #6366F1;\n}\n\n.ambient-agent-indicator {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  background: #F3F4F6;\n  border: 1px solid #D1D5DB;\n  border-radius: 6px;\n  font-size: 13px;\n  color: #6B7280;\n  animation: pulse 2s ease-in-out infinite;\n}\n\n.ambient-agent-indicator i {\n  color: #0076B6;\n}\n\n@keyframes pulse {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.7;\n  }\n}\n.chat-actions {\n  display: flex;\n  gap: 8px;\n}\n\n.action-btn {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 12px;\n  background: transparent;\n  border: 1px solid #E5E7EB;\n  cursor: pointer;\n  border-radius: 6px;\n  font-size: 13px;\n  color: #6B7280;\n  transition: all 150ms ease;\n}\n\n.action-btn:hover {\n  background: #F9FAFB;\n  color: #111827;\n}\n\n.share-btn.shared {\n  background: #EFF6FF;\n  border-color: #1e40af;\n  color: #1e40af;\n}\n\n.share-btn.shared:hover {\n  background: #DBEAFE;\n  color: #1e3a8a;\n}\n\n.chat-content-area {\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n  display: flex;\n  flex-direction: row;\n  position: relative;\n}\n\n.chat-messages-pane {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  min-width: min(300px, 100%); /* Respect container bounds while maintaining minimum */\n  overflow: hidden;\n  transition: width 0.3s ease;\n}\n\n.chat-messages-pane.full-width {\n  width: 100%;\n}\n\n.chat-messages-pane:not(.full-width) {\n  flex: 1;\n}\n\n.chat-messages-pane.hidden {\n  display: none;\n}\n\n.resize-handle {\n  width: 4px;\n  background: transparent;\n  cursor: col-resize;\n  flex-shrink: 0;\n  position: relative;\n  transition: background-color 0.2s;\n}\n\n.resize-handle:hover {\n  background: #3B82F6;\n}\n\n.resize-handle::before {\n  content: \"\";\n  position: absolute;\n  left: -4px;\n  right: -4px;\n  top: 0;\n  bottom: 0;\n}\n\n.chat-artifact-pane {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  background: #FAFAFA;\n  overflow: hidden;\n  flex-shrink: 0;\n}\n\n.chat-artifact-pane.maximized {\n  width: 100% !important;\n}\n\n.chat-artifact-pane > mj-artifact-viewer-panel {\n  display: flex;\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n}\n\n.chat-messages-wrapper {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  overflow: hidden;\n  position: relative; /* For upload overlay positioning */\n}\n\n/* Upload indicator overlay - centered in conversation area */\n.upload-indicator-overlay {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 1rem 1.5rem;\n  background: rgba(255, 255, 255, 0.95);\n  border-radius: 12px;\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);\n  z-index: 100;\n  pointer-events: none;\n}\n\n.chat-messages-container {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  background: #FFF;\n  min-height: 0;\n  position: relative;\n}\n\n.scroll-to-bottom-icon {\n  position: sticky;\n  bottom: 21px;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 40px;\n  height: 40px;\n  margin-top: -40px;\n  margin-left: auto;\n  margin-right: auto;\n  background: white;\n  border: 1px solid #D1D5DB;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n  transition: all 0.2s ease;\n  z-index: 100;\n  pointer-events: auto;\n}\n\n.scroll-to-bottom-icon:hover {\n  background: #F3F4F6;\n  border-color: #3B82F6;\n  transform: translateX(-50%) translateY(-2px);\n  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);\n}\n\n.scroll-to-bottom-icon i {\n  color: #6B7280;\n  font-size: 16px;\n  transition: color 0.2s;\n}\n\n.scroll-to-bottom-icon:hover i {\n  color: #3B82F6;\n}\n\n.chat-input-container {\n  flex-shrink: 0;\n  background: #FFF;\n  padding: 0 1.25rem 1.25rem 1.25rem;\n  overflow: visible;\n}\n\n.loading-peripheral-placeholder {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 140px;\n  padding: 24px;\n  background: rgba(255, 255, 255, 0.5);\n  backdrop-filter: blur(2px);\n  border-radius: 12px;\n  margin: 12px;\n  animation: fadeIn 0.2s ease-in-out;\n}\n\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: 1000;\n}\n\n.modal-content {\n  background: white;\n  border-radius: 8px;\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n  max-width: 90vw;\n  max-height: 90vh;\n  display: flex;\n  flex-direction: column;\n}\n\n.project-selector-modal {\n  width: 600px;\n  height: 500px;\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: 18px;\n  font-weight: 600;\n}\n\n.modal-header-actions {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.toggle-system-btn {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: #F3F4F6;\n  border: 1px solid #E5E7EB;\n  cursor: pointer;\n  color: #6B7280;\n  padding: 6px 12px;\n  border-radius: 6px;\n  font-size: 13px;\n  font-weight: 500;\n  transition: all 0.2s;\n}\n\n.toggle-system-btn:hover {\n  background: #E5E7EB;\n  border-color: #D1D5DB;\n  color: #374151;\n}\n\n.toggle-system-btn.active {\n  background: #3B82F6;\n  border-color: #3B82F6;\n  color: white;\n}\n\n.toggle-system-btn.active:hover {\n  background: #2563EB;\n  border-color: #2563EB;\n}\n\n.toggle-system-btn i {\n  font-size: 12px;\n}\n\n.modal-close-btn {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: #6B7280;\n  padding: 4px 8px;\n  border-radius: 4px;\n  transition: all 0.2s;\n}\n\n.modal-close-btn:hover {\n  background: #F3F4F6;\n  color: #111827;\n}\n\n.modal-body {\n  flex: 1;\n  overflow: auto;\n  padding: 20px;\n}\n\n.artifacts-modal {\n  width: 700px;\n  max-height: 600px;\n}\n\n.artifacts-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n  gap: 16px;\n}\n\n.empty-state {\n  grid-column: 1/-1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 60px 20px;\n}\n\n.artifact-modal-card {\n  display: flex;\n  flex-direction: column;\n  background: white;\n  border: 1.5px solid #E5E7EB;\n  border-radius: 12px;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  overflow: hidden;\n}\n\n.artifact-modal-card.expanded {\n  border-color: #3B82F6;\n}\n\n.artifact-modal-card.system-artifact {\n  opacity: 0.85;\n  border-color: #D1D5DB;\n  border-style: dashed;\n  position: relative;\n}\n\n.artifact-modal-card.system-artifact::before {\n  content: \"SYSTEM\";\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  font-size: 9px;\n  font-weight: 600;\n  color: #9CA3AF;\n  background: #F3F4F6;\n  padding: 2px 6px;\n  border-radius: 3px;\n  letter-spacing: 0.5px;\n  z-index: 10;\n}\n\n.artifact-modal-card.system-artifact:hover {\n  border-color: #9CA3AF;\n  box-shadow: 0 4px 12px rgba(156, 163, 175, 0.15);\n}\n\n.artifact-card-header {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px;\n  cursor: pointer;\n}\n\n.artifact-card-header:hover {\n  background: #F9FAFB;\n}\n\n.artifact-modal-card:hover {\n  border-color: #3B82F6;\n  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);\n  transform: translateY(-2px);\n}\n\n.artifact-modal-icon {\n  width: 40px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);\n  border-radius: 10px;\n  color: #3B82F6;\n  flex-shrink: 0;\n}\n\n.artifact-modal-icon i {\n  font-size: 18px;\n}\n\n.artifact-modal-info {\n  flex: 1;\n  min-width: 0;\n}\n\n.artifact-modal-title {\n  font-size: 14px;\n  font-weight: 600;\n  color: #1F2937;\n  margin-bottom: 4px;\n}\n\n.artifact-modal-meta {\n  font-size: 12px;\n  color: #6B7280;\n}\n\n.artifact-modal-action {\n  color: #9CA3AF;\n  transition: color 0.2s;\n}\n\n.artifact-modal-card:hover .artifact-modal-action {\n  color: #3B82F6;\n}\n\n.expand-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  color: #6B7280;\n  cursor: pointer;\n  border-radius: 6px;\n  transition: all 0.2s;\n}\n.expand-btn:hover {\n  background: #F3F4F6;\n  color: #3B82F6;\n}\n\n.artifact-versions-list {\n  display: flex;\n  flex-direction: column;\n  padding: 0 1rem 1rem 1rem;\n  background: #F9FAFB;\n}\n\n.artifact-version-item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 16px 12px 68px;\n  cursor: pointer;\n  transition: background 0.15s;\n}\n.artifact-version-item:hover {\n  background: #F3F4F6;\n}\n.artifact-version-item .version-badge {\n  display: inline-block;\n  padding: 4px 8px;\n  background: #EEF2FF;\n  color: #4F46E5;\n  font-size: 12px;\n  font-weight: 600;\n  font-family: monospace;\n  border-radius: 4px;\n}\n.artifact-version-item .version-open-text {\n  flex: 1;\n  font-size: 13px;\n  color: #6B7280;\n}\n.artifact-version-item i {\n  color: #9CA3AF;\n  font-size: 12px;\n}\n.artifact-version-item:hover .version-badge {\n  background: #4F46E5;\n  color: white;\n}\n.artifact-version-item:hover .version-open-text {\n  color: #3B82F6;\n}\n.artifact-version-item:hover i {\n  color: #3B82F6;\n}\n\n.loading-peripheral-content {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px 24px;\n  background: white;\n  border: 2px solid #E5E7EB;\n  border-radius: 12px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);\n  color: #4B5563;\n  font-size: 14px;\n  font-weight: 500;\n}\n.loading-peripheral-content i {\n  font-size: 20px;\n  color: #9333EA;\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n.conversation-loading-state {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n}\n\n.loading-content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding-top: 20px;\n  gap: 16px;\n  color: #6B7280;\n  font-size: 15px;\n}\n.loading-content i {\n  font-size: 32px;\n  color: #3B82F6;\n}\n.loading-content span {\n  font-weight: 500;\n}\n\n/* Mobile adjustments: 481px - 768px */\n@media (max-width: 768px) {\n  .chat-header {\n    padding: 8px 12px;\n    gap: 6px;\n    flex-direction: row;\n    flex-wrap: wrap;\n    align-items: center;\n    position: relative;\n  }\n  .chat-info {\n    flex-direction: row;\n    align-items: center;\n    gap: 8px;\n    flex: 1;\n    min-width: 0;\n    order: 1;\n  }\n  .chat-title {\n    font-size: 15px;\n    font-weight: 700;\n    width: auto;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    flex: 1;\n    min-width: 0;\n  }\n  .project-tag {\n    margin-left: 0;\n    font-size: 10px;\n    padding: 3px 8px;\n    height: 24px;\n    display: none; /* Hide on mobile to save space */\n  }\n  .test-indicator {\n    margin-left: 0;\n    font-size: 10px;\n    padding: 3px 8px;\n    height: 24px;\n  }\n  /* Action buttons - icon only on mobile */\n  .chat-actions-buttons {\n    order: 2;\n    flex-shrink: 0;\n  }\n  .chat-actions-buttons .action-btn {\n    padding: 6px 8px;\n    min-width: auto;\n  }\n  .chat-actions-buttons .action-btn .btn-label {\n    display: none;\n  }\n  .chat-actions {\n    flex-wrap: nowrap;\n  }\n  .chat-members,\n  .artifact-indicator {\n    padding: 5px 7px;\n    font-size: 13px;\n  }\n  .action-btn {\n    padding: 6px 8px;\n    font-size: 12px;\n  }\n  .ambient-agent-indicator {\n    font-size: 12px;\n    padding: 4px 8px;\n  }\n  .project-selector-modal {\n    width: min(95vw, 600px);\n    height: auto;\n  }\n  .artifacts-modal {\n    width: min(95vw, 700px);\n  }\n  .artifacts-grid {\n    grid-template-columns: 1fr;\n  }\n  .chat-input-container {\n    padding: 0 0.75rem 0.75rem 0.75rem;\n  }\n  .scroll-to-bottom-icon {\n    bottom: 16px;\n    width: 36px;\n    height: 36px;\n  }\n  /* Artifact pane - full width overlay on mobile, overlapping header */\n  .chat-content-area {\n    position: relative;\n  }\n  .chat-artifact-pane {\n    position: fixed;\n    left: 0;\n    right: 0;\n    top: 56px; /* 48px nav + 8px dark strip above blue border */\n    bottom: 0;\n    width: 100% !important;\n    z-index: 100;\n    background: #FFF;\n  }\n  .resize-handle {\n    display: none;\n  }\n}\n/* Small Phone adjustments: <= 480px */\n@media (max-width: 480px) {\n  .chat-header {\n    padding: 6px 8px;\n    gap: 4px;\n  }\n  .chat-title {\n    font-size: 14px;\n    font-weight: 700;\n  }\n  .project-tag {\n    font-size: 9px;\n    padding: 2px 6px;\n    height: 20px;\n    display: none;\n  }\n  .test-indicator {\n    font-size: 9px;\n    padding: 2px 6px;\n    height: 20px;\n  }\n  .chat-members,\n  .artifact-indicator {\n    padding: 4px 8px;\n    font-size: 11px;\n  }\n  .action-btn {\n    padding: 5px 7px;\n    font-size: 11px;\n  }\n  .ambient-agent-indicator {\n    font-size: 11px;\n    padding: 3px 6px;\n  }\n  .project-selector-modal,\n  .artifacts-modal {\n    width: 100vw;\n    height: 100vh;\n    border-radius: 0;\n  }\n  .chat-input-container {\n    padding: 0 0.5rem 0.5rem 0.5rem;\n  }\n  .scroll-to-bottom-icon {\n    bottom: 12px;\n    width: 32px;\n    height: 32px;\n  }\n  .scroll-to-bottom-icon i {\n    font-size: 14px;\n  }\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-conversation-chat-area', template: "<div class=\"chat-area\">\n  <!-- Fixed Header -->\n  @if (conversation) {\n    <div class=\"chat-header\">\n      <div class=\"chat-info\" [class.with-sidebar-toggle]=\"showSidebarToggle\">\n        @if (showSidebarToggle) {\n          <button class=\"sidebar-toggle-btn\"\n            (click)=\"sidebarToggleClicked.emit()\"\n            title=\"Show conversations\">\n            <i class=\"fas fa-table-columns\"></i>\n          </button>\n        }\n        <div class=\"chat-title\">{{ conversation.Name }}</div>\n        @if (conversation.ProjectID) {\n          <button class=\"project-tag\" (click)=\"openProjectSelector()\" title=\"Assign to project\">\n            <i class=\"fas fa-folder\"></i>\n            <span>{{ conversation.Project || 'Project' }}</span>\n          </button>\n        }\n        @if (conversation.TestRunID) {\n          <button class=\"test-indicator\" (click)=\"viewTestRun(conversation.TestRunID)\" title=\"View Test Run\">\n            <i class=\"fas fa-flask\"></i>\n            <span>Test</span>\n          </button>\n        }\n        <mj-active-agent-indicator\n          [conversationId]=\"conversation.ID\"\n          [currentUser]=\"currentUser\"\n          (togglePanel)=\"onToggleAgentPanel()\"\n          (agentSelected)=\"onAgentSelected($event)\">\n        </mj-active-agent-indicator>\n      </div>\n      <div class=\"chat-actions chat-actions-buttons\">\n        @if (artifactCountDisplay > 0) {\n          <button class=\"artifact-indicator\" (click)=\"viewArtifacts()\" title=\"View artifacts\">\n            <i class=\"fas fa-cube\"></i>\n            <span class=\"artifact-badge\">{{ artifactCountDisplay }}</span>\n          </button>\n        }\n        @if (memberCount > 1) {\n          <button class=\"chat-members\" (click)=\"toggleMembersModal()\" title=\"View members\">\n            <i class=\"fas fa-users\"></i>\n            <span class=\"members-badge\">{{ memberCount }}</span>\n          </button>\n        }\n        <button class=\"action-btn\" (click)=\"exportConversation()\" title=\"Export conversation\">\n          <i class=\"fas fa-download\"></i>\n          <span class=\"btn-label\">Export</span>\n        </button>\n        <button class=\"action-btn share-btn\"\n          [class.shared]=\"isShared\"\n          (click)=\"shareConversation()\"\n          [title]=\"isShared ? 'Manage sharing' : 'Share conversation'\">\n          <i class=\"fas fa-share-nodes\"></i>\n          <span class=\"btn-label\">Share</span>\n        </button>\n        <mj-active-agent-indicator\n          [conversationId]=\"conversation.ID\"\n          [currentUser]=\"currentUser\"\n          (togglePanel)=\"onToggleAgentPanel()\"\n          (agentSelected)=\"onAgentSelected($event)\">\n        </mj-active-agent-indicator>\n      </div>\n    </div>\n  }\n\n  <!-- Messages and Artifact Split Layout -->\n  <div class=\"chat-content-area\">\n    <!-- Messages Pane -->\n    <div class=\"chat-messages-pane\"\n      [class.full-width]=\"!showArtifactPanel\"\n      [class.hidden]=\"isArtifactPaneMaximized\">\n      @if (isNewConversation || !conversationId) {\n        <!-- Empty State - No conversation selected OR new unsaved conversation -->\n        <mj-conversation-empty-state\n          [currentUser]=\"currentUser\"\n          [disabled]=\"isProcessing\"\n          [showSidebarToggle]=\"showSidebarToggle\"\n          (sidebarToggleClicked)=\"sidebarToggleClicked.emit()\"\n          (messageSent)=\"onEmptyStateMessageSent($event)\">\n        </mj-conversation-empty-state>\n      } @else if (isLoadingConversation) {\n        <!-- Loading State - Show centered spinner while conversation loads -->\n        <div class=\"conversation-loading-state\">\n          <mj-loading text=\"Loading conversation...\" size=\"large\"></mj-loading>\n        </div>\n      } @else {\n        <!-- Normal Message View -->\n        <div class=\"chat-messages-wrapper\">\n          <!-- Upload Indicator Overlay (centered in conversation area) -->\n          @if (isUploadingAttachments) {\n            <div class=\"upload-indicator-overlay\">\n              <mj-loading [text]=\"uploadingMessage\" size=\"medium\"></mj-loading>\n            </div>\n          }\n          <div class=\"chat-messages-container\" #scrollContainer (scroll)=\"checkScroll()\">\n            <mj-conversation-message-list\n              [messages]=\"messages\"\n              [conversation]=\"conversation\"\n              [currentUser]=\"currentUser\"\n              [isProcessing]=\"isProcessing\"\n              [artifactMap]=\"effectiveArtifactsMap\"\n              [agentRunMap]=\"agentRunsByDetailId\"\n              [ratingsMap]=\"ratingsByDetailId\"\n              [userAvatarMap]=\"userAvatarMap\"\n              [attachmentsMap]=\"attachmentsByDetailId\"\n              (replyInThread)=\"onReplyInThread($event)\"\n              (viewThread)=\"onViewThread($event)\"\n              (retryMessage)=\"onRetryMessage($event)\"\n              (testFeedbackMessage)=\"onTestFeedbackMessage($event)\"\n              (artifactClicked)=\"onArtifactClicked($event)\"\n              (messageEdited)=\"onMessageEdited($event)\"\n              (openEntityRecord)=\"onOpenEntityRecord($event)\"\n              (suggestedResponseSelected)=\"onSuggestedResponseSelected($event)\"\n              (attachmentClicked)=\"onAttachmentClicked($event)\">\n            </mj-conversation-message-list>\n\n            <!-- Scroll to Bottom Icon (positioned within scroll container for proper centering) -->\n            @if (showScrollToBottomIcon && messages && messages.length > 0) {\n              <span class=\"scroll-to-bottom-icon\" style=\"left: 50%;\"\n                (click)=\"scrollToBottomAnimate()\">\n                <i class=\"fas fa-arrow-down\"></i>\n              </span>\n            }\n          </div>\n\n          <!-- Fixed Input Area -->\n          <div class=\"chat-input-container\">\n            @if (isLoadingPeripheralData) {\n              <!-- Loading State -->\n              <div class=\"loading-peripheral-placeholder\">\n                <mj-loading text=\"Loading conversation data...\" size=\"medium\"></mj-loading>\n              </div>\n            } @else {\n              <!-- Input Component - Multiple instances cached, only one visible -->\n              <div class=\"message-input-container-wrapper\">\n                @for (inputRef of getCachedInputs(); track inputRef.conversationId) {\n                  <mj-message-input\n                    #messageInput\n                    [hidden]=\"inputRef.conversationId !== conversationId\"\n                    [conversationId]=\"inputRef.conversationId\"\n                    [conversationName]=\"inputRef.conversationName\"\n                    [currentUser]=\"currentUser\"\n                    [conversationHistory]=\"inputRef.conversationId === conversationId ? messages : []\"\n                    [artifactsByDetailId]=\"inputRef.conversationId === conversationId ? artifactsByDetailId : emptyArtifactsMap\"\n                    [systemArtifactsByDetailId]=\"inputRef.conversationId === conversationId ? systemArtifactsByDetailId : emptyArtifactsMap\"\n                    [agentRunsByDetailId]=\"inputRef.conversationId === conversationId ? agentRunsByDetailId : emptyAgentRunsMap\"\n                    [inProgressMessageIds]=\"inputRef.conversationId === conversationId ? inProgressMessageIds : emptyInProgressIds\"\n                    [disabled]=\"isProcessing\"\n                    [enableAttachments]=\"enableAttachments\"\n                    [maxAttachments]=\"maxAttachments\"\n                    [maxAttachmentSizeBytes]=\"maxAttachmentSizeBytes\"\n                    [acceptedFileTypes]=\"acceptedFileTypes\"\n                    [initialMessage]=\"inputRef.conversationId === conversationId ? pendingMessage : null\"\n                    [initialAttachments]=\"inputRef.conversationId === conversationId ? pendingAttachments : null\"\n                    (messageSent)=\"onMessageSent($event)\"\n                    (agentResponse)=\"onAgentResponse($event)\"\n                    (agentRunDetected)=\"onAgentRunDetected($event)\"\n                    (agentRunUpdate)=\"onAgentRunUpdate($event)\"\n                    (messageComplete)=\"onMessageComplete($event)\"\n                    (artifactCreated)=\"onArtifactCreated($event)\"\n                    (conversationRenamed)=\"onConversationRenamed($event)\"\n                    (intentCheckStarted)=\"onIntentCheckStarted()\"\n                    (intentCheckCompleted)=\"onIntentCheckCompleted()\"\n                    (uploadStateChanged)=\"onUploadStateChanged($event)\">\n                  </mj-message-input>\n                }\n              </div>\n            }\n          </div>\n        </div>\n      }\n    </div>\n\n    <!-- Artifact Viewer Pane -->\n    @if (showArtifactPanel && selectedArtifactId) {\n      @if (!isArtifactPaneMaximized) {\n        <div class=\"resize-handle\" (mousedown)=\"onResizeStart($event)\" (touchstart)=\"onResizeTouchStart($event)\"></div>\n      }\n      <div class=\"chat-artifact-pane\"\n        [style.width.%]=\"artifactPaneWidth\"\n        [class.maximized]=\"isArtifactPaneMaximized\">\n        <mj-artifact-viewer-panel\n          [artifactId]=\"selectedArtifactId\"\n          [currentUser]=\"currentUser\"\n          [environmentId]=\"environmentId\"\n          [versionNumber]=\"selectedVersionNumber\"\n          [viewContext]=\"'conversation'\"\n          [canShare]=\"canShareSelectedArtifact\"\n          [canEdit]=\"canEditSelectedArtifact\"\n          [isMaximized]=\"isArtifactPaneMaximized\"\n          [refreshTrigger]=\"artifactViewerRefresh$\"\n          (closed)=\"onCloseArtifactPanel()\"\n          (saveToCollectionRequested)=\"onSaveToCollectionRequested($event)\"\n          (navigateToLink)=\"onArtifactLinkNavigation($event)\"\n          (shareRequested)=\"onArtifactShareRequested($event)\"\n          (maximizeToggled)=\"toggleMaximizeArtifactPane()\"\n          (openEntityRecord)=\"onOpenEntityRecord($event)\"\n          (navigationRequest)=\"onNavigationRequest($event)\">\n        </mj-artifact-viewer-panel>\n      </div>\n    }\n\n    <!-- Artifact Share Modal -->\n    <mj-artifact-share-modal\n      [isOpen]=\"isArtifactShareModalOpen\"\n      [artifact]=\"artifactToShare\"\n      [currentUser]=\"currentUser\"\n      (saved)=\"onArtifactShared()\"\n      (cancelled)=\"onArtifactShareModalClose()\">\n    </mj-artifact-share-modal>\n  </div>\n</div>\n\n<!-- Thread Panel -->\n@if (threadId) {\n  <mj-thread-panel\n    [parentMessageId]=\"threadId\"\n    [conversationId]=\"conversationId || ''\"\n    [currentUser]=\"currentUser\"\n    (closed)=\"onLocalThreadClosed()\"\n    (replyAdded)=\"onThreadReplyAdded($event)\">\n  </mj-thread-panel>\n}\n\n<!-- Export Modal -->\n<mj-export-modal\n  [isVisible]=\"showExportModal\"\n  [conversation]=\"conversation || undefined\"\n  [currentUser]=\"currentUser\"\n  (cancelled)=\"onExportModalCancelled()\"\n  (exported)=\"onExportModalComplete()\">\n</mj-export-modal>\n\n<!-- Members Modal -->\n<mj-members-modal\n  [isVisible]=\"showMembersModal\"\n  [conversation]=\"conversation || undefined\"\n  [currentUser]=\"currentUser\"\n  (cancelled)=\"showMembersModal = false\"\n  (membersChanged)=\"showMembersModal = false\">\n</mj-members-modal>\n\n<!-- Project Selector Modal -->\n@if (showProjectSelector && conversation) {\n  <div class=\"modal-overlay\" (click)=\"showProjectSelector = false\">\n    <div class=\"modal-content project-selector-modal\" (click)=\"$event.stopPropagation()\">\n      <div class=\"modal-header\">\n        <h3>Assign Project</h3>\n        <button class=\"modal-close-btn\" (click)=\"showProjectSelector = false\">\n          <i class=\"fas fa-times\"></i>\n        </button>\n      </div>\n      <div class=\"modal-body\">\n        <mj-project-selector\n          [environmentId]=\"environmentId\"\n          [currentUser]=\"currentUser\"\n          [selectedProjectId]=\"conversation.ProjectID\"\n          (projectSelected)=\"onProjectSelected($event)\">\n        </mj-project-selector>\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Artifacts Modal -->\n@if (showArtifactsModal) {\n  <div class=\"modal-overlay\" (click)=\"showArtifactsModal = false\">\n    <div class=\"modal-content artifacts-modal\" (click)=\"$event.stopPropagation()\">\n      <div class=\"modal-header\">\n        <h3>Conversation Artifacts</h3>\n        <div class=\"modal-header-actions\">\n          @if (hasSystemArtifacts) {\n            <button class=\"toggle-system-btn\"\n              [class.active]=\"showSystemArtifacts\"\n              (click)=\"toggleSystemArtifacts()\"\n              title=\"Toggle system artifacts visibility\">\n              <i class=\"fas fa-cog\"></i>\n              <span>{{ showSystemArtifacts ? 'Hide' : 'Show' }} System</span>\n            </button>\n          }\n          <button class=\"modal-close-btn\" (click)=\"showArtifactsModal = false\">\n            <i class=\"fas fa-times\"></i>\n          </button>\n        </div>\n      </div>\n      <div class=\"modal-body artifacts-grid\">\n        @if (artifactsByDetailId.size === 0) {\n          <div class=\"empty-state\">\n            <i class=\"fas fa-cube\" style=\"font-size: 48px; color: #D1D5DB; margin-bottom: 16px;\"></i>\n            <p style=\"color: #6B7280; font-size: 14px;\">No artifacts in this conversation yet</p>\n          </div>\n        }\n        @for (artifact of getArtifactsArray(); track artifact.artifactId) {\n          <div class=\"artifact-modal-card\"\n            [class.expanded]=\"expandedArtifactId === artifact.artifactId\"\n            [class.system-artifact]=\"artifact.visibility === 'System Only'\">\n            <!-- Main card header - click to open latest version -->\n            <div class=\"artifact-card-header\" (click)=\"openArtifactFromModal(artifact.artifactId)\">\n              <div class=\"artifact-modal-icon\">\n                <i class=\"fas fa-file-code\"></i>\n              </div>\n              <div class=\"artifact-modal-info\">\n                <div class=\"artifact-modal-title\">{{artifact.name}}</div>\n                <div class=\"artifact-modal-meta\">\n                  @if (artifact.versionCount > 1) {\n                    {{artifact.versionCount}} versions\n                  } @else {\n                    1 version\n                  }\n                </div>\n              </div>\n              @if (artifact.versionCount > 1) {\n                <button class=\"expand-btn\" (click)=\"toggleArtifactExpansion(artifact.artifactId, $event)\">\n                  <i class=\"fas\" [class.fa-chevron-down]=\"expandedArtifactId !== artifact.artifactId\"\n                  [class.fa-chevron-up]=\"expandedArtifactId === artifact.artifactId\"></i>\n                </button>\n              }\n              <div class=\"artifact-modal-action\">\n                <i class=\"fas fa-external-link-alt\"></i>\n              </div>\n            </div>\n\n            <!-- Expanded version list -->\n            @if (expandedArtifactId === artifact.artifactId && artifact.versionCount > 1) {\n              <div class=\"artifact-versions-list\">\n                @for (version of artifact.versions; track version.versionId) {\n                  <div class=\"artifact-version-item\" (click)=\"openArtifactFromModal(artifact.artifactId, version.versionNumber); $event.stopPropagation()\">\n                    <span class=\"version-badge\">v{{version.versionNumber}}</span>\n                    <span class=\"version-open-text\">Open this version</span>\n                    <i class=\"fas fa-arrow-right\"></i>\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Collection Picker Modal -->\n@if (showCollectionPicker) {\n  <mj-artifact-collection-picker-modal\n    [isOpen]=\"showCollectionPicker\"\n    [environmentId]=\"environmentId\"\n    [currentUser]=\"currentUser\"\n    [excludeCollectionIds]=\"collectionPickerExcludedIds\"\n    (saved)=\"onCollectionPickerSaved($event)\"\n    (cancelled)=\"onCollectionPickerCancelled()\">\n  </mj-artifact-collection-picker-modal>\n}\n\n<!-- Image Viewer Modal -->\n@if (showImageViewer) {\n  <mj-image-viewer\n    [imageUrl]=\"selectedImageUrl\"\n    [alt]=\"selectedImageAlt\"\n    [fileName]=\"selectedImageFileName\"\n    [visible]=\"showImageViewer\"\n    (closed)=\"onImageViewerClosed()\">\n  </mj-image-viewer>\n}", styles: [":host {\n  display: flex;\n  width: 100%;\n  height: 100%;\n}\n\n.chat-area {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n\n.chat-header {\n  flex-shrink: 0;\n  padding: 12px 20px;\n  border-bottom: 1px solid #D9D9D9;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 16px;\n  background: #FFF;\n  z-index: 10;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n}\n\n.chat-info {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n  min-width: 0;\n}\n\n/* Sidebar toggle button in header */\n.sidebar-toggle-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  background: transparent;\n  border: none;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  flex-shrink: 0;\n}\n\n.sidebar-toggle-btn:hover {\n  background: rgba(0, 0, 0, 0.08);\n}\n\n.sidebar-toggle-btn:active {\n  background: rgba(0, 0, 0, 0.12);\n}\n\n.sidebar-toggle-btn i {\n  color: #666;\n  font-size: 18px;\n  transition: color 0.15s ease;\n}\n\n.sidebar-toggle-btn:hover i {\n  color: #333;\n}\n\n.chat-title {\n  font-size: 16px;\n  font-weight: 600;\n  color: #333;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.project-tag {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  background: #F4F4F4;\n  border: 1px solid #D9D9D9;\n  border-radius: 16px;\n  font-size: 11px;\n  font-weight: 600;\n  color: #AAA;\n  cursor: pointer;\n  transition: all 0.2s;\n  height: 28px;\n  margin-left: 12px;\n}\n\n.project-tag:hover {\n  background: #D9D9D9;\n  border-color: #AAA;\n}\n\n.project-tag i {\n  font-size: 10px;\n}\n\n.test-indicator {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  background: #FFF8E1;\n  border: 1px solid #FFD54F;\n  border-radius: 16px;\n  font-size: 11px;\n  font-weight: 600;\n  color: #F57C00;\n  cursor: pointer;\n  transition: all 0.2s;\n  height: 28px;\n  margin-left: 8px;\n}\n\n.test-indicator:hover {\n  background: #FFE082;\n  border-color: #FFA000;\n}\n\n.test-indicator i {\n  font-size: 10px;\n}\n\n.chat-members,\n.artifact-indicator {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  padding: 6px 8px;\n  background: transparent;\n  border: 1px solid #E5E7EB;\n  border-radius: 6px;\n  font-size: 14px;\n  color: #6B7280;\n  cursor: pointer;\n  transition: all 150ms ease;\n}\n\n.chat-members:hover,\n.artifact-indicator:hover {\n  background: #F9FAFB;\n  color: #111827;\n}\n\n/* Badge overlay for artifact and member counts */\n.artifact-badge,\n.members-badge {\n  position: absolute;\n  top: -6px;\n  right: -6px;\n  min-width: 16px;\n  height: 16px;\n  padding: 0 4px;\n  background: #3B82F6;\n  color: white;\n  font-size: 10px;\n  font-weight: 600;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n}\n\n.members-badge {\n  background: #6366F1;\n}\n\n.ambient-agent-indicator {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  background: #F3F4F6;\n  border: 1px solid #D1D5DB;\n  border-radius: 6px;\n  font-size: 13px;\n  color: #6B7280;\n  animation: pulse 2s ease-in-out infinite;\n}\n\n.ambient-agent-indicator i {\n  color: #0076B6;\n}\n\n@keyframes pulse {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.7;\n  }\n}\n.chat-actions {\n  display: flex;\n  gap: 8px;\n}\n\n.action-btn {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 12px;\n  background: transparent;\n  border: 1px solid #E5E7EB;\n  cursor: pointer;\n  border-radius: 6px;\n  font-size: 13px;\n  color: #6B7280;\n  transition: all 150ms ease;\n}\n\n.action-btn:hover {\n  background: #F9FAFB;\n  color: #111827;\n}\n\n.share-btn.shared {\n  background: #EFF6FF;\n  border-color: #1e40af;\n  color: #1e40af;\n}\n\n.share-btn.shared:hover {\n  background: #DBEAFE;\n  color: #1e3a8a;\n}\n\n.chat-content-area {\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n  display: flex;\n  flex-direction: row;\n  position: relative;\n}\n\n.chat-messages-pane {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  min-width: min(300px, 100%); /* Respect container bounds while maintaining minimum */\n  overflow: hidden;\n  transition: width 0.3s ease;\n}\n\n.chat-messages-pane.full-width {\n  width: 100%;\n}\n\n.chat-messages-pane:not(.full-width) {\n  flex: 1;\n}\n\n.chat-messages-pane.hidden {\n  display: none;\n}\n\n.resize-handle {\n  width: 4px;\n  background: transparent;\n  cursor: col-resize;\n  flex-shrink: 0;\n  position: relative;\n  transition: background-color 0.2s;\n}\n\n.resize-handle:hover {\n  background: #3B82F6;\n}\n\n.resize-handle::before {\n  content: \"\";\n  position: absolute;\n  left: -4px;\n  right: -4px;\n  top: 0;\n  bottom: 0;\n}\n\n.chat-artifact-pane {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  background: #FAFAFA;\n  overflow: hidden;\n  flex-shrink: 0;\n}\n\n.chat-artifact-pane.maximized {\n  width: 100% !important;\n}\n\n.chat-artifact-pane > mj-artifact-viewer-panel {\n  display: flex;\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n}\n\n.chat-messages-wrapper {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  overflow: hidden;\n  position: relative; /* For upload overlay positioning */\n}\n\n/* Upload indicator overlay - centered in conversation area */\n.upload-indicator-overlay {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 1rem 1.5rem;\n  background: rgba(255, 255, 255, 0.95);\n  border-radius: 12px;\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);\n  z-index: 100;\n  pointer-events: none;\n}\n\n.chat-messages-container {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  background: #FFF;\n  min-height: 0;\n  position: relative;\n}\n\n.scroll-to-bottom-icon {\n  position: sticky;\n  bottom: 21px;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 40px;\n  height: 40px;\n  margin-top: -40px;\n  margin-left: auto;\n  margin-right: auto;\n  background: white;\n  border: 1px solid #D1D5DB;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n  transition: all 0.2s ease;\n  z-index: 100;\n  pointer-events: auto;\n}\n\n.scroll-to-bottom-icon:hover {\n  background: #F3F4F6;\n  border-color: #3B82F6;\n  transform: translateX(-50%) translateY(-2px);\n  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);\n}\n\n.scroll-to-bottom-icon i {\n  color: #6B7280;\n  font-size: 16px;\n  transition: color 0.2s;\n}\n\n.scroll-to-bottom-icon:hover i {\n  color: #3B82F6;\n}\n\n.chat-input-container {\n  flex-shrink: 0;\n  background: #FFF;\n  padding: 0 1.25rem 1.25rem 1.25rem;\n  overflow: visible;\n}\n\n.loading-peripheral-placeholder {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 140px;\n  padding: 24px;\n  background: rgba(255, 255, 255, 0.5);\n  backdrop-filter: blur(2px);\n  border-radius: 12px;\n  margin: 12px;\n  animation: fadeIn 0.2s ease-in-out;\n}\n\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: 1000;\n}\n\n.modal-content {\n  background: white;\n  border-radius: 8px;\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n  max-width: 90vw;\n  max-height: 90vh;\n  display: flex;\n  flex-direction: column;\n}\n\n.project-selector-modal {\n  width: 600px;\n  height: 500px;\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: 18px;\n  font-weight: 600;\n}\n\n.modal-header-actions {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.toggle-system-btn {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: #F3F4F6;\n  border: 1px solid #E5E7EB;\n  cursor: pointer;\n  color: #6B7280;\n  padding: 6px 12px;\n  border-radius: 6px;\n  font-size: 13px;\n  font-weight: 500;\n  transition: all 0.2s;\n}\n\n.toggle-system-btn:hover {\n  background: #E5E7EB;\n  border-color: #D1D5DB;\n  color: #374151;\n}\n\n.toggle-system-btn.active {\n  background: #3B82F6;\n  border-color: #3B82F6;\n  color: white;\n}\n\n.toggle-system-btn.active:hover {\n  background: #2563EB;\n  border-color: #2563EB;\n}\n\n.toggle-system-btn i {\n  font-size: 12px;\n}\n\n.modal-close-btn {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: #6B7280;\n  padding: 4px 8px;\n  border-radius: 4px;\n  transition: all 0.2s;\n}\n\n.modal-close-btn:hover {\n  background: #F3F4F6;\n  color: #111827;\n}\n\n.modal-body {\n  flex: 1;\n  overflow: auto;\n  padding: 20px;\n}\n\n.artifacts-modal {\n  width: 700px;\n  max-height: 600px;\n}\n\n.artifacts-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n  gap: 16px;\n}\n\n.empty-state {\n  grid-column: 1/-1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 60px 20px;\n}\n\n.artifact-modal-card {\n  display: flex;\n  flex-direction: column;\n  background: white;\n  border: 1.5px solid #E5E7EB;\n  border-radius: 12px;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  overflow: hidden;\n}\n\n.artifact-modal-card.expanded {\n  border-color: #3B82F6;\n}\n\n.artifact-modal-card.system-artifact {\n  opacity: 0.85;\n  border-color: #D1D5DB;\n  border-style: dashed;\n  position: relative;\n}\n\n.artifact-modal-card.system-artifact::before {\n  content: \"SYSTEM\";\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  font-size: 9px;\n  font-weight: 600;\n  color: #9CA3AF;\n  background: #F3F4F6;\n  padding: 2px 6px;\n  border-radius: 3px;\n  letter-spacing: 0.5px;\n  z-index: 10;\n}\n\n.artifact-modal-card.system-artifact:hover {\n  border-color: #9CA3AF;\n  box-shadow: 0 4px 12px rgba(156, 163, 175, 0.15);\n}\n\n.artifact-card-header {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px;\n  cursor: pointer;\n}\n\n.artifact-card-header:hover {\n  background: #F9FAFB;\n}\n\n.artifact-modal-card:hover {\n  border-color: #3B82F6;\n  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);\n  transform: translateY(-2px);\n}\n\n.artifact-modal-icon {\n  width: 40px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);\n  border-radius: 10px;\n  color: #3B82F6;\n  flex-shrink: 0;\n}\n\n.artifact-modal-icon i {\n  font-size: 18px;\n}\n\n.artifact-modal-info {\n  flex: 1;\n  min-width: 0;\n}\n\n.artifact-modal-title {\n  font-size: 14px;\n  font-weight: 600;\n  color: #1F2937;\n  margin-bottom: 4px;\n}\n\n.artifact-modal-meta {\n  font-size: 12px;\n  color: #6B7280;\n}\n\n.artifact-modal-action {\n  color: #9CA3AF;\n  transition: color 0.2s;\n}\n\n.artifact-modal-card:hover .artifact-modal-action {\n  color: #3B82F6;\n}\n\n.expand-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  color: #6B7280;\n  cursor: pointer;\n  border-radius: 6px;\n  transition: all 0.2s;\n}\n.expand-btn:hover {\n  background: #F3F4F6;\n  color: #3B82F6;\n}\n\n.artifact-versions-list {\n  display: flex;\n  flex-direction: column;\n  padding: 0 1rem 1rem 1rem;\n  background: #F9FAFB;\n}\n\n.artifact-version-item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 16px 12px 68px;\n  cursor: pointer;\n  transition: background 0.15s;\n}\n.artifact-version-item:hover {\n  background: #F3F4F6;\n}\n.artifact-version-item .version-badge {\n  display: inline-block;\n  padding: 4px 8px;\n  background: #EEF2FF;\n  color: #4F46E5;\n  font-size: 12px;\n  font-weight: 600;\n  font-family: monospace;\n  border-radius: 4px;\n}\n.artifact-version-item .version-open-text {\n  flex: 1;\n  font-size: 13px;\n  color: #6B7280;\n}\n.artifact-version-item i {\n  color: #9CA3AF;\n  font-size: 12px;\n}\n.artifact-version-item:hover .version-badge {\n  background: #4F46E5;\n  color: white;\n}\n.artifact-version-item:hover .version-open-text {\n  color: #3B82F6;\n}\n.artifact-version-item:hover i {\n  color: #3B82F6;\n}\n\n.loading-peripheral-content {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px 24px;\n  background: white;\n  border: 2px solid #E5E7EB;\n  border-radius: 12px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);\n  color: #4B5563;\n  font-size: 14px;\n  font-weight: 500;\n}\n.loading-peripheral-content i {\n  font-size: 20px;\n  color: #9333EA;\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n.conversation-loading-state {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n}\n\n.loading-content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding-top: 20px;\n  gap: 16px;\n  color: #6B7280;\n  font-size: 15px;\n}\n.loading-content i {\n  font-size: 32px;\n  color: #3B82F6;\n}\n.loading-content span {\n  font-weight: 500;\n}\n\n/* Mobile adjustments: 481px - 768px */\n@media (max-width: 768px) {\n  .chat-header {\n    padding: 8px 12px;\n    gap: 6px;\n    flex-direction: row;\n    flex-wrap: wrap;\n    align-items: center;\n    position: relative;\n  }\n  .chat-info {\n    flex-direction: row;\n    align-items: center;\n    gap: 8px;\n    flex: 1;\n    min-width: 0;\n    order: 1;\n  }\n  .chat-title {\n    font-size: 15px;\n    font-weight: 700;\n    width: auto;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    flex: 1;\n    min-width: 0;\n  }\n  .project-tag {\n    margin-left: 0;\n    font-size: 10px;\n    padding: 3px 8px;\n    height: 24px;\n    display: none; /* Hide on mobile to save space */\n  }\n  .test-indicator {\n    margin-left: 0;\n    font-size: 10px;\n    padding: 3px 8px;\n    height: 24px;\n  }\n  /* Action buttons - icon only on mobile */\n  .chat-actions-buttons {\n    order: 2;\n    flex-shrink: 0;\n  }\n  .chat-actions-buttons .action-btn {\n    padding: 6px 8px;\n    min-width: auto;\n  }\n  .chat-actions-buttons .action-btn .btn-label {\n    display: none;\n  }\n  .chat-actions {\n    flex-wrap: nowrap;\n  }\n  .chat-members,\n  .artifact-indicator {\n    padding: 5px 7px;\n    font-size: 13px;\n  }\n  .action-btn {\n    padding: 6px 8px;\n    font-size: 12px;\n  }\n  .ambient-agent-indicator {\n    font-size: 12px;\n    padding: 4px 8px;\n  }\n  .project-selector-modal {\n    width: min(95vw, 600px);\n    height: auto;\n  }\n  .artifacts-modal {\n    width: min(95vw, 700px);\n  }\n  .artifacts-grid {\n    grid-template-columns: 1fr;\n  }\n  .chat-input-container {\n    padding: 0 0.75rem 0.75rem 0.75rem;\n  }\n  .scroll-to-bottom-icon {\n    bottom: 16px;\n    width: 36px;\n    height: 36px;\n  }\n  /* Artifact pane - full width overlay on mobile, overlapping header */\n  .chat-content-area {\n    position: relative;\n  }\n  .chat-artifact-pane {\n    position: fixed;\n    left: 0;\n    right: 0;\n    top: 56px; /* 48px nav + 8px dark strip above blue border */\n    bottom: 0;\n    width: 100% !important;\n    z-index: 100;\n    background: #FFF;\n  }\n  .resize-handle {\n    display: none;\n  }\n}\n/* Small Phone adjustments: <= 480px */\n@media (max-width: 480px) {\n  .chat-header {\n    padding: 6px 8px;\n    gap: 4px;\n  }\n  .chat-title {\n    font-size: 14px;\n    font-weight: 700;\n  }\n  .project-tag {\n    font-size: 9px;\n    padding: 2px 6px;\n    height: 20px;\n    display: none;\n  }\n  .test-indicator {\n    font-size: 9px;\n    padding: 2px 6px;\n    height: 20px;\n  }\n  .chat-members,\n  .artifact-indicator {\n    padding: 4px 8px;\n    font-size: 11px;\n  }\n  .action-btn {\n    padding: 5px 7px;\n    font-size: 11px;\n  }\n  .ambient-agent-indicator {\n    font-size: 11px;\n    padding: 3px 6px;\n  }\n  .project-selector-modal,\n  .artifacts-modal {\n    width: 100vw;\n    height: 100vh;\n    border-radius: 0;\n  }\n  .chat-input-container {\n    padding: 0 0.5rem 0.5rem 0.5rem;\n  }\n  .scroll-to-bottom-icon {\n    bottom: 12px;\n    width: 32px;\n    height: 32px;\n  }\n  .scroll-to-bottom-icon i {\n    font-size: 14px;\n  }\n}\n"] }]
     }], () => [{ type: i1.ConversationDataService }, { type: i2.AgentStateService }, { type: i3.ConversationAgentService }, { type: i4.ActiveTasksService }, { type: i0.ChangeDetectorRef }, { type: i5.MentionAutocompleteService }, { type: i6.ArtifactPermissionService }, { type: i7.DialogService }, { type: i8.ConversationAttachmentService }, { type: i9.ConversationStreamingService }], { environmentId: [{
             type: Input
         }], currentUser: [{
@@ -2293,6 +2426,8 @@ export class ConversationChatAreaComponent {
             type: Output
         }], openEntityRecord: [{
             type: Output
+        }], navigationRequest: [{
+            type: Output
         }], taskClicked: [{
             type: Output
         }], artifactLinkClicked: [{