cortex-react-components 3.3.0 → 4.0.2

package/dist/components/Projects/index.js

@@ -6893,15 +6893,16 @@ function useLocalStorage(key, initialValue) {
       return initialValue;
     }
   });
-  const setValue = (value) => {
+  const setValue = (0, import_react19.useCallback)((value) => {
     try {
-      setStoredValue(value);
+      const valueToStore = value instanceof Function ? value(storedValue) : value;
+      setStoredValue(valueToStore);
       if (typeof window !== "undefined") {
-        window.localStorage.setItem(key, JSON.stringify(value));
+        window.localStorage.setItem(key, JSON.stringify(valueToStore));
       }
     } catch (error) {
     }
-  };
+  }, [key, storedValue]);
   (0, import_react19.useEffect)(() => {
     setValue(storedValue);
   }, []);
@@ -8317,6 +8318,7 @@ var import_react25 = __toESM(require("react"));
 var import_lucide_react18 = require("lucide-react");
 var import_jsx_runtime47 = require("react/jsx-runtime");
 var SprintBoardView = ({
+  projectId,
   initialTasks = [],
   initialEpics = [],
   initialSprints = [],
@@ -8332,6 +8334,8 @@ var SprintBoardView = ({
   onAddEpic,
   // Sprint handlers
   onAddSprint,
+  onUpdateSprint,
+  onDeleteSprint,
   onAddComment,
   onUploadFile,
   onDeleteFile,
@@ -8343,9 +8347,16 @@ var SprintBoardView = ({
   const [colleagues, setColleagues] = (0, import_react25.useState)([]);
   const [users, setUsers] = (0, import_react25.useState)([]);
   const [selectedSprintIds, setSelectedSprintIds] = useLocalStorage(
-    "sprintBoardView_selectedSprints",
+    `sprintBoardView_selectedSprints${projectId ? `_${projectId}` : ""}`,
     []
   );
+  const [editingSprintId, setEditingSprintId] = (0, import_react25.useState)(null);
+  const [sprintEditForm, setSprintEditForm] = (0, import_react25.useState)({
+    name: "",
+    description: "",
+    startDate: "",
+    endDate: ""
+  });
   const [isAddTaskModalOpen, setIsAddTaskModalOpen] = (0, import_react25.useState)(false);
   const [isAddEpicModalOpen, setIsAddEpicModalOpen] = (0, import_react25.useState)(false);
   const [isAddSprintModalOpen, setIsAddSprintModalOpen] = (0, import_react25.useState)(false);
@@ -8392,6 +8403,8 @@ var SprintBoardView = ({
     const next = getHash(initialSprints);
     if (next !== prevSprintHash.current) {
       setSprints(initialSprints);
+      const validIds = new Set(initialSprints.map((s) => s.id.toString()));
+      setSelectedSprintIds(selectedSprintIds.filter((id) => validIds.has(id)));
       prevSprintHash.current = next;
     }
   }, [initialSprints]);
@@ -8536,6 +8549,34 @@ var SprintBoardView = ({
     onAddSprint?.(sprintData);
     setIsAddSprintModalOpen(false);
   };
+  const handleSprintEditStart = (sprint) => {
+    setEditingSprintId(sprint.id.toString());
+    setSprintEditForm({
+      name: sprint.name,
+      description: sprint.description || "",
+      startDate: sprint.startDate ? new Date(sprint.startDate).toISOString().split("T")[0] : "",
+      endDate: sprint.endDate ? new Date(sprint.endDate).toISOString().split("T")[0] : ""
+    });
+  };
+  const handleSprintEditSave = () => {
+    if (!editingSprintId) return;
+    onUpdateSprint?.(editingSprintId, sprintEditForm);
+    setSprints(
+      (prev) => prev.map(
+        (s) => s.id.toString() === editingSprintId ? { ...s, ...sprintEditForm } : s
+      )
+    );
+    setEditingSprintId(null);
+  };
+  const handleSprintEditCancel = () => {
+    setEditingSprintId(null);
+    setSprintEditForm({ name: "", description: "", startDate: "", endDate: "" });
+  };
+  const handleDeleteSprint = (sprintId) => {
+    onDeleteSprint?.(sprintId);
+    setSprints((prev) => prev.filter((s) => s.id.toString() !== sprintId));
+    setSelectedSprintIds(selectedSprintIds.filter((id) => id !== sprintId));
+  };
   const handleTaskClick = (task) => {
     setSelectedTask(task);
     onTaskClick?.(task);
@@ -8666,37 +8707,138 @@ var SprintBoardView = ({
                     return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
                       "div",
                       {
-                        className: `p-3 rounded-lg border cursor-pointer transition-all ${isSelected ? "bg-primary/10 border-primary/30 ring-1 ring-primary/20" : canSelect ? "bg-card border-border hover:border-primary/50 hover:bg-muted/50" : "bg-muted/30 border-border/30 opacity-60"}`,
-                        onClick: () => {
-                          if (canSelect) {
-                            toggleSprintView(sprint.id.toString());
-                          } else if (isSelected) {
-                            toggleSprintView(sprint.id.toString());
-                          }
-                        },
-                        children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex items-start justify-between", children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex-1 min-w-0", children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "font-medium text-sm text-foreground truncate", children: sprint.name }),
-                            sprint.description && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "text-xs text-muted-foreground line-clamp-2 mt-1", children: sprint.description }),
-                            sprint.startDate && sprint.endDate && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex items-center gap-1 mt-2 text-xs text-muted-foreground", children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react18.Calendar, { className: "h-3 w-3" }),
-                              /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("span", { children: [
-                                new Date(sprint.startDate).toLocaleDateString(),
-                                " -",
-                                " ",
-                                new Date(sprint.endDate).toLocaleDateString()
-                              ] })
+                        className: `p-3 rounded-lg border transition-all ${isSelected ? "bg-primary/10 border-primary/30 ring-1 ring-primary/20" : canSelect ? "bg-card border-border" : "bg-muted/30 border-border/30 opacity-60"}`,
+                        children: editingSprintId === sprint.id.toString() ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "space-y-3", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+                            Input,
+                            {
+                              value: sprintEditForm.name,
+                              onChange: (e) => setSprintEditForm((prev) => ({ ...prev, name: e.target.value })),
+                              className: "text-sm",
+                              placeholder: "Sprint name"
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+                            Textarea,
+                            {
+                              value: sprintEditForm.description,
+                              onChange: (e) => setSprintEditForm((prev) => ({
+                                ...prev,
+                                description: e.target.value
+                              })),
+                              className: "text-sm min-h-[60px]",
+                              placeholder: "Sprint description"
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "grid grid-cols-2 gap-2", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("label", { className: "text-xs text-muted-foreground block mb-1", children: "Start Date" }),
+                              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+                                Input,
+                                {
+                                  type: "date",
+                                  value: sprintEditForm.startDate,
+                                  onChange: (e) => setSprintEditForm((prev) => ({
+                                    ...prev,
+                                    startDate: e.target.value
+                                  })),
+                                  className: "text-sm"
+                                }
+                              )
+                            ] }),
+                            /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("label", { className: "text-xs text-muted-foreground block mb-1", children: "End Date" }),
+                              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+                                Input,
+                                {
+                                  type: "date",
+                                  value: sprintEditForm.endDate,
+                                  onChange: (e) => setSprintEditForm((prev) => ({
+                                    ...prev,
+                                    endDate: e.target.value
+                                  })),
+                                  className: "text-sm"
+                                }
+                              )
                             ] })
                           ] }),
