root/fusion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(FN-4113): polish org chart visuals and CSS in agents view

Browse Source 
Polish org chart (AgentsView) CSS visuals with styling refinements, accompanied by updated CSS class assertions in the corresponding test file.

Fusion-Task-Id: FN-4113
This commit is contained in:
Fusion
2026-05-12 09:35:24 -07:00
committed by gsxdsm
parent e0b9eb2fad
commit 83a1a98f17
2 changed files with 63 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -76,14 +76,19 @@ describe("Agent CSS classes", () => {
it("should use dashboard tokens in the updated org chart styles", () => {
const agentsViewCss = fs.readFileSync(path.join(__dirname, "../components/AgentsView.css"), "utf-8");
const orgChartStart = agentsViewCss.indexOf("/* === FN-1167: Agent Org Chart + Chain of Command === */");
const orgChartSection = orgChartStart >= 0 ? agentsViewCss.slice(orgChartStart) : "";
const orgChartEnd = agentsViewCss.indexOf(".chain-of-command-path", orgChartStart);
const orgChartSection = orgChartStart >= 0
? agentsViewCss.slice(orgChartStart, orgChartEnd >= 0 ? orgChartEnd : undefined)
: "";
expect(orgChartSection).toContain("gap: var(--space-xl)");
expect(orgChartSection).toContain("padding: var(--space-lg)");
expect(orgChartSection).toContain("padding: var(--space-xl)");
expect(orgChartSection).toContain("padding: var(--space-md)");
expect(orgChartSection).toContain("--org-chart-node-width: calc(var(--space-xl) * 9 + var(--space-xs))");
expect(orgChartSection).toContain("--org-chart-root-gap: var(--space-xl)");
expect(orgChartSection).toContain("--org-chart-connector-gap: var(--space-sm)");
expect(orgChartSection).toContain("--org-chart-sibling-gap: var(--space-xl)");
expect(orgChartSection).toContain("--org-chart-children-offset: calc(var(--space-lg) + var(--space-sm))");
expect(orgChartSection).toContain("--org-chart-connector-color: color-mix(in srgb, var(--text-muted) 60%, transparent)");
expect(orgChartSection).toContain("--org-chart-first-child-leaves: 1");
expect(orgChartSection).toContain("--org-chart-last-child-leaves: 1");
expect(orgChartSection).toContain("--org-chart-first-child-center-offset");
@@ -95,24 +100,33 @@ describe("Agent CSS classes", () => {
expect(orgChartSection).toContain("overflow: auto");
expect(orgChartSection).toContain("overscroll-behavior: contain");
expect(orgChartSection).toContain("transform-origin: top left");
expect(orgChartSection).toContain("background: var(--bg)");
expect(orgChartSection).toContain("background: var(--card)");
expect(orgChartSection).toContain("background: var(--card-hover)");
expect(orgChartSection).toContain("border: 1px solid var(--border)");
expect(orgChartSection).toContain("border-radius: var(--radius-lg)");
expect(orgChartSection).toContain("border-radius: var(--radius-pill)");
expect(orgChartSection).toContain("box-shadow: var(--shadow-sm)");
expect(orgChartSection).toContain("box-shadow: var(--shadow-md)");
expect(orgChartSection).toContain("box-shadow: var(--shadow-md), var(--focus-ring-strong)");
expect(orgChartSection).toContain("border-color: color-mix(in srgb, var(--color-success) 40%, var(--border))");
expect(orgChartSection).toContain("color: var(--text)");
expect(orgChartSection).toContain("color: var(--text-muted)");
expect(orgChartSection).toContain("border-radius: var(--radius-pill)");
expect(orgChartSection).toContain("transition: border-color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast)");
expect(orgChartSection).toContain("box-shadow var(--transition-fast)");
expect(orgChartSection).toContain("background-color var(--transition-fast)");
expect(orgChartSection).toContain("transform var(--transition-fast)");
expect(orgChartSection).toContain("--org-chart-subtree-leaves-number: var(--org-chart-subtree-leaves, 1)");
expect(orgChartSection).toContain("min-width: calc(");
expect(orgChartSection).not.toContain("var(--border-color)");
expect(orgChartSection).not.toContain("var(--text-primary)");
expect(orgChartSection).not.toContain("var(--text-secondary)");
expect(orgChartSection).toContain(".agent-org-chart--vertical .org-chart-children");
expect(orgChartSection).toContain("gap: var(--space-sm)");
expect(orgChartSection).toContain("padding-top: var(--space-sm)");
expect(orgChartSection).toContain("padding-left: calc(var(--space-lg) + var(--space-sm))");
expect(orgChartSection).toContain("--org-chart-node-width: calc(var(--space-2xl) * 5)");
expect(orgChartSection).toContain("--org-chart-sibling-gap: var(--space-sm)");
expect(orgChartSection).toContain("--org-chart-children-offset: var(--space-lg)");
expect(orgChartSection).toContain("@media (max-width: 768px)");
expect(orgChartSection).not.toContain("var(--border-color)");
expect(orgChartSection).not.toContain("var(--text-primary)");
expect(orgChartSection).not.toContain("var(--text-secondary)");
expect(orgChartSection).not.toMatch(/1\.5rem|0\.75rem|0\.72rem|0\.78rem|0\.65rem|120ms\s+ease|10px/);
expect(orgChartSection).not.toMatch(/#[0-9a-fA-F]{3,8}\b|rgba\(/);
});
it("encodes compact mobile agent detail header layout contracts", () => {

48
packages/dashboard/app/components/AgentsView.css
View File

@@ -879,6 +879,9 @@
min-height: 0;
overflow: auto;
max-width: 100%;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
touch-action: pan-x pan-y;
@@ -912,13 +915,14 @@
--org-chart-connector-gap: var(--space-sm);
--org-chart-children-offset: calc(var(--space-lg) + var(--space-sm));
--org-chart-root-gap: var(--space-xl);
--org-chart-connector-color: color-mix(in srgb, var(--text-muted) 60%, transparent);
--org-chart-first-child-leaves: 1;
--org-chart-last-child-leaves: 1;
display: flex;
align-items: flex-start;
justify-content: flex-start;
gap: var(--org-chart-root-gap);
padding: var(--space-lg);
padding: var(--space-xl);
min-height: var(--org-chart-node-width);
}
@@ -951,13 +955,18 @@
.org-chart-node-card {
width: var(--org-chart-node-width);
max-width: 100%;
background: var(--surface);
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
padding: var(--space-md);
color: var(--text);
cursor: pointer;
transition: border-color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast);
transition:
border-color var(--transition-fast),
background-color var(--transition-fast),
box-shadow var(--transition-fast),
transform var(--transition-fast);
position: relative;
}
@@ -965,30 +974,37 @@
.org-chart-node-card:focus-visible {
border-color: var(--todo);
background: var(--card-hover);
box-shadow: var(--shadow-md);
transform: translateY(calc(var(--space-xs) * -0.25));
outline: none;
}
.org-chart-node-card:focus-visible {
box-shadow: var(--focus-ring-strong);
box-shadow: var(--shadow-md), var(--focus-ring-strong);
}
.org-chart-node-card--running {
background: var(--state-active-bg);
border-color: color-mix(in srgb, var(--color-success) 40%, var(--border));
}
.org-chart-node__header {
display: flex;
align-items: center;
gap: var(--space-sm);
margin-bottom: var(--space-sm);
gap: var(--space-md);
margin-bottom: var(--space-md);
}
.org-chart-node__icon {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: var(--space-lg);
flex-shrink: 0;
}
.org-chart-node__name {
font-size: calc(var(--space-sm) + var(--space-xs) * 1.5);
font-weight: 600;
line-height: 1.2;
}
@@ -999,6 +1015,7 @@
justify-content: center;
flex-wrap: wrap;
gap: var(--space-xs);
margin-top: var(--space-xs);
}
.org-chart-node__badge {
@@ -1025,7 +1042,7 @@
bottom: calc(var(--org-chart-connector-gap) * -1);
width: 1px;
height: var(--org-chart-children-offset);
background: var(--border);
background: var(--org-chart-connector-color);
}
.org-chart-children {
@@ -1060,7 +1077,7 @@
left: var(--org-chart-first-child-center-offset);
right: var(--org-chart-last-child-center-offset);
height: 1px;
background: var(--border);
background: var(--org-chart-connector-color);
}
.agent-org-chart--vertical {
@@ -1106,6 +1123,7 @@
right: auto;
width: 1px;
height: auto;
background: var(--org-chart-connector-color);
}
.agent-org-chart--vertical .org-chart-children > .org-chart-node::before {
@@ -1114,6 +1132,7 @@
transform: none;
width: var(--space-sm);
height: 1px;
background: var(--org-chart-connector-color);
}
.org-chart-children > .org-chart-node::before {
@@ -1124,7 +1143,18 @@
transform: translateX(-50%);
width: 1px;
height: var(--org-chart-children-offset);
background: var(--border);
background: var(--org-chart-connector-color);
}
@media (max-width: 768px) {
.agent-org-chart {
--org-chart-sibling-gap: var(--space-lg);
padding: var(--space-md);
}
.agent-org-chart--vertical {
--org-chart-sibling-gap: var(--space-sm);
}
}
.chain-of-command-path {