@eric-emg/symphiq-components 1.3.49 → 1.3.51

package/fesm2022/symphiq-components.mjs

@@ -44215,6 +44215,21 @@ class ProfileAnalysisModalComponent {
                 }, 0);
                 return;
             }
+            // Close ProfileAnalysisModalComponent when navigating to unified dashboard types
+            // These should be handled by UnifiedDashboardModalComponent
+            const unifiedDashboardOwnedTypes = ['unified-goal-detail', 'unified-goal-objectives', 'unified-goal-related-metrics'];
+            if (unifiedDashboardOwnedTypes.includes(state.type || '')) {
+                console.log('[ProfileAnalysisModal] Closing - unified dashboard type detected:', state.type);
+                this.isOpen.set(false);
+                setTimeout(() => {
+                    this.modalData.set(null);
+                    this.modalType.set(null);
+                    this.modalTitle.set('');
+                    this.navigationStack.set([]);
+                    this.currentCharts.set([]);
+                }, 0);
+                return;
+            }
             // Check if navigation originates from unified dashboard flow
             // If so, let UnifiedDashboardModalComponent handle objective-strategies and strategy-recommendations
             const unifiedDashboardTypes = ['objective-strategies', 'strategy-recommendations'];
@@ -44222,6 +44237,7 @@ class ProfileAnalysisModalComponent {
                 const isFromUnifiedFlow = state.previousState?.type?.startsWith('unified-goal-') ||
                     state.navigationStack?.some(s => s.type?.startsWith('unified-goal-'));
                 if (isFromUnifiedFlow) {
+                    console.log('[ProfileAnalysisModal] Closing - unified flow detected for:', state.type);
                     this.isOpen.set(false);
                     setTimeout(() => {
                         this.modalData.set(null);
@@ -44486,6 +44502,14 @@ class ProfileAnalysisModalComponent {
             }
             else if (state.type === 'metric' && state.data) {
                 const metric = state.data;
+                console.log('[ProfileAnalysisModal] Handling metric state:', {
+                    metricName: metric.metric,
+                    chartsFromState: state.charts?.length || 0,
+                    chartIds: state.charts?.map(c => c.performanceItemId),
+                    allChartsInput: this.allCharts()?.length || 0,
+                    navigationStackLength: state.navigationStack?.length || 0,
+                    navigationStackTypes: state.navigationStack?.map(s => s.type)
+                });
                 this.modalData.set(metric);
                 const formattedName = metric.metric ? this.metricFormatter.formatMetricName(metric.metric) : 'Metric Details';
                 this.modalTitle.set(formattedName);
@@ -101768,58 +101792,76 @@ const _forTrack0$b = ($index, $item) => $item.id;
 const _forTrack1$2 = ($index, $item) => $item.title;
 function UnifiedTimelineComponent_Conditional_0_For_8_Conditional_11_For_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 19);
-    i0.ɵɵelement(1, "span", 21);
-    i0.ɵɵelementStart(2, "span", 22);
+    i0.ɵɵelement(1, "span", 20);
+    i0.ɵɵelementStart(2, "span", 21);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const milestone_r4 = ctx.$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(4);
-    i0.ɵɵproperty("ngClass", ctx_r2.objectiveItemClasses());
+    const milestone_r1 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵproperty("ngClass", ctx_r1.objectiveItemClasses());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r2.getPriorityDotClasses(milestone_r4.priority));
+    i0.ɵɵproperty("ngClass", ctx_r1.getPriorityDotClasses(milestone_r1.priority));
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(milestone_r4.title);
+    i0.ɵɵtextInterpolate(milestone_r1.title);
 } }
-function UnifiedTimelineComponent_Conditional_0_For_8_Conditional_11_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 20);
-    i0.ɵɵtext(1);
+function UnifiedTimelineComponent_Conditional_0_For_8_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 15)(1, "div", 17);
+    i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 18);
+    i0.ɵɵrepeaterCreate(4, UnifiedTimelineComponent_Conditional_0_For_8_Conditional_11_For_5_Template, 4, 3, "div", 19, _forTrack1$2);
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const phase_r2 = i0.ɵɵnextContext(2).$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngClass", ctx_r2.moreObjectivesClasses());
+    const phase_r3 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" +", phase_r2.milestones.length - 3, " more milestones ");
+    i0.ɵɵproperty("ngClass", ctx_r1.objectivesLabelClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" Key Milestones (", phase_r3.milestones.length, ") ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(phase_r3.milestones);
 } }
-function UnifiedTimelineComponent_Conditional_0_For_8_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+function UnifiedTimelineComponent_Conditional_0_For_8_Conditional_12_For_5_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 23);
+    i0.ɵɵlistener("click", function UnifiedTimelineComponent_Conditional_0_For_8_Conditional_12_For_5_Template_div_click_0_listener() { const goal_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.onGoalChipClick(goal_r5)); });
+    i0.ɵɵelementStart(1, "span", 24);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(3, "svg", 25);
+    i0.ɵɵelement(4, "path", 26);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const goal_r5 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵproperty("ngClass", ctx_r1.goalChipClasses());
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(goal_r5.title);
+} }
+function UnifiedTimelineComponent_Conditional_0_For_8_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 15)(1, "div", 17);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "div", 18);
-    i0.ɵɵrepeaterCreate(4, UnifiedTimelineComponent_Conditional_0_For_8_Conditional_11_For_5_Template, 4, 3, "div", 19, _forTrack1$2);
-    i0.ɵɵconditionalCreate(6, UnifiedTimelineComponent_Conditional_0_For_8_Conditional_11_Conditional_6_Template, 2, 2, "div", 20);
+    i0.ɵɵrepeaterCreate(4, UnifiedTimelineComponent_Conditional_0_For_8_Conditional_12_For_5_Template, 5, 2, "div", 22, _forTrack0$b);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const phase_r2 = i0.ɵɵnextContext().$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(2);
+    const phase_r3 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r2.objectivesLabelClasses());
+    i0.ɵɵproperty("ngClass", ctx_r1.objectivesLabelClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" Key Milestones (", phase_r2.milestones.length, ") ");
-    i0.ɵɵadvance(2);
-    i0.ɵɵrepeater(phase_r2.milestones.slice(0, 3));
+    i0.ɵɵtextInterpolate1(" Related Goals (", ctx_r1.getGoalsForPhase(phase_r3).length, ") ");
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(phase_r2.milestones.length > 3 ? 6 : -1);
+    i0.ɵɵrepeater(ctx_r1.getGoalsForPhase(phase_r3));
 } }
 function UnifiedTimelineComponent_Conditional_0_For_8_Template(rf, ctx) { if (rf & 1) {
-    const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 7)(1, "div", 8);
     i0.ɵɵelement(2, "div", 9);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 10);