-                          /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "ml-2 flex items-center gap-2", children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Badge, { variant: "secondary", className: "text-xs", children: taskCount }),
-                            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-                              "div",
+                          /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex gap-2", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+                              Button,
+                              {
+                                size: "sm",
+                                onClick: handleSprintEditSave,
+                                className: "flex-1",
+                                children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react18.Check, { className: "h-3 w-3 mr-1" }),
+                                  "Save"
+                                ]
+                              }
+                            ),
+                            /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+                              Button,
                               {
-                                className: `h-4 w-4 rounded border-2 transition-all ${isSelected ? "bg-primary border-primary" : "border-muted-foreground hover:border-foreground"}`
+                                size: "sm",
+                                variant: "outline",
+                                onClick: handleSprintEditCancel,
+                                className: "flex-1",
+                                children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react18.X, { className: "h-3 w-3 mr-1" }),
+                                  "Cancel"
+                                ]
                               }
                             )
                           ] })
+                        ] }) : /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex items-start justify-between", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex-1 min-w-0", children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "font-medium text-sm text-foreground truncate", children: sprint.name }),
+                              sprint.description && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "text-xs text-muted-foreground line-clamp-2 mt-1", children: sprint.description }),
+                              sprint.startDate && sprint.endDate && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex items-center gap-1 mt-2 text-xs text-muted-foreground", children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react18.Calendar, { className: "h-3 w-3" }),
+                                /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("span", { children: [
+                                  new Date(sprint.startDate).toLocaleDateString(),
+                                  " -",
+                                  " ",
+                                  new Date(sprint.endDate).toLocaleDateString()
+                                ] })
+                              ] })
+                            ] }),
+                            /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "ml-2 flex items-center gap-1", children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Badge, { variant: "secondary", className: "text-xs", children: taskCount }),
+                              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+                                Button,
+                                {
+                                  size: "sm",
+                                  variant: "ghost",
+                                  onClick: () => handleSprintEditStart(sprint),
+                                  className: "h-6 w-6 p-0",
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react18.Edit2, { className: "h-3 w-3" })
+                                }
+                              ),
+                              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+                                Button,
+                                {
+                                  size: "sm",
+                                  variant: "ghost",
+                                  onClick: () => handleDeleteSprint(sprint.id.toString()),
+                                  className: "h-6 w-6 p-0 text-destructive hover:text-destructive",
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react18.Trash2, { className: "h-3 w-3" })
+                                }
+                              )
+                            ] })
+                          ] }),
+                          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+                            Button,
+                            {
+                              variant: isSelected ? "default" : "outline",
+                              size: "sm",
+                              className: "w-full mt-2 text-xs h-7",
+                              onClick: () => toggleSprintView(sprint.id.toString()),
+                              disabled: !isSelected && selectedSprintIds.length >= 3,
+                              children: isSelected ? "Deselect" : selectedSprintIds.length >= 3 ? "Limit reached" : "Select"
+                            }
+                          )
                         ] })
                       },
                       sprint.id
