@memberjunction/ng-dashboards 6.1.2 → 6.2.0-edge.0

package/dist/PredictiveStudio/resources/ps-studio-resource.component.js

@@ -4,42 +4,44 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ViewChild, inject } from '@angular/core';
 import { RegisterClass } from '@memberjunction/global';
 import { LogError } from '@memberjunction/core';
-import { MJEnvironmentEntityExtended } from '@memberjunction/core-entities';
+import { MJEnvironmentEntityExtended, UserInfoEngine } from '@memberjunction/core-entities';
 import { AIEngineBase } from '@memberjunction/ai-engine-base';
 import { BaseResourceComponent } from '@memberjunction/ng-shared';
 import { PSResourceBase } from './ps-resource-base';
 import { STUDIO_SECTIONS, sectionGroups, sectionsInGroup, sectionLabel, hasSection, routeHomeNavigate, } from '../predictive-studio.nav';
-import { buildStudioAgentContext, resolvePSRecord, buildPSNotFoundError } from '../predictive-studio-agent-context';
+import { buildStudioAgentContext, resolvePSRecord, buildPSNotFoundError, } from '../predictive-studio-agent-context';
 import { validateStringParam } from '../../shared/agent-tool-validation';
 import * as i0 from "@angular/core";
 import * as i1 from "@memberjunction/ng-ui-components";
 import * as i2 from "@memberjunction/ng-shared-generic";
 import * as i3 from "@memberjunction/ng-conversations";
-import * as i4 from "../components/ps-home.component";
-import * as i5 from "../components/ps-catalog.component";
-import * as i6 from "../components/ps-pipelines.component";
-import * as i7 from "../components/ps-experiments.component";
-import * as i8 from "../components/ps-compare.component";
+import * as i4 from "angular-split";
+import * as i5 from "../components/ps-home.component";
+import * as i6 from "../components/ps-catalog.component";
+import * as i7 from "../components/ps-pipelines.component";
+import * as i8 from "../components/ps-experiments.component";
+import * as i9 from "../components/ps-compare.component";
+const _c0 = ["pipelinesComp"];
 const _forTrack0 = ($index, $item) => $item.key;
 function PSStudioResourceComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-loading", 2);
+    i0.ɵɵelement(0, "mj-loading", 3);
 } }
 function PSStudioResourceComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 3);
-    i0.ɵɵelement(1, "i", 5);
-    i0.ɵɵelementStart(2, "div", 6)(3, "strong");
+    i0.ɵɵelementStart(0, "div", 4);
+    i0.ɵɵelement(1, "i", 6);
+    i0.ɵɵelementStart(2, "div", 7)(3, "strong");
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 7);
+    i0.ɵɵelementStart(5, "span", 8);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "button", 8);
+    i0.ɵɵelementStart(7, "button", 9);
     i0.ɵɵlistener("click", function PSStudioResourceComponent_Conditional_3_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.retryLoad()); });
-    i0.ɵɵelement(8, "i", 9);
+    i0.ɵɵelement(8, "i", 10);
     i0.ɵɵtext(9, " Try again");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -49,136 +51,190 @@ function PSStudioResourceComponent_Conditional_3_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(ctx_r1.loadError);
 } }
-function PSStudioResourceComponent_Conditional_4_For_3_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 16);
+function PSStudioResourceComponent_Conditional_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 12)(1, "button", 21);
+    i0.ɵɵlistener("click", function PSStudioResourceComponent_Conditional_4_Conditional_1_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleNav()); });
+    i0.ɵɵelement(2, "i", 22);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 23);
+    i0.ɵɵelement(4, "i", 24);
+    i0.ɵɵtext(5, " Studio");
+    i0.ɵɵelementEnd()();
+} }
+function PSStudioResourceComponent_Conditional_4_Conditional_3_For_8_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 30);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const group_r3 = i0.ɵɵnextContext().$implicit;
+    const group_r6 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(group_r3);
+    i0.ɵɵtextInterpolate(group_r6);
 } }
-function PSStudioResourceComponent_Conditional_4_For_3_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 18);
-    i0.ɵɵlistener("click", function PSStudioResourceComponent_Conditional_4_For_3_For_2_Template_button_click_0_listener() { const item_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.selectSection(item_r5.key)); });
+function PSStudioResourceComponent_Conditional_4_Conditional_3_For_8_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 32);
+    i0.ɵɵlistener("click", function PSStudioResourceComponent_Conditional_4_Conditional_3_For_8_For_2_Template_button_click_0_listener() { const item_r8 = i0.ɵɵrestoreView(_r7).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.selectSection(item_r8.key)); });
     i0.ɵɵelement(1, "i");
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const item_r5 = ctx.$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵclassProp("active", ctx_r1.activeSection === item_r5.key);
-    i0.ɵɵattribute("data-testid", "ps-nav-" + item_r5.key);
+    const item_r8 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵclassProp("active", ctx_r1.activeSection === item_r8.key);
+    i0.ɵɵattribute("data-testid", "ps-nav-" + item_r8.key);
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(item_r5.icon);
+    i0.ɵɵclassMap(item_r8.icon);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(item_r5.label);
+    i0.ɵɵtextInterpolate(item_r8.label);
 } }
-function PSStudioResourceComponent_Conditional_4_For_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, PSStudioResourceComponent_Conditional_4_For_3_Conditional_0_Template, 2, 1, "div", 16);
-    i0.ɵɵrepeaterCreate(1, PSStudioResourceComponent_Conditional_4_For_3_For_2_Template, 4, 6, "button", 17, _forTrack0);
+function PSStudioResourceComponent_Conditional_4_Conditional_3_For_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, PSStudioResourceComponent_Conditional_4_Conditional_3_For_8_Conditional_0_Template, 2, 1, "div", 30);
+    i0.ɵɵrepeaterCreate(1, PSStudioResourceComponent_Conditional_4_Conditional_3_For_8_For_2_Template, 4, 6, "button", 31, _forTrack0);
 } if (rf & 2) {
-    const group_r3 = ctx.$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵconditional(group_r3 ? 0 : -1);
+    const group_r6 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵconditional(group_r6 ? 0 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r1.itemsForGroup(group_r3));
+    i0.ɵɵrepeater(ctx_r1.itemsForGroup(group_r6));
+} }
+function PSStudioResourceComponent_Conditional_4_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "as-split-area", 14)(1, "aside", 25)(2, "div", 26)(3, "span", 27);
+    i0.ɵɵtext(4, "Studio");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "button", 28);
+    i0.ɵɵlistener("click", function PSStudioResourceComponent_Conditional_4_Conditional_3_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleNav()); });
+    i0.ɵɵelement(6, "i", 29);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵrepeaterCreate(7, PSStudioResourceComponent_Conditional_4_Conditional_3_For_8_Template, 3, 1, null, null, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("size", ctx_r1.navSizePct)("minSize", 10)("maxSize", 30);
+    i0.ɵɵadvance(7);
+    i0.ɵɵrepeater(ctx_r1.groups);
 } }
-function PSStudioResourceComponent_Conditional_4_Case_5_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "ps-home", 19);
-    i0.ɵɵlistener("navigate", function PSStudioResourceComponent_Conditional_4_Case_5_Template_ps_home_navigate_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.mapNavigate($event)); })("askAgent", function PSStudioResourceComponent_Conditional_4_Case_5_Template_ps_home_askAgent_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onAskAgent($event)); });
+function PSStudioResourceComponent_Conditional_4_Case_9_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "ps-home", 33);
+    i0.ɵɵlistener("navigate", function PSStudioResourceComponent_Conditional_4_Case_9_Template_ps_home_navigate_0_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.mapNavigate($event)); })("askAgent", function PSStudioResourceComponent_Conditional_4_Case_9_Template_ps_home_askAgent_0_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onAskAgent($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("engine", ctx_r1.engine)("provider", ctx_r1.ProviderToUse)("currentUser", ctx_r1.ProviderToUse.CurrentUser);
 } }