-    i0.ɵɵlistener("click", function UnifiedTimelineComponent_Conditional_0_For_8_Template_div_click_3_listener() { const phase_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onPhaseClick(phase_r2)); });
-    i0.ɵɵelementStart(4, "div", 11)(5, "h4", 12);
+    i0.ɵɵelementStart(3, "div", 10)(4, "div", 11)(5, "h4", 12);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(7, "span", 13);
@@ -101828,38 +101870,43 @@ function UnifiedTimelineComponent_Conditional_0_For_8_Template(rf, ctx) { if (rf
     i0.ɵɵelementStart(9, "p", 14);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(11, UnifiedTimelineComponent_Conditional_0_For_8_Conditional_11_Template, 7, 3, "div", 15);
-    i0.ɵɵelementStart(12, "div", 16);
-    i0.ɵɵtext(13);
+    i0.ɵɵconditionalCreate(11, UnifiedTimelineComponent_Conditional_0_For_8_Conditional_11_Template, 6, 2, "div", 15);
+    i0.ɵɵconditionalCreate(12, UnifiedTimelineComponent_Conditional_0_For_8_Conditional_12_Template, 6, 2, "div", 15);
+    i0.ɵɵelementStart(13, "div", 16);
+    i0.ɵɵtext(14);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const phase_r2 = ctx.$implicit;
-    const ɵ$index_16_r5 = ctx.$index;
-    const ctx_r2 = i0.ɵɵnextContext(2);
+    const phase_r3 = ctx.$implicit;
+    const ɵ$index_16_r6 = ctx.$index;
+    const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r2.getPhaseNodeClasses(ɵ$index_16_r5));
+    i0.ɵɵclassProp("animate-pulse-glow-blue", ɵ$index_16_r6 % 4 === 0)("animate-pulse-glow-cyan", ɵ$index_16_r6 % 4 === 1)("animate-pulse-glow-teal", ɵ$index_16_r6 % 4 === 2)("animate-pulse-glow-emerald", ɵ$index_16_r6 % 4 === 3);
+    i0.ɵɵproperty("ngClass", ctx_r1.getPhaseNodeClasses(ɵ$index_16_r6));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r2.getPhaseNodeInnerClasses(ɵ$index_16_r5));
+    i0.ɵɵproperty("ngClass", ctx_r1.getPhaseNodeInnerClasses(ɵ$index_16_r6));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r2.getPhaseCardClasses(ɵ$index_16_r5));
+    i0.ɵɵclassProp("card-glow-blue", ɵ$index_16_r6 % 4 === 0)("card-glow-cyan", ɵ$index_16_r6 % 4 === 1)("card-glow-teal", ɵ$index_16_r6 % 4 === 2)("card-glow-emerald", ɵ$index_16_r6 % 4 === 3);
+    i0.ɵɵproperty("ngClass", ctx_r1.getPhaseCardClasses(ɵ$index_16_r6));
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngClass", ctx_r2.itemTitleClasses());
+    i0.ɵɵproperty("ngClass", ctx_r1.itemTitleClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", phase_r2.title, " ");
+    i0.ɵɵtextInterpolate1(" ", phase_r3.title, " ");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r2.getFocusThemeBadgeClasses());
+    i0.ɵɵproperty("ngClass", ctx_r1.getFocusThemeBadgeClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", phase_r2.focusTheme, " ");
+    i0.ɵɵtextInterpolate1(" ", phase_r3.focusTheme, " ");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r2.descriptionClasses());
+    i0.ɵɵproperty("ngClass", ctx_r1.descriptionClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(phase_r2.description);
+    i0.ɵɵtextInterpolate(phase_r3.description);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(phase_r2.milestones && phase_r2.milestones.length > 0 ? 11 : -1);
+    i0.ɵɵconditional(phase_r3.milestones && phase_r3.milestones.length > 0 ? 11 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r2.phaseIndicatorClasses());
+    i0.ɵɵconditional(ctx_r1.getGoalsForPhase(phase_r3).length > 0 ? 12 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" Phase ", ɵ$index_16_r5 + 1, " ");
+    i0.ɵɵproperty("ngClass", ctx_r1.phaseIndicatorClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" Phase ", ɵ$index_16_r6 + 1, " ");
 } }
 function UnifiedTimelineComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "section", 0);
@@ -101867,26 +101914,27 @@ function UnifiedTimelineComponent_Conditional_0_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵelementStart(3, "div", 3)(4, "div", 4);
     i0.ɵɵelement(5, "div", 5);
     i0.ɵɵelementStart(6, "div", 6);
-    i0.ɵɵrepeaterCreate(7, UnifiedTimelineComponent_Conditional_0_For_8_Template, 14, 12, "div", 7, _forTrack0$b);
+    i0.ɵɵrepeaterCreate(7, UnifiedTimelineComponent_Conditional_0_For_8_Template, 15, 29, "div", 7, _forTrack0$b);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
+    const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵproperty("viewMode", ctx_r2.viewMode())("sectionIcon", i0.ɵɵpureFunction1(6, _c0$b, ctx_r2.IconSourceEnum.HEROICONS));
+    i0.ɵɵproperty("viewMode", ctx_r1.viewMode())("sectionIcon", i0.ɵɵpureFunction1(6, _c0$b, ctx_r1.IconSourceEnum.HEROICONS));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(8, _c0$b, ctx_r2.IconSourceEnum.HEROICONS))("viewMode", ctx_r2.viewMode());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(8, _c0$b, ctx_r1.IconSourceEnum.HEROICONS))("viewMode", ctx_r1.viewMode());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r2.containerClasses());
+    i0.ɵɵproperty("ngClass", ctx_r1.containerClasses());
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngClass", ctx_r2.lineClasses());
+    i0.ɵɵproperty("ngClass", ctx_r1.lineClasses());
     i0.ɵɵadvance(2);
