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

feat(FN-4121): complete Step 5 — clarify org chart layout toggle labels

Browse Source 
Fusion-Task-Id: FN-4121
Fusion-Task-Lineage: aa8b8ab7-c250-4ce5-b42e-7b7a2ba920b1
This commit is contained in:
Fusion
2026-05-13 02:52:59 -07:00
committed by gsxdsm
parent 5c9920ebf7
commit a4895f4c37
2 changed files with 52 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -879,6 +879,17 @@
box-shadow: var(--shadow-sm);
}
.agent-org-chart-layout-toggle__button {
width: auto;
padding: var(--space-xs) var(--space-sm);
gap: var(--space-xs);
}
.agent-org-chart-layout-toggle__text {
font-size: calc(var(--space-sm) + var(--space-xs) * 0.5);
font-weight: 500;
}
.agent-org-chart-controls__zoom-label {
min-width: calc(var(--space-2xl) * 2);
font-family: var(--font-mono);
@@ -1261,6 +1272,13 @@
.agent-org-chart-controls .agent-org-chart-layout-toggle {
order: 1;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
width: 100%;
}
.agent-org-chart-controls .agent-org-chart-layout-toggle__button {
justify-content: center;
}
.agent-org-chart-controls__zoom-label {

57
packages/dashboard/app/components/AgentsView.tsx
View File

@@ -1,5 +1,5 @@
import "./AgentsView.css";
import { useState, useEffect, useCallback, useRef, useMemo, useId, lazy, Suspense, type CSSProperties } from "react";
import { useState, useEffect, useCallback, useRef, useMemo, useId, lazy, Suspense, type CSSProperties, type ReactNode } from "react";
import { Plus, Play, Pause, Activity, Trash2, RefreshCw, Bot, List, ChevronRight, Filter, Upload, Network, SlidersHorizontal, ZoomIn, ZoomOut, Minimize2, Info } from "lucide-react";
import type { Agent, AgentCapability, AgentOnboardingSummary, AgentState, OrgTreeNode } from "../api";
import { updateAgent, updateAgentState, deleteAgent, startAgentRun, fetchOrgTree, fetchSettings, updateSettings } from "../api";
@@ -755,6 +755,37 @@ export function AgentsView({ addToast, projectId, onOpenTaskLogs, agentOnboardin
}
}, [displayOrgTree, orgChartLayoutMode, orgChartViewportWidth, orgChartZoomIndex]);
const renderOrgChartLayoutToggle = useCallback(() => {
const options: Array<{ value: OrgChartLayoutPreference; label: string; icon: ReactNode; ariaLabel: string }> = [
{ value: "horizontal", label: "Horizontal", icon: <Network size={16} />, ariaLabel: "Horizontal layout" },
{ value: "vertical", label: "Vertical", icon: <List size={16} />, ariaLabel: "Vertical layout" },
{ value: "auto", label: "Auto", icon: <RefreshCw size={16} />, ariaLabel: "Automatic layout" },
];
return (
<div className="agent-org-chart-layout-toggle" data-testid="agent-org-chart-layout-toggle">
{options.map((option) => {
const isActive = orgChartLayoutPreference === option.value;
return (
<button
key={option.value}
type="button"
className={`btn-icon touch-target agent-org-chart-layout-toggle__button${isActive ? " btn-icon--active" : ""}`}
onClick={() => handleOrgChartLayoutPreferenceChange(option.value)}
aria-pressed={isActive}
aria-label={option.ariaLabel}
title={option.ariaLabel}
data-layout-value={option.value}
>
{option.icon}
<span className="agent-org-chart-layout-toggle__text">{option.label}</span>
</button>
);
})}
</div>
);
}, [handleOrgChartLayoutPreferenceChange, orgChartLayoutPreference]);
/** Get skill badges from agent metadata */
const getSkillBadges = (agent: Agent): string[] => {
if (Array.isArray(agent.metadata?.skills)) {
@@ -1053,17 +1084,7 @@ export function AgentsView({ addToast, projectId, onOpenTaskLogs, agentOnboardin
<div className="agent-org-chart-shell" data-testid="agent-org-chart-shell">
{isMobileViewport ? (
<div className="agent-org-chart-controls" data-testid="agent-org-chart-controls">
<div className="agent-org-chart-layout-toggle" data-testid="agent-org-chart-layout-toggle">
<button type="button" className={`btn-icon touch-target${orgChartLayoutPreference === "horizontal" ? " btn-icon--active" : ""}`} onClick={() => handleOrgChartLayoutPreferenceChange("horizontal")} aria-pressed={orgChartLayoutPreference === "horizontal"} aria-label="Horizontal layout" title="Horizontal layout" data-layout-value="horizontal">
<Network size={16} />
</button>
<button type="button" className={`btn-icon touch-target${orgChartLayoutPreference === "vertical" ? " btn-icon--active" : ""}`} onClick={() => handleOrgChartLayoutPreferenceChange("vertical")} aria-pressed={orgChartLayoutPreference === "vertical"} aria-label="Vertical layout" title="Vertical layout" data-layout-value="vertical">
<List size={16} />
</button>
<button type="button" className={`btn-icon touch-target${orgChartLayoutPreference === "auto" ? " btn-icon--active" : ""}`} onClick={() => handleOrgChartLayoutPreferenceChange("auto")} aria-pressed={orgChartLayoutPreference === "auto"} aria-label="Automatic layout" title="Automatic layout" data-layout-value="auto">
<RefreshCw size={16} />
</button>
</div>
{renderOrgChartLayoutToggle()}
<button
type="button"
className="btn-icon touch-target"
@@ -1098,17 +1119,7 @@ export function AgentsView({ addToast, projectId, onOpenTaskLogs, agentOnboardin
</div>
) : (
<div className="agent-org-chart-toolbar">
<div className="agent-org-chart-layout-toggle" data-testid="agent-org-chart-layout-toggle">
<button type="button" className={`btn-icon touch-target${orgChartLayoutPreference === "horizontal" ? " btn-icon--active" : ""}`} onClick={() => handleOrgChartLayoutPreferenceChange("horizontal")} aria-pressed={orgChartLayoutPreference === "horizontal"} aria-label="Horizontal layout" title="Horizontal layout" data-layout-value="horizontal">
<Network size={16} />
</button>
<button type="button" className={`btn-icon touch-target${orgChartLayoutPreference === "vertical" ? " btn-icon--active" : ""}`} onClick={() => handleOrgChartLayoutPreferenceChange("vertical")} aria-pressed={orgChartLayoutPreference === "vertical"} aria-label="Vertical layout" title="Vertical layout" data-layout-value="vertical">
<List size={16} />
</button>
<button type="button" className={`btn-icon touch-target${orgChartLayoutPreference === "auto" ? " btn-icon--active" : ""}`} onClick={() => handleOrgChartLayoutPreferenceChange("auto")} aria-pressed={orgChartLayoutPreference === "auto"} aria-label="Automatic layout" title="Automatic layout" data-layout-value="auto">
<RefreshCw size={16} />
</button>
</div>
{renderOrgChartLayoutToggle()}
</div>
)}
<div