-function PSStudioResourceComponent_Conditional_4_Case_6_Template(rf, ctx) { if (rf & 1) {
-    const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "ps-pipelines", 20);
-    i0.ɵɵlistener("askAgent", function PSStudioResourceComponent_Conditional_4_Case_6_Template_ps_pipelines_askAgent_0_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onAskAgent($event)); });
+function PSStudioResourceComponent_Conditional_4_Case_10_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "ps-pipelines", 34, 0);
+    i0.ɵɵlistener("askAgent", function PSStudioResourceComponent_Conditional_4_Case_10_Template_ps_pipelines_askAgent_0_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onAskAgent($event)); })("navigate", function PSStudioResourceComponent_Conditional_4_Case_10_Template_ps_pipelines_navigate_0_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.mapNavigate($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("engine", ctx_r1.engine)("provider", ctx_r1.ProviderToUse)("currentUser", ctx_r1.ProviderToUse.CurrentUser);
 } }
-function PSStudioResourceComponent_Conditional_4_Case_7_Template(rf, ctx) { if (rf & 1) {
-    const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "ps-catalog", 21);
-    i0.ɵɵlistener("askAgent", function PSStudioResourceComponent_Conditional_4_Case_7_Template_ps_catalog_askAgent_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onAskAgent($event)); });
+function PSStudioResourceComponent_Conditional_4_Case_11_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "ps-catalog", 35);
+    i0.ɵɵlistener("askAgent", function PSStudioResourceComponent_Conditional_4_Case_11_Template_ps_catalog_askAgent_0_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onAskAgent($event)); })("createPipeline", function PSStudioResourceComponent_Conditional_4_Case_11_Template_ps_catalog_createPipeline_0_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onCreatePipelineFromCatalog($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("engine", ctx_r1.engine);
 } }
-function PSStudioResourceComponent_Conditional_4_Case_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "ps-experiments", 13);
+function PSStudioResourceComponent_Conditional_4_Case_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "ps-experiments", 19);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("engine", ctx_r1.engine)("provider", ctx_r1.ProviderToUse)("currentUser", ctx_r1.ProviderToUse.CurrentUser);
 } }
-function PSStudioResourceComponent_Conditional_4_Case_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "ps-compare", 14);
+function PSStudioResourceComponent_Conditional_4_Case_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "ps-compare", 20);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("engine", ctx_r1.engine);
 } }
-function PSStudioResourceComponent_Conditional_4_Conditional_10_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-conversation-chat-area", 30);
-    i0.ɵɵlistener("conversationCreated", function PSStudioResourceComponent_Conditional_4_Conditional_10_Conditional_8_Template_mj_conversation_chat_area_conversationCreated_0_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onChatConversationCreated($event)); })("pendingMessageConsumed", function PSStudioResourceComponent_Conditional_4_Conditional_10_Conditional_8_Template_mj_conversation_chat_area_pendingMessageConsumed_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onChatPendingMessageConsumed()); });
+function PSStudioResourceComponent_Conditional_4_Conditional_14_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    const _r13 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-conversation-chat-area", 48);
+    i0.ɵɵlistener("conversationCreated", function PSStudioResourceComponent_Conditional_4_Conditional_14_Conditional_12_Template_mj_conversation_chat_area_conversationCreated_0_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onChatConversationCreated($event)); })("pendingMessageConsumed", function PSStudioResourceComponent_Conditional_4_Conditional_14_Conditional_12_Template_mj_conversation_chat_area_pendingMessageConsumed_0_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onChatPendingMessageConsumed()); })("navigationRequest", function PSStudioResourceComponent_Conditional_4_Conditional_14_Conditional_12_Template_mj_conversation_chat_area_navigationRequest_0_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onNavigationRequest($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("Provider", ctx_r1.Provider)("environmentId", ctx_r1.chatEnvironmentId)("currentUser", ctx_r1.currentUser)("conversation", ctx_r1.chatConversation)("conversationId", ctx_r1.chatConversationId)("isNewConversation", ctx_r1.chatIsNewConversation)("suppressNewConversationEmptyState", true)("allowMentions", false)("overlayMode", true)("showExportButton", false)("showShareButton", false)("showArtifactIndicator", false)("showAgentPicker", false)("showAgentModePicker", false)("defaultAgentId", ctx_r1.modelDevAgentId)("pendingMessage", ctx_r1.pendingPrompt)("applicationScope", "Application")("applicationId", ctx_r1.applicationId)("appContext", ctx_r1.chatAppContext);
+    i0.ɵɵproperty("Provider", ctx_r1.Provider)("environmentId", ctx_r1.chatEnvironmentId)("currentUser", ctx_r1.currentUser)("conversation", ctx_r1.chatConversation)("conversationId", ctx_r1.chatConversationId)("isNewConversation", ctx_r1.chatIsNewConversation)("suppressNewConversationEmptyState", true)("allowMentions", false)("overlayMode", false)("showExportButton", false)("showShareButton", false)("showArtifactIndicator", true)("showAgentPicker", false)("showAgentModePicker", false)("defaultAgentId", ctx_r1.modelDevAgentId)("pendingMessage", ctx_r1.pendingPrompt)("applicationScope", "Application")("applicationId", ctx_r1.applicationId)("appContext", ctx_r1.chatAppContext);
 } }
-function PSStudioResourceComponent_Conditional_4_Conditional_10_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 29);
-    i0.ɵɵelement(1, "mj-loading", 31);
+function PSStudioResourceComponent_Conditional_4_Conditional_14_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 47);
+    i0.ɵɵelement(1, "mj-loading", 49);
     i0.ɵɵelementEnd();
 } }
-function PSStudioResourceComponent_Conditional_4_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "aside", 15)(1, "div", 22)(2, "div", 23);
-    i0.ɵɵelement(3, "i", 24);
-    i0.ɵɵtext(4, " Model Dev Agent");
+function PSStudioResourceComponent_Conditional_4_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "as-split-area", 14)(1, "aside", 36)(2, "div", 37)(3, "div", 38);
+    i0.ɵɵelement(4, "i", 39);
+    i0.ɵɵtext(5, " Model Dev Agent");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 25);
-    i0.ɵɵlistener("click", function PSStudioResourceComponent_Conditional_4_Conditional_10_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.closeChat()); });
-    i0.ɵɵelement(6, "i", 26);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 27);
-    i0.ɵɵconditionalCreate(8, PSStudioResourceComponent_Conditional_4_Conditional_10_Conditional_8_Template, 1, 19, "mj-conversation-chat-area", 28)(9, PSStudioResourceComponent_Conditional_4_Conditional_10_Conditional_9_Template, 2, 0, "div", 29);
-    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(6, "div", 40)(7, "button", 41);
+    i0.ɵɵlistener("click", function PSStudioResourceComponent_Conditional_4_Conditional_14_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleCopilotExpanded()); });
+    i0.ɵɵelement(8, "i", 42);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "button", 43);
+    i0.ɵɵlistener("click", function PSStudioResourceComponent_Conditional_4_Conditional_14_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.closeChat()); });
+    i0.ɵɵelement(10, "i", 44);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(11, "div", 45);
+    i0.ɵɵconditionalCreate(12, PSStudioResourceComponent_Conditional_4_Conditional_14_Conditional_12_Template, 1, 19, "mj-conversation-chat-area", 46)(13, PSStudioResourceComponent_Conditional_4_Conditional_14_Conditional_13_Template, 2, 0, "div", 47);
+    i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(8);
-    i0.ɵɵconditional(ctx_r1.currentUser ? 8 : 9);
+    i0.ɵɵproperty("size", ctx_r1.copilotExpanded ? 60 : ctx_r1.copilotSizePct)("minSize", 20)("maxSize", 70);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("expanded", ctx_r1.copilotExpanded);
+    i0.ɵɵadvance(6);
+    i0.ɵɵproperty("title", ctx_r1.copilotExpanded ? "Collapse panel" : "Expand panel");
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("fa-up-right-and-down-left-from-center", !ctx_r1.copilotExpanded)("fa-down-left-and-up-right-to-center", ctx_r1.copilotExpanded);
+    i0.ɵɵadvance(4);
+    i0.ɵɵconditional(ctx_r1.currentUser ? 12 : 13);
 } }
 function PSStudioResourceComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 10)(1, "aside", 11);