@@ -9612,17 +9754,25 @@ var import_react27 = require("react");
 var import_lucide_react20 = require("lucide-react");
 var import_jsx_runtime49 = require("react/jsx-runtime");
 var EpicsView = ({
+  projectId,
   tasks,
   epics,
   sprints,
+  colleagues = [],
   onUpdateTask,
   onTaskClick,
   onAddTaskToEpic,
   onAddEpic,
   onUpdateEpic,
-  onDeleteEpic
+  onDeleteEpic,
+  onDeleteTask,
+  onAddComment,
+  onUploadFile,
+  onDeleteFile,
+  onFileUpdate
 }) => {
   const [availableEpics, setAvailableEpics] = (0, import_react27.useState)(epics);
+  const [availableTasks, setAvailableTasks] = (0, import_react27.useState)(tasks);
   const [draggedTask, setDraggedTask] = (0, import_react27.useState)(null);
   const [editingEpic, setEditingEpic] = (0, import_react27.useState)(null);
   const [editForm, setEditForm] = (0, import_react27.useState)({});
@@ -9630,16 +9780,29 @@ var EpicsView = ({
   const [isAddEpicModalOpen, setIsAddEpicModalOpen] = (0, import_react27.useState)(false);
   const [isAddTaskModalOpen, setIsAddTaskModalOpen] = (0, import_react27.useState)(false);
   const [addTaskEpic, setAddTaskEpic] = (0, import_react27.useState)(null);
+  const [selectedTask, setSelectedTask] = (0, import_react27.useState)(null);
+  const [selectedEpicIds, setSelectedEpicIds] = useLocalStorage(
+    `epicsView_selectedEpics${projectId ? `_${projectId}` : ""}`,
+    []
+  );
+  const [isEpicSelectorOpen, setIsEpicSelectorOpen] = (0, import_react27.useState)(false);
   const heroRef = (0, import_react27.useRef)(null);
   const containerRef = (0, import_react27.useRef)(null);
   (0, import_react27.useEffect)(() => {
     setAvailableEpics(epics);
+    const validIds = new Set(epics.map((e) => e.id.toString()));
+    setSelectedEpicIds((prev) => prev.filter((id) => validIds.has(id)));
   }, [epics]);
+  (0, import_react27.useEffect)(() => {
+    setAvailableTasks(tasks);
+    if (selectedTask) {
+      setSelectedTask(tasks.find((t) => t.id === selectedTask.id) || null);
+    }
+  }, [tasks]);
   (0, import_react27.useEffect)(() => {
     const measureHeroHeight = () => {
       if (heroRef.current) {
-        const height = heroRef.current.offsetHeight;
-        setHeroHeight(height);
+        setHeroHeight(heroRef.current.offsetHeight);
       }
     };
     measureHeroHeight();
@@ -9664,6 +9827,12 @@ var EpicsView = ({
     }, 300);
     return () => clearTimeout(timer);
   }, [editingEpic]);
+  const visibleEpics = selectedEpicIds.length === 0 ? availableEpics : availableEpics.filter((e) => selectedEpicIds.includes(e.id.toString()));
+  const toggleEpicView = (epicId) => {
+    setSelectedEpicIds(
+      (prev) => prev.includes(epicId) ? prev.filter((id) => id !== epicId) : [...prev, epicId]
+    );
+  };
   const handleDragStart = (task) => {
     setDraggedTask(task);
   };
@@ -9673,14 +9842,41 @@ var EpicsView = ({
   const handleDrop = (e, epicId) => {
     e.preventDefault();
     if (draggedTask && extractId(draggedTask.epic).toString() !== epicId) {
-      onUpdateTask(draggedTask.id.toString(), {
-        epic: Number(epicId)
-      });
+      onUpdateTask(draggedTask.id.toString(), { epic: Number(epicId) });
+      setAvailableTasks(
+        (prev) => prev.map((t) => t.id === draggedTask.id ? { ...t, epic: Number(epicId) } : t)
+      );
       setDraggedTask(null);
     }
   };
   const getTasksByEpic = (epicId) => {
-    return tasks.filter((task) => extractId(task.epic).toString() === epicId);
+    return availableTasks.filter((task) => extractId(task.epic).toString() === epicId);
+  };
+  const handleTaskClick = (task) => {
+    setSelectedTask(task);
+    onTaskClick?.(task);
+  };
+  const handleUpdateTask = async (taskId, updates) => {
+    setAvailableTasks(
+      (prev) => prev.map((t) => t.id === Number(taskId) ? { ...t, ...updates } : t)
+    );
+    if (selectedTask?.id === Number(taskId)) {
+      setSelectedTask((prev) => prev ? { ...prev, ...updates } : null);
+    }
+    await onUpdateTask(taskId, updates);
+  };
+  const handleDeleteTask = async (taskId) => {
+    setAvailableTasks((prev) => prev.filter((t) => t.id !== Number(taskId)));
+    if (selectedTask?.id === Number(taskId)) {
+      setSelectedTask(null);
+    }
+    await onDeleteTask?.(taskId);
+  };
+  const handleRemoveFromEpic = (task) => {
+    onUpdateTask(task.id.toString(), { epic: null });
+    setAvailableTasks(
+      (prev) => prev.map((t) => t.id === task.id ? { ...t, epic: null } : t)
+    );
   };
   const handleEditEpic = (epic) => {
     setEditingEpic(epic.id.toString());
@@ -9689,19 +9885,15 @@ var EpicsView = ({
       description: epic.description,
       confidence: epic.confidence,
       phase: epic.phase
-      // progress: epic.progress || 0, // This is a number, not a string
     });
   };
   const handleSaveEdit = async () => {
     if (editingEpic && editForm.name) {
       await onUpdateEpic(editingEpic.toString(), editForm);
       setAvailableEpics(
-        (prev) => prev.map((epic) => {
-          if (epic.id.toString() === editingEpic) {
-            return { ...epic, ...editForm };
-          }
-          return epic;
-        })
+        (prev) => prev.map(
+          (epic) => epic.id.toString() === editingEpic ? { ...epic, ...editForm } : epic
+        )
       );
       setEditingEpic(null);
       setEditForm({});
@@ -9717,6 +9909,7 @@ var EpicsView = ({
     )) {
       await onDeleteEpic(epicId);
       setAvailableEpics((prev) => prev.filter((epic) => epic.id.toString() !== epicId));
+      setSelectedEpicIds((prev) => prev.filter((id) => id !== epicId));
     }
   };
   const getPhaseLabel = (phase) => {
@@ -9759,218 +9952,315 @@ var EpicsView = ({
           }
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "flex-1 min-h-0 mt-8", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "flex-1 min-h-0 mt-8", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
         "div",
         {
-          className: "h-full overflow-y-auto",
+          className: "h-full overflow-y-auto no-scrollbar",
           style: {
             height: heroHeight > 0 ? `calc(100vh - ${heroHeight + 120}px)` : "calc(100vh - 12rem)"
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 auto-rows-max", children: availableEpics.map((epic) => {
-            const epicTasks = getTasksByEpic(epic.id.toString());
-            const totalPoints = epicTasks.reduce(
-              (sum, task) => sum + (task.storyPoints || 0),
-              0
-            );
-            const availableHeight = heroHeight > 0 ? `calc(100vh - ${heroHeight + 200}px)` : "calc(100vh - 14rem)";
-            return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
-              Card,
-              {
-                className: `flex flex-col ${editingEpic === epic.id.toString() ? "h-auto" : ""} bg-card shadow-sm`,
-                style: {
-                  height: editingEpic === epic.id.toString() ? "auto" : availableHeight,
-                  minHeight: "400px"
-                },
-                onDragOver: handleDragOver,
-                onDrop: (e) => handleDrop(e, epic.id.toString()),
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "p-4 border-b border-border", children: editingEpic === epic.id.toString() ? (
-                    /* Edit Mode */
-                    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "space-y-4", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex items-center justify-between", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-                          Input,
-                          {
-                            value: editForm.name || "",
-                            onChange: (e) => setEditForm({ ...editForm, name: e.target.value }),
-                            placeholder: "Epic name",
-                            className: "font-semibold"
-                          }
-                        ),
-                        /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex gap-2 ml-2", children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-                            Button,
-                            {
-                              size: "sm",
-                              variant: "ghost",
-                              onClick: handleSaveEdit,
-                              className: "p-1 h-8 w-8",
-                              children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react20.Check, { className: "h-4 w-4" })
-                            }
-                          ),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "mb-4", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Card, { className: "p-3 bg-card shadow-sm", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex items-center gap-3", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("h3", { className: "font-semibold text-foreground text-sm", children: "Epics" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("p", { className: "text-xs text-muted-foreground", children: selectedEpicIds.length === 0 ? "All showing" : `${selectedEpicIds.length}/${availableEpics.length} selected` })
+                  ] }),
+                  selectedEpicIds.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "text-xs text-muted-foreground", children: "Viewing:" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "flex flex-wrap gap-1", children: visibleEpics.map((epic) => /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+                      "div",
+                      {
+                        className: "flex items-center gap-1 bg-primary/10 text-primary px-2 py-0.5 rounded text-xs",
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: `w-2 h-2 rounded-full ${epic.color}` }),
+                          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "max-w-[80px] truncate", children: epic.name }),
                           /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-                            Button,
+                            "button",
                             {
-                              size: "sm",
-                              variant: "ghost",
-                              onClick: handleCancelEdit,
-                              className: "p-1 h-8 w-8",
+                              onClick: () => toggleEpicView(epic.id.toString()),
+                              className: "ml-0.5 hover:bg-primary/20 h-8 rounded p-0.5",
                               children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react20.X, { className: "h-4 w-4" })
                             }
                           )
-                        ] })
+                        ]
+                      },
+                      epic.id
+                    )) })
+                  ] })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+                  Button,
+                  {
+                    onClick: () => setIsEpicSelectorOpen(!isEpicSelectorOpen),
+                    variant: "outline",
+                    size: "sm",
+                    className: "gap-1",
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react20.Layers, { className: "h-3 w-3" }),
+                      isEpicSelectorOpen ? "Close" : "Select"
+                    ]
+                  }
+                )
+              ] }) }),
+              isEpicSelectorOpen && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                "div",
+                {
+                  className: "fixed inset-0 bg-black/20 z-[5]",
+                  onClick: () => setIsEpicSelectorOpen(false)
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                "div",
+                {
+                  className: `fixed top-0 right-0 h-full w-80 bg-background border-l shadow-xl z-10 transition-all duration-300 ease-in-out ${isEpicSelectorOpen ? "translate-x-0 opacity-100 visible" : "translate-x-full opacity-0 invisible"}`,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Card, { className: "h-full rounded-none border-0 flex flex-col", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "p-4 border-b bg-muted/30 flex-shrink-0", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex items-center justify-between", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("h3", { className: "font-semibold text-foreground text-base", children: "Select Epics" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                          Button,
+                          {
+                            variant: "ghost",
+                            size: "sm",
+                            onClick: () => setIsEpicSelectorOpen(false),
+                            className: "h-8 w-8 p-0",
+                            children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react20.X, { className: "h-4 w-4" })
+                          }
+                        )
                       ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-                        Textarea,
+                      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("p", { className: "text-sm text-muted-foreground mt-1", children: "Filter which epics to display. Select none to show all." })
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "flex flex-col flex-1 p-4 min-h-0", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "space-y-2 flex-1 overflow-y-auto no-scrollbar", children: availableEpics.length > 0 ? availableEpics.map((epic) => {
+                      const isSelected = selectedEpicIds.includes(epic.id.toString());
+                      const taskCount = availableTasks.filter(
+                        (t) => extractId(t.epic) === epic.id
+                      ).length;
+                      return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+                        "div",
                         {
-                          value: editForm.description || "",
-                          onChange: (e) => setEditForm({ ...editForm, description: e.target.value }),
-                          placeholder: "Epic description",
-                          className: "text-sm min-h-[60px]"
-                        }
-                      ),
-                      /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "grid grid-cols-2 gap-2", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("label", { className: "text-xs text-muted-foreground", children: "Confidence" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
-                            "select",
-                            {
-                              value: editForm.confidence || epic.confidence,
-                              onChange: (e) => setEditForm({
-                                ...editForm,
-                                confidence: e.target.value
-                              }),
-                              className: "flex h-8 w-full rounded-md border border-input bg-background px-3 py-2 text-xs ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-                              children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("option", { value: "low", children: "Low" }),
-                                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("option", { value: "medium", children: "Medium" }),
-                                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("option", { value: "high", children: "High" })
-                              ]
-                            }
-                          )
-                        ] }),
-                        /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("label", { className: "text-xs text-muted-foreground", children: "Phase" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-                            "select",
-                            {
-                              value: editForm.phase?.toString() || epic.phase.toString(),
-                              onChange: (e) => setEditForm({ ...editForm, phase: parseInt(e.target.value) }),
-                              className: "flex h-8 w-full rounded-md border border-input bg-background px-3 py-2 text-xs ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-                              children: [1, 2, 3, 4, 5, 6, 7, 8, 9].map((phase) => /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("option", { value: phase.toString(), children: [
-                                "Phase ",
-                                phase
-                              ] }, phase))
-                            }
-                          )
-                        ] })
-                      ] })
-                    ] })
-                  ) : (
-                    /* Display Mode */
-                    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex items-center gap-2 mb-2", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: `w-4 h-4 rounded-full ${epic.color}` }),
-                        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("h3", { className: "font-semibold text-foreground select-none flex-1", children: epic.name }),
-                        /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex gap-1", children: [
+                          className: `p-3 rounded-lg border transition-all ${isSelected ? "bg-primary/10 border-primary/30 ring-1 ring-primary/20" : "bg-card border-border"}`,
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex items-center justify-between", children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex items-center gap-2 flex-1 min-w-0", children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: `w-3 h-3 rounded-full flex-shrink-0 ${epic.color}` }),
+                                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("p", { className: "font-medium text-sm text-foreground truncate", children: epic.name })
+                              ] }),
+                              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "ml-2 flex items-center gap-1", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Badge, { variant: "secondary", className: "text-xs", children: taskCount }) })
+                            ] }),
+                            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                              Button,
+                              {
+                                variant: isSelected ? "default" : "outline",
+                                size: "sm",
+                                className: "w-full mt-2 text-xs h-7",
+                                onClick: () => toggleEpicView(epic.id.toString()),
+                                children: isSelected ? "Deselect" : "Select"
+                              }
+                            )
+                          ]
+                        },
+                        epic.id
+                      );
+                    }) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("p", { className: "text-sm text-muted-foreground text-center py-8", children: "No epics yet. Add one to get started." }) }) })
+                  ] })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-3 auto-rows-max", children: visibleEpics.map((epic) => {
+              const epicTasks = getTasksByEpic(epic.id.toString());
+              const totalPoints = epicTasks.reduce(
+                (sum, task) => sum + (task.storyPoints || 0),
+                0
+              );
+              return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+                Card,
+                {
+                  className: "flex flex-col bg-card shadow-sm",
+                  style: { maxHeight: "420px" },
+                  onDragOver: handleDragOver,
+                  onDrop: (e) => handleDrop(e, epic.id.toString()),
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "p-3 border-b border-border flex-shrink-0", children: editingEpic === epic.id.toString() ? (
+                      /* Edit Mode */
+                      /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "space-y-3", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex items-center justify-between", children: [
                           /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-                            Button,
+                            Input,
                             {
-                              size: "sm",
-                              variant: "ghost",
-                              onClick: () => handleEditEpic(epic),
-                              className: "p-1 h-8 w-8",
-                              children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react20.Edit2, { className: "h-3 w-3" })
+                              value: editForm.name || "",
+                              onChange: (e) => setEditForm({ ...editForm, name: e.target.value }),
+                              placeholder: "Epic name",
+                              className: "font-semibold text-sm"
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-                            Button,
-                            {
-                              size: "sm",
-                              variant: "ghost",
-                              onClick: () => handleDeleteEpic(epic.id.toString()),
-                              className: "p-1 h-8 w-8 hover:bg-destructive/10 hover:text-destructive",
-                              children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react20.Trash2, { className: "h-3 w-3" })
-                            }
-                          )
-                        ] })
-                      ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex flex-wrap gap-2 mb-3", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Badge, { className: `text-xs ${getConfidenceColor(epic.confidence)}`, children: [
-                          epic.confidence,
-                          " confidence"
-                        ] }),
-                        /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Badge, { variant: "outline", className: "text-xs", children: [
-                          "Phase ",
-                          epic.phase
+                          /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex gap-1 ml-2", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                              Button,
+                              {
+                                size: "sm",
+                                variant: "ghost",
+                                onClick: handleSaveEdit,
+                                className: "p-1 h-7 w-7",
+                                children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react20.Check, { className: "h-3 w-3" })
+                              }
+                            ),
+                            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                              Button,
+                              {
+                                size: "sm",
+                                variant: "ghost",
+                                onClick: handleCancelEdit,
+                                className: "p-1 h-7 w-7",
+                                children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react20.X, { className: "h-3 w-3" })
+                              }
+                            )
+                          ] })
                         ] }),
