feat(FN-4121): complete Step 3 — persist org chart layout preference state

Fusion-Task-Id: FN-4121
Fusion-Task-Lineage: aa8b8ab7-c250-4ce5-b42e-7b7a2ba920b1

packages/dashboard/app/components/AgentsView.tsx

@@ -25,7 +25,13 @@ import {
 } from "../utils/heartbeatIntervals";
 import { isEphemeralAgent, getErrorMessage } from "@fusion/core";
 import { formatAgentSkillBadgeLabel } from "../utils/agentSkills";
-import { resolveOrgChartLayoutMode, type OrgChartLayoutMode } from "./agentsOrgChartLayout";
+import {
+  ORG_CHART_LAYOUT_STORAGE_KEY,
+  isOrgChartLayoutPreference,
+  resolveOrgChartLayoutMode,
+  type OrgChartLayoutMode,
+  type OrgChartLayoutPreference,
+} from "./agentsOrgChartLayout";
 import { AgentAvatar } from "./AgentAvatar";
 import { AgentErrorIndicator } from "./AgentErrorDetailsModal";
 
@@ -208,6 +214,11 @@ export function AgentsView({ addToast, projectId, onOpenTaskLogs, agentOnboardin
     const saved = getScopedItem("fn-agent-view", projectId);
     return (saved === "list" || saved === "board" || saved === "org") ? saved : "list";
   });
+  const [orgChartLayoutPreference, setOrgChartLayoutPreference] = useState<OrgChartLayoutPreference>(() => {
+    if (typeof window === "undefined") return "auto";
+    const saved = getScopedItem(ORG_CHART_LAYOUT_STORAGE_KEY, projectId);
+    return isOrgChartLayoutPreference(saved) ? saved : "auto";
+  });
   const [orgTree, setOrgTree] = useState<OrgTreeNode[]>([]);
   const [isOrgTreeLoading, setIsOrgTreeLoading] = useState(false);
   const [orgChartViewportWidth, setOrgChartViewportWidth] = useState(0);
@@ -234,6 +245,15 @@ export function AgentsView({ addToast, projectId, onOpenTaskLogs, agentOnboardin
     setScopedItem("fn-agent-view", agentView, projectId);
   }, [agentView, projectId]);
 
+  useEffect(() => {
+    const saved = getScopedItem(ORG_CHART_LAYOUT_STORAGE_KEY, projectId);
+    setOrgChartLayoutPreference(isOrgChartLayoutPreference(saved) ? saved : "auto");
+  }, [projectId]);
+
+  useEffect(() => {
+    setScopedItem(ORG_CHART_LAYOUT_STORAGE_KEY, orgChartLayoutPreference, projectId);
+  }, [orgChartLayoutPreference, projectId]);
+
   const [editingRoleForAgent, setEditingRoleForAgent] = useState<string | null>(null);
   const roleSelectRef = useRef<HTMLSelectElement>(null);
   const [updatingHeartbeatAgentId, setUpdatingHeartbeatAgentId] = useState<string | null>(null);
@@ -720,7 +740,8 @@ export function AgentsView({ addToast, projectId, onOpenTaskLogs, agentOnboardin
   const orgChartLayoutMode: OrgChartLayoutMode = useMemo(() => resolveOrgChartLayoutMode({
     tree: displayOrgTree,
     availableWidth: orgChartViewportWidth,
-  }), [displayOrgTree, orgChartViewportWidth]);
+    preference: orgChartLayoutPreference,
+  }), [displayOrgTree, orgChartLayoutPreference, orgChartViewportWidth]);
 
   /** Get skill badges from agent metadata */
   const getSkillBadges = (agent: Agent): string[] => {