-    i0.ɵɵrepeaterCreate(2, PSStudioResourceComponent_Conditional_4_For_3_Template, 3, 1, null, null, i0.ɵɵrepeaterTrackByIdentity);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "section", 12);
-    i0.ɵɵconditionalCreate(5, PSStudioResourceComponent_Conditional_4_Case_5_Template, 1, 3, "ps-home", 13)(6, PSStudioResourceComponent_Conditional_4_Case_6_Template, 1, 3, "ps-pipelines", 13)(7, PSStudioResourceComponent_Conditional_4_Case_7_Template, 1, 1, "ps-catalog", 14)(8, PSStudioResourceComponent_Conditional_4_Case_8_Template, 1, 3, "ps-experiments", 13)(9, PSStudioResourceComponent_Conditional_4_Case_9_Template, 1, 1, "ps-compare", 14);
-    i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(10, PSStudioResourceComponent_Conditional_4_Conditional_10_Template, 10, 1, "aside", 15);
-    i0.ɵɵelementEnd();
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 11);
+    i0.ɵɵconditionalCreate(1, PSStudioResourceComponent_Conditional_4_Conditional_1_Template, 6, 0, "div", 12);
+    i0.ɵɵelementStart(2, "as-split", 13);
+    i0.ɵɵlistener("dragEnd", function PSStudioResourceComponent_Conditional_4_Template_as_split_dragEnd_2_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onNavSplitDragEnd($event.sizes)); });
+    i0.ɵɵconditionalCreate(3, PSStudioResourceComponent_Conditional_4_Conditional_3_Template, 9, 3, "as-split-area", 14);
+    i0.ɵɵelementStart(4, "as-split-area", 15)(5, "div", 16)(6, "as-split", 17);
+    i0.ɵɵlistener("dragEnd", function PSStudioResourceComponent_Conditional_4_Template_as_split_dragEnd_6_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCopilotSplitDragEnd($event.sizes)); });
+    i0.ɵɵelementStart(7, "as-split-area", 15)(8, "section", 18);
+    i0.ɵɵconditionalCreate(9, PSStudioResourceComponent_Conditional_4_Case_9_Template, 1, 3, "ps-home", 19)(10, PSStudioResourceComponent_Conditional_4_Case_10_Template, 2, 3, "ps-pipelines", 19)(11, PSStudioResourceComponent_Conditional_4_Case_11_Template, 1, 1, "ps-catalog", 20)(12, PSStudioResourceComponent_Conditional_4_Case_12_Template, 1, 3, "ps-experiments", 19)(13, PSStudioResourceComponent_Conditional_4_Case_13_Template, 1, 1, "ps-compare", 20);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(14, PSStudioResourceComponent_Conditional_4_Conditional_14_Template, 14, 11, "as-split-area", 14);
+    i0.ɵɵelementEnd()()()()();
 } if (rf & 2) {
-    let tmp_5_0;
+    let tmp_13_0;
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("chat-open", ctx_r1.chatOpen);
-    i0.ɵɵadvance(2);
-    i0.ɵɵrepeater(ctx_r1.groups);
+    i0.ɵɵclassProp("nav-collapsed", ctx_r1.isNavCollapsed)("chat-open", ctx_r1.chatOpen);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.isNavCollapsed ? 1 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("gutterSize", ctx_r1.isNavCollapsed ? 0 : 6);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(!ctx_r1.isNavCollapsed ? 3 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("size", ctx_r1.isNavCollapsed ? 100 : 100 - ctx_r1.navSizePct)("minSize", 60);
     i0.ɵɵadvance(2);
+    i0.ɵɵproperty("gutterSize", ctx_r1.chatOpen ? 6 : 0);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("size", ctx_r1.chatOpen ? ctx_r1.copilotExpanded ? 40 : ctx_r1.mainSizePct : 100)("minSize", 30);
+    i0.ɵɵadvance();
     i0.ɵɵclassProp("fill", ctx_r1.activeSection === "pipelines");
     i0.ɵɵattribute("data-testid", "ps-panel-" + ctx_r1.activeSection);
     i0.ɵɵadvance();
-    i0.ɵɵconditional((tmp_5_0 = ctx_r1.activeSection) === "home" ? 5 : tmp_5_0 === "pipelines" ? 6 : tmp_5_0 === "catalog" ? 7 : tmp_5_0 === "experiments" ? 8 : tmp_5_0 === "compare" ? 9 : -1);
+    i0.ɵɵconditional((tmp_13_0 = ctx_r1.activeSection) === "home" ? 9 : tmp_13_0 === "pipelines" ? 10 : tmp_13_0 === "catalog" ? 11 : tmp_13_0 === "experiments" ? 12 : tmp_13_0 === "compare" ? 13 : -1);
     i0.ɵɵadvance(5);
-    i0.ɵɵconditional(ctx_r1.chatOpen ? 10 : -1);
+    i0.ɵɵconditional(ctx_r1.chatOpen ? 14 : -1);
 } }
 /** Predictive Studio application ID (from `metadata/applications/.predictive-studio-application.json`). */
 const PREDICTIVE_STUDIO_APP_ID = '299C9272-8D38-40CA-85D4-0980F2C9FAD1';
@@ -202,6 +258,13 @@ let PSStudioResourceComponent = class PSStudioResourceComponent extends PSResour
     /** The active workbench section (which panel renders). Round-trips through the `section` query param. */
     activeSection = 'home';
     sections = STUDIO_SECTIONS;
+    pipelinesComponent;
+    onCreatePipelineFromCatalog(algo) {
+        this.selectSection('pipelines');
+        setTimeout(() => {
+            this.pipelinesComponent?.openWizard(algo.ID);
+        }, 50);
+    }
     // ── docked Model Dev Agent copilot ───────────────────────────────
     chatOpen = false;
     pendingPrompt = null;
@@ -210,11 +273,62 @@ let PSStudioResourceComponent = class PSStudioResourceComponent extends PSResour
     chatConversation = null;
     chatConversationId = null;
     chatIsNewConversation = true;
