@memberjunction/ng-conversations 6.2.0-edge.6 → 6.2.0-edge.7

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

@@ -4,6 +4,7 @@ import { RunView, CompositeKey, LogStatusEx } from '@memberjunction/core';
 import { ArtifactMetadataEngine, ConversationEngine, ShouldReplaceDetailAgentRun, CONVERSATIONS_FORK_AUTHORIZATION, CONVERSATIONS_FORKING_SETTING_KEY, UserInfoEngine, WorkflowSaveOperation } from '@memberjunction/core-entities';
 import { ConversationUtility } from "@memberjunction/ai-core-plus";
 import { AIEngineBase } from '@memberjunction/ai-engine-base';
+import { GraphQLDataProvider } from '@memberjunction/graphql-dataprovider';
 import { ConversationDetailWindowStore } from '../../services/conversation-detail-window.store';
 import { MentionAutocompleteService } from '../../services/mention-autocomplete.service';
 import { MJResourcePermissionShareAdapter } from '@memberjunction/ng-resource-permissions';
@@ -29,10 +30,15 @@ import { MessageListComponent } from '../message/message-list.component';
 import { IsForkPointOrEarlier } from '../../utils/conversation-branching';
 import { BackLabelOf, BuildForkBreadcrumbs, BuildForkHeaderPath, BuildForkMarkerText, BuildForkComposerHint, BuildForkViewLayout, BuildViewForkChipMap, CanForkFrom, FindLatestTurn, FirstOwnRowID, ForkDependsOnRows, IsRowInOpenView, MAIN_COMPOSER_PLACEHOLDER, MAIN_OPEN_VIEW, ParentForkIdOf, ReadBranchIdOf, SameOpenView, SplitForkRows, TurnRowsAfter, FORK_COMPOSER_PLACEHOLDER, ForkInitials, ForkKindIcon, DRAFT_FORK_TITLE } from '../../utils/conversation-forks';
 import { DecideArtifactPanelAction, SnapshotArtifactVersions } from '../../utils/artifact-panel-action';
-import { NormalizeUUID, UUIDsEqual, UUIDSet, IndexByUUID, IsValidUUID } from '@memberjunction/global';
+import { GetThreadReplyRoots } from '../../utils/thread-replies';
+import { NormalizeUUID, UUIDsEqual, UUIDSet, UUIDMap, IndexByUUID, IsValidUUID } from '@memberjunction/global';
+import { AgentAccentVar } from '../message/agent-handoff-card.component';
+import { BuildHandoffsByDetailId, LoadHandoffStepsForRuns, } from '../../utils/agent-handoff-map';
+import { FindContinuityAgentMessage } from '../../utils/agent-turn-routing';
 // PR 2c — Widget extension surface
 import { ChatSlotDirective } from '../../directives/chat-slot.directive';
 import { ConversationCallStartOptions } from '../realtime/capture/realtime-capture-channel';
+import { ConversationRemoteBrowserController } from './conversation-remote-browser-controller';
 import { DescribeCallFailureNotice } from '../realtime/realtime-call-failure-notice';
 import { BeforeToolInvokedEventArgs, AfterToolInvokedEventArgs, BeforeStopClickedEventArgs, AfterStopClickedEventArgs, SessionStartedEventArgs, SessionChannelStateChangedEventArgs, SessionEndedEventArgs, } from '../../events/chat-events';
 import * as i0 from "@angular/core";
@@ -59,50 +65,52 @@ import * as i20 from "../collection/artifact-collection-picker-modal.component";
 import * as i21 from "../artifact/artifact-share-modal.component";
 import * as i22 from "../slots/mj-chat-agent-presence-default.component";
 import * as i23 from "../realtime/realtime-session-overlay.component";
-import * as i24 from "../message/message-list.component";
-import * as i25 from "../message/message-input.component";
-import * as i26 from "./conversation-empty-state.component";
-import * as i27 from "./conversation-agent-picker.component";
-import * as i28 from "./conversation-mode-picker.component";
-import * as i29 from "../project/project-selector.component";
-import * as i30 from "../members/members-modal.component";
-import * as i31 from "../export/export-modal.component";
-import * as i32 from "../attachment/image-viewer.component";
-import * as i33 from "./pinned-messages-panel.component";
-import * as i34 from "./forks-popover.component";
+import * as i24 from "../realtime/remote-browser/remote-browser-surface.component";
+import * as i25 from "../message/message-list.component";
+import * as i26 from "../message/message-input.component";
+import * as i27 from "./conversation-empty-state.component";
+import * as i28 from "./conversation-agent-picker.component";
+import * as i29 from "./conversation-mode-picker.component";
+import * as i30 from "../project/project-selector.component";
+import * as i31 from "../members/members-modal.component";
+import * as i32 from "../export/export-modal.component";
+import * as i33 from "../attachment/image-viewer.component";
+import * as i34 from "./pinned-messages-panel.component";
+import * as i35 from "./forks-popover.component";
 const _c0 = ["scrollContainer"];
-const _c1 = ["titleNameInput"];
-const _c2 = ["titleRenameButton"];
-const _c3 = ["forksButton"];
-const _c4 = ["messageInput"];
-const _c5 = (a0, a1, a2, a3, a4) => ({ $implicit: a0, state: a1, agentName: a2, avatarUrl: a3, mode: a4 });
-const _c6 = (a0, a1, a2, a3, a4) => ({ $implicit: a0, conversationTitle: a1, sharedBy: a2, artifactCount: a3, showArtifactIndicator: a4 });
-const _c7 = (a0, a1, a2) => ({ $implicit: a0, conversationId: a1, isProcessing: a2 });
-const _c8 = (a0, a1, a2) => ({ $implicit: a0, content: a1, visible: a2 });
-const _c9 = () => [];
-const _c10 = (a0, a1, a2, a3) => ({ $implicit: a0, greeting: a1, subtext: a2, suggestedPrompts: a3 });
-const _c11 = (a0, a1, a2) => ({ $implicit: a0, ConversationId: a1, IsProcessing: a2 });
-const _forTrack0 = ($index, $item) => $item.conversationId;
+const _c1 = ["conversationRemoteBrowserSurface"];
+const _c2 = ["titleNameInput"];
+const _c3 = ["titleRenameButton"];
+const _c4 = ["forksButton"];
+const _c5 = ["messageInput"];
+const _c6 = (a0, a1, a2, a3, a4) => ({ $implicit: a0, state: a1, agentName: a2, avatarUrl: a3, mode: a4 });
+const _c7 = (a0, a1, a2, a3, a4) => ({ $implicit: a0, conversationTitle: a1, sharedBy: a2, artifactCount: a3, showArtifactIndicator: a4 });
+const _c8 = (a0, a1, a2) => ({ $implicit: a0, conversationId: a1, isProcessing: a2 });
+const _c9 = (a0, a1, a2) => ({ $implicit: a0, content: a1, visible: a2 });
+const _c10 = () => [];
+const _c11 = (a0, a1, a2, a3) => ({ $implicit: a0, greeting: a1, subtext: a2, suggestedPrompts: a3 });
+const _c12 = (a0, a1, a2) => ({ $implicit: a0, ConversationId: a1, IsProcessing: a2 });
+function _forTrack0($index, $item) { return this.NormalizeCachedInputId($item.conversationId); }
 const _forTrack1 = ($index, $item) => $item.artifactId;
 const _forTrack2 = ($index, $item) => $item.versionId;
 function ConversationChatAreaComponent_Conditional_1_Conditional_1_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
 function ConversationChatAreaComponent_Conditional_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, ConversationChatAreaComponent_Conditional_1_Conditional_1_ng_container_0_Template, 1, 0, "ng-container", 28);
+    i0.ɵɵtemplate(0, ConversationChatAreaComponent_Conditional_1_Conditional_1_ng_container_0_Template, 1, 0, "ng-container", 29);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx)("ngTemplateOutletContext", i0.ɵɵpureFunction5(2, _c5, ctx_r0.agentCharacterConfig, (ctx_r0.agentCharacterConfig == null ? null : ctx_r0.agentCharacterConfig.state) ?? "idle", ctx_r0.agentCharacterConfig == null ? null : ctx_r0.agentCharacterConfig.characterName, ctx_r0.agentCharacterConfig == null ? null : ctx_r0.agentCharacterConfig.avatarUrl, (ctx_r0.agentCharacterConfig == null ? null : ctx_r0.agentCharacterConfig.voiceStateMode) ?? "subtle"));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx)("ngTemplateOutletContext", i0.ɵɵpureFunction5(2, _c6, ctx_r0.agentCharacterConfig, (ctx_r0.agentCharacterConfig == null ? null : ctx_r0.agentCharacterConfig.state) ?? "idle", ctx_r0.agentCharacterConfig == null ? null : ctx_r0.agentCharacterConfig.characterName, ctx_r0.agentCharacterConfig == null ? null : ctx_r0.agentCharacterConfig.avatarUrl, (ctx_r0.agentCharacterConfig == null ? null : ctx_r0.agentCharacterConfig.voiceStateMode) ?? "subtle"));
 } }
 function ConversationChatAreaComponent_Conditional_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-chat-agent-presence-default", 27);
+    i0.ɵɵelement(0, "mj-chat-agent-presence-default", 28);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("State", (ctx_r0.agentCharacterConfig == null ? null : ctx_r0.agentCharacterConfig.state) ?? "idle")("AgentName", ctx_r0.agentCharacterConfig == null ? null : ctx_r0.agentCharacterConfig.characterName)("AvatarUrl", ctx_r0.agentCharacterConfig == null ? null : ctx_r0.agentCharacterConfig.avatarUrl)("Mode", (ctx_r0.agentCharacterConfig == null ? null : ctx_r0.agentCharacterConfig.voiceStateMode) ?? "subtle");
 } }
 function ConversationChatAreaComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 26);
-    i0.ɵɵconditionalCreate(1, ConversationChatAreaComponent_Conditional_1_Conditional_1_Template, 1, 8, "ng-container")(2, ConversationChatAreaComponent_Conditional_1_Conditional_2_Template, 1, 4, "mj-chat-agent-presence-default", 27);
+    i0.ɵɵelementStart(0, "div", 27);
+    i0.ɵɵconditionalCreate(1, ConversationChatAreaComponent_Conditional_1_Conditional_1_Template, 1, 8, "ng-container")(2, ConversationChatAreaComponent_Conditional_1_Conditional_2_Template, 1, 4, "mj-chat-agent-presence-default", 28);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     let tmp_4_0;
@@ -115,31 +123,48 @@ function ConversationChatAreaComponent_Conditional_2_ng_container_0_Template(rf,
     i0.ɵɵelementContainer(0);
 } }
 function ConversationChatAreaComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, ConversationChatAreaComponent_Conditional_2_ng_container_0_Template, 1, 0, "ng-container", 28);
+    i0.ɵɵtemplate(0, ConversationChatAreaComponent_Conditional_2_ng_container_0_Template, 1, 0, "ng-container", 29);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx)("ngTemplateOutletContext", i0.ɵɵpureFunction5(2, _c6, ctx_r0.conversation, (ctx_r0.conversation == null ? null : ctx_r0.conversation.Name) ?? null, (ctx_r0.sharedByBadge == null ? null : ctx_r0.sharedByBadge.display) ?? null, ctx_r0.artifactCountDisplay, ctx_r0.showArtifactIndicator));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx)("ngTemplateOutletContext", i0.ɵɵpureFunction5(2, _c7, ctx_r0.conversation, (ctx_r0.conversation == null ? null : ctx_r0.conversation.Name) ?? null, (ctx_r0.sharedByBadge == null ? null : ctx_r0.sharedByBadge.display) ?? null, ctx_r0.artifactCountDisplay, ctx_r0.showArtifactIndicator));
 } }
 function ConversationChatAreaComponent_Conditional_3_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 44);
+    i0.ɵɵelementStart(0, "button", 46);
     i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_3_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.sidebarToggleClicked.emit()); });
-    i0.ɵɵelement(1, "i", 45);
+    i0.ɵɵelement(1, "i", 47);
     i0.ɵɵelementEnd();
 } }
 function ConversationChatAreaComponent_Conditional_3_Conditional_3_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
+function ConversationChatAreaComponent_Conditional_3_Conditional_3_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 50);
+    i0.ɵɵelement(1, "span", 51);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "with ");
+    i0.ɵɵelementStart(4, "b");
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵstyleProp("--agent-accent", ctx_r0.CurrentOwnerAccentVar);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r0.CurrentOwnerAgentName);
+} }
 function ConversationChatAreaComponent_Conditional_3_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, ConversationChatAreaComponent_Conditional_3_Conditional_3_ng_container_0_Template, 1, 0, "ng-container", 46);
+    i0.ɵɵtemplate(0, ConversationChatAreaComponent_Conditional_3_Conditional_3_ng_container_0_Template, 1, 0, "ng-container", 48);
+    i0.ɵɵconditionalCreate(1, ConversationChatAreaComponent_Conditional_3_Conditional_3_Conditional_1_Template, 6, 3, "span", 49);
 } if (rf & 2) {
-    i0.ɵɵnextContext(2);
+    const ctx_r0 = i0.ɵɵnextContext(2);
     const titleBar_r4 = i0.ɵɵreference(5);
     i0.ɵɵproperty("ngTemplateOutlet", titleBar_r4);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.CurrentOwnerAgent ? 1 : -1);
 } }
 function ConversationChatAreaComponent_Conditional_3_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 32);
-    i0.ɵɵelement(1, "i", 47);
+    i0.ɵɵelementStart(0, "span", 33);
+    i0.ɵɵelement(1, "i", 52);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
@@ -151,9 +176,9 @@ function ConversationChatAreaComponent_Conditional_3_Conditional_4_Template(rf,
 } }
 function ConversationChatAreaComponent_Conditional_3_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 48);
+    i0.ɵɵelementStart(0, "button", 53);
     i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_3_Conditional_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.openProjectSelector()); });
-    i0.ɵɵelement(1, "i", 49);
+    i0.ɵɵelement(1, "i", 54);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
@@ -165,22 +190,22 @@ function ConversationChatAreaComponent_Conditional_3_Conditional_5_Template(rf,
 } }
 function ConversationChatAreaComponent_Conditional_3_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 50);
+    i0.ɵɵelementStart(0, "button", 55);
     i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_3_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.viewTestRun(ctx_r0.conversation.TestRunID)); });
-    i0.ɵɵelement(1, "i", 51);
+    i0.ɵɵelement(1, "i", 56);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "Test");
     i0.ɵɵelementEnd()();
 } }
 function ConversationChatAreaComponent_Conditional_3_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 52, 2);
+    i0.ɵɵelementStart(0, "button", 57, 2);
     i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_3_Conditional_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.ToggleForksPopover()); });
-    i0.ɵɵelement(2, "i", 53);
-    i0.ɵɵelementStart(3, "span", 54);
+    i0.ɵɵelement(2, "i", 58);
+    i0.ɵɵelementStart(3, "span", 59);
     i0.ɵɵtext(4, "Forks");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 55);
+    i0.ɵɵelementStart(5, "span", 60);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -192,10 +217,10 @@ function ConversationChatAreaComponent_Conditional_3_Conditional_8_Template(rf,
 } }
 function ConversationChatAreaComponent_Conditional_3_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 56);
+    i0.ɵɵelementStart(0, "button", 61);
     i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_3_Conditional_9_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.TogglePinsPanel()); });
-    i0.ɵɵelement(1, "i", 57);
-    i0.ɵɵelementStart(2, "span", 58);
+    i0.ɵɵelement(1, "i", 62);
+    i0.ɵɵelementStart(2, "span", 63);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -206,10 +231,10 @@ function ConversationChatAreaComponent_Conditional_3_Conditional_9_Template(rf,
 } }
 function ConversationChatAreaComponent_Conditional_3_Conditional_10_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 59);
+    i0.ɵɵelementStart(0, "button", 64);
     i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_3_Conditional_10_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.viewArtifacts()); });
-    i0.ɵɵelement(1, "i", 60);
-    i0.ɵɵelementStart(2, "span", 61);
+    i0.ɵɵelement(1, "i", 65);
+    i0.ɵɵelementStart(2, "span", 66);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -219,10 +244,23 @@ function ConversationChatAreaComponent_Conditional_3_Conditional_10_Template(rf,
 } }
 function ConversationChatAreaComponent_Conditional_3_Conditional_11_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 62);
-    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_3_Conditional_11_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.toggleMembersModal()); });
-    i0.ɵɵelement(1, "i", 63);
-    i0.ɵɵelementStart(2, "span", 64);
+    i0.ɵɵelementStart(0, "button", 67);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_3_Conditional_11_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.ToggleRemoteBrowserPanel()); });
+    i0.ɵɵelement(1, "i", 68);
+    i0.ɵɵelementStart(2, "span", 59);
+    i0.ɵɵtext(3, "Browser");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("active", ctx_r0.ShowRemoteBrowserPanel || ctx_r0.IsRemoteBrowserLive);
+    i0.ɵɵproperty("title", ctx_r0.ShowRemoteBrowserPanel ? "Hide Browser" : ctx_r0.IsRemoteBrowserLive ? "Show Browser (running)" : "Open Browser");
+} }
+function ConversationChatAreaComponent_Conditional_3_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 69);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_3_Conditional_12_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.toggleMembersModal()); });
+    i0.ɵɵelement(1, "i", 70);
+    i0.ɵɵelementStart(2, "span", 71);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -230,27 +268,27 @@ function ConversationChatAreaComponent_Conditional_3_Conditional_11_Template(rf,
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(ctx_r0.memberCount);
 } }
-function ConversationChatAreaComponent_Conditional_3_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-conversation-mode-picker", 65);
-    i0.ɵɵlistener("PresetChanged", function ConversationChatAreaComponent_Conditional_3_Conditional_12_Template_mj_conversation_mode_picker_PresetChanged_0_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OnAgentModePresetChanged($event)); });
+function ConversationChatAreaComponent_Conditional_3_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-conversation-mode-picker", 72);
+    i0.ɵɵlistener("PresetChanged", function ConversationChatAreaComponent_Conditional_3_Conditional_13_Template_mj_conversation_mode_picker_PresetChanged_0_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OnAgentModePresetChanged($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("AgentID", ctx_r0.ModePickerTargetAgentId)("Disabled", ctx_r0.isProcessing);
 } }
-function ConversationChatAreaComponent_Conditional_3_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-conversation-agent-picker", 41);
+function ConversationChatAreaComponent_Conditional_3_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-conversation-agent-picker", 43);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("Conversation", ctx_r0.conversation)("CurrentUser", ctx_r0.currentUser)("AllowedAgentIDs", ctx_r0.AllowedAgentIDs)("Disabled", ctx_r0.EffectiveReadOnly);
 } }
-function ConversationChatAreaComponent_Conditional_3_Conditional_14_Template(rf, ctx) { if (rf & 1) {
-    const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 66);
-    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_3_Conditional_14_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.exportConversation()); });
+function ConversationChatAreaComponent_Conditional_3_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    const _r13 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 73);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_3_Conditional_15_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.exportConversation()); });
     i0.ɵɵelement(1, "i");
-    i0.ɵɵelementStart(2, "span", 54);
+    i0.ɵɵelementStart(2, "span", 59);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -261,12 +299,12 @@ function ConversationChatAreaComponent_Conditional_3_Conditional_14_Template(rf,
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(ctx_r0.exportButtonLabel);
 } }
-function ConversationChatAreaComponent_Conditional_3_Conditional_15_Template(rf, ctx) { if (rf & 1) {
-    const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 66);
-    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_3_Conditional_15_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.shareConversation()); });
-    i0.ɵɵelement(1, "i", 47);
-    i0.ɵɵelementStart(2, "span", 54);
+function ConversationChatAreaComponent_Conditional_3_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 73);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_3_Conditional_16_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r14); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.shareConversation()); });
+    i0.ɵɵelement(1, "i", 52);
+    i0.ɵɵelementStart(2, "span", 59);
     i0.ɵɵtext(3, "Share");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -274,39 +312,40 @@ function ConversationChatAreaComponent_Conditional_3_Conditional_15_Template(rf,
     i0.ɵɵclassProp("shared", ctx_r0.isShared);
     i0.ɵɵproperty("title", ctx_r0.isShared ? "Manage sharing" : "Share conversation");
 } }
-function ConversationChatAreaComponent_Conditional_3_Conditional_16_ng_container_0_Template(rf, ctx) { if (rf & 1) {
+function ConversationChatAreaComponent_Conditional_3_Conditional_17_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
-function ConversationChatAreaComponent_Conditional_3_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, ConversationChatAreaComponent_Conditional_3_Conditional_16_ng_container_0_Template, 1, 0, "ng-container", 28);
+function ConversationChatAreaComponent_Conditional_3_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, ConversationChatAreaComponent_Conditional_3_Conditional_17_ng_container_0_Template, 1, 0, "ng-container", 29);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx)("ngTemplateOutletContext", i0.ɵɵpureFunction3(2, _c7, ctx_r0.conversation, ctx_r0.conversationId, ctx_r0.isProcessing));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx)("ngTemplateOutletContext", i0.ɵɵpureFunction3(2, _c8, ctx_r0.conversation, ctx_r0.conversationId, ctx_r0.isProcessing));
 } }
 function ConversationChatAreaComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 29);
+    i0.ɵɵelementStart(0, "div", 30);
     i0.ɵɵlistener("keydown.escape", function ConversationChatAreaComponent_Conditional_3_Template_div_keydown_escape_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnViewEscape($event)); });
-    i0.ɵɵelementStart(1, "div", 30);
-    i0.ɵɵconditionalCreate(2, ConversationChatAreaComponent_Conditional_3_Conditional_2_Template, 2, 0, "button", 31);
-    i0.ɵɵconditionalCreate(3, ConversationChatAreaComponent_Conditional_3_Conditional_3_Template, 1, 1, "ng-container");
-    i0.ɵɵconditionalCreate(4, ConversationChatAreaComponent_Conditional_3_Conditional_4_Template, 4, 2, "span", 32);
-    i0.ɵɵconditionalCreate(5, ConversationChatAreaComponent_Conditional_3_Conditional_5_Template, 4, 2, "button", 33);
-    i0.ɵɵconditionalCreate(6, ConversationChatAreaComponent_Conditional_3_Conditional_6_Template, 4, 0, "button", 34);
+    i0.ɵɵelementStart(1, "div", 31);
+    i0.ɵɵconditionalCreate(2, ConversationChatAreaComponent_Conditional_3_Conditional_2_Template, 2, 0, "button", 32);
+    i0.ɵɵconditionalCreate(3, ConversationChatAreaComponent_Conditional_3_Conditional_3_Template, 2, 2);
+    i0.ɵɵconditionalCreate(4, ConversationChatAreaComponent_Conditional_3_Conditional_4_Template, 4, 2, "span", 33);
+    i0.ɵɵconditionalCreate(5, ConversationChatAreaComponent_Conditional_3_Conditional_5_Template, 4, 2, "button", 34);
+    i0.ɵɵconditionalCreate(6, ConversationChatAreaComponent_Conditional_3_Conditional_6_Template, 4, 0, "button", 35);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "div", 35);
-    i0.ɵɵconditionalCreate(8, ConversationChatAreaComponent_Conditional_3_Conditional_8_Template, 7, 5, "button", 36);
-    i0.ɵɵconditionalCreate(9, ConversationChatAreaComponent_Conditional_3_Conditional_9_Template, 4, 3, "button", 37);
-    i0.ɵɵconditionalCreate(10, ConversationChatAreaComponent_Conditional_3_Conditional_10_Template, 4, 1, "button", 38);
-    i0.ɵɵconditionalCreate(11, ConversationChatAreaComponent_Conditional_3_Conditional_11_Template, 4, 1, "button", 39);
-    i0.ɵɵconditionalCreate(12, ConversationChatAreaComponent_Conditional_3_Conditional_12_Template, 1, 2, "mj-conversation-mode-picker", 40);
-    i0.ɵɵconditionalCreate(13, ConversationChatAreaComponent_Conditional_3_Conditional_13_Template, 1, 4, "mj-conversation-agent-picker", 41);
-    i0.ɵɵconditionalCreate(14, ConversationChatAreaComponent_Conditional_3_Conditional_14_Template, 4, 4, "button", 42);
-    i0.ɵɵconditionalCreate(15, ConversationChatAreaComponent_Conditional_3_Conditional_15_Template, 4, 3, "button", 43);
-    i0.ɵɵconditionalCreate(16, ConversationChatAreaComponent_Conditional_3_Conditional_16_Template, 1, 6, "ng-container");
+    i0.ɵɵelementStart(7, "div", 36);
+    i0.ɵɵconditionalCreate(8, ConversationChatAreaComponent_Conditional_3_Conditional_8_Template, 7, 5, "button", 37);
+    i0.ɵɵconditionalCreate(9, ConversationChatAreaComponent_Conditional_3_Conditional_9_Template, 4, 3, "button", 38);
+    i0.ɵɵconditionalCreate(10, ConversationChatAreaComponent_Conditional_3_Conditional_10_Template, 4, 1, "button", 39);
+    i0.ɵɵconditionalCreate(11, ConversationChatAreaComponent_Conditional_3_Conditional_11_Template, 4, 3, "button", 40);
+    i0.ɵɵconditionalCreate(12, ConversationChatAreaComponent_Conditional_3_Conditional_12_Template, 4, 1, "button", 41);
+    i0.ɵɵconditionalCreate(13, ConversationChatAreaComponent_Conditional_3_Conditional_13_Template, 1, 2, "mj-conversation-mode-picker", 42);
+    i0.ɵɵconditionalCreate(14, ConversationChatAreaComponent_Conditional_3_Conditional_14_Template, 1, 4, "mj-conversation-agent-picker", 43);
+    i0.ɵɵconditionalCreate(15, ConversationChatAreaComponent_Conditional_3_Conditional_15_Template, 4, 4, "button", 44);
+    i0.ɵɵconditionalCreate(16, ConversationChatAreaComponent_Conditional_3_Conditional_16_Template, 4, 3, "button", 45);
+    i0.ɵɵconditionalCreate(17, ConversationChatAreaComponent_Conditional_3_Conditional_17_Template, 1, 6, "ng-container");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    let tmp_17_0;
+    let tmp_18_0;
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
     i0.ɵɵclassProp("with-sidebar-toggle", ctx_r0.showSidebarToggle);
@@ -327,85 +366,87 @@ function ConversationChatAreaComponent_Conditional_3_Template(rf, ctx) { if (rf
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r0.showArtifactIndicator && ctx_r0.artifactCountDisplay > 0 ? 10 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.memberCount > 1 ? 11 : -1);
+    i0.ɵɵconditional(ctx_r0.AllowRemoteBrowser && ctx_r0.conversation ? 11 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.memberCount > 1 ? 12 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(!ctx_r0.overlayMode && ctx_r0.showAgentModePicker && ctx_r0.ModePickerTargetAgentId && !ctx_r0.EffectiveReadOnly ? 12 : -1);
+    i0.ɵɵconditional(!ctx_r0.overlayMode && ctx_r0.showAgentModePicker && ctx_r0.ModePickerTargetAgentId && !ctx_r0.EffectiveReadOnly ? 13 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.showAgentPicker && ctx_r0.conversation ? 13 : -1);
+    i0.ɵɵconditional(ctx_r0.showAgentPicker && ctx_r0.conversation ? 14 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.showExportButton ? 14 : -1);
+    i0.ɵɵconditional(ctx_r0.showExportButton ? 15 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.showShareButton && ctx_r0.canShareConversation ? 15 : -1);
+    i0.ɵɵconditional(ctx_r0.showShareButton && ctx_r0.canShareConversation ? 16 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional((tmp_17_0 = ctx_r0.slotTemplate("headerActions")) ? 16 : -1, tmp_17_0);
+    i0.ɵɵconditional((tmp_18_0 = ctx_r0.slotTemplate("headerActions")) ? 17 : -1, tmp_18_0);
 } }
 function ConversationChatAreaComponent_ng_template_4_Conditional_1_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
 function ConversationChatAreaComponent_ng_template_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, ConversationChatAreaComponent_ng_template_4_Conditional_1_ng_container_0_Template, 1, 0, "ng-container", 46);
+    i0.ɵɵtemplate(0, ConversationChatAreaComponent_ng_template_4_Conditional_1_ng_container_0_Template, 1, 0, "ng-container", 48);
 } if (rf & 2) {
     i0.ɵɵnextContext(2);
-    const titleName_r14 = i0.ɵɵreference(7);
-    i0.ɵɵproperty("ngTemplateOutlet", titleName_r14);
+    const titleName_r15 = i0.ɵɵreference(7);
+    i0.ɵɵproperty("ngTemplateOutlet", titleName_r15);
 } }
 function ConversationChatAreaComponent_ng_template_4_Conditional_2_For_3_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    const _r16 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "li", 77)(1, "button", 78);
-    i0.ɵɵlistener("click", function ConversationChatAreaComponent_ng_template_4_Conditional_2_For_3_Conditional_0_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r16); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.ShowWholePath()); });
+    const _r17 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "li", 84)(1, "button", 85);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_ng_template_4_Conditional_2_For_3_Conditional_0_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r17); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.ShowWholePath()); });
     i0.ɵɵtext(2, "\u2026");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(3, "i", 76);
+    i0.ɵɵelement(3, "i", 83);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(4);
     i0.ɵɵclassProp("collapses-wide", ctx_r0.HeaderPath.CollapsesWide);
 } }
 function ConversationChatAreaComponent_ng_template_4_Conditional_2_For_3_Template(rf, ctx) { if (rf & 1) {
-    const _r15 = i0.ɵɵgetCurrentView();
-    i0.ɵɵconditionalCreate(0, ConversationChatAreaComponent_ng_template_4_Conditional_2_For_3_Conditional_0_Template, 4, 2, "li", 72);
-    i0.ɵɵelementStart(1, "li", 73)(2, "button", 74);
-    i0.ɵɵlistener("click", function ConversationChatAreaComponent_ng_template_4_Conditional_2_For_3_Template_button_click_2_listener() { const parent_r17 = i0.ɵɵrestoreView(_r15).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OpenCrumb(parent_r17.Crumb)); });
-    i0.ɵɵelementStart(3, "span", 75);
+    const _r16 = i0.ɵɵgetCurrentView();
+    i0.ɵɵconditionalCreate(0, ConversationChatAreaComponent_ng_template_4_Conditional_2_For_3_Conditional_0_Template, 4, 2, "li", 79);
+    i0.ɵɵelementStart(1, "li", 80)(2, "button", 81);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_ng_template_4_Conditional_2_For_3_Template_button_click_2_listener() { const parent_r18 = i0.ɵɵrestoreView(_r16).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OpenCrumb(parent_r18.Crumb)); });
+    i0.ɵɵelementStart(3, "span", 82);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelement(5, "i", 76);
+    i0.ɵɵelement(5, "i", 83);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const parent_r17 = ctx.$implicit;
-    const $index_r18 = ctx.$index;
-    i0.ɵɵconditional($index_r18 === 1 ? 0 : -1);
+    const parent_r18 = ctx.$implicit;
+    const $index_r19 = ctx.$index;
+    i0.ɵɵconditional($index_r19 === 1 ? 0 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("path-middle", parent_r17.IsMiddle)("collapsed-wide", parent_r17.CollapsedWide);
+    i0.ɵɵclassProp("path-middle", parent_r18.IsMiddle)("collapsed-wide", parent_r18.CollapsedWide);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("title", "Back to " + parent_r17.Crumb.Label);
+    i0.ɵɵproperty("title", "Back to " + parent_r18.Crumb.Label);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(parent_r17.Crumb.Label);
+    i0.ɵɵtextInterpolate(parent_r18.Crumb.Label);
 } }
 function ConversationChatAreaComponent_ng_template_4_Conditional_2_ng_container_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
 function ConversationChatAreaComponent_ng_template_4_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "nav", 68)(1, "ol", 69);
+    i0.ɵɵelementStart(0, "nav", 75)(1, "ol", 76);
     i0.ɵɵrepeaterCreate(2, ConversationChatAreaComponent_ng_template_4_Conditional_2_For_3_Template, 6, 7, null, null, i0.ɵɵrepeaterTrackByIndex);
-    i0.ɵɵelementStart(4, "li", 70);
-    i0.ɵɵelement(5, "i", 71);
-    i0.ɵɵtemplate(6, ConversationChatAreaComponent_ng_template_4_Conditional_2_ng_container_6_Template, 1, 0, "ng-container", 46);
+    i0.ɵɵelementStart(4, "li", 77);
+    i0.ɵɵelement(5, "i", 78);
+    i0.ɵɵtemplate(6, ConversationChatAreaComponent_ng_template_4_Conditional_2_ng_container_6_Template, 1, 0, "ng-container", 48);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
-    const titleName_r14 = i0.ɵɵreference(7);
+    const titleName_r15 = i0.ɵɵreference(7);
     i0.ɵɵadvance(2);
     i0.ɵɵrepeater(ctx_r0.HeaderPath.Parents);
     i0.ɵɵadvance(3);
     i0.ɵɵclassMap("chat-title-kind " + ctx_r0.OpenViewIcon);
     i0.ɵɵattribute("data-kind", ctx_r0.OpenViewKind);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", titleName_r14);
+    i0.ɵɵproperty("ngTemplateOutlet", titleName_r15);
 } }
 function ConversationChatAreaComponent_ng_template_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 67);
-    i0.ɵɵconditionalCreate(1, ConversationChatAreaComponent_ng_template_4_Conditional_1_Template, 1, 1, "ng-container")(2, ConversationChatAreaComponent_ng_template_4_Conditional_2_Template, 7, 4, "nav", 68);
+    i0.ɵɵelementStart(0, "div", 74);
+    i0.ɵɵconditionalCreate(1, ConversationChatAreaComponent_ng_template_4_Conditional_1_Template, 1, 1, "ng-container")(2, ConversationChatAreaComponent_ng_template_4_Conditional_2_Template, 7, 4, "nav", 75);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -413,10 +454,10 @@ function ConversationChatAreaComponent_ng_template_4_Template(rf, ctx) { if (rf
     i0.ɵɵconditional(ctx_r0.OpenView.Kind === "Main" ? 1 : 2);
 } }
 function ConversationChatAreaComponent_ng_template_6_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    const _r19 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "input", 80, 3);
-    i0.ɵɵtwoWayListener("ngModelChange", function ConversationChatAreaComponent_ng_template_6_Conditional_0_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r19); const ctx_r0 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r0.TitleRenameText, $event) || (ctx_r0.TitleRenameText = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("keydown.enter", function ConversationChatAreaComponent_ng_template_6_Conditional_0_Template_input_keydown_enter_0_listener($event) { i0.ɵɵrestoreView(_r19); const ctx_r0 = i0.ɵɵnextContext(2); $event.preventDefault(); return i0.ɵɵresetView(ctx_r0.SaveTitleRename(true)); })("keydown.escape", function ConversationChatAreaComponent_ng_template_6_Conditional_0_Template_input_keydown_escape_0_listener($event) { i0.ɵɵrestoreView(_r19); const ctx_r0 = i0.ɵɵnextContext(2); $event.preventDefault(); $event.stopPropagation(); return i0.ɵɵresetView(ctx_r0.CancelTitleRename()); })("blur", function ConversationChatAreaComponent_ng_template_6_Conditional_0_Template_input_blur_0_listener() { i0.ɵɵrestoreView(_r19); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.SaveTitleRename()); });
+    const _r20 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "input", 87, 3);
+    i0.ɵɵtwoWayListener("ngModelChange", function ConversationChatAreaComponent_ng_template_6_Conditional_0_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r20); const ctx_r0 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r0.TitleRenameText, $event) || (ctx_r0.TitleRenameText = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("keydown.enter", function ConversationChatAreaComponent_ng_template_6_Conditional_0_Template_input_keydown_enter_0_listener($event) { i0.ɵɵrestoreView(_r20); const ctx_r0 = i0.ɵɵnextContext(2); $event.preventDefault(); return i0.ɵɵresetView(ctx_r0.SaveTitleRename(true)); })("keydown.escape", function ConversationChatAreaComponent_ng_template_6_Conditional_0_Template_input_keydown_escape_0_listener($event) { i0.ɵɵrestoreView(_r20); const ctx_r0 = i0.ɵɵnextContext(2); $event.preventDefault(); $event.stopPropagation(); return i0.ɵɵresetView(ctx_r0.CancelTitleRename()); })("blur", function ConversationChatAreaComponent_ng_template_6_Conditional_0_Template_input_blur_0_listener() { i0.ɵɵrestoreView(_r20); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.SaveTitleRename()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
@@ -424,10 +465,10 @@ function ConversationChatAreaComponent_ng_template_6_Conditional_0_Template(rf,
     i0.ɵɵattribute("aria-label", ctx_r0.TitleRenameLabel);
 } }
 function ConversationChatAreaComponent_ng_template_6_Conditional_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r20 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 83, 4);
-    i0.ɵɵlistener("click", function ConversationChatAreaComponent_ng_template_6_Conditional_1_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r20); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.StartTitleRename()); });
-    i0.ɵɵelement(2, "i", 84);
+    const _r21 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 90, 4);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_ng_template_6_Conditional_1_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r21); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.StartTitleRename()); });
+    i0.ɵɵelement(2, "i", 91);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
@@ -435,10 +476,10 @@ function ConversationChatAreaComponent_ng_template_6_Conditional_1_Conditional_2
     i0.ɵɵattribute("aria-label", ctx_r0.TitleRenameLabel);
 } }
 function ConversationChatAreaComponent_ng_template_6_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "h2", 81);
+    i0.ɵɵelementStart(0, "h2", 88);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(2, ConversationChatAreaComponent_ng_template_6_Conditional_1_Conditional_2_Template, 3, 2, "button", 82);
+    i0.ɵɵconditionalCreate(2, ConversationChatAreaComponent_ng_template_6_Conditional_1_Conditional_2_Template, 3, 2, "button", 89);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("title", ctx_r0.HeaderTitle);
@@ -448,7 +489,7 @@ function ConversationChatAreaComponent_ng_template_6_Conditional_1_Template(rf,
     i0.ɵɵconditional(ctx_r0.CanRenameTitle ? 2 : -1);
 } }
 function ConversationChatAreaComponent_ng_template_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, ConversationChatAreaComponent_ng_template_6_Conditional_0_Template, 2, 2, "input", 79)(1, ConversationChatAreaComponent_ng_template_6_Conditional_1_Template, 3, 3);
+    i0.ɵɵconditionalCreate(0, ConversationChatAreaComponent_ng_template_6_Conditional_0_Template, 2, 2, "input", 86)(1, ConversationChatAreaComponent_ng_template_6_Conditional_1_Template, 3, 3);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵconditional(ctx_r0.IsRenamingTitle ? 0 : 1);
@@ -457,28 +498,28 @@ function ConversationChatAreaComponent_Conditional_9_ng_container_1_Template(rf,
     i0.ɵɵelementContainer(0);
 } }
 function ConversationChatAreaComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 13);
-    i0.ɵɵtemplate(1, ConversationChatAreaComponent_Conditional_9_ng_container_1_Template, 1, 0, "ng-container", 28);
+    i0.ɵɵelementStart(0, "div", 14);
+    i0.ɵɵtemplate(1, ConversationChatAreaComponent_Conditional_9_ng_container_1_Template, 1, 0, "ng-container", 29);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.slotTemplate("demonstrationSurface"))("ngTemplateOutletContext", i0.ɵɵpureFunction3(2, _c8, ctx_r0.demonstrationSurfaceContent, ctx_r0.demonstrationSurfaceContent, ctx_r0.showDemonstrationSurface));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.slotTemplate("demonstrationSurface"))("ngTemplateOutletContext", i0.ɵɵpureFunction3(2, _c9, ctx_r0.demonstrationSurfaceContent, ctx_r0.demonstrationSurfaceContent, ctx_r0.showDemonstrationSurface));
 } }
 function ConversationChatAreaComponent_Conditional_11_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 85);
-    i0.ɵɵelement(1, "mj-loading", 86);
+    i0.ɵɵelementStart(0, "div", 92);
+    i0.ɵɵelement(1, "mj-loading", 93);
     i0.ɵɵelementEnd();
 } }
 function ConversationChatAreaComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, ConversationChatAreaComponent_Conditional_11_Conditional_0_Template, 2, 0, "div", 85);
+    i0.ɵɵconditionalCreate(0, ConversationChatAreaComponent_Conditional_11_Conditional_0_Template, 2, 0, "div", 92);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵconditional(ctx_r0.showLoadingState ? 0 : -1);
 } }
 function ConversationChatAreaComponent_Conditional_12_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 87);
-    i0.ɵɵelement(1, "i", 89);
+    i0.ɵɵelementStart(0, "div", 94);
+    i0.ɵɵelement(1, "i", 96);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
@@ -491,30 +532,30 @@ function ConversationChatAreaComponent_Conditional_12_Conditional_1_ng_container
     i0.ɵɵelementContainer(0);
 } }
 function ConversationChatAreaComponent_Conditional_12_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, ConversationChatAreaComponent_Conditional_12_Conditional_1_ng_container_0_Template, 1, 0, "ng-container", 28);
+    i0.ɵɵtemplate(0, ConversationChatAreaComponent_Conditional_12_Conditional_1_ng_container_0_Template, 1, 0, "ng-container", 29);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx)("ngTemplateOutletContext", i0.ɵɵpureFunction4(3, _c10, ctx_r0.emptyStateConfig, (ctx_r0.emptyStateConfig == null ? null : ctx_r0.emptyStateConfig.greeting) ?? ctx_r0.emptyStateGreeting, ctx_r0.emptyStateConfig == null ? null : ctx_r0.emptyStateConfig.subtext, (ctx_r0.emptyStateConfig == null ? null : ctx_r0.emptyStateConfig.suggestedPrompts) ?? i0.ɵɵpureFunction0(2, _c9)));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx)("ngTemplateOutletContext", i0.ɵɵpureFunction4(3, _c11, ctx_r0.emptyStateConfig, (ctx_r0.emptyStateConfig == null ? null : ctx_r0.emptyStateConfig.greeting) ?? ctx_r0.emptyStateGreeting, ctx_r0.emptyStateConfig == null ? null : ctx_r0.emptyStateConfig.subtext, (ctx_r0.emptyStateConfig == null ? null : ctx_r0.emptyStateConfig.suggestedPrompts) ?? i0.ɵɵpureFunction0(2, _c10)));
 } }
 function ConversationChatAreaComponent_Conditional_12_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r21 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-conversation-empty-state", 90);
-    i0.ɵɵlistener("initialDraftApplied", function ConversationChatAreaComponent_Conditional_12_Conditional_2_Template_mj_conversation_empty_state_initialDraftApplied_0_listener() { i0.ɵɵrestoreView(_r21); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OnComposerDraftApplied()); })("DraftStateChanged", function ConversationChatAreaComponent_Conditional_12_Conditional_2_Template_mj_conversation_empty_state_DraftStateChanged_0_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OnDraftStateChanged(null, $event)); })("ComposerBlurred", function ConversationChatAreaComponent_Conditional_12_Conditional_2_Template_mj_conversation_empty_state_ComposerBlurred_0_listener() { i0.ɵɵrestoreView(_r21); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OnComposerBlurred()); })("sidebarToggleClicked", function ConversationChatAreaComponent_Conditional_12_Conditional_2_Template_mj_conversation_empty_state_sidebarToggleClicked_0_listener() { i0.ɵɵrestoreView(_r21); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.sidebarToggleClicked.emit()); })("messageSent", function ConversationChatAreaComponent_Conditional_12_Conditional_2_Template_mj_conversation_empty_state_messageSent_0_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onEmptyStateMessageSent($event)); });
+    const _r22 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-conversation-empty-state", 97);
+    i0.ɵɵlistener("initialDraftApplied", function ConversationChatAreaComponent_Conditional_12_Conditional_2_Template_mj_conversation_empty_state_initialDraftApplied_0_listener() { i0.ɵɵrestoreView(_r22); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OnComposerDraftApplied()); })("DraftStateChanged", function ConversationChatAreaComponent_Conditional_12_Conditional_2_Template_mj_conversation_empty_state_DraftStateChanged_0_listener($event) { i0.ɵɵrestoreView(_r22); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OnDraftStateChanged(null, $event)); })("ComposerBlurred", function ConversationChatAreaComponent_Conditional_12_Conditional_2_Template_mj_conversation_empty_state_ComposerBlurred_0_listener() { i0.ɵɵrestoreView(_r22); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OnComposerBlurred()); })("sidebarToggleClicked", function ConversationChatAreaComponent_Conditional_12_Conditional_2_Template_mj_conversation_empty_state_sidebarToggleClicked_0_listener() { i0.ɵɵrestoreView(_r22); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.sidebarToggleClicked.emit()); })("messageSent", function ConversationChatAreaComponent_Conditional_12_Conditional_2_Template_mj_conversation_empty_state_messageSent_0_listener($event) { i0.ɵɵrestoreView(_r22); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onEmptyStateMessageSent($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("currentUser", ctx_r0.currentUser)("initialDraft", ctx_r0.GetInitialDraftFor(null))("disabled", ctx_r0.isProcessing)("showSidebarToggle", ctx_r0.showSidebarToggle)("overlayMode", ctx_r0.overlayMode)("greeting", (ctx_r0.emptyStateConfig == null ? null : ctx_r0.emptyStateConfig.greeting) ?? ctx_r0.emptyStateGreeting)("showSuggestedPrompts", ctx_r0.showSuggestedPrompts)("enableAttachments", ctx_r0.enableAttachments && ctx_r0.allowAttachments)("enableMentions", ctx_r0.allowMentions)("enableAgentMentions", ctx_r0.allowAgentMentions)("enableEntityMentions", ctx_r0.allowEntityMentions)("enableSkillCommands", ctx_r0.allowSkillCommands)("AllowedAgentIDs", ctx_r0.AllowedAgentIDs)("MentionPeople", ctx_r0.MentionPeople)("ComposerExtraTemplate", ctx_r0.slotTemplate("composerExtra"))("maxAttachments", ctx_r0.maxAttachments)("maxAttachmentSizeBytes", ctx_r0.maxAttachmentSizeBytes)("acceptedFileTypes", ctx_r0.acceptedFileTypes);
 } }
 function ConversationChatAreaComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, ConversationChatAreaComponent_Conditional_12_Conditional_0_Template, 4, 1, "div", 87)(1, ConversationChatAreaComponent_Conditional_12_Conditional_1_Template, 1, 8, "ng-container")(2, ConversationChatAreaComponent_Conditional_12_Conditional_2_Template, 1, 18, "mj-conversation-empty-state", 88);
+    i0.ɵɵconditionalCreate(0, ConversationChatAreaComponent_Conditional_12_Conditional_0_Template, 4, 1, "div", 94)(1, ConversationChatAreaComponent_Conditional_12_Conditional_1_Template, 1, 8, "ng-container")(2, ConversationChatAreaComponent_Conditional_12_Conditional_2_Template, 1, 18, "mj-conversation-empty-state", 95);
 } if (rf & 2) {
     let tmp_3_0;
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵconditional(ctx_r0.ReadOnly ? 0 : (tmp_3_0 = ctx_r0.slotTemplate("emptyState")) ? 1 : 2, tmp_3_0);
 } }
 function ConversationChatAreaComponent_Conditional_13_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 87);
-    i0.ɵɵelement(1, "i", 89);
+    i0.ɵɵelementStart(0, "div", 94);
+    i0.ɵɵelement(1, "i", 96);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
@@ -527,19 +568,19 @@ function ConversationChatAreaComponent_Conditional_13_Conditional_4_Conditional_
     i0.ɵɵelementContainer(0);
 } }
 function ConversationChatAreaComponent_Conditional_13_Conditional_4_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 93);
-    i0.ɵɵtemplate(1, ConversationChatAreaComponent_Conditional_13_Conditional_4_Conditional_0_ng_container_1_Template, 1, 0, "ng-container", 28);
+    i0.ɵɵelementStart(0, "div", 100);
+    i0.ɵɵtemplate(1, ConversationChatAreaComponent_Conditional_13_Conditional_4_Conditional_0_ng_container_1_Template, 1, 0, "ng-container", 29);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx)("ngTemplateOutletContext", i0.ɵɵpureFunction3(2, _c11, ctx_r0.conversation, ctx_r0.conversationId, ctx_r0.isProcessing));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx)("ngTemplateOutletContext", i0.ɵɵpureFunction3(2, _c12, ctx_r0.conversation, ctx_r0.conversationId, ctx_r0.isProcessing));
 } }
 function ConversationChatAreaComponent_Conditional_13_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    const _r22 = i0.ɵɵgetCurrentView();
-    i0.ɵɵconditionalCreate(0, ConversationChatAreaComponent_Conditional_13_Conditional_4_Conditional_0_Template, 2, 6, "div", 93);
-    i0.ɵɵelementStart(1, "div", 94)(2, "mj-message-input", 95, 5);
-    i0.ɵɵlistener("initialDraftApplied", function ConversationChatAreaComponent_Conditional_13_Conditional_4_Template_mj_message_input_initialDraftApplied_2_listener() { i0.ɵɵrestoreView(_r22); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OnComposerDraftApplied()); })("DraftStateChanged", function ConversationChatAreaComponent_Conditional_13_Conditional_4_Template_mj_message_input_DraftStateChanged_2_listener($event) { i0.ɵɵrestoreView(_r22); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OnDraftStateChanged(null, $event)); })("ComposerBlurred", function ConversationChatAreaComponent_Conditional_13_Conditional_4_Template_mj_message_input_ComposerBlurred_2_listener() { i0.ɵɵrestoreView(_r22); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OnComposerBlurred()); })("emptyStateSubmit", function ConversationChatAreaComponent_Conditional_13_Conditional_4_Template_mj_message_input_emptyStateSubmit_2_listener($event) { i0.ɵɵrestoreView(_r22); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onEmptyStateMessageSent($event)); });
+    const _r23 = i0.ɵɵgetCurrentView();
+    i0.ɵɵconditionalCreate(0, ConversationChatAreaComponent_Conditional_13_Conditional_4_Conditional_0_Template, 2, 6, "div", 100);
+    i0.ɵɵelementStart(1, "div", 101)(2, "mj-message-input", 102, 5);
+    i0.ɵɵlistener("initialDraftApplied", function ConversationChatAreaComponent_Conditional_13_Conditional_4_Template_mj_message_input_initialDraftApplied_2_listener() { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OnComposerDraftApplied()); })("DraftStateChanged", function ConversationChatAreaComponent_Conditional_13_Conditional_4_Template_mj_message_input_DraftStateChanged_2_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OnDraftStateChanged(null, $event)); })("ComposerBlurred", function ConversationChatAreaComponent_Conditional_13_Conditional_4_Template_mj_message_input_ComposerBlurred_2_listener() { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OnComposerBlurred()); })("emptyStateSubmit", function ConversationChatAreaComponent_Conditional_13_Conditional_4_Template_mj_message_input_emptyStateSubmit_2_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onEmptyStateMessageSent($event)); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     let tmp_5_0;
@@ -549,10 +590,10 @@ function ConversationChatAreaComponent_Conditional_13_Conditional_4_Template(rf,
     i0.ɵɵproperty("emptyStateMode", true)("initialDraft", ctx_r0.GetInitialDraftFor(null))("currentUser", ctx_r0.currentUser)("disabled", ctx_r0.isProcessing)("ReadOnly", ctx_r0.EffectiveReadOnly)("appContext", ctx_r0.appContext)("applicationId", ctx_r0.applicationId)("defaultAgentId", ctx_r0.defaultAgentId)("enableAttachments", ctx_r0.enableAttachments && ctx_r0.allowAttachments)("enableMentions", ctx_r0.allowMentions)("enableAgentMentions", ctx_r0.allowAgentMentions)("enableEntityMentions", ctx_r0.allowEntityMentions)("enableSkillCommands", ctx_r0.allowSkillCommands)("enablePlanMode", ctx_r0.allowPlanMode)("enableRealtime", ctx_r0.allowRealtime)("AllowedAgentIDs", ctx_r0.AllowedAgentIDs)("MentionPeople", ctx_r0.MentionPeople)("maxAttachments", ctx_r0.maxAttachments)("maxAttachmentSizeBytes", ctx_r0.maxAttachmentSizeBytes)("acceptedFileTypes", ctx_r0.acceptedFileTypes);
 } }
 function ConversationChatAreaComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 15);
-    i0.ɵɵelement(1, "div", 91);
-    i0.ɵɵelementStart(2, "div", 92);
-    i0.ɵɵconditionalCreate(3, ConversationChatAreaComponent_Conditional_13_Conditional_3_Template, 4, 1, "div", 87)(4, ConversationChatAreaComponent_Conditional_13_Conditional_4_Template, 4, 21);
+    i0.ɵɵelementStart(0, "div", 16);
+    i0.ɵɵelement(1, "div", 98);
+    i0.ɵɵelementStart(2, "div", 99);
+    i0.ɵɵconditionalCreate(3, ConversationChatAreaComponent_Conditional_13_Conditional_3_Template, 4, 1, "div", 94)(4, ConversationChatAreaComponent_Conditional_13_Conditional_4_Template, 4, 21);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -563,10 +604,10 @@ function ConversationChatAreaComponent_Conditional_14_Conditional_1_ng_container
     i0.ɵɵelementContainer(0);
 } }
 function ConversationChatAreaComponent_Conditional_14_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r24 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 102);
-    i0.ɵɵlistener("keydown.escape", function ConversationChatAreaComponent_Conditional_14_Conditional_1_Template_div_keydown_escape_0_listener($event) { i0.ɵɵrestoreView(_r24); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OnViewEscape($event)); });
-    i0.ɵɵtemplate(1, ConversationChatAreaComponent_Conditional_14_Conditional_1_ng_container_1_Template, 1, 0, "ng-container", 46);
+    const _r25 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 109);
+    i0.ɵɵlistener("keydown.escape", function ConversationChatAreaComponent_Conditional_14_Conditional_1_Template_div_keydown_escape_0_listener($event) { i0.ɵɵrestoreView(_r25); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OnViewEscape($event)); });
+    i0.ɵɵtemplate(1, ConversationChatAreaComponent_Conditional_14_Conditional_1_ng_container_1_Template, 1, 0, "ng-container", 48);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵnextContext(2);
@@ -575,8 +616,8 @@ function ConversationChatAreaComponent_Conditional_14_Conditional_1_Template(rf,
     i0.ɵɵproperty("ngTemplateOutlet", titleBar_r4);
 } }
 function ConversationChatAreaComponent_Conditional_14_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 97);
-    i0.ɵɵelement(1, "mj-loading", 103);
+    i0.ɵɵelementStart(0, "div", 104);
+    i0.ɵɵelement(1, "mj-loading", 110);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
@@ -584,20 +625,20 @@ function ConversationChatAreaComponent_Conditional_14_Conditional_2_Template(rf,
     i0.ɵɵproperty("text", ctx_r0.uploadingMessage);
 } }
 function ConversationChatAreaComponent_Conditional_14_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    const _r25 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "span", 104);
-    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_14_Conditional_6_Template_span_click_0_listener() { i0.ɵɵrestoreView(_r25); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.scrollToBottomAnimate()); });
-    i0.ɵɵelement(1, "i", 105);
+    const _r26 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "span", 111);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_14_Conditional_6_Template_span_click_0_listener() { i0.ɵɵrestoreView(_r26); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.scrollToBottomAnimate()); });
+    i0.ɵɵelement(1, "i", 112);
     i0.ɵɵelementEnd();
 } }
 function ConversationChatAreaComponent_Conditional_14_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 101);
-    i0.ɵɵelement(1, "mj-loading", 106);
+    i0.ɵɵelementStart(0, "div", 108);
+    i0.ɵɵelement(1, "mj-loading", 113);
     i0.ɵɵelementEnd();
 } }
 function ConversationChatAreaComponent_Conditional_14_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 87);
-    i0.ɵɵelement(1, "i", 89);
+    i0.ɵɵelementStart(0, "div", 94);
+    i0.ɵɵelement(1, "i", 96);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
@@ -607,8 +648,8 @@ function ConversationChatAreaComponent_Conditional_14_Conditional_9_Template(rf,
     i0.ɵɵtextInterpolate(ctx_r0.ReadOnlyMessage || "You have view-only access to this conversation.");
 } }
 function ConversationChatAreaComponent_Conditional_14_Conditional_10_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 87);
-    i0.ɵɵelement(1, "i", 89);
+    i0.ɵɵelementStart(0, "div", 94);
+    i0.ɵɵelement(1, "i", 96);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "You have view-only access to this conversation.");
     i0.ɵɵelementEnd()();
@@ -617,26 +658,26 @@ function ConversationChatAreaComponent_Conditional_14_Conditional_10_Conditional
     i0.ɵɵelementContainer(0);
 } }
 function ConversationChatAreaComponent_Conditional_14_Conditional_10_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 93);
-    i0.ɵɵtemplate(1, ConversationChatAreaComponent_Conditional_14_Conditional_10_Conditional_1_ng_container_1_Template, 1, 0, "ng-container", 28);
+    i0.ɵɵelementStart(0, "div", 100);
+    i0.ɵɵtemplate(1, ConversationChatAreaComponent_Conditional_14_Conditional_10_Conditional_1_ng_container_1_Template, 1, 0, "ng-container", 29);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx)("ngTemplateOutletContext", i0.ɵɵpureFunction3(2, _c11, ctx_r0.conversation, ctx_r0.conversationId, ctx_r0.isProcessing));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx)("ngTemplateOutletContext", i0.ɵɵpureFunction3(2, _c12, ctx_r0.conversation, ctx_r0.conversationId, ctx_r0.isProcessing));
 } }
 function ConversationChatAreaComponent_Conditional_14_Conditional_10_For_4_Template(rf, ctx) { if (rf & 1) {
-    const _r26 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-message-input", 109, 7);
-    i0.ɵɵlistener("DraftStateChanged", function ConversationChatAreaComponent_Conditional_14_Conditional_10_For_4_Template_mj_message_input_DraftStateChanged_0_listener($event) { const inputRef_r27 = i0.ɵɵrestoreView(_r26).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnDraftStateChanged(inputRef_r27.conversationId, $event)); })("ComposerBlurred", function ConversationChatAreaComponent_Conditional_14_Conditional_10_For_4_Template_mj_message_input_ComposerBlurred_0_listener() { i0.ɵɵrestoreView(_r26); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnComposerBlurred()); })("StopClicked", function ConversationChatAreaComponent_Conditional_14_Conditional_10_For_4_Template_mj_message_input_StopClicked_0_listener() { i0.ɵɵrestoreView(_r26); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnComposerStopClicked()); })("initialMessageAutoSendStarted", function ConversationChatAreaComponent_Conditional_14_Conditional_10_For_4_Template_mj_message_input_initialMessageAutoSendStarted_0_listener($event) { i0.ɵɵrestoreView(_r26); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onInitialMessageAutoSendStarted($event)); })("initialMessageAutoSendFailed", function ConversationChatAreaComponent_Conditional_14_Conditional_10_For_4_Template_mj_message_input_initialMessageAutoSendFailed_0_listener($event) { i0.ɵɵrestoreView(_r26); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onInitialMessageAutoSendFailed($event)); })("messageSent", function ConversationChatAreaComponent_Conditional_14_Conditional_10_For_4_Template_mj_message_input_messageSent_0_listener($event) { i0.ɵɵrestoreView(_r26); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onMessageSent($event)); })("MessageStreamed", function ConversationChatAreaComponent_Conditional_14_Conditional_10_For_4_Template_mj_message_input_MessageStreamed_0_listener($event) { i0.ɵɵrestoreView(_r26); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnMessageStreamed($event)); })("agentResponse", function ConversationChatAreaComponent_Conditional_14_Conditional_10_For_4_Template_mj_message_input_agentResponse_0_listener($event) { i0.ɵɵrestoreView(_r26); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onAgentResponse($event)); })("agentRunDetected", function ConversationChatAreaComponent_Conditional_14_Conditional_10_For_4_Template_mj_message_input_agentRunDetected_0_listener($event) { i0.ɵɵrestoreView(_r26); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onAgentRunDetected($event)); })("agentRunUpdate", function ConversationChatAreaComponent_Conditional_14_Conditional_10_For_4_Template_mj_message_input_agentRunUpdate_0_listener($event) { i0.ɵɵrestoreView(_r26); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onAgentRunUpdate($event)); })("messageComplete", function ConversationChatAreaComponent_Conditional_14_Conditional_10_For_4_Template_mj_message_input_messageComplete_0_listener($event) { i0.ɵɵrestoreView(_r26); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onMessageComplete($event)); })("artifactCreated", function ConversationChatAreaComponent_Conditional_14_Conditional_10_For_4_Template_mj_message_input_artifactCreated_0_listener($event) { i0.ɵɵrestoreView(_r26); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onArtifactCreated($event)); })("conversationRenamed", function ConversationChatAreaComponent_Conditional_14_Conditional_10_For_4_Template_mj_message_input_conversationRenamed_0_listener($event) { i0.ɵɵrestoreView(_r26); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onConversationRenamed($event)); })("intentCheckStarted", function ConversationChatAreaComponent_Conditional_14_Conditional_10_For_4_Template_mj_message_input_intentCheckStarted_0_listener($event) { i0.ɵɵrestoreView(_r26); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onIntentCheckStarted($event)); })("intentCheckCompleted", function ConversationChatAreaComponent_Conditional_14_Conditional_10_For_4_Template_mj_message_input_intentCheckCompleted_0_listener($event) { i0.ɵɵrestoreView(_r26); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onIntentCheckCompleted($event)); })("beforeAgentTurn", function ConversationChatAreaComponent_Conditional_14_Conditional_10_For_4_Template_mj_message_input_beforeAgentTurn_0_listener($event) { i0.ɵɵrestoreView(_r26); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.beforeAgentTurn.emit($event)); })("afterAgentTurn", function ConversationChatAreaComponent_Conditional_14_Conditional_10_For_4_Template_mj_message_input_afterAgentTurn_0_listener($event) { i0.ɵɵrestoreView(_r26); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.afterAgentTurn.emit($event)); })("uploadStateChanged", function ConversationChatAreaComponent_Conditional_14_Conditional_10_For_4_Template_mj_message_input_uploadStateChanged_0_listener($event) { i0.ɵɵrestoreView(_r26); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onUploadStateChanged($event)); });
+    const _r27 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-message-input", 116, 7);
+    i0.ɵɵlistener("DraftStateChanged", function ConversationChatAreaComponent_Conditional_14_Conditional_10_For_4_Template_mj_message_input_DraftStateChanged_0_listener($event) { const inputRef_r28 = i0.ɵɵrestoreView(_r27).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnDraftStateChanged(inputRef_r28.conversationId, $event)); })("ComposerBlurred", function ConversationChatAreaComponent_Conditional_14_Conditional_10_For_4_Template_mj_message_input_ComposerBlurred_0_listener() { i0.ɵɵrestoreView(_r27); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnComposerBlurred()); })("StopClicked", function ConversationChatAreaComponent_Conditional_14_Conditional_10_For_4_Template_mj_message_input_StopClicked_0_listener() { i0.ɵɵrestoreView(_r27); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnComposerStopClicked()); })("initialMessageAutoSendStarted", function ConversationChatAreaComponent_Conditional_14_Conditional_10_For_4_Template_mj_message_input_initialMessageAutoSendStarted_0_listener($event) { i0.ɵɵrestoreView(_r27); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onInitialMessageAutoSendStarted($event)); })("initialMessageAutoSendFailed", function ConversationChatAreaComponent_Conditional_14_Conditional_10_For_4_Template_mj_message_input_initialMessageAutoSendFailed_0_listener($event) { i0.ɵɵrestoreView(_r27); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onInitialMessageAutoSendFailed($event)); })("messageSent", function ConversationChatAreaComponent_Conditional_14_Conditional_10_For_4_Template_mj_message_input_messageSent_0_listener($event) { i0.ɵɵrestoreView(_r27); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onMessageSent($event)); })("MessageStreamed", function ConversationChatAreaComponent_Conditional_14_Conditional_10_For_4_Template_mj_message_input_MessageStreamed_0_listener($event) { i0.ɵɵrestoreView(_r27); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnMessageStreamed($event)); })("agentResponse", function ConversationChatAreaComponent_Conditional_14_Conditional_10_For_4_Template_mj_message_input_agentResponse_0_listener($event) { i0.ɵɵrestoreView(_r27); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onAgentResponse($event)); })("agentRunDetected", function ConversationChatAreaComponent_Conditional_14_Conditional_10_For_4_Template_mj_message_input_agentRunDetected_0_listener($event) { i0.ɵɵrestoreView(_r27); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onAgentRunDetected($event)); })("agentRunUpdate", function ConversationChatAreaComponent_Conditional_14_Conditional_10_For_4_Template_mj_message_input_agentRunUpdate_0_listener($event) { i0.ɵɵrestoreView(_r27); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onAgentRunUpdate($event)); })("messageComplete", function ConversationChatAreaComponent_Conditional_14_Conditional_10_For_4_Template_mj_message_input_messageComplete_0_listener($event) { i0.ɵɵrestoreView(_r27); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onMessageComplete($event)); })("artifactCreated", function ConversationChatAreaComponent_Conditional_14_Conditional_10_For_4_Template_mj_message_input_artifactCreated_0_listener($event) { i0.ɵɵrestoreView(_r27); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onArtifactCreated($event)); })("conversationRenamed", function ConversationChatAreaComponent_Conditional_14_Conditional_10_For_4_Template_mj_message_input_conversationRenamed_0_listener($event) { i0.ɵɵrestoreView(_r27); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onConversationRenamed($event)); })("intentCheckStarted", function ConversationChatAreaComponent_Conditional_14_Conditional_10_For_4_Template_mj_message_input_intentCheckStarted_0_listener($event) { i0.ɵɵrestoreView(_r27); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onIntentCheckStarted($event)); })("intentCheckCompleted", function ConversationChatAreaComponent_Conditional_14_Conditional_10_For_4_Template_mj_message_input_intentCheckCompleted_0_listener($event) { i0.ɵɵrestoreView(_r27); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onIntentCheckCompleted($event)); })("beforeAgentTurn", function ConversationChatAreaComponent_Conditional_14_Conditional_10_For_4_Template_mj_message_input_beforeAgentTurn_0_listener($event) { i0.ɵɵrestoreView(_r27); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.beforeAgentTurn.emit($event)); })("afterAgentTurn", function ConversationChatAreaComponent_Conditional_14_Conditional_10_For_4_Template_mj_message_input_afterAgentTurn_0_listener($event) { i0.ɵɵrestoreView(_r27); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.afterAgentTurn.emit($event)); })("uploadStateChanged", function ConversationChatAreaComponent_Conditional_14_Conditional_10_For_4_Template_mj_message_input_uploadStateChanged_0_listener($event) { i0.ɵɵrestoreView(_r27); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onUploadStateChanged($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const inputRef_r27 = ctx.$implicit;
+    const inputRef_r28 = ctx.$implicit;
     const ctx_r0 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("hidden", inputRef_r27.conversationId !== ctx_r0.conversationId)("initialDraft", ctx_r0.GetInitialDraftFor(inputRef_r27.conversationId))("conversationId", inputRef_r27.conversationId)("conversationName", inputRef_r27.conversationName)("currentUser", ctx_r0.currentUser)("conversationHistory", inputRef_r27.conversationId === ctx_r0.conversationId ? ctx_r0.messages : i0.ɵɵpureFunction0(44, _c9))("artifactsByDetailId", inputRef_r27.conversationId === ctx_r0.conversationId ? ctx_r0.artifactsByDetailId : ctx_r0.emptyArtifactsMap)("systemArtifactsByDetailId", inputRef_r27.conversationId === ctx_r0.conversationId ? ctx_r0.systemArtifactsByDetailId : ctx_r0.emptyArtifactsMap)("agentRunsByDetailId", inputRef_r27.conversationId === ctx_r0.conversationId ? ctx_r0.agentRunsByDetailId : ctx_r0.emptyAgentRunsMap)("appContext", ctx_r0.appContext)("applicationId", ctx_r0.applicationId)("defaultAgentId", ctx_r0.defaultAgentId)("conversationDefaultAgentId", inputRef_r27.conversationId === ctx_r0.conversationId ? (ctx_r0.conversation == null ? null : ctx_r0.conversation.DefaultAgentID) ?? null : null)("agentConfigurationPresetId", inputRef_r27.conversationId === ctx_r0.conversationId ? ctx_r0.ActiveAgentConfigurationPresetId : null)("AgentReplyMode", ctx_r0.AgentReplyMode)("AllowedAgentIDs", ctx_r0.AllowedAgentIDs)("MentionPeople", ctx_r0.MentionPeople)("AgentHistoryFrom", ctx_r0.AgentHistoryFrom)("TargetBranchID", ctx_r0.TargetBranchIdFor(inputRef_r27.conversationId))("ResolveTargetBranch", inputRef_r27.conversationId === ctx_r0.conversationId ? ctx_r0.ResolveComposerBranch : null)("AgentTurnHandler", ctx_r0.AgentTurnHandler)("AutoNameConversation", ctx_r0.AutoNameConversation)("EnableDecisionRouting", ctx_r0.EnableDecisionRouting)("inProgressMessageIds", inputRef_r27.conversationId === ctx_r0.conversationId ? ctx_r0.inProgressMessageIds : ctx_r0.emptyInProgressIds)("disabled", ctx_r0.isProcessing || ctx_r0.isReadOnlyView)("ReadOnly", ctx_r0.EffectiveReadOnly)("enableAttachments", ctx_r0.enableAttachments && ctx_r0.allowAttachments)("enableMentions", ctx_r0.allowMentions)("enableAgentMentions", ctx_r0.allowAgentMentions)("enableEntityMentions", ctx_r0.allowEntityMentions)("enableSkillCommands", ctx_r0.allowSkillCommands)("enablePlanMode", ctx_r0.allowPlanMode)("enableRealtime", ctx_r0.allowRealtime && ctx_r0.OpenView.Kind !== "DraftFork")("Placeholder", ctx_r0.ComposerPlaceholderFor(inputRef_r27.conversationId))("SendSlotMode", inputRef_r27.conversationId === ctx_r0.conversationId ? ctx_r0.SendSlotMode : "send")("StopCount", inputRef_r27.conversationId === ctx_r0.conversationId ? ctx_r0.StopCount : 0)("StopLabel", ctx_r0.StopLabel)("StatusText", inputRef_r27.conversationId === ctx_r0.conversationId ? ctx_r0.StatusText : null)("StatusElapsed", inputRef_r27.conversationId === ctx_r0.conversationId ? ctx_r0.StatusElapsed : null)("maxAttachments", ctx_r0.maxAttachments)("maxAttachmentSizeBytes", ctx_r0.maxAttachmentSizeBytes)("acceptedFileTypes", ctx_r0.acceptedFileTypes)("initialMessage", ctx_r0.shouldDeliverPendingMessageTo(inputRef_r27.conversationId) ? ctx_r0.pendingMessage : null)("initialAttachments", ctx_r0.shouldDeliverPendingMessageTo(inputRef_r27.conversationId) ? ctx_r0.pendingAttachments : null);
+    i0.ɵɵproperty("hidden", inputRef_r28.conversationId !== ctx_r0.conversationId)("initialDraft", ctx_r0.GetInitialDraftFor(inputRef_r28.conversationId))("conversationId", inputRef_r28.conversationId)("conversationName", inputRef_r28.conversationName)("currentUser", ctx_r0.currentUser)("conversationHistory", inputRef_r28.conversationId === ctx_r0.conversationId ? ctx_r0.messages : i0.ɵɵpureFunction0(44, _c10))("artifactsByDetailId", inputRef_r28.conversationId === ctx_r0.conversationId ? ctx_r0.artifactsByDetailId : ctx_r0.emptyArtifactsMap)("systemArtifactsByDetailId", inputRef_r28.conversationId === ctx_r0.conversationId ? ctx_r0.systemArtifactsByDetailId : ctx_r0.emptyArtifactsMap)("agentRunsByDetailId", inputRef_r28.conversationId === ctx_r0.conversationId ? ctx_r0.agentRunsByDetailId : ctx_r0.emptyAgentRunsMap)("appContext", ctx_r0.EffectiveAppContext)("applicationId", ctx_r0.applicationId)("defaultAgentId", ctx_r0.defaultAgentId)("conversationDefaultAgentId", inputRef_r28.conversationId === ctx_r0.conversationId ? (ctx_r0.conversation == null ? null : ctx_r0.conversation.DefaultAgentID) ?? null : null)("agentConfigurationPresetId", inputRef_r28.conversationId === ctx_r0.conversationId ? ctx_r0.ActiveAgentConfigurationPresetId : null)("AgentReplyMode", ctx_r0.AgentReplyMode)("AllowedAgentIDs", ctx_r0.AllowedAgentIDs)("MentionPeople", ctx_r0.MentionPeople)("AgentHistoryFrom", ctx_r0.AgentHistoryFrom)("TargetBranchID", ctx_r0.TargetBranchIdFor(inputRef_r28.conversationId))("ResolveTargetBranch", inputRef_r28.conversationId === ctx_r0.conversationId ? ctx_r0.ResolveComposerBranch : null)("AgentTurnHandler", ctx_r0.AgentTurnHandler)("AutoNameConversation", ctx_r0.AutoNameConversation)("EnableDecisionRouting", ctx_r0.EnableDecisionRouting)("inProgressMessageIds", inputRef_r28.conversationId === ctx_r0.conversationId ? ctx_r0.inProgressMessageIds : ctx_r0.emptyInProgressIds)("disabled", ctx_r0.isProcessing || ctx_r0.isReadOnlyView)("ReadOnly", ctx_r0.EffectiveReadOnly)("enableAttachments", ctx_r0.enableAttachments && ctx_r0.allowAttachments)("enableMentions", ctx_r0.allowMentions)("enableAgentMentions", ctx_r0.allowAgentMentions)("enableEntityMentions", ctx_r0.allowEntityMentions)("enableSkillCommands", ctx_r0.allowSkillCommands)("enablePlanMode", ctx_r0.allowPlanMode)("enableRealtime", ctx_r0.allowRealtime && ctx_r0.OpenView.Kind !== "DraftFork")("Placeholder", ctx_r0.ComposerPlaceholderFor(inputRef_r28.conversationId))("SendSlotMode", inputRef_r28.conversationId === ctx_r0.conversationId ? ctx_r0.SendSlotMode : "send")("StopCount", inputRef_r28.conversationId === ctx_r0.conversationId ? ctx_r0.StopCount : 0)("StopLabel", ctx_r0.StopLabel)("StatusText", inputRef_r28.conversationId === ctx_r0.conversationId ? ctx_r0.StatusText : null)("StatusElapsed", inputRef_r28.conversationId === ctx_r0.conversationId ? ctx_r0.StatusElapsed : null)("maxAttachments", ctx_r0.maxAttachments)("maxAttachmentSizeBytes", ctx_r0.maxAttachmentSizeBytes)("acceptedFileTypes", ctx_r0.acceptedFileTypes)("initialMessage", ctx_r0.shouldDeliverPendingMessageTo(inputRef_r28.conversationId) ? ctx_r0.pendingMessage : null)("initialAttachments", ctx_r0.shouldDeliverPendingMessageTo(inputRef_r28.conversationId) ? ctx_r0.pendingAttachments : null);
 } }
 function ConversationChatAreaComponent_Conditional_14_Conditional_10_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 108);
+    i0.ɵɵelementStart(0, "div", 115);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -645,12 +686,12 @@ function ConversationChatAreaComponent_Conditional_14_Conditional_10_Conditional
     i0.ɵɵtextInterpolate(ctx_r0.ComposerHint);
 } }
 function ConversationChatAreaComponent_Conditional_14_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, ConversationChatAreaComponent_Conditional_14_Conditional_10_Conditional_0_Template, 4, 0, "div", 87);
-    i0.ɵɵconditionalCreate(1, ConversationChatAreaComponent_Conditional_14_Conditional_10_Conditional_1_Template, 2, 6, "div", 93);
-    i0.ɵɵelementStart(2, "div", 94);
-    i0.ɵɵrepeaterCreate(3, ConversationChatAreaComponent_Conditional_14_Conditional_10_For_4_Template, 2, 45, "mj-message-input", 107, _forTrack0);
+    i0.ɵɵconditionalCreate(0, ConversationChatAreaComponent_Conditional_14_Conditional_10_Conditional_0_Template, 4, 0, "div", 94);
+    i0.ɵɵconditionalCreate(1, ConversationChatAreaComponent_Conditional_14_Conditional_10_Conditional_1_Template, 2, 6, "div", 100);
+    i0.ɵɵelementStart(2, "div", 101);
+    i0.ɵɵrepeaterCreate(3, ConversationChatAreaComponent_Conditional_14_Conditional_10_For_4_Template, 2, 45, "mj-message-input", 114, _forTrack0, true);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(5, ConversationChatAreaComponent_Conditional_14_Conditional_10_Conditional_5_Template, 2, 1, "div", 108);
+    i0.ɵɵconditionalCreate(5, ConversationChatAreaComponent_Conditional_14_Conditional_10_Conditional_5_Template, 2, 1, "div", 115);
 } if (rf & 2) {
     let tmp_6_0;
     const ctx_r0 = i0.ɵɵnextContext(2);
@@ -663,19 +704,19 @@ function ConversationChatAreaComponent_Conditional_14_Conditional_10_Template(rf
     i0.ɵɵconditional(ctx_r0.ComposerHint ? 5 : -1);
 } }
 function ConversationChatAreaComponent_Conditional_14_Template(rf, ctx) { if (rf & 1) {
-    const _r23 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 15);
-    i0.ɵɵconditionalCreate(1, ConversationChatAreaComponent_Conditional_14_Conditional_1_Template, 2, 1, "div", 96);
-    i0.ɵɵconditionalCreate(2, ConversationChatAreaComponent_Conditional_14_Conditional_2_Template, 2, 1, "div", 97);
-    i0.ɵɵelementStart(3, "div", 98, 6);
-    i0.ɵɵlistener("scroll", function ConversationChatAreaComponent_Conditional_14_Template_div_scroll_3_listener() { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.checkScroll()); })("keydown.escape", function ConversationChatAreaComponent_Conditional_14_Template_div_keydown_escape_3_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnViewEscape($event)); });
-    i0.ɵɵelementStart(5, "mj-conversation-message-list", 99);
-    i0.ɵɵlistener("OlderRequested", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_OlderRequested_5_listener() { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onOlderMessagesRequested()); })("DateJumpRequested", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_DateJumpRequested_5_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onDateJumpRequested($event)); })("ForkOpenRequested", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_ForkOpenRequested_5_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnForkOpenRequested($event)); })("EditResendRequested", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_EditResendRequested_5_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnEditResendRequested($event)); })("RegenerateRequested", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_RegenerateRequested_5_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnRegenerateRequested($event)); })("ResendInPlaceRequested", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_ResendInPlaceRequested_5_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnResendInPlaceRequested($event)); })("ForkRequested", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_ForkRequested_5_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnForkRequested($event)); })("realtimeSessionOpenRequested", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_realtimeSessionOpenRequested_5_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OpenRealtimeSessionReview($event)); })("deleteMessage", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_deleteMessage_5_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onDeleteMessage($event)); })("BeforeStopClicked", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_BeforeStopClicked_5_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.BeforeStopClicked.emit($event)); })("StopMessage", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_StopMessage_5_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnStopMessage($event)); })("testFeedbackMessage", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_testFeedbackMessage_5_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onTestFeedbackMessage($event)); })("artifactClicked", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_artifactClicked_5_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onArtifactClicked($event)); })("messageEdited", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_messageEdited_5_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onMessageEdited($event)); })("openEntityRecord", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_openEntityRecord_5_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onOpenEntityRecord($event)); })("suggestedResponseSelected", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_suggestedResponseSelected_5_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onSuggestedResponseSelected($event)); })("attachmentClicked", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_attachmentClicked_5_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onAttachmentClicked($event)); })("diagnosticRequested", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_diagnosticRequested_5_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onDiagnosticRequested($event)); })("LivenessCheckRequested", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_LivenessCheckRequested_5_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnLivenessCheckRequested($event)); })("messagePinToggled", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_messagePinToggled_5_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onMessagePinToggled($event)); })("beforeResponseFormSubmitted", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_beforeResponseFormSubmitted_5_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.beforeResponseFormSubmitted.emit($event)); })("afterResponseFormSubmitted", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_afterResponseFormSubmitted_5_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.afterResponseFormSubmitted.emit($event)); })("TaskGraphPanelRequested", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_TaskGraphPanelRequested_5_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnTaskGraphPanelRequested($event)); })("ScrollToMessageRequested", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_ScrollToMessageRequested_5_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnJumpToMessage($event)); });
+    const _r24 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 16);
+    i0.ɵɵconditionalCreate(1, ConversationChatAreaComponent_Conditional_14_Conditional_1_Template, 2, 1, "div", 103);
+    i0.ɵɵconditionalCreate(2, ConversationChatAreaComponent_Conditional_14_Conditional_2_Template, 2, 1, "div", 104);
+    i0.ɵɵelementStart(3, "div", 105, 6);
+    i0.ɵɵlistener("scroll", function ConversationChatAreaComponent_Conditional_14_Template_div_scroll_3_listener() { i0.ɵɵrestoreView(_r24); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.checkScroll()); })("keydown.escape", function ConversationChatAreaComponent_Conditional_14_Template_div_keydown_escape_3_listener($event) { i0.ɵɵrestoreView(_r24); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnViewEscape($event)); });
+    i0.ɵɵelementStart(5, "mj-conversation-message-list", 106);
+    i0.ɵɵlistener("OlderRequested", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_OlderRequested_5_listener() { i0.ɵɵrestoreView(_r24); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onOlderMessagesRequested()); })("DateJumpRequested", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_DateJumpRequested_5_listener($event) { i0.ɵɵrestoreView(_r24); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onDateJumpRequested($event)); })("ForkOpenRequested", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_ForkOpenRequested_5_listener($event) { i0.ɵɵrestoreView(_r24); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnForkOpenRequested($event)); })("EditResendRequested", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_EditResendRequested_5_listener($event) { i0.ɵɵrestoreView(_r24); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnEditResendRequested($event)); })("RegenerateRequested", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_RegenerateRequested_5_listener($event) { i0.ɵɵrestoreView(_r24); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnRegenerateRequested($event)); })("ResendInPlaceRequested", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_ResendInPlaceRequested_5_listener($event) { i0.ɵɵrestoreView(_r24); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnResendInPlaceRequested($event)); })("ForkRequested", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_ForkRequested_5_listener($event) { i0.ɵɵrestoreView(_r24); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnForkRequested($event)); })("realtimeSessionOpenRequested", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_realtimeSessionOpenRequested_5_listener($event) { i0.ɵɵrestoreView(_r24); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OpenRealtimeSessionReview($event)); })("deleteMessage", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_deleteMessage_5_listener($event) { i0.ɵɵrestoreView(_r24); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onDeleteMessage($event)); })("BeforeStopClicked", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_BeforeStopClicked_5_listener($event) { i0.ɵɵrestoreView(_r24); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.BeforeStopClicked.emit($event)); })("StopMessage", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_StopMessage_5_listener($event) { i0.ɵɵrestoreView(_r24); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnStopMessage($event)); })("testFeedbackMessage", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_testFeedbackMessage_5_listener($event) { i0.ɵɵrestoreView(_r24); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onTestFeedbackMessage($event)); })("artifactClicked", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_artifactClicked_5_listener($event) { i0.ɵɵrestoreView(_r24); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onArtifactClicked($event)); })("messageEdited", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_messageEdited_5_listener($event) { i0.ɵɵrestoreView(_r24); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onMessageEdited($event)); })("openEntityRecord", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_openEntityRecord_5_listener($event) { i0.ɵɵrestoreView(_r24); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onOpenEntityRecord($event)); })("suggestedResponseSelected", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_suggestedResponseSelected_5_listener($event) { i0.ɵɵrestoreView(_r24); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onSuggestedResponseSelected($event)); })("attachmentClicked", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_attachmentClicked_5_listener($event) { i0.ɵɵrestoreView(_r24); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onAttachmentClicked($event)); })("diagnosticRequested", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_diagnosticRequested_5_listener($event) { i0.ɵɵrestoreView(_r24); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onDiagnosticRequested($event)); })("LivenessCheckRequested", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_LivenessCheckRequested_5_listener($event) { i0.ɵɵrestoreView(_r24); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnLivenessCheckRequested($event)); })("messagePinToggled", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_messagePinToggled_5_listener($event) { i0.ɵɵrestoreView(_r24); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onMessagePinToggled($event)); })("beforeResponseFormSubmitted", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_beforeResponseFormSubmitted_5_listener($event) { i0.ɵɵrestoreView(_r24); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.beforeResponseFormSubmitted.emit($event)); })("afterResponseFormSubmitted", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_afterResponseFormSubmitted_5_listener($event) { i0.ɵɵrestoreView(_r24); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.afterResponseFormSubmitted.emit($event)); })("TaskGraphPanelRequested", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_TaskGraphPanelRequested_5_listener($event) { i0.ɵɵrestoreView(_r24); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnTaskGraphPanelRequested($event)); })("ScrollToMessageRequested", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_ScrollToMessageRequested_5_listener($event) { i0.ɵɵrestoreView(_r24); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnJumpToMessage($event)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(6, ConversationChatAreaComponent_Conditional_14_Conditional_6_Template, 2, 0, "span", 100);
+    i0.ɵɵconditionalCreate(6, ConversationChatAreaComponent_Conditional_14_Conditional_6_Template, 2, 0, "span", 107);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "div", 92);
-    i0.ɵɵconditionalCreate(8, ConversationChatAreaComponent_Conditional_14_Conditional_8_Template, 2, 0, "div", 101)(9, ConversationChatAreaComponent_Conditional_14_Conditional_9_Template, 4, 1, "div", 87)(10, ConversationChatAreaComponent_Conditional_14_Conditional_10_Template, 6, 3);
+    i0.ɵɵelementStart(7, "div", 99);
+    i0.ɵɵconditionalCreate(8, ConversationChatAreaComponent_Conditional_14_Conditional_8_Template, 2, 0, "div", 108)(9, ConversationChatAreaComponent_Conditional_14_Conditional_9_Template, 4, 1, "div", 94)(10, ConversationChatAreaComponent_Conditional_14_Conditional_10_Template, 6, 3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -684,23 +725,23 @@ function ConversationChatAreaComponent_Conditional_14_Template(rf, ctx) { if (rf
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r0.isUploadingAttachments ? 2 : -1);
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("showEmptyFill", ctx_r0.showEmptyFill)("showDateNavigation", ctx_r0.showDateNavigation)("showAgentRunDetails", ctx_r0.showAgentRunDetails)("showReactions", ctx_r0.showReactions)("showMessageRating", ctx_r0.showMessageRating)("allowPinning", ctx_r0.allowPinning && !ctx_r0.EffectiveReadOnly)("allowMessageEdit", ctx_r0.allowMessageEdit && !ctx_r0.EffectiveReadOnly)("allowMessageDelete", ctx_r0.allowMessageDelete && !ctx_r0.EffectiveReadOnly)("ReadOnly", ctx_r0.EffectiveReadOnly)("AllowStopRun", ctx_r0.AllowStopRun)("InFlightCount", ctx_r0.InFlightCount)("assistantDisplayName", ctx_r0.assistantDisplayName)("assistantAvatarUrl", ctx_r0.assistantAvatarUrl)("messages", ctx_r0.DisplayMessages)("HasMoreAbove", ctx_r0.ListHasMoreAbove)("IsLoadingOlder", ctx_r0.isLoadingOlderMessages)("ScrollRoot", ctx_r0.messageScrollRoot)("conversation", ctx_r0.conversation)("currentUser", ctx_r0.currentUser)("isProcessing", ctx_r0.isProcessing)("artifactMap", ctx_r0.effectiveArtifactsMap)("agentRunMap", ctx_r0.agentRunsByDetailId)("ratingsMap", ctx_r0.ratingsByDetailId)("userAvatarMap", ctx_r0.userAvatarMap)("attachmentsMap", ctx_r0.attachmentsByDetailId)("messageRendererTemplate", ctx_r0.slotTemplate("messageRenderer"))("messageExtraTemplate", ctx_r0.slotTemplate("messageExtra"))("sessionMetaMap", ctx_r0.realtimeSessionMetaMap)("ForkChipMap", ctx_r0.ForkChipMap)("ForkLayout", ctx_r0.ForkLayout)("CanFork", ctx_r0.CanFork)("InPlaceTurn", ctx_r0.InPlaceTurn);
+    i0.ɵɵproperty("showEmptyFill", ctx_r0.showEmptyFill)("showDateNavigation", ctx_r0.showDateNavigation)("showAgentRunDetails", ctx_r0.showAgentRunDetails)("showReactions", ctx_r0.showReactions)("showMessageRating", ctx_r0.showMessageRating)("allowPinning", ctx_r0.allowPinning && !ctx_r0.EffectiveReadOnly)("allowMessageEdit", ctx_r0.allowMessageEdit && !ctx_r0.EffectiveReadOnly)("allowMessageDelete", ctx_r0.allowMessageDelete && !ctx_r0.EffectiveReadOnly)("ReadOnly", ctx_r0.EffectiveReadOnly)("AllowStopRun", ctx_r0.AllowStopRun)("InFlightCount", ctx_r0.InFlightCount)("assistantDisplayName", ctx_r0.assistantDisplayName)("assistantAvatarUrl", ctx_r0.assistantAvatarUrl)("messages", ctx_r0.DisplayMessages)("HasMoreAbove", ctx_r0.ListHasMoreAbove)("IsLoadingOlder", ctx_r0.isLoadingOlderMessages)("ScrollRoot", ctx_r0.messageScrollRoot)("conversation", ctx_r0.conversation)("currentUser", ctx_r0.currentUser)("isProcessing", ctx_r0.isProcessing)("artifactMap", ctx_r0.effectiveArtifactsMap)("agentRunMap", ctx_r0.agentRunsByDetailId)("HandoffMap", ctx_r0.HandoffsByDetailId)("ratingsMap", ctx_r0.ratingsByDetailId)("userAvatarMap", ctx_r0.userAvatarMap)("attachmentsMap", ctx_r0.attachmentsByDetailId)("messageRendererTemplate", ctx_r0.slotTemplate("messageRenderer"))("messageExtraTemplate", ctx_r0.slotTemplate("messageExtra"))("sessionMetaMap", ctx_r0.realtimeSessionMetaMap)("ForkChipMap", ctx_r0.ForkChipMap)("ForkLayout", ctx_r0.ForkLayout)("CanFork", ctx_r0.CanFork)("InPlaceTurn", ctx_r0.InPlaceTurn);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r0.showScrollToBottomIcon && ctx_r0.DisplayMessages.length > 0 ? 6 : -1);
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r0.isLoadingPeripheralData ? 8 : ctx_r0.ReadOnly ? 9 : 10);
 } }
 function ConversationChatAreaComponent_Conditional_15_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    const _r29 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 113);
-    i0.ɵɵlistener("mousedown", function ConversationChatAreaComponent_Conditional_15_Conditional_0_Template_div_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r29); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onResizeStart($event)); })("touchstart", function ConversationChatAreaComponent_Conditional_15_Conditional_0_Template_div_touchstart_0_listener($event) { i0.ɵɵrestoreView(_r29); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onResizeTouchStart($event)); });
+    const _r30 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 120);
+    i0.ɵɵlistener("mousedown", function ConversationChatAreaComponent_Conditional_15_Conditional_0_Template_div_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r30); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onResizeStart($event)); })("touchstart", function ConversationChatAreaComponent_Conditional_15_Conditional_0_Template_div_touchstart_0_listener($event) { i0.ɵɵrestoreView(_r30); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onResizeTouchStart($event)); });
     i0.ɵɵelementEnd();
 } }
 function ConversationChatAreaComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
-    const _r28 = i0.ɵɵgetCurrentView();
-    i0.ɵɵconditionalCreate(0, ConversationChatAreaComponent_Conditional_15_Conditional_0_Template, 1, 0, "div", 110);
-    i0.ɵɵelementStart(1, "div", 111)(2, "mj-artifact-viewer-panel", 112);
-    i0.ɵɵlistener("closed", function ConversationChatAreaComponent_Conditional_15_Template_mj_artifact_viewer_panel_closed_2_listener() { i0.ɵɵrestoreView(_r28); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onCloseArtifactPanel()); })("saveToCollectionRequested", function ConversationChatAreaComponent_Conditional_15_Template_mj_artifact_viewer_panel_saveToCollectionRequested_2_listener($event) { i0.ɵɵrestoreView(_r28); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onSaveToCollectionRequested($event)); })("navigateToLink", function ConversationChatAreaComponent_Conditional_15_Template_mj_artifact_viewer_panel_navigateToLink_2_listener($event) { i0.ɵɵrestoreView(_r28); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onArtifactLinkNavigation($event)); })("shareRequested", function ConversationChatAreaComponent_Conditional_15_Template_mj_artifact_viewer_panel_shareRequested_2_listener($event) { i0.ɵɵrestoreView(_r28); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onArtifactShareRequested($event)); })("maximizeToggled", function ConversationChatAreaComponent_Conditional_15_Template_mj_artifact_viewer_panel_maximizeToggled_2_listener() { i0.ɵɵrestoreView(_r28); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.toggleMaximizeArtifactPane()); })("openEntityRecord", function ConversationChatAreaComponent_Conditional_15_Template_mj_artifact_viewer_panel_openEntityRecord_2_listener($event) { i0.ɵɵrestoreView(_r28); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onOpenEntityRecord($event)); })("navigationRequest", function ConversationChatAreaComponent_Conditional_15_Template_mj_artifact_viewer_panel_navigationRequest_2_listener($event) { i0.ɵɵrestoreView(_r28); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onNavigationRequest($event)); })("analyzeRequested", function ConversationChatAreaComponent_Conditional_15_Template_mj_artifact_viewer_panel_analyzeRequested_2_listener($event) { i0.ɵɵrestoreView(_r28); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnAnalyzeArtifact($event)); })("applyFormRequested", function ConversationChatAreaComponent_Conditional_15_Template_mj_artifact_viewer_panel_applyFormRequested_2_listener($event) { i0.ɵɵrestoreView(_r28); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnApplyFormRequested($event)); });
+    const _r29 = i0.ɵɵgetCurrentView();
+    i0.ɵɵconditionalCreate(0, ConversationChatAreaComponent_Conditional_15_Conditional_0_Template, 1, 0, "div", 117);
+    i0.ɵɵelementStart(1, "div", 118)(2, "mj-artifact-viewer-panel", 119);
+    i0.ɵɵlistener("closed", function ConversationChatAreaComponent_Conditional_15_Template_mj_artifact_viewer_panel_closed_2_listener() { i0.ɵɵrestoreView(_r29); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onCloseArtifactPanel()); })("saveToCollectionRequested", function ConversationChatAreaComponent_Conditional_15_Template_mj_artifact_viewer_panel_saveToCollectionRequested_2_listener($event) { i0.ɵɵrestoreView(_r29); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onSaveToCollectionRequested($event)); })("navigateToLink", function ConversationChatAreaComponent_Conditional_15_Template_mj_artifact_viewer_panel_navigateToLink_2_listener($event) { i0.ɵɵrestoreView(_r29); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onArtifactLinkNavigation($event)); })("shareRequested", function ConversationChatAreaComponent_Conditional_15_Template_mj_artifact_viewer_panel_shareRequested_2_listener($event) { i0.ɵɵrestoreView(_r29); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onArtifactShareRequested($event)); })("maximizeToggled", function ConversationChatAreaComponent_Conditional_15_Template_mj_artifact_viewer_panel_maximizeToggled_2_listener() { i0.ɵɵrestoreView(_r29); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.toggleMaximizeArtifactPane()); })("openEntityRecord", function ConversationChatAreaComponent_Conditional_15_Template_mj_artifact_viewer_panel_openEntityRecord_2_listener($event) { i0.ɵɵrestoreView(_r29); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onOpenEntityRecord($event)); })("navigationRequest", function ConversationChatAreaComponent_Conditional_15_Template_mj_artifact_viewer_panel_navigationRequest_2_listener($event) { i0.ɵɵrestoreView(_r29); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onNavigationRequest($event)); })("analyzeRequested", function ConversationChatAreaComponent_Conditional_15_Template_mj_artifact_viewer_panel_analyzeRequested_2_listener($event) { i0.ɵɵrestoreView(_r29); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnAnalyzeArtifact($event)); })("applyFormRequested", function ConversationChatAreaComponent_Conditional_15_Template_mj_artifact_viewer_panel_applyFormRequested_2_listener($event) { i0.ɵɵrestoreView(_r29); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnApplyFormRequested($event)); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -712,42 +753,42 @@ function ConversationChatAreaComponent_Conditional_15_Template(rf, ctx) { if (rf
     i0.ɵɵproperty("artifactId", ctx_r0.selectedArtifactId)("currentUser", ctx_r0.currentUser)("environmentId", ctx_r0.environmentId)("versionNumber", ctx_r0.selectedVersionNumber)("viewContext", "conversation")("Scope", ctx_r0.ArtifactViewerScope)("canShare", ctx_r0.canShareSelectedArtifact)("canEdit", ctx_r0.canEditSelectedArtifact)("isMaximized", ctx_r0.isArtifactPaneMaximized)("refreshTrigger", ctx_r0.artifactViewerRefresh$);
 } }
 function ConversationChatAreaComponent_Conditional_16_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    const _r31 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 113);
-    i0.ɵɵlistener("mousedown", function ConversationChatAreaComponent_Conditional_16_Conditional_0_Template_div_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r31); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onResizeStart($event)); })("touchstart", function ConversationChatAreaComponent_Conditional_16_Conditional_0_Template_div_touchstart_0_listener($event) { i0.ɵɵrestoreView(_r31); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onResizeTouchStart($event)); });
+    const _r32 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 120);
+    i0.ɵɵlistener("mousedown", function ConversationChatAreaComponent_Conditional_16_Conditional_0_Template_div_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r32); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onResizeStart($event)); })("touchstart", function ConversationChatAreaComponent_Conditional_16_Conditional_0_Template_div_touchstart_0_listener($event) { i0.ɵɵrestoreView(_r32); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onResizeTouchStart($event)); });
     i0.ɵɵelementEnd();
 } }
 function ConversationChatAreaComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    const _r30 = i0.ɵɵgetCurrentView();
-    i0.ɵɵconditionalCreate(0, ConversationChatAreaComponent_Conditional_16_Conditional_0_Template, 1, 0, "div", 110);
-    i0.ɵɵelementStart(1, "div", 114)(2, "div", 115)(3, "div", 116)(4, "span", 117);
-    i0.ɵɵelement(5, "i", 118);
+    const _r31 = i0.ɵɵgetCurrentView();
+    i0.ɵɵconditionalCreate(0, ConversationChatAreaComponent_Conditional_16_Conditional_0_Template, 1, 0, "div", 117);
+    i0.ɵɵelementStart(1, "div", 121)(2, "div", 122)(3, "div", 123)(4, "span", 124);
+    i0.ɵɵelement(5, "i", 125);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 119)(7, "span", 120);
+    i0.ɵɵelementStart(6, "div", 126)(7, "span", 127);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "span", 121);
+    i0.ɵɵelementStart(9, "span", 128);
     i0.ɵɵtext(10, "Interactive Task Graph & Step Inspector");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(11, "div", 122)(12, "button", 123);
-    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_16_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r30); const taskGraphRunView_r32 = i0.ɵɵreference(22); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnSaveTaskGraphAsWorkflow(taskGraphRunView_r32.Spec)); });
-    i0.ɵɵelement(13, "i", 124);
+    i0.ɵɵelementStart(11, "div", 129)(12, "button", 130);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_16_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r31); const taskGraphRunView_r33 = i0.ɵɵreference(22); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnSaveTaskGraphAsWorkflow(taskGraphRunView_r33.Spec)); });
+    i0.ɵɵelement(13, "i", 131);
     i0.ɵɵelementStart(14, "span");
     i0.ɵɵtext(15);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(16, "button", 125);
-    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_16_Template_button_click_16_listener() { i0.ɵɵrestoreView(_r30); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.toggleMaximizeArtifactPane()); });
-    i0.ɵɵelement(17, "i", 124);
+    i0.ɵɵelementStart(16, "button", 132);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_16_Template_button_click_16_listener() { i0.ɵɵrestoreView(_r31); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.toggleMaximizeArtifactPane()); });
+    i0.ɵɵelement(17, "i", 131);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "button", 126);
-    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_16_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r30); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnCloseTaskGraphPanel()); });
-    i0.ɵɵelement(19, "i", 127);
+    i0.ɵɵelementStart(18, "button", 133);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_16_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r31); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnCloseTaskGraphPanel()); });
+    i0.ɵɵelement(19, "i", 134);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(20, "div", 128);
-    i0.ɵɵelement(21, "mj-task-graph-run-view", 129, 8);
+    i0.ɵɵelementStart(20, "div", 135);
+    i0.ɵɵelement(21, "mj-task-graph-run-view", 136, 8);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const taskGraphRunView_r32 = i0.ɵɵreference(22);
+    const taskGraphRunView_r33 = i0.ɵɵreference(22);
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵconditional(!ctx_r0.isArtifactPaneMaximized ? 0 : -1);
     i0.ɵɵadvance();
@@ -756,7 +797,7 @@ function ConversationChatAreaComponent_Conditional_16_Template(rf, ctx) { if (rf
     i0.ɵɵadvance(7);
     i0.ɵɵtextInterpolate(ctx_r0.SelectedTaskGraphPanel.workflowTitle);
     i0.ɵɵadvance(4);
-    i0.ɵɵproperty("disabled", ctx_r0.IsSavingTaskGraphWorkflow || !(taskGraphRunView_r32.Spec == null ? null : taskGraphRunView_r32.Spec.tasks == null ? null : taskGraphRunView_r32.Spec.tasks.length));
+    i0.ɵɵproperty("disabled", ctx_r0.IsSavingTaskGraphWorkflow || !(taskGraphRunView_r33.Spec == null ? null : taskGraphRunView_r33.Spec.tasks == null ? null : taskGraphRunView_r33.Spec.tasks.length));
     i0.ɵɵadvance();
     i0.ɵɵclassProp("fa-spinner", ctx_r0.IsSavingTaskGraphWorkflow)("fa-spin", ctx_r0.IsSavingTaskGraphWorkflow)("fa-floppy-disk", !ctx_r0.IsSavingTaskGraphWorkflow);
     i0.ɵɵadvance(2);
@@ -768,33 +809,89 @@ function ConversationChatAreaComponent_Conditional_16_Template(rf, ctx) { if (rf
     i0.ɵɵadvance(4);
     i0.ɵɵproperty("ParentTaskID", ctx_r0.SelectedTaskGraphPanel.parentTaskId)("WorkflowName", ctx_r0.SelectedTaskGraphPanel.workflowTitle)("LiveUpdates", true)("ShowVariables", true)("Height", "100%");
 } }
-function ConversationChatAreaComponent_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    const _r33 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-pinned-messages-panel", 130);
-    i0.ɵɵlistener("closed", function ConversationChatAreaComponent_Conditional_18_Template_mj_pinned_messages_panel_closed_0_listener() { i0.ɵɵrestoreView(_r33); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.showPinsPanel = false); })("jumpRequested", function ConversationChatAreaComponent_Conditional_18_Template_mj_pinned_messages_panel_jumpRequested_0_listener($event) { i0.ɵɵrestoreView(_r33); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onJumpToMessage($event)); })("unpinRequested", function ConversationChatAreaComponent_Conditional_18_Template_mj_pinned_messages_panel_unpinRequested_0_listener($event) { i0.ɵɵrestoreView(_r33); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onUnpinFromPanel($event)); });
+function ConversationChatAreaComponent_Conditional_17_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r35 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 120);
+    i0.ɵɵlistener("mousedown", function ConversationChatAreaComponent_Conditional_17_Conditional_0_Template_div_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r35); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onResizeStart($event)); })("touchstart", function ConversationChatAreaComponent_Conditional_17_Conditional_0_Template_div_touchstart_0_listener($event) { i0.ɵɵrestoreView(_r35); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onResizeTouchStart($event)); });
+    i0.ɵɵelementEnd();
+} }
+function ConversationChatAreaComponent_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    const _r34 = i0.ɵɵgetCurrentView();
+    i0.ɵɵconditionalCreate(0, ConversationChatAreaComponent_Conditional_17_Conditional_0_Template, 1, 0, "div", 117);
+    i0.ɵɵelementStart(1, "div", 137)(2, "div", 122)(3, "div", 123)(4, "span", 124);
+    i0.ɵɵelement(5, "i", 68);
     i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "div", 126)(7, "span", 127);
+    i0.ɵɵtext(8, "Remote Browser");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "span", 128);
+    i0.ɵɵtext(10, "Shared live browser workspace");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(11, "div", 129)(12, "input", 138);
+    i0.ɵɵtwoWayListener("ngModelChange", function ConversationChatAreaComponent_Conditional_17_Template_input_ngModelChange_12_listener($event) { i0.ɵɵrestoreView(_r34); const ctx_r0 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r0.RemoteBrowserUrlInput, $event) || (ctx_r0.RemoteBrowserUrlInput = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("keydown.enter", function ConversationChatAreaComponent_Conditional_17_Template_input_keydown_enter_12_listener($event) { i0.ɵɵrestoreView(_r34); const ctx_r0 = i0.ɵɵnextContext(); $event.preventDefault(); return i0.ɵɵresetView(ctx_r0.NavigateRemoteBrowserFromInput()); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(13, "button", 139);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_17_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r34); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.NavigateRemoteBrowserFromInput()); });
+    i0.ɵɵelement(14, "i", 131);
+    i0.ɵɵelementStart(15, "span");
+    i0.ɵɵtext(16, "Go");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(17, "button", 132);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_17_Template_button_click_17_listener() { i0.ɵɵrestoreView(_r34); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.toggleMaximizeArtifactPane()); });
+    i0.ɵɵelement(18, "i", 131);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(19, "button", 140);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_17_Template_button_click_19_listener() { i0.ɵɵrestoreView(_r34); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.CloseRemoteBrowserPanel()); });
+    i0.ɵɵelement(20, "i", 134);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(21, "div", 135);
+    i0.ɵɵelement(22, "mj-realtime-remote-browser-surface", null, 9);
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("pinnedMessages", ctx_r0.pinnedMessages)("isLoading", ctx_r0.isLoadingPins)("AllowUnpin", !ctx_r0.EffectiveReadOnly);
+    i0.ɵɵconditional(!ctx_r0.isArtifactPaneMaximized ? 0 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("width", ctx_r0.artifactPaneWidth, "%");
+    i0.ɵɵclassProp("maximized", ctx_r0.isArtifactPaneMaximized);
+    i0.ɵɵadvance(11);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r0.RemoteBrowserUrlInput);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("disabled", ctx_r0.IsRemoteBrowserNavigating || !ctx_r0.RemoteBrowserUrlInput.trim());
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("fa-spinner", ctx_r0.IsRemoteBrowserNavigating)("fa-spin", ctx_r0.IsRemoteBrowserNavigating)("fa-arrow-right", !ctx_r0.IsRemoteBrowserNavigating);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("title", ctx_r0.isArtifactPaneMaximized ? "Restore panel size" : "Maximize panel");
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("fa-compress", ctx_r0.isArtifactPaneMaximized)("fa-expand", !ctx_r0.isArtifactPaneMaximized);
 } }
 function ConversationChatAreaComponent_Conditional_19_Template(rf, ctx) { if (rf & 1) {
-    const _r34 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-conversation-forks-popover", 131);
-    i0.ɵɵlistener("ForkSelected", function ConversationChatAreaComponent_Conditional_19_Template_mj_conversation_forks_popover_ForkSelected_0_listener($event) { i0.ɵɵrestoreView(_r34); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnForkSelectedFromList($event)); })("Closed", function ConversationChatAreaComponent_Conditional_19_Template_mj_conversation_forks_popover_Closed_0_listener() { i0.ɵɵrestoreView(_r34); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.CloseForksPopover()); });
+    const _r36 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-pinned-messages-panel", 141);
+    i0.ɵɵlistener("closed", function ConversationChatAreaComponent_Conditional_19_Template_mj_pinned_messages_panel_closed_0_listener() { i0.ɵɵrestoreView(_r36); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.showPinsPanel = false); })("jumpRequested", function ConversationChatAreaComponent_Conditional_19_Template_mj_pinned_messages_panel_jumpRequested_0_listener($event) { i0.ɵɵrestoreView(_r36); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onJumpToMessage($event)); })("unpinRequested", function ConversationChatAreaComponent_Conditional_19_Template_mj_pinned_messages_panel_unpinRequested_0_listener($event) { i0.ɵɵrestoreView(_r36); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onUnpinFromPanel($event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("pinnedMessages", ctx_r0.pinnedMessages)("isLoading", ctx_r0.isLoadingPins)("AllowUnpin", !ctx_r0.EffectiveReadOnly);
+} }
+function ConversationChatAreaComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {
+    const _r37 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-conversation-forks-popover", 142);
+    i0.ɵɵlistener("ForkSelected", function ConversationChatAreaComponent_Conditional_20_Template_mj_conversation_forks_popover_ForkSelected_0_listener($event) { i0.ɵɵrestoreView(_r37); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnForkSelectedFromList($event)); })("Closed", function ConversationChatAreaComponent_Conditional_20_Template_mj_conversation_forks_popover_Closed_0_listener() { i0.ɵɵrestoreView(_r37); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.CloseForksPopover()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("PanelID", ctx_r0.ForksPopoverID)("Summaries", ctx_r0.ForkSummaries)("CurrentUserID", ctx_r0.CurrentUser.ID);
 } }
-function ConversationChatAreaComponent_Conditional_20_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r36 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 134);
-    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_20_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r36); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.RealtimeSession.SetMinimized(false)); });
-    i0.ɵɵelement(1, "span", 135)(2, "i", 136);
-    i0.ɵɵelementStart(3, "span", 137)(4, "span", 138);
+function ConversationChatAreaComponent_Conditional_21_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r39 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 145);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_21_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r39); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.RealtimeSession.SetMinimized(false)); });
+    i0.ɵɵelement(1, "span", 146)(2, "i", 147);
+    i0.ɵɵelementStart(3, "span", 148)(4, "span", 149);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "span", 139);
+    i0.ɵɵelementStart(6, "span", 150);
     i0.ɵɵtext(7, "Tap to return");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -802,13 +899,13 @@ function ConversationChatAreaComponent_Conditional_20_Conditional_2_Template(rf,
     i0.ɵɵadvance(5);
     i0.ɵɵtextInterpolate1("On call \u00B7 ", ctx_r0.RealtimeSession.CurrentAgentName);
 } }
-function ConversationChatAreaComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {
-    const _r35 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-realtime-session-overlay", 132);
+function ConversationChatAreaComponent_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+    const _r38 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-realtime-session-overlay", 143);
     i0.ɵɵpipe(1, "async");
-    i0.ɵɵlistener("NavigateRequest", function ConversationChatAreaComponent_Conditional_20_Template_mj_realtime_session_overlay_NavigateRequest_0_listener($event) { i0.ɵɵrestoreView(_r35); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onRealtimeNavigateRequest($event)); })("StartLiveRequested", function ConversationChatAreaComponent_Conditional_20_Template_mj_realtime_session_overlay_StartLiveRequested_0_listener($event) { i0.ɵɵrestoreView(_r35); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onReviewStartLive($event)); })("ReviewClosed", function ConversationChatAreaComponent_Conditional_20_Template_mj_realtime_session_overlay_ReviewClosed_0_listener() { i0.ɵɵrestoreView(_r35); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onReviewClosed()); });
+    i0.ɵɵlistener("NavigateRequest", function ConversationChatAreaComponent_Conditional_21_Template_mj_realtime_session_overlay_NavigateRequest_0_listener($event) { i0.ɵɵrestoreView(_r38); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onRealtimeNavigateRequest($event)); })("StartLiveRequested", function ConversationChatAreaComponent_Conditional_21_Template_mj_realtime_session_overlay_StartLiveRequested_0_listener($event) { i0.ɵɵrestoreView(_r38); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onReviewStartLive($event)); })("ReviewClosed", function ConversationChatAreaComponent_Conditional_21_Template_mj_realtime_session_overlay_ReviewClosed_0_listener() { i0.ɵɵrestoreView(_r38); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onReviewClosed()); });
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(2, ConversationChatAreaComponent_Conditional_20_Conditional_2_Template, 8, 1, "button", 133);
+    i0.ɵɵconditionalCreate(2, ConversationChatAreaComponent_Conditional_21_Conditional_2_Template, 8, 1, "button", 144);
     i0.ɵɵpipe(3, "async");
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -816,32 +913,32 @@ function ConversationChatAreaComponent_Conditional_20_Template(rf, ctx) { if (rf
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(i0.ɵɵpipeBind1(3, 13, ctx_r0.RealtimeSession.Minimized$) ? 2 : -1);
 } }
-function ConversationChatAreaComponent_Conditional_25_Template(rf, ctx) { if (rf & 1) {
-    const _r37 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 140);
-    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_25_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r37); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.showProjectSelector = false); });
-    i0.ɵɵelementStart(1, "div", 141);
-    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_25_Template_div_click_1_listener($event) { return $event.stopPropagation(); });
-    i0.ɵɵelementStart(2, "div", 142)(3, "h3");
+function ConversationChatAreaComponent_Conditional_26_Template(rf, ctx) { if (rf & 1) {
+    const _r40 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 151);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_26_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r40); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.showProjectSelector = false); });
+    i0.ɵɵelementStart(1, "div", 152);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_26_Template_div_click_1_listener($event) { return $event.stopPropagation(); });
+    i0.ɵɵelementStart(2, "div", 153)(3, "h3");
     i0.ɵɵtext(4, "Assign Project");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 143);
-    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_25_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r37); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.showProjectSelector = false); });
-    i0.ɵɵelement(6, "i", 144);
+    i0.ɵɵelementStart(5, "button", 154);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_26_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r40); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.showProjectSelector = false); });
+    i0.ɵɵelement(6, "i", 155);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 145)(8, "mj-project-selector", 146);
-    i0.ɵɵlistener("projectSelected", function ConversationChatAreaComponent_Conditional_25_Template_mj_project_selector_projectSelected_8_listener($event) { i0.ɵɵrestoreView(_r37); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onProjectSelected($event)); });
+    i0.ɵɵelementStart(7, "div", 156)(8, "mj-project-selector", 157);
+    i0.ɵɵlistener("projectSelected", function ConversationChatAreaComponent_Conditional_26_Template_mj_project_selector_projectSelected_8_listener($event) { i0.ɵɵrestoreView(_r40); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onProjectSelected($event)); });
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance(8);
     i0.ɵɵproperty("environmentId", ctx_r0.environmentId)("currentUser", ctx_r0.currentUser)("selectedProjectId", ctx_r0.conversation.ProjectID);
 } }
-function ConversationChatAreaComponent_Conditional_26_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    const _r39 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 153);
-    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_26_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r39); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.toggleSystemArtifacts()); });
-    i0.ɵɵelement(1, "i", 154);
+function ConversationChatAreaComponent_Conditional_27_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    const _r42 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 164);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_27_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r42); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.toggleSystemArtifacts()); });
+    i0.ɵɵelement(1, "i", 165);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
@@ -851,106 +948,106 @@ function ConversationChatAreaComponent_Conditional_26_Conditional_6_Template(rf,
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate1("", ctx_r0.showSystemArtifacts ? "Hide" : "Show", " System");
 } }
-function ConversationChatAreaComponent_Conditional_26_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-empty-state", 151);
+function ConversationChatAreaComponent_Conditional_27_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-empty-state", 162);
 } }
-function ConversationChatAreaComponent_Conditional_26_For_12_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+function ConversationChatAreaComponent_Conditional_27_For_12_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0);
 } if (rf & 2) {
-    const artifact_r41 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵtextInterpolate1(" ", artifact_r41.versionCount, " versions ");
+    const artifact_r44 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵtextInterpolate1(" ", artifact_r44.versionCount, " versions ");
 } }
-function ConversationChatAreaComponent_Conditional_26_For_12_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+function ConversationChatAreaComponent_Conditional_27_For_12_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " 1 version ");
 } }
-function ConversationChatAreaComponent_Conditional_26_For_12_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    const _r42 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 166);
-    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_26_For_12_Conditional_10_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r42); const artifact_r41 = i0.ɵɵnextContext().$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.toggleArtifactExpansion(artifact_r41.artifactId, $event)); });
-    i0.ɵɵelement(1, "i", 167);
+function ConversationChatAreaComponent_Conditional_27_For_12_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    const _r45 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 177);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_27_For_12_Conditional_10_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r45); const artifact_r44 = i0.ɵɵnextContext().$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.toggleArtifactExpansion(artifact_r44.artifactId, $event)); });
+    i0.ɵɵelement(1, "i", 178);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const artifact_r41 = i0.ɵɵnextContext().$implicit;
+    const artifact_r44 = i0.ɵɵnextContext().$implicit;
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("fa-chevron-down", ctx_r0.expandedArtifactId !== artifact_r41.artifactId)("fa-chevron-up", ctx_r0.expandedArtifactId === artifact_r41.artifactId);
+    i0.ɵɵclassProp("fa-chevron-down", ctx_r0.expandedArtifactId !== artifact_r44.artifactId)("fa-chevron-up", ctx_r0.expandedArtifactId === artifact_r44.artifactId);
 } }
-function ConversationChatAreaComponent_Conditional_26_For_12_Conditional_13_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r43 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 169);
-    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_26_For_12_Conditional_13_For_2_Template_div_click_0_listener($event) { const version_r44 = i0.ɵɵrestoreView(_r43).$implicit; const artifact_r41 = i0.ɵɵnextContext(2).$implicit; const ctx_r0 = i0.ɵɵnextContext(2); ctx_r0.openArtifactFromModal(artifact_r41.artifactId, version_r44.versionNumber); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(1, "span", 170);
+function ConversationChatAreaComponent_Conditional_27_For_12_Conditional_13_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r46 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 180);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_27_For_12_Conditional_13_For_2_Template_div_click_0_listener($event) { const version_r47 = i0.ɵɵrestoreView(_r46).$implicit; const artifact_r44 = i0.ɵɵnextContext(2).$implicit; const ctx_r0 = i0.ɵɵnextContext(2); ctx_r0.openArtifactFromModal(artifact_r44.artifactId, version_r47.versionNumber); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(1, "span", 181);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 171);
+    i0.ɵɵelementStart(3, "span", 182);
     i0.ɵɵtext(4, "Open this version");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(5, "i", 172);
+    i0.ɵɵelement(5, "i", 183);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const version_r44 = ctx.$implicit;
+    const version_r47 = ctx.$implicit;
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("v", version_r44.versionNumber);
+    i0.ɵɵtextInterpolate1("v", version_r47.versionNumber);
 } }
-function ConversationChatAreaComponent_Conditional_26_For_12_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 165);
-    i0.ɵɵrepeaterCreate(1, ConversationChatAreaComponent_Conditional_26_For_12_Conditional_13_For_2_Template, 6, 1, "div", 168, _forTrack2);
+function ConversationChatAreaComponent_Conditional_27_For_12_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 176);
+    i0.ɵɵrepeaterCreate(1, ConversationChatAreaComponent_Conditional_27_For_12_Conditional_13_For_2_Template, 6, 1, "div", 179, _forTrack2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const artifact_r41 = i0.ɵɵnextContext().$implicit;
+    const artifact_r44 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(artifact_r41.versions);
+    i0.ɵɵrepeater(artifact_r44.versions);
 } }
-function ConversationChatAreaComponent_Conditional_26_For_12_Template(rf, ctx) { if (rf & 1) {
-    const _r40 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 155)(1, "div", 156);
-    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_26_For_12_Template_div_click_1_listener() { const artifact_r41 = i0.ɵɵrestoreView(_r40).$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.openArtifactFromModal(artifact_r41.artifactId)); });
-    i0.ɵɵelementStart(2, "div", 157);
-    i0.ɵɵelement(3, "i", 158);
+function ConversationChatAreaComponent_Conditional_27_For_12_Template(rf, ctx) { if (rf & 1) {
+    const _r43 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 166)(1, "div", 167);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_27_For_12_Template_div_click_1_listener() { const artifact_r44 = i0.ɵɵrestoreView(_r43).$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.openArtifactFromModal(artifact_r44.artifactId)); });
+    i0.ɵɵelementStart(2, "div", 168);
+    i0.ɵɵelement(3, "i", 169);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 159)(5, "div", 160);
+    i0.ɵɵelementStart(4, "div", 170)(5, "div", 171);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "div", 161);
-    i0.ɵɵconditionalCreate(8, ConversationChatAreaComponent_Conditional_26_For_12_Conditional_8_Template, 1, 1)(9, ConversationChatAreaComponent_Conditional_26_For_12_Conditional_9_Template, 1, 0);
+    i0.ɵɵelementStart(7, "div", 172);
+    i0.ɵɵconditionalCreate(8, ConversationChatAreaComponent_Conditional_27_For_12_Conditional_8_Template, 1, 1)(9, ConversationChatAreaComponent_Conditional_27_For_12_Conditional_9_Template, 1, 0);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(10, ConversationChatAreaComponent_Conditional_26_For_12_Conditional_10_Template, 2, 4, "button", 162);
-    i0.ɵɵelementStart(11, "div", 163);
-    i0.ɵɵelement(12, "i", 164);
+    i0.ɵɵconditionalCreate(10, ConversationChatAreaComponent_Conditional_27_For_12_Conditional_10_Template, 2, 4, "button", 173);
+    i0.ɵɵelementStart(11, "div", 174);
+    i0.ɵɵelement(12, "i", 175);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(13, ConversationChatAreaComponent_Conditional_26_For_12_Conditional_13_Template, 3, 0, "div", 165);
+    i0.ɵɵconditionalCreate(13, ConversationChatAreaComponent_Conditional_27_For_12_Conditional_13_Template, 3, 0, "div", 176);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const artifact_r41 = ctx.$implicit;
+    const artifact_r44 = ctx.$implicit;
     const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassProp("expanded", ctx_r0.expandedArtifactId === artifact_r41.artifactId)("system-artifact", artifact_r41.visibility === "System Only");
+    i0.ɵɵclassProp("expanded", ctx_r0.expandedArtifactId === artifact_r44.artifactId)("system-artifact", artifact_r44.visibility === "System Only");
     i0.ɵɵadvance(6);
-    i0.ɵɵtextInterpolate(artifact_r41.name);
+    i0.ɵɵtextInterpolate(artifact_r44.name);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(artifact_r41.versionCount > 1 ? 8 : 9);
+    i0.ɵɵconditional(artifact_r44.versionCount > 1 ? 8 : 9);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(artifact_r41.versionCount > 1 ? 10 : -1);
+    i0.ɵɵconditional(artifact_r44.versionCount > 1 ? 10 : -1);
     i0.ɵɵadvance(3);
-    i0.ɵɵconditional(ctx_r0.expandedArtifactId === artifact_r41.artifactId && artifact_r41.versionCount > 1 ? 13 : -1);
+    i0.ɵɵconditional(ctx_r0.expandedArtifactId === artifact_r44.artifactId && artifact_r44.versionCount > 1 ? 13 : -1);
 } }
-function ConversationChatAreaComponent_Conditional_26_Template(rf, ctx) { if (rf & 1) {
-    const _r38 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 140);
-    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_26_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r38); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.showArtifactsModal = false); });
-    i0.ɵɵelementStart(1, "div", 147);
-    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_26_Template_div_click_1_listener($event) { return $event.stopPropagation(); });
-    i0.ɵɵelementStart(2, "div", 142)(3, "h3");
+function ConversationChatAreaComponent_Conditional_27_Template(rf, ctx) { if (rf & 1) {
+    const _r41 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 151);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_27_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r41); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.showArtifactsModal = false); });
+    i0.ɵɵelementStart(1, "div", 158);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_27_Template_div_click_1_listener($event) { return $event.stopPropagation(); });
+    i0.ɵɵelementStart(2, "div", 153)(3, "h3");
     i0.ɵɵtext(4, "Conversation Artifacts");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 148);
-    i0.ɵɵconditionalCreate(6, ConversationChatAreaComponent_Conditional_26_Conditional_6_Template, 4, 3, "button", 149);
-    i0.ɵɵelementStart(7, "button", 143);
-    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_26_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r38); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.showArtifactsModal = false); });
-    i0.ɵɵelement(8, "i", 144);
+    i0.ɵɵelementStart(5, "div", 159);
+    i0.ɵɵconditionalCreate(6, ConversationChatAreaComponent_Conditional_27_Conditional_6_Template, 4, 3, "button", 160);
+    i0.ɵɵelementStart(7, "button", 154);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_27_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r41); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.showArtifactsModal = false); });
+    i0.ɵɵelement(8, "i", 155);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(9, "div", 150);
-    i0.ɵɵconditionalCreate(10, ConversationChatAreaComponent_Conditional_26_Conditional_10_Template, 1, 0, "mj-empty-state", 151);
-    i0.ɵɵrepeaterCreate(11, ConversationChatAreaComponent_Conditional_26_For_12_Template, 14, 8, "div", 152, _forTrack1);
+    i0.ɵɵelementStart(9, "div", 161);
+    i0.ɵɵconditionalCreate(10, ConversationChatAreaComponent_Conditional_27_Conditional_10_Template, 1, 0, "mj-empty-state", 162);
+    i0.ɵɵrepeaterCreate(11, ConversationChatAreaComponent_Conditional_27_For_12_Template, 14, 8, "div", 163, _forTrack1);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -961,28 +1058,28 @@ function ConversationChatAreaComponent_Conditional_26_Template(rf, ctx) { if (rf
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r0.getArtifactsArray());
 } }
-function ConversationChatAreaComponent_Conditional_27_Template(rf, ctx) { if (rf & 1) {
-    const _r45 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-artifact-collection-picker-modal", 173);
-    i0.ɵɵlistener("completed", function ConversationChatAreaComponent_Conditional_27_Template_mj_artifact_collection_picker_modal_completed_0_listener($event) { i0.ɵɵrestoreView(_r45); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onCollectionPickerCompleted($event)); })("cancelled", function ConversationChatAreaComponent_Conditional_27_Template_mj_artifact_collection_picker_modal_cancelled_0_listener() { i0.ɵɵrestoreView(_r45); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onCollectionPickerCancelled()); });
+function ConversationChatAreaComponent_Conditional_28_Template(rf, ctx) { if (rf & 1) {
+    const _r48 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-artifact-collection-picker-modal", 184);
+    i0.ɵɵlistener("completed", function ConversationChatAreaComponent_Conditional_28_Template_mj_artifact_collection_picker_modal_completed_0_listener($event) { i0.ɵɵrestoreView(_r48); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onCollectionPickerCompleted($event)); })("cancelled", function ConversationChatAreaComponent_Conditional_28_Template_mj_artifact_collection_picker_modal_cancelled_0_listener() { i0.ɵɵrestoreView(_r48); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onCollectionPickerCancelled()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("isOpen", ctx_r0.showCollectionPicker)("environmentId", ctx_r0.environmentId)("currentUser", ctx_r0.currentUser)("excludeCollectionIds", ctx_r0.collectionPickerExcludedIds)("artifactVersionId", ctx_r0.collectionPickerVersionId)("artifactName", ctx_r0.collectionPickerArtifactName)("artifactVersionNumber", ctx_r0.collectionPickerVersionNumber);
 } }
-function ConversationChatAreaComponent_Conditional_28_Template(rf, ctx) { if (rf & 1) {
-    const _r46 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-test-feedback-dialog", 174);
-    i0.ɵɵlistener("closed", function ConversationChatAreaComponent_Conditional_28_Template_mj_test_feedback_dialog_closed_0_listener($event) { i0.ɵɵrestoreView(_r46); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onTestFeedbackDialogClosed($event)); });
+function ConversationChatAreaComponent_Conditional_29_Template(rf, ctx) { if (rf & 1) {
+    const _r49 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-test-feedback-dialog", 185);
+    i0.ɵɵlistener("closed", function ConversationChatAreaComponent_Conditional_29_Template_mj_test_feedback_dialog_closed_0_listener($event) { i0.ɵɵrestoreView(_r49); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onTestFeedbackDialogClosed($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("data", ctx_r0.testFeedbackDialogData)("visible", ctx_r0.showTestFeedbackDialog);
 } }
-function ConversationChatAreaComponent_Conditional_29_Template(rf, ctx) { if (rf & 1) {
-    const _r47 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-image-viewer", 175);
-    i0.ɵɵlistener("closed", function ConversationChatAreaComponent_Conditional_29_Template_mj_image_viewer_closed_0_listener() { i0.ɵɵrestoreView(_r47); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onImageViewerClosed()); });
+function ConversationChatAreaComponent_Conditional_30_Template(rf, ctx) { if (rf & 1) {
+    const _r50 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-image-viewer", 186);
+    i0.ɵɵlistener("closed", function ConversationChatAreaComponent_Conditional_30_Template_mj_image_viewer_closed_0_listener() { i0.ɵɵrestoreView(_r50); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onImageViewerClosed()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -990,6 +1087,7 @@ function ConversationChatAreaComponent_Conditional_29_Template(rf, ctx) { if (rf
 } }
 /** `MJ: Resource Types.ID` for Conversations. */
 const CONVERSATIONS_RESOURCE_TYPE_ID = '81D4BC3D-9FEB-EF11-B01A-286B35C04427';
+const EMPTY_THREAD_REPLY_ROOTS = new UUIDMap();
 /** Run statuses that mean the run is over, for the run-list fallback. `Paused` is still working. */
 const RUN_LIST_TERMINAL_STATUSES = ['Completed', 'AwaitingFeedback', 'Failed', 'Cancelled'];
 /** Default width (percentage) for the artifact viewer pane */
@@ -1087,7 +1185,16 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
     set conversationId(value) {
         this.ConversationId = value;
     }
-    Conversation = null;
+    _conversation = null;
+    set Conversation(value) {
+        this._conversation = value;
+        if (value?.ID && value.Name) {
+            this.syncCachedMessageInputName(value.ID, value.Name);
+        }
+    }
+    get Conversation() {
+        return this._conversation;
+    }
     /** @deprecated Use {@link Conversation}. */
     set conversation(value) {
         this.Conversation = value;
@@ -1214,6 +1321,12 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
      * that authorization to a role to stop the server creating forks as well.
      */
     AllowForking = true;
+    /**
+     * Host-level opt-in for the conversation's Remote Browser: the header's Browser button, its drawer,
+     * and the `browser_*` tools that let this conversation's agents drive it. Defaults false; a host
+     * that wants an agent-driven browser beside the chat sets true.
+     */
+    AllowRemoteBrowser = false;
     /**
      * Host-level cap for stopping and continuing agent runs: the composer's Stop and Stop all, the
      * Stop pill on an in-progress reply, the Continue button on a stopped reply, and the "Continue,
@@ -1808,11 +1921,100 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         return this.ShowAgentModePicker && !!this.ModePickerTargetAgentId;
     }
     get ModePickerTargetAgentId() {
-        return this.Conversation?.DefaultAgentID
+        return this.CurrentOwnerAgent?.ID
+            ?? this.Conversation?.DefaultAgentID
             ?? this.DefaultAgentId
             ?? this.conversationManagerAgent?.ID
             ?? null;
     }
+    _cachedOwnerAgentKey;
+    _cachedOwnerAgent = null;
+    /**
+     * Current conversation owner agent for the header `.with-chip` and composer
+     * placeholder: continuity (last non-Sage reply not preceded by a newer
+     * `@Sage` user message) -> pinned/default agent -> conversation manager.
+     * Memoized by message count and active routing inputs so template evaluation
+     * does not scan `messages` on every change-detection cycle.
+     */
+    get CurrentOwnerAgent() {
+        const managerId = this.conversationManagerAgent?.ID ?? null;
+        const rows = this.DisplayMessages?.length ? this.DisplayMessages : this.messages ?? [];
+        const lastRow = rows.length > 0 ? rows[rows.length - 1] : null;
+        const defaultId = this.Conversation?.DefaultAgentID ?? this.DefaultAgentId ?? null;
+        const floorMs = this.AgentHistoryFrom ? new Date(this.AgentHistoryFrom).getTime() : '';
+        const allowedKey = this.AllowedAgentIDs ? this.AllowedAgentIDs.join(',') : '';
+        const cacheKey = `${rows.length}|${lastRow?.ID ?? ''}|${lastRow?.AgentID ?? ''}|${defaultId ?? ''}|${managerId ?? ''}|${floorMs}|${allowedKey}`;
+        if (this._cachedOwnerAgentKey === cacheKey) {
+            return this._cachedOwnerAgent ?? null;
+        }
+        const continuity = FindContinuityAgentMessage(rows, managerId, {
+            conversationManagerName: this.conversationManagerAgent?.Name ?? 'Sage',
+            isWithinFloor: msg => !this.AgentHistoryFrom || msg.__mj_CreatedAt >= this.AgentHistoryFrom,
+        });
+        let targetId = null;
+        if (continuity?.AgentID && this.isOwnerAgentAllowed(continuity.AgentID)) {
+            targetId = continuity.AgentID;
+        }
+        else {
+            const fallbackId = defaultId ?? managerId;
+            if (fallbackId && this.isOwnerAgentAllowed(fallbackId)) {
+                targetId = fallbackId;
+            }
+        }
+        if (!targetId) {
+            this._cachedOwnerAgentKey = cacheKey;
+            this._cachedOwnerAgent = null;
+            return null;
+        }
+        const meta = this.resolveHandoffAgentMeta(targetId);
+        const isManager = managerId ? UUIDsEqual(targetId, managerId) : false;
+        const owner = {
+            ID: targetId,
+            Name: meta?.Name || (isManager ? (this.conversationManagerAgent?.Name || 'Sage') : 'Agent'),
+            IsConversationManager: isManager,
+        };
+        this._cachedOwnerAgentKey = cacheKey;
+        this._cachedOwnerAgent = owner;
+        return owner;
+    }
+    get CurrentOwnerAgentName() {
+        return this.CurrentOwnerAgent?.Name || this.conversationManagerAgent?.Name || 'Sage';
+    }
+    get CurrentOwnerAccentVar() {
+        return AgentAccentVar(this.CurrentOwnerAgent?.ID);
+    }
+    isOwnerAgentAllowed(agentId) {
+        if (!agentId) {
+            return false;
+        }
+        if (this.AllowedAgentIDs == null) {
+            return true;
+        }
+        return this.AllowedAgentIDs.some(allowed => UUIDsEqual(allowed, agentId));
+    }
+    resolveHandoffAgentMeta(agentId) {
+        if (this.conversationManagerAgent && UUIDsEqual(this.conversationManagerAgent.ID, agentId)) {
+            return {
+                Name: this.conversationManagerAgent.Name,
+                LogoURL: this.conversationManagerAgent.LogoURL,
+                IconClass: this.conversationManagerAgent.IconClass,
+            };
+        }
+        const agents = AIEngineBase.Instance?.Agents;
+        const found = agents?.find(a => UUIDsEqual(a.ID, agentId));
+        if (found) {
+            return {
+                Name: found.Name,
+                LogoURL: found.LogoURL,
+                IconClass: found.IconClass,
+            };
+        }
+        const msg = this.messages?.find(m => UUIDsEqual(m.AgentID, agentId) && m.Agent);
+        if (msg) {
+            return { Name: msg.Agent };
+        }
+        return null;
+    }
     /**
      * Mode picker emitted a new selection. Store it; the next message's
      * route picks it up via `<mj-message-input>`'s
@@ -2271,7 +2473,7 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
      */
     initialDraftSnapshots = new Map();
     GetInitialDraftFor(conversationId) {
-        const key = conversationId ? conversationId.trim().toLowerCase() : 'new';
+        const key = conversationId ? NormalizeUUID(conversationId) : 'new';
         if (!this.initialDraftSnapshots.has(key)) {
             let snapshot;
             if (this._composerAgentMention) {
@@ -2306,14 +2508,17 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         }
         // New/unsaved conversations render the empty-state composer; established ones
         // use the active cached input. Both resolve the agent to a pill.
-        const target = this.emptyStateComponent ? 'empty-state' : this.messageInputComponents?.first ? 'active-input' : null;
+        const activeInput = this.getActiveMessageInputComponent() ??
+            this.messageInputComponents?.last ??
+            this.messageInputComponents?.first;
+        const target = this.emptyStateComponent ? 'empty-state' : activeInput ? 'active-input' : null;
         if (attempt === 0 || attempt % 10 === 0 || target) {
             console.log(`[Omnibar→Chat] chat-area apply('${agentName}') attempt ${attempt}: target=${target ?? 'none-mounted'}`);
         }
         const insert = this.emptyStateComponent
             ? this.emptyStateComponent.InsertAgentMention(agentName, true)
-            : this.messageInputComponents?.first
-                ? this.messageInputComponents.first.InsertAgentMention(agentName, true)
+            : activeInput
+                ? activeInput.InsertAgentMention(agentName, true)
                 : null;
         if (insert) {
             void insert.then((applied) => {
@@ -2424,6 +2629,13 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
     reconcileInFlight = null;
     /** Reason for one more reconcile pass, requested while a pass was running. */
     reconcileRerunReason = null;
+    /**
+     * Set when a TRANSPORT reconnect asks for a pass; consumed by the next pass that starts. Held as a
+     * flag rather than read off the pass's reason because {@link ReconcileNow} folds requests that
+     * arrive mid-pass into one follow-up carrying only the LAST reason — a reconnect followed by a
+     * tab-visible would otherwise lose the window refresh the reconnect needs.
+     */
+    reconcileWindowRefreshPending = false;
     IsProcessing = false;
     /** @deprecated Use {@link IsProcessing}. */
     get isProcessing() {
@@ -2554,6 +2766,44 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
     }
     ShowArtifactPanel = false;
     SelectedTaskGraphPanel = null;
+    ShowRemoteBrowserPanel = false;
+    RemoteBrowserUrlInput = '';
+    IsRemoteBrowserNavigating = false;
+    /** Whether this conversation's browser is running, shown or not (the header button stays lit while it is). */
+    get IsRemoteBrowserLive() {
+        return this.remoteBrowser?.ConversationId != null;
+    }
+    /** The conversation's browser, built on first open so a chat area that never opens one pays nothing. */
+    remoteBrowser = null;
+    ensureRemoteBrowser() {
+        if (!this.remoteBrowser) {
+            const browser = new ConversationRemoteBrowserController({
+                OnAutoOpenSurface: () => this.OpenRemoteBrowserPanel(),
+                // Fires on open, close and a real URL change, never per screencast frame.
+                OnStateChange: () => {
+                    this.RemoteBrowserUrlInput = browser.CurrentUrl ?? '';
+                    this.cdr.detectChanges();
+                },
+                OnSessionRefused: (message) => {
+                    this.ShowRemoteBrowserPanel = false;
+                    MJNotificationService.Instance.CreateSimpleNotification(message, 'error', 6000);
+                    this.cdr.detectChanges();
+                },
+            });
+            const provider = this.ProviderToUse;
+            browser.Initialize(this.agentClientService, provider instanceof GraphQLDataProvider ? provider : null);
+            this.remoteBrowser = browser;
+        }
+        return this.remoteBrowser;
+    }
+    set ConversationRemoteBrowserSurface(surface) {
+        if (surface) {
+            this.remoteBrowser?.BindSurface(surface);
+        }
+        else {
+            this.remoteBrowser?.UnbindSurface();
+        }
+    }
     /** @deprecated Use {@link ShowArtifactPanel}. */
     get showArtifactPanel() {
         return this.ShowArtifactPanel;
@@ -2770,6 +3020,12 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
     set agentRunsByDetailId(value) {
         this.AgentRunsByDetailId = value;
     }
+    /**
+     * Handoff metadata by source conversation detail ID, built from the source
+     * run's `Handoff` step (`MJ: AI Agent Run Steps`) and subsequent target reply.
+     */
+    HandoffsByDetailId = new Map();
+    handoffStepsByRunId = new Map();
     /**
      * Ratings by conversation detail ID (parsed from RatingsJSON)
      */
@@ -3640,12 +3896,7 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         // runtime itself, which closes the call surface with it: say why, or the call just vanishes.
         this.RealtimeSession.SessionEnded$
             .pipe(takeUntil(this.destroy$))
-            .subscribe((ended) => {
-            if (ended.reason === 'error') {
-                const notice = DescribeCallFailureNotice(this.RealtimeSession.LastStartError, this.RealtimeSession.LastSessionError);
-                MJNotificationService.Instance.CreateSimpleNotification(notice, 'error', 6000);
-            }
-        });
+            .subscribe((ended) => this.notifyIfCallFailed(ended.reason));
         let voiceWasActive = false;
         this.RealtimeSession.Active$
             .pipe(takeUntil(this.destroy$))
@@ -3795,7 +4046,7 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
                     this.resetComponentState(conversationId);
                     await this.decideAndApplyArtifactPanel(artifactBaseline, conversationId);
                     this.messages = [...this.messages];
-                    this.followTranscript('new');
+                    this.followTranscript('new', newlyLoaded);
                     this.cdr.detectChanges();
                 }
                 else {
@@ -3966,11 +4217,19 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         for (const id of [...(this._stopFallbackTimers?.keys() ?? [])]) {
             this.clearStopFallbackTimer(id);
         }
+        // Leaving the chat surface altogether ends any live voice call (including
+        // minimized calls or calls minted from the empty state).
+        if (this.RealtimeSession?.IsActive) {
+            void this.RealtimeSession.EndRealtimeSession();
+        }
         // Remove resize listeners
-        window.removeEventListener('mousemove', this.boundOnResizeMove);
-        window.removeEventListener('mouseup', this.boundOnResizeEnd);
-        window.removeEventListener('touchmove', this.boundOnResizeTouchMove);
-        window.removeEventListener('touchend', this.boundOnResizeTouchEnd);
+        if (typeof window !== 'undefined') {
+            window.removeEventListener('mousemove', this.boundOnResizeMove);
+            window.removeEventListener('mouseup', this.boundOnResizeEnd);
+            window.removeEventListener('touchmove', this.boundOnResizeTouchMove);
+            window.removeEventListener('touchend', this.boundOnResizeTouchEnd);
+        }
+        this.remoteBrowser?.Dispose();
     }
     isActiveConversation(conversationId) {
         return UUIDsEqual(conversationId, this.ConversationId);
@@ -3987,6 +4246,13 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         this.clearTurnTracking();
         this.ShowArtifactPanel = false;
         this.SelectedTaskGraphPanel = null;
+        // A conversation's browser ends with it: the next conversation starts without one. Reloading the SAME
+        // conversation (the overlay-to-workspace handoff) keeps it.
+        const browserConversation = this.remoteBrowser?.ConversationId;
+        if (!browserConversation || !UUIDsEqual(browserConversation, this._conversationId)) {
+            this.ShowRemoteBrowserPanel = false;
+            void this.remoteBrowser?.Close();
+        }
         this.SelectedArtifactId = null;
         this.SelectedVersionNumber = undefined;
         this.CanShareSelectedArtifact = false;
@@ -4027,6 +4293,8 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         this.ForkSummaries = [];
         this.ShowForksPopover = false;
         this.IsRenamingTitle = false;
+        this.HandoffsByDetailId = new Map();
+        this.handoffStepsByRunId?.clear();
         if (this.forkSummaryRefreshTimer) {
             clearTimeout(this.forkSummaryRefreshTimer);
             this.forkSummaryRefreshTimer = null;
@@ -4060,12 +4328,7 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             if ((this.ArtifactsByDetailId?.size ?? 0) === 0 && this.artifactMapConversationId === null) {
                 this.artifactMapConversationId = conversationId;
             }
-            if (!this.messageInputMetadataCache.has(conversationId)) {
-                this.messageInputMetadataCache.set(conversationId, {
-                    conversationId: conversationId,
-                    conversationName: this.Conversation?.Name || null
-                });
-            }
+            this.touchMessageInputCache(conversationId);
             // Only show loading spinner if the engine doesn't have cached data for this conversation.
             // This prevents the "no messages" flash when switching between conversations.
             const hasCachedMessages = this.engine.HasCachedDetails(conversationId);
@@ -4129,6 +4392,108 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
     }
     _cachedInputsArray = [];
     _cachedInputsKey = '';
+    /** Max hidden composers kept mounted for draft/state preservation; older idle ones are unmounted. */
+    static MAX_CACHED_MESSAGE_INPUTS = 10;
+    /** Stable case-normalized track key for `@for` so case-only UUID changes reuse the mounted composer. */
+    NormalizeCachedInputId(conversationId) {
+        return NormalizeUUID(conversationId);
+    }
+    findMessageInputCacheEntry(conversationId) {
+        const exact = this.messageInputMetadataCache.get(conversationId);
+        if (exact) {
+            return { key: conversationId, meta: exact };
+        }
+        for (const [key, meta] of this.messageInputMetadataCache.entries()) {
+            if (UUIDsEqual(key, conversationId)) {
+                return { key, meta };
+            }
+        }
+        return undefined;
+    }
+    resolveConversationNameForCache(conversationId) {
+        const activeConv = this.Conversation;
+        if (activeConv?.Name && (!activeConv.ID || UUIDsEqual(activeConv.ID, conversationId))) {
+            return activeConv.Name;
+        }
+        return this.engine?.GetConversation?.(conversationId)?.Name || null;
+    }
+    syncCachedMessageInputName(conversationId, name) {
+        if (!this.messageInputMetadataCache || !conversationId || !name) {
+            return;
+        }
+        const found = this.findMessageInputCacheEntry(conversationId);
+        if (found && found.meta.conversationName !== name) {
+            this.messageInputMetadataCache.set(found.key, {
+                ...found.meta,
+                conversationName: name,
+            });
+        }
+    }
+    findMessageInputComponent(conversationId) {
+        if (!this.messageInputComponents || !conversationId) {
+            return undefined;
+        }
+        return this.messageInputComponents.find(component => UUIDsEqual(component.ConversationId ?? component.conversationId, conversationId));
+    }
+    /**
+     * True when a cached hidden composer for `candidateId` is idle and safe to unmount.
+     * Never evicts the newly-activated conversation, a conversation awaiting auto-send of
+     * `PendingMessage`, a conversation hosting a live voice session, a conversation with
+     * running tasks in `ActiveTasksService`, or a mounted composer with in-flight streaming
+     * callbacks / DB watches / unsent file attachments (`HasActiveWork`).
+     */
+    canEvictCachedMessageInput(candidateId, activeConversationId) {
+        if (UUIDsEqual(candidateId, activeConversationId) || UUIDsEqual(candidateId, this.ConversationId)) {
+            return false;
+        }
+        if (this._pendingMessage && this.ShouldDeliverPendingMessageTo(candidateId)) {
+            return false;
+        }
+        if (this.RealtimeSession?.IsActiveFor?.(candidateId)) {
+            return false;
+        }
+        if (this.activeTasks?.HasActiveTasksForConversation?.(candidateId)) {
+            return false;
+        }
+        const mounted = this.findMessageInputComponent(candidateId);
+        if (mounted?.HasActiveWork) {
+            return false;
+        }
+        return true;
+    }
+    /**
+     * Registers `conversationId` as the most-recently-used composer and unmounts the
+     * least-recently-used idle ones beyond the cap. Each cache entry keeps a live
+     * `mj-message-input` component, so without a bound memory grows with every
+     * conversation visited. Composers actively running an agent turn, holding unsent
+     * file attachments, or hosting a live voice call are skipped until idle. Drafts
+     * live in the draft store, so an evicted composer's frozen restore snapshot is
+     * dropped to let a remount re-read the latest draft.
+     */
+    touchMessageInputCache(conversationId) {
+        const existing = this.findMessageInputCacheEntry(conversationId);
+        if (existing) {
+            this.messageInputMetadataCache.delete(existing.key); // re-insert to refresh recency & align casing
+        }
+        const conversationName = existing?.meta.conversationName ?? this.resolveConversationNameForCache(conversationId);
+        this.messageInputMetadataCache.set(conversationId, {
+            conversationId,
+            conversationName,
+        });
+        if (this.messageInputMetadataCache.size <= ConversationChatAreaComponent.MAX_CACHED_MESSAGE_INPUTS) {
+            return;
+        }
+        for (const [candidateKey, entry] of [...this.messageInputMetadataCache.entries()]) {
+            if (this.messageInputMetadataCache.size <= ConversationChatAreaComponent.MAX_CACHED_MESSAGE_INPUTS) {
+                break;
+            }
+            if (!this.canEvictCachedMessageInput(entry.conversationId, conversationId)) {
+                continue;
+            }
+            this.messageInputMetadataCache.delete(candidateKey);
+            this.initialDraftSnapshots?.delete(NormalizeUUID(entry.conversationId));
+        }
+    }
     /**
      * Returns array of cached message-input metadata for rendering.
      * This allows multiple message-input components to exist simultaneously (hidden)
@@ -4170,10 +4535,10 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
      * we need to find the one that matches the current conversationId.
      */
     getActiveMessageInputComponent() {
-        if (!this.messageInputComponents || !this.ConversationId) {
+        if (!this.ConversationId) {
             return undefined;
         }
-        return this.messageInputComponents.find(component => component.conversationId === this.ConversationId);
+        return this.findMessageInputComponent(this.ConversationId);
     }
     async loadMessages(conversationId, loadToken) {
         try {
@@ -4327,7 +4692,7 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         if (!this.isActiveConversationLoad(conversationId, loadToken)) {
             return;
         }
-        this.windowStore.SetPinnedCount(result.Success ? result.TotalRowCount : 0);
+        this.windowStore.SetPinnedCount(result.Success ? result.TotalRowCount ?? 0 : 0);
     }
     /**
      * Hydrates the pins panel's rows — first panel open only.
@@ -4448,6 +4813,18 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         if (sessionMeta.size > 0) {
             this.RealtimeSessionMetaMap = new Map([...this.RealtimeSessionMetaMap, ...sessionMeta]);
         }
+        const newRunIds = newIds
+            .map(id => this.AgentRunsByDetailId.get(id)?.ID)
+            .filter((id) => !!id);
+        if (newRunIds.length > 0) {
+            await this.loadHandoffStepsForRunIds(newRunIds, conversationId);
+            if (!this.isActiveConversation(conversationId)) {
+                return;
+            }
+        }
+        else {
+            this.rebuildHandoffsMap();
+        }
         // A page of OLDER artifacts just entered the map. Any artifact-panel baseline taken before
         // this point can no longer be diffed against the map for creations — these arrived from
         // history, not from a run. See snapshotArtifactPanelBaseline.
@@ -4489,6 +4866,7 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             this.ArtifactsByDetailId.clear();
             this.SystemArtifactsByDetailId.clear();
             this.RatingsByDetailId.clear();
+            this.handoffStepsByRunId.clear();
             // Copy agent runs from engine (cast to extended type for UI compatibility)
             for (const [detailId, agentRun] of cacheEntry.AgentRunsByDetailId) {
                 this.AgentRunsByDetailId.set(detailId, agentRun);
@@ -4520,6 +4898,13 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             if (!this.isCurrentConversationContext(conversationId, loadToken)) {
                 return;
             }
+            const runIds = Array.from(this.AgentRunsByDetailId.values())
+                .map(r => r?.ID)
+                .filter((id) => !!id);
+            await this.loadHandoffStepsForRunIds(runIds, conversationId, loadToken);
+            if (!this.isCurrentConversationContext(conversationId, loadToken)) {
+                return;
+            }
             // Create new Map references to trigger Angular change detection
             this.AgentRunsByDetailId = new Map(this.AgentRunsByDetailId);
             this.ArtifactsByDetailId = new Map(this.ArtifactsByDetailId);
@@ -4542,6 +4927,42 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             this.artifactMapConversationId = null;
         }
     }
+    async loadHandoffStepsForRunIds(runIds, conversationId, loadToken) {
+        if (runIds.length > 0) {
+            const steps = await LoadHandoffStepsForRuns(this.ProviderToUse, runIds);
+            if (conversationId != null &&
+                !this.isCurrentConversationContext(conversationId, loadToken)) {
+                return;
+            }
+            for (const step of steps) {
+                if (step && step.ID && step.AgentRunID && (!step.StepType || step.StepType === 'Handoff')) {
+                    this.handoffStepsByRunId.set(step.ID, step);
+                }
+            }
+        }
+        this.rebuildHandoffsMap();
+    }
+    rebuildHandoffsMap() {
+        const stepsMap = this.handoffStepsByRunId;
+        if (!stepsMap || stepsMap.size === 0 || !this.AgentRunsByDetailId || this.AgentRunsByDetailId.size === 0) {
+            if (!this.HandoffsByDetailId || this.HandoffsByDetailId.size > 0) {
+                this.HandoffsByDetailId = new Map();
+            }
+            return;
+        }
+        const engineAgents = AIEngineBase.Instance?.Agents ?? [];
+        const agents = this.conversationManagerAgent &&
+            !engineAgents.some(a => UUIDsEqual(a.ID, this.conversationManagerAgent?.ID))
+            ? [this.conversationManagerAgent, ...engineAgents]
+            : engineAgents;
+        this.HandoffsByDetailId = BuildHandoffsByDetailId({
+            Messages: this.messages ?? [],
+            AgentRunsByDetailId: this.AgentRunsByDetailId,
+            HandoffSteps: Array.from(stepsMap.values()),
+            Agents: agents,
+            Presets: AIEngineBase.Instance?.AgentConfigurations ?? [],
+        });
+    }
     /**
      * Loads the `MJ: AI Agent Sessions` rows referenced by the conversation's
      * session-stamped details (one batched lookup, narrow fields, only when stamped rows
@@ -4636,12 +5057,25 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             this.replaceDisplayedRow(message);
             this.windowStore.ApplyLocalDetail(message);
         }
+        const rootId = this.collapsedThreadRootId(message);
+        if (rootId !== null) {
+            if (index < 0) {
+                // A hidden reply's first frame: the full path adds the row once; later frames patch it in place above.
+                this.ngZone.run(() => void this.OnMessageSent(message));
+                return;
+            }
+            const root = (this.messages ?? []).find(m => UUIDsEqual(m.ID, rootId));
+            if (root) {
+                this.messageListComponent?.RefreshRenderedMessage(root);
+            }
+            return;
+        }
         if (!this.messageListComponent?.RefreshRenderedMessage(message)) {
             // The first delta can beat the bubble's own render; the full path handles that one update.
             this.ngZone.run(() => void this.OnMessageSent(message));
             return;
         }
-        this.followTranscript('stream');
+        this.followTranscript('stream', message);
     }
     /** Drops a landing still queued or retrying, so it cannot resolve after a newer one. */
     cancelPendingLanding() {
@@ -4729,8 +5163,15 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
                 }
             }
         }
+        else if (this.isSettled(message)) {
+            // The final frame of a reply can arrive as a plain send; it leaves the in-flight list here.
+            this.dropSettledFromInFlight();
+        }
         // Where the viewport goes: a fresh send follows — an in-place update of a message that
-        // is already on screen must not re-run the send path's scroll.
+        // is already on screen must not re-run the send path's scroll or rebuild the handoffs map.
+        if (!upsert.Existed) {
+            this.rebuildHandoffsMap();
+        }
         this.followTranscript(upsert.Existed ? 'update' : 'new', message);
         // 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,
@@ -4856,10 +5297,17 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
                     ConversationEngine.Instance.SetAgentRunForDetail(event.conversationId, event.conversationDetailId, newEntity);
                 }
             }
+            await this.loadHandoffStepsForRunIds([existingAgentRun.ID], event.conversationId);
+            if (!this.isActiveConversation(event.conversationId)) {
+                return;
+            }
             // Trigger re-render to show updated status
             this.messages = [...this.messages];
             this.cdr.detectChanges();
         }
+        else {
+            this.rebuildHandoffsMap();
+        }
         // Reload attachments for this message to pick up newly created media attachments
         // (e.g., images generated by agent via Generate Image action)
         // This must be done after agent completion because attachments are created by AgentRunner
@@ -4895,6 +5343,9 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
                     ConversationEngine.Instance.SetAgentRunForDetail(event.conversationId, event.conversationDetailId, event.agentRun);
                 }
             }
+            if (!existingRun || !UUIDsEqual(existingRun.ID, event.agentRun.ID)) {
+                this.rebuildHandoffsMap();
+            }
         }
         else {
             // no agent run, should have agentRunId
@@ -4950,7 +5401,7 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             // Track existing message IDs before reload to identify new messages
             const existingMessageIds = new Set(this.messages.map(m => m.ID));
             // Merge the refreshed window with existing client-side messages.
-            // Preserves messages added client-side (e.g., by handleSubAgentInvocation)
+            // Preserves messages added client-side (e.g., server-followed handoff rows)
             // that haven't been picked up by entity events yet due to timing.
             const merged = new Map();
             for (const msg of engineDetails) {
@@ -4966,15 +5417,20 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             // Find newly discovered messages (delegated agents)
             const newMessages = engineDetails.filter(m => !existingMessageIds.has(m.ID));
             // Check engine cache for agent runs on new messages
+            const discoveredRunIds = [];
             for (const message of newMessages) {
                 if (message.AgentID && message.ID) {
                     const agentRun = this.engine.GetAgentRunForDetail(conversationId, message.ID);
                     if (agentRun) {
                         this.AgentRunsByDetailId.set(message.ID, agentRun);
+                        if (agentRun.ID) {
+                            discoveredRunIds.push(agentRun.ID);
+                        }
                         LogStatusEx({ message: `✅ Found cached agent run for new delegated message ${message.ID}`, verboseOnly: true });
                     }
                 }
             }
+            await this.loadHandoffStepsForRunIds(discoveredRunIds, conversationId);
             LogStatusEx({ message: `✅ Refreshed ${engineDetails.length} messages from engine cache (${newMessages.length} new)`, verboseOnly: true });
         }
         catch (error) {
@@ -5614,22 +6070,36 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         const view = this.WindowView;
         const branches = UUIDsEqual(this.branchRowsConversationId, this.ConversationId) ? (this.branches ?? NO_BRANCHES) : NO_BRANCHES;
         const canFork = this.CanFork;
+        const collapseThreads = Boolean(this.CollapseThreadReplies);
         const cache = this.inPlaceTurnCache;
-        if (cache && cache.Messages === messages && cache.View === view && cache.Branches === branches && cache.CanFork === canFork) {
+        if (cache &&
+            cache.Messages === messages &&
+            cache.View === view &&
+            cache.Branches === branches &&
+            cache.CanFork === canFork &&
+            cache.CollapseThreads === collapseThreads) {
             return cache.Turn;
         }
         const turn = canFork ? null : this.unblockedLatestTurn(messages, view, branches);
-        this.inPlaceTurnCache = { Messages: messages, View: view, Branches: branches, CanFork: canFork, Turn: turn };
+        this.inPlaceTurnCache = {
+            Messages: messages,
+            View: view,
+            Branches: branches,
+            CanFork: canFork,
+            CollapseThreads: collapseThreads,
+            Turn: turn,
+        };
         return turn;
     }
     /** The latest turn of the rows, or null when there is none or a fork depends on its answer rows. */
     unblockedLatestTurn(messages, view, branches) {
-        const turn = FindLatestTurn(messages, view);
-        const user = turn ? messages.find(m => UUIDsEqual(m.ID, turn.UserDetailID)) : undefined;
+        const mainFlow = this.CollapseThreadReplies ? this.displayState().MainFlow : messages;
+        const turn = FindLatestTurn(mainFlow, view);
+        const user = turn ? mainFlow.find(m => UUIDsEqual(m.ID, turn.UserDetailID)) : undefined;
         if (!turn || !user) {
             return null;
         }
-        return ForkDependsOnRows(user.BranchID ?? null, TurnRowsAfter(messages, user), branches) ? null : turn;
+        return ForkDependsOnRows(user.BranchID ?? null, this.turnRowsAfter(messages, user), branches) ? null : turn;
     }
     /** "Save and resend": the message item saved the new text of the latest user message; reruns its turn in place. */
     async OnResendInPlaceRequested(userMessage) {
@@ -5653,7 +6123,7 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         if (!input) {
             return;
         }
-        const answerRows = TurnRowsAfter(this.messages ?? [], userMessage);
+        const answerRows = this.turnRowsAfter(this.messages ?? [], userMessage);
         if (answerRows.some(r => r.Status === 'In-Progress')) {
             MJNotificationService.Instance.CreateSimpleNotification('Wait for the current reply to finish', 'error', 3000);
             return;
@@ -5697,6 +6167,23 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             this.inPlaceRerunInFlight = false;
         }
     }
+    /**
+     * The rows of `userMessage`'s turn that an in-place rerun replaces: when thread replies are
+     * collapsed, the main-flow rows after `userMessage` plus any thread replies rooted on those rows.
+     */
+    turnRowsAfter(messages, userMessage) {
+        if (!this.CollapseThreadReplies) {
+            return TurnRowsAfter(messages, userMessage);
+        }
+        const roots = GetThreadReplyRoots(messages);
+        const mainFlow = messages.filter(m => !roots.Has(m.ID));
+        const mainAfter = TurnRowsAfter(mainFlow, userMessage);
+        const afterRoots = new UUIDSet(mainAfter.map(m => m.ID));
+        return TurnRowsAfter(messages, userMessage).filter(m => {
+            const rootId = roots.Get(m.ID);
+            return afterRoots.Has(m.ID) || (rootId !== undefined && afterRoots.Has(rootId));
+        });
+    }
     /**
      * Marks each row replaced, one save at a time (parallel saves race on the server's transaction
      * counter): `ReplacedAt` set and `HiddenToUser` true; the rows are kept for audit. Takes the saved rows
@@ -5786,7 +6273,7 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
     }
     /** The nearest earlier User row in the loaded window; null when the window holds none. */
     findUserMessageBefore(aiMessage) {
-        const sorted = [...this.messages].sort((a, b) => a.Sequence - b.Sequence);
+        const sorted = [...this.displayState().MainFlow].sort((a, b) => a.Sequence - b.Sequence);
         const index = sorted.findIndex(m => UUIDsEqual(m.ID, aiMessage.ID));
         for (let i = index - 1; i >= 0; i--) {
             if (sorted[i].Role === 'User') {
@@ -5899,6 +6386,17 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
     get WindowView() {
         return this.windowView ?? MAIN_OPEN_VIEW;
     }
+    /**
+     * When true, thread replies in the loaded window are omitted from top-level `DisplayMessages` so
+     * they can be rendered inside a collapsed thread under their root message (see
+     * {@link GetThreadReplyRoots}).
+     */
+    CollapseThreadReplies = false;
+    /**
+     * Emits when a jump targets a collapsed thread reply, after scrolling to its top-level root
+     * message, so the host can open the thread and reveal the reply.
+     */
+    ThreadReplyRevealRequested = new EventEmitter();
     /**
      * The rows the message list shows for the window view; the same array until the rows or the view
      * change. Main shows every loaded row; a fork shows every inherited row, then its own rows; a draft
@@ -5911,16 +6409,45 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
     displayState() {
         const messages = this.messages ?? [];
         const view = this.WindowView;
+        const collapseThreads = Boolean(this.CollapseThreadReplies);
         const cache = this.displayCache;
-        if (cache && cache.Messages === messages && cache.View === view) {
+        if (cache && cache.Messages === messages && cache.View === view && cache.CollapseThreads === collapseThreads) {
             return cache;
         }
-        const split = SplitForkRows(messages, view);
-        const rows = view.Kind === 'Main' ? messages : [...split.Inherited, ...split.Own];
-        const next = { Messages: messages, View: view, Split: split, Rows: rows };
+        const threadReplyRoots = collapseThreads ? GetThreadReplyRoots(messages) : EMPTY_THREAD_REPLY_ROOTS;
+        const mainFlow = collapseThreads ? messages.filter((m) => !threadReplyRoots.Has(m.ID)) : messages;
+        const split = SplitForkRows(mainFlow, view);
+        const rows = view.Kind === 'Main' ? mainFlow : [...split.Inherited, ...split.Own];
+        const next = {
+            Messages: messages,
+            View: view,
+            CollapseThreads: collapseThreads,
+            ThreadReplyRoots: threadReplyRoots,
+            MainFlow: mainFlow,
+            Split: split,
+            Rows: rows,
+        };
         this.displayCache = next;
         return next;
     }
+    /**
+     * Top-level root ID for `message` when {@link CollapseThreadReplies} is on and `message` is a
+     * thread reply; null when thread collapsing is off or `message` belongs in the main flow.
+     */
+    collapsedThreadRootId(message) {
+        if (!this.CollapseThreadReplies) {
+            return null;
+        }
+        const fromLoaded = this.displayState().ThreadReplyRoots.Get(message.ID);
+        if (fromLoaded) {
+            return fromLoaded;
+        }
+        const loaded = this.messages ?? [];
+        if (loaded.some((m) => UUIDsEqual(m.ID, message.ID))) {
+            return null;
+        }
+        return GetThreadReplyRoots([...loaded, message]).Get(message.ID) ?? null;
+    }
     /**
      * Puts `message` in place of the row with its id in the displayed rows and their split, keeping those
      * arrays. They are copies of `messages`, so an entity replaced in place there is replaced here too.
@@ -5930,6 +6457,7 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         if (!cache || cache.Messages !== this.messages) {
             return;
         }
+        this.replaceRowIn(cache.MainFlow, message);
         this.replaceRowIn(cache.Rows, message);
         this.replaceRowIn(cache.Split.Inherited, message);
         this.replaceRowIn(cache.Split.Own, message);
@@ -5990,6 +6518,13 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             if (stoppedAgent !== undefined) {
                 return `Continue, or tell ${stoppedAgent ?? 'the agent'} what to do differently`;
             }
+            const owner = this.CurrentOwnerAgent;
+            if (owner && !owner.IsConversationManager) {
+                if (owner.Name.trim().toLowerCase() === 'video studio') {
+                    return `Ask ${owner.Name} for changes, like "make the opening faster"`;
+                }
+                return `Ask ${owner.Name} for changes or a follow-up...`;
+            }
         }
         return MAIN_COMPOSER_PLACEHOLDER;
     }
@@ -6106,7 +6641,8 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         if (anchor) {
             return anchor;
         }
-        const inherited = view === this.WindowView ? this.displayState().Split.Inherited : SplitForkRows(messages, view).Inherited;
+        const state = this.displayState();
+        const inherited = view === this.WindowView ? state.Split.Inherited : SplitForkRows(state.MainFlow, view).Inherited;
         return inherited.length > 0 ? inherited[inherited.length - 1] : null;
     }
     /** A short date and time for fork text, in the person's locale. */
@@ -6292,6 +6828,10 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
                     if (!isCurrent()) {
                         return;
                     }
+                    await this.loadHandoffStepsForRunIds([agentRun.ID], expectedConversationId, loadToken);
+                    if (!isCurrent()) {
+                        return;
+                    }
                 }
             }
             // Reload artifacts for this completed message
@@ -6330,6 +6870,7 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             // The completed message was mutated in place — refresh the window's copy too.
             this.windowStore.ApplyLocalDetail(message);
             // Force re-render with updated agent run and artifacts
+            this.rebuildHandoffsMap();
             this.messages = [...this.messages];
             this.cdr.detectChanges();
             LogStatusEx({ message: `✅ Completion handled for message ${message.ID}`, verboseOnly: true });
@@ -6344,6 +6885,8 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             if (!finished && completionId) {
                 this.handledCompletionIds?.delete(completionId);
             }
+            // The row was loaded above whatever happened after; if it settled, it is no longer in flight.
+            this.dropSettledFromInFlight();
         }
     }
     async OnAgentResponse(event) {
@@ -6436,6 +6979,10 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
                             ConversationEngine.Instance.SetAgentRunForDetail(conversationId, conversationDetailId, existingRun);
                         }
                     }
+                    await this.loadHandoffStepsForRunIds([agentRunId], conversationId);
+                    if (!this.isActiveConversation(conversationId)) {
+                        return agentRun;
+                    }
                     // Refresh the target message in place when already rendered; fall back to
                     // shallow array copy only when the message is not yet mounted in the list.
                     const targetMessage = this.messages.find(m => UUIDsEqual(m.ID, conversationDetailId));
@@ -7013,14 +7560,13 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         // region the list unmounts into spacers — so this button silently did nothing for any pin
         // that wasn't already on screen. The list resolves through the timeline key, which a
         // spacer shares with the item it stands in for.
-        if (this.messageListComponent?.ScrollToMessage(messageId)) {
-            this.beaconMessage(messageId);
+        if (this.scrollToMessageOrThreadRoot(messageId)) {
             return;
         }
         // Not in the loaded window. Pins are fetched by their own query precisely so the panel can
         // list pins older than the transcript, so this is the EXPECTED case for an old pin, not an
         // error — page back until it is loaded, the same way a date jump does.
-        const reached = await this.loadUntilMessageIsWindowed(messageId);
+        const reached = (await this.loadUntilMessageIsWindowed(messageId)) && (await this.loadUntilThreadRootIsWindowed(messageId));
         if (!reached) {
             MJNotificationService.Instance.CreateSimpleNotification('Could not reach that message — it is further back than this jump loads.', 'info', 3000);
             return;
@@ -7028,10 +7574,7 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         // The paging loop deliberately skipped the per-page peripheral rebuild — pay it once,
         // here, before asking the list for element positions.
         await this.refreshAfterPaging(this.ConversationId);
-        if (this.messageListComponent?.ScrollToMessage(messageId)) {
-            this.beaconMessage(messageId);
-        }
-        else {
+        if (!this.scrollToMessageOrThreadRoot(messageId)) {
             MJNotificationService.Instance.CreateSimpleNotification('Could not find that message in this conversation', 'info', 3000);
         }
     }
@@ -7063,6 +7606,10 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             return false;
         }
         await this.loadUntilSequenceIsWindowed(sequence);
+        const hit = this.windowStore.GetSnapshot().Details.find(m => m.Sequence === sequence && UUIDsEqual(m.BranchID ?? null, branchId));
+        if (hit) {
+            await this.loadUntilThreadRootIsWindowed(hit.ID);
+        }
         if (!this.isActiveConversation(conversationId)) {
             return false;
         }
@@ -7073,13 +7620,43 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             this.scrollToBottom = false;
             this.bottomFollowSuppressedUntil = Date.now() + 1500;
         }
-        if (!row || !this.messageListComponent?.ScrollToMessage(row.ID)) {
+        if (!row || !this.scrollToMessageOrThreadRoot(row.ID, 'search-hit-highlight', 2000)) {
             MJNotificationService.Instance.CreateSimpleNotification('Could not find that message in this conversation', 'info', 3000);
             return false;
         }
-        this.beaconMessage(row.ID, 'search-hit-highlight', 2000);
         return true;
     }
+    /**
+     * Scrolls to `messageId`, or when {@link CollapseThreadReplies} hides `messageId` under a thread
+     * root, scrolls to that root and emits {@link ThreadReplyRevealRequested} so the host can open
+     * the thread. False when the row (or its root) is not loaded, so the caller can page back for it.
+     */
+    scrollToMessageOrThreadRoot(messageId, cssClass = 'pin-beacon', durationMs = 1500) {
+        const rootId = this.CollapseThreadReplies
+            ? this.displayState().ThreadReplyRoots.Get(messageId)
+            : undefined;
+        if (rootId) {
+            if (!this.messageListComponent?.ScrollToMessage(rootId)) {
+                return false;
+            }
+            this.beaconMessage(rootId, cssClass, durationMs);
+            this.emitThreadReplyReveal(messageId, rootId);
+            return true;
+        }
+        if (this.messageListComponent?.ScrollToMessage(messageId)) {
+            this.beaconMessage(messageId, cssClass, durationMs);
+            return true;
+        }
+        return false;
+    }
+    emitThreadReplyReveal(replyId, rootId) {
+        const loadedReply = (this.messages ?? []).find(m => UUIDsEqual(m.ID, replyId));
+        const loadedRoot = (this.messages ?? []).find(m => UUIDsEqual(m.ID, rootId));
+        this.ThreadReplyRevealRequested.emit({
+            ReplyID: loadedReply?.ID ?? replyId,
+            RootID: loadedRoot?.ID ?? rootId,
+        });
+    }
     /**
      * Waits until the load of `conversationId` has ended. False when another conversation
      * becomes active first or the component is destroyed.
@@ -7095,12 +7672,39 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
     }
     /** Pages older history until the pinned message `messageId` falls inside the loaded window. */
     async loadUntilMessageIsWindowed(messageId) {
-        const target = this.PinnedMessages.find(p => UUIDsEqual(p.ID, messageId));
+        const target = this.PinnedMessages?.find(p => UUIDsEqual(p.ID, messageId));
         if (!target) {
             return false; // not a loaded pin — nothing tells us how far back to page
         }
         return this.loadUntilSequenceIsWindowed(target.Sequence);
     }
+    /**
+     * With {@link CollapseThreadReplies} on, pages older history until the top-level root of the loaded
+     * thread reply `messageId` is loaded too, since the jump lands on the root. True when nothing more is
+     * needed (collapsing off, `messageId` not a loaded thread reply, or its root loaded).
+     */
+    async loadUntilThreadRootIsWindowed(messageId) {
+        if (!this.CollapseThreadReplies) {
+            return true;
+        }
+        const conversationId = this.ConversationId;
+        for (let page = 0; page < DATE_JUMP_MAX_PAGES; page++) {
+            const snapshot = this.windowStore.GetSnapshot();
+            // Recomputed per page: a loaded parent that is itself a reply moves the root further up.
+            const rootId = GetThreadReplyRoots(snapshot.Details).Get(messageId);
+            if (!rootId || new UUIDSet(snapshot.Details.map(m => m.ID)).Has(rootId)) {
+                return true;
+            }
+            if (!snapshot.Cursor.HasMoreAbove) {
+                return false;
+            }
+            await this.windowStore.LoadOlder(this.CurrentUser);
+            if (!this.isActiveConversation(conversationId)) {
+                return false;
+            }
+        }
+        return false;
+    }
     /**
      * Pages older history until the loaded window reaches back to `sequence`.
      *
@@ -7226,10 +7830,9 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         }
         // Find this message and all messages after it sorted by Sequence
         const sortedMessages = [...this.messages].sort((a, b) => a.Sequence - b.Sequence);
-        const targetIndex = sortedMessages.findIndex(m => UUIDsEqual(m.ID, message.ID));
-        if (targetIndex === -1)
+        const toHide = this.rowsToDeleteFrom(sortedMessages, message.ID);
+        if (toHide.length === 0)
             return;
-        const toHide = sortedMessages.slice(targetIndex);
         const count = toHide.length;
         const confirmed = await this.confirmDialog.confirm({
             title: 'Delete Messages',
@@ -7262,15 +7865,52 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
                 console.error(`Failed to delete ConversationDetail ${e.ID}: ${last?.Message ?? 'unknown error'}`, last?.Error ?? '');
             }
         }
-        const hideIds = new Set(toHide.map(m => m.ID));
+        const hideIds = new UUIDSet(toHide.map(m => m.ID));
         // Drop them from the window too, or the next RefreshLatest merge reinstates them.
-        for (const id of hideIds) {
-            this.windowStore.RemoveDetail(id);
+        for (const m of toHide) {
+            this.windowStore.RemoveDetail(m.ID);
         }
-        this.messages = this.messages.filter(m => !hideIds.has(m.ID));
+        this.messages = this.messages.filter(m => !hideIds.Has(m.ID));
         this.resetComponentState(this.ConversationId);
         this.cdr.detectChanges();
     }
+    /**
+     * The rows removed by "delete this and everything after": when thread replies are collapsed,
+     * the target, every main-flow row after it, and any thread replies whose root is among those rows.
+     * When the target is itself a thread reply, only the target and the replies under it.
+     */
+    rowsToDeleteFrom(sortedMessages, targetId) {
+        const targetIndex = sortedMessages.findIndex(m => UUIDsEqual(m.ID, targetId));
+        if (targetIndex === -1) {
+            return [];
+        }
+        if (!this.CollapseThreadReplies) {
+            return sortedMessages.slice(targetIndex);
+        }
+        const roots = GetThreadReplyRoots(sortedMessages);
+        if (roots.Has(targetId)) {
+            // Sorted by Sequence, so a reply always follows its parent: one pass collects the subtree.
+            const subtree = new UUIDSet([sortedMessages[targetIndex].ID]);
+            for (let i = targetIndex + 1; i < sortedMessages.length; i++) {
+                const parentId = sortedMessages[i].ParentID;
+                if (parentId && subtree.Has(parentId)) {
+                    subtree.Add(sortedMessages[i].ID);
+                }
+            }
+            return sortedMessages.filter(m => subtree.Has(m.ID));
+        }
+        const removedRoots = new UUIDSet();
+        for (let i = targetIndex; i < sortedMessages.length; i++) {
+            const id = sortedMessages[i].ID;
+            if (!roots.Has(id) || i === targetIndex) {
+                removedRoots.Add(id);
+            }
+        }
+        return sortedMessages.filter(m => {
+            const rootId = roots.Get(m.ID);
+            return removedRoots.Has(m.ID) || (rootId !== undefined && removedRoots.Has(rootId));
+        });
+    }
     /** @deprecated Use {@link OnDeleteMessage}. */
     async onDeleteMessage(message) {
         return this.OnDeleteMessage(message);
@@ -7377,6 +8017,7 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             this.SelectedVersionNumber = undefined;
         }
         this.SelectedTaskGraphPanel = null;
+        this.ShowRemoteBrowserPanel = false;
         this.ShowArtifactPanel = true;
         // Load permissions for the selected artifact
         await this.loadArtifactPermissions(data.artifactId, conversationId, data.artifactId);
@@ -7401,6 +8042,7 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             return;
         }
         this.ShowArtifactPanel = false;
+        this.ShowRemoteBrowserPanel = false;
         this.SelectedArtifactId = null;
         this.SelectedTaskGraphPanel = {
             parentTaskId: data.parentTaskId,
@@ -7414,6 +8056,73 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         this.resetArtifactPaneSizing();
         this.cdr.detectChanges();
     }
+    ToggleRemoteBrowserPanel() {
+        if (this.ShowRemoteBrowserPanel) {
+            this.CloseRemoteBrowserPanel();
+        }
+        else {
+            this.OpenRemoteBrowserPanel();
+        }
+    }
+    OpenRemoteBrowserPanel() {
+        if (this.ShowRemoteBrowserPanel || !this.AllowRemoteBrowser || !this.ConversationId) {
+            return;
+        }
+        // Open before the drawer renders: binding its surface starts the screencast for this conversation.
+        this.ensureRemoteBrowser().Open(this.ConversationId);
+        this.ShowArtifactPanel = false;
+        this.SelectedTaskGraphPanel = null;
+        this.SelectedArtifactId = null;
+        this.ShowRemoteBrowserPanel = true;
+        this.cdr.detectChanges();
+    }
+    /** Closing the drawer ends the browser (hiding it behind an artifact does not). */
+    CloseRemoteBrowserPanel() {
+        if (!this.ShowRemoteBrowserPanel) {
+            return;
+        }
+        this.ShowRemoteBrowserPanel = false;
+        this.resetArtifactPaneSizing();
+        void this.remoteBrowser?.Close();
+        this.cdr.detectChanges();
+    }
+    async NavigateRemoteBrowserFromInput() {
+        const rawUrl = this.RemoteBrowserUrlInput?.trim();
+        if (!rawUrl || this.IsRemoteBrowserNavigating) {
+            return;
+        }
+        this.IsRemoteBrowserNavigating = true;
+        this.cdr.detectChanges();
+        try {
+            const result = await this.remoteBrowser?.Navigate(rawUrl);
+            // A refused session already said why (OnSessionRefused) and closed the browser.
+            if (result && !result.Success && this.IsRemoteBrowserLive) {
+                MJNotificationService.Instance.CreateSimpleNotification(result.ErrorMessage ?? 'The page could not be opened.', 'error', 5000);
+            }
+        }
+        finally {
+            this.IsRemoteBrowserNavigating = false;
+            this.cdr.detectChanges();
+        }
+    }
+    /**
+     * `AppContext` plus the conversation's open browser (its URL, and the `browser_*` tools while this
+     * chat area owns them). Cached: it is bound to an input, so a fresh object per check would re-fire it.
+     */
+    get EffectiveAppContext() {
+        const controller = this.remoteBrowser;
+        if (!controller) {
+            return this.AppContext;
+        }
+        const owns = controller.ConversationId !== null && controller.OwnsTools;
+        let memo = this.effectiveAppContextMemo;
+        if (!memo || memo.Base !== this.AppContext || memo.Version !== controller.StateVersion || memo.Owns !== owns) {
+            memo = { Base: this.AppContext, Version: controller.StateVersion, Owns: owns, Value: controller.WithBrowserContext(this.AppContext) };
+            this.effectiveAppContextMemo = memo;
+        }
+        return memo.Value;
+    }
+    effectiveAppContextMemo = null;
     /**
      * Persists the currently displayed Task Graph in the chat side-panel as a reusable
      * Draft Flow Agent workflow via {@link WorkflowSaveOperation} and opens the new
@@ -7694,6 +8403,9 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
     }
     OnConversationRenamed(event) {
         LogStatusEx({ message: '🎉 Conversation renamed', verboseOnly: true, additionalArgs: [event] });
+        if (event?.conversationId && event.name) {
+            this.syncCachedMessageInputName(event.conversationId, event.name);
+        }
         // Pass the event up to workspace component for animation
         this.ConversationRenamed.emit(event);
     }
@@ -7964,6 +8676,17 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         void this.engine.EnsureConversationLoaded(created, this.CurrentUser);
         this.RealtimeConversationReady.emit({ conversationId: created, select: false });
     }
+    /**
+     * Says why a call ended only when it ended over a failure. A `'deadline'` end (the runtime's time-limit auto-end) is
+     * a normal end: the call surface closes on its own and the visitor needs no error toast.
+     */
+    notifyIfCallFailed(reason) {
+        if (reason !== 'error') {
+            return;
+        }
+        const notice = DescribeCallFailureNotice(this.RealtimeSession.LastStartError, this.RealtimeSession.LastSessionError);
+        MJNotificationService.Instance.CreateSimpleNotification(notice, 'error', 6000);
+    }
     /**
      * Post-call hook. Two responsibilities:
      *  1. Reload the ACTIVE conversation's timeline so the session that just ended — whose
@@ -8734,6 +9457,9 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
      * in flight.
      */
     followTranscript(change, message) {
+        if (message && this.collapsedThreadRootId(message) !== null) {
+            return;
+        }
         if (change === 'load') {
             this.scrollToBottom = true;
             return;
@@ -8777,6 +9503,27 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
     isSettled(message) {
         return message.Status === 'Complete' || message.Status === 'Error';
     }
+    /**
+     * Drops every in-flight ID whose loaded row has settled. A settled reply is never in flight:
+     * the list drives the composer's Stop slot and its ticker, and every reconcile path scans the
+     * rows for `In-Progress`, so an ID left behind after its row settled would never be looked at
+     * again (the overlay's Stop button ticked for hours after Regenerate-as-fork this way). An ID
+     * with no loaded row is kept; the row may simply not be on screen yet.
+     */
+    dropSettledFromInFlight() {
+        const ids = this.InProgressMessageIds;
+        if (ids.length === 0) {
+            return;
+        }
+        const byID = IndexByUUID(this.messages ?? []);
+        const stillInFlight = ids.filter((id) => {
+            const row = byID.Get(id);
+            return !row || !this.isSettled(row);
+        });
+        if (stillInFlight.length !== ids.length) {
+            this.InProgressMessageIds = stillInFlight;
+        }
+    }
     /**
      * Where the viewport goes on a streamed delta, in the same frame as the DOM change so growth and
      * scroll paint together. Without ReadReplyFromTop, or for a turn this component never saw open
@@ -8946,6 +9693,7 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         // (prioritizing ParentRunID == null and ContinuationDepth == 0 over continuation
         // synthesis runs, and newest __mj_CreatedAt among ties so retried messages use their latest run).
         const chosenByDetailId = new Map();
+        const refreshedRunIds = [];
         for (const run of result.Results || []) {
             const detailId = run.ConversationDetailID;
             if (!detailId) {
@@ -8958,9 +9706,13 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         }
         for (const [detailId, run] of chosenByDetailId.entries()) {
             this.AgentRunsByDetailId.set(detailId, run);
+            if (run.ID) {
+                refreshedRunIds.push(run.ID);
+            }
         }
         // New map reference so OnPush children re-read it.
         this.AgentRunsByDetailId = new Map(this.AgentRunsByDetailId);
+        await this.loadHandoffStepsForRunIds(refreshedRunIds, conversationId, loadToken);
     }
     /**
      * Reconcile in-progress messages against durable server state, on demand.
@@ -8975,6 +9727,9 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
      * @param reason What prompted it — carried only for logging.
      */
     async ReconcileNow(reason) {
+        if (ConversationChatAreaComponent.TRANSPORT_RECONNECT_REASONS.includes(reason)) {
+            this.reconcileWindowRefreshPending = true;
+        }
         if (this.reconcileInFlight) {
             this.reconcileRerunReason = reason;
             return this.reconcileInFlight;
@@ -8996,6 +9751,49 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             this.reconcileInFlight = null;
         }
     }
+    /**
+     * Supervisor reasons that mean the transport itself was down, so anything published meanwhile
+     * was dropped. Only these pay for {@link refreshNewestWindow}; the other triggers
+     * (tab-visible, browser-online, message-liveness, completion-for-unloaded-message) keep the
+     * narrow run-row refresh alone.
+     */
+    static TRANSPORT_RECONNECT_REASONS = ['socket-reconnected', 'stream-reconnected'];
+    /**
+     * After a transport reconnect, re-read the newest window page before reconciling, when any AI
+     * message is still unsettled.
+     *
+     * Two things {@link refreshAgentRunsForInProgress} alone does not cover:
+     *
+     * - **Error-status messages.** {@link correctStaleErrorMessages} can repair a message the client
+     *   marked Error while the server went on to complete the run — but only against a fresh run
+     *   row, and the narrow refresh reads runs for In-Progress messages only. Rebuilding the
+     *   peripherals from the refreshed window gives it current runs for every message in view.
+     * - **Rows written while the socket was down.** Their events were dropped, so only a re-read
+     *   brings them into the window.
+     *
+     * Newest page only, the same choice the poll-completion path makes: a full-history refresh
+     * would replace the loaded window with every row. Only called when
+     * {@link hasUnsettledAgentReplies} is true, so a quiet conversation costs one array scan.
+     *
+     * @returns false when the conversation changed underneath, so the caller abandons the pass.
+     */
+    async refreshNewestWindow(conversationId, loadToken) {
+        await this.windowStore.RefreshLatest(this.currentUser);
+        if (!this.isActiveConversationLoad(conversationId, loadToken)) {
+            return false;
+        }
+        const refreshed = this.windowStore.GetSnapshot();
+        this.messages = refreshed.Details;
+        // loadPeripheralData short-circuits when it has already run for this conversation; clearing
+        // the marker is what lets it rebuild the run map from the fresh window.
+        this.lastLoadedConversationId = null;
+        await this.loadPeripheralData(conversationId, refreshed, loadToken);
+        return this.isActiveConversationLoad(conversationId, loadToken);
+    }
+    /** Whether any agent reply is still In-Progress, or is Error and may have completed server-side. */
+    hasUnsettledAgentReplies() {
+        return (this.messages ?? []).some(m => m.Role === 'AI' && (m.Status === 'In-Progress' || m.Status === 'Error'));
+    }
     /** One reconcile pass over the in-progress messages of the active conversation. */
     async reconcileOnce(reason) {
         const conversationId = this.conversationId;
@@ -9008,6 +9806,16 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         const loadToken = this.conversationLoadToken;
         LogStatusEx({ message: `🔁 Reconciling in-progress runs (${reason})`, verboseOnly: true });
         try {
+            if (this.reconcileWindowRefreshPending) {
+                this.reconcileWindowRefreshPending = false;
+                // Decided synchronously so a pass with nothing unsettled adds no await to next's path.
+                if (this.hasUnsettledAgentReplies()) {
+                    const stillActive = await this.refreshNewestWindow(conversationId, loadToken);
+                    if (!stillActive) {
+                        return;
+                    }
+                }
+            }
             await this.refreshAgentRunsForInProgress(conversationId, loadToken);
             if (!this.isActiveConversationLoad(conversationId, loadToken)) {
                 return;
@@ -9108,6 +9916,8 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
      * Reconnect to in-progress agent runs whose completion events were missed.
      */
     async reconnectInProgressRuns(conversationId, loadToken) {
+        // An ID whose row settled while its completion was missed would never be found by the scan below.
+        this.dropSettledFromInFlight();
         const inProgressMessages = this.messages.filter(m => m.Status === 'In-Progress' && m.Role === 'AI');
         if (inProgressMessages.length === 0) {
             return;
@@ -9211,7 +10021,7 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
     scrollToMessage(messageId) {
         // Wait for DOM to update, then scroll
         setTimeout(() => {
-            if (this.messageListComponent?.ScrollToMessage(messageId)) {
+            if (this.scrollToMessageOrThreadRoot(messageId)) {
                 return;
             }
             const messageElement = document.querySelector(`[data-message-id="${messageId}"]`);
@@ -9287,52 +10097,54 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.chatSlotChildren = _t);
         } }, viewQuery: function ConversationChatAreaComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0, 5)(ArtifactViewerPanelComponent, 5)(ConversationEmptyStateComponent, 5)(MessageListComponent, 5)(_c1, 5)(_c2, 5, ElementRef)(_c3, 5, ElementRef)(_c4, 5);
+            i0.ɵɵviewQuery(_c0, 5)(ArtifactViewerPanelComponent, 5)(ConversationEmptyStateComponent, 5)(_c1, 5)(MessageListComponent, 5)(_c2, 5)(_c3, 5, ElementRef)(_c4, 5, ElementRef)(_c5, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.scrollContainerRef = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.artifactViewerComponent = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.emptyStateComponent = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.ConversationRemoteBrowserSurface = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.messageListComponent = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.titleNameInput = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.titleRenameButton = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.forksButton = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.messageInputComponents = _t);
-        } }, inputs: { EnvironmentId: "EnvironmentId", environmentId: "environmentId", CurrentUser: "CurrentUser", currentUser: "currentUser", ConversationId: "ConversationId", conversationId: "conversationId", Conversation: "Conversation", conversation: "conversation", SuppressNewConversationEmptyState: "SuppressNewConversationEmptyState", suppressNewConversationEmptyState: "suppressNewConversationEmptyState", AllowMentions: "AllowMentions", allowMentions: "allowMentions", AllowAgentMentions: "AllowAgentMentions", allowAgentMentions: "allowAgentMentions", AllowEntityMentions: "AllowEntityMentions", allowEntityMentions: "allowEntityMentions", AllowSkillCommands: "AllowSkillCommands", allowSkillCommands: "allowSkillCommands", AllowAttachments: "AllowAttachments", allowAttachments: "allowAttachments", AllowPlanMode: "AllowPlanMode", allowPlanMode: "allowPlanMode", AllowRealtime: "AllowRealtime", allowRealtime: "allowRealtime", AllowForking: "AllowForking", AllowStopRun: "AllowStopRun", ShowEmptyFill: "ShowEmptyFill", showEmptyFill: "showEmptyFill", ShowLoadingState: "ShowLoadingState", showLoadingState: "showLoadingState", ReadReplyFromTop: "ReadReplyFromTop", readReplyFromTop: "readReplyFromTop", ShowAgentRunDetails: "ShowAgentRunDetails", showAgentRunDetails: "showAgentRunDetails", ShowReactions: "ShowReactions", showReactions: "showReactions", ShowMessageRating: "ShowMessageRating", showMessageRating: "showMessageRating", AllowPinning: "AllowPinning", allowPinning: "allowPinning", AllowMessageEdit: "AllowMessageEdit", allowMessageEdit: "allowMessageEdit", AllowMessageDelete: "AllowMessageDelete", allowMessageDelete: "allowMessageDelete", ReadOnly: "ReadOnly", ReadOnlyMessage: "ReadOnlyMessage", ShowSuggestedPrompts: "ShowSuggestedPrompts", showSuggestedPrompts: "showSuggestedPrompts", ShowDateNavigation: "ShowDateNavigation", showDateNavigation: "showDateNavigation", AssistantDisplayName: "AssistantDisplayName", assistantDisplayName: "assistantDisplayName", AssistantAvatarUrl: "AssistantAvatarUrl", assistantAvatarUrl: "assistantAvatarUrl", IsNewConversation: "IsNewConversation", isNewConversation: "isNewConversation", PendingMessage: "PendingMessage", pendingMessage: "pendingMessage", PendingMessageConversationId: "PendingMessageConversationId", pendingMessageConversationId: "pendingMessageConversationId", PendingAttachments: "PendingAttachments", pendingAttachments: "pendingAttachments", PendingArtifactId: "PendingArtifactId", pendingArtifactId: "pendingArtifactId", PendingArtifactVersionNumber: "PendingArtifactVersionNumber", pendingArtifactVersionNumber: "pendingArtifactVersionNumber", PendingArtifactConversationId: "PendingArtifactConversationId", pendingArtifactConversationId: "pendingArtifactConversationId", OverlayMode: "OverlayMode", overlayMode: "overlayMode", ShowExportButton: "ShowExportButton", showExportButton: "showExportButton", ExportButtonLabel: "ExportButtonLabel", exportButtonLabel: "exportButtonLabel", ExportButtonIcon: "ExportButtonIcon", exportButtonIcon: "exportButtonIcon", ExportBranding: "ExportBranding", exportBranding: "exportBranding", ShowShareButton: "ShowShareButton", showShareButton: "showShareButton", ShowArtifactIndicator: "ShowArtifactIndicator", showArtifactIndicator: "showArtifactIndicator", AppContext: "AppContext", appContext: "appContext", DefaultAgentId: "DefaultAgentId", defaultAgentId: "defaultAgentId", AgentReplyMode: "AgentReplyMode", AllowedAgentIDs: "AllowedAgentIDs", MentionPeople: "MentionPeople", AgentHistoryFrom: "AgentHistoryFrom", AgentTurnHandler: "AgentTurnHandler", AutoNameConversation: "AutoNameConversation", EnableDecisionRouting: "EnableDecisionRouting", ApplicationScope: "ApplicationScope", applicationScope: "applicationScope", ApplicationId: "ApplicationId", applicationId: "applicationId", LinkedEntityId: "LinkedEntityId", linkedEntityId: "linkedEntityId", LinkedRecordId: "LinkedRecordId", linkedRecordId: "linkedRecordId", ShowAgentPicker: "ShowAgentPicker", showAgentPicker: "showAgentPicker", ShowAgentModePicker: "ShowAgentModePicker", showAgentModePicker: "showAgentModePicker", EmptyStateGreeting: "EmptyStateGreeting", emptyStateGreeting: "emptyStateGreeting", ShowSidebarToggle: "ShowSidebarToggle", showSidebarToggle: "showSidebarToggle", ShowAgentCharacter: "ShowAgentCharacter", showAgentCharacter: "showAgentCharacter", AgentCharacterConfig: "AgentCharacterConfig", agentCharacterConfig: "agentCharacterConfig", EmptyStateConfig: "EmptyStateConfig", emptyStateConfig: "emptyStateConfig", ShowDemonstrationSurface: "ShowDemonstrationSurface", showDemonstrationSurface: "showDemonstrationSurface", DemonstrationSurfaceContent: "DemonstrationSurfaceContent", demonstrationSurfaceContent: "demonstrationSurfaceContent", ComposerDraft: "ComposerDraft", composerDraft: "composerDraft", ComposerAgentMention: "ComposerAgentMention", composerAgentMention: "composerAgentMention" }, outputs: { BeforeAgentTurn: "BeforeAgentTurn", beforeAgentTurn: "beforeAgentTurn", AfterAgentTurn: "AfterAgentTurn", afterAgentTurn: "afterAgentTurn", BeforeToolInvoked: "BeforeToolInvoked", beforeToolInvoked: "beforeToolInvoked", AfterToolInvoked: "AfterToolInvoked", afterToolInvoked: "afterToolInvoked", BeforeResponseFormSubmitted: "BeforeResponseFormSubmitted", beforeResponseFormSubmitted: "beforeResponseFormSubmitted", AfterResponseFormSubmitted: "AfterResponseFormSubmitted", afterResponseFormSubmitted: "afterResponseFormSubmitted", BeforeStopClicked: "BeforeStopClicked", AfterStopClicked: "AfterStopClicked", SessionStarted: "SessionStarted", sessionStarted: "sessionStarted", SessionChannelStateChanged: "SessionChannelStateChanged", sessionChannelStateChanged: "sessionChannelStateChanged", SessionEnded: "SessionEnded", sessionEnded: "sessionEnded", ConversationRenamed: "ConversationRenamed", conversationRenamed: "conversationRenamed", OpenEntityRecord: "OpenEntityRecord", openEntityRecord: "openEntityRecord", RealtimeConversationReady: "RealtimeConversationReady", realtimeConversationReady: "realtimeConversationReady", navigationRequest: "navigationRequest", TaskClicked: "TaskClicked", taskClicked: "taskClicked", ArtifactLinkClicked: "ArtifactLinkClicked", artifactLinkClicked: "artifactLinkClicked", SidebarToggleClicked: "SidebarToggleClicked", sidebarToggleClicked: "sidebarToggleClicked", ConversationCreated: "ConversationCreated", conversationCreated: "conversationCreated", PendingArtifactConsumed: "PendingArtifactConsumed", pendingArtifactConsumed: "pendingArtifactConsumed", PendingMessageConsumed: "PendingMessageConsumed", pendingMessageConsumed: "pendingMessageConsumed", PendingMessageRequested: "PendingMessageRequested", pendingMessageRequested: "pendingMessageRequested", ComposerDraftConsumed: "ComposerDraftConsumed", composerDraftConsumed: "composerDraftConsumed", ComposerAgentMentionConsumed: "ComposerAgentMentionConsumed", composerAgentMentionConsumed: "composerAgentMentionConsumed" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 30, vars: 36, consts: [["titleBar", ""], ["titleName", ""], ["forksButton", ""], ["titleNameInput", ""], ["titleRenameButton", ""], ["emptyStateInput", ""], ["scrollContainer", ""], ["messageInput", ""], ["taskGraphRunView", ""], [1, "chat-area"], [1, "chat-agent-presence", 3, "chat-agent-presence--prominent"], [1, "chat-header"], [1, "chat-content-area"], [1, "chat-demonstration-stage"], [1, "chat-messages-pane"], [1, "chat-messages-wrapper"], [3, "saved", "cancelled", "isOpen", "artifact", "currentUser"], [3, "pinnedMessages", "isLoading", "AllowUnpin"], [3, "PanelID", "Summaries", "CurrentUserID"], [3, "cancelled", "exported", "branding", "isVisible", "conversation", "Scope", "currentUser"], [3, "Result", "Visible", "Context", "Adapter"], [3, "cancelled", "membersChanged", "isVisible", "conversation", "currentUser"], [1, "modal-overlay"], [3, "isOpen", "environmentId", "currentUser", "excludeCollectionIds", "artifactVersionId", "artifactName", "artifactVersionNumber"], [3, "data", "visible"], [3, "imageUrl", "alt", "fileName", "visible"], [1, "chat-agent-presence"], [3, "State", "AgentName", "AvatarUrl", "Mode"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "chat-header", 3, "keydown.escape"], [1, "chat-info"], ["title", "Show conversations", 1, "sidebar-toggle-btn"], [1, "shared-by-badge", 3, "title"], [1, "project-tag"], ["title", "View Test Run", 1, "test-indicator"], [1, "chat-actions", "chat-actions-buttons"], ["mjButton", "", "Variant", "flat", "Size", "sm", "aria-haspopup", "dialog", "title", "Forks in this conversation", 1, "forks-button", 3, "active"], ["title", "View pinned messages", 1, "pin-chip", 3, "active"], ["title", "View artifacts", 1, "artifact-indicator"], ["title", "View members", 1, "chat-members"], [3, "AgentID", "Disabled"], [3, "Conversation", "CurrentUser", "AllowedAgentIDs", "Disabled"], ["mjButton", "", "variant", "flat", "size", "sm", 3, "title"], ["mjButton", "", "variant", "flat", "size", "sm", 3, "shared", "title"], ["title", "Show conversations", 1, "sidebar-toggle-btn", 3, "click"], [1, "fas", "fa-table-columns"], [4, "ngTemplateOutlet"], [1, "fas", "fa-share-nodes"], [1, "project-tag", 3, "click"], [1, "fas", "fa-folder"], ["title", "View Test Run", 1, "test-indicator", 3, "click"], [1, "fas", "fa-flask"], ["mjButton", "", "Variant", "flat", "Size", "sm", "aria-haspopup", "dialog", "title", "Forks in this conversation", 1, "forks-button", 3, "click"], [1, "fa-solid", "fa-code-branch"], [1, "btn-label"], [1, "forks-count"], ["title", "View pinned messages", 1, "pin-chip", 3, "click"], [1, "fas", "fa-thumbtack"], [1, "pin-chip-count"], ["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, "PresetChanged", "AgentID", "Disabled"], ["mjButton", "", "variant", "flat", "size", "sm", 3, "click", "title"], [1, "chat-title-bar"], ["aria-label", "Breadcrumb", 1, "chat-title-path"], [1, "chat-title-crumbs"], ["aria-current", "page", 1, "chat-title-current"], ["aria-hidden", "true"], [1, "chat-title-crumb", "chat-title-ellipsis", 3, "collapses-wide"], [1, "chat-title-crumb"], ["mjButton", "", "Variant", "flat", "Size", "sm", "type", "button", 3, "click", "title"], [1, "chat-title-crumb-label"], ["aria-hidden", "true", 1, "fa-solid", "fa-chevron-right", "chat-title-sep"], [1, "chat-title-crumb", "chat-title-ellipsis"], ["mjButton", "", "Variant", "flat", "Size", "sm", "type", "button", "aria-label", "Show the whole path", "title", "Show the whole path", 3, "click"], ["type", "text", "maxlength", "255", 1, "chat-title-input", 3, "ngModel"], ["type", "text", "maxlength", "255", 1, "chat-title-input", 3, "ngModelChange", "keydown.enter", "keydown.escape", "blur", "ngModel"], [1, "chat-title", 3, "title"], ["mjButton", "", "Variant", "icon", "Size", "sm", "type", "button", 1, "chat-title-rename", 3, "title"], ["mjButton", "", "Variant", "icon", "Size", "sm", "type", "button", 1, "chat-title-rename", 3, "click", "title"], ["aria-hidden", "true", 1, "fa-solid", "fa-pen"], [1, "conversation-loading-state"], ["text", "Loading conversation...", "size", "large"], ["role", "status", 1, "read-only-banner"], [3, "currentUser", "initialDraft", "disabled", "showSidebarToggle", "overlayMode", "greeting", "showSuggestedPrompts", "enableAttachments", "enableMentions", "enableAgentMentions", "enableEntityMentions", "enableSkillCommands", "AllowedAgentIDs", "MentionPeople", "ComposerExtraTemplate", "maxAttachments", "maxAttachmentSizeBytes", "acceptedFileTypes"], [1, "fas", "fa-eye"], [3, "initialDraftApplied", "DraftStateChanged", "ComposerBlurred", "sidebarToggleClicked", "messageSent", "currentUser", "initialDraft", "disabled", "showSidebarToggle", "overlayMode", "greeting", "showSuggestedPrompts", "enableAttachments", "enableMentions", "enableAgentMentions", "enableEntityMentions", "enableSkillCommands", "AllowedAgentIDs", "MentionPeople", "ComposerExtraTemplate", "maxAttachments", "maxAttachmentSizeBytes", "acceptedFileTypes"], [1, "chat-messages-container"], [1, "chat-input-container"], [1, "chat-composer-extra"], [1, "message-input-container-wrapper"], [3, "initialDraftApplied", "DraftStateChanged", "ComposerBlurred", "emptyStateSubmit", "emptyStateMode", "initialDraft", "currentUser", "disabled", "ReadOnly", "appContext", "applicationId", "defaultAgentId", "enableAttachments", "enableMentions", "enableAgentMentions", "enableEntityMentions", "enableSkillCommands", "enablePlanMode", "enableRealtime", "AllowedAgentIDs", "MentionPeople", "maxAttachments", "maxAttachmentSizeBytes", "acceptedFileTypes"], ["role", "region", "aria-label", "Fork", 1, "fork-view-bar"], [1, "upload-indicator-overlay"], [1, "chat-messages-container", 3, "scroll", "keydown.escape"], [3, "OlderRequested", "DateJumpRequested", "ForkOpenRequested", "EditResendRequested", "RegenerateRequested", "ResendInPlaceRequested", "ForkRequested", "realtimeSessionOpenRequested", "deleteMessage", "BeforeStopClicked", "StopMessage", "testFeedbackMessage", "artifactClicked", "messageEdited", "openEntityRecord", "suggestedResponseSelected", "attachmentClicked", "diagnosticRequested", "LivenessCheckRequested", "messagePinToggled", "beforeResponseFormSubmitted", "afterResponseFormSubmitted", "TaskGraphPanelRequested", "ScrollToMessageRequested", "showEmptyFill", "showDateNavigation", "showAgentRunDetails", "showReactions", "showMessageRating", "allowPinning", "allowMessageEdit", "allowMessageDelete", "ReadOnly", "AllowStopRun", "InFlightCount", "assistantDisplayName", "assistantAvatarUrl", "messages", "HasMoreAbove", "IsLoadingOlder", "ScrollRoot", "conversation", "currentUser", "isProcessing", "artifactMap", "agentRunMap", "ratingsMap", "userAvatarMap", "attachmentsMap", "messageRendererTemplate", "messageExtraTemplate", "sessionMetaMap", "ForkChipMap", "ForkLayout", "CanFork", "InPlaceTurn"], [1, "scroll-to-bottom-icon", 2, "left", "50%"], [1, "loading-peripheral-placeholder"], ["role", "region", "aria-label", "Fork", 1, "fork-view-bar", 3, "keydown.escape"], ["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", "initialDraft", "conversationId", "conversationName", "currentUser", "conversationHistory", "artifactsByDetailId", "systemArtifactsByDetailId", "agentRunsByDetailId", "appContext", "applicationId", "defaultAgentId", "conversationDefaultAgentId", "agentConfigurationPresetId", "AgentReplyMode", "AllowedAgentIDs", "MentionPeople", "AgentHistoryFrom", "TargetBranchID", "ResolveTargetBranch", "AgentTurnHandler", "AutoNameConversation", "EnableDecisionRouting", "inProgressMessageIds", "disabled", "ReadOnly", "enableAttachments", "enableMentions", "enableAgentMentions", "enableEntityMentions", "enableSkillCommands", "enablePlanMode", "enableRealtime", "Placeholder", "SendSlotMode", "StopCount", "StopLabel", "StatusText", "StatusElapsed", "maxAttachments", "maxAttachmentSizeBytes", "acceptedFileTypes", "initialMessage", "initialAttachments"], [1, "fork-composer-hint"], [3, "DraftStateChanged", "ComposerBlurred", "StopClicked", "initialMessageAutoSendStarted", "initialMessageAutoSendFailed", "messageSent", "MessageStreamed", "agentResponse", "agentRunDetected", "agentRunUpdate", "messageComplete", "artifactCreated", "conversationRenamed", "intentCheckStarted", "intentCheckCompleted", "beforeAgentTurn", "afterAgentTurn", "uploadStateChanged", "hidden", "initialDraft", "conversationId", "conversationName", "currentUser", "conversationHistory", "artifactsByDetailId", "systemArtifactsByDetailId", "agentRunsByDetailId", "appContext", "applicationId", "defaultAgentId", "conversationDefaultAgentId", "agentConfigurationPresetId", "AgentReplyMode", "AllowedAgentIDs", "MentionPeople", "AgentHistoryFrom", "TargetBranchID", "ResolveTargetBranch", "AgentTurnHandler", "AutoNameConversation", "EnableDecisionRouting", "inProgressMessageIds", "disabled", "ReadOnly", "enableAttachments", "enableMentions", "enableAgentMentions", "enableEntityMentions", "enableSkillCommands", "enablePlanMode", "enableRealtime", "Placeholder", "SendSlotMode", "StopCount", "StopLabel", "StatusText", "StatusElapsed", "maxAttachments", "maxAttachmentSizeBytes", "acceptedFileTypes", "initialMessage", "initialAttachments"], [1, "resize-handle"], [1, "chat-artifact-pane"], [3, "closed", "saveToCollectionRequested", "navigateToLink", "shareRequested", "maximizeToggled", "openEntityRecord", "navigationRequest", "analyzeRequested", "applyFormRequested", "artifactId", "currentUser", "environmentId", "versionNumber", "viewContext", "Scope", "canShare", "canEdit", "isMaximized", "refreshTrigger"], [1, "resize-handle", 3, "mousedown", "touchstart"], [1, "chat-artifact-pane", "chat-task-graph-pane"], [1, "task-graph-pane-header"], [1, "task-graph-pane-title-group"], [1, "task-graph-pane-icon"], [1, "fa-solid", "fa-diagram-project"], [1, "task-graph-pane-titles"], [1, "task-graph-pane-title"], [1, "task-graph-pane-subtitle"], [1, "task-graph-pane-actions"], ["type", "button", "title", "Save this task graph as a reusable Draft Flow Agent workflow", 1, "task-graph-pane-save-btn", 3, "click", "disabled"], [1, "fa-solid"], ["type", "button", 1, "task-graph-pane-btn", 3, "click", "title"], ["type", "button", "title", "Close Task Graph panel", 1, "task-graph-pane-btn", 3, "click"], [1, "fa-solid", "fa-xmark"], [1, "task-graph-pane-body"], [3, "ParentTaskID", "WorkflowName", "LiveUpdates", "ShowVariables", "Height"], [3, "closed", "jumpRequested", "unpinRequested", "pinnedMessages", "isLoading", "AllowUnpin"], [3, "ForkSelected", "Closed", "PanelID", "Summaries", "CurrentUserID"], [3, "NavigateRequest", "StartLiveRequested", "ReviewClosed", "AgentName", "Hidden", "CurrentUser", "EnvironmentID", "ReviewData", "AllowStartLive", "Chrome", "Compact", "ShowDevLinks", "ShowDensityPicker"], ["type", "button", "title", "Return to the live call", "aria-label", "Return to the live call", 1, "voice-call-pill"], ["type", "button", "title", "Return to the live call", "aria-label", "Return to the live call", 1, "voice-call-pill", 3, "click"], ["aria-hidden", "true", 1, "voice-call-pill__pulse"], ["aria-hidden", "true", 1, "fa-solid", "fa-phone-volume"], [1, "voice-call-pill__text"], [1, "voice-call-pill__name"], [1, "voice-call-pill__hint"], [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"], ["Icon", "fa-solid fa-cube", "Title", "No artifacts in this conversation yet", 1, "artifacts-empty-fill"], [1, "artifact-modal-card", 3, "expanded", "system-artifact"], ["title", "Toggle system artifacts visibility", 1, "toggle-system-btn", 3, "click"], [1, "fas", "fa-cog"], [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, "completed", "cancelled", "isOpen", "environmentId", "currentUser", "excludeCollectionIds", "artifactVersionId", "artifactName", "artifactVersionNumber"], [3, "closed", "data", "visible"], [3, "closed", "imageUrl", "alt", "fileName", "visible"]], template: function ConversationChatAreaComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 9);
-            i0.ɵɵconditionalCreate(1, ConversationChatAreaComponent_Conditional_1_Template, 3, 3, "div", 10);
-            i0.ɵɵconditionalCreate(2, ConversationChatAreaComponent_Conditional_2_Template, 1, 8, "ng-container")(3, ConversationChatAreaComponent_Conditional_3_Template, 17, 16, "div", 11);
+        } }, inputs: { EnvironmentId: "EnvironmentId", environmentId: "environmentId", CurrentUser: "CurrentUser", currentUser: "currentUser", ConversationId: "ConversationId", conversationId: "conversationId", Conversation: "Conversation", conversation: "conversation", SuppressNewConversationEmptyState: "SuppressNewConversationEmptyState", suppressNewConversationEmptyState: "suppressNewConversationEmptyState", AllowMentions: "AllowMentions", allowMentions: "allowMentions", AllowAgentMentions: "AllowAgentMentions", allowAgentMentions: "allowAgentMentions", AllowEntityMentions: "AllowEntityMentions", allowEntityMentions: "allowEntityMentions", AllowSkillCommands: "AllowSkillCommands", allowSkillCommands: "allowSkillCommands", AllowAttachments: "AllowAttachments", allowAttachments: "allowAttachments", AllowPlanMode: "AllowPlanMode", allowPlanMode: "allowPlanMode", AllowRealtime: "AllowRealtime", allowRealtime: "allowRealtime", AllowForking: "AllowForking", AllowRemoteBrowser: "AllowRemoteBrowser", AllowStopRun: "AllowStopRun", ShowEmptyFill: "ShowEmptyFill", showEmptyFill: "showEmptyFill", ShowLoadingState: "ShowLoadingState", showLoadingState: "showLoadingState", ReadReplyFromTop: "ReadReplyFromTop", readReplyFromTop: "readReplyFromTop", ShowAgentRunDetails: "ShowAgentRunDetails", showAgentRunDetails: "showAgentRunDetails", ShowReactions: "ShowReactions", showReactions: "showReactions", ShowMessageRating: "ShowMessageRating", showMessageRating: "showMessageRating", AllowPinning: "AllowPinning", allowPinning: "allowPinning", AllowMessageEdit: "AllowMessageEdit", allowMessageEdit: "allowMessageEdit", AllowMessageDelete: "AllowMessageDelete", allowMessageDelete: "allowMessageDelete", ReadOnly: "ReadOnly", ReadOnlyMessage: "ReadOnlyMessage", ShowSuggestedPrompts: "ShowSuggestedPrompts", showSuggestedPrompts: "showSuggestedPrompts", ShowDateNavigation: "ShowDateNavigation", showDateNavigation: "showDateNavigation", AssistantDisplayName: "AssistantDisplayName", assistantDisplayName: "assistantDisplayName", AssistantAvatarUrl: "AssistantAvatarUrl", assistantAvatarUrl: "assistantAvatarUrl", IsNewConversation: "IsNewConversation", isNewConversation: "isNewConversation", PendingMessage: "PendingMessage", pendingMessage: "pendingMessage", PendingMessageConversationId: "PendingMessageConversationId", pendingMessageConversationId: "pendingMessageConversationId", PendingAttachments: "PendingAttachments", pendingAttachments: "pendingAttachments", PendingArtifactId: "PendingArtifactId", pendingArtifactId: "pendingArtifactId", PendingArtifactVersionNumber: "PendingArtifactVersionNumber", pendingArtifactVersionNumber: "pendingArtifactVersionNumber", PendingArtifactConversationId: "PendingArtifactConversationId", pendingArtifactConversationId: "pendingArtifactConversationId", OverlayMode: "OverlayMode", overlayMode: "overlayMode", ShowExportButton: "ShowExportButton", showExportButton: "showExportButton", ExportButtonLabel: "ExportButtonLabel", exportButtonLabel: "exportButtonLabel", ExportButtonIcon: "ExportButtonIcon", exportButtonIcon: "exportButtonIcon", ExportBranding: "ExportBranding", exportBranding: "exportBranding", ShowShareButton: "ShowShareButton", showShareButton: "showShareButton", ShowArtifactIndicator: "ShowArtifactIndicator", showArtifactIndicator: "showArtifactIndicator", AppContext: "AppContext", appContext: "appContext", DefaultAgentId: "DefaultAgentId", defaultAgentId: "defaultAgentId", AgentReplyMode: "AgentReplyMode", AllowedAgentIDs: "AllowedAgentIDs", MentionPeople: "MentionPeople", AgentHistoryFrom: "AgentHistoryFrom", AgentTurnHandler: "AgentTurnHandler", AutoNameConversation: "AutoNameConversation", EnableDecisionRouting: "EnableDecisionRouting", ApplicationScope: "ApplicationScope", applicationScope: "applicationScope", ApplicationId: "ApplicationId", applicationId: "applicationId", LinkedEntityId: "LinkedEntityId", linkedEntityId: "linkedEntityId", LinkedRecordId: "LinkedRecordId", linkedRecordId: "linkedRecordId", ShowAgentPicker: "ShowAgentPicker", showAgentPicker: "showAgentPicker", ShowAgentModePicker: "ShowAgentModePicker", showAgentModePicker: "showAgentModePicker", EmptyStateGreeting: "EmptyStateGreeting", emptyStateGreeting: "emptyStateGreeting", ShowSidebarToggle: "ShowSidebarToggle", showSidebarToggle: "showSidebarToggle", ShowAgentCharacter: "ShowAgentCharacter", showAgentCharacter: "showAgentCharacter", AgentCharacterConfig: "AgentCharacterConfig", agentCharacterConfig: "agentCharacterConfig", EmptyStateConfig: "EmptyStateConfig", emptyStateConfig: "emptyStateConfig", ShowDemonstrationSurface: "ShowDemonstrationSurface", showDemonstrationSurface: "showDemonstrationSurface", DemonstrationSurfaceContent: "DemonstrationSurfaceContent", demonstrationSurfaceContent: "demonstrationSurfaceContent", ComposerDraft: "ComposerDraft", composerDraft: "composerDraft", ComposerAgentMention: "ComposerAgentMention", composerAgentMention: "composerAgentMention", CollapseThreadReplies: "CollapseThreadReplies" }, outputs: { BeforeAgentTurn: "BeforeAgentTurn", beforeAgentTurn: "beforeAgentTurn", AfterAgentTurn: "AfterAgentTurn", afterAgentTurn: "afterAgentTurn", BeforeToolInvoked: "BeforeToolInvoked", beforeToolInvoked: "beforeToolInvoked", AfterToolInvoked: "AfterToolInvoked", afterToolInvoked: "afterToolInvoked", BeforeResponseFormSubmitted: "BeforeResponseFormSubmitted", beforeResponseFormSubmitted: "beforeResponseFormSubmitted", AfterResponseFormSubmitted: "AfterResponseFormSubmitted", afterResponseFormSubmitted: "afterResponseFormSubmitted", BeforeStopClicked: "BeforeStopClicked", AfterStopClicked: "AfterStopClicked", SessionStarted: "SessionStarted", sessionStarted: "sessionStarted", SessionChannelStateChanged: "SessionChannelStateChanged", sessionChannelStateChanged: "sessionChannelStateChanged", SessionEnded: "SessionEnded", sessionEnded: "sessionEnded", ConversationRenamed: "ConversationRenamed", conversationRenamed: "conversationRenamed", OpenEntityRecord: "OpenEntityRecord", openEntityRecord: "openEntityRecord", RealtimeConversationReady: "RealtimeConversationReady", realtimeConversationReady: "realtimeConversationReady", navigationRequest: "navigationRequest", TaskClicked: "TaskClicked", taskClicked: "taskClicked", ArtifactLinkClicked: "ArtifactLinkClicked", artifactLinkClicked: "artifactLinkClicked", SidebarToggleClicked: "SidebarToggleClicked", sidebarToggleClicked: "sidebarToggleClicked", ConversationCreated: "ConversationCreated", conversationCreated: "conversationCreated", PendingArtifactConsumed: "PendingArtifactConsumed", pendingArtifactConsumed: "pendingArtifactConsumed", PendingMessageConsumed: "PendingMessageConsumed", pendingMessageConsumed: "pendingMessageConsumed", PendingMessageRequested: "PendingMessageRequested", pendingMessageRequested: "pendingMessageRequested", ComposerDraftConsumed: "ComposerDraftConsumed", composerDraftConsumed: "composerDraftConsumed", ComposerAgentMentionConsumed: "ComposerAgentMentionConsumed", composerAgentMentionConsumed: "composerAgentMentionConsumed", ThreadReplyRevealRequested: "ThreadReplyRevealRequested" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 31, vars: 37, consts: [["titleBar", ""], ["titleName", ""], ["forksButton", ""], ["titleNameInput", ""], ["titleRenameButton", ""], ["emptyStateInput", ""], ["scrollContainer", ""], ["messageInput", ""], ["taskGraphRunView", ""], ["conversationRemoteBrowserSurface", ""], [1, "chat-area"], [1, "chat-agent-presence", 3, "chat-agent-presence--prominent"], [1, "chat-header"], [1, "chat-content-area"], [1, "chat-demonstration-stage"], [1, "chat-messages-pane"], [1, "chat-messages-wrapper"], [3, "saved", "cancelled", "isOpen", "artifact", "currentUser"], [3, "pinnedMessages", "isLoading", "AllowUnpin"], [3, "PanelID", "Summaries", "CurrentUserID"], [3, "cancelled", "exported", "branding", "isVisible", "conversation", "Scope", "currentUser"], [3, "Result", "Visible", "Context", "Adapter"], [3, "cancelled", "membersChanged", "isVisible", "conversation", "currentUser"], [1, "modal-overlay"], [3, "isOpen", "environmentId", "currentUser", "excludeCollectionIds", "artifactVersionId", "artifactName", "artifactVersionNumber"], [3, "data", "visible"], [3, "imageUrl", "alt", "fileName", "visible"], [1, "chat-agent-presence"], [3, "State", "AgentName", "AvatarUrl", "Mode"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "chat-header", 3, "keydown.escape"], [1, "chat-info"], ["title", "Show conversations", 1, "sidebar-toggle-btn"], [1, "shared-by-badge", 3, "title"], [1, "project-tag"], ["title", "View Test Run", 1, "test-indicator"], [1, "chat-actions", "chat-actions-buttons"], ["mjButton", "", "Variant", "flat", "Size", "sm", "aria-haspopup", "dialog", "title", "Forks in this conversation", 1, "forks-button", 3, "active"], ["title", "View pinned messages", 1, "pin-chip", 3, "active"], ["title", "View artifacts", 1, "artifact-indicator"], ["mjButton", "", "variant", "flat", "size", "sm", 1, "remote-browser-toggle-btn", 3, "active", "title"], ["title", "View members", 1, "chat-members"], [3, "AgentID", "Disabled"], [3, "Conversation", "CurrentUser", "AllowedAgentIDs", "Disabled"], ["mjButton", "", "variant", "flat", "size", "sm", 3, "title"], ["mjButton", "", "variant", "flat", "size", "sm", 3, "shared", "title"], ["title", "Show conversations", 1, "sidebar-toggle-btn", 3, "click"], [1, "fas", "fa-table-columns"], [4, "ngTemplateOutlet"], [1, "with-chip", 3, "--agent-accent"], [1, "with-chip"], ["aria-hidden", "true", 1, "dot"], [1, "fas", "fa-share-nodes"], [1, "project-tag", 3, "click"], [1, "fas", "fa-folder"], ["title", "View Test Run", 1, "test-indicator", 3, "click"], [1, "fas", "fa-flask"], ["mjButton", "", "Variant", "flat", "Size", "sm", "aria-haspopup", "dialog", "title", "Forks in this conversation", 1, "forks-button", 3, "click"], [1, "fa-solid", "fa-code-branch"], [1, "btn-label"], [1, "forks-count"], ["title", "View pinned messages", 1, "pin-chip", 3, "click"], [1, "fas", "fa-thumbtack"], [1, "pin-chip-count"], ["title", "View artifacts", 1, "artifact-indicator", 3, "click"], [1, "fas", "fa-cube"], [1, "artifact-badge"], ["mjButton", "", "variant", "flat", "size", "sm", 1, "remote-browser-toggle-btn", 3, "click", "title"], [1, "fa-solid", "fa-globe"], ["title", "View members", 1, "chat-members", 3, "click"], [1, "fas", "fa-users"], [1, "members-badge"], [3, "PresetChanged", "AgentID", "Disabled"], ["mjButton", "", "variant", "flat", "size", "sm", 3, "click", "title"], [1, "chat-title-bar"], ["aria-label", "Breadcrumb", 1, "chat-title-path"], [1, "chat-title-crumbs"], ["aria-current", "page", 1, "chat-title-current"], ["aria-hidden", "true"], [1, "chat-title-crumb", "chat-title-ellipsis", 3, "collapses-wide"], [1, "chat-title-crumb"], ["mjButton", "", "Variant", "flat", "Size", "sm", "type", "button", 3, "click", "title"], [1, "chat-title-crumb-label"], ["aria-hidden", "true", 1, "fa-solid", "fa-chevron-right", "chat-title-sep"], [1, "chat-title-crumb", "chat-title-ellipsis"], ["mjButton", "", "Variant", "flat", "Size", "sm", "type", "button", "aria-label", "Show the whole path", "title", "Show the whole path", 3, "click"], ["type", "text", "maxlength", "255", 1, "chat-title-input", 3, "ngModel"], ["type", "text", "maxlength", "255", 1, "chat-title-input", 3, "ngModelChange", "keydown.enter", "keydown.escape", "blur", "ngModel"], [1, "chat-title", 3, "title"], ["mjButton", "", "Variant", "icon", "Size", "sm", "type", "button", 1, "chat-title-rename", 3, "title"], ["mjButton", "", "Variant", "icon", "Size", "sm", "type", "button", 1, "chat-title-rename", 3, "click", "title"], ["aria-hidden", "true", 1, "fa-solid", "fa-pen"], [1, "conversation-loading-state"], ["text", "Loading conversation...", "size", "large"], ["role", "status", 1, "read-only-banner"], [3, "currentUser", "initialDraft", "disabled", "showSidebarToggle", "overlayMode", "greeting", "showSuggestedPrompts", "enableAttachments", "enableMentions", "enableAgentMentions", "enableEntityMentions", "enableSkillCommands", "AllowedAgentIDs", "MentionPeople", "ComposerExtraTemplate", "maxAttachments", "maxAttachmentSizeBytes", "acceptedFileTypes"], [1, "fas", "fa-eye"], [3, "initialDraftApplied", "DraftStateChanged", "ComposerBlurred", "sidebarToggleClicked", "messageSent", "currentUser", "initialDraft", "disabled", "showSidebarToggle", "overlayMode", "greeting", "showSuggestedPrompts", "enableAttachments", "enableMentions", "enableAgentMentions", "enableEntityMentions", "enableSkillCommands", "AllowedAgentIDs", "MentionPeople", "ComposerExtraTemplate", "maxAttachments", "maxAttachmentSizeBytes", "acceptedFileTypes"], [1, "chat-messages-container"], [1, "chat-input-container"], [1, "chat-composer-extra"], [1, "message-input-container-wrapper"], [3, "initialDraftApplied", "DraftStateChanged", "ComposerBlurred", "emptyStateSubmit", "emptyStateMode", "initialDraft", "currentUser", "disabled", "ReadOnly", "appContext", "applicationId", "defaultAgentId", "enableAttachments", "enableMentions", "enableAgentMentions", "enableEntityMentions", "enableSkillCommands", "enablePlanMode", "enableRealtime", "AllowedAgentIDs", "MentionPeople", "maxAttachments", "maxAttachmentSizeBytes", "acceptedFileTypes"], ["role", "region", "aria-label", "Fork", 1, "fork-view-bar"], [1, "upload-indicator-overlay"], [1, "chat-messages-container", 3, "scroll", "keydown.escape"], [3, "OlderRequested", "DateJumpRequested", "ForkOpenRequested", "EditResendRequested", "RegenerateRequested", "ResendInPlaceRequested", "ForkRequested", "realtimeSessionOpenRequested", "deleteMessage", "BeforeStopClicked", "StopMessage", "testFeedbackMessage", "artifactClicked", "messageEdited", "openEntityRecord", "suggestedResponseSelected", "attachmentClicked", "diagnosticRequested", "LivenessCheckRequested", "messagePinToggled", "beforeResponseFormSubmitted", "afterResponseFormSubmitted", "TaskGraphPanelRequested", "ScrollToMessageRequested", "showEmptyFill", "showDateNavigation", "showAgentRunDetails", "showReactions", "showMessageRating", "allowPinning", "allowMessageEdit", "allowMessageDelete", "ReadOnly", "AllowStopRun", "InFlightCount", "assistantDisplayName", "assistantAvatarUrl", "messages", "HasMoreAbove", "IsLoadingOlder", "ScrollRoot", "conversation", "currentUser", "isProcessing", "artifactMap", "agentRunMap", "HandoffMap", "ratingsMap", "userAvatarMap", "attachmentsMap", "messageRendererTemplate", "messageExtraTemplate", "sessionMetaMap", "ForkChipMap", "ForkLayout", "CanFork", "InPlaceTurn"], [1, "scroll-to-bottom-icon", 2, "left", "50%"], [1, "loading-peripheral-placeholder"], ["role", "region", "aria-label", "Fork", 1, "fork-view-bar", 3, "keydown.escape"], ["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", "initialDraft", "conversationId", "conversationName", "currentUser", "conversationHistory", "artifactsByDetailId", "systemArtifactsByDetailId", "agentRunsByDetailId", "appContext", "applicationId", "defaultAgentId", "conversationDefaultAgentId", "agentConfigurationPresetId", "AgentReplyMode", "AllowedAgentIDs", "MentionPeople", "AgentHistoryFrom", "TargetBranchID", "ResolveTargetBranch", "AgentTurnHandler", "AutoNameConversation", "EnableDecisionRouting", "inProgressMessageIds", "disabled", "ReadOnly", "enableAttachments", "enableMentions", "enableAgentMentions", "enableEntityMentions", "enableSkillCommands", "enablePlanMode", "enableRealtime", "Placeholder", "SendSlotMode", "StopCount", "StopLabel", "StatusText", "StatusElapsed", "maxAttachments", "maxAttachmentSizeBytes", "acceptedFileTypes", "initialMessage", "initialAttachments"], [1, "fork-composer-hint"], [3, "DraftStateChanged", "ComposerBlurred", "StopClicked", "initialMessageAutoSendStarted", "initialMessageAutoSendFailed", "messageSent", "MessageStreamed", "agentResponse", "agentRunDetected", "agentRunUpdate", "messageComplete", "artifactCreated", "conversationRenamed", "intentCheckStarted", "intentCheckCompleted", "beforeAgentTurn", "afterAgentTurn", "uploadStateChanged", "hidden", "initialDraft", "conversationId", "conversationName", "currentUser", "conversationHistory", "artifactsByDetailId", "systemArtifactsByDetailId", "agentRunsByDetailId", "appContext", "applicationId", "defaultAgentId", "conversationDefaultAgentId", "agentConfigurationPresetId", "AgentReplyMode", "AllowedAgentIDs", "MentionPeople", "AgentHistoryFrom", "TargetBranchID", "ResolveTargetBranch", "AgentTurnHandler", "AutoNameConversation", "EnableDecisionRouting", "inProgressMessageIds", "disabled", "ReadOnly", "enableAttachments", "enableMentions", "enableAgentMentions", "enableEntityMentions", "enableSkillCommands", "enablePlanMode", "enableRealtime", "Placeholder", "SendSlotMode", "StopCount", "StopLabel", "StatusText", "StatusElapsed", "maxAttachments", "maxAttachmentSizeBytes", "acceptedFileTypes", "initialMessage", "initialAttachments"], [1, "resize-handle"], [1, "chat-artifact-pane"], [3, "closed", "saveToCollectionRequested", "navigateToLink", "shareRequested", "maximizeToggled", "openEntityRecord", "navigationRequest", "analyzeRequested", "applyFormRequested", "artifactId", "currentUser", "environmentId", "versionNumber", "viewContext", "Scope", "canShare", "canEdit", "isMaximized", "refreshTrigger"], [1, "resize-handle", 3, "mousedown", "touchstart"], [1, "chat-artifact-pane", "chat-task-graph-pane"], [1, "task-graph-pane-header"], [1, "task-graph-pane-title-group"], [1, "task-graph-pane-icon"], [1, "fa-solid", "fa-diagram-project"], [1, "task-graph-pane-titles"], [1, "task-graph-pane-title"], [1, "task-graph-pane-subtitle"], [1, "task-graph-pane-actions"], ["type", "button", "title", "Save this task graph as a reusable Draft Flow Agent workflow", 1, "task-graph-pane-save-btn", 3, "click", "disabled"], [1, "fa-solid"], ["type", "button", 1, "task-graph-pane-btn", 3, "click", "title"], ["type", "button", "title", "Close Task Graph panel", 1, "task-graph-pane-btn", 3, "click"], [1, "fa-solid", "fa-xmark"], [1, "task-graph-pane-body"], [3, "ParentTaskID", "WorkflowName", "LiveUpdates", "ShowVariables", "Height"], [1, "chat-artifact-pane", "chat-task-graph-pane", "chat-remote-browser-pane"], ["type", "text", "placeholder", "Enter URL or domain\u2026", 1, "remote-browser-url-input", 3, "ngModelChange", "keydown.enter", "ngModel"], ["type", "button", "title", "Navigate to URL", 1, "task-graph-pane-save-btn", 3, "click", "disabled"], ["type", "button", "title", "Close Browser panel", 1, "task-graph-pane-btn", 3, "click"], [3, "closed", "jumpRequested", "unpinRequested", "pinnedMessages", "isLoading", "AllowUnpin"], [3, "ForkSelected", "Closed", "PanelID", "Summaries", "CurrentUserID"], [3, "NavigateRequest", "StartLiveRequested", "ReviewClosed", "AgentName", "Hidden", "CurrentUser", "EnvironmentID", "ReviewData", "AllowStartLive", "Chrome", "Compact", "ShowDevLinks", "ShowDensityPicker"], ["type", "button", "title", "Return to the live call", "aria-label", "Return to the live call", 1, "voice-call-pill"], ["type", "button", "title", "Return to the live call", "aria-label", "Return to the live call", 1, "voice-call-pill", 3, "click"], ["aria-hidden", "true", 1, "voice-call-pill__pulse"], ["aria-hidden", "true", 1, "fa-solid", "fa-phone-volume"], [1, "voice-call-pill__text"], [1, "voice-call-pill__name"], [1, "voice-call-pill__hint"], [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"], ["Icon", "fa-solid fa-cube", "Title", "No artifacts in this conversation yet", 1, "artifacts-empty-fill"], [1, "artifact-modal-card", 3, "expanded", "system-artifact"], ["title", "Toggle system artifacts visibility", 1, "toggle-system-btn", 3, "click"], [1, "fas", "fa-cog"], [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, "completed", "cancelled", "isOpen", "environmentId", "currentUser", "excludeCollectionIds", "artifactVersionId", "artifactName", "artifactVersionNumber"], [3, "closed", "data", "visible"], [3, "closed", "imageUrl", "alt", "fileName", "visible"]], template: function ConversationChatAreaComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 10);
+            i0.ɵɵconditionalCreate(1, ConversationChatAreaComponent_Conditional_1_Template, 3, 3, "div", 11);
+            i0.ɵɵconditionalCreate(2, ConversationChatAreaComponent_Conditional_2_Template, 1, 8, "ng-container")(3, ConversationChatAreaComponent_Conditional_3_Template, 18, 17, "div", 12);
             i0.ɵɵtemplate(4, ConversationChatAreaComponent_ng_template_4_Template, 3, 1, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor)(6, ConversationChatAreaComponent_ng_template_6_Template, 2, 1, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor);
-            i0.ɵɵelementStart(8, "div", 12);
-            i0.ɵɵconditionalCreate(9, ConversationChatAreaComponent_Conditional_9_Template, 2, 6, "div", 13);
-            i0.ɵɵelementStart(10, "div", 14);
-            i0.ɵɵconditionalCreate(11, ConversationChatAreaComponent_Conditional_11_Template, 1, 1)(12, ConversationChatAreaComponent_Conditional_12_Template, 3, 1)(13, ConversationChatAreaComponent_Conditional_13_Template, 5, 1, "div", 15)(14, ConversationChatAreaComponent_Conditional_14_Template, 11, 36, "div", 15);
+            i0.ɵɵelementStart(8, "div", 13);
+            i0.ɵɵconditionalCreate(9, ConversationChatAreaComponent_Conditional_9_Template, 2, 6, "div", 14);
+            i0.ɵɵelementStart(10, "div", 15);
+            i0.ɵɵconditionalCreate(11, ConversationChatAreaComponent_Conditional_11_Template, 1, 1)(12, ConversationChatAreaComponent_Conditional_12_Template, 3, 1)(13, ConversationChatAreaComponent_Conditional_13_Template, 5, 1, "div", 16)(14, ConversationChatAreaComponent_Conditional_14_Template, 11, 37, "div", 16);
             i0.ɵɵelementEnd();
             i0.ɵɵconditionalCreate(15, ConversationChatAreaComponent_Conditional_15_Template, 3, 15);
             i0.ɵɵconditionalCreate(16, ConversationChatAreaComponent_Conditional_16_Template, 23, 24);
-            i0.ɵɵelementStart(17, "mj-artifact-share-modal", 16);
-            i0.ɵɵlistener("saved", function ConversationChatAreaComponent_Template_mj_artifact_share_modal_saved_17_listener() { return ctx.onArtifactShared(); })("cancelled", function ConversationChatAreaComponent_Template_mj_artifact_share_modal_cancelled_17_listener() { return ctx.onArtifactShareModalClose(); });
+            i0.ɵɵconditionalCreate(17, ConversationChatAreaComponent_Conditional_17_Template, 24, 18);
+            i0.ɵɵelementStart(18, "mj-artifact-share-modal", 17);
+            i0.ɵɵlistener("saved", function ConversationChatAreaComponent_Template_mj_artifact_share_modal_saved_18_listener() { return ctx.onArtifactShared(); })("cancelled", function ConversationChatAreaComponent_Template_mj_artifact_share_modal_cancelled_18_listener() { return ctx.onArtifactShareModalClose(); });
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(18, ConversationChatAreaComponent_Conditional_18_Template, 1, 3, "mj-pinned-messages-panel", 17);
-            i0.ɵɵconditionalCreate(19, ConversationChatAreaComponent_Conditional_19_Template, 1, 3, "mj-conversation-forks-popover", 18);
+            i0.ɵɵconditionalCreate(19, ConversationChatAreaComponent_Conditional_19_Template, 1, 3, "mj-pinned-messages-panel", 18);
+            i0.ɵɵconditionalCreate(20, ConversationChatAreaComponent_Conditional_20_Template, 1, 3, "mj-conversation-forks-popover", 19);
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(20, ConversationChatAreaComponent_Conditional_20_Template, 4, 15);
-            i0.ɵɵpipe(21, "async");
+            i0.ɵɵconditionalCreate(21, ConversationChatAreaComponent_Conditional_21_Template, 4, 15);
+            i0.ɵɵpipe(22, "async");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(22, "mj-export-modal", 19);
-            i0.ɵɵlistener("cancelled", function ConversationChatAreaComponent_Template_mj_export_modal_cancelled_22_listener() { return ctx.onExportModalCancelled(); })("exported", function ConversationChatAreaComponent_Template_mj_export_modal_exported_22_listener() { return ctx.onExportModalComplete(); });
+            i0.ɵɵelementStart(23, "mj-export-modal", 20);
+            i0.ɵɵlistener("cancelled", function ConversationChatAreaComponent_Template_mj_export_modal_cancelled_23_listener() { return ctx.onExportModalCancelled(); })("exported", function ConversationChatAreaComponent_Template_mj_export_modal_exported_23_listener() { return ctx.onExportModalComplete(); });
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(23, "mj-resource-share-dialog", 20);
-            i0.ɵɵlistener("Result", function ConversationChatAreaComponent_Template_mj_resource_share_dialog_Result_23_listener($event) { return ctx.onShareDialogResult($event); });
+            i0.ɵɵelementStart(24, "mj-resource-share-dialog", 21);
+            i0.ɵɵlistener("Result", function ConversationChatAreaComponent_Template_mj_resource_share_dialog_Result_24_listener($event) { return ctx.onShareDialogResult($event); });
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(24, "mj-members-modal", 21);
-            i0.ɵɵlistener("cancelled", function ConversationChatAreaComponent_Template_mj_members_modal_cancelled_24_listener() { return ctx.showMembersModal = false; })("membersChanged", function ConversationChatAreaComponent_Template_mj_members_modal_membersChanged_24_listener() { return ctx.showMembersModal = false; });
+            i0.ɵɵelementStart(25, "mj-members-modal", 22);
+            i0.ɵɵlistener("cancelled", function ConversationChatAreaComponent_Template_mj_members_modal_cancelled_25_listener() { return ctx.showMembersModal = false; })("membersChanged", function ConversationChatAreaComponent_Template_mj_members_modal_membersChanged_25_listener() { return ctx.showMembersModal = false; });
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(25, ConversationChatAreaComponent_Conditional_25_Template, 9, 3, "div", 22);
-            i0.ɵɵconditionalCreate(26, ConversationChatAreaComponent_Conditional_26_Template, 13, 2, "div", 22);
-            i0.ɵɵconditionalCreate(27, ConversationChatAreaComponent_Conditional_27_Template, 1, 7, "mj-artifact-collection-picker-modal", 23);
-            i0.ɵɵconditionalCreate(28, ConversationChatAreaComponent_Conditional_28_Template, 1, 2, "mj-test-feedback-dialog", 24);
-            i0.ɵɵconditionalCreate(29, ConversationChatAreaComponent_Conditional_29_Template, 1, 4, "mj-image-viewer", 25);
+            i0.ɵɵconditionalCreate(26, ConversationChatAreaComponent_Conditional_26_Template, 9, 3, "div", 23);
+            i0.ɵɵconditionalCreate(27, ConversationChatAreaComponent_Conditional_27_Template, 13, 2, "div", 23);
+            i0.ɵɵconditionalCreate(28, ConversationChatAreaComponent_Conditional_28_Template, 1, 7, "mj-artifact-collection-picker-modal", 24);
+            i0.ɵɵconditionalCreate(29, ConversationChatAreaComponent_Conditional_29_Template, 1, 2, "mj-test-feedback-dialog", 25);
+            i0.ɵɵconditionalCreate(30, ConversationChatAreaComponent_Conditional_30_Template, 1, 4, "mj-image-viewer", 26);
         } if (rf & 2) {
             let tmp_3_0;
             i0.ɵɵadvance();
@@ -9344,7 +10156,7 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.isDemonstrationActive ? 9 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵclassProp("full-width", !ctx.showArtifactPanel && !ctx.SelectedTaskGraphPanel)("hidden", ctx.isArtifactPaneMaximized);
+            i0.ɵɵclassProp("full-width", !ctx.showArtifactPanel && !ctx.SelectedTaskGraphPanel && !ctx.ShowRemoteBrowserPanel)("hidden", ctx.isArtifactPaneMaximized);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.isLoadingConversation ? 11 : (ctx.isNewConversation || !ctx.conversationId) && !ctx.suppressNewConversationEmptyState ? 12 : (ctx.isNewConversation || !ctx.conversationId) && ctx.suppressNewConversationEmptyState ? 13 : 14);
             i0.ɵɵadvance(4);
@@ -9352,13 +10164,15 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.SelectedTaskGraphPanel ? 16 : -1);
             i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.ShowRemoteBrowserPanel ? 17 : -1);
+            i0.ɵɵadvance();
             i0.ɵɵproperty("isOpen", ctx.isArtifactShareModalOpen)("artifact", ctx.artifactToShare)("currentUser", ctx.currentUser);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.allowPinning && ctx.showPinsPanel ? 18 : -1);
+            i0.ɵɵconditional(ctx.allowPinning && ctx.showPinsPanel ? 19 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.ShowForksPopover ? 19 : -1);
+            i0.ɵɵconditional(ctx.ShowForksPopover ? 20 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(i0.ɵɵpipeBind1(21, 34, ctx.RealtimeSession.Active$) || ctx.RealtimeReview ? 20 : -1);
+            i0.ɵɵconditional(i0.ɵɵpipeBind1(22, 35, ctx.RealtimeSession.Active$) || ctx.RealtimeReview ? 21 : -1);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("branding", ctx.exportBranding)("isVisible", ctx.showExportModal)("conversation", ctx.conversation || undefined)("Scope", ctx.ExportScope)("currentUser", ctx.currentUser);
             i0.ɵɵadvance();
@@ -9366,20 +10180,20 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("isVisible", ctx.showMembersModal)("conversation", ctx.conversation || undefined)("currentUser", ctx.currentUser);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.showProjectSelector && ctx.conversation ? 25 : -1);
+            i0.ɵɵconditional(ctx.showProjectSelector && ctx.conversation ? 26 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.showArtifactsModal ? 26 : -1);
+            i0.ɵɵconditional(ctx.showArtifactsModal ? 27 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.showCollectionPicker ? 27 : -1);
+            i0.ɵɵconditional(ctx.showCollectionPicker ? 28 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.testFeedbackDialogData ? 28 : -1);
+            i0.ɵɵconditional(ctx.testFeedbackDialogData ? 29 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.showImageViewer ? 29 : -1);
-        } }, dependencies: [i13.NgTemplateOutlet, i14.DefaultValueAccessor, i14.NgControlStatus, i14.MaxLengthValidator, i14.NgModel, i15.TaskGraphRunViewComponent, i16.MJButtonDirective, i16.MJEmptyStateComponent, i10.ArtifactViewerPanelComponent, i17.TestFeedbackDialogComponent, i18.LoadingComponent, i19.GenericShareDialogComponent, i20.ArtifactCollectionPickerModalComponent, i21.ArtifactShareModalComponent, i22.MJChatAgentPresenceDefaultComponent, i23.RealtimeSessionOverlayComponent, i24.MessageListComponent, i25.MessageInputComponent, i26.ConversationEmptyStateComponent, i27.ConversationAgentPickerComponent, i28.ConversationModePickerComponent, i29.ProjectSelectorComponent, i30.MembersModalComponent, i31.ExportModalComponent, i32.ImageViewerComponent, i33.PinnedMessagesPanelComponent, i34.ForksPopoverComponent, i13.AsyncPipe], styles: ["[_nghost-%COMP%] {\n  display: flex;\n  width: 100%;\n  height: 100%;\n}\n\n.chat-area[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  \n  position: relative;\n}\n\n.chat-header[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  padding: 12px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 16px;\n  background: var(--mj-bg-surface-card);\n  z-index: 10;\n  box-shadow: var(--mj-shadow-sm);\n}\n\n\n\n\n\n\n.chat-agent-presence[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  padding: 8px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-card);\n  display: flex;\n  align-items: center;\n  z-index: 11;\n}\n\n.chat-agent-presence--prominent[_ngcontent-%COMP%] {\n  padding: 16px 20px;\n  justify-content: center;\n}\n\n.chat-info[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n  min-width: 0;\n}\n\n\n.sidebar-toggle-btn[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-text-primary) 8%, transparent);\n}\n\n.sidebar-toggle-btn[_ngcontent-%COMP%]:active {\n  background: color-mix(in srgb, var(--mj-text-primary) 12%, transparent);\n}\n\n.sidebar-toggle-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n  font-size: 18px;\n  transition: color 0.15s ease;\n}\n\n.sidebar-toggle-btn[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-primary);\n}\n\n\n.chat-title-bar[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-1);\n  flex: 0 1 auto;\n  min-width: 0;\n}\n\n.chat-title[_ngcontent-%COMP%] {\n  flex: 0 1 auto;\n  min-width: 0;\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.chat-title-path[_ngcontent-%COMP%] {\n  min-width: 0;\n}\n\n.chat-title-crumbs[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-1);\n  min-width: 0;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n\n.chat-title-crumb[_ngcontent-%COMP%] {\n  display: flex;\n  flex: 0 100 auto;\n  align-items: center;\n  gap: var(--mj-space-1);\n  min-width: 80px;\n}\n\n.chat-title-crumb.chat-title-ellipsis[_ngcontent-%COMP%] {\n  flex: 0 0 auto;\n  min-width: 0;\n}\n\n.chat-title-crumb[_ngcontent-%COMP%]    > button[_ngcontent-%COMP%] {\n  min-width: 0;\n  color: var(--mj-text-muted);\n  font-size: var(--mj-text-sm);\n  font-weight: 500;\n}\n\n.chat-title-crumb-label[_ngcontent-%COMP%] {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n\n.chat-title-crumb.collapsed-wide[_ngcontent-%COMP%], \n.chat-title-ellipsis[_ngcontent-%COMP%]:not(.collapses-wide) {\n  display: none;\n}\n\n.chat-title-sep[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  font-size: 12px;\n  color: var(--mj-border-strong);\n}\n\n.chat-title-current[_ngcontent-%COMP%] {\n  display: flex;\n  flex: 0 1 auto;\n  align-items: center;\n  gap: var(--mj-space-1);\n  min-width: 120px;\n}\n\n.chat-title-kind[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  margin: 0 var(--mj-space-1);\n  color: var(--mj-status-info);\n}\n\n.chat-title-kind[data-kind='Edit'][_ngcontent-%COMP%] {\n  color: var(--mj-status-warning);\n}\n\n.chat-title-kind[data-kind='Regenerate'][_ngcontent-%COMP%] {\n  color: var(--mj-brand-tertiary);\n}\n\n.chat-title-bar[_ngcontent-%COMP%]   .chat-title-rename[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  color: var(--mj-text-muted);\n  opacity: 0.6;\n  transition: opacity 0.15s ease, color 0.15s ease;\n}\n\n.chat-title-bar[_ngcontent-%COMP%]:hover   .chat-title-rename[_ngcontent-%COMP%], \n.chat-title-bar[_ngcontent-%COMP%]   .chat-title-rename[_ngcontent-%COMP%]:focus-visible {\n  color: var(--mj-text-primary);\n  opacity: 1;\n}\n\n.chat-title-input[_ngcontent-%COMP%] {\n  flex: 0 1 360px;\n  min-width: 120px;\n  padding: var(--mj-space-1) var(--mj-space-2);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  font: inherit;\n  font-size: 16px;\n  font-weight: 600;\n}\n\n.chat-title-input[_ngcontent-%COMP%]:focus-visible {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-focus-ring);\n}\n\n.shared-by-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 3px 10px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n  color: var(--mj-brand-primary);\n  border-radius: 999px;\n  font-size: 12px;\n  font-weight: 500;\n  flex-shrink: 0;\n  max-width: 240px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.shared-by-badge[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 10px;\n}\n\n.shared-by-badge[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.project-tag[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 16px;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  transition: all 0.2s;\n  height: 28px;\n  margin-left: 12px;\n}\n\n.project-tag[_ngcontent-%COMP%]:hover {\n  background: var(--mj-border-default);\n  border-color: var(--mj-text-muted);\n}\n\n.project-tag[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 10px;\n}\n\n.test-indicator[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n  border: 1px solid var(--mj-status-warning);\n  border-radius: 16px;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-status-warning);\n  cursor: pointer;\n  transition: all 0.2s;\n  height: 28px;\n  margin-left: 8px;\n}\n\n.test-indicator[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-status-warning) 20%, var(--mj-bg-surface));\n  border-color: var(--mj-status-warning);\n}\n\n.test-indicator[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 10px;\n}\n\n\n.pin-chip[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  padding: 5px 10px;\n  background: color-mix(in srgb, var(--mj-status-warning) 12%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-status-warning) 45%, transparent);\n  border-radius: 20px;\n  color: var(--mj-status-warning-text, var(--mj-status-warning));\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s;\n}\n\n.pin-chip[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n}\n\n.pin-chip[_ngcontent-%COMP%]:hover, \n.pin-chip.active[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 20%, var(--mj-bg-surface));\n  border-color: var(--mj-status-warning);\n}\n\n.pin-chip-count[_ngcontent-%COMP%] {\n  font-size: 12px;\n  font-weight: 700;\n}\n\n.chat-members[_ngcontent-%COMP%], \n.artifact-indicator[_ngcontent-%COMP%] {\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 var(--mj-border-default);\n  border-radius: 6px;\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 150ms ease;\n}\n\n.chat-members[_ngcontent-%COMP%]:hover, \n.artifact-indicator[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n\n.artifact-badge[_ngcontent-%COMP%], \n.members-badge[_ngcontent-%COMP%] {\n  position: absolute;\n  top: -6px;\n  right: -6px;\n  min-width: 16px;\n  height: 16px;\n  padding: 0 4px;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\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[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n}\n\n.ambient-agent-indicator[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  animation: _ngcontent-%COMP%_pulse 2s ease-in-out infinite;\n}\n\n.ambient-agent-indicator[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n@keyframes _ngcontent-%COMP%_pulse {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.7;\n  }\n}\n.chat-actions[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.action-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 12px;\n  background: transparent;\n  border: 1px solid var(--mj-border-default);\n  cursor: pointer;\n  border-radius: 6px;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  transition: all 150ms ease;\n}\n\n.action-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n.share-btn.shared[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  border-color: var(--mj-brand-primary-hover);\n  color: var(--mj-brand-primary-hover);\n}\n\n.share-btn.shared[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary-hover);\n}\n\n.chat-content-area[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  min-width: min(300px, 100%); \n  overflow: hidden;\n  transition: width 0.3s ease;\n}\n\n.chat-messages-pane.full-width[_ngcontent-%COMP%] {\n  width: 100%;\n}\n\n.chat-messages-pane[_ngcontent-%COMP%]:not(.full-width) {\n  flex: 1;\n}\n\n.chat-messages-pane.hidden[_ngcontent-%COMP%] {\n  display: none;\n}\n\n.resize-handle[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary);\n}\n\n.resize-handle[_ngcontent-%COMP%]::before {\n  content: \"\";\n  position: absolute;\n  left: -4px;\n  right: -4px;\n  top: 0;\n  bottom: 0;\n}\n\n.chat-artifact-pane[_ngcontent-%COMP%] {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-surface-sunken);\n  overflow: hidden;\n  flex-shrink: 0;\n}\n\n.chat-artifact-pane.maximized[_ngcontent-%COMP%] {\n  width: 100% !important;\n}\n\n.chat-artifact-pane[_ngcontent-%COMP%]    > mj-artifact-viewer-panel[_ngcontent-%COMP%] {\n  display: flex;\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n}\n\n.chat-task-graph-pane[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border-left: 1px solid var(--mj-border-default);\n}\n\n.task-graph-pane-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  padding: 12px 16px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.task-graph-pane-title-group[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-width: 0;\n}\n\n.task-graph-pane-icon[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  border-radius: 8px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n  color: var(--mj-brand-primary);\n  font-size: 14px;\n  flex-shrink: 0;\n}\n\n.task-graph-pane-titles[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n  min-width: 0;\n}\n\n.task-graph-pane-title[_ngcontent-%COMP%] {\n  font-size: 13.5px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.task-graph-pane-subtitle[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n.task-graph-pane-actions[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex-shrink: 0;\n}\n\n.task-graph-pane-save-btn[_ngcontent-%COMP%] {\n  height: 30px;\n  padding: 0 10px;\n  border-radius: 6px;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  font-weight: 500;\n  border: 1px solid var(--mj-brand-primary);\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse, #ffffff);\n  cursor: pointer;\n  transition: opacity 0.15s ease, filter 0.15s ease;\n}\n\n.task-graph-pane-save-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  filter: brightness(1.06);\n}\n\n.task-graph-pane-save-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.55;\n  cursor: not-allowed;\n}\n\n.task-graph-pane-btn[_ngcontent-%COMP%] {\n  width: 30px;\n  height: 30px;\n  border-radius: 6px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid var(--mj-border-subtle);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;\n}\n\n.task-graph-pane-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n  border-color: var(--mj-border-default);\n}\n\n.task-graph-pane-body[_ngcontent-%COMP%] {\n  flex: 1;\n  width: 100%;\n  min-height: 0;\n  min-width: 0;\n  padding: 12px 16px 16px;\n  box-sizing: border-box;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n}\n\n.task-graph-pane-body[_ngcontent-%COMP%]    > mj-task-graph-run-view[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  width: 100%;\n  min-height: 0;\n  min-width: 0;\n  overflow: hidden;\n}\n\n.chat-messages-wrapper[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  overflow: hidden;\n  position: relative; \n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.chat-demonstration-stage[_ngcontent-%COMP%] {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n  background: var(--mj-bg-surface);\n  border-right: 1px solid var(--mj-border-default);\n  flex: 1;\n  min-width: 0;\n}\n\n.chat-content-area.demonstration-mode[_ngcontent-%COMP%]   .chat-messages-pane[_ngcontent-%COMP%], \n.chat-content-area.demonstration-mode[_ngcontent-%COMP%]   .chat-messages-pane.full-width[_ngcontent-%COMP%] {\n  flex: 0 0 320px;\n  width: 320px;\n  min-width: 0;\n}\n\n@media (max-width: 768px) {\n  .chat-content-area.demonstration-mode[_ngcontent-%COMP%] {\n    flex-direction: column;\n  }\n\n  .chat-content-area.demonstration-mode[_ngcontent-%COMP%]   .chat-demonstration-stage[_ngcontent-%COMP%] {\n    flex: 1 1 60%;\n    border-right: none;\n    border-bottom: 1px solid var(--mj-border-default);\n    height: auto;\n  }\n\n  .chat-content-area.demonstration-mode[_ngcontent-%COMP%]   .chat-messages-pane[_ngcontent-%COMP%], \n   .chat-content-area.demonstration-mode[_ngcontent-%COMP%]   .chat-messages-pane.full-width[_ngcontent-%COMP%] {\n    flex: 1 1 40%;\n    width: 100%;\n    height: auto;\n  }\n}\n\n\n.upload-indicator-overlay[_ngcontent-%COMP%] {\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: color-mix(in srgb, var(--mj-bg-surface-card) 95%, transparent);\n  border-radius: 12px;\n  box-shadow: var(--mj-shadow-md);\n  z-index: 100;\n  pointer-events: none;\n}\n\n.chat-messages-container[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  background: var(--mj-bg-surface-card);\n  min-height: 0;\n  position: relative;\n}\n\n.scroll-to-bottom-icon[_ngcontent-%COMP%] {\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: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  box-shadow: var(--mj-shadow-md);\n  transition: all 0.2s ease;\n  z-index: 100;\n  pointer-events: auto;\n}\n\n.scroll-to-bottom-icon[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-color: var(--mj-brand-primary);\n  transform: translateX(-50%) translateY(-2px);\n  box-shadow: color-mix(in srgb, var(--mj-brand-primary) 20%, transparent) 0 4px 12px;\n}\n\n.scroll-to-bottom-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n  font-size: 16px;\n  transition: color 0.2s;\n}\n\n.scroll-to-bottom-icon[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.chat-input-container[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  background: var(--mj-bg-surface-card);\n  padding: 0 1.25rem 1.25rem 1.25rem;\n  overflow: visible;\n}\n\n\n.chat-composer-extra[_ngcontent-%COMP%] {\n  margin-bottom: 0.5rem;\n}\n\n.read-only-banner[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin: 0 1.25rem 0.5rem 1.25rem;\n  padding: 8px 12px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n  color: var(--mj-text-secondary);\n  border-radius: 6px;\n  font-size: 12px;\n}\n\n.read-only-banner[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n}\n\n.loading-peripheral-placeholder[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 140px;\n  padding: 24px;\n  background: color-mix(in srgb, var(--mj-bg-surface-card) 50%, transparent);\n  backdrop-filter: blur(2px);\n  border-radius: 12px;\n  margin: 12px;\n  animation: _ngcontent-%COMP%_fadeIn 0.2s ease-in-out;\n}\n\n.modal-overlay[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--mj-bg-overlay);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n}\n\n.modal-content[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  border-radius: 8px;\n  box-shadow: var(--mj-shadow-md);\n  max-width: 90vw;\n  max-height: 90vh;\n  display: flex;\n  flex-direction: column;\n}\n\n.project-selector-modal[_ngcontent-%COMP%] {\n  width: 600px;\n  height: 500px;\n}\n\n.modal-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.modal-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n}\n\n.modal-header-actions[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.toggle-system-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  cursor: pointer;\n  color: var(--mj-text-secondary);\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[_ngcontent-%COMP%]:hover {\n  background: var(--mj-border-default);\n  border-color: var(--mj-border-default);\n  color: var(--mj-text-primary);\n}\n\n.toggle-system-btn.active[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n.toggle-system-btn.active[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary-hover);\n  border-color: var(--mj-brand-primary-hover);\n}\n\n.toggle-system-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n.modal-close-btn[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: var(--mj-text-secondary);\n  padding: 4px 8px;\n  border-radius: 4px;\n  transition: all 0.2s;\n}\n\n.modal-close-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n.modal-body[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: auto;\n  padding: 20px;\n}\n\n.artifacts-modal[_ngcontent-%COMP%] {\n  width: 700px;\n  max-height: 600px;\n}\n\n.artifacts-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n  gap: 16px;\n}\n\n\n.artifacts-empty-fill[_ngcontent-%COMP%] {\n  grid-column: 1/-1;\n}\n\n.artifact-modal-card[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-surface-card);\n  border: 1.5px solid var(--mj-border-default);\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[_ngcontent-%COMP%] {\n  border-color: var(--mj-brand-primary);\n}\n\n.artifact-modal-card.system-artifact[_ngcontent-%COMP%] {\n  opacity: 0.85;\n  border-color: var(--mj-border-default);\n  border-style: dashed;\n  position: relative;\n}\n\n.artifact-modal-card.system-artifact[_ngcontent-%COMP%]::before {\n  content: \"SYSTEM\";\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  font-size: 9px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n  background: var(--mj-bg-surface-sunken);\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[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-text-muted);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.artifact-card-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px;\n  cursor: pointer;\n}\n\n.artifact-card-header[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.artifact-modal-card[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-shadow-md);\n  transform: translateY(-2px);\n}\n\n.artifact-modal-icon[_ngcontent-%COMP%] {\n  width: 40px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  border-radius: 10px;\n  color: var(--mj-brand-primary);\n  flex-shrink: 0;\n}\n\n.artifact-modal-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 18px;\n}\n\n.artifact-modal-info[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.artifact-modal-title[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 4px;\n}\n\n.artifact-modal-meta[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n}\n\n.artifact-modal-action[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  transition: color 0.2s;\n}\n\n.artifact-modal-card[_ngcontent-%COMP%]:hover   .artifact-modal-action[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.expand-btn[_ngcontent-%COMP%] {\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: var(--mj-text-secondary);\n  cursor: pointer;\n  border-radius: 6px;\n  transition: all 0.2s;\n}\n.expand-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-brand-primary);\n}\n\n.artifact-versions-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  padding: 0 1rem 1rem 1rem;\n  background: var(--mj-bg-surface-sunken);\n}\n\n.artifact-version-item[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n.artifact-version-item[_ngcontent-%COMP%]   .version-badge[_ngcontent-%COMP%] {\n  display: inline-block;\n  padding: 4px 8px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n  font-weight: 600;\n  font-family: monospace;\n  border-radius: 4px;\n}\n.artifact-version-item[_ngcontent-%COMP%]   .version-open-text[_ngcontent-%COMP%] {\n  flex: 1;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n}\n.artifact-version-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  font-size: 12px;\n}\n.artifact-version-item[_ngcontent-%COMP%]:hover   .version-badge[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n.artifact-version-item[_ngcontent-%COMP%]:hover   .version-open-text[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n.artifact-version-item[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.loading-peripheral-content[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px 24px;\n  background: var(--mj-bg-surface-card);\n  border: 2px solid var(--mj-border-default);\n  border-radius: 12px;\n  box-shadow: var(--mj-shadow-md);\n  color: var(--mj-text-secondary);\n  font-size: 14px;\n  font-weight: 500;\n}\n.loading-peripheral-content[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 20px;\n  color: var(--mj-brand-primary);\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n.conversation-loading-state[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n}\n\n.loading-content[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding-top: 20px;\n  gap: 16px;\n  color: var(--mj-text-secondary);\n  font-size: 15px;\n}\n.loading-content[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 32px;\n  color: var(--mj-brand-primary);\n}\n.loading-content[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  font-weight: 500;\n}\n\n\n@media (max-width: 768px) {\n  .chat-header[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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-bar[_ngcontent-%COMP%] {\n    flex: 1;\n  }\n  .chat-title[_ngcontent-%COMP%] {\n    font-size: 15px;\n    font-weight: 700;\n  }\n  \n  .chat-title-crumb.path-middle[_ngcontent-%COMP%] {\n    display: none;\n  }\n  .chat-title-ellipsis[_ngcontent-%COMP%]:not(.collapses-wide) {\n    display: flex;\n  }\n  .project-tag[_ngcontent-%COMP%] {\n    margin-left: 0;\n    font-size: 10px;\n    padding: 3px 8px;\n    height: 24px;\n    display: none; \n  }\n  .test-indicator[_ngcontent-%COMP%] {\n    margin-left: 0;\n    font-size: 10px;\n    padding: 3px 8px;\n    height: 24px;\n  }\n  \n  .chat-actions-buttons[_ngcontent-%COMP%] {\n    order: 2;\n    flex-shrink: 0;\n  }\n  .chat-actions-buttons[_ngcontent-%COMP%]   .action-btn[_ngcontent-%COMP%] {\n    padding: 6px 8px;\n    min-width: auto;\n  }\n  .chat-actions-buttons[_ngcontent-%COMP%]   .action-btn[_ngcontent-%COMP%]   .btn-label[_ngcontent-%COMP%] {\n    display: none;\n  }\n  .chat-actions[_ngcontent-%COMP%] {\n    flex-wrap: nowrap;\n  }\n  .chat-members[_ngcontent-%COMP%], \n   .artifact-indicator[_ngcontent-%COMP%] {\n    padding: 5px 7px;\n    font-size: 13px;\n  }\n  .action-btn[_ngcontent-%COMP%] {\n    padding: 6px 8px;\n    font-size: 12px;\n  }\n  .ambient-agent-indicator[_ngcontent-%COMP%] {\n    font-size: 12px;\n    padding: 4px 8px;\n  }\n  .project-selector-modal[_ngcontent-%COMP%] {\n    width: min(95vw, 600px);\n    height: auto;\n  }\n  .artifacts-modal[_ngcontent-%COMP%] {\n    width: min(95vw, 700px);\n  }\n  .artifacts-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n  .chat-input-container[_ngcontent-%COMP%] {\n    padding: 0 0.75rem 0.75rem 0.75rem;\n  }\n  .scroll-to-bottom-icon[_ngcontent-%COMP%] {\n    bottom: 16px;\n    width: 36px;\n    height: 36px;\n  }\n  \n  .chat-content-area[_ngcontent-%COMP%] {\n    position: relative;\n  }\n  .chat-artifact-pane[_ngcontent-%COMP%] {\n    position: fixed;\n    left: 0;\n    right: 0;\n    top: 56px; \n    bottom: 0;\n    width: 100% !important;\n    z-index: 100;\n    background: var(--mj-bg-surface-card);\n  }\n  .resize-handle[_ngcontent-%COMP%] {\n    display: none;\n  }\n}\n\n@media (max-width: 480px) {\n  .chat-header[_ngcontent-%COMP%] {\n    padding: 6px 8px;\n    gap: 4px;\n  }\n  .chat-title[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 700;\n  }\n  .project-tag[_ngcontent-%COMP%] {\n    font-size: 9px;\n    padding: 2px 6px;\n    height: 20px;\n    display: none;\n  }\n  .test-indicator[_ngcontent-%COMP%] {\n    font-size: 9px;\n    padding: 2px 6px;\n    height: 20px;\n  }\n  .chat-members[_ngcontent-%COMP%], \n   .artifact-indicator[_ngcontent-%COMP%] {\n    padding: 4px 8px;\n    font-size: 11px;\n  }\n  .action-btn[_ngcontent-%COMP%] {\n    padding: 5px 7px;\n    font-size: 11px;\n  }\n  .ambient-agent-indicator[_ngcontent-%COMP%] {\n    font-size: 11px;\n    padding: 3px 6px;\n  }\n  .project-selector-modal[_ngcontent-%COMP%], \n   .artifacts-modal[_ngcontent-%COMP%] {\n    width: 100vw;\n    height: 100vh;\n    border-radius: 0;\n  }\n  .chat-input-container[_ngcontent-%COMP%] {\n    padding: 0 0.5rem 0.5rem 0.5rem;\n  }\n  .scroll-to-bottom-icon[_ngcontent-%COMP%] {\n    bottom: 12px;\n    width: 32px;\n    height: 32px;\n  }\n  .scroll-to-bottom-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 14px;\n  }\n}\n\n\n.artifact-picker-overlay[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: var(--mj-bg-overlay);\n  z-index: 999;\n}\n\n.artifact-picker-panel[_ngcontent-%COMP%] {\n  position: fixed;\n  right: 0;\n  top: 0;\n  width: 360px;\n  height: 100%;\n  background: var(--mj-bg-surface);\n  border-left: 1px solid var(--mj-border-default);\n  z-index: 1000;\n  display: flex;\n  flex-direction: column;\n  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.1);\n  animation: _ngcontent-%COMP%_slideInRight 0.2s ease-out;\n}\n\n@keyframes _ngcontent-%COMP%_slideInRight {\n  from { transform: translateX(100%); }\n  to { transform: translateX(0); }\n}\n\n.artifact-picker-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.artifact-picker-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.artifact-picker-close[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 4px 8px;\n  color: var(--mj-text-muted);\n  border-radius: 4px;\n}\n\n.artifact-picker-close[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n\n.artifact-picker-body[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 12px;\n}\n\n.artifact-picker-empty[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px 20px;\n  text-align: center;\n  color: var(--mj-text-muted);\n  gap: 8px;\n}\n\n.artifact-picker-hint[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-disabled);\n}\n\n.artifact-picker-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.artifact-picker-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 12px;\n  border: 1px solid var(--mj-border-subtle);\n  border-radius: 6px;\n  background: var(--mj-bg-surface-card);\n  cursor: pointer;\n  text-align: left;\n  width: 100%;\n  transition: background 0.15s, border-color 0.15s;\n}\n\n.artifact-picker-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-brand-primary);\n}\n\n.artifact-picker-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 20px;\n  width: 24px;\n  text-align: center;\n  flex-shrink: 0;\n}\n\n.artifact-picker-item[_ngcontent-%COMP%]   i.fa-file-pdf[_ngcontent-%COMP%] { color: var(--mj-status-error); }\n.artifact-picker-item[_ngcontent-%COMP%]   i.fa-file-excel[_ngcontent-%COMP%] { color: var(--mj-status-success); }\n.artifact-picker-item[_ngcontent-%COMP%]   i.fa-file-word[_ngcontent-%COMP%] { color: var(--mj-brand-primary); }\n.artifact-picker-item[_ngcontent-%COMP%]   i.fa-file[_ngcontent-%COMP%] { color: var(--mj-text-muted); }\n\n.artifact-picker-item-info[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.artifact-picker-item-name[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.artifact-picker-item-meta[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n\n\n\n\n.voice-call-pill[_ngcontent-%COMP%] {\n  position: absolute;\n  right: 18px;\n  bottom: 18px;\n  z-index: 49; \n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 9px 16px 9px 13px;\n  border-radius: var(--mj-radius-full, 9999px);\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-elevated, var(--mj-bg-surface));\n  color: var(--mj-text-primary);\n  font-family: inherit;\n  cursor: pointer;\n  box-shadow: 0 8px 24px color-mix(in srgb, var(--mj-brand-primary) 18%, transparent);\n  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;\n}\n.voice-call-pill[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 10px 28px color-mix(in srgb, var(--mj-brand-primary) 28%, transparent);\n  transform: translateY(-1px);\n}\n.voice-call-pill[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: var(--mj-brand-primary);\n}\n.voice-call-pill__pulse[_ngcontent-%COMP%] {\n  width: 9px;\n  height: 9px;\n  border-radius: 50%;\n  background: var(--mj-status-success);\n  flex-shrink: 0;\n  animation: _ngcontent-%COMP%_voice-pill-pulse 1.6s ease-in-out infinite;\n}\n.voice-call-pill__text[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  line-height: 1.25;\n}\n.voice-call-pill__name[_ngcontent-%COMP%] {\n  font-size: 12.5px;\n  font-weight: 700;\n}\n.voice-call-pill__hint[_ngcontent-%COMP%] {\n  font-size: 10.5px;\n  color: var(--mj-text-muted);\n}\n@keyframes _ngcontent-%COMP%_voice-pill-pulse {\n  0%, 100% {\n    box-shadow: 0 0 0 0 color-mix(in srgb, var(--mj-status-success) 45%, transparent);\n  }\n  50% {\n    box-shadow: 0 0 0 5px color-mix(in srgb, var(--mj-status-success) 0%, transparent);\n  }\n}\n\n\n.fork-view-bar[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  padding: var(--mj-space-2) var(--mj-space-4);\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n}\n.fork-composer-hint[_ngcontent-%COMP%] {\n  padding: var(--mj-space-1) var(--mj-space-4) 0;\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n}\n.chat-actions-buttons[_ngcontent-%COMP%]    > .forks-button[_ngcontent-%COMP%]   .forks-count[_ngcontent-%COMP%] {\n  margin-left: var(--mj-space-1);\n  padding: 0 var(--mj-space-2);\n  border-radius: var(--mj-radius-full);\n  background: var(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n  font-size: var(--mj-text-xs);\n  font-weight: 600;\n}\n.chat-actions-buttons[_ngcontent-%COMP%]    > .forks-button.active[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}"] });
+            i0.ɵɵconditional(ctx.showImageViewer ? 30 : -1);
+        } }, dependencies: [i13.NgTemplateOutlet, i14.DefaultValueAccessor, i14.NgControlStatus, i14.MaxLengthValidator, i14.NgModel, i15.TaskGraphRunViewComponent, i16.MJButtonDirective, i16.MJEmptyStateComponent, i10.ArtifactViewerPanelComponent, i17.TestFeedbackDialogComponent, i18.LoadingComponent, i19.GenericShareDialogComponent, i20.ArtifactCollectionPickerModalComponent, i21.ArtifactShareModalComponent, i22.MJChatAgentPresenceDefaultComponent, i23.RealtimeSessionOverlayComponent, i24.RemoteBrowserSurfaceComponent, i25.MessageListComponent, i26.MessageInputComponent, i27.ConversationEmptyStateComponent, i28.ConversationAgentPickerComponent, i29.ConversationModePickerComponent, i30.ProjectSelectorComponent, i31.MembersModalComponent, i32.ExportModalComponent, i33.ImageViewerComponent, i34.PinnedMessagesPanelComponent, i35.ForksPopoverComponent, i13.AsyncPipe], styles: ["[_nghost-%COMP%] {\n  display: flex;\n  width: 100%;\n  height: 100%;\n}\n\n.chat-area[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  \n  position: relative;\n}\n\n.chat-header[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  padding: 12px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 16px;\n  background: var(--mj-bg-surface-card);\n  z-index: 10;\n  box-shadow: var(--mj-shadow-sm);\n}\n\n\n\n\n\n\n.chat-agent-presence[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  padding: 8px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-card);\n  display: flex;\n  align-items: center;\n  z-index: 11;\n}\n\n.chat-agent-presence--prominent[_ngcontent-%COMP%] {\n  padding: 16px 20px;\n  justify-content: center;\n}\n\n.chat-info[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n  min-width: 0;\n}\n\n\n.sidebar-toggle-btn[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-text-primary) 8%, transparent);\n}\n\n.sidebar-toggle-btn[_ngcontent-%COMP%]:active {\n  background: color-mix(in srgb, var(--mj-text-primary) 12%, transparent);\n}\n\n.sidebar-toggle-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n  font-size: 18px;\n  transition: color 0.15s ease;\n}\n\n.sidebar-toggle-btn[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-primary);\n}\n\n\n.chat-title-bar[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-1);\n  flex: 0 1 auto;\n  min-width: 0;\n}\n\n.chat-title[_ngcontent-%COMP%] {\n  flex: 0 1 auto;\n  min-width: 0;\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.chat-title-path[_ngcontent-%COMP%] {\n  min-width: 0;\n}\n\n.chat-title-crumbs[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-1);\n  min-width: 0;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n\n.chat-title-crumb[_ngcontent-%COMP%] {\n  display: flex;\n  flex: 0 100 auto;\n  align-items: center;\n  gap: var(--mj-space-1);\n  min-width: 80px;\n}\n\n.chat-title-crumb.chat-title-ellipsis[_ngcontent-%COMP%] {\n  flex: 0 0 auto;\n  min-width: 0;\n}\n\n.chat-title-crumb[_ngcontent-%COMP%]    > button[_ngcontent-%COMP%] {\n  min-width: 0;\n  color: var(--mj-text-muted);\n  font-size: var(--mj-text-sm);\n  font-weight: 500;\n}\n\n.chat-title-crumb-label[_ngcontent-%COMP%] {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n\n.chat-title-crumb.collapsed-wide[_ngcontent-%COMP%], \n.chat-title-ellipsis[_ngcontent-%COMP%]:not(.collapses-wide) {\n  display: none;\n}\n\n.chat-title-sep[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  font-size: 12px;\n  color: var(--mj-border-strong);\n}\n\n.chat-title-current[_ngcontent-%COMP%] {\n  display: flex;\n  flex: 0 1 auto;\n  align-items: center;\n  gap: var(--mj-space-1);\n  min-width: 120px;\n}\n\n.chat-title-kind[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  margin: 0 var(--mj-space-1);\n  color: var(--mj-status-info);\n}\n\n.chat-title-kind[data-kind='Edit'][_ngcontent-%COMP%] {\n  color: var(--mj-status-warning);\n}\n\n.chat-title-kind[data-kind='Regenerate'][_ngcontent-%COMP%] {\n  color: var(--mj-brand-tertiary);\n}\n\n.chat-title-bar[_ngcontent-%COMP%]   .chat-title-rename[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  color: var(--mj-text-muted);\n  opacity: 0.6;\n  transition: opacity 0.15s ease, color 0.15s ease;\n}\n\n.chat-title-bar[_ngcontent-%COMP%]:hover   .chat-title-rename[_ngcontent-%COMP%], \n.chat-title-bar[_ngcontent-%COMP%]   .chat-title-rename[_ngcontent-%COMP%]:focus-visible {\n  color: var(--mj-text-primary);\n  opacity: 1;\n}\n\n.chat-title-input[_ngcontent-%COMP%] {\n  flex: 0 1 360px;\n  min-width: 120px;\n  padding: var(--mj-space-1) var(--mj-space-2);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  font: inherit;\n  font-size: 16px;\n  font-weight: 600;\n}\n\n.chat-title-input[_ngcontent-%COMP%]:focus-visible {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-focus-ring);\n}\n\n.with-chip[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--mj-space-1-5);\n  padding: 2px var(--mj-space-2);\n  border-radius: var(--mj-radius-full);\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-subtle);\n  color: var(--mj-text-secondary);\n  font-size: var(--mj-text-xs);\n  line-height: var(--mj-leading-tight);\n  flex-shrink: 0;\n}\n\n.with-chip[_ngcontent-%COMP%]   .dot[_ngcontent-%COMP%] {\n  width: 6px;\n  height: 6px;\n  border-radius: var(--mj-radius-full);\n  background: var(--agent-accent, var(--mj-brand-primary));\n  transition: background-color 240ms cubic-bezier(0.22, 1, 0.36, 1);\n  flex-shrink: 0;\n}\n\n.with-chip[_ngcontent-%COMP%]   b[_ngcontent-%COMP%] {\n  color: var(--mj-text-primary);\n  font-weight: var(--mj-font-semibold);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .with-chip[_ngcontent-%COMP%]   .dot[_ngcontent-%COMP%] {\n    transition: none;\n  }\n}\n\n.shared-by-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 3px 10px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n  color: var(--mj-brand-primary);\n  border-radius: 999px;\n  font-size: 12px;\n  font-weight: 500;\n  flex-shrink: 0;\n  max-width: 240px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.shared-by-badge[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 10px;\n}\n\n.shared-by-badge[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.project-tag[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 16px;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  transition: all 0.2s;\n  height: 28px;\n  margin-left: 12px;\n}\n\n.project-tag[_ngcontent-%COMP%]:hover {\n  background: var(--mj-border-default);\n  border-color: var(--mj-text-muted);\n}\n\n.project-tag[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 10px;\n}\n\n.test-indicator[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n  border: 1px solid var(--mj-status-warning);\n  border-radius: 16px;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-status-warning);\n  cursor: pointer;\n  transition: all 0.2s;\n  height: 28px;\n  margin-left: 8px;\n}\n\n.test-indicator[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-status-warning) 20%, var(--mj-bg-surface));\n  border-color: var(--mj-status-warning);\n}\n\n.test-indicator[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 10px;\n}\n\n\n.pin-chip[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  padding: 5px 10px;\n  background: color-mix(in srgb, var(--mj-status-warning) 12%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-status-warning) 45%, transparent);\n  border-radius: 20px;\n  color: var(--mj-status-warning-text, var(--mj-status-warning));\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s;\n}\n\n.pin-chip[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n}\n\n.pin-chip[_ngcontent-%COMP%]:hover, \n.pin-chip.active[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 20%, var(--mj-bg-surface));\n  border-color: var(--mj-status-warning);\n}\n\n.pin-chip-count[_ngcontent-%COMP%] {\n  font-size: 12px;\n  font-weight: 700;\n}\n\n.chat-members[_ngcontent-%COMP%], \n.artifact-indicator[_ngcontent-%COMP%] {\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 var(--mj-border-default);\n  border-radius: 6px;\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 150ms ease;\n}\n\n.chat-members[_ngcontent-%COMP%]:hover, \n.artifact-indicator[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n\n.artifact-badge[_ngcontent-%COMP%], \n.members-badge[_ngcontent-%COMP%] {\n  position: absolute;\n  top: -6px;\n  right: -6px;\n  min-width: 16px;\n  height: 16px;\n  padding: 0 4px;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\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[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n}\n\n.ambient-agent-indicator[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  animation: _ngcontent-%COMP%_pulse 2s ease-in-out infinite;\n}\n\n.ambient-agent-indicator[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n@keyframes _ngcontent-%COMP%_pulse {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.7;\n  }\n}\n.chat-actions[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.action-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 12px;\n  background: transparent;\n  border: 1px solid var(--mj-border-default);\n  cursor: pointer;\n  border-radius: 6px;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  transition: all 150ms ease;\n}\n\n.action-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n.share-btn.shared[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  border-color: var(--mj-brand-primary-hover);\n  color: var(--mj-brand-primary-hover);\n}\n\n.share-btn.shared[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary-hover);\n}\n\n.chat-content-area[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  min-width: min(300px, 100%); \n  overflow: hidden;\n  transition: width 0.3s ease;\n}\n\n.chat-messages-pane.full-width[_ngcontent-%COMP%] {\n  width: 100%;\n}\n\n.chat-messages-pane[_ngcontent-%COMP%]:not(.full-width) {\n  flex: 1;\n}\n\n.chat-messages-pane.hidden[_ngcontent-%COMP%] {\n  display: none;\n}\n\n.resize-handle[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary);\n}\n\n.resize-handle[_ngcontent-%COMP%]::before {\n  content: \"\";\n  position: absolute;\n  left: -4px;\n  right: -4px;\n  top: 0;\n  bottom: 0;\n}\n\n.chat-artifact-pane[_ngcontent-%COMP%] {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-surface-sunken);\n  overflow: hidden;\n  flex-shrink: 0;\n}\n\n.chat-artifact-pane.maximized[_ngcontent-%COMP%] {\n  width: 100% !important;\n}\n\n.chat-artifact-pane[_ngcontent-%COMP%]    > mj-artifact-viewer-panel[_ngcontent-%COMP%] {\n  display: flex;\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n}\n\n.chat-task-graph-pane[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border-left: 1px solid var(--mj-border-default);\n}\n\n.task-graph-pane-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  padding: 12px 16px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.task-graph-pane-title-group[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-width: 0;\n}\n\n.task-graph-pane-icon[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  border-radius: 8px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n  color: var(--mj-brand-primary);\n  font-size: 14px;\n  flex-shrink: 0;\n}\n\n.task-graph-pane-titles[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n  min-width: 0;\n}\n\n.task-graph-pane-title[_ngcontent-%COMP%] {\n  font-size: 13.5px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.task-graph-pane-subtitle[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n.task-graph-pane-actions[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex-shrink: 0;\n}\n\n.task-graph-pane-save-btn[_ngcontent-%COMP%] {\n  height: 30px;\n  padding: 0 10px;\n  border-radius: 6px;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  font-weight: 500;\n  border: 1px solid var(--mj-brand-primary);\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse, #ffffff);\n  cursor: pointer;\n  transition: opacity 0.15s ease, filter 0.15s ease;\n}\n\n.task-graph-pane-save-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  filter: brightness(1.06);\n}\n\n.task-graph-pane-save-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.55;\n  cursor: not-allowed;\n}\n\n.task-graph-pane-btn[_ngcontent-%COMP%] {\n  width: 30px;\n  height: 30px;\n  border-radius: 6px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid var(--mj-border-subtle);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;\n}\n\n.task-graph-pane-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n  border-color: var(--mj-border-default);\n}\n\n.task-graph-pane-body[_ngcontent-%COMP%] {\n  flex: 1;\n  width: 100%;\n  min-height: 0;\n  min-width: 0;\n  padding: 12px 16px 16px;\n  box-sizing: border-box;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n}\n\n.task-graph-pane-body[_ngcontent-%COMP%]    > mj-task-graph-run-view[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  width: 100%;\n  min-height: 0;\n  min-width: 0;\n  overflow: hidden;\n}\n\n.chat-messages-wrapper[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  overflow: hidden;\n  position: relative; \n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.chat-demonstration-stage[_ngcontent-%COMP%] {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n  background: var(--mj-bg-surface);\n  border-right: 1px solid var(--mj-border-default);\n  flex: 1;\n  min-width: 0;\n}\n\n.chat-content-area.demonstration-mode[_ngcontent-%COMP%]   .chat-messages-pane[_ngcontent-%COMP%], \n.chat-content-area.demonstration-mode[_ngcontent-%COMP%]   .chat-messages-pane.full-width[_ngcontent-%COMP%] {\n  flex: 0 0 320px;\n  width: 320px;\n  min-width: 0;\n}\n\n@media (max-width: 768px) {\n  .chat-content-area.demonstration-mode[_ngcontent-%COMP%] {\n    flex-direction: column;\n  }\n\n  .chat-content-area.demonstration-mode[_ngcontent-%COMP%]   .chat-demonstration-stage[_ngcontent-%COMP%] {\n    flex: 1 1 60%;\n    border-right: none;\n    border-bottom: 1px solid var(--mj-border-default);\n    height: auto;\n  }\n\n  .chat-content-area.demonstration-mode[_ngcontent-%COMP%]   .chat-messages-pane[_ngcontent-%COMP%], \n   .chat-content-area.demonstration-mode[_ngcontent-%COMP%]   .chat-messages-pane.full-width[_ngcontent-%COMP%] {\n    flex: 1 1 40%;\n    width: 100%;\n    height: auto;\n  }\n}\n\n\n.upload-indicator-overlay[_ngcontent-%COMP%] {\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: color-mix(in srgb, var(--mj-bg-surface-card) 95%, transparent);\n  border-radius: 12px;\n  box-shadow: var(--mj-shadow-md);\n  z-index: 100;\n  pointer-events: none;\n}\n\n.chat-messages-container[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  background: var(--mj-bg-surface-card);\n  min-height: 0;\n  position: relative;\n}\n\n.scroll-to-bottom-icon[_ngcontent-%COMP%] {\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: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  box-shadow: var(--mj-shadow-md);\n  transition: all 0.2s ease;\n  z-index: 100;\n  pointer-events: auto;\n}\n\n.scroll-to-bottom-icon[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-color: var(--mj-brand-primary);\n  transform: translateX(-50%) translateY(-2px);\n  box-shadow: color-mix(in srgb, var(--mj-brand-primary) 20%, transparent) 0 4px 12px;\n}\n\n.scroll-to-bottom-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n  font-size: 16px;\n  transition: color 0.2s;\n}\n\n.scroll-to-bottom-icon[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.chat-input-container[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  background: var(--mj-bg-surface-card);\n  padding: 0 1.25rem 1.25rem 1.25rem;\n  overflow: visible;\n}\n\n\n.chat-composer-extra[_ngcontent-%COMP%] {\n  margin-bottom: 0.5rem;\n}\n\n.read-only-banner[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin: 0 1.25rem 0.5rem 1.25rem;\n  padding: 8px 12px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n  color: var(--mj-text-secondary);\n  border-radius: 6px;\n  font-size: 12px;\n}\n\n.read-only-banner[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n}\n\n.loading-peripheral-placeholder[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 140px;\n  padding: 24px;\n  background: color-mix(in srgb, var(--mj-bg-surface-card) 50%, transparent);\n  backdrop-filter: blur(2px);\n  border-radius: 12px;\n  margin: 12px;\n  animation: _ngcontent-%COMP%_fadeIn 0.2s ease-in-out;\n}\n\n.modal-overlay[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--mj-bg-overlay);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n}\n\n.modal-content[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  border-radius: 8px;\n  box-shadow: var(--mj-shadow-md);\n  max-width: 90vw;\n  max-height: 90vh;\n  display: flex;\n  flex-direction: column;\n}\n\n.project-selector-modal[_ngcontent-%COMP%] {\n  width: 600px;\n  height: 500px;\n}\n\n.modal-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.modal-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n}\n\n.modal-header-actions[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.toggle-system-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  cursor: pointer;\n  color: var(--mj-text-secondary);\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[_ngcontent-%COMP%]:hover {\n  background: var(--mj-border-default);\n  border-color: var(--mj-border-default);\n  color: var(--mj-text-primary);\n}\n\n.toggle-system-btn.active[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n.toggle-system-btn.active[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary-hover);\n  border-color: var(--mj-brand-primary-hover);\n}\n\n.toggle-system-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n.modal-close-btn[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: var(--mj-text-secondary);\n  padding: 4px 8px;\n  border-radius: 4px;\n  transition: all 0.2s;\n}\n\n.modal-close-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n.modal-body[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: auto;\n  padding: 20px;\n}\n\n.artifacts-modal[_ngcontent-%COMP%] {\n  width: 700px;\n  max-height: 600px;\n}\n\n.artifacts-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n  gap: 16px;\n}\n\n\n.artifacts-empty-fill[_ngcontent-%COMP%] {\n  grid-column: 1/-1;\n}\n\n.artifact-modal-card[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-surface-card);\n  border: 1.5px solid var(--mj-border-default);\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[_ngcontent-%COMP%] {\n  border-color: var(--mj-brand-primary);\n}\n\n.artifact-modal-card.system-artifact[_ngcontent-%COMP%] {\n  opacity: 0.85;\n  border-color: var(--mj-border-default);\n  border-style: dashed;\n  position: relative;\n}\n\n.artifact-modal-card.system-artifact[_ngcontent-%COMP%]::before {\n  content: \"SYSTEM\";\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  font-size: 9px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n  background: var(--mj-bg-surface-sunken);\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[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-text-muted);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.artifact-card-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px;\n  cursor: pointer;\n}\n\n.artifact-card-header[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.artifact-modal-card[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-shadow-md);\n  transform: translateY(-2px);\n}\n\n.artifact-modal-icon[_ngcontent-%COMP%] {\n  width: 40px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  border-radius: 10px;\n  color: var(--mj-brand-primary);\n  flex-shrink: 0;\n}\n\n.artifact-modal-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 18px;\n}\n\n.artifact-modal-info[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.artifact-modal-title[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 4px;\n}\n\n.artifact-modal-meta[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n}\n\n.artifact-modal-action[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  transition: color 0.2s;\n}\n\n.artifact-modal-card[_ngcontent-%COMP%]:hover   .artifact-modal-action[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.expand-btn[_ngcontent-%COMP%] {\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: var(--mj-text-secondary);\n  cursor: pointer;\n  border-radius: 6px;\n  transition: all 0.2s;\n}\n.expand-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-brand-primary);\n}\n\n.artifact-versions-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  padding: 0 1rem 1rem 1rem;\n  background: var(--mj-bg-surface-sunken);\n}\n\n.artifact-version-item[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n.artifact-version-item[_ngcontent-%COMP%]   .version-badge[_ngcontent-%COMP%] {\n  display: inline-block;\n  padding: 4px 8px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n  font-weight: 600;\n  font-family: monospace;\n  border-radius: 4px;\n}\n.artifact-version-item[_ngcontent-%COMP%]   .version-open-text[_ngcontent-%COMP%] {\n  flex: 1;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n}\n.artifact-version-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  font-size: 12px;\n}\n.artifact-version-item[_ngcontent-%COMP%]:hover   .version-badge[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n.artifact-version-item[_ngcontent-%COMP%]:hover   .version-open-text[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n.artifact-version-item[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.loading-peripheral-content[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px 24px;\n  background: var(--mj-bg-surface-card);\n  border: 2px solid var(--mj-border-default);\n  border-radius: 12px;\n  box-shadow: var(--mj-shadow-md);\n  color: var(--mj-text-secondary);\n  font-size: 14px;\n  font-weight: 500;\n}\n.loading-peripheral-content[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 20px;\n  color: var(--mj-brand-primary);\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n.conversation-loading-state[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n}\n\n.loading-content[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding-top: 20px;\n  gap: 16px;\n  color: var(--mj-text-secondary);\n  font-size: 15px;\n}\n.loading-content[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 32px;\n  color: var(--mj-brand-primary);\n}\n.loading-content[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  font-weight: 500;\n}\n\n\n@media (max-width: 768px) {\n  .chat-header[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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-bar[_ngcontent-%COMP%] {\n    flex: 1;\n  }\n  .chat-title[_ngcontent-%COMP%] {\n    font-size: 15px;\n    font-weight: 700;\n  }\n  \n  .chat-title-crumb.path-middle[_ngcontent-%COMP%] {\n    display: none;\n  }\n  .chat-title-ellipsis[_ngcontent-%COMP%]:not(.collapses-wide) {\n    display: flex;\n  }\n  .project-tag[_ngcontent-%COMP%] {\n    margin-left: 0;\n    font-size: 10px;\n    padding: 3px 8px;\n    height: 24px;\n    display: none; \n  }\n  .test-indicator[_ngcontent-%COMP%] {\n    margin-left: 0;\n    font-size: 10px;\n    padding: 3px 8px;\n    height: 24px;\n  }\n  \n  .chat-actions-buttons[_ngcontent-%COMP%] {\n    order: 2;\n    flex-shrink: 0;\n  }\n  .chat-actions-buttons[_ngcontent-%COMP%]   .action-btn[_ngcontent-%COMP%] {\n    padding: 6px 8px;\n    min-width: auto;\n  }\n  .chat-actions-buttons[_ngcontent-%COMP%]   .action-btn[_ngcontent-%COMP%]   .btn-label[_ngcontent-%COMP%] {\n    display: none;\n  }\n  .chat-actions[_ngcontent-%COMP%] {\n    flex-wrap: nowrap;\n  }\n  .chat-members[_ngcontent-%COMP%], \n   .artifact-indicator[_ngcontent-%COMP%] {\n    padding: 5px 7px;\n    font-size: 13px;\n  }\n  .action-btn[_ngcontent-%COMP%] {\n    padding: 6px 8px;\n    font-size: 12px;\n  }\n  .ambient-agent-indicator[_ngcontent-%COMP%] {\n    font-size: 12px;\n    padding: 4px 8px;\n  }\n  .project-selector-modal[_ngcontent-%COMP%] {\n    width: min(95vw, 600px);\n    height: auto;\n  }\n  .artifacts-modal[_ngcontent-%COMP%] {\n    width: min(95vw, 700px);\n  }\n  .artifacts-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n  .chat-input-container[_ngcontent-%COMP%] {\n    padding: 0 0.75rem 0.75rem 0.75rem;\n  }\n  .scroll-to-bottom-icon[_ngcontent-%COMP%] {\n    bottom: 16px;\n    width: 36px;\n    height: 36px;\n  }\n  \n  .chat-content-area[_ngcontent-%COMP%] {\n    position: relative;\n  }\n  .chat-artifact-pane[_ngcontent-%COMP%] {\n    position: fixed;\n    left: 0;\n    right: 0;\n    top: 56px; \n    bottom: 0;\n    width: 100% !important;\n    z-index: 100;\n    background: var(--mj-bg-surface-card);\n  }\n  .resize-handle[_ngcontent-%COMP%] {\n    display: none;\n  }\n}\n\n@media (max-width: 480px) {\n  .chat-header[_ngcontent-%COMP%] {\n    padding: 6px 8px;\n    gap: 4px;\n  }\n  .chat-title[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 700;\n  }\n  .project-tag[_ngcontent-%COMP%] {\n    font-size: 9px;\n    padding: 2px 6px;\n    height: 20px;\n    display: none;\n  }\n  .test-indicator[_ngcontent-%COMP%] {\n    font-size: 9px;\n    padding: 2px 6px;\n    height: 20px;\n  }\n  .chat-members[_ngcontent-%COMP%], \n   .artifact-indicator[_ngcontent-%COMP%] {\n    padding: 4px 8px;\n    font-size: 11px;\n  }\n  .action-btn[_ngcontent-%COMP%] {\n    padding: 5px 7px;\n    font-size: 11px;\n  }\n  .ambient-agent-indicator[_ngcontent-%COMP%] {\n    font-size: 11px;\n    padding: 3px 6px;\n  }\n  .project-selector-modal[_ngcontent-%COMP%], \n   .artifacts-modal[_ngcontent-%COMP%] {\n    width: 100vw;\n    height: 100vh;\n    border-radius: 0;\n  }\n  .chat-input-container[_ngcontent-%COMP%] {\n    padding: 0 0.5rem 0.5rem 0.5rem;\n  }\n  .scroll-to-bottom-icon[_ngcontent-%COMP%] {\n    bottom: 12px;\n    width: 32px;\n    height: 32px;\n  }\n  .scroll-to-bottom-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 14px;\n  }\n}\n\n\n.artifact-picker-overlay[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: var(--mj-bg-overlay);\n  z-index: 999;\n}\n\n.artifact-picker-panel[_ngcontent-%COMP%] {\n  position: fixed;\n  right: 0;\n  top: 0;\n  width: 360px;\n  height: 100%;\n  background: var(--mj-bg-surface);\n  border-left: 1px solid var(--mj-border-default);\n  z-index: 1000;\n  display: flex;\n  flex-direction: column;\n  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.1);\n  animation: _ngcontent-%COMP%_slideInRight 0.2s ease-out;\n}\n\n@keyframes _ngcontent-%COMP%_slideInRight {\n  from { transform: translateX(100%); }\n  to { transform: translateX(0); }\n}\n\n.artifact-picker-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.artifact-picker-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.artifact-picker-close[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 4px 8px;\n  color: var(--mj-text-muted);\n  border-radius: 4px;\n}\n\n.artifact-picker-close[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n\n.artifact-picker-body[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 12px;\n}\n\n.artifact-picker-empty[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px 20px;\n  text-align: center;\n  color: var(--mj-text-muted);\n  gap: 8px;\n}\n\n.artifact-picker-hint[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-disabled);\n}\n\n.artifact-picker-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.artifact-picker-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 12px;\n  border: 1px solid var(--mj-border-subtle);\n  border-radius: 6px;\n  background: var(--mj-bg-surface-card);\n  cursor: pointer;\n  text-align: left;\n  width: 100%;\n  transition: background 0.15s, border-color 0.15s;\n}\n\n.artifact-picker-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-brand-primary);\n}\n\n.artifact-picker-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 20px;\n  width: 24px;\n  text-align: center;\n  flex-shrink: 0;\n}\n\n.artifact-picker-item[_ngcontent-%COMP%]   i.fa-file-pdf[_ngcontent-%COMP%] { color: var(--mj-status-error); }\n.artifact-picker-item[_ngcontent-%COMP%]   i.fa-file-excel[_ngcontent-%COMP%] { color: var(--mj-status-success); }\n.artifact-picker-item[_ngcontent-%COMP%]   i.fa-file-word[_ngcontent-%COMP%] { color: var(--mj-brand-primary); }\n.artifact-picker-item[_ngcontent-%COMP%]   i.fa-file[_ngcontent-%COMP%] { color: var(--mj-text-muted); }\n\n.artifact-picker-item-info[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.artifact-picker-item-name[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.artifact-picker-item-meta[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n\n\n\n\n.voice-call-pill[_ngcontent-%COMP%] {\n  position: absolute;\n  right: 18px;\n  bottom: 18px;\n  z-index: 49; \n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 9px 16px 9px 13px;\n  border-radius: var(--mj-radius-full, 9999px);\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-elevated, var(--mj-bg-surface));\n  color: var(--mj-text-primary);\n  font-family: inherit;\n  cursor: pointer;\n  box-shadow: 0 8px 24px color-mix(in srgb, var(--mj-brand-primary) 18%, transparent);\n  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;\n}\n.voice-call-pill[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 10px 28px color-mix(in srgb, var(--mj-brand-primary) 28%, transparent);\n  transform: translateY(-1px);\n}\n.voice-call-pill[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: var(--mj-brand-primary);\n}\n.voice-call-pill__pulse[_ngcontent-%COMP%] {\n  width: 9px;\n  height: 9px;\n  border-radius: 50%;\n  background: var(--mj-status-success);\n  flex-shrink: 0;\n  animation: _ngcontent-%COMP%_voice-pill-pulse 1.6s ease-in-out infinite;\n}\n.voice-call-pill__text[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  line-height: 1.25;\n}\n.voice-call-pill__name[_ngcontent-%COMP%] {\n  font-size: 12.5px;\n  font-weight: 700;\n}\n.voice-call-pill__hint[_ngcontent-%COMP%] {\n  font-size: 10.5px;\n  color: var(--mj-text-muted);\n}\n@keyframes _ngcontent-%COMP%_voice-pill-pulse {\n  0%, 100% {\n    box-shadow: 0 0 0 0 color-mix(in srgb, var(--mj-status-success) 45%, transparent);\n  }\n  50% {\n    box-shadow: 0 0 0 5px color-mix(in srgb, var(--mj-status-success) 0%, transparent);\n  }\n}\n\n\n.fork-view-bar[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  padding: var(--mj-space-2) var(--mj-space-4);\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n}\n.fork-composer-hint[_ngcontent-%COMP%] {\n  padding: var(--mj-space-1) var(--mj-space-4) 0;\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n}\n.chat-actions-buttons[_ngcontent-%COMP%]    > .forks-button[_ngcontent-%COMP%]   .forks-count[_ngcontent-%COMP%] {\n  margin-left: var(--mj-space-1);\n  padding: 0 var(--mj-space-2);\n  border-radius: var(--mj-radius-full);\n  background: var(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n  font-size: var(--mj-text-xs);\n  font-weight: 600;\n}\n.chat-actions-buttons[_ngcontent-%COMP%]    > .forks-button.active[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}\n.chat-actions-buttons[_ngcontent-%COMP%]    > .remote-browser-toggle-btn.active[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}\n.remote-browser-url-input[_ngcontent-%COMP%] {\n  width: 220px;\n  max-width: 38vw;\n  height: 28px;\n  padding: 0 10px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  font-size: 12px;\n  font-family: var(--mj-font-family-mono);\n}\n.remote-browser-url-input[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-border-focus);\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ConversationChatAreaComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-conversation-chat-area', template: "<div class=\"chat-area\">\n  <!-- agentPresence slot \u2014 sticky top, anchored with the header. Per Matt's\n       06-10 design: persistent presence indicator (Sid's face + live voice\n       state). Off by default; opt in via [showAgentCharacter]. When a\n       consumer projects an `mjChatSlot=\"agentPresence\"` template, it\n       replaces the default presence component. -->\n  @if (showAgentCharacter) {\n    <div class=\"chat-agent-presence\" [class.chat-agent-presence--prominent]=\"agentCharacterConfig?.voiceStateMode === 'prominent'\">\n      @if (slotTemplate('agentPresence'); as t) {\n        <ng-container *ngTemplateOutlet=\"t; context: {\n          $implicit: agentCharacterConfig,\n          state: agentCharacterConfig?.state ?? 'idle',\n          agentName: agentCharacterConfig?.characterName,\n          avatarUrl: agentCharacterConfig?.avatarUrl,\n          mode: agentCharacterConfig?.voiceStateMode ?? 'subtle'\n        }\"></ng-container>\n      } @else {\n        <mj-chat-agent-presence-default\n          [State]=\"agentCharacterConfig?.state ?? 'idle'\"\n          [AgentName]=\"agentCharacterConfig?.characterName\"\n          [AvatarUrl]=\"agentCharacterConfig?.avatarUrl\"\n          [Mode]=\"agentCharacterConfig?.voiceStateMode ?? 'subtle'\">\n        </mj-chat-agent-presence-default>\n      }\n    </div>\n  }\n\n  <!-- header slot \u2014 replaces the entire chat-header chrome (title, badges,\n       export/share/agent-picker buttons). When projected, the consumer owns\n       the entire header rendering; the default chrome below is bypassed\n       wholesale. Context exposes the minimal IMJChatHeaderComponent shape;\n       consumers needing more app state should bind to chat-area inputs\n       directly via @ViewChild or wrap the whole component. -->\n  @if (slotTemplate('header'); as t) {\n    <ng-container *ngTemplateOutlet=\"t; context: {\n      $implicit: conversation,\n      conversationTitle: conversation?.Name ?? null,\n      sharedBy: sharedByBadge?.display ?? null,\n      artifactCount: artifactCountDisplay,\n      showArtifactIndicator: showArtifactIndicator\n    }\"></ng-container>\n  } @else if (conversation || HasPreConversationHeader) {\n    <!-- Default header \u2014 also renders BEFORE a conversation exists when the\n         embedder has pre-conversation chrome to surface (currently just the\n         mode picker \u2014 agent / share / export / members / artifacts all\n         require a conversation row and stay hidden). Lets embedded surfaces\n         like the Form Builder cockpit show the mode picker above the\n         empty-state on a fresh chat instead of waiting for the first\n         message to round-trip. -->\n    <div class=\"chat-header\" (keydown.escape)=\"OnViewEscape($event)\">\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        @if (conversation) {\n          <ng-container *ngTemplateOutlet=\"titleBar\"></ng-container>\n        }\n        @if (sharedByBadge) {\n          <span class=\"shared-by-badge\" [title]=\"sharedByBadge.fullTooltip\">\n            <i class=\"fas fa-share-nodes\"></i>\n            <span>Shared by {{ sharedByBadge.display }}</span>\n          </span>\n        }\n        @if (conversation?.ProjectID) {\n          <button class=\"project-tag\" (click)=\"openProjectSelector()\" [attr.title]=\"EffectiveReadOnly ? 'Project' : '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      </div>\n      <div class=\"chat-actions chat-actions-buttons\">\n        @if (ForkSummaries.length > 0) {\n          <button mjButton #forksButton Variant=\"flat\" Size=\"sm\" class=\"forks-button\" [class.active]=\"ShowForksPopover\"\n            aria-haspopup=\"dialog\" [attr.aria-expanded]=\"ShowForksPopover\" [attr.aria-controls]=\"ShowForksPopover ? ForksPopoverID : null\"\n            (click)=\"ToggleForksPopover()\" title=\"Forks in this conversation\">\n            <i class=\"fa-solid fa-code-branch\"></i>\n            <span class=\"btn-label\">Forks</span>\n            <span class=\"forks-count\">{{ ForkSummaries.length }}</span>\n          </button>\n        }\n        @if (allowPinning && pinnedMessageCount > 0) {\n          <button class=\"pin-chip\" [class.active]=\"showPinsPanel\" (click)=\"TogglePinsPanel()\" title=\"View pinned messages\">\n            <i class=\"fas fa-thumbtack\"></i>\n            <span class=\"pin-chip-count\">{{ pinnedMessageCount }}</span>\n          </button>\n        }\n        @if (showArtifactIndicator && 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        @if (!overlayMode && showAgentModePicker && ModePickerTargetAgentId && !EffectiveReadOnly) {\n          <!-- Per-agent mode/quality picker (Draft / Standard / High).\n               Targets the agent the next non-mention message will route\n               to. Auto-hides when that agent has fewer than 2 configured\n               presets. Choice persists per-user, per-agent via\n               UserInfoEngine; emits the picked configuration ID up so\n               <mj-message-input> can forward it on the next route.\n               Hidden in overlayMode (the compact chat overlay): the\n               mode dropdown wastes the narrow top-right space there. -->\n          <mj-conversation-mode-picker\n            [AgentID]=\"ModePickerTargetAgentId\"\n            [Disabled]=\"isProcessing\"\n            (PresetChanged)=\"OnAgentModePresetChanged($event)\">\n          </mj-conversation-mode-picker>\n        }\n        @if (showAgentPicker && conversation) {\n          <!-- Per-conversation default-agent pin. When set, non-mention\n               messages route to this agent instead of Sage. Persists to\n               MJConversationEntity.DefaultAgentID. Hidden when no\n               conversation is loaded or when the embedder disables it. -->\n          <mj-conversation-agent-picker\n            [Conversation]=\"conversation\"\n            [CurrentUser]=\"currentUser\"\n            [AllowedAgentIDs]=\"AllowedAgentIDs\"\n            [Disabled]=\"EffectiveReadOnly\">\n          </mj-conversation-agent-picker>\n        }\n        @if (showExportButton) {\n          <button mjButton variant=\"flat\" size=\"sm\" (click)=\"exportConversation()\" [title]=\"exportButtonLabel + ' conversation'\">\n            <i [class]=\"exportButtonIcon\"></i>\n            <span class=\"btn-label\">{{ exportButtonLabel }}</span>\n          </button>\n        }\n        @if (showShareButton && canShareConversation) {\n          <button mjButton variant=\"flat\" size=\"sm\"\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        }\n        <!-- headerActions slot \u2014 ADDITIVE host buttons rendered after the stock\n             actions (unlike the `header` slot, which replaces the whole header\n             and therefore never reaches this branch). For visual parity,\n             projected buttons should use mjButton variant=\"flat\" size=\"sm\". -->\n        @if (slotTemplate('headerActions'); as t) {\n          <ng-container *ngTemplateOutlet=\"t; context: {\n            $implicit: conversation,\n            conversationId: conversationId,\n            isProcessing: isProcessing\n          }\"></ng-container>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Header title. Main: the conversation name. A fork: the path, the conversation and each parent fork\n       (each opens its view; the parent is the way back), then the open fork with its kind icon. Past three\n       entries, and on narrow screens, the middle crumbs collapse into an ellipsis that opens the forks list.\n       The current name can be renamed in place. -->\n  <ng-template #titleBar>\n    <div class=\"chat-title-bar\">\n      @if (OpenView.Kind === 'Main') {\n        <ng-container *ngTemplateOutlet=\"titleName\"></ng-container>\n      } @else {\n        <nav class=\"chat-title-path\" aria-label=\"Breadcrumb\">\n          <ol class=\"chat-title-crumbs\">\n            @for (parent of HeaderPath.Parents; track $index) {\n              @if ($index === 1) {\n                <li class=\"chat-title-crumb chat-title-ellipsis\" [class.collapses-wide]=\"HeaderPath.CollapsesWide\">\n                  <button mjButton Variant=\"flat\" Size=\"sm\" type=\"button\" (click)=\"ShowWholePath()\" aria-label=\"Show the whole path\" title=\"Show the whole path\">\u2026</button>\n                  <i class=\"fa-solid fa-chevron-right chat-title-sep\" aria-hidden=\"true\"></i>\n                </li>\n              }\n              <li class=\"chat-title-crumb\" [class.path-middle]=\"parent.IsMiddle\" [class.collapsed-wide]=\"parent.CollapsedWide\">\n                <button mjButton Variant=\"flat\" Size=\"sm\" type=\"button\" (click)=\"OpenCrumb(parent.Crumb)\" [title]=\"'Back to ' + parent.Crumb.Label\">\n                  <span class=\"chat-title-crumb-label\">{{ parent.Crumb.Label }}</span>\n                </button>\n                <i class=\"fa-solid fa-chevron-right chat-title-sep\" aria-hidden=\"true\"></i>\n              </li>\n            }\n            <li class=\"chat-title-current\" aria-current=\"page\">\n              <i [class]=\"'chat-title-kind ' + OpenViewIcon\" [attr.data-kind]=\"OpenViewKind\" aria-hidden=\"true\"></i>\n              <ng-container *ngTemplateOutlet=\"titleName\"></ng-container>\n            </li>\n          </ol>\n        </nav>\n      }\n    </div>\n  </ng-template>\n\n  <!-- The current name and its rename button; the inline field while renaming -->\n  <ng-template #titleName>\n    @if (IsRenamingTitle) {\n      <input\n        #titleNameInput\n        type=\"text\"\n        class=\"chat-title-input\"\n        maxlength=\"255\"\n        [attr.aria-label]=\"TitleRenameLabel\"\n        [(ngModel)]=\"TitleRenameText\"\n        (keydown.enter)=\"$event.preventDefault(); SaveTitleRename(true)\"\n        (keydown.escape)=\"$event.preventDefault(); $event.stopPropagation(); CancelTitleRename()\"\n        (blur)=\"SaveTitleRename()\" />\n    } @else {\n      <h2 class=\"chat-title\" [title]=\"HeaderTitle\">{{ HeaderTitle }}</h2>\n      @if (CanRenameTitle) {\n        <button mjButton #titleRenameButton Variant=\"icon\" Size=\"sm\" type=\"button\" class=\"chat-title-rename\" (click)=\"StartTitleRename()\" [attr.aria-label]=\"TitleRenameLabel\" [title]=\"TitleRenameLabel\">\n          <i class=\"fa-solid fa-pen\" aria-hidden=\"true\"></i>\n        </button>\n      }\n    }\n  </ng-template>\n\n  <!-- Messages and Artifact Split Layout \u2014 restructures into [stage | rail]\n       when isDemonstrationActive (per Matt's 06-10 design). The .demonstration-mode\n       class drives the CSS Grid switch; the stage container renders only when the\n       slot is projected AND the host opts in via [showDemonstrationSurface]. -->\n  <div class=\"chat-content-area\" [class.demonstration-mode]=\"isDemonstrationActive\">\n    <!-- demonstrationSurface stage \u2014 takes the main pane; messages shrink to\n         a side rail (or move below on mobile). Off unless both\n         [showDemonstrationSurface] is true AND a slot template is projected. -->\n    @if (isDemonstrationActive) {\n      <div class=\"chat-demonstration-stage\">\n        <ng-container *ngTemplateOutlet=\"slotTemplate('demonstrationSurface'); context: {\n          $implicit: demonstrationSurfaceContent,\n          content: demonstrationSurfaceContent,\n          visible: showDemonstrationSurface\n        }\"></ng-container>\n      </div>\n    }\n\n    <!-- Messages Pane -->\n    <div class=\"chat-messages-pane\"\n      [class.full-width]=\"!showArtifactPanel && !SelectedTaskGraphPanel\"\n      [class.hidden]=\"isArtifactPaneMaximized\">\n      @if (isLoadingConversation) {\n        <!-- Loading State - checked FIRST to prevent empty state flash. The branch\n             always short-circuits the panes below; showLoadingState only controls\n             whether the built-in spinner renders (hosts with their own loading\n             chrome set it false and get a blank pane instead). -->\n        @if (showLoadingState) {\n          <div class=\"conversation-loading-state\">\n            <mj-loading text=\"Loading conversation...\" size=\"large\"></mj-loading>\n          </div>\n        }\n      } @else if ((isNewConversation || !conversationId) && !suppressNewConversationEmptyState) {\n        <!-- emptyState slot \u2014 when a consumer projects mjChatSlot=\"emptyState\",\n             they take over the entire empty-state region (including any send\n             affordance \u2014 the slot interface doesn't include a sendMessage\n             output, so consumers handle send via their own input). When no\n             slot is projected, the rich built-in <mj-conversation-empty-state>\n             renders with its own greeting, prompt chips, and message input.\n             emptyStateConfig (when supplied) takes precedence over the legacy\n             [emptyStateGreeting] string for backwards compatibility. -->\n        @if (ReadOnly) {\n          <div class=\"read-only-banner\" role=\"status\">\n            <i class=\"fas fa-eye\"></i>\n            <span>{{ ReadOnlyMessage || 'You have view-only access to this conversation.' }}</span>\n          </div>\n        } @else if (slotTemplate('emptyState'); as t) {\n          <ng-container *ngTemplateOutlet=\"t; context: {\n            $implicit: emptyStateConfig,\n            greeting: emptyStateConfig?.greeting ?? emptyStateGreeting,\n            subtext: emptyStateConfig?.subtext,\n            suggestedPrompts: emptyStateConfig?.suggestedPrompts ?? []\n          }\"></ng-container>\n        } @else {\n          <mj-conversation-empty-state\n            [currentUser]=\"currentUser\"\n            [initialDraft]=\"GetInitialDraftFor(null)\"\n            (initialDraftApplied)=\"OnComposerDraftApplied()\"\n            (DraftStateChanged)=\"OnDraftStateChanged(null, $event)\"\n            (ComposerBlurred)=\"OnComposerBlurred()\"\n            [disabled]=\"isProcessing\"\n            [showSidebarToggle]=\"showSidebarToggle\"\n            [overlayMode]=\"overlayMode\"\n            [greeting]=\"emptyStateConfig?.greeting ?? emptyStateGreeting\"\n            [showSuggestedPrompts]=\"showSuggestedPrompts\"\n            [enableAttachments]=\"enableAttachments && allowAttachments\"\n            [enableMentions]=\"allowMentions\"\n            [enableAgentMentions]=\"allowAgentMentions\"\n            [enableEntityMentions]=\"allowEntityMentions\"\n            [enableSkillCommands]=\"allowSkillCommands\"\n            [AllowedAgentIDs]=\"AllowedAgentIDs\"\n            [MentionPeople]=\"MentionPeople\"\n            [ComposerExtraTemplate]=\"slotTemplate('composerExtra')\"\n            [maxAttachments]=\"maxAttachments\"\n            [maxAttachmentSizeBytes]=\"maxAttachmentSizeBytes\"\n            [acceptedFileTypes]=\"acceptedFileTypes\"\n            (sidebarToggleClicked)=\"sidebarToggleClicked.emit()\"\n            (messageSent)=\"onEmptyStateMessageSent($event)\">\n          </mj-conversation-empty-state>\n        }\n      } @else if ((isNewConversation || !conversationId) && suppressNewConversationEmptyState) {\n        <!-- Pre-conversation normal-view: empty message list + emptyStateMode input.\n             Used when host (e.g. Form Builder cockpit) wants the header + mode picker\n             visible on first open instead of the centered welcome card. First send\n             routes through onEmptyStateMessageSent which creates the conversation. -->\n        <div class=\"chat-messages-wrapper\">\n          <div class=\"chat-messages-container\"></div>\n          <div class=\"chat-input-container\">\n            @if (ReadOnly) {\n              <div class=\"read-only-banner\" role=\"status\">\n                <i class=\"fas fa-eye\"></i>\n                <span>{{ ReadOnlyMessage || 'You have view-only access to this conversation.' }}</span>\n              </div>\n            } @else {\n              <!-- composerExtra slot \u2014 host UI directly above the composer (IMJChatComposerExtraContext). -->\n              @if (slotTemplate('composerExtra'); as t) {\n                <div class=\"chat-composer-extra\">\n                  <ng-container *ngTemplateOutlet=\"t; context: {\n                    $implicit: conversation,\n                    ConversationId: conversationId,\n                    IsProcessing: isProcessing\n                  }\"></ng-container>\n                </div>\n              }\n              <div class=\"message-input-container-wrapper\">\n                <mj-message-input\n                  #emptyStateInput\n                  [emptyStateMode]=\"true\"\n                  [initialDraft]=\"GetInitialDraftFor(null)\"\n                  (initialDraftApplied)=\"OnComposerDraftApplied()\"\n                  (DraftStateChanged)=\"OnDraftStateChanged(null, $event)\"\n                  (ComposerBlurred)=\"OnComposerBlurred()\"\n                  [currentUser]=\"currentUser\"\n                  [disabled]=\"isProcessing\"\n                  [ReadOnly]=\"EffectiveReadOnly\"\n                  [appContext]=\"appContext\"\n                  [applicationId]=\"applicationId\"\n                  [defaultAgentId]=\"defaultAgentId\"\n                  [enableAttachments]=\"enableAttachments && allowAttachments\"\n                  [enableMentions]=\"allowMentions\"\n                  [enableAgentMentions]=\"allowAgentMentions\"\n                  [enableEntityMentions]=\"allowEntityMentions\"\n                  [enableSkillCommands]=\"allowSkillCommands\"\n                  [enablePlanMode]=\"allowPlanMode\"\n                  [enableRealtime]=\"allowRealtime\"\n                  [AllowedAgentIDs]=\"AllowedAgentIDs\"\n                  [MentionPeople]=\"MentionPeople\"\n                  [maxAttachments]=\"maxAttachments\"\n                  [maxAttachmentSizeBytes]=\"maxAttachmentSizeBytes\"\n                  [acceptedFileTypes]=\"acceptedFileTypes\"\n                  (emptyStateSubmit)=\"onEmptyStateMessageSent($event)\">\n                </mj-message-input>\n              </div>\n            }\n          </div>\n        </div>\n      } @else {\n        <!-- Normal Message View -->\n        <div class=\"chat-messages-wrapper\">\n          @if (OpenView.Kind !== 'Main' && slotTemplate('header')) {\n            <!-- A host header replaces the default one, so the fork title shows above the transcript. -->\n            <div class=\"fork-view-bar\" role=\"region\" aria-label=\"Fork\" (keydown.escape)=\"OnViewEscape($event)\">\n              <ng-container *ngTemplateOutlet=\"titleBar\"></ng-container>\n            </div>\n          }\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()\" (keydown.escape)=\"OnViewEscape($event)\">\n            <mj-conversation-message-list\n              [showEmptyFill]=\"showEmptyFill\"\n              [showDateNavigation]=\"showDateNavigation\"\n              [showAgentRunDetails]=\"showAgentRunDetails\"\n              [showReactions]=\"showReactions\"\n              [showMessageRating]=\"showMessageRating\"\n              [allowPinning]=\"allowPinning && !EffectiveReadOnly\"\n              [allowMessageEdit]=\"allowMessageEdit && !EffectiveReadOnly\"\n              [allowMessageDelete]=\"allowMessageDelete && !EffectiveReadOnly\"\n              [ReadOnly]=\"EffectiveReadOnly\"\n              [AllowStopRun]=\"AllowStopRun\"\n              [InFlightCount]=\"InFlightCount\"\n              [assistantDisplayName]=\"assistantDisplayName\"\n              [assistantAvatarUrl]=\"assistantAvatarUrl\"\n              [messages]=\"DisplayMessages\"\n              [HasMoreAbove]=\"ListHasMoreAbove\"\n              [IsLoadingOlder]=\"isLoadingOlderMessages\"\n              [ScrollRoot]=\"messageScrollRoot\"\n              (OlderRequested)=\"onOlderMessagesRequested()\"\n              (DateJumpRequested)=\"onDateJumpRequested($event)\"\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              [messageRendererTemplate]=\"slotTemplate('messageRenderer')\"\n              [messageExtraTemplate]=\"slotTemplate('messageExtra')\"\n              [sessionMetaMap]=\"realtimeSessionMetaMap\"\n              [ForkChipMap]=\"ForkChipMap\"\n              [ForkLayout]=\"ForkLayout\"\n              [CanFork]=\"CanFork\"\n              [InPlaceTurn]=\"InPlaceTurn\"\n              (ForkOpenRequested)=\"OnForkOpenRequested($event)\"\n              (EditResendRequested)=\"OnEditResendRequested($event)\"\n              (RegenerateRequested)=\"OnRegenerateRequested($event)\"\n              (ResendInPlaceRequested)=\"OnResendInPlaceRequested($event)\"\n              (ForkRequested)=\"OnForkRequested($event)\"\n              (realtimeSessionOpenRequested)=\"OpenRealtimeSessionReview($event)\"\n              (deleteMessage)=\"onDeleteMessage($event)\"\n              (BeforeStopClicked)=\"BeforeStopClicked.emit($event)\"\n              (StopMessage)=\"OnStopMessage($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              (diagnosticRequested)=\"onDiagnosticRequested($event)\"\n              (LivenessCheckRequested)=\"OnLivenessCheckRequested($event)\"\n              (messagePinToggled)=\"onMessagePinToggled($event)\"\n              (beforeResponseFormSubmitted)=\"beforeResponseFormSubmitted.emit($event)\"\n              (afterResponseFormSubmitted)=\"afterResponseFormSubmitted.emit($event)\"\n              (TaskGraphPanelRequested)=\"OnTaskGraphPanelRequested($event)\"\n              (ScrollToMessageRequested)=\"OnJumpToMessage($event)\">\n            </mj-conversation-message-list>\n\n            <!-- Scroll to Bottom Icon (positioned within scroll container for proper centering) -->\n            @if (showScrollToBottomIcon && DisplayMessages.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 if (ReadOnly) {\n              <div class=\"read-only-banner\" role=\"status\">\n                <i class=\"fas fa-eye\"></i>\n                <span>{{ ReadOnlyMessage || 'You have view-only access to this conversation.' }}</span>\n              </div>\n            } @else {\n              @if (isReadOnlyView) {\n                <div class=\"read-only-banner\" role=\"status\">\n                  <i class=\"fas fa-eye\"></i>\n                  <span>You have view-only access to this conversation.</span>\n                </div>\n              }\n              <!-- composerExtra slot \u2014 host UI directly above the composer (IMJChatComposerExtraContext). -->\n              @if (slotTemplate('composerExtra'); as t) {\n                <div class=\"chat-composer-extra\">\n                  <ng-container *ngTemplateOutlet=\"t; context: {\n                    $implicit: conversation,\n                    ConversationId: conversationId,\n                    IsProcessing: isProcessing\n                  }\"></ng-container>\n                </div>\n              }\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                    [initialDraft]=\"GetInitialDraftFor(inputRef.conversationId)\"\n                    (DraftStateChanged)=\"OnDraftStateChanged(inputRef.conversationId, $event)\"\n                    (ComposerBlurred)=\"OnComposerBlurred()\"\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                    [appContext]=\"appContext\"\n                    [applicationId]=\"applicationId\"\n                    [defaultAgentId]=\"defaultAgentId\"\n                    [conversationDefaultAgentId]=\"inputRef.conversationId === conversationId ? (conversation?.DefaultAgentID ?? null) : null\"\n                    [agentConfigurationPresetId]=\"inputRef.conversationId === conversationId ? ActiveAgentConfigurationPresetId : null\"\n                    [AgentReplyMode]=\"AgentReplyMode\"\n                    [AllowedAgentIDs]=\"AllowedAgentIDs\"\n                    [MentionPeople]=\"MentionPeople\"\n                    [AgentHistoryFrom]=\"AgentHistoryFrom\"\n                    [TargetBranchID]=\"TargetBranchIdFor(inputRef.conversationId)\"\n                    [ResolveTargetBranch]=\"inputRef.conversationId === conversationId ? ResolveComposerBranch : null\"\n                    [AgentTurnHandler]=\"AgentTurnHandler\"\n                    [AutoNameConversation]=\"AutoNameConversation\"\n                    [EnableDecisionRouting]=\"EnableDecisionRouting\"\n                    [inProgressMessageIds]=\"inputRef.conversationId === conversationId ? inProgressMessageIds : emptyInProgressIds\"\n                    [disabled]=\"isProcessing || isReadOnlyView\"\n                    [ReadOnly]=\"EffectiveReadOnly\"\n                    [enableAttachments]=\"enableAttachments && allowAttachments\"\n                    [enableMentions]=\"allowMentions\"\n                    [enableAgentMentions]=\"allowAgentMentions\"\n                    [enableEntityMentions]=\"allowEntityMentions\"\n                    [enableSkillCommands]=\"allowSkillCommands\"\n                    [enablePlanMode]=\"allowPlanMode\"\n                    [enableRealtime]=\"allowRealtime && OpenView.Kind !== 'DraftFork'\"\n                    [Placeholder]=\"ComposerPlaceholderFor(inputRef.conversationId)\"\n                    [SendSlotMode]=\"inputRef.conversationId === conversationId ? SendSlotMode : 'send'\"\n                    [StopCount]=\"inputRef.conversationId === conversationId ? StopCount : 0\"\n                    [StopLabel]=\"StopLabel\"\n                    [StatusText]=\"inputRef.conversationId === conversationId ? StatusText : null\"\n                    [StatusElapsed]=\"inputRef.conversationId === conversationId ? StatusElapsed : null\"\n                    (StopClicked)=\"OnComposerStopClicked()\"\n                    [maxAttachments]=\"maxAttachments\"\n                    [maxAttachmentSizeBytes]=\"maxAttachmentSizeBytes\"\n                    [acceptedFileTypes]=\"acceptedFileTypes\"\n                    [initialMessage]=\"shouldDeliverPendingMessageTo(inputRef.conversationId) ? pendingMessage : null\"\n                    [initialAttachments]=\"shouldDeliverPendingMessageTo(inputRef.conversationId) ? pendingAttachments : null\"\n                    (initialMessageAutoSendStarted)=\"onInitialMessageAutoSendStarted($event)\"\n                    (initialMessageAutoSendFailed)=\"onInitialMessageAutoSendFailed($event)\"\n                    (messageSent)=\"onMessageSent($event)\"\n                    (MessageStreamed)=\"OnMessageStreamed($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($event)\"\n                    (intentCheckCompleted)=\"onIntentCheckCompleted($event)\"\n                    (beforeAgentTurn)=\"beforeAgentTurn.emit($event)\"\n                    (afterAgentTurn)=\"afterAgentTurn.emit($event)\"\n                    (uploadStateChanged)=\"onUploadStateChanged($event)\">\n                  </mj-message-input>\n                }\n              </div>\n              @if (ComposerHint) {\n                <div class=\"fork-composer-hint\">{{ ComposerHint }}</div>\n              }\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          [Scope]=\"ArtifactViewerScope\"\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          (analyzeRequested)=\"OnAnalyzeArtifact($event)\"\n          (applyFormRequested)=\"OnApplyFormRequested($event)\">\n        </mj-artifact-viewer-panel>\n      </div>\n    }\n\n    <!-- Task Graph Run Viewer Pane -->\n    @if (SelectedTaskGraphPanel) {\n      @if (!isArtifactPaneMaximized) {\n        <div class=\"resize-handle\" (mousedown)=\"onResizeStart($event)\" (touchstart)=\"onResizeTouchStart($event)\"></div>\n      }\n      <div class=\"chat-artifact-pane chat-task-graph-pane\"\n        [style.width.%]=\"artifactPaneWidth\"\n        [class.maximized]=\"isArtifactPaneMaximized\">\n        <div class=\"task-graph-pane-header\">\n          <div class=\"task-graph-pane-title-group\">\n            <span class=\"task-graph-pane-icon\">\n              <i class=\"fa-solid fa-diagram-project\"></i>\n            </span>\n            <div class=\"task-graph-pane-titles\">\n              <span class=\"task-graph-pane-title\">{{ SelectedTaskGraphPanel.workflowTitle }}</span>\n              <span class=\"task-graph-pane-subtitle\">Interactive Task Graph &amp; Step Inspector</span>\n            </div>\n          </div>\n          <div class=\"task-graph-pane-actions\">\n            <button\n              type=\"button\"\n              class=\"task-graph-pane-save-btn\"\n              [disabled]=\"IsSavingTaskGraphWorkflow || !taskGraphRunView.Spec?.tasks?.length\"\n              (click)=\"OnSaveTaskGraphAsWorkflow(taskGraphRunView.Spec)\"\n              title=\"Save this task graph as a reusable Draft Flow Agent workflow\">\n              <i class=\"fa-solid\" [class.fa-spinner]=\"IsSavingTaskGraphWorkflow\" [class.fa-spin]=\"IsSavingTaskGraphWorkflow\" [class.fa-floppy-disk]=\"!IsSavingTaskGraphWorkflow\"></i>\n              <span>{{ IsSavingTaskGraphWorkflow ? 'Saving\u2026' : 'Save as Workflow' }}</span>\n            </button>\n            <button\n              type=\"button\"\n              class=\"task-graph-pane-btn\"\n              (click)=\"toggleMaximizeArtifactPane()\"\n              [title]=\"isArtifactPaneMaximized ? 'Restore panel size' : 'Maximize panel'\">\n              <i class=\"fa-solid\" [class.fa-compress]=\"isArtifactPaneMaximized\" [class.fa-expand]=\"!isArtifactPaneMaximized\"></i>\n            </button>\n            <button\n              type=\"button\"\n              class=\"task-graph-pane-btn\"\n              (click)=\"OnCloseTaskGraphPanel()\"\n              title=\"Close Task Graph panel\">\n              <i class=\"fa-solid fa-xmark\"></i>\n            </button>\n          </div>\n        </div>\n        <div class=\"task-graph-pane-body\">\n          <mj-task-graph-run-view\n            #taskGraphRunView\n            [ParentTaskID]=\"SelectedTaskGraphPanel.parentTaskId\"\n            [WorkflowName]=\"SelectedTaskGraphPanel.workflowTitle\"\n            [LiveUpdates]=\"true\"\n            [ShowVariables]=\"true\"\n            [Height]=\"'100%'\">\n          </mj-task-graph-run-view>\n        </div>\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\n    <!-- Pinned Messages Panel (overlay) -->\n    @if (allowPinning && showPinsPanel) {\n      <mj-pinned-messages-panel\n        [pinnedMessages]=\"pinnedMessages\"\n        [isLoading]=\"isLoadingPins\"\n        [AllowUnpin]=\"!EffectiveReadOnly\"\n        (closed)=\"showPinsPanel = false\"\n        (jumpRequested)=\"onJumpToMessage($event)\"\n        (unpinRequested)=\"onUnpinFromPanel($event)\">\n      </mj-pinned-messages-panel>\n    }\n\n    @if (ShowForksPopover) {\n      <mj-conversation-forks-popover\n        [PanelID]=\"ForksPopoverID\"\n        [Summaries]=\"ForkSummaries\"\n        [CurrentUserID]=\"CurrentUser.ID\"\n        (ForkSelected)=\"OnForkSelectedFromList($event)\"\n        (Closed)=\"CloseForksPopover()\">\n      </mj-conversation-forks-popover>\n    }\n  </div>\n\n  <!-- Live voice \"call mode\" overlay \u2014 fills this conversation panel in place\n       (header + thread + composer) while a realtime session is active. When the\n       call is MINIMIZED (e.g. a dev link navigated to a record) the overlay HIDES\n       (not destroyed \u2014 its merged session state must survive), the session stays\n       fully live, and a floating \"on call\" pill offers the way back.\n       ALSO hosted in SESSION REVIEW mode (RealtimeReview set, no live call): the\n       overlay renders what went down in a PAST session, with a \"Start live session\"\n       button that resumes it as a new call. -->\n  @if ((RealtimeSession.Active$ | async) || RealtimeReview) {\n    <mj-realtime-session-overlay\n      [AgentName]=\"realtimeOverlayAgentName\"\n      [Hidden]=\"(RealtimeSession.Minimized$ | async) === true\"\n      [CurrentUser]=\"currentUser\"\n      [EnvironmentID]=\"environmentId\"\n      [ReviewData]=\"RealtimeReview\"\n      [AllowStartLive]=\"CanStartVoiceFromReview\"\n      [Chrome]=\"overlayMode ? 'orb' : 'auto'\"\n      [Compact]=\"overlayMode\"\n      [ShowDevLinks]=\"!overlayMode\"\n      [ShowDensityPicker]=\"!overlayMode\"\n      (NavigateRequest)=\"onRealtimeNavigateRequest($event)\"\n      (StartLiveRequested)=\"onReviewStartLive($event)\"\n      (ReviewClosed)=\"onReviewClosed()\">\n    </mj-realtime-session-overlay>\n    @if (RealtimeSession.Minimized$ | async) {\n      <button type=\"button\" class=\"voice-call-pill\" (click)=\"RealtimeSession.SetMinimized(false)\"\n              title=\"Return to the live call\" aria-label=\"Return to the live call\">\n        <span class=\"voice-call-pill__pulse\" aria-hidden=\"true\"></span>\n        <i class=\"fa-solid fa-phone-volume\" aria-hidden=\"true\"></i>\n        <span class=\"voice-call-pill__text\">\n          <span class=\"voice-call-pill__name\">On call \u00B7 {{ RealtimeSession.CurrentAgentName }}</span>\n          <span class=\"voice-call-pill__hint\">Tap to return</span>\n        </span>\n      </button>\n    }\n  }\n</div>\n\n<!-- Export Modal -->\n<!-- [branding] is bound BEFORE [isVisible] deliberately: Angular sets inputs in\n     template order within a change-detection pass, and the modal's isVisible setter\n     reads `branding` to default its \"Include branding\" checkbox on a fresh open. -->\n<mj-export-modal\n  [branding]=\"exportBranding\"\n  [isVisible]=\"showExportModal\"\n  [conversation]=\"conversation || undefined\"\n  [Scope]=\"ExportScope\"\n  [currentUser]=\"currentUser\"\n  (cancelled)=\"onExportModalCancelled()\"\n  (exported)=\"onExportModalComplete()\">\n</mj-export-modal>\n\n<!-- Share Dialog (generic, shared with dashboards) -->\n<mj-resource-share-dialog\n  [Visible]=\"showShareModal\"\n  [Context]=\"shareContext\"\n  [Adapter]=\"shareAdapter\"\n  (Result)=\"onShareDialogResult($event)\">\n</mj-resource-share-dialog>\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          <mj-empty-state\n            class=\"artifacts-empty-fill\"\n            Icon=\"fa-solid fa-cube\"\n            Title=\"No artifacts in this conversation yet\" />\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    [artifactVersionId]=\"collectionPickerVersionId\"\n    [artifactName]=\"collectionPickerArtifactName\"\n    [artifactVersionNumber]=\"collectionPickerVersionNumber\"\n    (completed)=\"onCollectionPickerCompleted($event)\"\n    (cancelled)=\"onCollectionPickerCancelled()\">\n  </mj-artifact-collection-picker-modal>\n}\n\n<!-- Test Feedback Dialog -->\n@if (testFeedbackDialogData) {\n  <mj-test-feedback-dialog\n    [data]=\"testFeedbackDialogData\"\n    [visible]=\"showTestFeedbackDialog\"\n    (closed)=\"onTestFeedbackDialogClosed($event)\">\n  </mj-test-feedback-dialog>\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}\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  /* Positioned context for the in-place realtime \"call mode\" overlay (absolute inset:0) */\n  position: relative;\n}\n\n.chat-header {\n  flex-shrink: 0;\n  padding: 12px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 16px;\n  background: var(--mj-bg-surface-card);\n  z-index: 10;\n  box-shadow: var(--mj-shadow-sm);\n}\n\n/* agentPresence slot \u2014 sticky top, anchored with the header. Per Matt's\n   06-10 placement design: persistent presence indicator above the messages.\n   Renders only when [showAgentCharacter] is true, so existing embeds see no\n   layout change. The prominent variant grows toward a centered presence\n   (per Matt: \"can grow larger toward a centered presence\"). */\n.chat-agent-presence {\n  flex-shrink: 0;\n  padding: 8px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-card);\n  display: flex;\n  align-items: center;\n  z-index: 11;\n}\n\n.chat-agent-presence--prominent {\n  padding: 16px 20px;\n  justify-content: center;\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: color-mix(in srgb, var(--mj-text-primary) 8%, transparent);\n}\n\n.sidebar-toggle-btn:active {\n  background: color-mix(in srgb, var(--mj-text-primary) 12%, transparent);\n}\n\n.sidebar-toggle-btn i {\n  color: var(--mj-text-secondary);\n  font-size: 18px;\n  transition: color 0.15s ease;\n}\n\n.sidebar-toggle-btn:hover i {\n  color: var(--mj-text-primary);\n}\n\n/* Header title: the conversation name in Main; in a fork, the path ending in the open fork */\n.chat-title-bar {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-1);\n  flex: 0 1 auto;\n  min-width: 0;\n}\n\n.chat-title {\n  flex: 0 1 auto;\n  min-width: 0;\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.chat-title-path {\n  min-width: 0;\n}\n\n.chat-title-crumbs {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-1);\n  min-width: 0;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n/* Parent crumbs shrink first, down to 80px each; the current entry keeps 120px before it truncates */\n.chat-title-crumb {\n  display: flex;\n  flex: 0 100 auto;\n  align-items: center;\n  gap: var(--mj-space-1);\n  min-width: 80px;\n}\n\n.chat-title-crumb.chat-title-ellipsis {\n  flex: 0 0 auto;\n  min-width: 0;\n}\n\n.chat-title-crumb > button {\n  min-width: 0;\n  color: var(--mj-text-muted);\n  font-size: var(--mj-text-sm);\n  font-weight: 500;\n}\n\n.chat-title-crumb-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Past three entries the crumbs between the first and the parent collapse into the ellipsis */\n.chat-title-crumb.collapsed-wide,\n.chat-title-ellipsis:not(.collapses-wide) {\n  display: none;\n}\n\n.chat-title-sep {\n  flex-shrink: 0;\n  font-size: 12px;\n  color: var(--mj-border-strong);\n}\n\n.chat-title-current {\n  display: flex;\n  flex: 0 1 auto;\n  align-items: center;\n  gap: var(--mj-space-1);\n  min-width: 120px;\n}\n\n.chat-title-kind {\n  flex-shrink: 0;\n  margin: 0 var(--mj-space-1);\n  color: var(--mj-status-info);\n}\n\n.chat-title-kind[data-kind='Edit'] {\n  color: var(--mj-status-warning);\n}\n\n.chat-title-kind[data-kind='Regenerate'] {\n  color: var(--mj-brand-tertiary);\n}\n\n.chat-title-bar .chat-title-rename {\n  flex-shrink: 0;\n  color: var(--mj-text-muted);\n  opacity: 0.6;\n  transition: opacity 0.15s ease, color 0.15s ease;\n}\n\n.chat-title-bar:hover .chat-title-rename,\n.chat-title-bar .chat-title-rename:focus-visible {\n  color: var(--mj-text-primary);\n  opacity: 1;\n}\n\n.chat-title-input {\n  flex: 0 1 360px;\n  min-width: 120px;\n  padding: var(--mj-space-1) var(--mj-space-2);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  font: inherit;\n  font-size: 16px;\n  font-weight: 600;\n}\n\n.chat-title-input:focus-visible {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-focus-ring);\n}\n\n.shared-by-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 3px 10px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n  color: var(--mj-brand-primary);\n  border-radius: 999px;\n  font-size: 12px;\n  font-weight: 500;\n  flex-shrink: 0;\n  max-width: 240px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.shared-by-badge i {\n  font-size: 10px;\n}\n\n.shared-by-badge span {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.project-tag {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 16px;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  transition: all 0.2s;\n  height: 28px;\n  margin-left: 12px;\n}\n\n.project-tag:hover {\n  background: var(--mj-border-default);\n  border-color: var(--mj-text-muted);\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: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n  border: 1px solid var(--mj-status-warning);\n  border-radius: 16px;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-status-warning);\n  cursor: pointer;\n  transition: all 0.2s;\n  height: 28px;\n  margin-left: 8px;\n}\n\n.test-indicator:hover {\n  background: color-mix(in srgb, var(--mj-status-warning) 20%, var(--mj-bg-surface));\n  border-color: var(--mj-status-warning);\n}\n\n.test-indicator i {\n  font-size: 10px;\n}\n\n/* Pinned messages chip in chat header */\n.pin-chip {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  padding: 5px 10px;\n  background: color-mix(in srgb, var(--mj-status-warning) 12%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-status-warning) 45%, transparent);\n  border-radius: 20px;\n  color: var(--mj-status-warning-text, var(--mj-status-warning));\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s;\n}\n\n.pin-chip i {\n  font-size: 11px;\n}\n\n.pin-chip:hover,\n.pin-chip.active {\n  background: color-mix(in srgb, var(--mj-status-warning) 20%, var(--mj-bg-surface));\n  border-color: var(--mj-status-warning);\n}\n\n.pin-chip-count {\n  font-size: 12px;\n  font-weight: 700;\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 var(--mj-border-default);\n  border-radius: 6px;\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 150ms ease;\n}\n\n.chat-members:hover,\n.artifact-indicator:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\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: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\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: var(--mj-brand-primary);\n}\n\n.ambient-agent-indicator {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  animation: pulse 2s ease-in-out infinite;\n}\n\n.ambient-agent-indicator i {\n  color: var(--mj-brand-primary);\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  align-items: center;\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 var(--mj-border-default);\n  cursor: pointer;\n  border-radius: 6px;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  transition: all 150ms ease;\n}\n\n.action-btn:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n.share-btn.shared {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  border-color: var(--mj-brand-primary-hover);\n  color: var(--mj-brand-primary-hover);\n}\n\n.share-btn.shared:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary-hover);\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: var(--mj-brand-primary);\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: var(--mj-bg-surface-sunken);\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-task-graph-pane {\n  background: var(--mj-bg-surface);\n  border-left: 1px solid var(--mj-border-default);\n}\n\n.task-graph-pane-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  padding: 12px 16px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.task-graph-pane-title-group {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-width: 0;\n}\n\n.task-graph-pane-icon {\n  width: 32px;\n  height: 32px;\n  border-radius: 8px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n  color: var(--mj-brand-primary);\n  font-size: 14px;\n  flex-shrink: 0;\n}\n\n.task-graph-pane-titles {\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n  min-width: 0;\n}\n\n.task-graph-pane-title {\n  font-size: 13.5px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.task-graph-pane-subtitle {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n.task-graph-pane-actions {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex-shrink: 0;\n}\n\n.task-graph-pane-save-btn {\n  height: 30px;\n  padding: 0 10px;\n  border-radius: 6px;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  font-weight: 500;\n  border: 1px solid var(--mj-brand-primary);\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse, #ffffff);\n  cursor: pointer;\n  transition: opacity 0.15s ease, filter 0.15s ease;\n}\n\n.task-graph-pane-save-btn:hover:not(:disabled) {\n  filter: brightness(1.06);\n}\n\n.task-graph-pane-save-btn:disabled {\n  opacity: 0.55;\n  cursor: not-allowed;\n}\n\n.task-graph-pane-btn {\n  width: 30px;\n  height: 30px;\n  border-radius: 6px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid var(--mj-border-subtle);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;\n}\n\n.task-graph-pane-btn:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n  border-color: var(--mj-border-default);\n}\n\n.task-graph-pane-body {\n  flex: 1;\n  width: 100%;\n  min-height: 0;\n  min-width: 0;\n  padding: 12px 16px 16px;\n  box-sizing: border-box;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n}\n\n.task-graph-pane-body > mj-task-graph-run-view {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  width: 100%;\n  min-height: 0;\n  min-width: 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/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   demonstrationSurface layout-mode (Matt's 06-10 placement design)\n   \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   When .chat-content-area gets .demonstration-mode, the layout flips\n   from \"messages pane (+ optional artifact pane)\" to \"stage + side rail\":\n     - stage (.chat-demonstration-stage) \u2014 left, flexible, holds the\n       consumer's projected demonstrationSurface slot template\n     - rail (.chat-messages-pane) \u2014 right, fixed-width 320px, holds the\n       messages list + composer (\"the conversation as a companion rail\")\n   On mobile (\u2264768px) the same two stack vertically (stage above, rail\n   below) per Matt's note about mobile. The rail intentionally keeps the\n   composer inside it \u2014 Matt's design refers to the conversation rail\n   inclusively (messages + composer together), not as separate regions.\n*/\n.chat-demonstration-stage {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n  background: var(--mj-bg-surface);\n  border-right: 1px solid var(--mj-border-default);\n  flex: 1;\n  min-width: 0;\n}\n\n.chat-content-area.demonstration-mode .chat-messages-pane,\n.chat-content-area.demonstration-mode .chat-messages-pane.full-width {\n  flex: 0 0 320px;\n  width: 320px;\n  min-width: 0;\n}\n\n@media (max-width: 768px) {\n  .chat-content-area.demonstration-mode {\n    flex-direction: column;\n  }\n\n  .chat-content-area.demonstration-mode .chat-demonstration-stage {\n    flex: 1 1 60%;\n    border-right: none;\n    border-bottom: 1px solid var(--mj-border-default);\n    height: auto;\n  }\n\n  .chat-content-area.demonstration-mode .chat-messages-pane,\n  .chat-content-area.demonstration-mode .chat-messages-pane.full-width {\n    flex: 1 1 40%;\n    width: 100%;\n    height: auto;\n  }\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: color-mix(in srgb, var(--mj-bg-surface-card) 95%, transparent);\n  border-radius: 12px;\n  box-shadow: var(--mj-shadow-md);\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: var(--mj-bg-surface-card);\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: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  box-shadow: var(--mj-shadow-md);\n  transition: all 0.2s ease;\n  z-index: 100;\n  pointer-events: auto;\n}\n\n.scroll-to-bottom-icon:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-color: var(--mj-brand-primary);\n  transform: translateX(-50%) translateY(-2px);\n  box-shadow: color-mix(in srgb, var(--mj-brand-primary) 20%, transparent) 0 4px 12px;\n}\n\n.scroll-to-bottom-icon i {\n  color: var(--mj-text-secondary);\n  font-size: 16px;\n  transition: color 0.2s;\n}\n\n.scroll-to-bottom-icon:hover i {\n  color: var(--mj-brand-primary);\n}\n\n.chat-input-container {\n  flex-shrink: 0;\n  background: var(--mj-bg-surface-card);\n  padding: 0 1.25rem 1.25rem 1.25rem;\n  overflow: visible;\n}\n\n/* composerExtra slot: host UI directly above the composer. Spacing only; the host styles its content. */\n.chat-composer-extra {\n  margin-bottom: 0.5rem;\n}\n\n.read-only-banner {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin: 0 1.25rem 0.5rem 1.25rem;\n  padding: 8px 12px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n  color: var(--mj-text-secondary);\n  border-radius: 6px;\n  font-size: 12px;\n}\n\n.read-only-banner i {\n  color: var(--mj-brand-primary);\n  font-size: 12px;\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: color-mix(in srgb, var(--mj-bg-surface-card) 50%, transparent);\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: var(--mj-bg-overlay);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n}\n\n.modal-content {\n  background: var(--mj-bg-surface-card);\n  border-radius: 8px;\n  box-shadow: var(--mj-shadow-md);\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 var(--mj-border-default);\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: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  cursor: pointer;\n  color: var(--mj-text-secondary);\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: var(--mj-border-default);\n  border-color: var(--mj-border-default);\n  color: var(--mj-text-primary);\n}\n\n.toggle-system-btn.active {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n.toggle-system-btn.active:hover {\n  background: var(--mj-brand-primary-hover);\n  border-color: var(--mj-brand-primary-hover);\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: var(--mj-text-secondary);\n  padding: 4px 8px;\n  border-radius: 4px;\n  transition: all 0.2s;\n}\n\n.modal-close-btn:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\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 spans the full artifacts grid */\n.artifacts-empty-fill {\n  grid-column: 1/-1;\n}\n\n.artifact-modal-card {\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-surface-card);\n  border: 1.5px solid var(--mj-border-default);\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: var(--mj-brand-primary);\n}\n\n.artifact-modal-card.system-artifact {\n  opacity: 0.85;\n  border-color: var(--mj-border-default);\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: var(--mj-text-muted);\n  background: var(--mj-bg-surface-sunken);\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: var(--mj-text-muted);\n  box-shadow: var(--mj-shadow-md);\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: var(--mj-bg-surface-sunken);\n}\n\n.artifact-modal-card:hover {\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-shadow-md);\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: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  border-radius: 10px;\n  color: var(--mj-brand-primary);\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: var(--mj-text-primary);\n  margin-bottom: 4px;\n}\n\n.artifact-modal-meta {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n}\n\n.artifact-modal-action {\n  color: var(--mj-text-muted);\n  transition: color 0.2s;\n}\n\n.artifact-modal-card:hover .artifact-modal-action {\n  color: var(--mj-brand-primary);\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: var(--mj-text-secondary);\n  cursor: pointer;\n  border-radius: 6px;\n  transition: all 0.2s;\n}\n.expand-btn:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-brand-primary);\n}\n\n.artifact-versions-list {\n  display: flex;\n  flex-direction: column;\n  padding: 0 1rem 1rem 1rem;\n  background: var(--mj-bg-surface-sunken);\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: var(--mj-bg-surface-sunken);\n}\n.artifact-version-item .version-badge {\n  display: inline-block;\n  padding: 4px 8px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n  font-weight: 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: var(--mj-text-secondary);\n}\n.artifact-version-item i {\n  color: var(--mj-text-muted);\n  font-size: 12px;\n}\n.artifact-version-item:hover .version-badge {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n.artifact-version-item:hover .version-open-text {\n  color: var(--mj-brand-primary);\n}\n.artifact-version-item:hover i {\n  color: var(--mj-brand-primary);\n}\n\n.loading-peripheral-content {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px 24px;\n  background: var(--mj-bg-surface-card);\n  border: 2px solid var(--mj-border-default);\n  border-radius: 12px;\n  box-shadow: var(--mj-shadow-md);\n  color: var(--mj-text-secondary);\n  font-size: 14px;\n  font-weight: 500;\n}\n.loading-peripheral-content i {\n  font-size: 20px;\n  color: var(--mj-brand-primary);\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: var(--mj-text-secondary);\n  font-size: 15px;\n}\n.loading-content i {\n  font-size: 32px;\n  color: var(--mj-brand-primary);\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-bar {\n    flex: 1;\n  }\n  .chat-title {\n    font-size: 15px;\n    font-weight: 700;\n  }\n  /* The path keeps the first crumb and the current entry; every middle crumb collapses into the ellipsis */\n  .chat-title-crumb.path-middle {\n    display: none;\n  }\n  .chat-title-ellipsis:not(.collapses-wide) {\n    display: flex;\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: var(--mj-bg-surface-card);\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\n/* Artifact Picker Panel */\n.artifact-picker-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: var(--mj-bg-overlay);\n  z-index: 999;\n}\n\n.artifact-picker-panel {\n  position: fixed;\n  right: 0;\n  top: 0;\n  width: 360px;\n  height: 100%;\n  background: var(--mj-bg-surface);\n  border-left: 1px solid var(--mj-border-default);\n  z-index: 1000;\n  display: flex;\n  flex-direction: column;\n  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.1);\n  animation: slideInRight 0.2s ease-out;\n}\n\n@keyframes slideInRight {\n  from { transform: translateX(100%); }\n  to { transform: translateX(0); }\n}\n\n.artifact-picker-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.artifact-picker-header h3 {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.artifact-picker-close {\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 4px 8px;\n  color: var(--mj-text-muted);\n  border-radius: 4px;\n}\n\n.artifact-picker-close:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n\n.artifact-picker-body {\n  flex: 1;\n  overflow-y: auto;\n  padding: 12px;\n}\n\n.artifact-picker-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px 20px;\n  text-align: center;\n  color: var(--mj-text-muted);\n  gap: 8px;\n}\n\n.artifact-picker-hint {\n  font-size: 12px;\n  color: var(--mj-text-disabled);\n}\n\n.artifact-picker-list {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.artifact-picker-item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 12px;\n  border: 1px solid var(--mj-border-subtle);\n  border-radius: 6px;\n  background: var(--mj-bg-surface-card);\n  cursor: pointer;\n  text-align: left;\n  width: 100%;\n  transition: background 0.15s, border-color 0.15s;\n}\n\n.artifact-picker-item:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-brand-primary);\n}\n\n.artifact-picker-item i {\n  font-size: 20px;\n  width: 24px;\n  text-align: center;\n  flex-shrink: 0;\n}\n\n.artifact-picker-item i.fa-file-pdf { color: var(--mj-status-error); }\n.artifact-picker-item i.fa-file-excel { color: var(--mj-status-success); }\n.artifact-picker-item i.fa-file-word { color: var(--mj-brand-primary); }\n.artifact-picker-item i.fa-file { color: var(--mj-text-muted); }\n\n.artifact-picker-item-info {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.artifact-picker-item-name {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.artifact-picker-item-meta {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n/* ---------- Floating \"on call\" pill (minimized realtime voice session) ----------\n   Shown bottom-right of the chat panel while the live call overlay is minimized\n   (e.g. after a gear-gated dev link navigated to a record). The mic + session stay\n   live; tapping the pill restores the full call overlay. */\n.voice-call-pill {\n  position: absolute;\n  right: 18px;\n  bottom: 18px;\n  z-index: 49; /* just under the full call overlay (z-index 50) */\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 9px 16px 9px 13px;\n  border-radius: var(--mj-radius-full, 9999px);\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-elevated, var(--mj-bg-surface));\n  color: var(--mj-text-primary);\n  font-family: inherit;\n  cursor: pointer;\n  box-shadow: 0 8px 24px color-mix(in srgb, var(--mj-brand-primary) 18%, transparent);\n  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;\n}\n.voice-call-pill:hover {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 10px 28px color-mix(in srgb, var(--mj-brand-primary) 28%, transparent);\n  transform: translateY(-1px);\n}\n.voice-call-pill i {\n  font-size: 14px;\n  color: var(--mj-brand-primary);\n}\n.voice-call-pill__pulse {\n  width: 9px;\n  height: 9px;\n  border-radius: 50%;\n  background: var(--mj-status-success);\n  flex-shrink: 0;\n  animation: voice-pill-pulse 1.6s ease-in-out infinite;\n}\n.voice-call-pill__text {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  line-height: 1.25;\n}\n.voice-call-pill__name {\n  font-size: 12.5px;\n  font-weight: 700;\n}\n.voice-call-pill__hint {\n  font-size: 10.5px;\n  color: var(--mj-text-muted);\n}\n@keyframes voice-pill-pulse {\n  0%, 100% {\n    box-shadow: 0 0 0 0 color-mix(in srgb, var(--mj-status-success) 45%, transparent);\n  }\n  50% {\n    box-shadow: 0 0 0 5px color-mix(in srgb, var(--mj-status-success) 0%, transparent);\n  }\n}\n\n/* The fork title above the transcript, shown only when a host header replaces the default one */\n.fork-view-bar {\n  display: flex;\n  align-items: center;\n  padding: var(--mj-space-2) var(--mj-space-4);\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n}\n.fork-composer-hint {\n  padding: var(--mj-space-1) var(--mj-space-4) 0;\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n}\n.chat-actions-buttons > .forks-button .forks-count {\n  margin-left: var(--mj-space-1);\n  padding: 0 var(--mj-space-2);\n  border-radius: var(--mj-radius-full);\n  background: var(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n  font-size: var(--mj-text-xs);\n  font-weight: 600;\n}\n.chat-actions-buttons > .forks-button.active {\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-conversation-chat-area', template: "<div class=\"chat-area\">\n  <!-- agentPresence slot \u2014 sticky top, anchored with the header. Per Matt's\n       06-10 design: persistent presence indicator (Sid's face + live voice\n       state). Off by default; opt in via [showAgentCharacter]. When a\n       consumer projects an `mjChatSlot=\"agentPresence\"` template, it\n       replaces the default presence component. -->\n  @if (showAgentCharacter) {\n    <div class=\"chat-agent-presence\" [class.chat-agent-presence--prominent]=\"agentCharacterConfig?.voiceStateMode === 'prominent'\">\n      @if (slotTemplate('agentPresence'); as t) {\n        <ng-container *ngTemplateOutlet=\"t; context: {\n          $implicit: agentCharacterConfig,\n          state: agentCharacterConfig?.state ?? 'idle',\n          agentName: agentCharacterConfig?.characterName,\n          avatarUrl: agentCharacterConfig?.avatarUrl,\n          mode: agentCharacterConfig?.voiceStateMode ?? 'subtle'\n        }\"></ng-container>\n      } @else {\n        <mj-chat-agent-presence-default\n          [State]=\"agentCharacterConfig?.state ?? 'idle'\"\n          [AgentName]=\"agentCharacterConfig?.characterName\"\n          [AvatarUrl]=\"agentCharacterConfig?.avatarUrl\"\n          [Mode]=\"agentCharacterConfig?.voiceStateMode ?? 'subtle'\">\n        </mj-chat-agent-presence-default>\n      }\n    </div>\n  }\n\n  <!-- header slot \u2014 replaces the entire chat-header chrome (title, badges,\n       export/share/agent-picker buttons). When projected, the consumer owns\n       the entire header rendering; the default chrome below is bypassed\n       wholesale. Context exposes the minimal IMJChatHeaderComponent shape;\n       consumers needing more app state should bind to chat-area inputs\n       directly via @ViewChild or wrap the whole component. -->\n  @if (slotTemplate('header'); as t) {\n    <ng-container *ngTemplateOutlet=\"t; context: {\n      $implicit: conversation,\n      conversationTitle: conversation?.Name ?? null,\n      sharedBy: sharedByBadge?.display ?? null,\n      artifactCount: artifactCountDisplay,\n      showArtifactIndicator: showArtifactIndicator\n    }\"></ng-container>\n  } @else if (conversation || HasPreConversationHeader) {\n    <!-- Default header \u2014 also renders BEFORE a conversation exists when the\n         embedder has pre-conversation chrome to surface (currently just the\n         mode picker \u2014 agent / share / export / members / artifacts all\n         require a conversation row and stay hidden). Lets embedded surfaces\n         like the Form Builder cockpit show the mode picker above the\n         empty-state on a fresh chat instead of waiting for the first\n         message to round-trip. -->\n    <div class=\"chat-header\" (keydown.escape)=\"OnViewEscape($event)\">\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        @if (conversation) {\n          <ng-container *ngTemplateOutlet=\"titleBar\"></ng-container>\n          @if (CurrentOwnerAgent) {\n            <span class=\"with-chip\" [style.--agent-accent]=\"CurrentOwnerAccentVar\">\n              <span class=\"dot\" aria-hidden=\"true\"></span>\n              <span>with <b>{{ CurrentOwnerAgentName }}</b></span>\n            </span>\n          }\n        }\n        @if (sharedByBadge) {\n          <span class=\"shared-by-badge\" [title]=\"sharedByBadge.fullTooltip\">\n            <i class=\"fas fa-share-nodes\"></i>\n            <span>Shared by {{ sharedByBadge.display }}</span>\n          </span>\n        }\n        @if (conversation?.ProjectID) {\n          <button class=\"project-tag\" (click)=\"openProjectSelector()\" [attr.title]=\"EffectiveReadOnly ? 'Project' : '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      </div>\n      <div class=\"chat-actions chat-actions-buttons\">\n        @if (ForkSummaries.length > 0) {\n          <button mjButton #forksButton Variant=\"flat\" Size=\"sm\" class=\"forks-button\" [class.active]=\"ShowForksPopover\"\n            aria-haspopup=\"dialog\" [attr.aria-expanded]=\"ShowForksPopover\" [attr.aria-controls]=\"ShowForksPopover ? ForksPopoverID : null\"\n            (click)=\"ToggleForksPopover()\" title=\"Forks in this conversation\">\n            <i class=\"fa-solid fa-code-branch\"></i>\n            <span class=\"btn-label\">Forks</span>\n            <span class=\"forks-count\">{{ ForkSummaries.length }}</span>\n          </button>\n        }\n        @if (allowPinning && pinnedMessageCount > 0) {\n          <button class=\"pin-chip\" [class.active]=\"showPinsPanel\" (click)=\"TogglePinsPanel()\" title=\"View pinned messages\">\n            <i class=\"fas fa-thumbtack\"></i>\n            <span class=\"pin-chip-count\">{{ pinnedMessageCount }}</span>\n          </button>\n        }\n        @if (showArtifactIndicator && 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 (AllowRemoteBrowser && conversation) {\n          <button mjButton variant=\"flat\" size=\"sm\"\n            class=\"remote-browser-toggle-btn\"\n            [class.active]=\"ShowRemoteBrowserPanel || IsRemoteBrowserLive\"\n            (click)=\"ToggleRemoteBrowserPanel()\"\n            [title]=\"ShowRemoteBrowserPanel ? 'Hide Browser' : IsRemoteBrowserLive ? 'Show Browser (running)' : 'Open Browser'\">\n            <i class=\"fa-solid fa-globe\"></i>\n            <span class=\"btn-label\">Browser</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        @if (!overlayMode && showAgentModePicker && ModePickerTargetAgentId && !EffectiveReadOnly) {\n          <!-- Per-agent mode/quality picker (Draft / Standard / High).\n               Targets the agent the next non-mention message will route\n               to. Auto-hides when that agent has fewer than 2 configured\n               presets. Choice persists per-user, per-agent via\n               UserInfoEngine; emits the picked configuration ID up so\n               <mj-message-input> can forward it on the next route.\n               Hidden in overlayMode (the compact chat overlay): the\n               mode dropdown wastes the narrow top-right space there. -->\n          <mj-conversation-mode-picker\n            [AgentID]=\"ModePickerTargetAgentId\"\n            [Disabled]=\"isProcessing\"\n            (PresetChanged)=\"OnAgentModePresetChanged($event)\">\n          </mj-conversation-mode-picker>\n        }\n        @if (showAgentPicker && conversation) {\n          <!-- Per-conversation default-agent pin. When set, non-mention\n               messages route to this agent instead of Sage. Persists to\n               MJConversationEntity.DefaultAgentID. Hidden when no\n               conversation is loaded or when the embedder disables it. -->\n          <mj-conversation-agent-picker\n            [Conversation]=\"conversation\"\n            [CurrentUser]=\"currentUser\"\n            [AllowedAgentIDs]=\"AllowedAgentIDs\"\n            [Disabled]=\"EffectiveReadOnly\">\n          </mj-conversation-agent-picker>\n        }\n        @if (showExportButton) {\n          <button mjButton variant=\"flat\" size=\"sm\" (click)=\"exportConversation()\" [title]=\"exportButtonLabel + ' conversation'\">\n            <i [class]=\"exportButtonIcon\"></i>\n            <span class=\"btn-label\">{{ exportButtonLabel }}</span>\n          </button>\n        }\n        @if (showShareButton && canShareConversation) {\n          <button mjButton variant=\"flat\" size=\"sm\"\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        }\n        <!-- headerActions slot \u2014 ADDITIVE host buttons rendered after the stock\n             actions (unlike the `header` slot, which replaces the whole header\n             and therefore never reaches this branch). For visual parity,\n             projected buttons should use mjButton variant=\"flat\" size=\"sm\". -->\n        @if (slotTemplate('headerActions'); as t) {\n          <ng-container *ngTemplateOutlet=\"t; context: {\n            $implicit: conversation,\n            conversationId: conversationId,\n            isProcessing: isProcessing\n          }\"></ng-container>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Header title. Main: the conversation name. A fork: the path, the conversation and each parent fork\n       (each opens its view; the parent is the way back), then the open fork with its kind icon. Past three\n       entries, and on narrow screens, the middle crumbs collapse into an ellipsis that opens the forks list.\n       The current name can be renamed in place. -->\n  <ng-template #titleBar>\n    <div class=\"chat-title-bar\">\n      @if (OpenView.Kind === 'Main') {\n        <ng-container *ngTemplateOutlet=\"titleName\"></ng-container>\n      } @else {\n        <nav class=\"chat-title-path\" aria-label=\"Breadcrumb\">\n          <ol class=\"chat-title-crumbs\">\n            @for (parent of HeaderPath.Parents; track $index) {\n              @if ($index === 1) {\n                <li class=\"chat-title-crumb chat-title-ellipsis\" [class.collapses-wide]=\"HeaderPath.CollapsesWide\">\n                  <button mjButton Variant=\"flat\" Size=\"sm\" type=\"button\" (click)=\"ShowWholePath()\" aria-label=\"Show the whole path\" title=\"Show the whole path\">\u2026</button>\n                  <i class=\"fa-solid fa-chevron-right chat-title-sep\" aria-hidden=\"true\"></i>\n                </li>\n              }\n              <li class=\"chat-title-crumb\" [class.path-middle]=\"parent.IsMiddle\" [class.collapsed-wide]=\"parent.CollapsedWide\">\n                <button mjButton Variant=\"flat\" Size=\"sm\" type=\"button\" (click)=\"OpenCrumb(parent.Crumb)\" [title]=\"'Back to ' + parent.Crumb.Label\">\n                  <span class=\"chat-title-crumb-label\">{{ parent.Crumb.Label }}</span>\n                </button>\n                <i class=\"fa-solid fa-chevron-right chat-title-sep\" aria-hidden=\"true\"></i>\n              </li>\n            }\n            <li class=\"chat-title-current\" aria-current=\"page\">\n              <i [class]=\"'chat-title-kind ' + OpenViewIcon\" [attr.data-kind]=\"OpenViewKind\" aria-hidden=\"true\"></i>\n              <ng-container *ngTemplateOutlet=\"titleName\"></ng-container>\n            </li>\n          </ol>\n        </nav>\n      }\n    </div>\n  </ng-template>\n\n  <!-- The current name and its rename button; the inline field while renaming -->\n  <ng-template #titleName>\n    @if (IsRenamingTitle) {\n      <input\n        #titleNameInput\n        type=\"text\"\n        class=\"chat-title-input\"\n        maxlength=\"255\"\n        [attr.aria-label]=\"TitleRenameLabel\"\n        [(ngModel)]=\"TitleRenameText\"\n        (keydown.enter)=\"$event.preventDefault(); SaveTitleRename(true)\"\n        (keydown.escape)=\"$event.preventDefault(); $event.stopPropagation(); CancelTitleRename()\"\n        (blur)=\"SaveTitleRename()\" />\n    } @else {\n      <h2 class=\"chat-title\" [title]=\"HeaderTitle\">{{ HeaderTitle }}</h2>\n      @if (CanRenameTitle) {\n        <button mjButton #titleRenameButton Variant=\"icon\" Size=\"sm\" type=\"button\" class=\"chat-title-rename\" (click)=\"StartTitleRename()\" [attr.aria-label]=\"TitleRenameLabel\" [title]=\"TitleRenameLabel\">\n          <i class=\"fa-solid fa-pen\" aria-hidden=\"true\"></i>\n        </button>\n      }\n    }\n  </ng-template>\n\n  <!-- Messages and Artifact Split Layout \u2014 restructures into [stage | rail]\n       when isDemonstrationActive (per Matt's 06-10 design). The .demonstration-mode\n       class drives the CSS Grid switch; the stage container renders only when the\n       slot is projected AND the host opts in via [showDemonstrationSurface]. -->\n  <div class=\"chat-content-area\" [class.demonstration-mode]=\"isDemonstrationActive\">\n    <!-- demonstrationSurface stage \u2014 takes the main pane; messages shrink to\n         a side rail (or move below on mobile). Off unless both\n         [showDemonstrationSurface] is true AND a slot template is projected. -->\n    @if (isDemonstrationActive) {\n      <div class=\"chat-demonstration-stage\">\n        <ng-container *ngTemplateOutlet=\"slotTemplate('demonstrationSurface'); context: {\n          $implicit: demonstrationSurfaceContent,\n          content: demonstrationSurfaceContent,\n          visible: showDemonstrationSurface\n        }\"></ng-container>\n      </div>\n    }\n\n    <!-- Messages Pane -->\n    <div class=\"chat-messages-pane\"\n      [class.full-width]=\"!showArtifactPanel && !SelectedTaskGraphPanel && !ShowRemoteBrowserPanel\"\n      [class.hidden]=\"isArtifactPaneMaximized\">\n      @if (isLoadingConversation) {\n        <!-- Loading State - checked FIRST to prevent empty state flash. The branch\n             always short-circuits the panes below; showLoadingState only controls\n             whether the built-in spinner renders (hosts with their own loading\n             chrome set it false and get a blank pane instead). -->\n        @if (showLoadingState) {\n          <div class=\"conversation-loading-state\">\n            <mj-loading text=\"Loading conversation...\" size=\"large\"></mj-loading>\n          </div>\n        }\n      } @else if ((isNewConversation || !conversationId) && !suppressNewConversationEmptyState) {\n        <!-- emptyState slot \u2014 when a consumer projects mjChatSlot=\"emptyState\",\n             they take over the entire empty-state region (including any send\n             affordance \u2014 the slot interface doesn't include a sendMessage\n             output, so consumers handle send via their own input). When no\n             slot is projected, the rich built-in <mj-conversation-empty-state>\n             renders with its own greeting, prompt chips, and message input.\n             emptyStateConfig (when supplied) takes precedence over the legacy\n             [emptyStateGreeting] string for backwards compatibility. -->\n        @if (ReadOnly) {\n          <div class=\"read-only-banner\" role=\"status\">\n            <i class=\"fas fa-eye\"></i>\n            <span>{{ ReadOnlyMessage || 'You have view-only access to this conversation.' }}</span>\n          </div>\n        } @else if (slotTemplate('emptyState'); as t) {\n          <ng-container *ngTemplateOutlet=\"t; context: {\n            $implicit: emptyStateConfig,\n            greeting: emptyStateConfig?.greeting ?? emptyStateGreeting,\n            subtext: emptyStateConfig?.subtext,\n            suggestedPrompts: emptyStateConfig?.suggestedPrompts ?? []\n          }\"></ng-container>\n        } @else {\n          <mj-conversation-empty-state\n            [currentUser]=\"currentUser\"\n            [initialDraft]=\"GetInitialDraftFor(null)\"\n            (initialDraftApplied)=\"OnComposerDraftApplied()\"\n            (DraftStateChanged)=\"OnDraftStateChanged(null, $event)\"\n            (ComposerBlurred)=\"OnComposerBlurred()\"\n            [disabled]=\"isProcessing\"\n            [showSidebarToggle]=\"showSidebarToggle\"\n            [overlayMode]=\"overlayMode\"\n            [greeting]=\"emptyStateConfig?.greeting ?? emptyStateGreeting\"\n            [showSuggestedPrompts]=\"showSuggestedPrompts\"\n            [enableAttachments]=\"enableAttachments && allowAttachments\"\n            [enableMentions]=\"allowMentions\"\n            [enableAgentMentions]=\"allowAgentMentions\"\n            [enableEntityMentions]=\"allowEntityMentions\"\n            [enableSkillCommands]=\"allowSkillCommands\"\n            [AllowedAgentIDs]=\"AllowedAgentIDs\"\n            [MentionPeople]=\"MentionPeople\"\n            [ComposerExtraTemplate]=\"slotTemplate('composerExtra')\"\n            [maxAttachments]=\"maxAttachments\"\n            [maxAttachmentSizeBytes]=\"maxAttachmentSizeBytes\"\n            [acceptedFileTypes]=\"acceptedFileTypes\"\n            (sidebarToggleClicked)=\"sidebarToggleClicked.emit()\"\n            (messageSent)=\"onEmptyStateMessageSent($event)\">\n          </mj-conversation-empty-state>\n        }\n      } @else if ((isNewConversation || !conversationId) && suppressNewConversationEmptyState) {\n        <!-- Pre-conversation normal-view: empty message list + emptyStateMode input.\n             Used when host (e.g. Form Builder cockpit) wants the header + mode picker\n             visible on first open instead of the centered welcome card. First send\n             routes through onEmptyStateMessageSent which creates the conversation. -->\n        <div class=\"chat-messages-wrapper\">\n          <div class=\"chat-messages-container\"></div>\n          <div class=\"chat-input-container\">\n            @if (ReadOnly) {\n              <div class=\"read-only-banner\" role=\"status\">\n                <i class=\"fas fa-eye\"></i>\n                <span>{{ ReadOnlyMessage || 'You have view-only access to this conversation.' }}</span>\n              </div>\n            } @else {\n              <!-- composerExtra slot \u2014 host UI directly above the composer (IMJChatComposerExtraContext). -->\n              @if (slotTemplate('composerExtra'); as t) {\n                <div class=\"chat-composer-extra\">\n                  <ng-container *ngTemplateOutlet=\"t; context: {\n                    $implicit: conversation,\n                    ConversationId: conversationId,\n                    IsProcessing: isProcessing\n                  }\"></ng-container>\n                </div>\n              }\n              <div class=\"message-input-container-wrapper\">\n                <mj-message-input\n                  #emptyStateInput\n                  [emptyStateMode]=\"true\"\n                  [initialDraft]=\"GetInitialDraftFor(null)\"\n                  (initialDraftApplied)=\"OnComposerDraftApplied()\"\n                  (DraftStateChanged)=\"OnDraftStateChanged(null, $event)\"\n                  (ComposerBlurred)=\"OnComposerBlurred()\"\n                  [currentUser]=\"currentUser\"\n                  [disabled]=\"isProcessing\"\n                  [ReadOnly]=\"EffectiveReadOnly\"\n                  [appContext]=\"appContext\"\n                  [applicationId]=\"applicationId\"\n                  [defaultAgentId]=\"defaultAgentId\"\n                  [enableAttachments]=\"enableAttachments && allowAttachments\"\n                  [enableMentions]=\"allowMentions\"\n                  [enableAgentMentions]=\"allowAgentMentions\"\n                  [enableEntityMentions]=\"allowEntityMentions\"\n                  [enableSkillCommands]=\"allowSkillCommands\"\n                  [enablePlanMode]=\"allowPlanMode\"\n                  [enableRealtime]=\"allowRealtime\"\n                  [AllowedAgentIDs]=\"AllowedAgentIDs\"\n                  [MentionPeople]=\"MentionPeople\"\n                  [maxAttachments]=\"maxAttachments\"\n                  [maxAttachmentSizeBytes]=\"maxAttachmentSizeBytes\"\n                  [acceptedFileTypes]=\"acceptedFileTypes\"\n                  (emptyStateSubmit)=\"onEmptyStateMessageSent($event)\">\n                </mj-message-input>\n              </div>\n            }\n          </div>\n        </div>\n      } @else {\n        <!-- Normal Message View -->\n        <div class=\"chat-messages-wrapper\">\n          @if (OpenView.Kind !== 'Main' && slotTemplate('header')) {\n            <!-- A host header replaces the default one, so the fork title shows above the transcript. -->\n            <div class=\"fork-view-bar\" role=\"region\" aria-label=\"Fork\" (keydown.escape)=\"OnViewEscape($event)\">\n              <ng-container *ngTemplateOutlet=\"titleBar\"></ng-container>\n            </div>\n          }\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()\" (keydown.escape)=\"OnViewEscape($event)\">\n            <mj-conversation-message-list\n              [showEmptyFill]=\"showEmptyFill\"\n              [showDateNavigation]=\"showDateNavigation\"\n              [showAgentRunDetails]=\"showAgentRunDetails\"\n              [showReactions]=\"showReactions\"\n              [showMessageRating]=\"showMessageRating\"\n              [allowPinning]=\"allowPinning && !EffectiveReadOnly\"\n              [allowMessageEdit]=\"allowMessageEdit && !EffectiveReadOnly\"\n              [allowMessageDelete]=\"allowMessageDelete && !EffectiveReadOnly\"\n              [ReadOnly]=\"EffectiveReadOnly\"\n              [AllowStopRun]=\"AllowStopRun\"\n              [InFlightCount]=\"InFlightCount\"\n              [assistantDisplayName]=\"assistantDisplayName\"\n              [assistantAvatarUrl]=\"assistantAvatarUrl\"\n              [messages]=\"DisplayMessages\"\n              [HasMoreAbove]=\"ListHasMoreAbove\"\n              [IsLoadingOlder]=\"isLoadingOlderMessages\"\n              [ScrollRoot]=\"messageScrollRoot\"\n              (OlderRequested)=\"onOlderMessagesRequested()\"\n              (DateJumpRequested)=\"onDateJumpRequested($event)\"\n              [conversation]=\"conversation\"\n              [currentUser]=\"currentUser\"\n              [isProcessing]=\"isProcessing\"\n              [artifactMap]=\"effectiveArtifactsMap\"\n              [agentRunMap]=\"agentRunsByDetailId\"\n              [HandoffMap]=\"HandoffsByDetailId\"\n              [ratingsMap]=\"ratingsByDetailId\"\n              [userAvatarMap]=\"userAvatarMap\"\n              [attachmentsMap]=\"attachmentsByDetailId\"\n              [messageRendererTemplate]=\"slotTemplate('messageRenderer')\"\n              [messageExtraTemplate]=\"slotTemplate('messageExtra')\"\n              [sessionMetaMap]=\"realtimeSessionMetaMap\"\n              [ForkChipMap]=\"ForkChipMap\"\n              [ForkLayout]=\"ForkLayout\"\n              [CanFork]=\"CanFork\"\n              [InPlaceTurn]=\"InPlaceTurn\"\n              (ForkOpenRequested)=\"OnForkOpenRequested($event)\"\n              (EditResendRequested)=\"OnEditResendRequested($event)\"\n              (RegenerateRequested)=\"OnRegenerateRequested($event)\"\n              (ResendInPlaceRequested)=\"OnResendInPlaceRequested($event)\"\n              (ForkRequested)=\"OnForkRequested($event)\"\n              (realtimeSessionOpenRequested)=\"OpenRealtimeSessionReview($event)\"\n              (deleteMessage)=\"onDeleteMessage($event)\"\n              (BeforeStopClicked)=\"BeforeStopClicked.emit($event)\"\n              (StopMessage)=\"OnStopMessage($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              (diagnosticRequested)=\"onDiagnosticRequested($event)\"\n              (LivenessCheckRequested)=\"OnLivenessCheckRequested($event)\"\n              (messagePinToggled)=\"onMessagePinToggled($event)\"\n              (beforeResponseFormSubmitted)=\"beforeResponseFormSubmitted.emit($event)\"\n              (afterResponseFormSubmitted)=\"afterResponseFormSubmitted.emit($event)\"\n              (TaskGraphPanelRequested)=\"OnTaskGraphPanelRequested($event)\"\n              (ScrollToMessageRequested)=\"OnJumpToMessage($event)\">\n            </mj-conversation-message-list>\n\n            <!-- Scroll to Bottom Icon (positioned within scroll container for proper centering) -->\n            @if (showScrollToBottomIcon && DisplayMessages.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 if (ReadOnly) {\n              <div class=\"read-only-banner\" role=\"status\">\n                <i class=\"fas fa-eye\"></i>\n                <span>{{ ReadOnlyMessage || 'You have view-only access to this conversation.' }}</span>\n              </div>\n            } @else {\n              @if (isReadOnlyView) {\n                <div class=\"read-only-banner\" role=\"status\">\n                  <i class=\"fas fa-eye\"></i>\n                  <span>You have view-only access to this conversation.</span>\n                </div>\n              }\n              <!-- composerExtra slot \u2014 host UI directly above the composer (IMJChatComposerExtraContext). -->\n              @if (slotTemplate('composerExtra'); as t) {\n                <div class=\"chat-composer-extra\">\n                  <ng-container *ngTemplateOutlet=\"t; context: {\n                    $implicit: conversation,\n                    ConversationId: conversationId,\n                    IsProcessing: isProcessing\n                  }\"></ng-container>\n                </div>\n              }\n              <!-- Input Component - Multiple instances cached, only one visible -->\n              <div class=\"message-input-container-wrapper\">\n                @for (inputRef of getCachedInputs(); track NormalizeCachedInputId(inputRef.conversationId)) {\n                  <mj-message-input\n                    #messageInput\n                    [hidden]=\"inputRef.conversationId !== conversationId\"\n                    [initialDraft]=\"GetInitialDraftFor(inputRef.conversationId)\"\n                    (DraftStateChanged)=\"OnDraftStateChanged(inputRef.conversationId, $event)\"\n                    (ComposerBlurred)=\"OnComposerBlurred()\"\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                    [appContext]=\"EffectiveAppContext\"\n                    [applicationId]=\"applicationId\"\n                    [defaultAgentId]=\"defaultAgentId\"\n                    [conversationDefaultAgentId]=\"inputRef.conversationId === conversationId ? (conversation?.DefaultAgentID ?? null) : null\"\n                    [agentConfigurationPresetId]=\"inputRef.conversationId === conversationId ? ActiveAgentConfigurationPresetId : null\"\n                    [AgentReplyMode]=\"AgentReplyMode\"\n                    [AllowedAgentIDs]=\"AllowedAgentIDs\"\n                    [MentionPeople]=\"MentionPeople\"\n                    [AgentHistoryFrom]=\"AgentHistoryFrom\"\n                    [TargetBranchID]=\"TargetBranchIdFor(inputRef.conversationId)\"\n                    [ResolveTargetBranch]=\"inputRef.conversationId === conversationId ? ResolveComposerBranch : null\"\n                    [AgentTurnHandler]=\"AgentTurnHandler\"\n                    [AutoNameConversation]=\"AutoNameConversation\"\n                    [EnableDecisionRouting]=\"EnableDecisionRouting\"\n                    [inProgressMessageIds]=\"inputRef.conversationId === conversationId ? inProgressMessageIds : emptyInProgressIds\"\n                    [disabled]=\"isProcessing || isReadOnlyView\"\n                    [ReadOnly]=\"EffectiveReadOnly\"\n                    [enableAttachments]=\"enableAttachments && allowAttachments\"\n                    [enableMentions]=\"allowMentions\"\n                    [enableAgentMentions]=\"allowAgentMentions\"\n                    [enableEntityMentions]=\"allowEntityMentions\"\n                    [enableSkillCommands]=\"allowSkillCommands\"\n                    [enablePlanMode]=\"allowPlanMode\"\n                    [enableRealtime]=\"allowRealtime && OpenView.Kind !== 'DraftFork'\"\n                    [Placeholder]=\"ComposerPlaceholderFor(inputRef.conversationId)\"\n                    [SendSlotMode]=\"inputRef.conversationId === conversationId ? SendSlotMode : 'send'\"\n                    [StopCount]=\"inputRef.conversationId === conversationId ? StopCount : 0\"\n                    [StopLabel]=\"StopLabel\"\n                    [StatusText]=\"inputRef.conversationId === conversationId ? StatusText : null\"\n                    [StatusElapsed]=\"inputRef.conversationId === conversationId ? StatusElapsed : null\"\n                    (StopClicked)=\"OnComposerStopClicked()\"\n                    [maxAttachments]=\"maxAttachments\"\n                    [maxAttachmentSizeBytes]=\"maxAttachmentSizeBytes\"\n                    [acceptedFileTypes]=\"acceptedFileTypes\"\n                    [initialMessage]=\"shouldDeliverPendingMessageTo(inputRef.conversationId) ? pendingMessage : null\"\n                    [initialAttachments]=\"shouldDeliverPendingMessageTo(inputRef.conversationId) ? pendingAttachments : null\"\n                    (initialMessageAutoSendStarted)=\"onInitialMessageAutoSendStarted($event)\"\n                    (initialMessageAutoSendFailed)=\"onInitialMessageAutoSendFailed($event)\"\n                    (messageSent)=\"onMessageSent($event)\"\n                    (MessageStreamed)=\"OnMessageStreamed($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($event)\"\n                    (intentCheckCompleted)=\"onIntentCheckCompleted($event)\"\n                    (beforeAgentTurn)=\"beforeAgentTurn.emit($event)\"\n                    (afterAgentTurn)=\"afterAgentTurn.emit($event)\"\n                    (uploadStateChanged)=\"onUploadStateChanged($event)\">\n                  </mj-message-input>\n                }\n              </div>\n              @if (ComposerHint) {\n                <div class=\"fork-composer-hint\">{{ ComposerHint }}</div>\n              }\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          [Scope]=\"ArtifactViewerScope\"\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          (analyzeRequested)=\"OnAnalyzeArtifact($event)\"\n          (applyFormRequested)=\"OnApplyFormRequested($event)\">\n        </mj-artifact-viewer-panel>\n      </div>\n    }\n\n    <!-- Task Graph Run Viewer Pane -->\n    @if (SelectedTaskGraphPanel) {\n      @if (!isArtifactPaneMaximized) {\n        <div class=\"resize-handle\" (mousedown)=\"onResizeStart($event)\" (touchstart)=\"onResizeTouchStart($event)\"></div>\n      }\n      <div class=\"chat-artifact-pane chat-task-graph-pane\"\n        [style.width.%]=\"artifactPaneWidth\"\n        [class.maximized]=\"isArtifactPaneMaximized\">\n        <div class=\"task-graph-pane-header\">\n          <div class=\"task-graph-pane-title-group\">\n            <span class=\"task-graph-pane-icon\">\n              <i class=\"fa-solid fa-diagram-project\"></i>\n            </span>\n            <div class=\"task-graph-pane-titles\">\n              <span class=\"task-graph-pane-title\">{{ SelectedTaskGraphPanel.workflowTitle }}</span>\n              <span class=\"task-graph-pane-subtitle\">Interactive Task Graph &amp; Step Inspector</span>\n            </div>\n          </div>\n          <div class=\"task-graph-pane-actions\">\n            <button\n              type=\"button\"\n              class=\"task-graph-pane-save-btn\"\n              [disabled]=\"IsSavingTaskGraphWorkflow || !taskGraphRunView.Spec?.tasks?.length\"\n              (click)=\"OnSaveTaskGraphAsWorkflow(taskGraphRunView.Spec)\"\n              title=\"Save this task graph as a reusable Draft Flow Agent workflow\">\n              <i class=\"fa-solid\" [class.fa-spinner]=\"IsSavingTaskGraphWorkflow\" [class.fa-spin]=\"IsSavingTaskGraphWorkflow\" [class.fa-floppy-disk]=\"!IsSavingTaskGraphWorkflow\"></i>\n              <span>{{ IsSavingTaskGraphWorkflow ? 'Saving\u2026' : 'Save as Workflow' }}</span>\n            </button>\n            <button\n              type=\"button\"\n              class=\"task-graph-pane-btn\"\n              (click)=\"toggleMaximizeArtifactPane()\"\n              [title]=\"isArtifactPaneMaximized ? 'Restore panel size' : 'Maximize panel'\">\n              <i class=\"fa-solid\" [class.fa-compress]=\"isArtifactPaneMaximized\" [class.fa-expand]=\"!isArtifactPaneMaximized\"></i>\n            </button>\n            <button\n              type=\"button\"\n              class=\"task-graph-pane-btn\"\n              (click)=\"OnCloseTaskGraphPanel()\"\n              title=\"Close Task Graph panel\">\n              <i class=\"fa-solid fa-xmark\"></i>\n            </button>\n          </div>\n        </div>\n        <div class=\"task-graph-pane-body\">\n          <mj-task-graph-run-view\n            #taskGraphRunView\n            [ParentTaskID]=\"SelectedTaskGraphPanel.parentTaskId\"\n            [WorkflowName]=\"SelectedTaskGraphPanel.workflowTitle\"\n            [LiveUpdates]=\"true\"\n            [ShowVariables]=\"true\"\n            [Height]=\"'100%'\">\n          </mj-task-graph-run-view>\n        </div>\n      </div>\n    }\n\n    <!-- Remote Browser Side Pane -->\n    @if (ShowRemoteBrowserPanel) {\n      @if (!isArtifactPaneMaximized) {\n        <div class=\"resize-handle\" (mousedown)=\"onResizeStart($event)\" (touchstart)=\"onResizeTouchStart($event)\"></div>\n      }\n      <div class=\"chat-artifact-pane chat-task-graph-pane chat-remote-browser-pane\"\n        [style.width.%]=\"artifactPaneWidth\"\n        [class.maximized]=\"isArtifactPaneMaximized\">\n        <div class=\"task-graph-pane-header\">\n          <div class=\"task-graph-pane-title-group\">\n            <span class=\"task-graph-pane-icon\">\n              <i class=\"fa-solid fa-globe\"></i>\n            </span>\n            <div class=\"task-graph-pane-titles\">\n              <span class=\"task-graph-pane-title\">Remote Browser</span>\n              <span class=\"task-graph-pane-subtitle\">Shared live browser workspace</span>\n            </div>\n          </div>\n          <div class=\"task-graph-pane-actions\">\n            <input\n              type=\"text\"\n              class=\"remote-browser-url-input\"\n              placeholder=\"Enter URL or domain\u2026\"\n              [(ngModel)]=\"RemoteBrowserUrlInput\"\n              (keydown.enter)=\"$event.preventDefault(); NavigateRemoteBrowserFromInput()\" />\n            <button\n              type=\"button\"\n              class=\"task-graph-pane-save-btn\"\n              [disabled]=\"IsRemoteBrowserNavigating || !RemoteBrowserUrlInput.trim()\"\n              (click)=\"NavigateRemoteBrowserFromInput()\"\n              title=\"Navigate to URL\">\n              <i class=\"fa-solid\" [class.fa-spinner]=\"IsRemoteBrowserNavigating\" [class.fa-spin]=\"IsRemoteBrowserNavigating\" [class.fa-arrow-right]=\"!IsRemoteBrowserNavigating\"></i>\n              <span>Go</span>\n            </button>\n            <button\n              type=\"button\"\n              class=\"task-graph-pane-btn\"\n              (click)=\"toggleMaximizeArtifactPane()\"\n              [title]=\"isArtifactPaneMaximized ? 'Restore panel size' : 'Maximize panel'\">\n              <i class=\"fa-solid\" [class.fa-compress]=\"isArtifactPaneMaximized\" [class.fa-expand]=\"!isArtifactPaneMaximized\"></i>\n            </button>\n            <button\n              type=\"button\"\n              class=\"task-graph-pane-btn\"\n              (click)=\"CloseRemoteBrowserPanel()\"\n              title=\"Close Browser panel\">\n              <i class=\"fa-solid fa-xmark\"></i>\n            </button>\n          </div>\n        </div>\n        <div class=\"task-graph-pane-body\">\n          <mj-realtime-remote-browser-surface\n            #conversationRemoteBrowserSurface>\n          </mj-realtime-remote-browser-surface>\n        </div>\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\n    <!-- Pinned Messages Panel (overlay) -->\n    @if (allowPinning && showPinsPanel) {\n      <mj-pinned-messages-panel\n        [pinnedMessages]=\"pinnedMessages\"\n        [isLoading]=\"isLoadingPins\"\n        [AllowUnpin]=\"!EffectiveReadOnly\"\n        (closed)=\"showPinsPanel = false\"\n        (jumpRequested)=\"onJumpToMessage($event)\"\n        (unpinRequested)=\"onUnpinFromPanel($event)\">\n      </mj-pinned-messages-panel>\n    }\n\n    @if (ShowForksPopover) {\n      <mj-conversation-forks-popover\n        [PanelID]=\"ForksPopoverID\"\n        [Summaries]=\"ForkSummaries\"\n        [CurrentUserID]=\"CurrentUser.ID\"\n        (ForkSelected)=\"OnForkSelectedFromList($event)\"\n        (Closed)=\"CloseForksPopover()\">\n      </mj-conversation-forks-popover>\n    }\n  </div>\n\n  <!-- Live voice \"call mode\" overlay \u2014 fills this conversation panel in place\n       (header + thread + composer) while a realtime session is active. When the\n       call is MINIMIZED (e.g. a dev link navigated to a record) the overlay HIDES\n       (not destroyed \u2014 its merged session state must survive), the session stays\n       fully live, and a floating \"on call\" pill offers the way back.\n       ALSO hosted in SESSION REVIEW mode (RealtimeReview set, no live call): the\n       overlay renders what went down in a PAST session, with a \"Start live session\"\n       button that resumes it as a new call. -->\n  @if ((RealtimeSession.Active$ | async) || RealtimeReview) {\n    <mj-realtime-session-overlay\n      [AgentName]=\"realtimeOverlayAgentName\"\n      [Hidden]=\"(RealtimeSession.Minimized$ | async) === true\"\n      [CurrentUser]=\"currentUser\"\n      [EnvironmentID]=\"environmentId\"\n      [ReviewData]=\"RealtimeReview\"\n      [AllowStartLive]=\"CanStartVoiceFromReview\"\n      [Chrome]=\"overlayMode ? 'orb' : 'auto'\"\n      [Compact]=\"overlayMode\"\n      [ShowDevLinks]=\"!overlayMode\"\n      [ShowDensityPicker]=\"!overlayMode\"\n      (NavigateRequest)=\"onRealtimeNavigateRequest($event)\"\n      (StartLiveRequested)=\"onReviewStartLive($event)\"\n      (ReviewClosed)=\"onReviewClosed()\">\n    </mj-realtime-session-overlay>\n    @if (RealtimeSession.Minimized$ | async) {\n      <button type=\"button\" class=\"voice-call-pill\" (click)=\"RealtimeSession.SetMinimized(false)\"\n              title=\"Return to the live call\" aria-label=\"Return to the live call\">\n        <span class=\"voice-call-pill__pulse\" aria-hidden=\"true\"></span>\n        <i class=\"fa-solid fa-phone-volume\" aria-hidden=\"true\"></i>\n        <span class=\"voice-call-pill__text\">\n          <span class=\"voice-call-pill__name\">On call \u00B7 {{ RealtimeSession.CurrentAgentName }}</span>\n          <span class=\"voice-call-pill__hint\">Tap to return</span>\n        </span>\n      </button>\n    }\n  }\n</div>\n\n<!-- Export Modal -->\n<!-- [branding] is bound BEFORE [isVisible] deliberately: Angular sets inputs in\n     template order within a change-detection pass, and the modal's isVisible setter\n     reads `branding` to default its \"Include branding\" checkbox on a fresh open. -->\n<mj-export-modal\n  [branding]=\"exportBranding\"\n  [isVisible]=\"showExportModal\"\n  [conversation]=\"conversation || undefined\"\n  [Scope]=\"ExportScope\"\n  [currentUser]=\"currentUser\"\n  (cancelled)=\"onExportModalCancelled()\"\n  (exported)=\"onExportModalComplete()\">\n</mj-export-modal>\n\n<!-- Share Dialog (generic, shared with dashboards) -->\n<mj-resource-share-dialog\n  [Visible]=\"showShareModal\"\n  [Context]=\"shareContext\"\n  [Adapter]=\"shareAdapter\"\n  (Result)=\"onShareDialogResult($event)\">\n</mj-resource-share-dialog>\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          <mj-empty-state\n            class=\"artifacts-empty-fill\"\n            Icon=\"fa-solid fa-cube\"\n            Title=\"No artifacts in this conversation yet\" />\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    [artifactVersionId]=\"collectionPickerVersionId\"\n    [artifactName]=\"collectionPickerArtifactName\"\n    [artifactVersionNumber]=\"collectionPickerVersionNumber\"\n    (completed)=\"onCollectionPickerCompleted($event)\"\n    (cancelled)=\"onCollectionPickerCancelled()\">\n  </mj-artifact-collection-picker-modal>\n}\n\n<!-- Test Feedback Dialog -->\n@if (testFeedbackDialogData) {\n  <mj-test-feedback-dialog\n    [data]=\"testFeedbackDialogData\"\n    [visible]=\"showTestFeedbackDialog\"\n    (closed)=\"onTestFeedbackDialogClosed($event)\">\n  </mj-test-feedback-dialog>\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}\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  /* Positioned context for the in-place realtime \"call mode\" overlay (absolute inset:0) */\n  position: relative;\n}\n\n.chat-header {\n  flex-shrink: 0;\n  padding: 12px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 16px;\n  background: var(--mj-bg-surface-card);\n  z-index: 10;\n  box-shadow: var(--mj-shadow-sm);\n}\n\n/* agentPresence slot \u2014 sticky top, anchored with the header. Per Matt's\n   06-10 placement design: persistent presence indicator above the messages.\n   Renders only when [showAgentCharacter] is true, so existing embeds see no\n   layout change. The prominent variant grows toward a centered presence\n   (per Matt: \"can grow larger toward a centered presence\"). */\n.chat-agent-presence {\n  flex-shrink: 0;\n  padding: 8px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-card);\n  display: flex;\n  align-items: center;\n  z-index: 11;\n}\n\n.chat-agent-presence--prominent {\n  padding: 16px 20px;\n  justify-content: center;\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: color-mix(in srgb, var(--mj-text-primary) 8%, transparent);\n}\n\n.sidebar-toggle-btn:active {\n  background: color-mix(in srgb, var(--mj-text-primary) 12%, transparent);\n}\n\n.sidebar-toggle-btn i {\n  color: var(--mj-text-secondary);\n  font-size: 18px;\n  transition: color 0.15s ease;\n}\n\n.sidebar-toggle-btn:hover i {\n  color: var(--mj-text-primary);\n}\n\n/* Header title: the conversation name in Main; in a fork, the path ending in the open fork */\n.chat-title-bar {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-1);\n  flex: 0 1 auto;\n  min-width: 0;\n}\n\n.chat-title {\n  flex: 0 1 auto;\n  min-width: 0;\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.chat-title-path {\n  min-width: 0;\n}\n\n.chat-title-crumbs {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-1);\n  min-width: 0;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n/* Parent crumbs shrink first, down to 80px each; the current entry keeps 120px before it truncates */\n.chat-title-crumb {\n  display: flex;\n  flex: 0 100 auto;\n  align-items: center;\n  gap: var(--mj-space-1);\n  min-width: 80px;\n}\n\n.chat-title-crumb.chat-title-ellipsis {\n  flex: 0 0 auto;\n  min-width: 0;\n}\n\n.chat-title-crumb > button {\n  min-width: 0;\n  color: var(--mj-text-muted);\n  font-size: var(--mj-text-sm);\n  font-weight: 500;\n}\n\n.chat-title-crumb-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Past three entries the crumbs between the first and the parent collapse into the ellipsis */\n.chat-title-crumb.collapsed-wide,\n.chat-title-ellipsis:not(.collapses-wide) {\n  display: none;\n}\n\n.chat-title-sep {\n  flex-shrink: 0;\n  font-size: 12px;\n  color: var(--mj-border-strong);\n}\n\n.chat-title-current {\n  display: flex;\n  flex: 0 1 auto;\n  align-items: center;\n  gap: var(--mj-space-1);\n  min-width: 120px;\n}\n\n.chat-title-kind {\n  flex-shrink: 0;\n  margin: 0 var(--mj-space-1);\n  color: var(--mj-status-info);\n}\n\n.chat-title-kind[data-kind='Edit'] {\n  color: var(--mj-status-warning);\n}\n\n.chat-title-kind[data-kind='Regenerate'] {\n  color: var(--mj-brand-tertiary);\n}\n\n.chat-title-bar .chat-title-rename {\n  flex-shrink: 0;\n  color: var(--mj-text-muted);\n  opacity: 0.6;\n  transition: opacity 0.15s ease, color 0.15s ease;\n}\n\n.chat-title-bar:hover .chat-title-rename,\n.chat-title-bar .chat-title-rename:focus-visible {\n  color: var(--mj-text-primary);\n  opacity: 1;\n}\n\n.chat-title-input {\n  flex: 0 1 360px;\n  min-width: 120px;\n  padding: var(--mj-space-1) var(--mj-space-2);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  font: inherit;\n  font-size: 16px;\n  font-weight: 600;\n}\n\n.chat-title-input:focus-visible {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-focus-ring);\n}\n\n.with-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--mj-space-1-5);\n  padding: 2px var(--mj-space-2);\n  border-radius: var(--mj-radius-full);\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-subtle);\n  color: var(--mj-text-secondary);\n  font-size: var(--mj-text-xs);\n  line-height: var(--mj-leading-tight);\n  flex-shrink: 0;\n}\n\n.with-chip .dot {\n  width: 6px;\n  height: 6px;\n  border-radius: var(--mj-radius-full);\n  background: var(--agent-accent, var(--mj-brand-primary));\n  transition: background-color 240ms cubic-bezier(0.22, 1, 0.36, 1);\n  flex-shrink: 0;\n}\n\n.with-chip b {\n  color: var(--mj-text-primary);\n  font-weight: var(--mj-font-semibold);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .with-chip .dot {\n    transition: none;\n  }\n}\n\n.shared-by-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 3px 10px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n  color: var(--mj-brand-primary);\n  border-radius: 999px;\n  font-size: 12px;\n  font-weight: 500;\n  flex-shrink: 0;\n  max-width: 240px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.shared-by-badge i {\n  font-size: 10px;\n}\n\n.shared-by-badge span {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.project-tag {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 16px;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  transition: all 0.2s;\n  height: 28px;\n  margin-left: 12px;\n}\n\n.project-tag:hover {\n  background: var(--mj-border-default);\n  border-color: var(--mj-text-muted);\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: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n  border: 1px solid var(--mj-status-warning);\n  border-radius: 16px;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-status-warning);\n  cursor: pointer;\n  transition: all 0.2s;\n  height: 28px;\n  margin-left: 8px;\n}\n\n.test-indicator:hover {\n  background: color-mix(in srgb, var(--mj-status-warning) 20%, var(--mj-bg-surface));\n  border-color: var(--mj-status-warning);\n}\n\n.test-indicator i {\n  font-size: 10px;\n}\n\n/* Pinned messages chip in chat header */\n.pin-chip {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  padding: 5px 10px;\n  background: color-mix(in srgb, var(--mj-status-warning) 12%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-status-warning) 45%, transparent);\n  border-radius: 20px;\n  color: var(--mj-status-warning-text, var(--mj-status-warning));\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s;\n}\n\n.pin-chip i {\n  font-size: 11px;\n}\n\n.pin-chip:hover,\n.pin-chip.active {\n  background: color-mix(in srgb, var(--mj-status-warning) 20%, var(--mj-bg-surface));\n  border-color: var(--mj-status-warning);\n}\n\n.pin-chip-count {\n  font-size: 12px;\n  font-weight: 700;\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 var(--mj-border-default);\n  border-radius: 6px;\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 150ms ease;\n}\n\n.chat-members:hover,\n.artifact-indicator:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\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: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\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: var(--mj-brand-primary);\n}\n\n.ambient-agent-indicator {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  animation: pulse 2s ease-in-out infinite;\n}\n\n.ambient-agent-indicator i {\n  color: var(--mj-brand-primary);\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  align-items: center;\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 var(--mj-border-default);\n  cursor: pointer;\n  border-radius: 6px;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  transition: all 150ms ease;\n}\n\n.action-btn:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n.share-btn.shared {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  border-color: var(--mj-brand-primary-hover);\n  color: var(--mj-brand-primary-hover);\n}\n\n.share-btn.shared:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary-hover);\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: var(--mj-brand-primary);\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: var(--mj-bg-surface-sunken);\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-task-graph-pane {\n  background: var(--mj-bg-surface);\n  border-left: 1px solid var(--mj-border-default);\n}\n\n.task-graph-pane-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  padding: 12px 16px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.task-graph-pane-title-group {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-width: 0;\n}\n\n.task-graph-pane-icon {\n  width: 32px;\n  height: 32px;\n  border-radius: 8px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n  color: var(--mj-brand-primary);\n  font-size: 14px;\n  flex-shrink: 0;\n}\n\n.task-graph-pane-titles {\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n  min-width: 0;\n}\n\n.task-graph-pane-title {\n  font-size: 13.5px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.task-graph-pane-subtitle {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n.task-graph-pane-actions {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex-shrink: 0;\n}\n\n.task-graph-pane-save-btn {\n  height: 30px;\n  padding: 0 10px;\n  border-radius: 6px;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  font-weight: 500;\n  border: 1px solid var(--mj-brand-primary);\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse, #ffffff);\n  cursor: pointer;\n  transition: opacity 0.15s ease, filter 0.15s ease;\n}\n\n.task-graph-pane-save-btn:hover:not(:disabled) {\n  filter: brightness(1.06);\n}\n\n.task-graph-pane-save-btn:disabled {\n  opacity: 0.55;\n  cursor: not-allowed;\n}\n\n.task-graph-pane-btn {\n  width: 30px;\n  height: 30px;\n  border-radius: 6px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid var(--mj-border-subtle);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;\n}\n\n.task-graph-pane-btn:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n  border-color: var(--mj-border-default);\n}\n\n.task-graph-pane-body {\n  flex: 1;\n  width: 100%;\n  min-height: 0;\n  min-width: 0;\n  padding: 12px 16px 16px;\n  box-sizing: border-box;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n}\n\n.task-graph-pane-body > mj-task-graph-run-view {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  width: 100%;\n  min-height: 0;\n  min-width: 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/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   demonstrationSurface layout-mode (Matt's 06-10 placement design)\n   \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   When .chat-content-area gets .demonstration-mode, the layout flips\n   from \"messages pane (+ optional artifact pane)\" to \"stage + side rail\":\n     - stage (.chat-demonstration-stage) \u2014 left, flexible, holds the\n       consumer's projected demonstrationSurface slot template\n     - rail (.chat-messages-pane) \u2014 right, fixed-width 320px, holds the\n       messages list + composer (\"the conversation as a companion rail\")\n   On mobile (\u2264768px) the same two stack vertically (stage above, rail\n   below) per Matt's note about mobile. The rail intentionally keeps the\n   composer inside it \u2014 Matt's design refers to the conversation rail\n   inclusively (messages + composer together), not as separate regions.\n*/\n.chat-demonstration-stage {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n  background: var(--mj-bg-surface);\n  border-right: 1px solid var(--mj-border-default);\n  flex: 1;\n  min-width: 0;\n}\n\n.chat-content-area.demonstration-mode .chat-messages-pane,\n.chat-content-area.demonstration-mode .chat-messages-pane.full-width {\n  flex: 0 0 320px;\n  width: 320px;\n  min-width: 0;\n}\n\n@media (max-width: 768px) {\n  .chat-content-area.demonstration-mode {\n    flex-direction: column;\n  }\n\n  .chat-content-area.demonstration-mode .chat-demonstration-stage {\n    flex: 1 1 60%;\n    border-right: none;\n    border-bottom: 1px solid var(--mj-border-default);\n    height: auto;\n  }\n\n  .chat-content-area.demonstration-mode .chat-messages-pane,\n  .chat-content-area.demonstration-mode .chat-messages-pane.full-width {\n    flex: 1 1 40%;\n    width: 100%;\n    height: auto;\n  }\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: color-mix(in srgb, var(--mj-bg-surface-card) 95%, transparent);\n  border-radius: 12px;\n  box-shadow: var(--mj-shadow-md);\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: var(--mj-bg-surface-card);\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: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  box-shadow: var(--mj-shadow-md);\n  transition: all 0.2s ease;\n  z-index: 100;\n  pointer-events: auto;\n}\n\n.scroll-to-bottom-icon:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-color: var(--mj-brand-primary);\n  transform: translateX(-50%) translateY(-2px);\n  box-shadow: color-mix(in srgb, var(--mj-brand-primary) 20%, transparent) 0 4px 12px;\n}\n\n.scroll-to-bottom-icon i {\n  color: var(--mj-text-secondary);\n  font-size: 16px;\n  transition: color 0.2s;\n}\n\n.scroll-to-bottom-icon:hover i {\n  color: var(--mj-brand-primary);\n}\n\n.chat-input-container {\n  flex-shrink: 0;\n  background: var(--mj-bg-surface-card);\n  padding: 0 1.25rem 1.25rem 1.25rem;\n  overflow: visible;\n}\n\n/* composerExtra slot: host UI directly above the composer. Spacing only; the host styles its content. */\n.chat-composer-extra {\n  margin-bottom: 0.5rem;\n}\n\n.read-only-banner {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin: 0 1.25rem 0.5rem 1.25rem;\n  padding: 8px 12px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n  color: var(--mj-text-secondary);\n  border-radius: 6px;\n  font-size: 12px;\n}\n\n.read-only-banner i {\n  color: var(--mj-brand-primary);\n  font-size: 12px;\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: color-mix(in srgb, var(--mj-bg-surface-card) 50%, transparent);\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: var(--mj-bg-overlay);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n}\n\n.modal-content {\n  background: var(--mj-bg-surface-card);\n  border-radius: 8px;\n  box-shadow: var(--mj-shadow-md);\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 var(--mj-border-default);\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: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  cursor: pointer;\n  color: var(--mj-text-secondary);\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: var(--mj-border-default);\n  border-color: var(--mj-border-default);\n  color: var(--mj-text-primary);\n}\n\n.toggle-system-btn.active {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n.toggle-system-btn.active:hover {\n  background: var(--mj-brand-primary-hover);\n  border-color: var(--mj-brand-primary-hover);\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: var(--mj-text-secondary);\n  padding: 4px 8px;\n  border-radius: 4px;\n  transition: all 0.2s;\n}\n\n.modal-close-btn:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\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 spans the full artifacts grid */\n.artifacts-empty-fill {\n  grid-column: 1/-1;\n}\n\n.artifact-modal-card {\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-surface-card);\n  border: 1.5px solid var(--mj-border-default);\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: var(--mj-brand-primary);\n}\n\n.artifact-modal-card.system-artifact {\n  opacity: 0.85;\n  border-color: var(--mj-border-default);\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: var(--mj-text-muted);\n  background: var(--mj-bg-surface-sunken);\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: var(--mj-text-muted);\n  box-shadow: var(--mj-shadow-md);\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: var(--mj-bg-surface-sunken);\n}\n\n.artifact-modal-card:hover {\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-shadow-md);\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: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  border-radius: 10px;\n  color: var(--mj-brand-primary);\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: var(--mj-text-primary);\n  margin-bottom: 4px;\n}\n\n.artifact-modal-meta {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n}\n\n.artifact-modal-action {\n  color: var(--mj-text-muted);\n  transition: color 0.2s;\n}\n\n.artifact-modal-card:hover .artifact-modal-action {\n  color: var(--mj-brand-primary);\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: var(--mj-text-secondary);\n  cursor: pointer;\n  border-radius: 6px;\n  transition: all 0.2s;\n}\n.expand-btn:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-brand-primary);\n}\n\n.artifact-versions-list {\n  display: flex;\n  flex-direction: column;\n  padding: 0 1rem 1rem 1rem;\n  background: var(--mj-bg-surface-sunken);\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: var(--mj-bg-surface-sunken);\n}\n.artifact-version-item .version-badge {\n  display: inline-block;\n  padding: 4px 8px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n  font-weight: 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: var(--mj-text-secondary);\n}\n.artifact-version-item i {\n  color: var(--mj-text-muted);\n  font-size: 12px;\n}\n.artifact-version-item:hover .version-badge {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n.artifact-version-item:hover .version-open-text {\n  color: var(--mj-brand-primary);\n}\n.artifact-version-item:hover i {\n  color: var(--mj-brand-primary);\n}\n\n.loading-peripheral-content {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px 24px;\n  background: var(--mj-bg-surface-card);\n  border: 2px solid var(--mj-border-default);\n  border-radius: 12px;\n  box-shadow: var(--mj-shadow-md);\n  color: var(--mj-text-secondary);\n  font-size: 14px;\n  font-weight: 500;\n}\n.loading-peripheral-content i {\n  font-size: 20px;\n  color: var(--mj-brand-primary);\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: var(--mj-text-secondary);\n  font-size: 15px;\n}\n.loading-content i {\n  font-size: 32px;\n  color: var(--mj-brand-primary);\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-bar {\n    flex: 1;\n  }\n  .chat-title {\n    font-size: 15px;\n    font-weight: 700;\n  }\n  /* The path keeps the first crumb and the current entry; every middle crumb collapses into the ellipsis */\n  .chat-title-crumb.path-middle {\n    display: none;\n  }\n  .chat-title-ellipsis:not(.collapses-wide) {\n    display: flex;\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: var(--mj-bg-surface-card);\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\n/* Artifact Picker Panel */\n.artifact-picker-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: var(--mj-bg-overlay);\n  z-index: 999;\n}\n\n.artifact-picker-panel {\n  position: fixed;\n  right: 0;\n  top: 0;\n  width: 360px;\n  height: 100%;\n  background: var(--mj-bg-surface);\n  border-left: 1px solid var(--mj-border-default);\n  z-index: 1000;\n  display: flex;\n  flex-direction: column;\n  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.1);\n  animation: slideInRight 0.2s ease-out;\n}\n\n@keyframes slideInRight {\n  from { transform: translateX(100%); }\n  to { transform: translateX(0); }\n}\n\n.artifact-picker-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.artifact-picker-header h3 {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.artifact-picker-close {\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 4px 8px;\n  color: var(--mj-text-muted);\n  border-radius: 4px;\n}\n\n.artifact-picker-close:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n\n.artifact-picker-body {\n  flex: 1;\n  overflow-y: auto;\n  padding: 12px;\n}\n\n.artifact-picker-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px 20px;\n  text-align: center;\n  color: var(--mj-text-muted);\n  gap: 8px;\n}\n\n.artifact-picker-hint {\n  font-size: 12px;\n  color: var(--mj-text-disabled);\n}\n\n.artifact-picker-list {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.artifact-picker-item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 12px;\n  border: 1px solid var(--mj-border-subtle);\n  border-radius: 6px;\n  background: var(--mj-bg-surface-card);\n  cursor: pointer;\n  text-align: left;\n  width: 100%;\n  transition: background 0.15s, border-color 0.15s;\n}\n\n.artifact-picker-item:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-brand-primary);\n}\n\n.artifact-picker-item i {\n  font-size: 20px;\n  width: 24px;\n  text-align: center;\n  flex-shrink: 0;\n}\n\n.artifact-picker-item i.fa-file-pdf { color: var(--mj-status-error); }\n.artifact-picker-item i.fa-file-excel { color: var(--mj-status-success); }\n.artifact-picker-item i.fa-file-word { color: var(--mj-brand-primary); }\n.artifact-picker-item i.fa-file { color: var(--mj-text-muted); }\n\n.artifact-picker-item-info {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.artifact-picker-item-name {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.artifact-picker-item-meta {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n/* ---------- Floating \"on call\" pill (minimized realtime voice session) ----------\n   Shown bottom-right of the chat panel while the live call overlay is minimized\n   (e.g. after a gear-gated dev link navigated to a record). The mic + session stay\n   live; tapping the pill restores the full call overlay. */\n.voice-call-pill {\n  position: absolute;\n  right: 18px;\n  bottom: 18px;\n  z-index: 49; /* just under the full call overlay (z-index 50) */\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 9px 16px 9px 13px;\n  border-radius: var(--mj-radius-full, 9999px);\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-elevated, var(--mj-bg-surface));\n  color: var(--mj-text-primary);\n  font-family: inherit;\n  cursor: pointer;\n  box-shadow: 0 8px 24px color-mix(in srgb, var(--mj-brand-primary) 18%, transparent);\n  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;\n}\n.voice-call-pill:hover {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 10px 28px color-mix(in srgb, var(--mj-brand-primary) 28%, transparent);\n  transform: translateY(-1px);\n}\n.voice-call-pill i {\n  font-size: 14px;\n  color: var(--mj-brand-primary);\n}\n.voice-call-pill__pulse {\n  width: 9px;\n  height: 9px;\n  border-radius: 50%;\n  background: var(--mj-status-success);\n  flex-shrink: 0;\n  animation: voice-pill-pulse 1.6s ease-in-out infinite;\n}\n.voice-call-pill__text {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  line-height: 1.25;\n}\n.voice-call-pill__name {\n  font-size: 12.5px;\n  font-weight: 700;\n}\n.voice-call-pill__hint {\n  font-size: 10.5px;\n  color: var(--mj-text-muted);\n}\n@keyframes voice-pill-pulse {\n  0%, 100% {\n    box-shadow: 0 0 0 0 color-mix(in srgb, var(--mj-status-success) 45%, transparent);\n  }\n  50% {\n    box-shadow: 0 0 0 5px color-mix(in srgb, var(--mj-status-success) 0%, transparent);\n  }\n}\n\n/* The fork title above the transcript, shown only when a host header replaces the default one */\n.fork-view-bar {\n  display: flex;\n  align-items: center;\n  padding: var(--mj-space-2) var(--mj-space-4);\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n}\n.fork-composer-hint {\n  padding: var(--mj-space-1) var(--mj-space-4) 0;\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n}\n.chat-actions-buttons > .forks-button .forks-count {\n  margin-left: var(--mj-space-1);\n  padding: 0 var(--mj-space-2);\n  border-radius: var(--mj-radius-full);\n  background: var(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n  font-size: var(--mj-text-xs);\n  font-weight: 600;\n}\n.chat-actions-buttons > .forks-button.active {\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}\n.chat-actions-buttons > .remote-browser-toggle-btn.active {\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}\n.remote-browser-url-input {\n  width: 220px;\n  max-width: 38vw;\n  height: 28px;\n  padding: 0 10px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  font-size: 12px;\n  font-family: var(--mj-font-family-mono);\n}\n.remote-browser-url-input:focus {\n  outline: none;\n  border-color: var(--mj-border-focus);\n}\n"] }]
     }], () => [{ type: i1.AgentStateService }, { type: i2.ConversationLivenessDomService }, { type: i3.ConversationAgentService }, { type: i4.ActiveTasksService }, { type: i0.ChangeDetectorRef }, { type: i5.ArtifactPermissionService }, { type: i6.ConversationAttachmentService }, { type: i7.ConversationStreamingService }, { type: i8.DialogService }, { type: i9.ConversationBridgeService }, { type: i10.AnalyzeArtifactService }, { type: i11.UICommandHandlerService }, { type: i10.InteractiveFormApplyService }, { type: i12.AgentClientService }], { EnvironmentId: [{
             type: Input
         }], environmentId: [{
@@ -9430,6 +10244,8 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             type: Input
         }], AllowForking: [{
             type: Input
+        }], AllowRemoteBrowser: [{
+            type: Input
         }], AllowStopRun: [{
             type: Input
         }], ShowEmptyFill: [{
@@ -9731,6 +10547,9 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         }], chatSlotChildren: [{
             type: ContentChildren,
             args: [ChatSlotDirective]
+        }], ConversationRemoteBrowserSurface: [{
+            type: ViewChild,
+            args: ['conversationRemoteBrowserSurface']
         }], messageListComponent: [{
             type: ViewChild,
             args: [MessageListComponent]
@@ -9743,6 +10562,10 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         }], forksButton: [{
             type: ViewChild,
             args: ['forksButton', { read: ElementRef }]
+        }], CollapseThreadReplies: [{
+            type: Input
+        }], ThreadReplyRevealRequested: [{
+            type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ConversationChatAreaComponent, { className: "ConversationChatAreaComponent", filePath: "src/lib/components/conversation/conversation-chat-area.component.ts", lineNumber: 204 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ConversationChatAreaComponent, { className: "ConversationChatAreaComponent", filePath: "src/lib/components/conversation/conversation-chat-area.component.ts", lineNumber: 217 }); })();
 //# sourceMappingURL=conversation-chat-area.component.js.map