@runfusion/fusion 0.23.0 → 0.24.0

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

@@ -0,0 +1,2559 @@
+import React, { useState, useCallback, useEffect, useRef } from "react";
+import { Plus, Pencil, Trash2, Check, X, GripVertical, Sparkles, Download, Copy, Loader, ArrowLeft, ChevronUp } from "lucide-react";
+import "./RoadmapsView.css";
+import type { ToastType } from "./types.js";
+import { useRoadmaps, type FeatureSuggestion, type MilestoneSuggestion, type SuggestionDraftPatch } from "./useRoadmaps.js";
+import { useViewportMode } from "./useViewportMode.js";
+import { useConfirm } from "./useConfirm.js";
+import type {
+  Roadmap,
+  RoadmapMilestone,
+  RoadmapFeature,
+  RoadmapCreateInput,
+  RoadmapUpdateInput,
+  RoadmapMilestoneCreateInput,
+  RoadmapMilestoneUpdateInput,
+  RoadmapFeatureCreateInput,
+  RoadmapFeatureUpdateInput,
+  RoadmapMissionPlanningHandoff,
+  RoadmapFeatureTaskPlanningHandoff,
+} from "../roadmap-types.js";
+
+export interface RoadmapsViewProps {
+  projectId?: string;
+  addToast: (message: string, type?: ToastType) => void;
+}
+
+// ── Drag State Types ────────────────────────────────────────────────
+
+interface MilestoneDragState {
+  draggingId: string | null;
+  dropTargetId: string | null;
+  dropPosition: "before" | "after" | null;
+}
+
+interface FeatureDragState {
+  draggingId: string | null;
+  draggingMilestoneId: string | null;
+  dropTargetMilestoneId: string | null;
+  dropTargetIndex: number | null;
+  dropPosition: "before" | "after" | null;
+}
+
+// ── Inline Edit State Types ─────────────────────────────────────────
+
+interface InlineEditState {
+  roadmapId: string | null;
+  field: "title" | "description" | null;
+  value: string;
+}
+
+interface MilestoneInlineEditState {
+  milestoneId: string | null;
+  field: "title" | "description" | null;
+  value: string;
+}
+
+interface FeatureInlineEditState {
+  featureId: string | null;
+  field: "title" | "description" | null;
+  value: string;
+}
+
+// ── Create Form State ───────────────────────────────────────────────
+
+interface CreateFormState {
+  type: "roadmap" | "milestone" | "feature" | null;
+  parentId?: string;
+  title: string;
+  description: string;
+}
+
+// ── Handoff Modal Types ─────────────────────────────────────────────
+
+interface HandoffModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  roadmapId: string;
+  roadmapTitle: string;
+  handoffPayload: { mission: RoadmapMissionPlanningHandoff; features: RoadmapFeatureTaskPlanningHandoff[] } | null;
+  isLoading: boolean;
+  error: Error | null;
+  onFetchHandoff: () => void;
+  onCopyToClipboard: () => void;
+}
+
+// ── Handoff Modal Component ─────────────────────────────────────────
+
+function HandoffModal({
+  isOpen,
+  onClose,
+  roadmapTitle,
+  handoffPayload,
+  isLoading,
+  error,
+  onFetchHandoff,
+  onCopyToClipboard,
+}: HandoffModalProps) {
+  if (!isOpen) return null;
+
+  return (
+    <div className="modal-overlay open" onClick={onClose} role="presentation">
+      <div className="modal modal-lg" onClick={(e) => e.stopPropagation()} role="dialog" aria-modal="true" aria-labelledby="handoff-modal-title">
+        <div className="modal-header">
+          <h2 id="handoff-modal-title">Export Roadmap: {roadmapTitle}</h2>
+          <button className="modal-close" onClick={onClose} aria-label="Close modal">
+            <X size={18} />
+          </button>
+        </div>
+        <div className="modal-body">
+          <p className="text-muted roadmaps-view__handoff-intro">
+            Export roadmap data for use in mission and task planning flows.
+            This is a read-only export — no missions or tasks will be created.
+          </p>
+          
+          {error && (
+            <div className="form-error roadmaps-view__handoff-error">
+              Error loading handoff data: {error.message}
+            </div>
+          )}
+
+          {!handoffPayload && !isLoading && (
+            <div className="roadmaps-view__handoff-empty-state">
+              <button className="btn btn-primary" onClick={onFetchHandoff}>
+                <Download size={16} className="roadmaps-view__handoff-button-icon" />
+                Load Handoff Data
+              </button>
+            </div>
+          )}
+
+          {isLoading && (
+            <div className="roadmaps-view__handoff-loading-state">
+              <Loader size={24} className="spin" />
+              <p className="roadmaps-view__handoff-loading-text">Loading handoff data...</p>
+            </div>
+          )}
+
+          {handoffPayload && (
+            <>
+              <div className="roadmaps-view__handoff-section">
+                <h3 className="roadmaps-view__handoff-section-title">Mission Planning Handoff</h3>
+                <div className="card roadmaps-view__handoff-card">
+                  <pre className="roadmaps-view__handoff-pre roadmaps-view__handoff-pre--mission">
+                    {JSON.stringify(handoffPayload.mission, null, 2)}
+                  </pre>
+                </div>
+              </div>
+
+              <div className="roadmaps-view__handoff-section">
+                <h3 className="roadmaps-view__handoff-section-title">
+                  Feature Task Planning Handoffs ({handoffPayload.features.length})
+                </h3>
+                <div className="card roadmaps-view__handoff-card">
+                  <pre className="roadmaps-view__handoff-pre roadmaps-view__handoff-pre--features">
+                    {JSON.stringify(handoffPayload.features, null, 2)}
+                  </pre>
+                </div>
+              </div>
+            </>
+          )}
+        </div>
+        <div className="modal-actions">
+          <div className="modal-actions-left">
+            {handoffPayload && (
+              <button className="btn btn-sm" onClick={onCopyToClipboard}>
+                <Copy size={14} className="roadmaps-view__handoff-copy-icon" />
+                Copy to Clipboard
+              </button>
+            )}
+          </div>
+          <div className="modal-actions-right">
+            <button className="btn" onClick={onClose}>Close</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ── Roadmap Item ─────────────────────────────────────────────────────
+
+function RoadmapItem({
+  roadmap,
+  isSelected,
+  onSelect,
+  onEdit,
+  onDelete,
+  onExport,
+}: {
+  roadmap: Roadmap;
+  isSelected: boolean;
+  onSelect: () => void;
+  onEdit: () => void;
+  onDelete: () => void;
+  onExport: () => void;
+}) {
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter") {
+      onSelect();
+    }
+  };
+
+  const handleEditClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onEdit();
+  };
+
+  const handleDeleteClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onDelete();
+  };
+
+  const handleExportClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onExport();
+  };
+
+  return (
+    <div
+      className={`roadmaps-view__sidebar-item${isSelected ? " roadmaps-view__sidebar-item--active" : ""}`}
+      onClick={onSelect}
+      onKeyDown={handleKeyDown}
+      role="button"
+      tabIndex={0}
+      aria-selected={isSelected}
+      data-testid={`roadmap-item-${roadmap.id}`}
+    >
+      <div className="roadmaps-view__sidebar-item-content">
+        <div className="roadmaps-view__sidebar-item-title">{roadmap.title}</div>
+        {roadmap.description && (
+          <div className="roadmaps-view__sidebar-item-desc">{roadmap.description}</div>
+        )}
+      </div>
+      <div className="roadmaps-view__sidebar-item-actions" onClick={handleEditClick} role="presentation">
+        <button
+          className="roadmaps-view__icon-btn"
+          onClick={handleExportClick}
+          title="Export roadmap"
+          aria-label="Export roadmap"
+          data-testid={`roadmap-export-${roadmap.id}`}
+          type="button"
+        >
+          <Download size={14} />
+        </button>
+        <button
+          className="roadmaps-view__icon-btn"
+          onClick={handleEditClick}
+          title="Edit roadmap"
+          aria-label="Edit roadmap"
+          data-testid={`roadmap-edit-${roadmap.id}`}
+          type="button"
+        >
+          <Pencil size={14} />
+        </button>
+        <button
+          className="roadmaps-view__icon-btn roadmaps-view__icon-btn--danger"
+          onClick={handleDeleteClick}
+          title="Delete roadmap"
+          aria-label="Delete roadmap"
+          data-testid={`roadmap-delete-${roadmap.id}`}
+          type="button"
+        >
+          <Trash2 size={14} />
+        </button>
+      </div>
+    </div>
+  );
+}
+
+// ── Mobile Roadmap List ──────────────────────────────────────────────
+
+function MobileRoadmapList({
+  roadmaps,
+  selectedRoadmapId,
+  onSelect,
+  onCreate,
+  onEdit,
+  onDelete,
+  onExport,
+  showCreateForm,
+  onCancelCreate,
+  onSaveCreate,
+}: {
+  roadmaps: Roadmap[];
+  selectedRoadmapId: string | null;
+  onSelect: (id: string) => void;
+  onCreate: () => void;
+  onEdit: (roadmap: Roadmap) => void;
+  onDelete: (roadmapId: string) => void;
+  onExport: (roadmap: Roadmap) => void;
+  showCreateForm: boolean;
+  onCancelCreate: () => void;
+  onSaveCreate: (input: RoadmapCreateInput) => void;
+}) {
+  return (
+    <div className="roadmaps-view__mobile-list" data-testid="roadmaps-view__mobile-list">
+      <div className="roadmaps-view__mobile-list-header">
+        <h2 className="roadmaps-view__mobile-list-title">Roadmaps</h2>
+        {!showCreateForm && (
+          <button
+            className="roadmaps-view__mobile-add-btn"
+            onClick={onCreate}
+            title="Create roadmap"
+            aria-label="Create roadmap"
+            data-testid="mobile-create-roadmap-btn"
+          >
+            <Plus size={18} />
+          </button>
+        )}
+      </div>
+
+      {showCreateForm && (
+        <div className="roadmaps-view__mobile-create-form">
+          <CreateRoadmapForm onSave={onSaveCreate} onCancel={onCancelCreate} />
+        </div>
+      )}
+
+      {roadmaps.length === 0 && !showCreateForm ? (
+        <div className="roadmaps-view__mobile-empty">
+          <p>No roadmaps yet.</p>
+          <button className="btn btn-primary btn-sm" onClick={onCreate}>
+            <Plus size={14} />
+            <span>Create Roadmap</span>
+          </button>
+        </div>
+      ) : (
+        <div className="roadmaps-view__mobile-list-items">
+          {roadmaps.map((roadmap) => (
+            <div
+              key={roadmap.id}
+              className={`roadmaps-view__mobile-item${roadmap.id === selectedRoadmapId ? " roadmaps-view__mobile-item--active" : ""}`}
+              onClick={() => onSelect(roadmap.id)}
+              role="button"
+              tabIndex={0}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                  onSelect(roadmap.id);
+                }
+              }}
+              data-testid={`mobile-roadmap-item-${roadmap.id}`}
+            >
+              <div className="roadmaps-view__mobile-item-content">
+                <span className="roadmaps-view__mobile-item-title">{roadmap.title}</span>
+                {roadmap.description && (
+                  <span className="roadmaps-view__mobile-item-desc">{roadmap.description}</span>
+                )}
+              </div>
+              <div className="roadmaps-view__mobile-item-actions">
+                <button
+                  className="roadmaps-view__mobile-action-btn"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onExport(roadmap);
+                  }}
+                  title="Export roadmap"
+                  aria-label="Export roadmap"
+                  data-testid={`mobile-roadmap-export-${roadmap.id}`}
+                >
+                  <Download size={16} />
+                </button>
+                <button
+                  className="roadmaps-view__mobile-action-btn"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onEdit(roadmap);
+                  }}
+                  title="Edit roadmap"
+                  aria-label="Edit roadmap"
+                  data-testid={`mobile-roadmap-edit-${roadmap.id}`}
+                >
+                  <Pencil size={16} />
+                </button>
+                <button
+                  className="roadmaps-view__mobile-action-btn roadmaps-view__mobile-action-btn--danger"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onDelete(roadmap.id);
+                  }}
+                  title="Delete roadmap"
+                  aria-label="Delete roadmap"
+                  data-testid={`mobile-roadmap-delete-${roadmap.id}`}
+                >
+                  <Trash2 size={16} />
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ── Mobile Roadmap Header (shown when roadmap is selected) ────────────
+
+function MobileRoadmapHeader({
+  roadmapTitle,
+  onBack,
+  onEdit,
+  onDelete,
+  onCreate,
+}: {
+  roadmapTitle: string;
+  onBack: () => void;
+  onEdit: () => void;
+  onDelete: () => void;
+  onCreate: () => void;
+}) {
+  return (
+    <div className="roadmaps-view__mobile-header" data-testid="roadmaps-view__mobile-header">
+      <button
+        className="roadmaps-view__mobile-back-btn"
+        onClick={onBack}
+        title="Back to roadmap list"
+        aria-label="Back to roadmap list"
+        data-testid="mobile-back-btn"
+      >
+        <ArrowLeft size={20} />
+      </button>
+      <h2 className="roadmaps-view__mobile-header-title">{roadmapTitle}</h2>
+      <div className="roadmaps-view__mobile-header-actions">
+        <button
+          className="roadmaps-view__mobile-action-btn"
+          onClick={onCreate}
+          title="Create roadmap"
+          aria-label="Create roadmap"
+          data-testid="mobile-header-create-btn"
+        >
+          <Plus size={18} />
+        </button>
+        <button
+          className="roadmaps-view__mobile-action-btn"
+          onClick={onEdit}
+          title="Edit roadmap"
+          aria-label="Edit roadmap"
+          data-testid="mobile-header-edit-btn"
+        >
+          <Pencil size={18} />
+        </button>
+        <button
+          className="roadmaps-view__mobile-action-btn roadmaps-view__mobile-action-btn--danger"
+          onClick={onDelete}
+          title="Delete roadmap"
+          aria-label="Delete roadmap"
+          data-testid="mobile-header-delete-btn"
+        >
+          <Trash2 size={18} />
+        </button>
+      </div>
+    </div>
+  );
+}
+
+// ── Milestone Card ───────────────────────────────────────────────────
+
+function MilestoneCard({
+  milestone,
+  features,
+  onEditMilestone,
+  onDeleteMilestone,
+  onAddFeature,
+  onEditFeature,
+  onDeleteFeature,
+  milestoneEdit,
+  onMilestoneEditChange,
+  onMilestoneEditFieldChange,
+  onCancelMilestoneEdit,
+  onSaveMilestoneEdit,
+  featureEdit,
+  onFeatureEditChange,
+  onStartFeatureEdit: _onStartFeatureEdit,
+  onCancelFeatureEdit,
+  onSaveFeatureEdit,
+  projectId: _projectId,
+  addToast: _addToast,
+  // Milestone drag-and-drop props
+  isMilestoneDragging,
+  isMilestoneDropTarget,
+  milestoneDropPosition,
+  onMilestoneDragStart,
+  onMilestoneDragEnd,
+  onMilestoneDragOver,
+  onMilestoneDrop,
+  onMilestoneDragLeave,
+  // Feature drag-and-drop props
+  isFeatureDragging,
+  isFeatureDropTarget,
+  featureDropIndex,
+  onFeatureDragStart,
+  onFeatureDragEnd,
+  onFeatureDragOver,
+  onFeatureDrop,
+  onFeatureDragLeave,
+  onFeatureDropOnMilestone,
+  // Feature suggestion props
+  featureSuggestions,
+  isGeneratingFeatureSuggestions,
+  onGenerateFeatureSuggestions,
+  onAcceptFeatureSuggestion,
+  onAcceptAllFeatureSuggestions,
+  onUpdateFeatureSuggestionDraft,
+  onClearFeatureSuggestions,
+}: {
+  milestone: RoadmapMilestone;
+  features: RoadmapFeature[];
+  onEditMilestone: () => void;
+  onDeleteMilestone: () => void;
+  onAddFeature: () => void;
+  onEditFeature: (featureId: string) => void;
+  onDeleteFeature: (featureId: string) => void;
+  milestoneEdit: MilestoneInlineEditState | null;
+  onMilestoneEditChange: (value: string) => void;
+  onMilestoneEditFieldChange: (field: "title" | "description") => void;
+  onCancelMilestoneEdit: () => void;
+  onSaveMilestoneEdit: (updates: RoadmapMilestoneUpdateInput) => void;
+  featureEdit: FeatureInlineEditState | null;
+  onFeatureEditChange: (value: string) => void;
+  onStartFeatureEdit: (featureId: string, currentTitle: string, currentDescription?: string) => void;
+  onCancelFeatureEdit: () => void;
+  onSaveFeatureEdit: (updates: RoadmapFeatureUpdateInput) => void;
+  projectId?: string;
+  addToast: (message: string, type?: ToastType) => void;
+  // Milestone drag-and-drop props
+  isMilestoneDragging: boolean;
+  isMilestoneDropTarget: boolean;
+  milestoneDropPosition: "before" | "after" | null;
+  onMilestoneDragStart: (milestoneId: string) => void;
+  onMilestoneDragEnd: () => void;
+  onMilestoneDragOver: (milestoneId: string) => void;
+  onMilestoneDrop: (milestoneId: string) => void;
+  onMilestoneDragLeave: (e: React.DragEvent) => void;
+  // Feature drag-and-drop props
+  isFeatureDragging: (featureId: string) => boolean;
+  isFeatureDropTarget: boolean;
+  featureDropIndex: number | null;
+  onFeatureDragStart: (featureId: string, milestoneId: string) => void;
+  onFeatureDragEnd: () => void;
+  onFeatureDragOver: (featureId: string, position: "before" | "after") => void;
+  onFeatureDrop: (featureId: string, targetIndex: number) => void;
+  onFeatureDragLeave: (e: React.DragEvent) => void;
+  onFeatureDropOnMilestone: () => void;
+  // Feature suggestion props
+  featureSuggestions?: FeatureSuggestion[];
+  isGeneratingFeatureSuggestions?: boolean;
+  onGenerateFeatureSuggestions?: () => void;
+  onUpdateFeatureSuggestionDraft?: (milestoneId: string, draftId: string, patch: SuggestionDraftPatch) => void;
+  onAcceptFeatureSuggestion?: (milestoneId: string, draftId: string) => void;
+  onAcceptAllFeatureSuggestions?: () => void;
+  onClearFeatureSuggestions?: () => void;
+}) {
+  const isEditingMilestone = milestoneEdit?.milestoneId === milestone.id;
+
+  const handleMilestoneTitleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      if (milestoneEdit) {
+        onSaveMilestoneEdit({ title: milestoneEdit.value });
+      }
+    } else if (e.key === "Escape") {
+      onCancelMilestoneEdit();
+    }
+  };
+
+  const handleMilestoneDescKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === "Escape") {
+      onCancelMilestoneEdit();
+    }
+  };
+
+  // Build class names for drag states
+  const milestoneClasses = [
+    "roadmaps-view__milestone",
+    isMilestoneDragging ? "roadmaps-view__milestone--dragging" : "",
+    isMilestoneDropTarget ? "roadmaps-view__milestone--drop-target" : "",
+    isMilestoneDropTarget && milestoneDropPosition === "before" ? "roadmaps-view__milestone--drop-before" : "",
+    isMilestoneDropTarget && milestoneDropPosition === "after" ? "roadmaps-view__milestone--drop-after" : "",
+  ].filter(Boolean).join(" ");
+
+  // Build class names for feature list drop state
+  const featureListClasses = [
+    "roadmaps-view__feature-list",
+    isFeatureDropTarget ? "roadmaps-view__feature-list--drop-target" : "",
+  ].filter(Boolean).join(" ");
+
+  return (
+    <div
+      className={milestoneClasses}
+      draggable={!isEditingMilestone}
+      onDragStart={(e) => {
+        if (!isEditingMilestone) {
+          onMilestoneDragStart(milestone.id);
+          e.dataTransfer.setData("text/plain", `milestone:${milestone.id}`);
+          e.dataTransfer.effectAllowed = "move";
+        }
+      }}
+      onDragEnd={onMilestoneDragEnd}
+      onDragOver={(e) => {
+        // Only prevent default for milestone drops, not feature drops
+        if (e.dataTransfer.types.includes("text/plain")) {
+          const data = e.dataTransfer.types.includes("text/plain");
+          if (data) {
+            // This is a milestone drag
+            e.preventDefault();
+            e.dataTransfer.dropEffect = "move";
+            onMilestoneDragOver(milestone.id);
+          }
+        }
+      }}
+      onDrop={(e) => {
+        e.preventDefault();
+        // Check if this is a feature drop or milestone drop
+        const data = e.dataTransfer.getData("text/plain");
+        if (data?.startsWith("feature:")) {
+          // Feature drop - handled by child element
+        } else {
+          onMilestoneDrop(milestone.id);
+        }
+      }}
+      onDragLeave={onMilestoneDragLeave}
+      data-testid={`milestone-card-${milestone.id}`}
+    >
+      <div className="roadmaps-view__milestone-header">
+        {isEditingMilestone && milestoneEdit ? (
+          <div className="roadmaps-view__inline-edit">
+            <div className="roadmaps-view__inline-edit-row">
+              <span
+                className="roadmaps-view__drag-handle"
+                title="Drag to reorder"
+                aria-label="Drag to reorder"
+                data-testid={`milestone-drag-handle-${milestone.id}`}
+              >
+                <GripVertical size={14} />
+              </span>
+              <input
+                type="text"
+                className="roadmaps-view__inline-input"
+                value={milestoneEdit.value}
+                onChange={(e) => {
+                  onMilestoneEditFieldChange("title");
+                  onMilestoneEditChange(e.target.value);
+                }}
+                onKeyDown={handleMilestoneTitleKeyDown}
+                placeholder="Milestone title"
+                autoFocus
+                data-testid={`milestone-title-input-${milestone.id}`}
+              />
+              <button
+                className="roadmaps-view__icon-btn roadmaps-view__icon-btn--success"
+                onClick={() => onSaveMilestoneEdit({ title: milestoneEdit.value })}
+                aria-label="Save milestone title"
+                title="Save"
+              >
+                <Check size={14} />
+              </button>
+              <button
+                className="roadmaps-view__icon-btn"
+                onClick={onCancelMilestoneEdit}
+                aria-label="Cancel editing"
+                title="Cancel"
+              >
+                <X size={14} />
+              </button>
+            </div>
+            <textarea
+              className="roadmaps-view__inline-textarea"
+              value={milestoneEdit.field === "description" ? milestoneEdit.value : milestone.description || ""}
+              onChange={(e) => {
+                onMilestoneEditFieldChange("description");
+                onMilestoneEditChange(e.target.value);
+              }}
+              onKeyDown={handleMilestoneDescKeyDown}
+              placeholder="Milestone description (optional)"
+              rows={2}
+              data-testid={`milestone-desc-input-${milestone.id}`}
+            />
+          </div>
+        ) : (
+          <>
+            <div className="roadmaps-view__milestone-title-row">
+              <span
+                className="roadmaps-view__drag-handle"
+                title="Drag to reorder"
+                aria-label="Drag to reorder"
+                data-testid={`milestone-drag-handle-${milestone.id}`}
+              >
+                <GripVertical size={14} />
+              </span>
+              <h3 className="roadmaps-view__milestone-title">{milestone.title}</h3>
+              <div className="roadmaps-view__milestone-actions">
+                <button
+                  className="roadmaps-view__icon-btn"
+                  onClick={onEditMilestone}
+                  title="Edit milestone"
+                  aria-label="Edit milestone"
+                  data-testid={`milestone-edit-${milestone.id}`}
+                >
+                  <Pencil size={14} />
+                </button>
+                <button
+                  className="roadmaps-view__icon-btn roadmaps-view__icon-btn--danger"
+                  onClick={onDeleteMilestone}
+                  title="Delete milestone"
+                  aria-label="Delete milestone"
+                  data-testid={`milestone-delete-${milestone.id}`}
+                >
+                  <Trash2 size={14} />
+                </button>
+              </div>
+            </div>
+            {milestone.description && (
+              <p className="roadmaps-view__milestone-desc">{milestone.description}</p>
+            )}
+          </>
+        )}
+      </div>
+
+      <div className="roadmaps-view__milestone-actions-bar">
+        <button
+          className="roadmaps-view__add-feature-btn"
+          onClick={onAddFeature}
+          title="Add feature"
+          aria-label="Add feature"
+          data-testid={`add-feature-${milestone.id}`}
+        >
+          <Plus size={12} />
+          <span>Add Feature</span>
+        </button>
+        <button
+          className="roadmaps-view__suggest-btn"
+          onClick={() => {
+            // Generate feature suggestions for this milestone
+            onGenerateFeatureSuggestions?.();
+          }}
+          disabled={isGeneratingFeatureSuggestions ?? false}
+          title="Generate feature suggestions with AI"
+          aria-label="Generate feature suggestions"
+          data-testid={`generate-features-${milestone.id}`}
+        >
+          <Sparkles size={12} />
+          <span>{isGeneratingFeatureSuggestions ? "Generating..." : "AI Suggestions"}</span>
+        </button>
+      </div>
+
+      <div
+        className={featureListClasses}
+        onDragOver={(e) => {
+          e.preventDefault();
+          e.dataTransfer.dropEffect = "move";
+          // Check if this is a feature being dragged
+          const data = e.dataTransfer.getData("text/plain");
+          if (data?.startsWith("feature:")) {
+            onFeatureDropOnMilestone();
+          }
+        }}
+        onDrop={(e) => {
+          e.preventDefault();
+          const data = e.dataTransfer.getData("text/plain");
+          if (data?.startsWith("feature:")) {
+            // Drop on empty area of feature list - append to end
+            onFeatureDrop(data.split(":")[1], features.length);
+          }
+        }}
+        onDragLeave={onFeatureDragLeave}
+      >
+        {features.length === 0 ? (
+          <p className="roadmaps-view__empty-features">No features yet.</p>
+        ) : (
+          features.map((feature, index) => {
+            const isEditingFeature = featureEdit?.featureId === feature.id;
+            const isFeatureDraggingThis = isFeatureDragging(feature.id);
+
+            const handleFeatureTitleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                if (featureEdit) {
+                  onSaveFeatureEdit({ title: featureEdit.value });
+                }
+              } else if (e.key === "Escape") {
+                onCancelFeatureEdit();
+              }
+            };
+
+            // Build class names for feature drag states
+            const featureClasses = [
+              "roadmaps-view__feature-item",
+              isFeatureDraggingThis ? "roadmaps-view__feature-item--dragging" : "",
+              isFeatureDropTarget && featureDropIndex === index ? "roadmaps-view__feature-item--drop-before" : "",
+              isFeatureDropTarget && featureDropIndex === index + 1 ? "roadmaps-view__feature-item--drop-after" : "",
+            ].filter(Boolean).join(" ");
+
+            return (
+              <div
+                key={feature.id}
+                className={featureClasses}
+                draggable={!isEditingFeature}
+                onDragStart={(e) => {
+                  if (!isEditingFeature) {
+                    onFeatureDragStart(feature.id, milestone.id);
+                    e.dataTransfer.setData("text/plain", `feature:${feature.id}`);
+                    e.dataTransfer.effectAllowed = "move";
+                  }
+                }}
+                onDragEnd={onFeatureDragEnd}
+                onDragOver={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  e.dataTransfer.dropEffect = "move";
+                  const data = e.dataTransfer.getData("text/plain");
+                  if (data?.startsWith("feature:")) {
+                    // Calculate position (before or after)
+                    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+                    const midY = rect.top + rect.height / 2;
+                    const position: "before" | "after" = e.clientY < midY ? "before" : "after";
+                    onFeatureDragOver(feature.id, position);
+                  }
+                }}
+                onDrop={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  const data = e.dataTransfer.getData("text/plain");
+                  if (data?.startsWith("feature:")) {
+                    const draggedFeatureId = data.split(":")[1];
+                    // Calculate target index
+                    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+                    const midY = rect.top + rect.height / 2;
+                    const position: "before" | "after" = e.clientY < midY ? "before" : "after";
+                    let targetIndex = index;
+                    if (position === "after") {
+                      targetIndex = index + 1;
+                    }
+                    onFeatureDrop(draggedFeatureId, targetIndex);
+                  }
+                }}
+                onDragLeave={onFeatureDragLeave}
+                data-testid={`feature-item-${feature.id}`}
+              >
+                {isEditingFeature && featureEdit ? (
+                  <div className="roadmaps-view__inline-edit roadmaps-view__inline-edit--compact">
+                    <div className="roadmaps-view__inline-edit-row">
+                      <span
+                        className="roadmaps-view__drag-handle roadmaps-view__drag-handle--feature"
+                        title="Drag to reorder"
+                        aria-label="Drag to reorder"
+                        data-testid={`feature-drag-handle-${feature.id}`}
+                      >
+                        <GripVertical size={12} />
+                      </span>
+                      <input
+                        type="text"
+                        className="roadmaps-view__inline-input"
+                        value={featureEdit.value}
+                        onChange={(e) => onFeatureEditChange(e.target.value)}
+                        onKeyDown={handleFeatureTitleKeyDown}
+                        placeholder="Feature title"
+                        autoFocus
+                        data-testid={`feature-title-input-${feature.id}`}
+                      />
+                      <button
+                        className="roadmaps-view__icon-btn roadmaps-view__icon-btn--success"
+                        onClick={() => onSaveFeatureEdit({ title: featureEdit.value })}
+                        aria-label="Save feature title"
+                        title="Save"
+                      >
+                        <Check size={14} />
+                      </button>
+                      <button
+                        className="roadmaps-view__icon-btn"
+                        onClick={onCancelFeatureEdit}
+                        aria-label="Cancel editing"
+                        title="Cancel"
+                      >
+                        <X size={14} />
+                      </button>
+                    </div>
+                  </div>
+                ) : (
+                  <>
+                    <span
+                      className="roadmaps-view__drag-handle roadmaps-view__drag-handle--feature"
+                      title="Drag to reorder"
+                      aria-label="Drag to reorder"
+                      data-testid={`feature-drag-handle-${feature.id}`}
+                    >
+                      <GripVertical size={12} />
+                    </span>
+                    <div className="roadmaps-view__feature-content">
+                      <span className="roadmaps-view__feature-title">{feature.title}</span>
+                      {feature.description && (
+                        <p className="roadmaps-view__feature-desc">{feature.description}</p>
+                      )}
+                    </div>
+                    <div className="roadmaps-view__feature-actions">
+                      <button
+                        className="roadmaps-view__icon-btn"
+                        onClick={() => onEditFeature(feature.id)}
+                        title="Edit feature"
+                        aria-label="Edit feature"
+                        data-testid={`feature-edit-${feature.id}`}
+                      >
+                        <Pencil size={12} />
+                      </button>
+                      <button
+                        className="roadmaps-view__icon-btn roadmaps-view__icon-btn--danger"
+                        onClick={() => onDeleteFeature(feature.id)}
+                        title="Delete feature"
+                        aria-label="Delete feature"
+                        data-testid={`feature-delete-${feature.id}`}
+                      >
+                        <Trash2 size={12} />
+                      </button>
+                    </div>
+                  </>
+                )}
+              </div>
+            );
+          })
+        )}
+
+        {/* Feature Suggestions Section */}
+        {featureSuggestions && featureSuggestions.length > 0 && (
+          <div className="roadmap-suggestion-section">
+            <div className="roadmap-suggestion-header">
+              <h4 className="roadmap-suggestion-title">AI Feature Suggestions</h4>
+              <div className="roadmap-suggestion-actions">
+                <button
+                  className="roadmap-suggestion-accept-all-btn"
+                  onClick={() => onAcceptAllFeatureSuggestions?.()}
+                  title="Accept all suggestions"
+                  aria-label="Accept all"
+                  data-testid={`accept-all-features-${milestone.id}`}
+                >
+                  Accept All
+                </button>
+                <button
+                  className="roadmap-suggestion-clear-btn"
+                  onClick={() => onClearFeatureSuggestions?.()}
+                  title="Clear suggestions"
+                  aria-label="Clear"
+                  data-testid={`clear-features-${milestone.id}`}
+                >
+                  Clear
+                </button>
+              </div>
+            </div>
+            <div className="roadmap-suggestion-list">
+              {featureSuggestions.map((suggestion) => (
+                <FeatureSuggestionCard
+                  key={suggestion.id}
+                  suggestion={suggestion}
+                  onUpdateDraft={(patch) => onUpdateFeatureSuggestionDraft?.(milestone.id, suggestion.id, patch)}
+                  onAccept={() => {
+                    onAcceptFeatureSuggestion?.(milestone.id, suggestion.id);
+                  }}
+                  testIdPrefix={`feature-suggestion-${milestone.id}`}
+                />
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ── Feature Suggestion Card ───────────────────────────────────────────
+
+interface FeatureSuggestionCardProps {
+  suggestion: FeatureSuggestion;
+  onUpdateDraft: (patch: SuggestionDraftPatch) => void;
+  onAccept: () => void;
+  testIdPrefix: string;
+}
+
+function FeatureSuggestionCard({
+  suggestion,
+  onUpdateDraft,
+  onAccept,
+  testIdPrefix,
+}: FeatureSuggestionCardProps) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editTitle, setEditTitle] = useState(suggestion.title);
+  const [editDescription, setEditDescription] = useState(suggestion.description || "");
+
+  const handleStartEdit = () => {
+    setEditTitle(suggestion.title);
+    setEditDescription(suggestion.description || "");
+    setIsEditing(true);
+  };
+
+  const handleSaveEdit = () => {
+    onUpdateDraft({
+      title: editTitle.trim(),
+      description: editDescription.trim() || undefined,
+    });
+    setIsEditing(false);
+  };
+
+  const handleCancelEdit = () => {
+    setEditTitle(suggestion.title);
+    setEditDescription(suggestion.description || "");
+    setIsEditing(false);
+  };
+
+  const handleAccept = () => {
+    if (!suggestion.title.trim()) {
+      return; // Don't accept empty titles
+    }
+    onAccept();
+  };
+
+  const isValid = suggestion.title.trim().length > 0;
+
+  if (isEditing) {
+    return (
+      <div className="roadmap-suggestion-card roadmap-suggestion-card--editing">
+        <div className="roadmap-suggestion-edit-form">
+          <input
+            type="text"
+            className="roadmap-suggestion-input"
+            value={editTitle}
+            onChange={(e) => setEditTitle(e.target.value)}
+            placeholder="Feature title"
+            autoFocus
+            data-testid={`${testIdPrefix}-${suggestion.id}-title-input`}
+          />
+          <textarea
+            className="roadmap-suggestion-textarea"
+            value={editDescription}
+            onChange={(e) => setEditDescription(e.target.value)}
+            placeholder="Description (optional)"
+            rows={2}
+            data-testid={`${testIdPrefix}-${suggestion.id}-desc-input`}
+          />
+          <div className="roadmap-suggestion-edit-actions">
+            <button
+              className="roadmap-suggestion-save-btn"
+              onClick={handleSaveEdit}
+              disabled={!editTitle.trim()}
+              title="Save"
+              data-testid={`${testIdPrefix}-${suggestion.id}-save`}
+            >
+              <Check size={12} />
+            </button>
+            <button
+              className="roadmap-suggestion-cancel-btn"
+              onClick={handleCancelEdit}
+              title="Cancel"
+              data-testid={`${testIdPrefix}-${suggestion.id}-cancel`}
+            >
+              <X size={12} />
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="roadmap-suggestion-card"
+      data-testid={`${testIdPrefix}-${suggestion.id}`}
+    >
+      <div className="roadmap-suggestion-content">
+        <span className="roadmap-suggestion-card-title">{suggestion.title}</span>
+        {suggestion.description && (
+          <p className="roadmap-suggestion-card-desc">{suggestion.description}</p>
+        )}
+      </div>
+      <div className="roadmap-suggestion-card-actions">
+        <button
+          className="roadmap-suggestion-edit-btn"
+          onClick={handleStartEdit}
+          title="Edit suggestion"
+          aria-label="Edit"
+          data-testid={`${testIdPrefix}-${suggestion.id}-edit`}
+        >
+          <Pencil size={12} />
+        </button>
+        <button
+          className="roadmap-suggestion-accept-btn"
+          onClick={handleAccept}
+          disabled={!isValid}
+          title="Accept this suggestion"
+          aria-label="Accept"
+          data-testid={`${testIdPrefix}-${suggestion.id}-accept`}
+        >
+          <Check size={12} />
+        </button>
+      </div>
+    </div>
+  );
+}
+
+// ── Milestone Suggestion Card ────────────────────────────────────────
+
+interface MilestoneSuggestionCardProps {
+  suggestion: MilestoneSuggestion;
+  onUpdateDraft: (patch: SuggestionDraftPatch) => void;
+  onAccept: () => void;
+  testIdPrefix: string;
+}
+
+function MilestoneSuggestionCard({
+  suggestion,
+  onUpdateDraft,
+  onAccept,
+  testIdPrefix,
+}: MilestoneSuggestionCardProps) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editTitle, setEditTitle] = useState(suggestion.title);
+  const [editDescription, setEditDescription] = useState(suggestion.description || "");
+
+  const handleStartEdit = () => {
+    setEditTitle(suggestion.title);
+    setEditDescription(suggestion.description || "");
+    setIsEditing(true);
+  };
+
+  const handleSaveEdit = () => {
+    onUpdateDraft({
+      title: editTitle.trim(),
+      description: editDescription.trim() || undefined,
+    });
+    setIsEditing(false);
+  };
+
+  const handleCancelEdit = () => {
+    setEditTitle(suggestion.title);
+    setEditDescription(suggestion.description || "");
+    setIsEditing(false);
+  };
+
+  const handleAccept = () => {
+    if (!suggestion.title.trim()) {
+      return; // Don't accept empty titles
+    }
+    onAccept();
+  };
+
+  const isValid = suggestion.title.trim().length > 0;
+
+  if (isEditing) {
+    return (
+      <div className="roadmap-suggestion-card roadmap-suggestion-card--editing">
+        <div className="roadmap-suggestion-edit-form">
+          <input
+            type="text"
+            className="roadmap-suggestion-input"
+            value={editTitle}
+            onChange={(e) => setEditTitle(e.target.value)}
+            placeholder="Milestone title"
+            autoFocus
+            data-testid={`${testIdPrefix}-${suggestion.id}-title-input`}
+          />
+          <textarea
+            className="roadmap-suggestion-textarea"
+            value={editDescription}
+            onChange={(e) => setEditDescription(e.target.value)}
+            placeholder="Description (optional)"
+            rows={2}
+            data-testid={`${testIdPrefix}-${suggestion.id}-desc-input`}
+          />
+          <div className="roadmap-suggestion-edit-actions">
+            <button
+              className="roadmap-suggestion-save-btn"
+              onClick={handleSaveEdit}
+              disabled={!editTitle.trim()}
+              title="Save"
+              data-testid={`${testIdPrefix}-${suggestion.id}-save`}
+            >
+              <Check size={12} />
+            </button>
+            <button
+              className="roadmap-suggestion-cancel-btn"
+              onClick={handleCancelEdit}
+              title="Cancel"
+              data-testid={`${testIdPrefix}-${suggestion.id}-cancel`}
+            >
+              <X size={12} />
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="roadmap-suggestion-card"
+      data-testid={`${testIdPrefix}-${suggestion.id}`}
+    >
+      <div className="roadmap-suggestion-content">
+        <span className="roadmap-suggestion-card-title">{suggestion.title}</span>
+        {suggestion.description && (
+          <p className="roadmap-suggestion-card-desc">{suggestion.description}</p>
+        )}
+      </div>
+      <div className="roadmap-suggestion-card-actions">
+        <button
+          className="roadmap-suggestion-edit-btn"
+          onClick={handleStartEdit}
+          title="Edit suggestion"
+          aria-label="Edit"
+          data-testid={`${testIdPrefix}-${suggestion.id}-edit`}
+        >
+          <Pencil size={12} />
+        </button>
+        <button
+          className="roadmap-suggestion-accept-btn"
+          onClick={handleAccept}
+          disabled={!isValid}
+          title="Accept this suggestion"
+          aria-label="Accept"
+          data-testid={`${testIdPrefix}-${suggestion.id}-accept`}
+        >
+          <Check size={12} />
+        </button>
+      </div>
+    </div>
+  );
+}
+
+// ── Create Form ───────────────────────────────────────────────────────
+
+function CreateRoadmapForm({
+  onSave,
+  onCancel,
+}: {
+  onSave: (input: RoadmapCreateInput) => void;
+  onCancel: () => void;
+}) {
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!title.trim()) return;
+    onSave({ title: title.trim(), description: description.trim() || undefined });
+  };
+
+  return (
+    <div className="roadmaps-view__create-form" data-testid="create-roadmap-form">
+      <form onSubmit={handleSubmit}>
+        <input
+          type="text"
+          className="roadmaps-view__inline-input"
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+          placeholder="Roadmap title"
+          autoFocus
+          data-testid="create-roadmap-title"
+        />
+        <textarea
+          className="roadmaps-view__inline-textarea"
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+          placeholder="Roadmap description (optional)"
+          rows={2}
+          data-testid="create-roadmap-description"
+        />
+        <div className="roadmaps-view__create-form-actions">
+          <button
+            type="submit"
+            className="roadmaps-view__btn roadmaps-view__btn--primary"
+            disabled={!title.trim()}
+            data-testid="create-roadmap-submit"
+          >
+            Create
+          </button>
+          <button
+            type="button"
+            className="roadmaps-view__btn"
+            onClick={onCancel}
+            data-testid="create-roadmap-cancel"
+          >
+            Cancel
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}
+
+function CreateMilestoneForm({
+  onSave,
+  onCancel,
+}: {
+  onSave: (input: RoadmapMilestoneCreateInput) => void;
+  onCancel: () => void;
+}) {
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!title.trim()) return;
+    onSave({ title: title.trim(), description: description.trim() || undefined });
+  };
+
+  return (
+    <div className="roadmaps-view__create-form roadmaps-view__create-form--inline" data-testid="create-milestone-form">
+      <form onSubmit={handleSubmit} className="roadmaps-view__inline-form">
+        <input
+          type="text"
+          className="roadmaps-view__inline-input"
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+          placeholder="Milestone title"
+          autoFocus
+          data-testid="create-milestone-title"
+        />
+        <textarea
+          className="roadmaps-view__inline-textarea"
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+          placeholder="Description (optional)"
+          rows={1}
+          data-testid="create-milestone-description"
+        />
+        <div className="roadmaps-view__inline-form-actions">
+          <button
+            type="submit"
+            className="roadmaps-view__icon-btn roadmaps-view__icon-btn--success"
+            disabled={!title.trim()}
+            aria-label="Save milestone"
+            title="Save"
+            data-testid="create-milestone-submit"
+          >
+            <Check size={14} />
+          </button>
+          <button
+            type="button"
+            className="roadmaps-view__icon-btn"
+            onClick={onCancel}
+            aria-label="Cancel"
+            title="Cancel"
+            data-testid="create-milestone-cancel"
+          >
+            <X size={14} />
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}
+
+function CreateFeatureForm({
+  onSave,
+  onCancel,
+}: {
+  onSave: (input: RoadmapFeatureCreateInput) => void;
+  onCancel: () => void;
+}) {
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!title.trim()) return;
+    onSave({ title: title.trim(), description: description.trim() || undefined });
+  };
+
+  return (
+    <div className="roadmaps-view__create-form roadmaps-view__create-form--inline" data-testid="create-feature-form">
+      <form onSubmit={handleSubmit} className="roadmaps-view__inline-form">
+        <input
+          type="text"
+          className="roadmaps-view__inline-input"
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+          placeholder="Feature title"
+          autoFocus
+          data-testid="create-feature-title"
+        />
+        <textarea
+          className="roadmaps-view__inline-textarea"
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+          placeholder="Description (optional)"
+          rows={1}
+          data-testid="create-feature-description"
+        />
+        <div className="roadmaps-view__inline-form-actions">
+          <button
+            type="submit"
+            className="roadmaps-view__icon-btn roadmaps-view__icon-btn--success"
+            disabled={!title.trim()}
+            aria-label="Save feature"
+            title="Save"
+            data-testid="create-feature-submit"
+          >
+            <Check size={14} />
+          </button>
+          <button
+            type="button"
+            className="roadmaps-view__icon-btn"
+            onClick={onCancel}
+            aria-label="Cancel"
+            title="Cancel"
+            data-testid="create-feature-cancel"
+          >
+            <X size={14} />
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}
+
+// ── Main Component ────────────────────────────────────────────────────
+
+export function RoadmapsView({ projectId, addToast }: RoadmapsViewProps) {
+  const { confirm } = useConfirm();
+  const isMobile = useViewportMode() === "mobile";
+
+  const {
+    roadmaps,
+    selectedRoadmapId,
+    selectedRoadmap,
+    milestones,
+    featuresByMilestoneId,
+    loading,
+    error,
+    createRoadmap,
+    updateRoadmap,
+    deleteRoadmap,
+    selectRoadmap,
+    createMilestone,
+    updateMilestone,
+    deleteMilestone,
+    createFeature,
+    updateFeature,
+    deleteFeature,
+    reorderMilestones,
+    reorderFeatures,
+    moveFeature,
+    milestoneSuggestions,
+    isGeneratingSuggestions,
+    generateMilestoneSuggestions,
+    updateMilestoneSuggestionDraft,
+    acceptMilestoneSuggestion,
+    acceptAllMilestoneSuggestions,
+    clearMilestoneSuggestions,
+    featureSuggestionsByMilestoneId,
+    isGeneratingFeatureSuggestions,
+    generateFeatureSuggestions,
+    updateFeatureSuggestionDraft,
+    acceptFeatureSuggestion,
+    acceptAllFeatureSuggestions,
+    clearFeatureSuggestions,
+    handoffPayload,
+    isFetchingHandoff,
+    handoffError,
+    fetchHandoff,
+    clearHandoff,
+  } = useRoadmaps({ projectId });
+
+  // Handoff modal state
+  const [handoffModalOpen, setHandoffModalOpen] = useState(false);
+  const [handoffRoadmapId, setHandoffRoadmapId] = useState<string | null>(null);
+  const [handoffRoadmapTitle, setHandoffRoadmapTitle] = useState<string>("");
+
+  // Goal prompt state for milestone suggestion generation
+  const [goalPrompt, setGoalPrompt] = useState("");
+
+  // Mobile suggestion panel collapse state
+  const [showSuggestionPanel, setShowSuggestionPanel] = useState(false);
+
+  // Reset suggestion panel when roadmap changes on mobile
+  const prevRoadmapIdRef = useRef<string | null>(null);
+  useEffect(() => {
+    if (prevRoadmapIdRef.current !== null && prevRoadmapIdRef.current !== selectedRoadmapId) {
+      setShowSuggestionPanel(false);
+    }
+    prevRoadmapIdRef.current = selectedRoadmapId;
+  }, [selectedRoadmapId]);
+
+  // Inline edit states
+  const [roadmapEdit, setRoadmapEdit] = useState<InlineEditState>({
+    roadmapId: null,
+    field: null,
+    value: "",
+  });
+  const [milestoneEdit, setMilestoneEdit] = useState<MilestoneInlineEditState>({
+    milestoneId: null,
+    field: null,
+    value: "",
+  });
+  const [featureEdit, setFeatureEdit] = useState<FeatureInlineEditState>({
+    featureId: null,
+    field: null,
+    value: "",
+  });
+
+  // Create form state
+  const [createForm, setCreateForm] = useState<CreateFormState>({
+    type: null,
+    parentId: undefined,
+    title: "",
+    description: "",
+  });
+
+  // Mobile roadmap list create form state
+  const [mobileShowCreateForm, setMobileShowCreateForm] = useState(false);
+
+  // Milestone drag-and-drop state
+  const [milestoneDrag, setMilestoneDrag] = useState<MilestoneDragState>({
+    draggingId: null,
+    dropTargetId: null,
+    dropPosition: null,
+  });
+
+  // Milestone drag handlers
+  const handleMilestoneDragStart = useCallback((milestoneId: string) => {
+    setMilestoneDrag((prev) => ({
+      ...prev,
+      draggingId: milestoneId,
+    }));
+  }, []);
+
+  const handleMilestoneDragEnd = useCallback(() => {
+    setMilestoneDrag({
+      draggingId: null,
+      dropTargetId: null,
+      dropPosition: null,
+    });
+  }, []);
+
+  const handleMilestoneDragOver = useCallback((targetMilestoneId: string) => {
+    setMilestoneDrag((prev) => {
+      // Don't update if dragging over self
+      if (prev.draggingId === targetMilestoneId) {
+        return prev;
+      }
+      // Calculate drop position based on mouse position relative to target
+      // The position will be computed based on where the drop will happen
+      // For now, we just track the target
+      return {
+        ...prev,
+        dropTargetId: targetMilestoneId,
+        dropPosition: null, // Will be set in handleMilestoneDrop
+      };
+    });
+  }, []);
+
+  // Feature drag-and-drop state
+  const [featureDrag, setFeatureDrag] = useState<FeatureDragState>({
+    draggingId: null,
+    draggingMilestoneId: null,
+    dropTargetMilestoneId: null,
+    dropTargetIndex: null,
+    dropPosition: null,
+  });
+
+  // Feature drag handlers
+  const handleFeatureDragStart = useCallback((featureId: string, milestoneId: string) => {
+    setFeatureDrag((prev) => ({
+      ...prev,
+      draggingId: featureId,
+      draggingMilestoneId: milestoneId,
+    }));
+  }, []);
+
+  const handleFeatureDragEnd = useCallback(() => {
+    setFeatureDrag({
+      draggingId: null,
+      draggingMilestoneId: null,
+      dropTargetMilestoneId: null,
+      dropTargetIndex: null,
+      dropPosition: null,
+    });
+  }, []);
+
+  const handleFeatureDragOver = useCallback((targetFeatureId: string, position: "before" | "after") => {
+    setFeatureDrag((prev) => {
+      // Don't update if dragging over self
+      if (prev.draggingId === targetFeatureId) {
+        return prev;
+      }
+      // Find the target feature's index in its milestone
+      const targetFeatures = featuresByMilestoneId[prev.draggingMilestoneId || ""] || [];
+      const targetIndex = targetFeatures.findIndex((f) => f.id === targetFeatureId);
+
+      let dropTargetIndex: number;
+      if (position === "before") {
+        dropTargetIndex = targetIndex;
+      } else {
+        dropTargetIndex = targetIndex + 1;
+      }
+
+      return {
+        ...prev,
+        dropTargetMilestoneId: prev.draggingMilestoneId,
+        dropTargetIndex,
+        dropPosition: position,
+      };
+    });
+  }, [featuresByMilestoneId]);
+
+  const handleFeatureDropOnMilestone = useCallback(() => {
+    setFeatureDrag((prev) => ({
+      ...prev,
+      dropTargetMilestoneId: prev.draggingMilestoneId,
+      // Append to end of feature list
+      dropTargetIndex: (featuresByMilestoneId[prev.draggingMilestoneId || ""] || []).length,
+    }));
+  }, [featuresByMilestoneId]);
+
+  const handleFeatureDrop = useCallback(async (featureId: string, targetIndex: number) => {
+    const { draggingMilestoneId, dropTargetMilestoneId } = featureDrag;
+    if (!draggingMilestoneId) {
+      handleFeatureDragEnd();
+      return;
+    }
+
+    // Determine the target milestone - use the drop target if available, otherwise the dragging milestone
+    const targetMilestoneId = dropTargetMilestoneId || draggingMilestoneId;
+
+    // Get the source features
+    const sourceFeatures = featuresByMilestoneId[draggingMilestoneId] || [];
+
+    // Find the feature being dragged
+    const featureBeingDragged = sourceFeatures.find((f) => f.id === featureId);
+    if (!featureBeingDragged) {
+      handleFeatureDragEnd();
+      return;
+    }
+
+    // Check if this is a cross-milestone move
+    const isCrossMilestone = draggingMilestoneId !== targetMilestoneId;
+
+    if (isCrossMilestone) {
+      // No-op check: if moving to same position in same milestone (shouldn't happen but safety check)
+      if (draggingMilestoneId === targetMilestoneId) {
+        handleFeatureDragEnd();
+        return;
+      }
+
+      // Perform the move
+      try {
+        await moveFeature(featureId, targetMilestoneId, targetIndex, {
+          onError: (err) => {
+            addToast(`Failed to move feature: ${err.message}`, "error");
+          },
+        });
+      } catch {
+        // Error handled in callback
+      }
+    } else {
+      // Same-milestone reorder
+      const targetFeatures = [...sourceFeatures];
+      const fromIndex = targetFeatures.findIndex((f) => f.id === featureId);
+
+      // Remove from current position and insert at target
+      targetFeatures.splice(fromIndex, 1);
+      targetFeatures.splice(targetIndex, 0, featureBeingDragged);
+
+      // Compute new order of feature IDs
+      const orderedIds = targetFeatures.map((f) => f.id);
+
+      // No-op check: if order is unchanged
+      const currentIds = sourceFeatures.map((f) => f.id);
+      if (orderedIds.join(",") === currentIds.join(",")) {
+        handleFeatureDragEnd();
+        return;
+      }
+
+      // Perform the reorder
+      try {
+        await reorderFeatures(draggingMilestoneId, orderedIds, {
+          onError: (err) => {
+            addToast(`Failed to reorder features: ${err.message}`, "error");
+          },
+        });
+      } catch {
+        // Error handled in callback
+      }
+    }
+
+    handleFeatureDragEnd();
+  }, [featureDrag, featuresByMilestoneId, reorderFeatures, moveFeature, addToast, handleFeatureDragEnd]);
+
+  const handleFeatureDragLeave = useCallback((e: React.DragEvent) => {
+    // Only clear if leaving the element entirely
+    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+    const x = e.clientX;
+    const y = e.clientY;
+    if (x < rect.left || x > rect.right || y < rect.top || y > rect.bottom) {
+      setFeatureDrag((prev) => ({
+        ...prev,
+        dropTargetMilestoneId: null,
+        dropTargetIndex: null,
+        dropPosition: null,
+      }));
+    }
+  }, []);
+
+  // Check if a feature is being dragged
+  const isFeatureDragging = useCallback((featureId: string) => {
+    return featureDrag.draggingId === featureId;
+  }, [featureDrag.draggingId]);
+
+  const handleMilestoneDrop = useCallback(async (targetMilestoneId: string) => {
+    const { draggingId } = milestoneDrag;
+    if (!draggingId || draggingId === targetMilestoneId) {
+      handleMilestoneDragEnd();
+      return;
+    }
+
+    // Compute the new order
+    const currentOrder = milestones.map((m) => m.id);
+    const fromIndex = currentOrder.indexOf(draggingId);
+    const toIndex = currentOrder.indexOf(targetMilestoneId);
+
+    if (fromIndex === -1 || toIndex === -1) {
+      handleMilestoneDragEnd();
+      return;
+    }
+
+    // Compute the new order based on drop position
+    // The drop indicator shows where the item will be inserted
+    const newOrder = [...currentOrder];
+    newOrder.splice(fromIndex, 1);
+    newOrder.splice(toIndex, 0, draggingId);
+
+    // No-op check: if the order is unchanged
+    if (newOrder.join(",") === currentOrder.join(",")) {
+      handleMilestoneDragEnd();
+      return;
+    }
+
+    // Perform the reorder
+    try {
+      await reorderMilestones(selectedRoadmapId!, newOrder, {
+        onError: (err) => {
+          addToast(`Failed to reorder milestones: ${err.message}`, "error");
+        },
+      });
+    } catch {
+      // Error handled in callback
+    }
+
+    handleMilestoneDragEnd();
+  }, [milestoneDrag, milestones, selectedRoadmapId, reorderMilestones, addToast, handleMilestoneDragEnd]);
+
+  const handleMilestoneDragLeave = useCallback((e: React.DragEvent) => {
+    // Only clear if leaving the element entirely
+    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+    const x = e.clientX;
+    const y = e.clientY;
+    if (x < rect.left || x > rect.right || y < rect.top || y > rect.bottom) {
+      setMilestoneDrag((prev) => ({
+        ...prev,
+        dropTargetId: null,
+        dropPosition: null,
+      }));
+    }
+  }, []);
+
+  // Roadmap handlers
+  const handleStartRoadmapEdit = useCallback((roadmap: Roadmap) => {
+    selectRoadmap(roadmap.id);
+    setRoadmapEdit({
+      roadmapId: roadmap.id,
+      field: "title",
+      value: roadmap.title,
+    });
+  }, [selectRoadmap]);
+
+  const handleCancelRoadmapEdit = useCallback(() => {
+    setRoadmapEdit({ roadmapId: null, field: null, value: "" });
+  }, []);
+
+  const handleSaveRoadmapEdit = useCallback(
+    async (updates: RoadmapUpdateInput) => {
+      if (!roadmapEdit.roadmapId) return;
+      try {
+        await updateRoadmap(roadmapEdit.roadmapId, updates, {
+          onError: (err) => addToast(err.message, "error"),
+        });
+        handleCancelRoadmapEdit();
+      } catch {
+        // Error handled in callback
+      }
+    },
+    [roadmapEdit.roadmapId, updateRoadmap, handleCancelRoadmapEdit, addToast]
+  );
+
+  const handleDeleteRoadmap = useCallback(
+    async (roadmapId: string) => {
+      const shouldDelete = await confirm({
+        title: "Delete Roadmap",
+        message: "Delete this roadmap? This cannot be undone.",
+        danger: true,
+      });
+      if (!shouldDelete) return;
+      try {
+        await deleteRoadmap(roadmapId, {
+          onError: (err) => addToast(err.message, "error"),
+        });
+        addToast("Roadmap deleted", "success");
+      } catch {
+        // Error handled in callback
+      }
+    },
+    [deleteRoadmap, addToast, confirm]
+  );
+
+  // Handoff handlers
+  const handleOpenHandoffModal = useCallback((roadmapId: string, roadmapTitle: string) => {
+    setHandoffRoadmapId(roadmapId);
+    setHandoffRoadmapTitle(roadmapTitle);
+    setHandoffModalOpen(true);
+    // Clear any previous handoff data
+    clearHandoff();
+  }, [clearHandoff]);
+
+  const handleCloseHandoffModal = useCallback(() => {
+    setHandoffModalOpen(false);
+    setHandoffRoadmapId(null);
+    setHandoffRoadmapTitle("");
+    clearHandoff();
+  }, [clearHandoff]);
+
+  const handleFetchHandoff = useCallback(() => {
+    if (handoffRoadmapId) {
+      fetchHandoff(handoffRoadmapId, {
+        onError: (err) => addToast(`Failed to load handoff: ${err.message}`, "error"),
+      });
+    }
+  }, [handoffRoadmapId, fetchHandoff, addToast]);
+
+  const handleCopyHandoffToClipboard = useCallback(() => {
+    if (handoffPayload) {
+      const data = JSON.stringify(handoffPayload, null, 2);
+      navigator.clipboard.writeText(data).then(() => {
+        addToast("Handoff data copied to clipboard", "success");
+      }).catch(() => {
+        addToast("Failed to copy to clipboard", "error");
+      });
+    }
+  }, [handoffPayload, addToast]);
+
+  const handleCreateRoadmap = useCallback(
+    async (input: RoadmapCreateInput) => {
+      try {
+        await createRoadmap(input, {
+          onError: (err) => addToast(err.message, "error"),
+        });
+        setCreateForm({ type: null, parentId: undefined, title: "", description: "" });
+        addToast("Roadmap created", "success");
+      } catch {
+        // Error handled in callback
+      }
+    },
+    [createRoadmap, addToast]
+  );
+
+  // Milestone handlers
+  const handleStartMilestoneEdit = useCallback((milestone: RoadmapMilestone) => {
+    setMilestoneEdit({
+      milestoneId: milestone.id,
+      field: "title",
+      value: milestone.title,
+    });
+  }, []);
+
+  const handleMilestoneEditChange = useCallback((value: string) => {
+    setMilestoneEdit((previous) => ({ ...previous, value }));
+  }, []);
+
+  const handleMilestoneEditFieldChange = useCallback((field: "title" | "description") => {
+    setMilestoneEdit((previous) => ({ ...previous, field }));
+  }, []);
+
+  const handleCancelMilestoneEdit = useCallback(() => {
+    setMilestoneEdit({ milestoneId: null, field: null, value: "" });
+  }, []);
+
+  const handleSaveMilestoneEdit = useCallback(
+    async (updates: RoadmapMilestoneUpdateInput) => {
+      if (!milestoneEdit.milestoneId) return;
+      try {
+        await updateMilestone(milestoneEdit.milestoneId, updates, {
+          onError: (err) => addToast(err.message, "error"),
+        });
+        handleCancelMilestoneEdit();
+      } catch {
+        // Error handled in callback
+      }
+    },
+    [milestoneEdit.milestoneId, updateMilestone, handleCancelMilestoneEdit, addToast]
+  );
+
+  const handleDeleteMilestone = useCallback(
+    async (milestoneId: string) => {
+      const shouldDelete = await confirm({
+        title: "Delete Milestone",
+        message: "Delete this milestone and all its features?",
+        danger: true,
+      });
+      if (!shouldDelete) return;
+      try {
+        await deleteMilestone(milestoneId, {
+          onError: (err) => addToast(err.message, "error"),
+        });
+        addToast("Milestone deleted", "success");
+      } catch {
+        // Error handled in callback
+      }
+    },
+    [deleteMilestone, addToast, confirm]
+  );
+
+  const handleCreateMilestone = useCallback(
+    async (input: RoadmapMilestoneCreateInput) => {
+      try {
+        await createMilestone(input, {
+          onError: (err) => addToast(err.message, "error"),
+        });
+        setCreateForm({ type: null, parentId: undefined, title: "", description: "" });
+        addToast("Milestone created", "success");
+      } catch {
+        // Error handled in callback
+      }
+    },
+    [createMilestone, addToast]
+  );
+
+  // Feature handlers
+  const handleStartFeatureEdit = useCallback(
+    (featureId: string, currentTitle: string, _currentDescription?: string) => {
+      setFeatureEdit({
+        featureId,
+        field: "title",
+        value: currentTitle,
+      });
+    },
+    []
+  );
+
+  const handleFeatureEditChange = useCallback((value: string) => {
+    setFeatureEdit((previous) => ({ ...previous, value }));
+  }, []);
+
+  const handleCancelFeatureEdit = useCallback(() => {
+    setFeatureEdit({ featureId: null, field: null, value: "" });
+  }, []);
+
+  const handleSaveFeatureEdit = useCallback(
+    async (updates: RoadmapFeatureUpdateInput) => {
+      if (!featureEdit.featureId) return;
+      try {
+        await updateFeature(featureEdit.featureId, updates, {
+          onError: (err) => addToast(err.message, "error"),
+        });
+        handleCancelFeatureEdit();
+      } catch {
+        // Error handled in callback
+      }
+    },
+    [featureEdit.featureId, updateFeature, handleCancelFeatureEdit, addToast]
+  );
+
+  const handleDeleteFeature = useCallback(
+    async (featureId: string) => {
+      const shouldDelete = await confirm({
+        title: "Delete Feature",
+        message: "Delete this feature?",
+        danger: true,
+      });
+      if (!shouldDelete) return;
+      try {
+        await deleteFeature(featureId, {
+          onError: (err) => addToast(err.message, "error"),
+        });
+        addToast("Feature deleted", "success");
+      } catch {
+        // Error handled in callback
+      }
+    },
+    [deleteFeature, addToast, confirm]
+  );
+
+  // Milestone suggestion handlers
+  const handleGenerateSuggestions = useCallback(
+    async () => {
+      if (!goalPrompt.trim()) return;
+      try {
+        await generateMilestoneSuggestions(goalPrompt, 5, {
+          onError: (err) => addToast(err.message, "error"),
+        });
+      } catch {
+        // Error handled in callback
+      }
+    },
+    [goalPrompt, generateMilestoneSuggestions, addToast]
+  );
+
+  const handleAcceptSuggestion = useCallback(
+    async (draftId: string) => {
+      try {
+        await acceptMilestoneSuggestion(draftId, {
+          onError: (err) => addToast(err.message, "error"),
+        });
+        addToast("Milestone added", "success");
+      } catch {
+        // Error handled in callback
+      }
+    },
+    [acceptMilestoneSuggestion, addToast]
+  );
+
+  const handleAcceptAllSuggestions = useCallback(
+    async () => {
+      try {
+        await acceptAllMilestoneSuggestions({
+          onError: (err) => addToast(err.message, "error"),
+        });
+        addToast(`${milestoneSuggestions.length} milestones added`, "success");
+        setGoalPrompt("");
+      } catch {
+        // Error handled in callback
+      }
+    },
+    [acceptAllMilestoneSuggestions, milestoneSuggestions.length, addToast]
+  );
+
+  const handleClearSuggestions = useCallback(() => {
+    clearMilestoneSuggestions();
+    setGoalPrompt("");
+  }, [clearMilestoneSuggestions]);
+
+  // Feature suggestion handlers
+  const handleGenerateFeatureSuggestions = useCallback(
+    async (milestoneId: string) => {
+      try {
+        await generateFeatureSuggestions(milestoneId, { count: 5 }, {
+          onError: (err) => addToast(err.message, "error"),
+        });
+      } catch {
+        // Error handled in callback
+      }
+    },
+    [generateFeatureSuggestions, addToast]
+  );
+
+  const handleAcceptFeatureSuggestion = useCallback(
+    async (milestoneId: string, draftId: string) => {
+      try {
+        await acceptFeatureSuggestion(milestoneId, draftId, {
+          onError: (err) => addToast(err.message, "error"),
+        });
+        addToast("Feature added", "success");
+      } catch {
+        // Error handled in callback
+      }
+    },
+    [acceptFeatureSuggestion, addToast]
+  );
+
+  const handleUpdateFeatureSuggestionDraft = useCallback(
+    (milestoneId: string, draftId: string, patch: SuggestionDraftPatch) => {
+      updateFeatureSuggestionDraft(milestoneId, draftId, patch);
+    },
+    [updateFeatureSuggestionDraft]
+  );
+
+  const handleAcceptAllFeatureSuggestions = useCallback(
+    async (milestoneId: string) => {
+      const suggestions = featureSuggestionsByMilestoneId[milestoneId] || [];
+      try {
+        await acceptAllFeatureSuggestions(milestoneId, {
+          onError: (err) => addToast(err.message, "error"),
+        });
+        addToast(`${suggestions.length} features added`, "success");
+      } catch {
+        // Error handled in callback
+      }
+    },
+    [acceptAllFeatureSuggestions, featureSuggestionsByMilestoneId, addToast]
+  );
+
+  const handleClearFeatureSuggestions = useCallback(
+    (milestoneId: string) => {
+      clearFeatureSuggestions(milestoneId);
+    },
+    [clearFeatureSuggestions]
+  );
+
+  const handleCreateFeature = useCallback(
+    async (milestoneId: string, input: RoadmapFeatureCreateInput) => {
+      try {
+        await createFeature(milestoneId, input, {
+          onError: (err) => addToast(err.message, "error"),
+        });
+        setCreateForm({ type: null, parentId: undefined, title: "", description: "" });
+        addToast("Feature created", "success");
+      } catch {
+        // Error handled in callback
+      }
+    },
+    [createFeature, addToast]
+  );
+
+  // Get the currently selected roadmap ID (handles both desktop and mobile)
+  const effectiveSelectedRoadmapId = selectedRoadmapId;
+
+  if (loading && roadmaps.length === 0) {
+    return (
+      <div className="roadmaps-view roadmaps-view--loading">
+        <div className="roadmaps-view__loading-state">Loading roadmaps...</div>
+      </div>
+    );
+  }
+
+  if (error && roadmaps.length === 0) {
+    return (
+      <div className="roadmaps-view roadmaps-view--error">
+        <div className="roadmaps-view__error-state">
+          <p>Failed to load roadmaps</p>
+          <p className="roadmaps-view__error-msg">{error.message}</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="roadmaps-view">
+      {/* Mobile Roadmap List (shown when mobile and no roadmap selected) */}
+      {isMobile && !effectiveSelectedRoadmapId && (
+        <MobileRoadmapList
+          roadmaps={roadmaps}
+          selectedRoadmapId={effectiveSelectedRoadmapId}
+          onSelect={(id) => selectRoadmap(id)}
+          onCreate={() => setMobileShowCreateForm(true)}
+          onEdit={handleStartRoadmapEdit}
+          onDelete={handleDeleteRoadmap}
+          onExport={(roadmap) => handleOpenHandoffModal(roadmap.id, roadmap.title)}
+          showCreateForm={mobileShowCreateForm}
+          onCancelCreate={() => setMobileShowCreateForm(false)}
+          onSaveCreate={async (input) => {
+            await handleCreateRoadmap(input);
+            setMobileShowCreateForm(false);
+          }}
+        />
+      )}
+
+      {/* Desktop sidebar (hidden on mobile) */}
+      {!isMobile && (
+        <aside className="roadmaps-view__sidebar" aria-label="Roadmaps">
+          <div className="roadmaps-view__sidebar-header">
+            <h2 className="roadmaps-view__sidebar-title">Roadmaps</h2>
+            <button
+              className="roadmaps-view__add-btn"
+              onClick={() => setCreateForm({ type: "roadmap", title: "", description: "" })}
+              title="Create roadmap"
+              aria-label="Create roadmap"
+              data-testid="create-roadmap-btn"
+            >
+              <Plus size={16} />
+            </button>
+          </div>
+
+          {createForm.type === "roadmap" && (
+            <CreateRoadmapForm
+              onSave={handleCreateRoadmap}
+              onCancel={() => setCreateForm({ type: null, parentId: undefined, title: "", description: "" })}
+            />
+          )}
+
+          <div className="roadmaps-view__sidebar-list">
+            {roadmaps.length === 0 ? (
+              <p className="roadmaps-view__empty-sidebar">No roadmaps yet. Click + to create one.</p>
+            ) : (
+              roadmaps.map((roadmap) => (
+                <RoadmapItem
+                  key={roadmap.id}
+                  roadmap={roadmap}
+                  isSelected={roadmap.id === effectiveSelectedRoadmapId}
+                  onSelect={() => selectRoadmap(roadmap.id)}
+                  onEdit={() => handleStartRoadmapEdit(roadmap)}
+                  onDelete={() => handleDeleteRoadmap(roadmap.id)}
+                  onExport={() => handleOpenHandoffModal(roadmap.id, roadmap.title)}
+                />
+              ))
+            )}
+          </div>
+        </aside>
+      )}
+
+      {/* Main content */}
+      <main className="roadmaps-view__main" aria-label="Roadmap content">
+        {/* Mobile header when roadmap is selected */}
+        {isMobile && effectiveSelectedRoadmapId && (
+          <MobileRoadmapHeader
+            roadmapTitle={selectedRoadmap?.title || "Untitled Roadmap"}
+            onBack={() => selectRoadmap(null)}
+            onEdit={() => {
+              if (selectedRoadmap) handleStartRoadmapEdit(selectedRoadmap);
+            }}
+            onDelete={() => handleDeleteRoadmap(effectiveSelectedRoadmapId)}
+            onCreate={() => setMobileShowCreateForm(true)}
+          />
+        )}
+
+        {!effectiveSelectedRoadmapId ? (
+          <div className="roadmaps-view__empty-main">
+            <p>Select a roadmap from the sidebar to view its milestones.</p>
+          </div>
+        ) : (
+          <>
+            {/* Roadmap header */}
+            <div className="roadmaps-view__roadmap-header">
+              {roadmapEdit.roadmapId === effectiveSelectedRoadmapId ? (
+                <div className="roadmaps-view__inline-edit">
+                  <div className="roadmaps-view__inline-edit-row">
+                    <input
+                      type="text"
+                      className="roadmaps-view__inline-input roadmaps-view__inline-input--large"
+                      value={roadmapEdit.value}
+                      onChange={(e) =>
+                        setRoadmapEdit((prev) => ({ ...prev, value: e.target.value }))
+                      }
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter") {
+                          handleSaveRoadmapEdit({ title: roadmapEdit.value });
+                        } else if (e.key === "Escape") {
+                          handleCancelRoadmapEdit();
+                        }
+                      }}
+                      placeholder="Roadmap title"
+                      autoFocus
+                      data-testid="roadmap-title-input"
+                    />
+                    <button
+                      className="roadmaps-view__icon-btn roadmaps-view__icon-btn--success"
+                      onClick={() => handleSaveRoadmapEdit({ title: roadmapEdit.value })}
+                      aria-label="Save"
+                      title="Save"
+                    >
+                      <Check size={16} />
+                    </button>
+                    <button
+                      className="roadmaps-view__icon-btn"
+                      onClick={handleCancelRoadmapEdit}
+                      aria-label="Cancel"
+                      title="Cancel"
+                    >
+                      <X size={16} />
+                    </button>
+                  </div>
+                </div>
+              ) : (
+                <>
+                  <div className="roadmaps-view__roadmap-title-row">
+                    <h1 className="roadmaps-view__roadmap-title">
+                      {selectedRoadmap?.title || "Untitled Roadmap"}
+                    </h1>
+                    <div className="roadmaps-view__roadmap-actions">
+                      <button
+                        className="roadmaps-view__icon-btn"
+                        onClick={() => {
+                          if (selectedRoadmap) handleStartRoadmapEdit(selectedRoadmap);
+                        }}
+                        title="Edit roadmap"
+                        aria-label="Edit roadmap"
+                        data-testid="edit-roadmap-btn"
+                      >
+                        <Pencil size={16} />
+                      </button>
+                      <button
+                        className="roadmaps-view__icon-btn roadmaps-view__icon-btn--danger"
+                        onClick={() => handleDeleteRoadmap(effectiveSelectedRoadmapId)}
+                        title="Delete roadmap"
+                        aria-label="Delete roadmap"
+                        data-testid="delete-roadmap-btn"
+                      >
+                        <Trash2 size={16} />
+                      </button>
+                    </div>
+                  </div>
+                  {selectedRoadmap?.description && (
+                    <p className="roadmaps-view__roadmap-desc">{selectedRoadmap.description}</p>
+                  )}
+                </>
+              )}
+            </div>
+
+            {/* Milestone Suggestions Section */}
+            {isMobile ? (
+              showSuggestionPanel ? (
+                <div className="roadmap-suggestion-section">
+                  <div className="roadmap-suggestion-header">
+                    <h3 className="roadmap-suggestion-title">Generate Milestone Ideas</h3>
+                    <button
+                      className="roadmap-suggestion-collapse-btn"
+                      onClick={() => setShowSuggestionPanel(false)}
+                      aria-label="Collapse suggestion panel"
+                      data-testid="collapse-suggestion-panel-btn"
+                    >
+                      <ChevronUp size={16} />
+                    </button>
+                  </div>
+                  <div className="roadmap-suggestion-form">
+                    <textarea
+                      className="roadmap-suggestion-input"
+                      value={goalPrompt}
+                      onChange={(e) => setGoalPrompt(e.target.value)}
+                      placeholder="Describe your roadmap goal (e.g., 'Build a user authentication system with OAuth, profiles, and admin dashboard')"
+                      rows={2}
+                      disabled={isGeneratingSuggestions || !selectedRoadmapId}
+                      data-testid="goal-prompt-input"
+                      autoFocus
+                    />
+                    <div className="roadmap-suggestion-actions">
+                      <button
+                        className="roadmap-suggestion-generate-btn"
+                        onClick={handleGenerateSuggestions}
+                        disabled={!goalPrompt.trim() || isGeneratingSuggestions || !selectedRoadmapId}
+                        data-testid="generate-suggestions-btn"
+                      >
+                        {isGeneratingSuggestions ? "Generating..." : "Generate Milestones"}
+                      </button>
+                      {milestoneSuggestions.length > 0 && (
+                        <>
+                          <button
+                            className="roadmap-suggestion-accept-all-btn"
+                            onClick={handleAcceptAllSuggestions}
+                            data-testid="accept-all-suggestions-btn"
+                          >
+                            Accept All ({milestoneSuggestions.length})
+                          </button>
+                          <button
+                            className="roadmap-suggestion-clear-btn"
+                            onClick={handleClearSuggestions}
+                            title="Clear suggestions"
+                            aria-label="Clear suggestions"
+                            data-testid="clear-suggestions-btn"
+                          >
+                            <X size={14} />
+                          </button>
+                        </>
+                      )}
+                    </div>
+                  </div>
+
+                  {/* Suggestion Cards */}
+                  {milestoneSuggestions.length > 0 && (
+                    <div className="roadmap-suggestion-list">
+                      {milestoneSuggestions.map((suggestion) => (
+                        <MilestoneSuggestionCard
+                          key={suggestion.id}
+                          suggestion={suggestion}
+                          onUpdateDraft={(patch) => updateMilestoneSuggestionDraft(suggestion.id, patch)}
+                          onAccept={() => handleAcceptSuggestion(suggestion.id)}
+                          testIdPrefix="suggestion"
+                        />
+                      ))}
+                    </div>
+                  )}
+                </div>
+              ) : (
+                <div className="roadmap-suggestion-section">
+                  <button
+                    className="roadmap-suggestion-expand-btn"
+                    onClick={() => setShowSuggestionPanel(true)}
+                    disabled={!selectedRoadmapId}
+                    data-testid="expand-suggestion-panel-btn"
+                  >
+                    <Sparkles size={16} />
+                    Generate Milestone Ideas
+                  </button>
+                </div>
+              )
+            ) : (
+              <div className="roadmap-suggestion-section">
+                <div className="roadmap-suggestion-header">
+                  <h3 className="roadmap-suggestion-title">Generate Milestone Ideas</h3>
+                </div>
+                <div className="roadmap-suggestion-form">
+                  <textarea
+                    className="roadmap-suggestion-input"
+                    value={goalPrompt}
+                    onChange={(e) => setGoalPrompt(e.target.value)}
+                    placeholder="Describe your roadmap goal (e.g., 'Build a user authentication system with OAuth, profiles, and admin dashboard')"
+                    rows={2}
+                    disabled={isGeneratingSuggestions || !selectedRoadmapId}
+                    data-testid="goal-prompt-input"
+                  />
+                  <div className="roadmap-suggestion-actions">
+                    <button
+                      className="roadmap-suggestion-generate-btn"
+                      onClick={handleGenerateSuggestions}
+                      disabled={!goalPrompt.trim() || isGeneratingSuggestions || !selectedRoadmapId}
+                      data-testid="generate-suggestions-btn"
+                    >
+                      {isGeneratingSuggestions ? "Generating..." : "Generate Milestones"}
+                    </button>
+                    {milestoneSuggestions.length > 0 && (
+                      <>
+                        <button
+                          className="roadmap-suggestion-accept-all-btn"
+                          onClick={handleAcceptAllSuggestions}
+                          data-testid="accept-all-suggestions-btn"
+                        >
+                          Accept All ({milestoneSuggestions.length})
+                        </button>
+                        <button
+                          className="roadmap-suggestion-clear-btn"
+                          onClick={handleClearSuggestions}
+                          title="Clear suggestions"
+                          aria-label="Clear suggestions"
+                          data-testid="clear-suggestions-btn"
+                        >
+                          <X size={14} />
+                        </button>
+                      </>
+                    )}
+                  </div>
+                </div>
+
+                {/* Suggestion Cards */}
+                {milestoneSuggestions.length > 0 && (
+                  <div className="roadmap-suggestion-list">
+                    {milestoneSuggestions.map((suggestion) => (
+                      <MilestoneSuggestionCard
+                        key={suggestion.id}
+                        suggestion={suggestion}
+                        onUpdateDraft={(patch) => updateMilestoneSuggestionDraft(suggestion.id, patch)}
+                        onAccept={() => handleAcceptSuggestion(suggestion.id)}
+                        testIdPrefix="suggestion"
+                      />
+                    ))}
+                  </div>
+                )}
+              </div>
+            )}
+
+            {/* Milestone lanes */}
+            <div className="roadmaps-view__milestone-lanes">
+              {createForm.type === "milestone" && (
+                <CreateMilestoneForm
+                  onSave={handleCreateMilestone}
+                  onCancel={() => setCreateForm({ type: null, parentId: undefined, title: "", description: "" })}
+                />
+              )}
+
+              {milestones.length === 0 && createForm.type !== "milestone" ? (
+                <div className="roadmaps-view__empty-milestones">
+                  <p>This roadmap has no milestones.</p>
+                  <button
+                    className="roadmaps-view__add-milestone-btn"
+                    onClick={() => setCreateForm({ type: "milestone", title: "", description: "" })}
+                    data-testid="add-milestone-btn-empty"
+                  >
+                    <Plus size={14} />
+                    <span>Add Milestone</span>
+                  </button>
+                </div>
+              ) : (
+                <>
+                  {createForm.type !== "milestone" && (
+                    <button
+                      className="roadmaps-view__add-milestone-fab"
+                      onClick={() => setCreateForm({ type: "milestone", title: "", description: "" })}
+                      data-testid="add-milestone-btn"
+                    >
+                      <Plus size={14} />
+                      <span>Add Milestone</span>
+                    </button>
+                  )}
+                  {milestones.map((milestone) => (
+                    <MilestoneCard
+                      key={milestone.id}
+                      milestone={milestone}
+                      features={featuresByMilestoneId[milestone.id] || []}
+                      onEditMilestone={() => handleStartMilestoneEdit(milestone)}
+                      onDeleteMilestone={() => handleDeleteMilestone(milestone.id)}
+                      onAddFeature={() => setCreateForm({ type: "feature", parentId: milestone.id, title: "", description: "" })}
+                      onEditFeature={(featureId) => {
+                        const feature = featuresByMilestoneId[milestone.id]?.find((f) => f.id === featureId);
+                        if (feature) {
+                          handleStartFeatureEdit(featureId, feature.title, feature.description);
+                        }
+                      }}
+                      onDeleteFeature={handleDeleteFeature}
+                      milestoneEdit={milestoneEdit}
+                      onMilestoneEditChange={handleMilestoneEditChange}
+                      onMilestoneEditFieldChange={handleMilestoneEditFieldChange}
+                      onCancelMilestoneEdit={handleCancelMilestoneEdit}
+                      onSaveMilestoneEdit={handleSaveMilestoneEdit}
+                      featureEdit={featureEdit}
+                      onFeatureEditChange={handleFeatureEditChange}
+                      onStartFeatureEdit={handleStartFeatureEdit}
+                      onCancelFeatureEdit={handleCancelFeatureEdit}
+                      onSaveFeatureEdit={handleSaveFeatureEdit}
+                      projectId={projectId}
+                      addToast={addToast}
+                      // Milestone drag-and-drop props
+                      isMilestoneDragging={milestoneDrag.draggingId === milestone.id}
+                      isMilestoneDropTarget={milestoneDrag.dropTargetId === milestone.id}
+                      milestoneDropPosition={milestoneDrag.dropTargetId === milestone.id ? milestoneDrag.dropPosition : null}
+                      onMilestoneDragStart={handleMilestoneDragStart}
+                      onMilestoneDragEnd={handleMilestoneDragEnd}
+                      onMilestoneDragOver={handleMilestoneDragOver}
+                      onMilestoneDrop={handleMilestoneDrop}
+                      onMilestoneDragLeave={handleMilestoneDragLeave}
+                      // Feature drag-and-drop props
+                      isFeatureDragging={isFeatureDragging}
+                      isFeatureDropTarget={featureDrag.dropTargetMilestoneId === milestone.id}
+                      featureDropIndex={featureDrag.dropTargetMilestoneId === milestone.id ? featureDrag.dropTargetIndex : null}
+                      onFeatureDragStart={handleFeatureDragStart}
+                      onFeatureDragEnd={handleFeatureDragEnd}
+                      onFeatureDragOver={handleFeatureDragOver}
+                      onFeatureDrop={handleFeatureDrop}
+                      onFeatureDragLeave={handleFeatureDragLeave}
+                      onFeatureDropOnMilestone={handleFeatureDropOnMilestone}
+                      // Feature suggestion props
+                      featureSuggestions={featureSuggestionsByMilestoneId[milestone.id]}
+                      isGeneratingFeatureSuggestions={isGeneratingFeatureSuggestions(milestone.id)}
+                      onGenerateFeatureSuggestions={() => handleGenerateFeatureSuggestions(milestone.id)}
+                      onAcceptFeatureSuggestion={(index) => handleAcceptFeatureSuggestion(milestone.id, index)}
+                      onAcceptAllFeatureSuggestions={() => handleAcceptAllFeatureSuggestions(milestone.id)}
+                      onUpdateFeatureSuggestionDraft={(milestoneId, draftId, patch) => handleUpdateFeatureSuggestionDraft(milestoneId, draftId, patch)}
+                      onClearFeatureSuggestions={() => handleClearFeatureSuggestions(milestone.id)}
+                    />
+                  ))}
+                </>
+              )}
+            </div>
+          </>
+        )}
+      </main>
+
+      {/* Feature create form overlay */}
+      {createForm.type === "feature" && createForm.parentId && (
+        <div className="roadmaps-view__feature-create-overlay">
+          <CreateFeatureForm
+            onSave={(input) => handleCreateFeature(createForm.parentId!, input)}
+            onCancel={() => setCreateForm({ type: null, parentId: undefined, title: "", description: "" })}
+          />
+        </div>
+      )}
+
+      {/* Handoff export modal */}
+      <HandoffModal
+        isOpen={handoffModalOpen}
+        onClose={handleCloseHandoffModal}
+        roadmapId={handoffRoadmapId || ""}
+        roadmapTitle={handoffRoadmapTitle}
+        handoffPayload={handoffPayload}
+        isLoading={isFetchingHandoff}
+        error={handoffError}
+        onFetchHandoff={handleFetchHandoff}
+        onCopyToClipboard={handleCopyHandoffToClipboard}
+      />
+    </div>
+  );
+}