+    isNavCollapsed = false;
+    navSizePct = 14;
+    mainSizePct = 68;
+    copilotSizePct = 32;
     ngOnInit() {
         super.ngOnInit();
         const initial = this.GetQueryParams()['section'];
         if (initial && hasSection(this.sections, initial))
             this.activeSection = initial;
+        this.loadLayoutPrefs();
+    }
+    toggleNav() {
+        this.isNavCollapsed = !this.isNavCollapsed;
+        this.saveLayoutPrefs();
+        this.cdrLocal.detectChanges();
+    }
+    onNavSplitDragEnd(sizes) {
+        if (Array.isArray(sizes) && sizes.length === 2 && typeof sizes[0] === 'number') {
+            this.navSizePct = Math.round(sizes[0]);
+            this.saveLayoutPrefs();
+        }
+    }
+    onCopilotSplitDragEnd(sizes) {
+        if (Array.isArray(sizes) && sizes.length === 2 && typeof sizes[0] === 'number' && typeof sizes[1] === 'number') {
+            this.mainSizePct = Math.round(sizes[0]);
+            this.copilotSizePct = Math.round(sizes[1]);
+            this.saveLayoutPrefs();
+        }
+    }
+    loadLayoutPrefs() {
+        const saved = UserInfoEngine.Instance.GetSetting('mj.predictiveStudio.studio.layout');
+        if (saved) {
+            try {
+                const parsed = JSON.parse(saved);
+                if (typeof parsed.navSizePct === 'number' && parsed.navSizePct >= 10 && parsed.navSizePct <= 35) {
+                    this.navSizePct = parsed.navSizePct;
+                }
+                if (typeof parsed.isNavCollapsed === 'boolean') {
+                    this.isNavCollapsed = parsed.isNavCollapsed;
+                }
+                if (typeof parsed.copilotSizePct === 'number' && parsed.copilotSizePct >= 20 && parsed.copilotSizePct <= 60) {
+                    this.copilotSizePct = parsed.copilotSizePct;
+                    this.mainSizePct = 100 - this.copilotSizePct;
+                }
+            }
+            catch { }
+        }
+    }
+    saveLayoutPrefs() {
+        const prefs = {
+            navSizePct: this.navSizePct,
+            isNavCollapsed: this.isNavCollapsed,
+            copilotSizePct: this.copilotSizePct,
+            mainSizePct: this.mainSizePct,
+        };
+        UserInfoEngine.Instance.SetSettingDebounced('mj.predictiveStudio.studio.layout', JSON.stringify(prefs));
     }
     /** React to deep-link / back-forward `section` changes after the initial mount. */
     OnQueryParamsChanged(params, _source) {
@@ -334,9 +448,23 @@ let PSStudioResourceComponent = class PSStudioResourceComponent extends PSResour
     closeChat() {
         this.chatOpen = false;
         this.pendingPrompt = null;
+        this.copilotExpanded = false;
         this.publishAgentContext();
         this.cdrLocal.detectChanges();
     }
+    copilotExpanded = false;
+    toggleCopilotExpanded() {
+        this.copilotExpanded = !this.copilotExpanded;
+        this.cdrLocal.detectChanges();
+    }
+    onNavigationRequest(req) {
+        if (req.navItemName === 'Models' || req.queryParams?.['modelId']) {
+            void this.navigationService.SwitchToApp(PREDICTIVE_STUDIO_APP_ID, 'Models', req.queryParams);
+        }
+        else if (req.appName) {
+            void this.navigationService.SwitchToApp(req.appName, req.navItemName, req.queryParams);
+        }
+    }
     /** Chat-area created its backing conversation on the first send — capture it + leave new-mode so the thread renders. */
     onChatConversationCreated(event) {
         this.pendingPrompt = event.pendingMessage ?? null;
@@ -366,10 +494,15 @@ let PSStudioResourceComponent = class PSStudioResourceComponent extends PSResour
         }
     }
     static ɵfac = /*@__PURE__*/ (() => { let ɵPSStudioResourceComponent_BaseFactory; return function PSStudioResourceComponent_Factory(__ngFactoryType__) { return (ɵPSStudioResourceComponent_BaseFactory || (ɵPSStudioResourceComponent_BaseFactory = i0.ɵɵgetInheritedFactory(PSStudioResourceComponent)))(__ngFactoryType__ || PSStudioResourceComponent); }; })();
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PSStudioResourceComponent, selectors: [["mj-ps-studio-resource"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 5, vars: 5, consts: [[3, "Title", "Subtitle"], [3, "Flex", "Padding"], ["text", "Loading Studio\u2026", "size", "medium"], ["data-testid", "ps-load-error", "role", "alert", 1, "ps-load-error"], ["data-testid", "ps-studio-shell", 1, "ps-studio-host", 3, "chat-open"], [1, "fa-solid", "fa-triangle-exclamation"], [1, "ps-load-error-text"], [1, "ps-load-error-detail"], ["mjButton", "", "variant", "secondary", "size", "sm", 3, "click"], [1, "fa-solid", "fa-rotate-right"], ["data-testid", "ps-studio-shell", 1, "ps-studio-host"], [1, "ps-leftnav"], [1, "ps-content"], [3, "engine", "provider", "currentUser"], [3, "engine"], ["data-testid", "ps-studio-copilot", 1, "ps-copilot"], [1, "ps-nav-group"], [1, "ps-nav-item", 3, "active"], [1, "ps-nav-item", 3, "click"], [3, "navigate", "askAgent", "engine", "provider", "currentUser"], [3, "askAgent", "engine", "provider", "currentUser"], [3, "askAgent", "engine"], [1, "ps-copilot-head"], [1, "ps-copilot-title"], [1, "fa-solid", "fa-robot"], ["aria-label", "Close agent chat", 1, "ps-copilot-close", 3, "click"], [1, "fa-solid", "fa-xmark"], [1, "ps-copilot-body"], [3, "Provider", "environmentId", "currentUser", "conversation", "conversationId", "isNewConversation", "suppressNewConversationEmptyState", "allowMentions", "overlayMode", "showExportButton", "showShareButton", "showArtifactIndicator", "showAgentPicker", "showAgentModePicker", "defaultAgentId", "pendingMessage", "applicationScope", "applicationId", "appContext"], [1, "ps-copilot-empty"], [3, "conversationCreated", "pendingMessageConsumed", "Provider", "environmentId", "currentUser", "conversation", "conversationId", "isNewConversation", "suppressNewConversationEmptyState", "allowMentions", "overlayMode", "showExportButton", "showShareButton", "showArtifactIndicator", "showAgentPicker", "showAgentModePicker", "defaultAgentId", "pendingMessage", "applicationScope", "applicationId", "appContext"], ["text", "Connecting\u2026", "size", "small"]], template: function PSStudioResourceComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelement(0, "mj-page-header-interior", 0);
-            i0.ɵɵelementStart(1, "mj-page-body-interior", 1);
-            i0.ɵɵconditionalCreate(2, PSStudioResourceComponent_Conditional_2_Template, 1, 0, "mj-loading", 2)(3, PSStudioResourceComponent_Conditional_3_Template, 10, 2, "div", 3)(4, PSStudioResourceComponent_Conditional_4_Template, 11, 7, "div", 4);
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PSStudioResourceComponent, selectors: [["mj-ps-studio-resource"]], viewQuery: function PSStudioResourceComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.pipelinesComponent = _t.first);
+        } }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 5, vars: 5, consts: [["pipelinesComp", ""], [3, "Title", "Subtitle"], [3, "Flex", "Padding"], ["text", "Loading Studio\u2026", "size", "medium"], ["data-testid", "ps-load-error", "role", "alert", 1, "ps-load-error"], ["data-testid", "ps-studio-shell", 1, "ps-studio-host", 3, "nav-collapsed", "chat-open"], [1, "fa-solid", "fa-triangle-exclamation"], [1, "ps-load-error-text"], [1, "ps-load-error-detail"], ["mjButton", "", "variant", "secondary", "size", "sm", 3, "click"], [1, "fa-solid", "fa-rotate-right"], ["data-testid", "ps-studio-shell", 1, "ps-studio-host"], ["role", "region", "aria-label", "Studio navigation (collapsed)", 1, "ps-nav-collapsed-strip"], ["direction", "horizontal", "unit", "percent", 1, "studio-outer-splitter", 3, "dragEnd", "gutterSize"], [3, "size", "minSize", "maxSize"], [3, "size", "minSize"], [1, "ps-studio-workspace"], ["direction", "horizontal", "unit", "percent", 1, "studio-copilot-splitter", 3, "dragEnd", "gutterSize"], [1, "ps-content"], [3, "engine", "provider", "currentUser"], [3, "engine"], ["type", "button", "aria-label", "Expand studio navigation", "title", "Expand navigation", 1, "ps-nav-rail-collapse", 3, "click"], [1, "fa-solid", "fa-chevron-right"], [1, "ps-nav-collapsed-strip-label"], [1, "fa-solid", "fa-flask-vial"], [1, "ps-leftnav"], [1, "ps-leftnav-header"], [1, "ps-leftnav-title"], ["type", "button", "title", "Collapse navigation", "aria-label", "Collapse navigation", 1, "ps-leftnav-collapse-btn", 3, "click"], [1, "fa-solid", "fa-chevron-left"], [1, "ps-nav-group"], [1, "ps-nav-item", 3, "active"], [1, "ps-nav-item", 3, "click"], [3, "navigate", "askAgent", "engine", "provider", "currentUser"], [3, "askAgent", "navigate", "engine", "provider", "currentUser"], [3, "askAgent", "createPipeline", "engine"], ["data-testid", "ps-studio-copilot", 1, "ps-copilot"], [1, "ps-copilot-head"], [1, "ps-copilot-title"], [1, "fa-solid", "fa-robot"], [1, "ps-copilot-actions"], [1, "ps-copilot-btn", 3, "click", "title"], [1, "fa-solid"], ["aria-label", "Close agent chat", 1, "ps-copilot-close", 3, "click"], [1, "fa-solid", "fa-xmark"], [1, "ps-copilot-body"], [3, "Provider", "environmentId", "currentUser", "conversation", "conversationId", "isNewConversation", "suppressNewConversationEmptyState", "allowMentions", "overlayMode", "showExportButton", "showShareButton", "showArtifactIndicator", "showAgentPicker", "showAgentModePicker", "defaultAgentId", "pendingMessage", "applicationScope", "applicationId", "appContext"], [1, "ps-copilot-empty"], [3, "conversationCreated", "pendingMessageConsumed", "navigationRequest", "Provider", "environmentId", "currentUser", "conversation", "conversationId", "isNewConversation", "suppressNewConversationEmptyState", "allowMentions", "overlayMode", "showExportButton", "showShareButton", "showArtifactIndicator", "showAgentPicker", "showAgentModePicker", "defaultAgentId", "pendingMessage", "applicationScope", "applicationId", "appContext"], ["text", "Connecting\u2026", "size", "small"]], template: function PSStudioResourceComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelement(0, "mj-page-header-interior", 1);
+            i0.ɵɵelementStart(1, "mj-page-body-interior", 2);
+            i0.ɵɵconditionalCreate(2, PSStudioResourceComponent_Conditional_2_Template, 1, 0, "mj-loading", 3)(3, PSStudioResourceComponent_Conditional_3_Template, 10, 2, "div", 4)(4, PSStudioResourceComponent_Conditional_4_Template, 15, 17, "div", 5);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵproperty("Title", ctx.activeLabel)("Subtitle", ctx.activeSubtitle);
@@ -377,7 +510,7 @@ let PSStudioResourceComponent = class PSStudioResourceComponent extends PSResour
             i0.ɵɵproperty("Flex", true)("Padding", false);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.isLoading ? 2 : ctx.loadError ? 3 : 4);
