feat(FN-2188): harden dev server view lifecycle and mobile nav

- Update the dashboard dev-server API client for compatibility with multiple backend response shapes - Refine useDevServer polling and SSE lifecycle handling to improve status/action reliability - Gate dev server navigation in header/mobile overflow and fix mobile preview header wrapping styles - Expand DevServerView and useDevServer test coverage with isolated mocks and log/status assertions - Document the devServerView experimental feature flag in settings reference
2026-04-20 23:07:28 -07:00
parent 087a67bcaa
commit 7bcc360400
12 changed files with 438 additions and 231 deletions
--- a/packages/dashboard/app/components/Header.tsx
+++ b/packages/dashboard/app/components/Header.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef, useCallback, useMemo } from "react";
-import { Settings, Pause, Play, Square, LayoutGrid, List, Terminal, Lightbulb, Search, X, Activity, MoreHorizontal, Clock, Folder, History, GitBranch, Server, Workflow, Bot, ChevronLeft, Target, ChevronRight, FileCode, Loader2, Grid3X3, Mail, MessageSquare, ChevronDown, Check, Map, Zap, Sparkles, FileText, Brain } from "lucide-react";
+import { Settings, Pause, Play, Square, LayoutGrid, List, Terminal, Lightbulb, Search, X, Activity, MoreHorizontal, Clock, Folder, History, GitBranch, Monitor, Server, Workflow, Bot, ChevronLeft, Target, ChevronRight, FileCode, Loader2, Grid3X3, Mail, MessageSquare, ChevronDown, Check, Map, Zap, Sparkles, FileText, Brain } from "lucide-react";
 import type { ProjectInfo } from "../api";
 import type { NodeConfig, ProjectStatus } from "@fusion/core";
 import { fetchScripts } from "../api";
@@ -301,7 +301,8 @@ export function Header({
      experimentalFeatures?.insights ||
      experimentalFeatures?.roadmap ||
      showSkillsTab ||
-      experimentalFeatures?.memoryView
+      experimentalFeatures?.memoryView ||
+      experimentalFeatures?.devServerView
    );
  }, [experimentalFeatures, showSkillsTab]);

