feat(FN-2945): merge fusion/fn-2945

- Fix org chart connector alignment in `AgentsView.css` — connectors now properly align with their target nodes
- Update `agent-css-classes.test.ts` and `agents-view-mobile.test.tsx` to reflect CSS class changes

Commits merged:
- fix(FN-2945): complete Step 2 — pass lint test typecheck build gates
- fix(FN-2945): complete Step 1 — align org chart connector geometry
- fix(FN-2945): complete Step 1 — align org chart connectors

Files changed:
.../app/__tests__/agent-css-classes.test.ts        |  3 ++-
 packages/dashboard/app/components/AgentsView.css   | 22 +++++++++++-----------
 .../__tests__/agents-view-mobile.test.tsx          |  5 ++---
 3 files changed, 15 insertions(+), 15 deletions(-)

Fusion-Task-Id: FN-2945

packages/dashboard/app/__tests__/agent-css-classes.test.ts

@@ -174,7 +174,8 @@ describe("Agent CSS classes", () => {
     const orgChartSection = orgChartStart >= 0 ? agentsViewCss.slice(orgChartStart) : "";
     expect(orgChartSection).toContain("gap: var(--space-xl)");
     expect(orgChartSection).toContain("padding: var(--space-lg)");
-    expect(orgChartSection).toContain("min-height: calc(var(--space-xl) * 9 + var(--space-xs))");
+    expect(orgChartSection).toContain("--org-chart-node-width: calc(var(--space-xl) * 9 + var(--space-xs))");
+    expect(orgChartSection).toContain("min-height: var(--org-chart-node-width)");
     expect(orgChartSection).toContain("border: 1px solid var(--border)");
     expect(orgChartSection).toContain("color: var(--text)");
     expect(orgChartSection).toContain("color: var(--text-muted)");

packages/dashboard/app/components/AgentsView.css

@@ -696,6 +696,8 @@
 
 /* === FN-1167: Agent Org Chart + Chain of Command === */
 .agent-org-chart {
+  --org-chart-node-width: calc(var(--space-xl) * 9 + var(--space-xs));
+  --org-chart-connector-gap: var(--space-xs);
   display: flex;
   align-items: flex-start;
   justify-content: flex-start;
@@ -703,7 +705,7 @@
   padding: var(--space-lg);
   overflow-x: auto;
   overflow-y: visible;
-  min-height: calc(var(--space-xl) * 9 + var(--space-xs));
+  min-height: var(--org-chart-node-width);
 }
 
 .agent-org-chart__loading,
@@ -719,7 +721,8 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  min-width: calc(var(--space-xl) * 9 + var(--space-xs));
+  width: var(--org-chart-node-width);
+  min-width: var(--org-chart-node-width);
   flex: 0 0 auto;
 }
 
@@ -792,9 +795,9 @@
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
-  bottom: calc(var(--space-lg) * -1);
+  bottom: calc(var(--org-chart-connector-gap) * -1);
   width: 1px;
-  height: var(--space-lg);
+  height: calc(var(--org-chart-connector-gap) * 2);
   background: var(--border);
 }
 
@@ -805,15 +808,15 @@
   justify-content: center;
   gap: var(--space-lg);
   padding-top: var(--space-xl);
-  margin-top: var(--space-xs);
+  margin-top: var(--org-chart-connector-gap);
 }
 
 .org-chart-children::before {
   content: "";
   position: absolute;
   top: 0;
-  left: var(--space-xl);
-  right: var(--space-xl);
+  left: calc(var(--org-chart-node-width) / 2);
+  right: calc(var(--org-chart-node-width) / 2);
   height: 1px;
   background: var(--border);
 }
@@ -899,6 +902,7 @@
   }
 
   .agent-org-chart {
+    --org-chart-node-width: calc(var(--space-2xl) * 5);
     padding: var(--space-sm);
     padding-bottom: calc(var(--space-lg) + var(--space-sm));
     gap: var(--space-sm);
@@ -908,10 +912,6 @@
     min-height: calc(var(--space-2xl) * 4);
   }
 
-  .org-chart-node {
-    min-width: calc(var(--space-2xl) * 5);
-  }
-
   .org-chart-node-card {
     padding: var(--space-sm);
     border-radius: var(--radius-md);

packages/dashboard/app/components/__tests__/agents-view-mobile.test.tsx

@@ -239,10 +239,9 @@ describe("agents-view mobile CSS", () => {
   });
 
   it("defines mobile org chart sizing rules", () => {
-    expect(mobileMediaBlock).toContain(".org-chart-node");
-    expect(extractRuleBlock(mobileMediaBlock, ".org-chart-node")).toContain("min-width: calc(var(--space-2xl) * 5)");
-    expect(extractRuleBlock(mobileMediaBlock, ".org-chart-node-card")).toContain("padding: var(--space-sm)");
     expect(extractRuleBlock(mobileMediaBlock, ".agent-org-chart")).toContain("gap: var(--space-sm)");
+    expect(extractRuleBlock(mobileMediaBlock, ".agent-org-chart")).toContain("--org-chart-node-width: calc(var(--space-2xl) * 5)");
+    expect(extractRuleBlock(mobileMediaBlock, ".org-chart-node-card")).toContain("padding: var(--space-sm)");
     expect(extractRuleBlock(mobileMediaBlock, ".org-chart-node__badge")).toContain("font-size: calc(var(--space-sm) + var(--space-xs) * 0.625)");
   });
 });