-        } }, dependencies: [i1.MJButtonDirective, i1.MJPageHeaderInteriorComponent, i1.MJPageBodyInteriorComponent, i2.LoadingComponent, i3.ConversationChatAreaComponent, i4.PSHomeComponent, i5.PSCatalogComponent, i6.PSPipelinesComponent, i7.PSExperimentsComponent, i8.PSCompareComponent], styles: ["[_nghost-%COMP%] { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; }\n      .ps-studio-host[_ngcontent-%COMP%] { display: flex; flex: 1; min-height: 0; overflow: hidden; }\n      .ps-leftnav[_ngcontent-%COMP%] { width: 210px; flex: none; border-right: 1px solid var(--mj-border-default); background: var(--mj-bg-surface-card); overflow-y: auto; padding: 10px 8px; display: flex; flex-direction: column; gap: 2px; }\n      .ps-nav-group[_ngcontent-%COMP%] { font-size: var(--mj-text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--mj-text-muted); padding: 12px 10px 4px; }\n      .ps-nav-item[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; border: none; background: transparent; border-radius: var(--mj-radius-md); cursor: pointer; color: var(--mj-text-secondary); font-size: var(--mj-text-sm); font-weight: 500; transition: background .12s, color .12s; }\n      .ps-nav-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { width: 18px; text-align: center; color: var(--mj-text-muted); }\n      .ps-nav-item[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-hover); color: var(--mj-text-primary); }\n      .ps-nav-item.active[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent); color: var(--mj-brand-primary); font-weight: 600; }\n      .ps-nav-item.active[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { color: var(--mj-brand-primary); }\n      .ps-content[_ngcontent-%COMP%] { flex: 1; min-width: 0; overflow-y: auto; padding: 8px 14px 24px; }\n      \n\n      .ps-content.fill[_ngcontent-%COMP%] { overflow: hidden; display: flex; flex-direction: column; padding-bottom: 14px; }\n      .ps-content.fill[_ngcontent-%COMP%]    > *[_ngcontent-%COMP%] { flex: 1; min-height: 0; display: flex; flex-direction: column; }\n      .ps-copilot[_ngcontent-%COMP%] { width: 420px; max-width: 42vw; flex: none; border-left: 1px solid var(--mj-border-default); background: var(--mj-bg-surface); display: flex; flex-direction: column; min-height: 0; }\n      .ps-copilot-head[_ngcontent-%COMP%] { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--mj-border-default); }\n      .ps-copilot-title[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--mj-text-primary); }\n      .ps-copilot-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { color: var(--mj-brand-primary); }\n      .ps-copilot-close[_ngcontent-%COMP%] { background: transparent; border: none; cursor: pointer; padding: 6px 8px; border-radius: 6px; color: var(--mj-text-muted); }\n      .ps-copilot-close[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-hover); color: var(--mj-text-secondary); }\n      .ps-copilot-body[_ngcontent-%COMP%] { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }\n      .ps-copilot-body[_ngcontent-%COMP%]   mj-conversation-chat-area[_ngcontent-%COMP%] { flex: 1; min-height: 0; display: block; }\n      .ps-copilot-empty[_ngcontent-%COMP%] { display: flex; align-items: center; justify-content: center; flex: 1; }\n      .ps-load-error[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 14px; max-width: 620px; margin: 32px auto; padding: 18px 20px; border: 1px solid var(--mj-status-error-border); background: var(--mj-status-error-bg); border-radius: var(--mj-radius-lg); }\n      .ps-load-error[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] { font-size: 24px; color: var(--mj-status-error); }\n      .ps-load-error-text[_ngcontent-%COMP%] { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }\n      .ps-load-error-text[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] { color: var(--mj-text-primary); }\n      .ps-load-error-detail[_ngcontent-%COMP%] { color: var(--mj-text-secondary); font-size: var(--mj-text-sm); word-break: break-word; }\n      @media (max-width: 1100px) { .ps-studio-host.chat-open[_ngcontent-%COMP%]   .ps-content[_ngcontent-%COMP%], .ps-studio-host.chat-open[_ngcontent-%COMP%]   .ps-leftnav[_ngcontent-%COMP%] { display: none; } .ps-copilot[_ngcontent-%COMP%] { width: 100%; max-width: none; border-left: none; } }"], changeDetection: 0 });
+        } }, dependencies: [i1.MJButtonDirective, i1.MJPageHeaderInteriorComponent, i1.MJPageBodyInteriorComponent, i2.LoadingComponent, i3.ConversationChatAreaComponent, i4.SplitComponent, i4.SplitAreaComponent, i5.PSHomeComponent, i6.PSCatalogComponent, i7.PSPipelinesComponent, i8.PSExperimentsComponent, i9.PSCompareComponent], styles: ["[_nghost-%COMP%] { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; }\n      .ps-studio-host[_ngcontent-%COMP%] { display: flex; flex: 1; min-height: 0; overflow: hidden; width: 100%; height: 100%; }\n      .studio-outer-splitter[_ngcontent-%COMP%] { flex: 1; width: 100%; height: 100%; min-height: 0; min-width: 0; background: transparent; }\n      .studio-outer-splitter[_ngcontent-%COMP%]   .as-split-gutter[_ngcontent-%COMP%] { background: transparent; transition: background-color 0.15s ease; position: relative; }\n      .studio-outer-splitter[_ngcontent-%COMP%]   .as-split-gutter[_ngcontent-%COMP%]:hover { background-color: var(--mj-brand-primary, #6366f1); }\n      .studio-outer-splitter[_ngcontent-%COMP%]   .as-split-gutter[_ngcontent-%COMP%]::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 2px; height: 24px; border-radius: 1px; background: var(--mj-border-strong, #cbd5e1); }\n      .studio-outer-splitter[_ngcontent-%COMP%]   .as-split-gutter[_ngcontent-%COMP%]:hover::after { background: #ffffff; }\n\n      .ps-nav-collapsed-strip[_ngcontent-%COMP%] { width: 44px; min-width: 44px; max-width: 44px; flex: none; background: var(--mj-bg-surface); border-right: 1px solid var(--mj-border-default); display: flex; flex-direction: column; align-items: center; padding: 10px 0; gap: 14px; z-index: 2; }\n      .ps-nav-rail-collapse[_ngcontent-%COMP%] { background: var(--mj-bg-surface-subtle); border: 1px solid var(--mj-border-default); border-radius: 6px; color: var(--mj-text-secondary); cursor: pointer; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; font-size: 11px; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; }\n      .ps-nav-rail-collapse[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-hover); color: var(--mj-text-primary); border-color: var(--mj-border-strong); }\n      .ps-nav-collapsed-strip-label[_ngcontent-%COMP%] { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--mj-text-muted); display: flex; align-items: center; gap: 8px; text-transform: uppercase; }\n\n      .ps-leftnav[_ngcontent-%COMP%] { width: 100%; height: 100%; border-right: 1px solid var(--mj-border-default); background: var(--mj-bg-surface-card); overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 2px; box-sizing: border-box; }\n      .ps-leftnav-header[_ngcontent-%COMP%] { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 8px; border-bottom: 1px solid var(--mj-border-subtle); margin-bottom: 4px; }\n      .ps-leftnav-title[_ngcontent-%COMP%] { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--mj-text-muted); }\n      .ps-leftnav-collapse-btn[_ngcontent-%COMP%] { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--mj-border-default); background: var(--mj-bg-surface); color: var(--mj-text-muted); cursor: pointer; transition: all 0.15s ease; padding: 0; }\n      .ps-leftnav-collapse-btn[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-hover); color: var(--mj-text-primary); border-color: var(--mj-border-strong); }\n\n      .ps-nav-group[_ngcontent-%COMP%] { font-size: var(--mj-text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--mj-text-muted); padding: 10px 8px 4px; }\n      .ps-nav-item[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; border: none; background: transparent; border-radius: var(--mj-radius-md); cursor: pointer; color: var(--mj-text-secondary); font-size: var(--mj-text-sm); font-weight: 500; transition: background .12s, color .12s; }\n      .ps-nav-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { width: 18px; text-align: center; color: var(--mj-text-muted); }\n      .ps-nav-item[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-hover); color: var(--mj-text-primary); }\n      .ps-nav-item.active[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent); color: var(--mj-brand-primary); font-weight: 600; }\n      .ps-nav-item.active[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { color: var(--mj-brand-primary); }\n\n      .ps-studio-workspace[_ngcontent-%COMP%] { display: flex; flex: 1; width: 100%; height: 100%; min-height: 0; min-width: 0; overflow: hidden; }\n      .studio-copilot-splitter[_ngcontent-%COMP%] { flex: 1; width: 100%; height: 100%; min-height: 0; min-width: 0; }\n      .studio-copilot-splitter[_ngcontent-%COMP%]   .as-split-gutter[_ngcontent-%COMP%] { background: transparent; transition: background-color 0.15s ease; position: relative; }\n      .studio-copilot-splitter[_ngcontent-%COMP%]   .as-split-gutter[_ngcontent-%COMP%]:hover { background-color: var(--mj-brand-primary, #6366f1); }\n      .studio-copilot-splitter[_ngcontent-%COMP%]   .as-split-gutter[_ngcontent-%COMP%]::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 2px; height: 24px; border-radius: 1px; background: var(--mj-border-strong, #cbd5e1); }\n      .ps-content[_ngcontent-%COMP%] { width: 100%; height: 100%; flex: 1; min-width: 0; overflow-y: auto; padding: 8px 14px 24px; }\n      \n\n      .ps-content.fill[_ngcontent-%COMP%] { overflow: hidden; display: flex; flex-direction: column; padding-bottom: 14px; }\n      .ps-content.fill[_ngcontent-%COMP%]    > *[_ngcontent-%COMP%] { flex: 1; min-height: 0; display: flex; flex-direction: column; }\n      .ps-copilot[_ngcontent-%COMP%] { width: 100%; height: 100%; max-width: none; flex: 1; border-left: 1px solid var(--mj-border-default); background: var(--mj-bg-surface); display: flex; flex-direction: column; min-height: 0; }\n      .ps-copilot-head[_ngcontent-%COMP%] { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--mj-border-default); }\n      .ps-copilot-title[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--mj-text-primary); }\n      .ps-copilot-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { color: var(--mj-brand-primary); }\n      .ps-copilot-actions[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 4px; }\n      .ps-copilot-btn[_ngcontent-%COMP%] { background: transparent; border: none; cursor: pointer; padding: 6px 8px; border-radius: 6px; color: var(--mj-text-muted); }\n      .ps-copilot-btn[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-hover); color: var(--mj-text-secondary); }\n      .ps-copilot-close[_ngcontent-%COMP%] { background: transparent; border: none; cursor: pointer; padding: 6px 8px; border-radius: 6px; color: var(--mj-text-muted); }\n      .ps-copilot-close[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-hover); color: var(--mj-text-secondary); }\n      .ps-copilot-body[_ngcontent-%COMP%] { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }\n      .ps-copilot-body[_ngcontent-%COMP%]   mj-conversation-chat-area[_ngcontent-%COMP%] { flex: 1; min-height: 0; display: block; }\n      .ps-copilot-empty[_ngcontent-%COMP%] { display: flex; align-items: center; justify-content: center; flex: 1; }\n      .ps-load-error[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 14px; max-width: 620px; margin: 32px auto; padding: 18px 20px; border: 1px solid var(--mj-status-error-border); background: var(--mj-status-error-bg); border-radius: var(--mj-radius-lg); }\n      .ps-load-error[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] { font-size: 24px; color: var(--mj-status-error); }\n      .ps-load-error-text[_ngcontent-%COMP%] { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }\n      .ps-load-error-text[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] { color: var(--mj-text-primary); }\n      .ps-load-error-detail[_ngcontent-%COMP%] { color: var(--mj-text-secondary); font-size: var(--mj-text-sm); word-break: break-word; }\n      @media (max-width: 1100px) { .ps-studio-host.chat-open[_ngcontent-%COMP%]   .ps-content[_ngcontent-%COMP%], .ps-studio-host.chat-open[_ngcontent-%COMP%]   .ps-leftnav[_ngcontent-%COMP%] { display: none; } .ps-copilot[_ngcontent-%COMP%] { width: 100%; max-width: none; border-left: none; } }"], changeDetection: 0 });
 };
 PSStudioResourceComponent = __decorate([
     RegisterClass(BaseResourceComponent, 'PredictiveStudioStudioResource')
@@ -401,58 +534,96 @@ export { PSStudioResourceComponent };
           <button mjButton variant="secondary" size="sm" (click)="retryLoad()"><i class="fa-solid fa-rotate-right"></i> Try again</button>
         </div>
       } @else {
-        <div class="ps-studio-host" [class.chat-open]="chatOpen" data-testid="ps-studio-shell">
-          <aside class="ps-leftnav">
-            @for (group of groups; track group) {
-              @if (group) { <div class="ps-nav-group">{{ group }}</div> }
-              @for (item of itemsForGroup(group); track item.key) {
-                <button class="ps-nav-item" [class.active]="activeSection === item.key"
-                  [attr.data-testid]="'ps-nav-' + item.key" (click)="selectSection(item.key)">
-                  <i [class]="item.icon"></i> <span>{{ item.label }}</span>
-                </button>
-              }
-            }
-          </aside>
+        <div class="ps-studio-host" [class.nav-collapsed]="isNavCollapsed" [class.chat-open]="chatOpen" data-testid="ps-studio-shell">
+          @if (isNavCollapsed) {
+            <div class="ps-nav-collapsed-strip" role="region" aria-label="Studio navigation (collapsed)">
+              <button class="ps-nav-rail-collapse" type="button" (click)="toggleNav()" aria-label="Expand studio navigation" title="Expand navigation">
+                <i class="fa-solid fa-chevron-right"></i>
+              </button>
+              <div class="ps-nav-collapsed-strip-label"><i class="fa-solid fa-flask-vial"></i> Studio</div>
+            </div>
+          }
 
-          <section class="ps-content" [class.fill]="activeSection === 'pipelines'" [attr.data-testid]="'ps-panel-' + activeSection">
-            @switch (activeSection) {
-              @case ('home') { <ps-home [engine]="engine" [provider]="ProviderToUse" [currentUser]="ProviderToUse.CurrentUser" (navigate)="mapNavigate($event)" (askAgent)="onAskAgent($event)"></ps-home> }
-              @case ('pipelines') { <ps-pipelines [engine]="engine" [provider]="ProviderToUse" [currentUser]="ProviderToUse.CurrentUser" (askAgent)="onAskAgent($event)"></ps-pipelines> }
-              @case ('catalog') { <ps-catalog [engine]="engine" (askAgent)="onAskAgent($event)"></ps-catalog> }
-              @case ('experiments') { <ps-experiments [engine]="engine" [provider]="ProviderToUse" [currentUser]="ProviderToUse.CurrentUser"></ps-experiments> }
-              @case ('compare') { <ps-compare [engine]="engine"></ps-compare> }
+          <as-split direction="horizontal" class="studio-outer-splitter" unit="percent" [gutterSize]="isNavCollapsed ? 0 : 6" (dragEnd)="onNavSplitDragEnd($event.sizes)">
+            @if (!isNavCollapsed) {
+              <as-split-area [size]="navSizePct" [minSize]="10" [maxSize]="30">
+                <aside class="ps-leftnav">
+                  <div class="ps-leftnav-header">
+                    <span class="ps-leftnav-title">Studio</span>
+                    <button class="ps-leftnav-collapse-btn" type="button" (click)="toggleNav()" title="Collapse navigation" aria-label="Collapse navigation">
+                      <i class="fa-solid fa-chevron-left"></i>
+                    </button>
+                  </div>
+                  @for (group of groups; track group) {
+                    @if (group) { <div class="ps-nav-group">{{ group }}</div> }
+                    @for (item of itemsForGroup(group); track item.key) {
+                      <button class="ps-nav-item" [class.active]="activeSection === item.key"
+                        [attr.data-testid]="'ps-nav-' + item.key" (click)="selectSection(item.key)">
+                        <i [class]="item.icon"></i> <span>{{ item.label }}</span>
+                      </button>
+                    }
+                  }
+                </aside>
+              </as-split-area>
             }
-          </section>
 
-          @if (chatOpen) {
-            <aside class="ps-copilot" data-testid="ps-studio-copilot">
-              <div class="ps-copilot-head">
-                <div class="ps-copilot-title"><i class="fa-solid fa-robot"></i> Model Dev Agent</div>
-                <button class="ps-copilot-close" (click)="closeChat()" aria-label="Close agent chat"><i class="fa-solid fa-xmark"></i></button>
-              </div>
-              <div class="ps-copilot-body">
-                @if (currentUser) {
-                  <mj-conversation-chat-area
-                    [Provider]="Provider" [environmentId]="chatEnvironmentId" [currentUser]="currentUser"
-                    [conversation]="chatConversation" [conversationId]="chatConversationId" [isNewConversation]="chatIsNewConversation"
-                    [suppressNewConversationEmptyState]="true" [allowMentions]="false" [overlayMode]="true"
-                    [showExportButton]="false" [showShareButton]="false" [showArtifactIndicator]="false"
-                    [showAgentPicker]="false" [showAgentModePicker]="false"
-                    [defaultAgentId]="modelDevAgentId" [pendingMessage]="pendingPrompt"
-                    [applicationScope]="'Application'" [applicationId]="applicationId" [appContext]="chatAppContext"
-                    (conversationCreated)="onChatConversationCreated($event)"
-                    (pendingMessageConsumed)="onChatPendingMessageConsumed()">
-                  </mj-conversation-chat-area>
-                } @else { <div class="ps-copilot-empty"><mj-loading text="Connecting…" size="small"></mj-loading></div> }
+            <as-split-area [size]="isNavCollapsed ? 100 : (100 - navSizePct)" [minSize]="60">
+              <div class="ps-studio-workspace">
+                <as-split direction="horizontal" class="studio-copilot-splitter" unit="percent" [gutterSize]="chatOpen ? 6 : 0" (dragEnd)="onCopilotSplitDragEnd($event.sizes)">
+                  <as-split-area [size]="chatOpen ? (copilotExpanded ? 40 : mainSizePct) : 100" [minSize]="30">
+                    <section class="ps-content" [class.fill]="activeSection === 'pipelines'" [attr.data-testid]="'ps-panel-' + activeSection">
+                      @switch (activeSection) {
+                        @case ('home') { <ps-home [engine]="engine" [provider]="ProviderToUse" [currentUser]="ProviderToUse.CurrentUser" (navigate)="mapNavigate($event)" (askAgent)="onAskAgent($event)"></ps-home> }
+                        @case ('pipelines') { <ps-pipelines #pipelinesComp [engine]="engine" [provider]="ProviderToUse" [currentUser]="ProviderToUse.CurrentUser" (askAgent)="onAskAgent($event)" (navigate)="mapNavigate($event)"></ps-pipelines> }
+                        @case ('catalog') { <ps-catalog [engine]="engine" (askAgent)="onAskAgent($event)" (createPipeline)="onCreatePipelineFromCatalog($event)"></ps-catalog> }
+                        @case ('experiments') { <ps-experiments [engine]="engine" [provider]="ProviderToUse" [currentUser]="ProviderToUse.CurrentUser"></ps-experiments> }
+                        @case ('compare') { <ps-compare [engine]="engine"></ps-compare> }
+                      }
+                    </section>
+                  </as-split-area>
+
+                  @if (chatOpen) {
+                    <as-split-area [size]="copilotExpanded ? 60 : copilotSizePct" [minSize]="20" [maxSize]="70">
+                      <aside class="ps-copilot" [class.expanded]="copilotExpanded" data-testid="ps-studio-copilot">
+                        <div class="ps-copilot-head">
+                          <div class="ps-copilot-title"><i class="fa-solid fa-robot"></i> Model Dev Agent</div>
+                          <div class="ps-copilot-actions">
+                            <button class="ps-copilot-btn" (click)="toggleCopilotExpanded()" [title]="copilotExpanded ? 'Collapse panel' : 'Expand panel'"><i class="fa-solid" [class.fa-up-right-and-down-left-from-center]="!copilotExpanded" [class.fa-down-left-and-up-right-to-center]="copilotExpanded"></i></button>
+                            <button class="ps-copilot-close" (click)="closeChat()" aria-label="Close agent chat"><i class="fa-solid fa-xmark"></i></button>
+                          </div>
+                        </div>
+                        <div class="ps-copilot-body">
+                          @if (currentUser) {
+                            <mj-conversation-chat-area
+                              [Provider]="Provider" [environmentId]="chatEnvironmentId" [currentUser]="currentUser"
+                              [conversation]="chatConversation" [conversationId]="chatConversationId" [isNewConversation]="chatIsNewConversation"
+                              [suppressNewConversationEmptyState]="true" [allowMentions]="false" [overlayMode]="false"
+                              [showExportButton]="false" [showShareButton]="false" [showArtifactIndicator]="true"
+                              [showAgentPicker]="false" [showAgentModePicker]="false"
+                              [defaultAgentId]="modelDevAgentId" [pendingMessage]="pendingPrompt"
+                              [applicationScope]="'Application'" [applicationId]="applicationId" [appContext]="chatAppContext"
+                              (conversationCreated)="onChatConversationCreated($event)"
+                              (pendingMessageConsumed)="onChatPendingMessageConsumed()"
+                              (navigationRequest)="onNavigationRequest($event)">
+                            </mj-conversation-chat-area>
+                          } @else { <div class="ps-copilot-empty"><mj-loading text="Connecting…" size="small"></mj-loading></div> }
+                        </div>
+                      </aside>
+                    </as-split-area>
+                  }
+                </as-split>
               </div>
-            </aside>
-          }
+            </as-split-area>
+          </as-split>
         </div>
       }
     </mj-page-body-interior>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["\n      :host { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; }\n      .ps-studio-host { display: flex; flex: 1; min-height: 0; overflow: hidden; }\n      .ps-leftnav { width: 210px; flex: none; border-right: 1px solid var(--mj-border-default); background: var(--mj-bg-surface-card); overflow-y: auto; padding: 10px 8px; display: flex; flex-direction: column; gap: 2px; }\n      .ps-nav-group { font-size: var(--mj-text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--mj-text-muted); padding: 12px 10px 4px; }\n      .ps-nav-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; border: none; background: transparent; border-radius: var(--mj-radius-md); cursor: pointer; color: var(--mj-text-secondary); font-size: var(--mj-text-sm); font-weight: 500; transition: background .12s, color .12s; }\n      .ps-nav-item i { width: 18px; text-align: center; color: var(--mj-text-muted); }\n      .ps-nav-item:hover { background: var(--mj-bg-surface-hover); color: var(--mj-text-primary); }\n      .ps-nav-item.active { background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent); color: var(--mj-brand-primary); font-weight: 600; }\n      .ps-nav-item.active i { color: var(--mj-brand-primary); }\n      .ps-content { flex: 1; min-width: 0; overflow-y: auto; padding: 8px 14px 24px; }\n      /* Fill mode (pipelines): the section stops page-scrolling so the panel's inner\n         columns (canvas / inspector) can each own their scrollbar. */\n      .ps-content.fill { overflow: hidden; display: flex; flex-direction: column; padding-bottom: 14px; }\n      .ps-content.fill > * { flex: 1; min-height: 0; display: flex; flex-direction: column; }\n      .ps-copilot { width: 420px; max-width: 42vw; flex: none; border-left: 1px solid var(--mj-border-default); background: var(--mj-bg-surface); display: flex; flex-direction: column; min-height: 0; }\n      .ps-copilot-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--mj-border-default); }\n      .ps-copilot-title { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--mj-text-primary); }\n      .ps-copilot-title i { color: var(--mj-brand-primary); }\n      .ps-copilot-close { background: transparent; border: none; cursor: pointer; padding: 6px 8px; border-radius: 6px; color: var(--mj-text-muted); }\n      .ps-copilot-close:hover { background: var(--mj-bg-surface-hover); color: var(--mj-text-secondary); }\n      .ps-copilot-body { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }\n      .ps-copilot-body mj-conversation-chat-area { flex: 1; min-height: 0; display: block; }\n      .ps-copilot-empty { display: flex; align-items: center; justify-content: center; flex: 1; }\n      .ps-load-error { display: flex; align-items: center; gap: 14px; max-width: 620px; margin: 32px auto; padding: 18px 20px; border: 1px solid var(--mj-status-error-border); background: var(--mj-status-error-bg); border-radius: var(--mj-radius-lg); }\n      .ps-load-error > i { font-size: 24px; color: var(--mj-status-error); }\n      .ps-load-error-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }\n      .ps-load-error-text strong { color: var(--mj-text-primary); }\n      .ps-load-error-detail { color: var(--mj-text-secondary); font-size: var(--mj-text-sm); word-break: break-word; }\n      @media (max-width: 1100px) { .ps-studio-host.chat-open .ps-content, .ps-studio-host.chat-open .ps-leftnav { display: none; } .ps-copilot { width: 100%; max-width: none; border-left: none; } }\n    "] }]
-    }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PSStudioResourceComponent, { className: "PSStudioResourceComponent", filePath: "src/PredictiveStudio/resources/ps-studio-resource.component.ts", lineNumber: 141 }); })();
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["\n      :host { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; }\n      .ps-studio-host { display: flex; flex: 1; min-height: 0; overflow: hidden; width: 100%; height: 100%; }\n      .studio-outer-splitter { flex: 1; width: 100%; height: 100%; min-height: 0; min-width: 0; background: transparent; }\n      .studio-outer-splitter .as-split-gutter { background: transparent; transition: background-color 0.15s ease; position: relative; }\n      .studio-outer-splitter .as-split-gutter:hover { background-color: var(--mj-brand-primary, #6366f1); }\n      .studio-outer-splitter .as-split-gutter::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 2px; height: 24px; border-radius: 1px; background: var(--mj-border-strong, #cbd5e1); }\n      .studio-outer-splitter .as-split-gutter:hover::after { background: #ffffff; }\n\n      .ps-nav-collapsed-strip { width: 44px; min-width: 44px; max-width: 44px; flex: none; background: var(--mj-bg-surface); border-right: 1px solid var(--mj-border-default); display: flex; flex-direction: column; align-items: center; padding: 10px 0; gap: 14px; z-index: 2; }\n      .ps-nav-rail-collapse { background: var(--mj-bg-surface-subtle); border: 1px solid var(--mj-border-default); border-radius: 6px; color: var(--mj-text-secondary); cursor: pointer; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; font-size: 11px; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; }\n      .ps-nav-rail-collapse:hover { background: var(--mj-bg-surface-hover); color: var(--mj-text-primary); border-color: var(--mj-border-strong); }\n      .ps-nav-collapsed-strip-label { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--mj-text-muted); display: flex; align-items: center; gap: 8px; text-transform: uppercase; }\n\n      .ps-leftnav { width: 100%; height: 100%; border-right: 1px solid var(--mj-border-default); background: var(--mj-bg-surface-card); overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 2px; box-sizing: border-box; }\n      .ps-leftnav-header { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 8px; border-bottom: 1px solid var(--mj-border-subtle); margin-bottom: 4px; }\n      .ps-leftnav-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--mj-text-muted); }\n      .ps-leftnav-collapse-btn { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--mj-border-default); background: var(--mj-bg-surface); color: var(--mj-text-muted); cursor: pointer; transition: all 0.15s ease; padding: 0; }\n      .ps-leftnav-collapse-btn:hover { background: var(--mj-bg-surface-hover); color: var(--mj-text-primary); border-color: var(--mj-border-strong); }\n\n      .ps-nav-group { font-size: var(--mj-text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--mj-text-muted); padding: 10px 8px 4px; }\n      .ps-nav-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; border: none; background: transparent; border-radius: var(--mj-radius-md); cursor: pointer; color: var(--mj-text-secondary); font-size: var(--mj-text-sm); font-weight: 500; transition: background .12s, color .12s; }\n      .ps-nav-item i { width: 18px; text-align: center; color: var(--mj-text-muted); }\n      .ps-nav-item:hover { background: var(--mj-bg-surface-hover); color: var(--mj-text-primary); }\n      .ps-nav-item.active { background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent); color: var(--mj-brand-primary); font-weight: 600; }\n      .ps-nav-item.active i { color: var(--mj-brand-primary); }\n\n      .ps-studio-workspace { display: flex; flex: 1; width: 100%; height: 100%; min-height: 0; min-width: 0; overflow: hidden; }\n      .studio-copilot-splitter { flex: 1; width: 100%; height: 100%; min-height: 0; min-width: 0; }\n      .studio-copilot-splitter .as-split-gutter { background: transparent; transition: background-color 0.15s ease; position: relative; }\n      .studio-copilot-splitter .as-split-gutter:hover { background-color: var(--mj-brand-primary, #6366f1); }\n      .studio-copilot-splitter .as-split-gutter::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 2px; height: 24px; border-radius: 1px; background: var(--mj-border-strong, #cbd5e1); }\n      .ps-content { width: 100%; height: 100%; flex: 1; min-width: 0; overflow-y: auto; padding: 8px 14px 24px; }\n      /* Fill mode (pipelines): the section stops page-scrolling so the panel's inner\n         columns (canvas / inspector) can each own their scrollbar. */\n      .ps-content.fill { overflow: hidden; display: flex; flex-direction: column; padding-bottom: 14px; }\n      .ps-content.fill > * { flex: 1; min-height: 0; display: flex; flex-direction: column; }\n      .ps-copilot { width: 100%; height: 100%; max-width: none; flex: 1; border-left: 1px solid var(--mj-border-default); background: var(--mj-bg-surface); display: flex; flex-direction: column; min-height: 0; }\n      .ps-copilot-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--mj-border-default); }\n      .ps-copilot-title { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--mj-text-primary); }\n      .ps-copilot-title i { color: var(--mj-brand-primary); }\n      .ps-copilot-actions { display: flex; align-items: center; gap: 4px; }\n      .ps-copilot-btn { background: transparent; border: none; cursor: pointer; padding: 6px 8px; border-radius: 6px; color: var(--mj-text-muted); }\n      .ps-copilot-btn:hover { background: var(--mj-bg-surface-hover); color: var(--mj-text-secondary); }\n      .ps-copilot-close { background: transparent; border: none; cursor: pointer; padding: 6px 8px; border-radius: 6px; color: var(--mj-text-muted); }\n      .ps-copilot-close:hover { background: var(--mj-bg-surface-hover); color: var(--mj-text-secondary); }\n      .ps-copilot-body { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }\n      .ps-copilot-body mj-conversation-chat-area { flex: 1; min-height: 0; display: block; }\n      .ps-copilot-empty { display: flex; align-items: center; justify-content: center; flex: 1; }\n      .ps-load-error { display: flex; align-items: center; gap: 14px; max-width: 620px; margin: 32px auto; padding: 18px 20px; border: 1px solid var(--mj-status-error-border); background: var(--mj-status-error-bg); border-radius: var(--mj-radius-lg); }\n      .ps-load-error > i { font-size: 24px; color: var(--mj-status-error); }\n      .ps-load-error-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }\n      .ps-load-error-text strong { color: var(--mj-text-primary); }\n      .ps-load-error-detail { color: var(--mj-text-secondary); font-size: var(--mj-text-sm); word-break: break-word; }\n      @media (max-width: 1100px) { .ps-studio-host.chat-open .ps-content, .ps-studio-host.chat-open .ps-leftnav { display: none; } .ps-copilot { width: 100%; max-width: none; border-left: none; } }\n    "] }]
+    }], null, { pipelinesComponent: [{
+            type: ViewChild,
+            args: ['pipelinesComp']
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PSStudioResourceComponent, { className: "PSStudioResourceComponent", filePath: "src/PredictiveStudio/resources/ps-studio-resource.component.ts", lineNumber: 207 }); })();
 /** Tree-shaking prevention — called from the subpath module so the @RegisterClass survives bundling. */
 export function LoadPSStudioResource() {
     // intentionally empty