feat(FN-3271): collapse mobile overview on live run select in AgentsView

Collapsed mobile overview panel now hides automatically when a live run is selected in the AgentsView, improving the mobile experience by reducing visual clutter during active agent sessions.

Fusion-Task-Id: FN-3271
This commit is contained in:
Fusion
2026-05-03 09:56:26 -07:00
committed by gsxdsm
parent 0bb923b044
commit 987ced4e10
2 changed files with 34 additions and 1 deletions

View File

@@ -634,6 +634,13 @@ export function AgentsView({ addToast, projectId, onOpenTaskLogs, agentOnboardin
openAgentDetail(childId);
}, [openAgentDetail]);
const handleOverviewAgentSelect = useCallback((agentId: string) => {
openAgentDetail(agentId);
if (isMobileViewport) {
setIsOverviewOpen(false);
}
}, [isMobileViewport, openAgentDetail]);
const handleRunHeartbeat = async (agentId: string, agentName: string) => {
try {
await startAgentRun(agentId, projectId, { source: "on_demand", triggerDetail: "Triggered from dashboard" });
@@ -855,7 +862,7 @@ export function AgentsView({ addToast, projectId, onOpenTaskLogs, agentOnboardin
projectId={projectId}
isOpen={isOverviewOpen}
onToggle={() => setIsOverviewOpen((open) => !open)}
onSelectAgent={setSelectedAgentId}
onSelectAgent={handleOverviewAgentSelect}
onOpenTaskLogs={onOpenTaskLogs}
/>

View File

@@ -334,6 +334,32 @@ describe("AgentsView", () => {
expect(container.querySelector(".agents-split-detail--hidden-mobile")).toBeTruthy();
});
it("collapses mobile overview after selecting an active agent card", async () => {
mockViewportMode.mockReturnValue("mobile");
render(<AgentsView addToast={mockAddToast} />);
const overviewToggle = await openOverviewPanel();
fireEvent.click(await screen.findByRole("button", { name: /select agent test agent 2/i }));
await waitFor(() => {
expect(screen.getByTestId("agent-detail-view")).toHaveTextContent("agent-002");
expect(overviewToggle.getAttribute("aria-expanded")).toBe("false");
});
});
it("keeps desktop overview open after selecting an active agent card", async () => {
mockViewportMode.mockReturnValue("desktop");
render(<AgentsView addToast={mockAddToast} />);
const overviewToggle = await openOverviewPanel();
fireEvent.click(await screen.findByRole("button", { name: /select agent test agent 2/i }));
await waitFor(() => {
expect(screen.getByTestId("agent-detail-view")).toHaveTextContent("agent-002");
expect(overviewToggle.getAttribute("aria-expanded")).toBe("true");
});
});
it("shows a loading indicator while the initial agents fetch is pending", async () => {
let resolveAgents: ((value: Agent[]) => void) | undefined;
mockFetchAgents.mockImplementationOnce(