feat(dashboard): tokenized org-chart connector offsets + viewport scroll

Add the connector pseudo-elements and CSS custom properties expected by
AgentsView tests: --org-chart-first-child-center-offset and
--org-chart-last-child-center-offset (with 50% defaults), the
.org-chart-children::before horizontal bar, and a per-child vertical
stub via .org-chart-children > .org-chart-node::before. The vertical
variant uses --space-sm. Mobile viewport switches overflow from hidden
to auto so it owns scroll. Unskip the two tests that asserted on these.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

packages/dashboard/app/components/AgentsView.css

@@ -1073,6 +1073,41 @@
   gap: var(--org-chart-sibling-gap);
   padding-top: var(--org-chart-children-offset);
   margin-top: var(--org-chart-connector-gap);
+  --org-chart-first-child-center-offset: 50%;
+  --org-chart-last-child-center-offset: 50%;
+}
+
+.org-chart-children::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  height: var(--org-chart-children-offset, var(--space-md));
+  left: var(--org-chart-first-child-center-offset);
+  right: var(--org-chart-last-child-center-offset);
+  border-top: 1px solid var(--border-color, currentColor);
+  pointer-events: none;
+}
+
+.org-chart-children > .org-chart-node::before {
+  content: "";
+  position: absolute;
+  top: calc(-1 * var(--org-chart-children-offset));
+  left: 50%;
+  width: 1px;
+  height: var(--org-chart-children-offset);
+  border-left: 1px solid var(--border-color, currentColor);
+  pointer-events: none;
+}
+
+.agent-org-chart--vertical .org-chart-children::before {
+  top: 0;
+  left: var(--space-sm);
+  right: auto;
+  bottom: 0;
+  width: 1px;
+  height: auto;
+  border-top: none;
+  border-left: 1px solid var(--border-color, currentColor);
 }
 
 .agent-org-chart--vertical {
@@ -1230,7 +1265,7 @@
     min-height: calc(var(--space-2xl) * 4);
     flex: 1;
     min-width: 0;
-    overflow: hidden;
+    overflow: auto;
     overscroll-behavior: contain;
     -webkit-overflow-scrolling: touch;
   }

packages/dashboard/app/components/__tests__/AgentsView.test.tsx

@@ -1405,10 +1405,7 @@ describe("AgentsView", () => {
       expect(container.querySelectorAll(".org-chart-node--has-children").length).toBeGreaterThan(0);
     });
 
-    // Skipped: tokenized connector edge-offsets are a planned feature
+    it("uses tokenized connector edge offsets for org chart child bars", () => {
-    // (--org-chart-first-child-center-offset / -last-child-center-offset).
-    // Not yet implemented in AgentsView.css.
-    it.skip("uses tokenized connector edge offsets for org chart child bars", () => {
       const css = loadAllAppCss();
       expect(css).toContain("--org-chart-first-child-center-offset");
       expect(css).toContain("--org-chart-last-child-center-offset");

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

@@ -290,9 +290,7 @@ describe("agents-view mobile CSS", () => {
     expect(block).toContain("flex-wrap: wrap");
   });
 
-  // Skipped: this test asserts on tokenized connector edge-offset CSS vars
+  it("defines mobile org chart sizing and pan/zoom controls rules", () => {
-  // and overflow:auto on the org-chart viewport — both planned features.
-  it.skip("defines mobile org chart sizing and pan/zoom controls rules", () => {
     expect(extractRuleBlock(mobileMediaBlock, ".agent-org-chart-controls")).toContain("display: flex");
     expect(extractRuleBlock(mobileMediaBlock, ".agent-org-chart-controls")).toContain("gap: var(--space-sm)");
     const viewportBlock = extractRuleBlock(mobileMediaBlock, ".agent-org-chart-viewport");