@@ -799,23 +800,11 @@ export function Header({
            >
              <Mail size={16} />
            </button>
-            {(experimentalFeatures?.devServer || experimentalFeatures?.devServerView) && (
-              <button
-                className={`view-toggle-btn${view === "devserver" || view === "dev-server" ? " active" : ""}`}
-                onClick={() => onChangeView("devserver")}
-                title="Dev Server"
-                aria-label="Dev Server"
-                aria-pressed={view === "devserver" || view === "dev-server"}
-                data-testid="view-toggle-devserver"
-              >
-                <Server size={16} />
-              </button>
-            )}
            {hasViewOverflowItems && (
              <>
                <button
                  ref={viewOverflowTriggerRef}
-                  className={`view-toggle-btn${["skills", "roadmaps", "insights", "memory"].includes(view) ? " active" : ""}`}
+                  className={`view-toggle-btn${["skills", "roadmaps", "insights", "memory", "dev-server", "devserver"].includes(view) ? " active" : ""}`}
                  onClick={() => setIsViewOverflowOpen((prev) => !prev)}
                  title="More views"
                  aria-label="More views"
@@ -888,6 +877,20 @@ export function Header({
                        <span>Memory</span>
                      </button>
                    )}
+                    {experimentalFeatures?.devServerView && (
+                      <button
+                        className={`view-toggle-overflow-item${view === "dev-server" || view === "devserver" ? " active" : ""}`}
+                        onClick={() => {
+                          onChangeView("dev-server");
+                          setIsViewOverflowOpen(false);
+                        }}
+                        role="menuitem"
+                        data-testid="view-toggle-dev-server"
+                      >
+                        <Monitor size={14} />
+                        <span>Dev Server</span>
+                      </button>
+                    )}
                  </div>
                )}
              </>
--- a/packages/dashboard/app/components/MobileNavBar.tsx
+++ b/packages/dashboard/app/components/MobileNavBar.tsx
@@ -18,7 +18,7 @@ import {
  MoreHorizontal,
  Play,
  Settings,
-  Server,
+  Monitor,
  Sparkles,
  Target,
  Terminal,
@@ -579,16 +579,16 @@ export function MobileNavBar({
              </button>
            )}

-            {(experimentalFeatures?.devServer || experimentalFeatures?.devServerView) && (
+            {experimentalFeatures?.devServerView && (
              <button
                type="button"
                className="mobile-more-item"
-                data-testid="mobile-more-item-devserver"
+                data-testid="mobile-more-item-dev-server"
                onClick={() => {
-                  handleMoreAction(() => onChangeView("devserver"));
+                  handleMoreAction(() => onChangeView("dev-server"));
                }}
              >
-                <Server size={14} />
+                <Monitor size={14} />
                <span>Dev Server</span>
              </button>
            )}
--- a/packages/dashboard/app/components/tests/DevServerView.test.tsx
+++ b/packages/dashboard/app/components/tests/DevServerView.test.tsx
@@ -6,6 +6,7 @@ import { DevServerView } from "../DevServerView";
 const mockUseDevServer = vi.fn();
 const mockUseDevServerConfig = vi.fn();
 const mockUseDevServerLogs = vi.fn();
+const mockUsePreviewEmbed = vi.fn();

 vi.mock("../../hooks/useDevServer", () => ({
  useDevServer: (...args: unknown[]) => mockUseDevServer(...args),
@@ -19,6 +20,14 @@ vi.mock("../../hooks/useDevServerLogs", () => ({
  useDevServerLogs: (...args: unknown[]) => mockUseDevServerLogs(...args),
 }));

+vi.mock("../../hooks/usePreviewEmbed", () => ({
+  usePreviewEmbed: (...args: unknown[]) => mockUsePreviewEmbed(...args),
+}));
+
+vi.mock("../DevServerLogViewer", () => ({
+  DevServerLogViewer: () => <div data-testid="mock-devserver-log-viewer" />,
+}));
+
 vi.mock("lucide-react", () => ({
  AlertTriangle: () => <span data-testid="icon-alert-triangle" />,
  ChevronDown: () => <span data-testid="icon-chevron-down" />,
@@ -77,6 +86,7 @@ function createDevServerHookState(overrides: Record<string, unknown> = {}) {
    setPreviewUrl: vi.fn().mockResolvedValue(undefined),
    loading: false,
    error: null,
+    detect: vi.fn().mockResolvedValue(undefined),
    ...overrides,
  };
 }
@@ -119,6 +129,19 @@ function createDevServerLogsHookState(overrides: Record<string, unknown> = {}) {
  };
 }

+function createPreviewEmbedState(overrides: Record<string, unknown> = {}) {
+  return {
+    embedStatus: "embedded",
+    iframeRef: { current: null },
+    handleIframeLoad: vi.fn(),
+    handleIframeError: vi.fn(),
+    resetEmbed: vi.fn(),
+    isEmbedded: true,
+    isBlocked: false,
+    ...overrides,
+  };
+}
+
 describe("DevServerView", () => {
  const addToast = vi.fn();

@@ -127,6 +150,13 @@ describe("DevServerView", () => {
    mockUseDevServer.mockReturnValue(createDevServerHookState());
    mockUseDevServerConfig.mockReturnValue(createConfigHookState());
    mockUseDevServerLogs.mockReturnValue(createDevServerLogsHookState());
+    mockUsePreviewEmbed.mockReturnValue(createPreviewEmbedState());
+  });
+
+  it("renders without crashing", () => {
+    render(<DevServerView addToast={addToast} projectId="project-a" />);
+
+    expect(screen.getByTestId("dev-server-view")).toBeInTheDocument();
  });

  it("renders candidate list when detection returns scripts", () => {
@@ -145,6 +175,84 @@ describe("DevServerView", () => {
    expect(screen.getByTestId("dev-server-empty-candidates")).toHaveTextContent("No dev server scripts detected");
  });

+  it("shows stopped status badge", () => {
+    mockUseDevServer.mockReturnValue(createDevServerHookState({ serverState: createState({ status: "stopped" }) }));
+
+    render(<DevServerView addToast={addToast} projectId="project-a" />);
+
+    expect(screen.getByTestId("dev-server-status-badge")).toHaveTextContent("Stopped");
+  });
+
+  it("shows running status badge", () => {
+    mockUseDevServer.mockReturnValue(createDevServerHookState({ serverState: createState({ status: "running" }) }));
+
+    render(<DevServerView addToast={addToast} projectId="project-a" />);
+
+    expect(screen.getByTestId("dev-server-status-badge")).toHaveTextContent("Running");
+  });
+
+  it("disables start when running and stop when stopped", () => {
+    mockUseDevServer.mockReturnValue(createDevServerHookState({ serverState: createState({ status: "running" }) }));
+
+    const { rerender } = render(<DevServerView addToast={addToast} projectId="project-a" />);
+
+    expect(screen.getByTestId("dev-server-start-button")).toBeDisabled();
+
+    mockUseDevServer.mockReturnValue(createDevServerHookState({ serverState: createState({ status: "stopped" }) }));
+    rerender(<DevServerView addToast={addToast} projectId="project-a" />);
+
+    expect(screen.getByTestId("dev-server-stop-button")).toBeDisabled();
+  });
+
+  it("clicking start calls start from hook", async () => {
+    const start = vi.fn().mockResolvedValue(undefined);
+    mockUseDevServer.mockReturnValue(createDevServerHookState({ start }));
+
+    render(<DevServerView addToast={addToast} projectId="project-a" />);
+
+    fireEvent.click(screen.getByTestId("dev-server-start-button"));
+
+    await waitFor(() => {
+      expect(start).toHaveBeenCalled();
+    });
+  });
+
+  it("clicking stop calls stop from hook", async () => {
+    const stop = vi.fn().mockResolvedValue(undefined);
+    mockUseDevServer.mockReturnValue(
+      createDevServerHookState({
+        stop,
+        serverState: createState({ status: "running" }),
+      }),
+    );
+
+    render(<DevServerView addToast={addToast} projectId="project-a" />);
+
+    fireEvent.click(screen.getByTestId("dev-server-stop-button"));
+
+    await waitFor(() => {
+      expect(stop).toHaveBeenCalled();
+    });
+  });
+
+  it("clicking restart calls restart from hook", async () => {
+    const restart = vi.fn().mockResolvedValue(undefined);
+    mockUseDevServer.mockReturnValue(
+      createDevServerHookState({
+        restart,
+        serverState: createState({ status: "running" }),
+      }),
+    );
+
+    render(<DevServerView addToast={addToast} projectId="project-a" />);
+
+    fireEvent.click(screen.getByTestId("dev-server-restart-button"));
+
+    await waitFor(() => {
+      expect(restart).toHaveBeenCalled();
+    });
+  });
+
  it("clicking a candidate persists selection via selectScript", async () => {
    const selectScript = vi.fn().mockResolvedValue(undefined);
    mockUseDevServerConfig.mockReturnValue(createConfigHookState({ selectScript }));
@@ -201,6 +309,31 @@ describe("DevServerView", () => {
    });
  });

+  it("renders log viewer panel", () => {
+    mockUseDevServerLogs.mockReturnValue(
+      createDevServerLogsHookState({
+        entries: [{ id: 1, text: "server started", stream: "stdout", timestamp: "2026-01-01T00:00:00.000Z" }],
+      }),
+    );
+
+    render(<DevServerView addToast={addToast} projectId="project-a" />);
+
+    expect(screen.getByTestId("mock-devserver-log-viewer")).toBeInTheDocument();
+  });
+
+  it("renders preview iframe when preview URL is available", () => {
+    mockUseDevServer.mockReturnValue(
+      createDevServerHookState({
+        serverState: createState({ status: "running", previewUrl: "http://localhost:3000" }),
+      }),
+    );
+    mockUsePreviewEmbed.mockReturnValue(createPreviewEmbedState({ embedStatus: "embedded", isBlocked: false }));
+
+    render(<DevServerView addToast={addToast} projectId="project-a" />);
+
+    expect(screen.getByTitle("Dev server preview")).toBeInTheDocument();
+  });
+
  it("renders selected script summary when config has a selection", () => {
    mockUseDevServerConfig.mockReturnValue(
      createConfigHookState({