-    i0.ɵɵrepeater(ctx_r2.phases());
+    i0.ɵɵrepeater(ctx_r1.phases());
 } }
 class UnifiedTimelineComponent {
     constructor() {
         this.timeline = input.required(...(ngDevMode ? [{ debugName: "timeline" }] : []));
         this.viewMode = input(ViewModeEnum.DARK, ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
-        this.phaseClick = output();
+        this.goals = input([], ...(ngDevMode ? [{ debugName: "goals" }] : []));
+        this.goalClick = output();
         this.IconSourceEnum = IconSourceEnum;
         this.phases = computed(() => {
             const data = this.timeline();
@@ -101923,6 +101971,9 @@ class UnifiedTimelineComponent {
             light: ['bg-blue-50 border border-blue-200', 'bg-cyan-50 border border-cyan-200', 'bg-teal-50 border border-teal-200', 'bg-emerald-50 border border-emerald-200'],
             dark: ['bg-blue-900/20 border border-blue-700/50', 'bg-cyan-900/20 border border-cyan-700/50', 'bg-teal-900/20 border border-teal-700/50', 'bg-emerald-900/20 border border-emerald-700/50']
         };
+        this.goalChipClasses = computed(() => this.isLightMode()
+            ? 'bg-violet-50 border border-violet-200 text-violet-700 hover:bg-violet-100'
+            : 'bg-violet-900/30 border border-violet-700/50 text-violet-300', ...(ngDevMode ? [{ debugName: "goalChipClasses" }] : []));
     }
     getPhaseNodeClasses(idx) {
         const classes = this.isLightMode() ? this.nodeClasses.light : this.nodeClasses.dark;
@@ -101957,24 +102008,25 @@ class UnifiedTimelineComponent {
                 return 'bg-blue-500';
         }
     }
-    onPhaseClick(phase) {
-        this.phaseClick.emit(phase);
+    getGoalsForPhase(phase) {
+        const goalIds = phase.goalIds || [];
+        if (goalIds.length === 0)
+            return [];
+        return this.goals().filter(g => g.id && goalIds.includes(g.id));
+    }
+    onGoalChipClick(goal) {
+        this.goalClick.emit(goal);
     }
     static { this.ɵfac = function UnifiedTimelineComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || UnifiedTimelineComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UnifiedTimelineComponent, selectors: [["symphiq-unified-timeline"]], inputs: { timeline: [1, "timeline"], viewMode: [1, "viewMode"] }, outputs: { phaseClick: "phaseClick" }, decls: 1, vars: 1, consts: [["id", "section-timeline", 1, "space-y-6", "scroll-mt-24"], [3, "viewMode", "sectionIcon"], ["title", "Implementation Timeline", 3, "icon", "viewMode"], [1, "rounded-2xl", "p-8", "shadow-xl", 3, "ngClass"], [1, "relative"], [1, "absolute", "left-6", "top-0", "bottom-0", "w-0.5", 3, "ngClass"], [1, "space-y-8"], [1, "relative", "pl-16", "group"], [1, "absolute", "left-4", "w-5", "h-5", "rounded-full", "border-4", "flex", "items-center", "justify-center", "transition-all", "group-hover:scale-125", 3, "ngClass"], [1, "w-2", "h-2", "rounded-full", 3, "ngClass"], [1, "rounded-xl", "p-5", "transition-all", "hover:shadow-lg", "cursor-pointer", 3, "click", "ngClass"], [1, "flex", "items-start", "justify-between", "gap-4", "mb-3"], [1, "text-base", "font-semibold", 3, "ngClass"], [1, "px-2", "py-1", "text-xs", "font-semibold", "rounded-full", "flex-shrink-0", 3, "ngClass"], [1, "text-sm", "mb-4", 3, "ngClass"], [1, "mt-4"], [1, "absolute", "-left-[52px]", "top-5", "text-xs", "font-bold", 3, "ngClass"], [1, "text-xs", "font-semibold", "uppercase", "mb-2", 3, "ngClass"], [1, "space-y-2"], [1, "flex", "items-start", "gap-2", "text-sm", 3, "ngClass"], [1, "text-xs", "pl-6", 3, "ngClass"], [1, "w-2", "h-2", "rounded-full", "mt-1.5", "flex-shrink-0", 3, "ngClass"], [1, "line-clamp-1"]], template: function UnifiedTimelineComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UnifiedTimelineComponent, selectors: [["symphiq-unified-timeline"]], inputs: { timeline: [1, "timeline"], viewMode: [1, "viewMode"], goals: [1, "goals"] }, outputs: { goalClick: "goalClick" }, decls: 1, vars: 1, consts: [["id", "section-timeline", 1, "space-y-6", "scroll-mt-24"], [3, "viewMode", "sectionIcon"], ["title", "Implementation Timeline", 3, "icon", "viewMode"], [1, "rounded-2xl", "p-8", "shadow-xl", 3, "ngClass"], [1, "relative"], [1, "absolute", "left-6", "top-0", "bottom-0", "w-0.5", 3, "ngClass"], [1, "space-y-8"], [1, "relative", "pl-16", "group"], [1, "absolute", "left-4", "w-5", "h-5", "rounded-full", "border-4", "flex", "items-center", "justify-center", "transition-all", "duration-300", "group-hover:scale-125", 3, "ngClass"], [1, "w-2", "h-2", "rounded-full", 3, "ngClass"], [1, "rounded-xl", "p-5", "transition-all", "duration-300", 3, "ngClass"], [1, "flex", "items-start", "justify-between", "gap-4", "mb-3"], [1, "text-base", "font-semibold", 3, "ngClass"], [1, "px-2", "py-1", "text-xs", "font-semibold", "rounded-full", "flex-shrink-0", 3, "ngClass"], [1, "text-sm", "mb-4", 3, "ngClass"], [1, "mt-4"], [1, "absolute", "-left-[52px]", "top-0", "text-xs", "font-bold", 3, "ngClass"], [1, "text-xs", "font-semibold", "uppercase", "mb-2", 3, "ngClass"], [1, "space-y-2"], [1, "flex", "items-start", "gap-2", "text-sm", 3, "ngClass"], [1, "w-2", "h-2", "rounded-full", "mt-1.5", "flex-shrink-0", 3, "ngClass"], [1, "line-clamp-1"], [1, "goal-chip", "flex", "items-center", "justify-between", "gap-2", "px-3", "py-2", "rounded-lg", "cursor-pointer", 3, "ngClass"], [1, "goal-chip", "flex", "items-center", "justify-between", "gap-2", "px-3", "py-2", "rounded-lg", "cursor-pointer", 3, "click", "ngClass"], [1, "text-sm", "font-medium", "line-clamp-1"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", "flex-shrink-0"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 5l7 7-7 7"]], template: function UnifiedTimelineComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵconditionalCreate(0, UnifiedTimelineComponent_Conditional_0_Template, 9, 10, "section", 0);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.phases().length > 0 ? 0 : -1);
-        } }, dependencies: [CommonModule, i1$1.NgClass, SectionDividerComponent, SectionHeaderComponent], encapsulation: 2, changeDetection: 0 }); }
+        } }, dependencies: [CommonModule, i1$1.NgClass, SectionDividerComponent, SectionHeaderComponent], styles: ["@keyframes _ngcontent-%COMP%_pulse-glow-blue{0%,to{box-shadow:0 0 5px #3b82f680,0 0 10px #3b82f64d}50%{box-shadow:0 0 15px #3b82f6cc,0 0 25px #3b82f680,0 0 35px #3b82f64d}}@keyframes _ngcontent-%COMP%_pulse-glow-cyan{0%,to{box-shadow:0 0 5px #06b6d480,0 0 10px #06b6d44d}50%{box-shadow:0 0 15px #06b6d4cc,0 0 25px #06b6d480,0 0 35px #06b6d44d}}@keyframes _ngcontent-%COMP%_pulse-glow-teal{0%,to{box-shadow:0 0 5px #14b8a680,0 0 10px #14b8a64d}50%{box-shadow:0 0 15px #14b8a6cc,0 0 25px #14b8a680,0 0 35px #14b8a64d}}@keyframes _ngcontent-%COMP%_pulse-glow-emerald{0%,to{box-shadow:0 0 5px #10b98180,0 0 10px #10b9814d}50%{box-shadow:0 0 15px #10b981cc,0 0 25px #10b98180,0 0 35px #10b9814d}}.group[_ngcontent-%COMP%]:hover   .animate-pulse-glow-blue[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_pulse-glow-blue 1.5s ease-in-out infinite}.group[_ngcontent-%COMP%]:hover   .animate-pulse-glow-cyan[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_pulse-glow-cyan 1.5s ease-in-out infinite}.group[_ngcontent-%COMP%]:hover   .animate-pulse-glow-teal[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_pulse-glow-teal 1.5s ease-in-out infinite}.group[_ngcontent-%COMP%]:hover   .animate-pulse-glow-emerald[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_pulse-glow-emerald 1.5s ease-in-out infinite}.card-glow-blue[_ngcontent-%COMP%]:hover{box-shadow:0 0 20px #3b82f666,0 0 40px #3b82f633,0 10px 30px #0000004d;border-color:#3b82f6cc!important}.card-glow-cyan[_ngcontent-%COMP%]:hover{box-shadow:0 0 20px #06b6d466,0 0 40px #06b6d433,0 10px 30px #0000004d;border-color:#06b6d4cc!important}.card-glow-teal[_ngcontent-%COMP%]:hover{box-shadow:0 0 20px #14b8a666,0 0 40px #14b8a633,0 10px 30px #0000004d;border-color:#14b8a6cc!important}.card-glow-emerald[_ngcontent-%COMP%]:hover{box-shadow:0 0 20px #10b98166,0 0 40px #10b98133,0 10px 30px #0000004d;border-color:#10b981cc!important}.goal-chip[_ngcontent-%COMP%]{transition:all .3s ease}.goal-chip[_ngcontent-%COMP%]:hover{transform:scale(1.03) translate(4px);box-shadow:0 0 15px #8b5cf680,0 0 30px #8b5cf64d;border-color:#8b5cf6cc!important}"], changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UnifiedTimelineComponent, [{
         type: Component,
-        args: [{
-                selector: 'symphiq-unified-timeline',
-                standalone: true,
-                imports: [CommonModule, SectionDividerComponent, SectionHeaderComponent],
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: `
+        args: [{ selector: 'symphiq-unified-timeline', standalone: true, imports: [CommonModule, SectionDividerComponent, SectionHeaderComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
     @if (phases().length > 0) {
       <section id="section-timeline" class="space-y-6 scroll-mt-24">
         <symphiq-section-divider
@@ -101996,14 +102048,21 @@ class UnifiedTimelineComponent {
                 <div class="relative pl-16 group">
                   <div
                     [ngClass]="getPhaseNodeClasses(idx)"
-                    class="absolute left-4 w-5 h-5 rounded-full border-4 flex items-center justify-center transition-all group-hover:scale-125">
+                    class="absolute left-4 w-5 h-5 rounded-full border-4 flex items-center justify-center transition-all duration-300 group-hover:scale-125"
+                    [class.animate-pulse-glow-blue]="idx % 4 === 0"
+                    [class.animate-pulse-glow-cyan]="idx % 4 === 1"
+                    [class.animate-pulse-glow-teal]="idx % 4 === 2"
+                    [class.animate-pulse-glow-emerald]="idx % 4 === 3">
                     <div class="w-2 h-2 rounded-full" [ngClass]="getPhaseNodeInnerClasses(idx)"></div>
                   </div>
 
                   <div
                     [ngClass]="getPhaseCardClasses(idx)"
-                    class="rounded-xl p-5 transition-all hover:shadow-lg cursor-pointer"
-                    (click)="onPhaseClick(phase)">
+                    class="rounded-xl p-5 transition-all duration-300"
+                    [class.card-glow-blue]="idx % 4 === 0"
+                    [class.card-glow-cyan]="idx % 4 === 1"
+                    [class.card-glow-teal]="idx % 4 === 2"
+                    [class.card-glow-emerald]="idx % 4 === 3">
                     <div class="flex items-start justify-between gap-4 mb-3">
                       <h4 [ngClass]="itemTitleClasses()" class="text-base font-semibold">
                         {{ phase.title }}
@@ -102021,22 +102080,38 @@ class UnifiedTimelineComponent {
                           Key Milestones ({{ phase.milestones.length }})
                         </div>
                         <div class="space-y-2">
-                          @for (milestone of phase.milestones.slice(0, 3); track milestone.title) {
+                          @for (milestone of phase.milestones; track milestone.title) {
                             <div [ngClass]="objectiveItemClasses()" class="flex items-start gap-2 text-sm">
                               <span [ngClass]="getPriorityDotClasses(milestone.priority)" class="w-2 h-2 rounded-full mt-1.5 flex-shrink-0"></span>
                               <span class="line-clamp-1">{{ milestone.title }}</span>
                             </div>
                           }
-                          @if (phase.milestones.length > 3) {
-                            <div [ngClass]="moreObjectivesClasses()" class="text-xs pl-6">
-                              +{{ phase.milestones.length - 3 }} more milestones
+                        </div>
+                      </div>
+                    }
+
+                    @if (getGoalsForPhase(phase).length > 0) {
+                      <div class="mt-4">
+                        <div [ngClass]="objectivesLabelClasses()" class="text-xs font-semibold uppercase mb-2">
+                          Related Goals ({{ getGoalsForPhase(phase).length }})
+                        </div>
+                        <div class="space-y-2">
+                          @for (goal of getGoalsForPhase(phase); track goal.id) {
+                            <div
+                              [ngClass]="goalChipClasses()"
+                              class="goal-chip flex items-center justify-between gap-2 px-3 py-2 rounded-lg cursor-pointer"
+                              (click)="onGoalChipClick(goal)">
+                              <span class="text-sm font-medium line-clamp-1">{{ goal.title }}</span>
+                              <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+                              </svg>
                             </div>
                           }
                         </div>
                       </div>
                     }
 
-                    <div [ngClass]="phaseIndicatorClasses()" class="absolute -left-[52px] top-5 text-xs font-bold">
+                    <div [ngClass]="phaseIndicatorClasses()" class="absolute -left-[52px] top-0 text-xs font-bold">
                       Phase {{ idx + 1 }}
                     </div>
                   </div>
@@ -102047,10 +102122,9 @@ class UnifiedTimelineComponent {
         </div>
       </section>
     }
-  `
-            }]
-    }], null, { timeline: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeline", required: true }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], phaseClick: [{ type: i0.Output, args: ["phaseClick"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(UnifiedTimelineComponent, { className: "UnifiedTimelineComponent", filePath: "lib/components/profile-analysis-unified-dashboard/cards/unified-timeline.component.ts", lineNumber: 109 }); })();
+  `, styles: ["@keyframes pulse-glow-blue{0%,to{box-shadow:0 0 5px #3b82f680,0 0 10px #3b82f64d}50%{box-shadow:0 0 15px #3b82f6cc,0 0 25px #3b82f680,0 0 35px #3b82f64d}}@keyframes pulse-glow-cyan{0%,to{box-shadow:0 0 5px #06b6d480,0 0 10px #06b6d44d}50%{box-shadow:0 0 15px #06b6d4cc,0 0 25px #06b6d480,0 0 35px #06b6d44d}}@keyframes pulse-glow-teal{0%,to{box-shadow:0 0 5px #14b8a680,0 0 10px #14b8a64d}50%{box-shadow:0 0 15px #14b8a6cc,0 0 25px #14b8a680,0 0 35px #14b8a64d}}@keyframes pulse-glow-emerald{0%,to{box-shadow:0 0 5px #10b98180,0 0 10px #10b9814d}50%{box-shadow:0 0 15px #10b981cc,0 0 25px #10b98180,0 0 35px #10b9814d}}.group:hover .animate-pulse-glow-blue{animation:pulse-glow-blue 1.5s ease-in-out infinite}.group:hover .animate-pulse-glow-cyan{animation:pulse-glow-cyan 1.5s ease-in-out infinite}.group:hover .animate-pulse-glow-teal{animation:pulse-glow-teal 1.5s ease-in-out infinite}.group:hover .animate-pulse-glow-emerald{animation:pulse-glow-emerald 1.5s ease-in-out infinite}.card-glow-blue:hover{box-shadow:0 0 20px #3b82f666,0 0 40px #3b82f633,0 10px 30px #0000004d;border-color:#3b82f6cc!important}.card-glow-cyan:hover{box-shadow:0 0 20px #06b6d466,0 0 40px #06b6d433,0 10px 30px #0000004d;border-color:#06b6d4cc!important}.card-glow-teal:hover{box-shadow:0 0 20px #14b8a666,0 0 40px #14b8a633,0 10px 30px #0000004d;border-color:#14b8a6cc!important}.card-glow-emerald:hover{box-shadow:0 0 20px #10b98166,0 0 40px #10b98133,0 10px 30px #0000004d;border-color:#10b981cc!important}.goal-chip{transition:all .3s ease}.goal-chip:hover{transform:scale(1.03) translate(4px);box-shadow:0 0 15px #8b5cf680,0 0 30px #8b5cf64d;border-color:#8b5cf6cc!important}\n"] }]
+    }], null, { timeline: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeline", required: true }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], goals: [{ type: i0.Input, args: [{ isSignal: true, alias: "goals", required: false }] }], goalClick: [{ type: i0.Output, args: ["goalClick"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(UnifiedTimelineComponent, { className: "UnifiedTimelineComponent", filePath: "lib/components/profile-analysis-unified-dashboard/cards/unified-timeline.component.ts", lineNumber: 181 }); })();
 
 const _c0$a = a0 => ({ name: "squares-2x2", source: a0 });
 const _forTrack0$a = ($index, $item) => $item.id;
@@ -103113,7 +103187,7 @@ class SourceAnalysisTraceabilityComponent {
         }
     }
     static { this.ɵfac = function SourceAnalysisTraceabilityComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SourceAnalysisTraceabilityComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SourceAnalysisTraceabilityComponent, selectors: [["symphiq-source-analysis-traceability"]], inputs: { sourceAnalyses: [1, "sourceAnalyses"], loadedSourceAnalysisIds: [1, "loadedSourceAnalysisIds"], loadingSourceAnalysisId: [1, "loadingSourceAnalysisId"], viewMode: [1, "viewMode"], goal: [1, "goal"] }, outputs: { sourceAnalysisClick: "sourceAnalysisClick" }, decls: 1, vars: 1, consts: [[1, "p-5", "rounded-xl", 3, "ngClass"], [1, "text-sm", "font-semibold", "mb-4", "flex", "items-center", "gap-2", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"], [3, "score", "explanation", "viewMode"], [1, "grid", "grid-cols-1", "sm:grid-cols-2", "gap-3"], ["type", "button", 1, "p-4", "rounded-lg", "text-left", "transition-all", "hover:scale-[1.02]", "relative", 3, "ngClass"], ["type", "button", 1, "p-4", "rounded-lg", "text-left", "transition-all", "hover:scale-[1.02]", "relative", 3, "click", "ngClass"], [1, "absolute", "inset-0", "bg-black/10", "rounded-lg", "flex", "items-center", "justify-center"], [1, "absolute", "top-2", "right-2"], [1, "flex", "items-start", "gap-3"], [1, "w-8", "h-8", "rounded-lg", "flex", "items-center", "justify-center", "flex-shrink-0", 3, "ngClass"], [1, "flex-1", "min-w-0"], [1, "text-xs", "font-medium", "uppercase", "mb-0.5", 3, "ngClass"], [1, "text-sm", "font-medium", "truncate", 3, "ngClass"], [1, "text-xs", "mt-1", 3, "ngClass"], [1, "w-5", "h-5", "border-2", "border-current", "border-t-transparent", "rounded-full", "animate-spin"], ["fill", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", "text-green-500"], ["d", "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"]], template: function SourceAnalysisTraceabilityComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SourceAnalysisTraceabilityComponent, selectors: [["symphiq-source-analysis-traceability"]], inputs: { sourceAnalyses: [1, "sourceAnalyses"], loadedSourceAnalysisIds: [1, "loadedSourceAnalysisIds"], loadingSourceAnalysisId: [1, "loadingSourceAnalysisId"], viewMode: [1, "viewMode"], goal: [1, "goal"] }, outputs: { sourceAnalysisClick: "sourceAnalysisClick" }, decls: 1, vars: 1, consts: [[1, "p-5", "rounded-xl", "flex", "flex-col", "gap-4", 3, "ngClass"], [1, "text-sm", "font-semibold", "flex", "items-center", "gap-2", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"], [3, "score", "explanation", "viewMode"], [1, "grid", "grid-cols-1", "sm:grid-cols-2", "gap-3"], ["type", "button", 1, "p-4", "rounded-lg", "text-left", "transition-all", "hover:scale-[1.02]", "relative", 3, "ngClass"], ["type", "button", 1, "p-4", "rounded-lg", "text-left", "transition-all", "hover:scale-[1.02]", "relative", 3, "click", "ngClass"], [1, "absolute", "inset-0", "bg-black/10", "rounded-lg", "flex", "items-center", "justify-center"], [1, "absolute", "top-2", "right-2"], [1, "flex", "items-start", "gap-3"], [1, "w-8", "h-8", "rounded-lg", "flex", "items-center", "justify-center", "flex-shrink-0", 3, "ngClass"], [1, "flex-1", "min-w-0"], [1, "text-xs", "font-medium", "uppercase", "mb-0.5", 3, "ngClass"], [1, "text-sm", "font-medium", "truncate", 3, "ngClass"], [1, "text-xs", "mt-1", 3, "ngClass"], [1, "w-5", "h-5", "border-2", "border-current", "border-t-transparent", "rounded-full", "animate-spin"], ["fill", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", "text-green-500"], ["d", "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"]], template: function SourceAnalysisTraceabilityComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵconditionalCreate(0, SourceAnalysisTraceabilityComponent_Conditional_0_Template, 9, 6, "div", 0);
         } if (rf & 2) {
             let tmp_0_0;
@@ -103129,8 +103203,8 @@ class SourceAnalysisTraceabilityComponent {
                 imports: [CommonModule, SynthesisConfidenceSectionComponent],
                 template: `
     @if ((sourceAnalyses()?.length ?? 0) > 0) {
-      <div [ngClass]="sectionCardClasses()" class="p-5 rounded-xl">
-        <h4 [ngClass]="sectionTitleClasses()" class="text-sm font-semibold mb-4 flex items-center gap-2">
+      <div [ngClass]="sectionCardClasses()" class="p-5 rounded-xl flex flex-col gap-4">
+        <h4 [ngClass]="sectionTitleClasses()" class="text-sm font-semibold flex items-center gap-2">
           <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/>
           </svg>
@@ -103838,7 +103912,22 @@ class UnifiedDashboardModalComponent {
                 clearTimeout(this.cleanupTimeoutId);
                 this.cleanupTimeoutId = null;
             }
-            if (state.type !== 'unified-goal-detail' && state.type !== 'unified-goal-objectives' && state.type !== 'unified-goal-related-metrics' && state.type !== 'objective-strategies' && state.type !== 'strategy-recommendations' && state.type !== null) {
+            const unifiedModalTypes = ['unified-goal-detail', 'unified-goal-objectives', 'unified-goal-related-metrics', 'objective-strategies', 'strategy-recommendations'];
+            const isUnifiedType = unifiedModalTypes.includes(state.type || '');
+            if (!isUnifiedType && state.type !== null) {
+                // Close this modal when transitioning to a type we don't handle (e.g., metrics-list, metric)
+                if (this.isOpen()) {
+                    console.log('[UnifiedDashboardModal] Closing - transitioning to non-unified type:', state.type);
+                    this.isOpen.set(false);
+                    this.cleanupTimeoutId = setTimeout(() => {
+                        this.modalType.set(null);
+                        this.modalData.set(null);
+                        this.modalTitle.set('');
+                        this.previousState.set(null);
+                        this.currentModalState.set(null);
+                        this.cleanupTimeoutId = null;
+                    }, 300);
+                }
                 return;
             }
             this.previousState.set(state.previousState ?? null);
@@ -103906,6 +103995,14 @@ class UnifiedDashboardModalComponent {
             return;
         const contributingMetricNames = data.goal.contributingMetrics || [];
         const contributingMetrics = data.allMetrics.filter(m => m.metric && contributingMetricNames.includes(m.metric));
+        console.log('[UnifiedDashboardModal] onContributingMetricsClick:', {
+            goalTitle: data.goal.title,
+            contributingMetricNames,
+            contributingMetricsCount: contributingMetrics.length,
+            contributingMetricsPerformanceItemIds: contributingMetrics.map(m => m.performanceItemId),
+            allChartsCount: data.allCharts?.length || 0,
+            allChartsPerformanceItemIds: data.allCharts?.map(c => c.performanceItemId)
+        });
         this.modalService.navigateToUnifiedGoalRelatedMetrics(data.goal, contributingMetrics, data.allCharts, this.viewMode());
     }
     onShowObjectives() {
@@ -103918,6 +104015,14 @@ class UnifiedDashboardModalComponent {
         const data = this.relatedMetricsData();
         const allCharts = data?.allCharts || [];
         const metricCharts = allCharts.filter(chart => chart.performanceItemId === metric.performanceItemId);
+        console.log('[UnifiedDashboardModal] onRelatedMetricClick:', {
+            metricName: metric.metric,
+            metricPerformanceItemId: metric.performanceItemId,
+            allChartsCount: allCharts.length,
+            allChartsPerformanceItemIds: allCharts.map(c => c.performanceItemId),
+            filteredChartsCount: metricCharts.length,
+            currentModalState: this.currentModalState()?.type
+        });
         this.modalService.openMetricModal(metric, metricCharts, this.currentModalState() ?? undefined);
     }
     navigateToBreadcrumb(index) {
@@ -104230,7 +104335,7 @@ function SymphiqProfileAnalysisUnifiedDashboardComponent_Conditional_6_Condition
     i0.ɵɵelementEnd();
     i0.ɵɵconditionalCreate(14, SymphiqProfileAnalysisUnifiedDashboardComponent_Conditional_6_Conditional_2_Conditional_14_Template, 6, 8, "section", 31);
     i0.ɵɵelementStart(15, "symphiq-unified-timeline", 32);
-    i0.ɵɵlistener("phaseClick", function SymphiqProfileAnalysisUnifiedDashboardComponent_Conditional_6_Conditional_2_Template_symphiq_unified_timeline_phaseClick_15_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onTimelinePhaseClick($event)); });
+    i0.ɵɵlistener("goalClick", function SymphiqProfileAnalysisUnifiedDashboardComponent_Conditional_6_Conditional_2_Template_symphiq_unified_timeline_goalClick_15_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onGoalClick($event)); });
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(16, "symphiq-unified-priority-matrix", 33);
     i0.ɵɵlistener("goalClick", function SymphiqProfileAnalysisUnifiedDashboardComponent_Conditional_6_Conditional_2_Template_symphiq_unified_priority_matrix_goalClick_16_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onGoalClick($event)); });
