@runfusion/fusion 0.22.0 → 0.24.0

package/dist/plugins/fusion-plugin-roadmap/src/dashboard/__tests__/RoadmapsView.test.tsx

@@ -0,0 +1,1144 @@
+/* @vitest-environment jsdom */
+import React from "react";
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { RoadmapsView } from "../RoadmapsView";
+import * as api from "../api";
+import type {
+  Roadmap,
+  RoadmapMilestone,
+  RoadmapFeature,
+  RoadmapWithHierarchy,
+} from "../../roadmap-types";
+
+// Mock the API module
+vi.mock("../api", () => ({
+  fetchRoadmaps: vi.fn(),
+  fetchRoadmap: vi.fn(),
+  createRoadmap: vi.fn(),
+  updateRoadmap: vi.fn(),
+  deleteRoadmap: vi.fn(),
+  createRoadmapMilestone: vi.fn(),
+  updateRoadmapMilestone: vi.fn(),
+  deleteRoadmapMilestone: vi.fn(),
+  createRoadmapFeature: vi.fn(),
+  updateRoadmapFeature: vi.fn(),
+  deleteRoadmapFeature: vi.fn(),
+  reorderRoadmapMilestones: vi.fn(),
+  reorderRoadmapFeatures: vi.fn(),
+  moveRoadmapFeature: vi.fn(),
+  generateFeatureSuggestions: vi.fn(),
+  generateMilestoneSuggestions: vi.fn(),
+}));
+
+// Mock lucide-react icons
+const mockConfirm = vi.fn();
+
+vi.mock("../useConfirm", () => ({
+  useConfirm: () => ({ confirm: mockConfirm }),
+}));
+
+vi.mock("lucide-react", () => ({
+  Plus: ({ size, ...props }: { size?: number }) => (
+    <svg data-testid="plus-icon" {...props}>{`Plus ${size || 16}`}</svg>
+  ),
+  Pencil: (props: Record<string, unknown>) => <span data-testid="pencil-icon" {...props}>Edit</span>,
+  Trash2: (props: Record<string, unknown>) => <span data-testid="trash-icon" {...props}>Delete</span>,
+  Check: (props: Record<string, unknown>) => <span data-testid="check-icon" {...props}>Check</span>,
+  X: (props: Record<string, unknown>) => <span data-testid="x-icon" {...props}>X</span>,
+  GripVertical: (props: Record<string, unknown>) => <span data-testid="grip-icon" {...props}>Grip</span>,
+  Sparkles: (props: Record<string, unknown>) => <span data-testid="sparkles-icon" {...props}>Sparkles</span>,
+  Download: (props: Record<string, unknown>) => <span data-testid="download-icon" {...props}>Download</span>,
+  Copy: (props: Record<string, unknown>) => <span data-testid="copy-icon" {...props}>Copy</span>,
+  Loader: (props: Record<string, unknown>) => <span data-testid="loader-icon" {...props}>Loader</span>,
+  ArrowLeft: (props: Record<string, unknown>) => <span data-testid="arrow-left-icon" {...props}>ArrowLeft</span>,
+  ChevronLeft: (props: Record<string, unknown>) => <span data-testid="chevron-left-icon" {...props}>ChevronLeft</span>,
+  ChevronUp: (props: Record<string, unknown>) => <span data-testid="chevron-up-icon" {...props}>ChevronUp</span>,
+}));
+
+// Viewport mode mock helper
+function mockViewport(mode: "mobile" | "desktop") {
+  Object.defineProperty(window, "matchMedia", {
+    writable: true,
+    value: vi.fn().mockImplementation((query: string) => {
+      const isMobileQuery = query === "(max-width: 768px)";
+      const isTabletQuery = query === "(min-width: 769px) and (max-width: 1024px)";
+      return {
+        matches: mode === "mobile" ? isMobileQuery : false,
+        media: query,
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        dispatchEvent: vi.fn(),
+      };
+    }),
+  });
+}
+
+const mockRoadmaps: Roadmap[] = [
+  {
+    id: "RM-001",
+    title: "Q2 Roadmap",
+    description: "Q2 product roadmap",
+    createdAt: "2026-01-01T00:00:00.000Z",
+    updatedAt: "2026-01-01T00:00:00.000Z",
+  },
+  {
+    id: "RM-002",
+    title: "Q3 Roadmap",
+    description: "Q3 product roadmap",
+    createdAt: "2026-01-02T00:00:00.000Z",
+    updatedAt: "2026-01-02T00:00:00.000Z",
+  },
+];
+
+const mockRoadmapHierarchy: RoadmapWithHierarchy = {
+  id: "RM-001",
+  title: "Q2 Roadmap",
+  description: "Q2 product roadmap",
+  createdAt: "2026-01-01T00:00:00.000Z",
+  updatedAt: "2026-01-01T00:00:00.000Z",
+  milestones: [
+    {
+      id: "RMS-001",
+      roadmapId: "RM-001",
+      title: "Milestone 1",
+      description: "First milestone",
+      orderIndex: 0,
+      createdAt: "2026-01-01T00:00:00.000Z",
+      updatedAt: "2026-01-01T00:00:00.000Z",
+      features: [
+        {
+          id: "RF-001",
+          milestoneId: "RMS-001",
+          title: "Feature 1",
+          description: "First feature",
+          orderIndex: 0,
+          createdAt: "2026-01-01T00:00:00.000Z",
+          updatedAt: "2026-01-01T00:00:00.000Z",
+        },
+      ],
+    },
+    {
+      id: "RMS-002",
+      roadmapId: "RM-001",
+      title: "Milestone 2",
+      description: "Second milestone",
+      orderIndex: 1,
+      createdAt: "2026-01-01T00:00:00.000Z",
+      updatedAt: "2026-01-01T00:00:00.000Z",
+      features: [],
+    },
+  ],
+};
+
+const mockAddToast = vi.fn();
+
+describe("RoadmapsView", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockConfirm.mockReset();
+    mockConfirm.mockResolvedValue(true);
+    mockViewport("desktop");
+    (api.fetchRoadmaps as ReturnType<typeof vi.fn>).mockResolvedValue(mockRoadmaps);
+    (api.fetchRoadmap as ReturnType<typeof vi.fn>).mockResolvedValue(mockRoadmapHierarchy);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("renders roadmap list in sidebar", async () => {
+    render(<RoadmapsView addToast={mockAddToast} />);
+
+    await waitFor(() => {
+      expect(screen.getByText("Q2 Roadmap")).toBeInTheDocument();
+    });
+    expect(screen.getByText("Q3 Roadmap")).toBeInTheDocument();
+    expect(screen.getByText("Roadmaps")).toBeInTheDocument();
+  });
+
+  it("shows empty state when no roadmaps exist", async () => {
+    (api.fetchRoadmaps as ReturnType<typeof vi.fn>).mockResolvedValue([]);
+
+    render(<RoadmapsView addToast={mockAddToast} />);
+
+    await waitFor(() => {
+      expect(screen.getByText("No roadmaps yet. Click + to create one.")).toBeInTheDocument();
+    });
+  });
+
+  it("shows loading state initially", async () => {
+    render(<RoadmapsView addToast={mockAddToast} />);
+
+    expect(screen.getByText("Loading roadmaps...")).toBeInTheDocument();
+  });
+
+  it("selects a roadmap and shows its content", async () => {
+    render(<RoadmapsView addToast={mockAddToast} />);
+
+    await waitFor(() => {
+      expect(screen.getByText("Q2 Roadmap")).toBeInTheDocument();
+    });
+
+    const roadmapItem = screen.getByTestId("roadmap-item-RM-001");
+    fireEvent.click(roadmapItem);
+
+    await waitFor(() => {
+      expect(screen.getByText("Q2 Roadmap")).toBeInTheDocument();
+      expect(screen.getByTestId("edit-roadmap-btn")).toBeInTheDocument();
+    });
+
+    // Should show milestones
+    expect(screen.getByText("Milestone 1")).toBeInTheDocument();
+    expect(screen.getByText("Milestone 2")).toBeInTheDocument();
+  });
+
+  it("creates a new roadmap", async () => {
+    const newRoadmap = {
+      id: "RM-003",
+      title: "New Roadmap",
+      createdAt: "2026-01-03T00:00:00.000Z",
+      updatedAt: "2026-01-03T00:00:00.000Z",
+    };
+    (api.createRoadmap as ReturnType<typeof vi.fn>).mockResolvedValue(newRoadmap);
+
+    render(<RoadmapsView addToast={mockAddToast} />);
+
+    await waitFor(() => {
+      expect(screen.getByText("Q2 Roadmap")).toBeInTheDocument();
+    });
+
+    // Click create button
+    const createBtn = screen.getByTestId("create-roadmap-btn");
+    fireEvent.click(createBtn);
+
+    // Fill in the form
+    const titleInput = screen.getByTestId("create-roadmap-title");
+    await userEvent.type(titleInput, "New Roadmap");
+
+    // Submit
+    const submitBtn = screen.getByTestId("create-roadmap-submit");
+    fireEvent.click(submitBtn);
+
+    await waitFor(() => {
+      expect(api.createRoadmap).toHaveBeenCalledWith(
+        { title: "New Roadmap" },
+        undefined
+      );
+      expect(mockAddToast).toHaveBeenCalledWith("Roadmap created", "success");
+    });
+  });
+
+  it("renders inline edit inputs with current values for milestone and feature", async () => {
+    render(<RoadmapsView addToast={mockAddToast} />);
+
+    await waitFor(() => {
+      expect(screen.getByText("Q2 Roadmap")).toBeInTheDocument();
+    });
+
+    fireEvent.click(screen.getByTestId("roadmap-item-RM-001"));
+
+    await waitFor(() => {
+      expect(screen.getByText("Milestone 1")).toBeInTheDocument();
+    });
+
+    fireEvent.click(screen.getByTestId("milestone-edit-RMS-001"));
+
+    const milestoneTitleInput = await screen.findByTestId("milestone-title-input-RMS-001");
+    expect(milestoneTitleInput).toHaveValue("Milestone 1");
+
+    fireEvent.click(screen.getByTestId("feature-edit-RF-001"));
+
+    const featureTitleInput = await screen.findByTestId("feature-title-input-RF-001");
+    expect(featureTitleInput).toHaveValue("Feature 1");
+  });
+
+  it("edits a roadmap title inline", async () => {
+    (api.updateRoadmap as ReturnType<typeof vi.fn>).mockResolvedValue({
+      ...mockRoadmaps[0],
+      title: "Updated Title",
+    });
+
+    render(<RoadmapsView addToast={mockAddToast} />);
+
+    await waitFor(() => {
+      expect(screen.getByText("Q2 Roadmap")).toBeInTheDocument();
+    });
+
+    // Select the roadmap first
+    const roadmapItem = screen.getByTestId("roadmap-item-RM-001");
+    fireEvent.click(roadmapItem);
+
+    await waitFor(() => {
+      expect(screen.getByTestId("edit-roadmap-btn")).toBeInTheDocument();
+    });
+
+    // Click edit button
+    const editBtn = screen.getByTestId("edit-roadmap-btn");
+    fireEvent.click(editBtn);
+
+    // Should show input field
+    const titleInput = screen.getByTestId("roadmap-title-input");
+    expect(titleInput).toBeInTheDocument();
+
+    // Type new title
+    await userEvent.clear(titleInput);
+    await userEvent.type(titleInput, "Updated Title");
+
+    // Save
+    fireEvent.keyDown(titleInput, { key: "Enter" });
+
+    await waitFor(() => {
+      expect(api.updateRoadmap).toHaveBeenCalledWith("RM-001", { title: "Updated Title" }, undefined);
+    });
+  });
+
+  it("deletes a roadmap after confirmation", async () => {
+    (api.deleteRoadmap as ReturnType<typeof vi.fn>).mockResolvedValue(undefined);
+
+    render(<RoadmapsView addToast={mockAddToast} />);
+
+    await waitFor(() => {
+      expect(screen.getByText("Q2 Roadmap")).toBeInTheDocument();
+    });
+
+    // Select the roadmap first
+    const roadmapItem = screen.getByTestId("roadmap-item-RM-001");
+    fireEvent.click(roadmapItem);
+
+    await waitFor(() => {
+      expect(screen.getByTestId("delete-roadmap-btn")).toBeInTheDocument();
+    });
+
+    // Click delete button
+    const deleteBtn = screen.getByTestId("delete-roadmap-btn");
+    fireEvent.click(deleteBtn);
+
+    await waitFor(() => {
+      expect(mockConfirm).toHaveBeenCalledWith({
+        title: "Delete Roadmap",
+        message: "Delete this roadmap? This cannot be undone.",
+        danger: true,
+      });
+      expect(api.deleteRoadmap).toHaveBeenCalledWith("RM-001", undefined);
+      expect(mockAddToast).toHaveBeenCalledWith("Roadmap deleted", "success");
+    });
+  });
+
+  it("cancels roadmap deletion when not confirmed", async () => {
+    mockConfirm.mockResolvedValueOnce(false);
+
+    render(<RoadmapsView addToast={mockAddToast} />);
+
+    await waitFor(() => {
+      expect(screen.getByText("Q2 Roadmap")).toBeInTheDocument();
+    });
+
+    const roadmapItem = screen.getByTestId("roadmap-item-RM-001");
+    fireEvent.click(roadmapItem);
+
+    await waitFor(() => {
+      expect(screen.getByTestId("delete-roadmap-btn")).toBeInTheDocument();
+    });
+
+    const deleteBtn = screen.getByTestId("delete-roadmap-btn");
+    fireEvent.click(deleteBtn);
+
+    expect(api.deleteRoadmap).not.toHaveBeenCalled();
+  });
+
+  it("shows empty milestones state", async () => {
+    const emptyHierarchy: RoadmapWithHierarchy = {
+      ...mockRoadmapHierarchy,
+      milestones: [],
+    };
+    (api.fetchRoadmap as ReturnType<typeof vi.fn>).mockResolvedValue(emptyHierarchy);
+
+    render(<RoadmapsView addToast={mockAddToast} />);
+
+    await waitFor(() => {
+      expect(screen.getByText("Q2 Roadmap")).toBeInTheDocument();
+    });
+
+    const roadmapItem = screen.getByTestId("roadmap-item-RM-001");
+    fireEvent.click(roadmapItem);
+
+    await waitFor(() => {
+      expect(screen.getByText("This roadmap has no milestones.")).toBeInTheDocument();
+    });
+  });
+
+  it("shows empty features state for a milestone", async () => {
+    render(<RoadmapsView addToast={mockAddToast} />);
+
+    await waitFor(() => {
+      expect(screen.getByText("Q2 Roadmap")).toBeInTheDocument();
+    });
+
+    const roadmapItem = screen.getByTestId("roadmap-item-RM-001");
+    fireEvent.click(roadmapItem);
+
+    await waitFor(() => {
+      expect(screen.getByText("Milestone 2")).toBeInTheDocument();
+    });
+
+    // Milestone 2 has no features
+    const milestone2 = screen.getByTestId("add-feature-RMS-002").closest(".roadmaps-view__milestone");
+    expect(milestone2?.textContent).toContain("No features yet.");
+  });
+
+  it("creates a milestone", async () => {
+    const newMilestone: RoadmapMilestone = {
+      id: "RMS-003",
+      roadmapId: "RM-001",
+      title: "New Milestone",
+      orderIndex: 2,
+      createdAt: "2026-01-03T00:00:00.000Z",
+      updatedAt: "2026-01-03T00:00:00.000Z",
+    };
+    (api.createRoadmapMilestone as ReturnType<typeof vi.fn>).mockResolvedValue(newMilestone);
+
+    render(<RoadmapsView addToast={mockAddToast} />);
+
+    await waitFor(() => {
+      expect(screen.getByText("Q2 Roadmap")).toBeInTheDocument();
+    });
+
+    const roadmapItem = screen.getByTestId("roadmap-item-RM-001");
+    fireEvent.click(roadmapItem);
+
+    await waitFor(() => {
+      expect(screen.getByTestId("add-milestone-btn")).toBeInTheDocument();
+    });
+
+    // Click add milestone button
+    const addBtn = screen.getByTestId("add-milestone-btn");
+    fireEvent.click(addBtn);
+
+    // Fill in the form
+    const titleInput = screen.getByTestId("create-milestone-title");
+    await userEvent.type(titleInput, "New Milestone");
+
+    // Submit
+    const submitBtn = screen.getByTestId("create-milestone-submit");
+    fireEvent.click(submitBtn);
+
+    await waitFor(() => {
+      expect(api.createRoadmapMilestone).toHaveBeenCalledWith("RM-001", { title: "New Milestone" }, undefined);
+      expect(mockAddToast).toHaveBeenCalledWith("Milestone created", "success");
+    });
+  });
+
+  it("deletes a milestone after confirmation", async () => {
+    (api.deleteRoadmapMilestone as ReturnType<typeof vi.fn>).mockResolvedValue(undefined);
+
+    render(<RoadmapsView addToast={mockAddToast} />);
+
+    await waitFor(() => {
+      expect(screen.getByText("Q2 Roadmap")).toBeInTheDocument();
+    });
+
+    const roadmapItem = screen.getByTestId("roadmap-item-RM-001");
+    fireEvent.click(roadmapItem);
+
+    await waitFor(() => {
+      expect(screen.getByTestId("milestone-delete-RMS-001")).toBeInTheDocument();
+    });
+
+    const deleteBtn = screen.getByTestId("milestone-delete-RMS-001");
+    fireEvent.click(deleteBtn);
+
+    await waitFor(() => {
+      expect(mockConfirm).toHaveBeenCalledWith({
+        title: "Delete Milestone",
+        message: "Delete this milestone and all its features?",
+        danger: true,
+      });
+      expect(api.deleteRoadmapMilestone).toHaveBeenCalledWith("RMS-001", undefined);
+      expect(mockAddToast).toHaveBeenCalledWith("Milestone deleted", "success");
+    });
+  });
+
+  it("creates a feature in a milestone", async () => {
+    const newFeature: RoadmapFeature = {
+      id: "RF-002",
+      milestoneId: "RMS-001",
+      title: "New Feature",
+      orderIndex: 1,
+      createdAt: "2026-01-03T00:00:00.000Z",
+      updatedAt: "2026-01-03T00:00:00.000Z",
+    };
+    (api.createRoadmapFeature as ReturnType<typeof vi.fn>).mockResolvedValue(newFeature);
+
+    render(<RoadmapsView addToast={mockAddToast} />);
+
+    await waitFor(() => {
+      expect(screen.getByText("Q2 Roadmap")).toBeInTheDocument();
+    });
+
+    const roadmapItem = screen.getByTestId("roadmap-item-RM-001");
+    fireEvent.click(roadmapItem);
+
+    await waitFor(() => {
+      expect(screen.getByTestId("add-feature-RMS-001")).toBeInTheDocument();
+    });
+
+    // Click add feature button
+    const addBtn = screen.getByTestId("add-feature-RMS-001");
+    fireEvent.click(addBtn);
+
+    // Fill in the form
+    const titleInput = screen.getByTestId("create-feature-title");
+    await userEvent.type(titleInput, "New Feature");
+
+    // Submit
+    const submitBtn = screen.getByTestId("create-feature-submit");
+    fireEvent.click(submitBtn);
+
+    await waitFor(() => {
+      expect(api.createRoadmapFeature).toHaveBeenCalledWith("RMS-001", { title: "New Feature" }, undefined);
+      expect(mockAddToast).toHaveBeenCalledWith("Feature created", "success");
+    });
+  });
+
+  it("deletes a feature after confirmation", async () => {
+    (api.deleteRoadmapFeature as ReturnType<typeof vi.fn>).mockResolvedValue(undefined);
+
+    render(<RoadmapsView addToast={mockAddToast} />);
+
+    await waitFor(() => {
+      expect(screen.getByText("Q2 Roadmap")).toBeInTheDocument();
+    });
+
+    const roadmapItem = screen.getByTestId("roadmap-item-RM-001");
+    fireEvent.click(roadmapItem);
+
+    await waitFor(() => {
+      expect(screen.getByTestId("feature-delete-RF-001")).toBeInTheDocument();
+    });
+
+    // Hover over feature to show actions
+    const featureItem = screen.getByTestId("feature-delete-RF-001").closest(".roadmaps-view__feature-item");
+    fireEvent.mouseEnter(featureItem!);
+
+    const deleteBtn = screen.getByTestId("feature-delete-RF-001");
+    fireEvent.click(deleteBtn);
+
+    await waitFor(() => {
+      expect(mockConfirm).toHaveBeenCalledWith({
+        title: "Delete Feature",
+        message: "Delete this feature?",
+        danger: true,
+      });
+      expect(api.deleteRoadmapFeature).toHaveBeenCalledWith("RF-001", undefined);
+      expect(mockAddToast).toHaveBeenCalledWith("Feature deleted", "success");
+    });
+  });
+
+  it("cancels inline edit on Escape", async () => {
+    render(<RoadmapsView addToast={mockAddToast} />);
+
+    await waitFor(() => {
+      expect(screen.getByText("Q2 Roadmap")).toBeInTheDocument();
+    });
+
+    const roadmapItem = screen.getByTestId("roadmap-item-RM-001");
+    fireEvent.click(roadmapItem);
+
+    await waitFor(() => {
+      expect(screen.getByTestId("edit-roadmap-btn")).toBeInTheDocument();
+    });
+
+    // Start editing
+    const editBtn = screen.getByTestId("edit-roadmap-btn");
+    fireEvent.click(editBtn);
+
+    const titleInput = screen.getByTestId("roadmap-title-input");
+    expect(titleInput).toBeInTheDocument();
+
+    // Type something
+    await userEvent.type(titleInput, "Changed");
+
+    // Cancel with Escape
+    fireEvent.keyDown(titleInput, { key: "Escape" });
+
+    // Edit should be cancelled
+    await waitFor(() => {
+      expect(screen.queryByTestId("roadmap-title-input")).not.toBeInTheDocument();
+    });
+    expect(api.updateRoadmap).not.toHaveBeenCalled();
+  });
+
+  it("shows empty main state when no roadmap selected", async () => {
+    render(<RoadmapsView addToast={mockAddToast} />);
+
+    await waitFor(() => {
+      expect(screen.getByText("Q2 Roadmap")).toBeInTheDocument();
+    });
+
+    expect(screen.getByText("Select a roadmap from the sidebar to view its milestones.")).toBeInTheDocument();
+  });
+
+  describe("Feature suggestions", () => {
+    it("shows AI Suggestions button when roadmap is selected", async () => {
+      render(<RoadmapsView addToast={mockAddToast} />);
+
+      // Wait for roadmap to load
+      await waitFor(() => {
+        expect(screen.getByText("Q2 Roadmap")).toBeInTheDocument();
+      });
+
+      // Select roadmap
+      const roadmapItem = screen.getByTestId("roadmap-item-RM-001");
+      fireEvent.click(roadmapItem);
+
+      // Wait for milestone to load and button to appear
+      await waitFor(() => {
+        expect(screen.getByTestId("generate-features-RMS-001")).toBeInTheDocument();
+      }, { timeout: 3000 });
+    });
+  });
+
+  describe("Suggestion editing", () => {
+    it("can edit milestone suggestion before accepting", async () => {
+      // Mock milestone suggestion generation
+      (api.generateMilestoneSuggestions as ReturnType<typeof vi.fn>).mockResolvedValue({
+        suggestions: [
+          { title: "Original Title", description: "Original description" },
+        ],
+      });
+
+      render(<RoadmapsView addToast={mockAddToast} />);
+
+      await waitFor(() => {
+        expect(screen.getByText("Q2 Roadmap")).toBeInTheDocument();
+      });
+
+      // Select roadmap
+      const roadmapItem = screen.getByTestId("roadmap-item-RM-001");
+      fireEvent.click(roadmapItem);
+
+      // Wait for roadmap to load
+      await waitFor(() => {
+        expect(screen.getByText("Generate Milestone Ideas")).toBeInTheDocument();
+      });
+
+      // Generate suggestions
+      const goalInput = screen.getByTestId("goal-prompt-input");
+      await userEvent.type(goalInput, "Build an app");
+
+      const generateBtn = screen.getByTestId("generate-suggestions-btn");
+      fireEvent.click(generateBtn);
+
+      // Wait for suggestion to appear
+      await waitFor(() => {
+        expect(screen.getByText("Original Title")).toBeInTheDocument();
+      });
+
+      // This test verifies the suggestion appears after generation
+      expect(screen.getByText("Original Title")).toBeInTheDocument();
+    });
+
+    it("can edit feature suggestion before accepting", async () => {
+      // Mock feature suggestion generation
+      (api.generateFeatureSuggestions as ReturnType<typeof vi.fn>).mockResolvedValue({
+        suggestions: [
+          { title: "Feature Suggestion", description: "Feature description" },
+        ],
+      });
+
+      render(<RoadmapsView addToast={mockAddToast} />);
+
+      await waitFor(() => {
+        expect(screen.getByText("Q2 Roadmap")).toBeInTheDocument();
+      });
+
+      // Select roadmap
+      const roadmapItem = screen.getByTestId("roadmap-item-RM-001");
+      fireEvent.click(roadmapItem);
+
+      // Wait for milestone to load
+      await waitFor(() => {
+        expect(screen.getByTestId("generate-features-RMS-001")).toBeInTheDocument();
+      });
+
+      // Generate feature suggestions
+      const suggestBtn = screen.getByTestId("generate-features-RMS-001");
+      fireEvent.click(suggestBtn);
+
+      // Wait for suggestion to appear
+      await waitFor(() => {
+        expect(screen.getByText("Feature Suggestion")).toBeInTheDocument();
+      });
+
+      // Verify the suggestion card is rendered
+      expect(screen.getByText("Feature Suggestion")).toBeInTheDocument();
+      expect(screen.getByText("Feature description")).toBeInTheDocument();
+    });
+
+    it("shows edit button on suggestion cards", async () => {
+      // Mock milestone suggestion generation
+      (api.generateMilestoneSuggestions as ReturnType<typeof vi.fn>).mockResolvedValue({
+        suggestions: [
+          { title: "Test Milestone" },
+        ],
+      });
+
+      render(<RoadmapsView addToast={mockAddToast} />);
+
+      await waitFor(() => {
+        expect(screen.getByText("Q2 Roadmap")).toBeInTheDocument();
+      });
+
+      // Select roadmap
+      const roadmapItem = screen.getByTestId("roadmap-item-RM-001");
+      fireEvent.click(roadmapItem);
+
+      // Generate suggestions
+      const goalInput = screen.getByTestId("goal-prompt-input");
+      await userEvent.type(goalInput, "Build something");
+
+      const generateBtn = screen.getByTestId("generate-suggestions-btn");
+      fireEvent.click(generateBtn);
+
+      // Wait for suggestion to appear
+      await waitFor(() => {
+        expect(screen.getByText("Test Milestone")).toBeInTheDocument();
+      });
+
+      // Look for edit button - it should have data-testid
+      // The edit button is a pencil icon with testId like "suggestion-{id}-edit"
+      const editButtons = screen.queryAllByRole("button", { name: /edit/i });
+      expect(editButtons.length).toBeGreaterThan(0);
+    });
+
+    it("sidebar edit pencil selects the roadmap and shows inline edit", async () => {
+      render(<RoadmapsView addToast={mockAddToast} />);
+
+      await waitFor(() => {
+        expect(screen.getByText("Q2 Roadmap")).toBeInTheDocument();
+      });
+
+      // No roadmap selected yet — main content shows empty state
+      expect(screen.getByText("Select a roadmap from the sidebar to view its milestones.")).toBeInTheDocument();
+
+      // Click the edit pencil on RM-001 in the sidebar
+      const editBtn = screen.getByTestId("roadmap-edit-RM-001");
+      fireEvent.click(editBtn);
+
+      // Roadmap should be selected and inline edit should appear
+      await waitFor(() => {
+        expect(screen.getByTestId("roadmap-title-input")).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe("Mobile roadmap controls", () => {
+    beforeEach(() => {
+      mockViewport("mobile");
+    });
+
+    afterEach(() => {
+      mockViewport("desktop");
+    });
+
+    it("shows mobile roadmap list when no roadmap selected on mobile", async () => {
+      render(<RoadmapsView addToast={mockAddToast} />);
+
+      await waitFor(() => {
+        expect(screen.getByTestId("roadmaps-view__mobile-list")).toBeInTheDocument();
+      });
+
+      expect(screen.getByText("Q2 Roadmap")).toBeInTheDocument();
+      expect(screen.getByText("Q3 Roadmap")).toBeInTheDocument();
+      expect(screen.getByTestId("mobile-create-roadmap-btn")).toBeInTheDocument();
+    });
+
+    it("shows mobile roadmap items when roadmaps exist on mobile", async () => {
+      render(<RoadmapsView addToast={mockAddToast} />);
+
+      await waitFor(() => {
+        expect(screen.getByTestId("mobile-roadmap-item-RM-001")).toBeInTheDocument();
+      });
+
+      expect(screen.getByTestId("mobile-roadmap-item-RM-002")).toBeInTheDocument();
+    });
+
+    it("can select a roadmap from mobile list", async () => {
+      render(<RoadmapsView addToast={mockAddToast} />);
+
+      await waitFor(() => {
+        expect(screen.getByTestId("mobile-roadmap-item-RM-001")).toBeInTheDocument();
+      });
+
+      // Click on a roadmap item
+      fireEvent.click(screen.getByTestId("mobile-roadmap-item-RM-001"));
+
+      // Should show the mobile header with the roadmap title
+      await waitFor(() => {
+        expect(screen.getByTestId("roadmaps-view__mobile-header")).toBeInTheDocument();
+        expect(screen.getByText("Q2 Roadmap", { selector: ".roadmaps-view__mobile-header-title" })).toBeInTheDocument();
+      });
+    });
+
+    it("mobile back button deselects roadmap", async () => {
+      render(<RoadmapsView addToast={mockAddToast} />);
+
+      await waitFor(() => {
+        expect(screen.getByTestId("mobile-roadmap-item-RM-001")).toBeInTheDocument();
+      });
+
+      // Select a roadmap
+      fireEvent.click(screen.getByTestId("mobile-roadmap-item-RM-001"));
+
+      await waitFor(() => {
+        expect(screen.getByTestId("roadmaps-view__mobile-header")).toBeInTheDocument();
+      });
+
+      // Click back button
+      fireEvent.click(screen.getByTestId("mobile-back-btn"));
+
+      // Should show mobile list again
+      await waitFor(() => {
+        expect(screen.getByTestId("roadmaps-view__mobile-list")).toBeInTheDocument();
+      });
+    });
+
+    it("mobile create button shows create form", async () => {
+      render(<RoadmapsView addToast={mockAddToast} />);
+
+      await waitFor(() => {
+        expect(screen.getByTestId("mobile-create-roadmap-btn")).toBeInTheDocument();
+      });
+
+      // Click create button
+      fireEvent.click(screen.getByTestId("mobile-create-roadmap-btn"));
+
+      // Should show create form
+      await waitFor(() => {
+        expect(screen.getByTestId("create-roadmap-form")).toBeInTheDocument();
+        expect(screen.getByTestId("create-roadmap-title")).toBeInTheDocument();
+      });
+    });
+
+    it("mobile can create roadmap via form", async () => {
+      const newRoadmap = {
+        id: "RM-003",
+        title: "New Roadmap",
+        createdAt: "2026-01-03T00:00:00.000Z",
+        updatedAt: "2026-01-03T00:00:00.000Z",
+      };
+      (api.createRoadmap as ReturnType<typeof vi.fn>).mockResolvedValue(newRoadmap);
+
+      render(<RoadmapsView addToast={mockAddToast} />);
+
+      await waitFor(() => {
+        expect(screen.getByTestId("mobile-create-roadmap-btn")).toBeInTheDocument();
+      });
+
+      // Click create button
+      fireEvent.click(screen.getByTestId("mobile-create-roadmap-btn"));
+
+      // Fill in the form using userEvent for better React integration
+      await waitFor(() => {
+        const titleInput = screen.getByTestId("create-roadmap-title");
+        expect(titleInput).toBeInTheDocument();
+      });
+
+      const titleInput = screen.getByTestId("create-roadmap-title");
+      await userEvent.type(titleInput, "New Roadmap");
+
+      // Submit the form using fireEvent.submit
+      const form = screen.getByTestId("create-roadmap-form").querySelector("form");
+      expect(form).toBeTruthy();
+      fireEvent.submit(form!);
+
+      await waitFor(() => {
+        expect(api.createRoadmap).toHaveBeenCalledWith(
+          { title: "New Roadmap" },
+          undefined
+        );
+        expect(mockAddToast).toHaveBeenCalledWith("Roadmap created", "success");
+      });
+    });
+
+    it("mobile edit and delete buttons are visible on roadmap items", async () => {
+      render(<RoadmapsView addToast={mockAddToast} />);
+
+      await waitFor(() => {
+        expect(screen.getByTestId("mobile-roadmap-item-RM-001")).toBeInTheDocument();
+      });
+
+      // Edit and delete buttons should be visible (not hidden behind hover on mobile)
+      expect(screen.getByTestId("mobile-roadmap-edit-RM-001")).toBeInTheDocument();
+      expect(screen.getByTestId("mobile-roadmap-delete-RM-001")).toBeInTheDocument();
+      expect(screen.getByTestId("mobile-roadmap-export-RM-001")).toBeInTheDocument();
+    });
+
+    it("shows empty state on mobile when no roadmaps", async () => {
+      (api.fetchRoadmaps as ReturnType<typeof vi.fn>).mockResolvedValue([]);
+
+      render(<RoadmapsView addToast={mockAddToast} />);
+
+      await waitFor(() => {
+        expect(screen.getByTestId("roadmaps-view__mobile-list")).toBeInTheDocument();
+      });
+
+      expect(screen.getByText("No roadmaps yet.")).toBeInTheDocument();
+      expect(screen.getByTestId("roadmaps-view__mobile-list").textContent).toContain("Create Roadmap");
+    });
+
+    it("mobile header shows action buttons when roadmap selected", async () => {
+      render(<RoadmapsView addToast={mockAddToast} />);
+
+      await waitFor(() => {
+        expect(screen.getByTestId("mobile-roadmap-item-RM-001")).toBeInTheDocument();
+      });
+
+      // Select a roadmap
+      fireEvent.click(screen.getByTestId("mobile-roadmap-item-RM-001"));
+
+      await waitFor(() => {
+        expect(screen.getByTestId("roadmaps-view__mobile-header")).toBeInTheDocument();
+      });
+
+      // Action buttons should be visible in header
+      expect(screen.getByTestId("mobile-header-create-btn")).toBeInTheDocument();
+      expect(screen.getByTestId("mobile-header-edit-btn")).toBeInTheDocument();
+      expect(screen.getByTestId("mobile-header-delete-btn")).toBeInTheDocument();
+      expect(screen.getByTestId("mobile-back-btn")).toBeInTheDocument();
+    });
+
+    it("mobile edit pencil selects the roadmap and shows inline edit", async () => {
+      render(<RoadmapsView addToast={mockAddToast} />);
+
+      await waitFor(() => {
+        expect(screen.getByTestId("mobile-roadmap-item-RM-001")).toBeInTheDocument();
+      });
+
+      // Click the edit pencil on RM-001 in mobile list
+      const editBtn = screen.getByTestId("mobile-roadmap-edit-RM-001");
+      fireEvent.click(editBtn);
+
+      // Should show the mobile header (roadmap selected) and inline edit
+      await waitFor(() => {
+        expect(screen.getByTestId("roadmaps-view__mobile-header")).toBeInTheDocument();
+        expect(screen.getByTestId("roadmap-title-input")).toBeInTheDocument();
+      });
+    });
+
+    it("mobile roadmap list has scrollable container structure", async () => {
+      render(<RoadmapsView addToast={mockAddToast} />);
+
+      await waitFor(() => {
+        expect(screen.getByTestId("roadmaps-view__mobile-list")).toBeInTheDocument();
+      });
+
+      // The mobile list should have the scrollable container
+      const mobileList = screen.getByTestId("roadmaps-view__mobile-list");
+      expect(mobileList).toBeInTheDocument();
+
+      // The list items container should exist and be scrollable
+      const listItems = mobileList.querySelector(".roadmaps-view__mobile-list-items");
+      expect(listItems).toBeInTheDocument();
+    });
+
+    it("selecting roadmap on mobile shows detail view with header and milestone content", async () => {
+      render(<RoadmapsView addToast={mockAddToast} />);
+
+      await waitFor(() => {
+        expect(screen.getByTestId("mobile-roadmap-item-RM-001")).toBeInTheDocument();
+      });
+
+      // Click on a roadmap item
+      fireEvent.click(screen.getByTestId("mobile-roadmap-item-RM-001"));
+
+      // Should show the mobile header with back button
+      await waitFor(() => {
+        expect(screen.getByTestId("roadmaps-view__mobile-header")).toBeInTheDocument();
+        expect(screen.getByTestId("mobile-back-btn")).toBeInTheDocument();
+      });
+
+      // Should show milestone content
+      expect(screen.getByText("Milestone 1")).toBeInTheDocument();
+      expect(screen.getByText("Milestone 2")).toBeInTheDocument();
+    });
+  });
+
+  describe("Mobile suggestion panel collapse", () => {
+    beforeEach(() => {
+      mockViewport("mobile");
+    });
+
+    afterEach(() => {
+      vi.restoreAllMocks();
+    });
+
+    it("shows expand button instead of suggestion section on mobile", async () => {
+      render(<RoadmapsView addToast={mockAddToast} />);
+
+      await waitFor(() => {
+        expect(screen.getByTestId("mobile-roadmap-item-RM-001")).toBeInTheDocument();
+      });
+
+      // Select roadmap
+      fireEvent.click(screen.getByTestId("mobile-roadmap-item-RM-001"));
+
+      // On mobile, should show the expand button instead of the goal prompt input
+      await waitFor(() => {
+        expect(screen.getByTestId("expand-suggestion-panel-btn")).toBeInTheDocument();
+      });
+      expect(screen.queryByTestId("goal-prompt-input")).not.toBeInTheDocument();
+    });
+
+    it("expands suggestion panel on mobile when button is clicked", async () => {
+      render(<RoadmapsView addToast={mockAddToast} />);
+
+      await waitFor(() => {
+        expect(screen.getByTestId("mobile-roadmap-item-RM-001")).toBeInTheDocument();
+      });
+
+      // Select roadmap
+      fireEvent.click(screen.getByTestId("mobile-roadmap-item-RM-001"));
+
+      // Expand the panel
+      await waitFor(() => {
+        expect(screen.getByTestId("expand-suggestion-panel-btn")).toBeInTheDocument();
+      });
+      fireEvent.click(screen.getByTestId("expand-suggestion-panel-btn"));
+
+      // Panel should now be visible
+      await waitFor(() => {
+        expect(screen.getByTestId("goal-prompt-input")).toBeInTheDocument();
+      });
+      expect(screen.queryByTestId("expand-suggestion-panel-btn")).not.toBeInTheDocument();
+    });
+
+    it("can collapse suggestion panel on mobile", async () => {
+      render(<RoadmapsView addToast={mockAddToast} />);
+
+      await waitFor(() => {
+        expect(screen.getByTestId("mobile-roadmap-item-RM-001")).toBeInTheDocument();
+      });
+
+      // Select roadmap
+      fireEvent.click(screen.getByTestId("mobile-roadmap-item-RM-001"));
+
+      // Expand the panel
+      await waitFor(() => {
+        expect(screen.getByTestId("expand-suggestion-panel-btn")).toBeInTheDocument();
+      });
+      fireEvent.click(screen.getByTestId("expand-suggestion-panel-btn"));
+
+      // Wait for panel to expand
+      await waitFor(() => {
+        expect(screen.getByTestId("goal-prompt-input")).toBeInTheDocument();
+      });
+
+      // Collapse the panel
+      fireEvent.click(screen.getByTestId("collapse-suggestion-panel-btn"));
+
+      // Panel should be hidden, expand button should be back
+      await waitFor(() => {
+        expect(screen.getByTestId("expand-suggestion-panel-btn")).toBeInTheDocument();
+      });
+      expect(screen.queryByTestId("goal-prompt-input")).not.toBeInTheDocument();
+    });
+
+    it("persists goal prompt and suggestions across collapse/expand on mobile", async () => {
+      // Mock milestone suggestion generation
+      (api.generateMilestoneSuggestions as ReturnType<typeof vi.fn>).mockResolvedValue({
+        suggestions: [
+          { title: "Persisted Milestone", description: "Persisted description" },
+        ],
+      });
+
+      render(<RoadmapsView addToast={mockAddToast} />);
+
+      await waitFor(() => {
+        expect(screen.getByTestId("mobile-roadmap-item-RM-001")).toBeInTheDocument();
+      });
+
+      // Select roadmap
+      fireEvent.click(screen.getByTestId("mobile-roadmap-item-RM-001"));
+
+      // Expand the panel
+      await waitFor(() => {
+        expect(screen.getByTestId("expand-suggestion-panel-btn")).toBeInTheDocument();
+      });
+      fireEvent.click(screen.getByTestId("expand-suggestion-panel-btn"));
+
+      // Type into goal prompt
+      await waitFor(() => {
+        expect(screen.getByTestId("goal-prompt-input")).toBeInTheDocument();
+      });
+      const goalInput = screen.getByTestId("goal-prompt-input");
+      await userEvent.type(goalInput, "Build an app");
+
+      // Generate suggestions
+      fireEvent.click(screen.getByTestId("generate-suggestions-btn"));
+
+      // Wait for suggestions to appear
+      await waitFor(() => {
+        expect(screen.getByText("Persisted Milestone")).toBeInTheDocument();
+      });
+
+      // Collapse the panel
+      fireEvent.click(screen.getByTestId("collapse-suggestion-panel-btn"));
+
+      // Wait for expand button to appear
+      await waitFor(() => {
+        expect(screen.getByTestId("expand-suggestion-panel-btn")).toBeInTheDocument();
+      });
+
+      // Re-expand the panel
+      fireEvent.click(screen.getByTestId("expand-suggestion-panel-btn"));
+
+      // Goal prompt and suggestions should persist
+      await waitFor(() => {
+        expect(screen.getByTestId("goal-prompt-input")).toBeInTheDocument();
+      });
+      expect(screen.getByTestId("goal-prompt-input")).toHaveValue("Build an app");
+      expect(screen.getByText("Persisted Milestone")).toBeInTheDocument();
+    });
+
+    it("resets suggestion panel when switching roadmaps on mobile", async () => {
+      render(<RoadmapsView addToast={mockAddToast} />);
+
+      await waitFor(() => {
+        expect(screen.getByTestId("mobile-roadmap-item-RM-001")).toBeInTheDocument();
+      });
+
+      // Select RM-001
+      fireEvent.click(screen.getByTestId("mobile-roadmap-item-RM-001"));
+
+      // Expand the panel
+      await waitFor(() => {
+        expect(screen.getByTestId("expand-suggestion-panel-btn")).toBeInTheDocument();
+      });
+      fireEvent.click(screen.getByTestId("expand-suggestion-panel-btn"));
+
+      await waitFor(() => {
+        expect(screen.getByTestId("goal-prompt-input")).toBeInTheDocument();
+      });
+
+      // Go back to roadmap list
+      fireEvent.click(screen.getByTestId("mobile-back-btn"));
+
+      // Wait for list to appear
+      await waitFor(() => {
+        expect(screen.getByTestId("mobile-roadmap-item-RM-002")).toBeInTheDocument();
+      });
+
+      // Switch to RM-002
+      fireEvent.click(screen.getByTestId("mobile-roadmap-item-RM-002"));
+
+      // Panel should be collapsed (expand button visible)
+      await waitFor(() => {
+        expect(screen.getByTestId("expand-suggestion-panel-btn")).toBeInTheDocument();
+      });
+      expect(screen.queryByTestId("goal-prompt-input")).not.toBeInTheDocument();
+    });
+  });
+});