@runfusion/fusion 0.25.0 → 0.26.0

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

@@ -1,2559 +0,0 @@
-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>
-  );
-}