@@ -104257,7 +104362,7 @@ function SymphiqProfileAnalysisUnifiedDashboardComponent_Conditional_6_Condition
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.unifiedGoals().length > 0 ? 14 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("timeline", ctx_r1.unifiedTimeline())("viewMode", ctx_r1.viewMode());
+    i0.ɵɵproperty("timeline", ctx_r1.unifiedTimeline())("viewMode", ctx_r1.viewMode())("goals", ctx_r1.unifiedGoals());
     i0.ɵɵadvance();
     i0.ɵɵproperty("matrix", ctx_r1.priorityMatrix())("viewMode", ctx_r1.viewMode());
     i0.ɵɵadvance();
@@ -104303,7 +104408,7 @@ function SymphiqProfileAnalysisUnifiedDashboardComponent_Conditional_6_Condition
 function SymphiqProfileAnalysisUnifiedDashboardComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "main", 18);
     i0.ɵɵconditionalCreate(1, SymphiqProfileAnalysisUnifiedDashboardComponent_Conditional_6_Conditional_1_Template, 1, 2, "symphiq-loading-card", 19);
-    i0.ɵɵconditionalCreate(2, SymphiqProfileAnalysisUnifiedDashboardComponent_Conditional_6_Conditional_2_Template, 18, 21);
+    i0.ɵɵconditionalCreate(2, SymphiqProfileAnalysisUnifiedDashboardComponent_Conditional_6_Conditional_2_Template, 18, 22);
     i0.ɵɵconditionalCreate(3, SymphiqProfileAnalysisUnifiedDashboardComponent_Conditional_6_Conditional_3_Template, 1, 1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -104568,15 +104673,33 @@ class SymphiqProfileAnalysisUnifiedDashboardComponent {
         this.priorityMatrix = computed(() => {
             const matrixData = this.analysisData()?.unifiedPriorityMatrix;
             const goals = this.unifiedGoals();
+            console.log('[PriorityMatrix] Raw matrixData:', matrixData);
+            console.log('[PriorityMatrix] Goals available:', goals.map(g => ({ id: g.id, title: g.title })));
             if (matrixData) {
-                const findGoal = (id) => goals.find(g => g.id === id);
-                return {
-                    quickWins: (matrixData.quickWins || []).map(item => findGoal(item.relatedGoalId)).filter((g) => !!g),
-                    majorProjects: (matrixData.majorProjects || []).map(item => findGoal(item.relatedGoalId)).filter((g) => !!g),
-                    fillIns: (matrixData.fillIns || []).map(item => findGoal(item.relatedGoalId)).filter((g) => !!g),
-                    thankless: (matrixData.thankless || []).map(item => findGoal(item.relatedGoalId)).filter((g) => !!g)
+                console.log('[PriorityMatrix] quickWins items:', matrixData.quickWins);
+                console.log('[PriorityMatrix] majorProjects items:', matrixData.majorProjects);
+                console.log('[PriorityMatrix] fillIns items:', matrixData.fillIns);
+                console.log('[PriorityMatrix] thankless items:', matrixData.thankless);
+                const findGoal = (id, quadrant) => {
+                    const found = goals.find(g => g.id === id);
+                    console.log(`[PriorityMatrix] ${quadrant} - Looking for goal id="${id}", found:`, found ? found.title : 'NOT FOUND');
+                    return found;
+                };
+                const result = {
+                    quickWins: (matrixData.quickWins || []).map(item => findGoal(item.relatedGoalId, 'quickWins')).filter((g) => !!g),
+                    majorProjects: (matrixData.majorProjects || []).map(item => findGoal(item.relatedGoalId, 'majorProjects')).filter((g) => !!g),
+                    fillIns: (matrixData.fillIns || []).map(item => findGoal(item.relatedGoalId, 'fillIns')).filter((g) => !!g),
+                    thankless: (matrixData.thankless || []).map(item => findGoal(item.relatedGoalId, 'thankless')).filter((g) => !!g)
                 };
+                console.log('[PriorityMatrix] Final result:', {
+                    quickWins: result.quickWins.length,
+                    majorProjects: result.majorProjects.length,
+                    fillIns: result.fillIns.length,
+                    thankless: result.thankless.length
+                });
+                return result;
             }
+            console.log('[PriorityMatrix] No matrixData, using fallback based on priority');
             return {
                 quickWins: goals.filter(g => g.priority === 'HIGH'),
                 majorProjects: goals.filter(g => g.priority === 'MEDIUM'),
@@ -104908,15 +105031,6 @@ class SymphiqProfileAnalysisUnifiedDashboardComponent {
             }
         }
     }
-    onTimelinePhaseClick(phase) {
-        const goalIds = phase.goalIds || [];
-        if (goalIds.length > 0) {
-            const goal = this.unifiedGoals().find(g => g.id && goalIds.includes(g.id));
-            if (goal) {
-                this.onGoalClick(goal);
-            }
-        }
-    }
     getTimelineNodeClasses(priority) {
         const base = this.isLightMode() ? 'bg-white' : 'bg-slate-800';
         switch (priority?.toUpperCase()) {
@@ -105099,7 +105213,7 @@ class SymphiqProfileAnalysisUnifiedDashboardComponent {
     static { this.ɵfac = function SymphiqProfileAnalysisUnifiedDashboardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SymphiqProfileAnalysisUnifiedDashboardComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SymphiqProfileAnalysisUnifiedDashboardComponent, selectors: [["symphiq-profile-analysis-unified-dashboard"]], hostBindings: function SymphiqProfileAnalysisUnifiedDashboardComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("scroll", function SymphiqProfileAnalysisUnifiedDashboardComponent_scroll_HostBindingHandler() { return ctx.onScroll(); }, i0.ɵɵresolveWindow);
-        } }, inputs: { viewMode: [1, "viewMode"], embedded: [1, "embedded"], isLoading: [1, "isLoading"], profile: [1, "profile"], funnelAnalysis: [1, "funnelAnalysis"], unifiedProfileAnalysis: [1, "unifiedProfileAnalysis"], sourceProfileAnalyses: [1, "sourceProfileAnalyses"], isLoadingSourceAnalysis: [1, "isLoadingSourceAnalysis"], scrollEvent: [1, "scrollEvent"], scrollElement: [1, "scrollElement"], isOnboarded: [1, "isOnboarded"], forDemo: [1, "forDemo"], maxAccessibleStepId: [1, "maxAccessibleStepId"], itemStatus: [1, "itemStatus"], isMarkingAsReviewed: [1, "isMarkingAsReviewed"], requestedByUser: [1, "requestedByUser"] }, outputs: { markAsReviewedClick: "markAsReviewedClick", generateGoalsClick: "generateGoalsClick", stepClick: "stepClick", nextStepClick: "nextStepClick", sourceAnalysisRequest: "sourceAnalysisRequest" }, features: [i0.ɵɵNgOnChangesFeature], decls: 18, vars: 37, consts: [[1, "relative"], [1, "animated-bubbles", 2, "position", "fixed", "top", "0", "left", "0", "right", "0", "bottom", "0", "width", "100vw", "height", "100vh", "z-index", "1", "pointer-events", "none"], [3, "viewMode", "progress", "embedded"], [1, "relative", "z-[51]"], [3, "searchClick", "viewModeClick", "title", "subtitle", "currentSection", "viewMode", "viewModeLabel", "isLoading", "requestedByUser", "showControls", "embedded", "scrollEvent"], [3, "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [1, "relative", "z-10", "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-12", "space-y-12", 3, "pb-32"], [3, "sections", "viewMode", "embedded", "scrollElement"], [3, "isLightMode", "isOpen"], [3, "viewMode", "currentMode", "isOpen"], [3, "viewMode", "selfContentStatus", "isLoading"], [3, "viewMode", "itemStatus", "currentStatus", "confettiIntensity", "title"], [3, "expandedChange", "scrollToTop", "toggleView", "isLightMode", "isCompactMode", "isExpanded"], [3, "navigate", "isLightMode", "sections", "activeSection"], [3, "viewMode"], [3, "isLightMode"], [3, "isLightMode", "allInsights", "allMetrics", "allCharts"], [3, "nextStepClick", "stepClick", "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [1, "relative", "z-10", "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-12", "space-y-12"], ["title", "Loading Your Unified Analysis", "subtitle", "Please wait while we prepare your synthesized insights...", "size", "large", 3, "viewMode", "backdropBlur"], [1, "mb-12"], [1, "rounded-2xl", "p-8", "shadow-xl", "animate-fade-in-up", 3, "ngClass"], [1, "flex", "items-start", "gap-6"], [1, "p-4", "rounded-xl", "flex-shrink-0", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-8", "h-8"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "flex-1"], [1, "text-2xl", "font-bold", "mb-2", 3, "ngClass"], [1, "text-lg", "mb-4", 3, "ngClass"], [1, "text-sm", 3, "ngClass"], [3, "keyStrengthsClick", "criticalGapsClick", "quickWinsClick", "summary", "viewMode", "shopCounts", "focusAreaCounts", "metricCounts", "quickWinsCount"], ["id", "section-unified-goals", 1, "space-y-6", "scroll-mt-24"], [3, "phaseClick", "timeline", "viewMode"], [3, "goalClick", "matrix", "viewMode"], [3, "steps", "viewMode"], [3, "viewMode", "sectionIcon"], ["title", "Unified Goals", 3, "icon", "viewMode"], [1, "grid", "gap-6", 2, "grid-template-columns", "repeat(auto-fit, minmax(340px, 1fr))"], [3, "goal", "viewMode"], [3, "goalClick", "sourceBadgeClick", "relatedMetricsClick", "learnMoreClick", "goal", "viewMode"], ["id", "section-executive-summary", 1, "space-y-6", "scroll-mt-24"], [1, "rounded-2xl", "p-8", "shadow-xl", 3, "ngClass"], [1, "space-y-6"], [1, "flex", "items-start", "justify-between", "gap-4"], [1, "text-2xl", "font-bold", "mb-3", 3, "ngClass"], [1, "text-lg", "leading-relaxed", 3, "ngClass"], [3, "grade", "gradeRationale", "viewMode"], [3, "close", "isLightMode", "isOpen"], [3, "close", "modeSelected", "viewMode", "currentMode", "isOpen"], [3, "markAsReviewed", "viewMode", "selfContentStatus", "isLoading"]], template: function SymphiqProfileAnalysisUnifiedDashboardComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { viewMode: [1, "viewMode"], embedded: [1, "embedded"], isLoading: [1, "isLoading"], profile: [1, "profile"], funnelAnalysis: [1, "funnelAnalysis"], unifiedProfileAnalysis: [1, "unifiedProfileAnalysis"], sourceProfileAnalyses: [1, "sourceProfileAnalyses"], isLoadingSourceAnalysis: [1, "isLoadingSourceAnalysis"], scrollEvent: [1, "scrollEvent"], scrollElement: [1, "scrollElement"], isOnboarded: [1, "isOnboarded"], forDemo: [1, "forDemo"], maxAccessibleStepId: [1, "maxAccessibleStepId"], itemStatus: [1, "itemStatus"], isMarkingAsReviewed: [1, "isMarkingAsReviewed"], requestedByUser: [1, "requestedByUser"] }, outputs: { markAsReviewedClick: "markAsReviewedClick", generateGoalsClick: "generateGoalsClick", stepClick: "stepClick", nextStepClick: "nextStepClick", sourceAnalysisRequest: "sourceAnalysisRequest" }, features: [i0.ɵɵNgOnChangesFeature], decls: 18, vars: 37, consts: [[1, "relative"], [1, "animated-bubbles", 2, "position", "fixed", "top", "0", "left", "0", "right", "0", "bottom", "0", "width", "100vw", "height", "100vh", "z-index", "1", "pointer-events", "none"], [3, "viewMode", "progress", "embedded"], [1, "relative", "z-[51]"], [3, "searchClick", "viewModeClick", "title", "subtitle", "currentSection", "viewMode", "viewModeLabel", "isLoading", "requestedByUser", "showControls", "embedded", "scrollEvent"], [3, "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [1, "relative", "z-10", "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-12", "space-y-12", 3, "pb-32"], [3, "sections", "viewMode", "embedded", "scrollElement"], [3, "isLightMode", "isOpen"], [3, "viewMode", "currentMode", "isOpen"], [3, "viewMode", "selfContentStatus", "isLoading"], [3, "viewMode", "itemStatus", "currentStatus", "confettiIntensity", "title"], [3, "expandedChange", "scrollToTop", "toggleView", "isLightMode", "isCompactMode", "isExpanded"], [3, "navigate", "isLightMode", "sections", "activeSection"], [3, "viewMode"], [3, "isLightMode"], [3, "isLightMode", "allInsights", "allMetrics", "allCharts"], [3, "nextStepClick", "stepClick", "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [1, "relative", "z-10", "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-12", "space-y-12"], ["title", "Loading Your Unified Analysis", "subtitle", "Please wait while we prepare your synthesized insights...", "size", "large", 3, "viewMode", "backdropBlur"], [1, "mb-12"], [1, "rounded-2xl", "p-8", "shadow-xl", "animate-fade-in-up", 3, "ngClass"], [1, "flex", "items-start", "gap-6"], [1, "p-4", "rounded-xl", "flex-shrink-0", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-8", "h-8"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "flex-1"], [1, "text-2xl", "font-bold", "mb-2", 3, "ngClass"], [1, "text-lg", "mb-4", 3, "ngClass"], [1, "text-sm", 3, "ngClass"], [3, "keyStrengthsClick", "criticalGapsClick", "quickWinsClick", "summary", "viewMode", "shopCounts", "focusAreaCounts", "metricCounts", "quickWinsCount"], ["id", "section-unified-goals", 1, "space-y-6", "scroll-mt-24"], [3, "goalClick", "timeline", "viewMode", "goals"], [3, "goalClick", "matrix", "viewMode"], [3, "steps", "viewMode"], [3, "viewMode", "sectionIcon"], ["title", "Unified Goals", 3, "icon", "viewMode"], [1, "grid", "gap-6", 2, "grid-template-columns", "repeat(auto-fit, minmax(340px, 1fr))"], [3, "goal", "viewMode"], [3, "goalClick", "sourceBadgeClick", "relatedMetricsClick", "learnMoreClick", "goal", "viewMode"], ["id", "section-executive-summary", 1, "space-y-6", "scroll-mt-24"], [1, "rounded-2xl", "p-8", "shadow-xl", 3, "ngClass"], [1, "space-y-6"], [1, "flex", "items-start", "justify-between", "gap-4"], [1, "text-2xl", "font-bold", "mb-3", 3, "ngClass"], [1, "text-lg", "leading-relaxed", 3, "ngClass"], [3, "grade", "gradeRationale", "viewMode"], [3, "close", "isLightMode", "isOpen"], [3, "close", "modeSelected", "viewMode", "currentMode", "isOpen"], [3, "markAsReviewed", "viewMode", "selfContentStatus", "isLoading"]], template: function SymphiqProfileAnalysisUnifiedDashboardComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵelement(1, "div", 1)(2, "symphiq-scroll-progress-bar", 2);
             i0.ɵɵelementStart(3, "div", 3)(4, "symphiq-dashboard-header", 4);
@@ -105332,7 +105446,8 @@ class SymphiqProfileAnalysisUnifiedDashboardComponent {
             <symphiq-unified-timeline
               [timeline]="unifiedTimeline()"
               [viewMode]="viewMode()"
-              (phaseClick)="onTimelinePhaseClick($event)"
+              [goals]="unifiedGoals()"
+              (goalClick)="onGoalClick($event)"
             />
 
             <symphiq-unified-priority-matrix
@@ -105465,7 +105580,7 @@ class SymphiqProfileAnalysisUnifiedDashboardComponent {
             type: HostListener,
             args: ['window:scroll']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqProfileAnalysisUnifiedDashboardComponent, { className: "SymphiqProfileAnalysisUnifiedDashboardComponent", filePath: "lib/components/profile-analysis-unified-dashboard/symphiq-profile-analysis-unified-dashboard.component.ts", lineNumber: 372 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqProfileAnalysisUnifiedDashboardComponent, { className: "SymphiqProfileAnalysisUnifiedDashboardComponent", filePath: "lib/components/profile-analysis-unified-dashboard/symphiq-profile-analysis-unified-dashboard.component.ts", lineNumber: 373 }); })();
 
 function SymphiqProfileMetricsAnalysesDashboardComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();