-                        /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
-                          Badge,
+                        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                          Textarea,
                           {
-                            variant: "secondary",
-                            className: "text-xs bg-muted text-muted-foreground",
-                            children: [
-                              epicTasks.length,
-                              " tasks"
-                            ]
+                            value: editForm.description || "",
+                            onChange: (e) => setEditForm({ ...editForm, description: e.target.value }),
+                            placeholder: "Epic description",
+                            className: "text-xs min-h-[50px]"
                           }
                         ),
+                        /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "grid grid-cols-2 gap-2", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("label", { className: "text-xs text-muted-foreground", children: "Confidence" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+                              "select",
+                              {
+                                value: editForm.confidence || epic.confidence,
+                                onChange: (e) => setEditForm({
+                                  ...editForm,
+                                  confidence: e.target.value
+                                }),
+                                className: "flex h-7 w-full rounded-md border border-input bg-background px-2 py-1 text-xs ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                                children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("option", { value: "low", children: "Low" }),
+                                  /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("option", { value: "medium", children: "Medium" }),
+                                  /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("option", { value: "high", children: "High" })
+                                ]
+                              }
+                            )
+                          ] }),
+                          /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("label", { className: "text-xs text-muted-foreground", children: "Phase" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                              "select",
+                              {
+                                value: editForm.phase?.toString() || epic.phase.toString(),
+                                onChange: (e) => setEditForm({ ...editForm, phase: parseInt(e.target.value) }),
+                                className: "flex h-7 w-full rounded-md border border-input bg-background px-2 py-1 text-xs ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                                children: [1, 2, 3, 4, 5, 6, 7, 8, 9].map((phase) => /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("option", { value: phase.toString(), children: [
+                                  "Phase ",
+                                  phase
+                                ] }, phase))
+                              }
+                            )
+                          ] })
+                        ] })
+                      ] })
+                    ) : (
+                      /* Display Mode */
+                      /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex items-center gap-1.5 mb-1.5", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: `w-3 h-3 rounded-full flex-shrink-0 ${epic.color}` }),
+                          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("h3", { className: "font-semibold text-foreground text-sm select-none flex-1 truncate", children: epic.name }),
+                          /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex gap-0.5", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                              Button,
+                              {
+                                size: "sm",
+                                variant: "ghost",
+                                onClick: () => handleEditEpic(epic),
+                                className: "p-1 h-6 w-6",
+                                children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react20.Edit2, { className: "h-3 w-3" })
+                              }
+                            ),
+                            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                              Button,
+                              {
+                                size: "sm",
+                                variant: "ghost",
+                                onClick: () => handleDeleteEpic(epic.id.toString()),
+                                className: "p-1 h-6 w-6 hover:bg-destructive/10 hover:text-destructive",
+                                children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react20.Trash2, { className: "h-3 w-3" })
+                              }
+                            )
+                          ] })
+                        ] }),
+                        /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex flex-wrap gap-1 mb-2", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Badge, { className: `text-xs px-1.5 py-0 ${getConfidenceColor(epic.confidence)}`, children: epic.confidence }),
+                          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Badge, { variant: "outline", className: "text-xs px-1.5 py-0", children: getPhaseLabel(epic.phase) }),
+                          /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Badge, { variant: "secondary", className: "text-xs px-1.5 py-0 bg-muted text-muted-foreground", children: [
+                            epicTasks.length,
+                            "t \xB7 ",
+                            totalPoints,
+                            "pt"
+                          ] })
+                        ] }),
+                        epic.description && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("p", { className: "text-xs text-muted-foreground mb-2 select-none line-clamp-2", children: epic.description }),
                         /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
-                          Badge,
+                          Button,
                           {
-                            variant: "secondary",
-                            className: "text-xs bg-muted text-muted-foreground",
+                            onClick: () => {
+                              setIsAddTaskModalOpen(true);
+                              setAddTaskEpic(epic);
+                            },
+                            variant: "outline",
+                            size: "sm",
+                            className: "w-full gap-1 h-7 text-xs",
                             children: [
-                              totalPoints,
-                              " pts"
+                              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react20.Plus, { className: "h-3 w-3" }),
+                              "Add Task"
                             ]
                           }
                         )
-                      ] }),
-                      epic.description && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("p", { className: "text-sm text-muted-foreground mb-3 select-none", children: epic.description }),
-                      /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
-                        Button,
-                        {
-                          onClick: () => {
-                            setIsAddTaskModalOpen(true);
-                            setAddTaskEpic(epic);
-                          },
-                          variant: "outline",
-                          size: "sm",
-                          className: "w-full gap-2",
-                          children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react20.Plus, { className: "h-4 w-4" }),
-                            "Add Task"
-                          ]
-                        }
-                      )
-                    ] })
-                  ) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "flex-1 p-4 overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-                    "div",
-                    {
-                      className: `space-y-3 min-h-[200px] border-2 border-dashed rounded p-3 transition-colors ${draggedTask ? "border-primary bg-primary/10" : "border-border"}`,
-                      children: epicTasks.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex flex-col items-center justify-center h-32 text-muted-foreground border-2 border-dashed border-border rounded-lg", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react20.Move, { className: "h-8 w-8 mb-2" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "text-sm select-none", children: "Drop tasks here" })
-                      ] }) : epicTasks.map((task) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-                        TaskCard,
-                        {
-                          task,
-                          epic,
-                          onDragStart: handleDragStart,
-                          onTaskClick,
-                          isCompact: true
-                        },
-                        task.id
-                      ))
-                    }
-                  ) })
-                ]
-              },
-              epic.id
-            );
-          }) })
+                      ] })
+                    ) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "flex-1 p-2 overflow-y-auto no-scrollbar min-h-0", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                      "div",
+                      {
+                        className: `space-y-2 min-h-[80px] border-2 border-dashed rounded p-2 transition-colors ${draggedTask ? "border-primary bg-primary/10" : "border-border"}`,
+                        children: epicTasks.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex flex-col items-center justify-center h-16 text-muted-foreground", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react20.Move, { className: "h-5 w-5 mb-1" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "text-xs select-none", children: "Drop tasks here" })
+                        ] }) : epicTasks.map((task) => /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "relative group", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                            TaskCard,
+                            {
+                              task,
+                              epic,
+                              onDragStart: handleDragStart,
+                              onTaskClick: handleTaskClick,
+                              isCompact: true
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                            "button",
+                            {
+                              onClick: (e) => {
+                                e.stopPropagation();
+                                handleRemoveFromEpic(task);
+                              },
+                              title: "Remove from epic",
+                              className: "absolute top-1 right-1 opacity-0 group-hover:opacity-100 transition-opacity bg-background/80 hover:bg-destructive/10 hover:text-destructive rounded p-0.5",
+                              children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react20.X, { className: "h-3 w-3" })
+                            }
+                          )
+                        ] }, task.id))
+                      }
+                    ) })
+                  ]
+                },
+                epic.id
+              );
+            }) })
+          ]
         }
       ) })
     ] }),
@@ -9993,6 +10283,23 @@ var EpicsView = ({
         defaultEpicId: addTaskEpic?.id.toString() || "",
         sprints
       }
+    ),
+    selectedTask && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      TaskDetailsModal,
+      {
+        isOpen: !!selectedTask,
+        onClose: () => setSelectedTask(null),
+        initialTask: selectedTask,
+        epics: availableEpics,
+        sprints,
+        onUpdateTask: handleUpdateTask,
+        onDeleteTask: handleDeleteTask,
+        onAddComment,
+        colleagues,
+        onUploadFile,
+        onDeleteFile,
+        onFileUpdate
+      }
     )
   ] });
 };