@industry-theme/backlogmd-kanban-panel 1.0.25 → 1.0.27

package/dist/panels.bundle.js

@@ -3740,78 +3740,70 @@ const createLucideIcon = (iconName, iconNode) => {
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$o = [
+const __iconNode$m = [
   ["path", { d: "M8 2v4", key: "1cmpym" }],
   ["path", { d: "M16 2v4", key: "4m81vk" }],
   ["rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", key: "1hopcy" }],
   ["path", { d: "M3 10h18", key: "8toen8" }]
 ];
-const Calendar = createLucideIcon("calendar", __iconNode$o);
+const Calendar = createLucideIcon("calendar", __iconNode$m);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$n = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
-const Check = createLucideIcon("check", __iconNode$n);
+const __iconNode$l = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
+const Check = createLucideIcon("check", __iconNode$l);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$m = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
-const ChevronDown = createLucideIcon("chevron-down", __iconNode$m);
+const __iconNode$k = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+const ChevronDown = createLucideIcon("chevron-down", __iconNode$k);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$l = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
-const ChevronRight = createLucideIcon("chevron-right", __iconNode$l);
-/**
- * @license lucide-react v0.552.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const __iconNode$k = [
+const __iconNode$j = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["line", { x1: "12", x2: "12", y1: "8", y2: "12", key: "1pkeuh" }],
   ["line", { x1: "12", x2: "12.01", y1: "16", y2: "16", key: "4dfq90" }]
 ];
-const CircleAlert = createLucideIcon("circle-alert", __iconNode$k);
+const CircleAlert = createLucideIcon("circle-alert", __iconNode$j);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$j = [
+const __iconNode$i = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["path", { d: "m9 12 2 2 4-4", key: "dzmm74" }]
 ];
-const CircleCheck = createLucideIcon("circle-check", __iconNode$j);
+const CircleCheck = createLucideIcon("circle-check", __iconNode$i);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$i = [
+const __iconNode$h = [
   ["rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2", key: "17jyea" }],
   ["path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2", key: "zix9uf" }]
 ];
-const Copy = createLucideIcon("copy", __iconNode$i);
+const Copy = createLucideIcon("copy", __iconNode$h);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$h = [
+const __iconNode$g = [
   ["path", { d: "m15 15 6 6", key: "1s409w" }],
   ["path", { d: "m15 9 6-6", key: "ko1vev" }],
   ["path", { d: "M21 16v5h-5", key: "1ck2sf" }],
@@ -3821,26 +3813,26 @@ const __iconNode$h = [
   ["path", { d: "M3 8V3h5", key: "1ln10m" }],
   ["path", { d: "M9 9 3 3", key: "v551iv" }]
 ];
-const Expand = createLucideIcon("expand", __iconNode$h);
+const Expand = createLucideIcon("expand", __iconNode$g);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$g = [
+const __iconNode$f = [
   ["path", { d: "M15 3h6v6", key: "1q9fwt" }],
   ["path", { d: "M10 14 21 3", key: "gplh6r" }],
   ["path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6", key: "a6xqqp" }]
 ];
-const ExternalLink = createLucideIcon("external-link", __iconNode$g);
+const ExternalLink = createLucideIcon("external-link", __iconNode$f);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$f = [
+const __iconNode$e = [
   [
     "path",
     {
@@ -3853,14 +3845,14 @@ const __iconNode$f = [
   ["path", { d: "M16 13H8", key: "t4e002" }],
   ["path", { d: "M16 17H8", key: "z1uh3a" }]
 ];
-const FileText = createLucideIcon("file-text", __iconNode$f);
+const FileText = createLucideIcon("file-text", __iconNode$e);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$e = [
+const __iconNode$d = [
   [
     "path",
     {
@@ -3869,14 +3861,14 @@ const __iconNode$e = [
     }
   ]
 ];
-const Flag = createLucideIcon("flag", __iconNode$e);
+const Flag = createLucideIcon("flag", __iconNode$d);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$d = [
+const __iconNode$c = [
   ["path", { d: "M12 10v6", key: "1bos4e" }],
   ["path", { d: "M9 13h6", key: "1uhe8q" }],
   [
@@ -3887,32 +3879,20 @@ const __iconNode$d = [
     }
   ]
 ];
-const FolderPlus = createLucideIcon("folder-plus", __iconNode$d);
+const FolderPlus = createLucideIcon("folder-plus", __iconNode$c);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$c = [
+const __iconNode$b = [
   ["line", { x1: "6", x2: "6", y1: "3", y2: "15", key: "17qcm7" }],
   ["circle", { cx: "18", cy: "6", r: "3", key: "1h7g24" }],
   ["circle", { cx: "6", cy: "18", r: "3", key: "fqmcym" }],
   ["path", { d: "M18 9a9 9 0 0 1-9 9", key: "n2h4wq" }]
 ];
-const GitBranch = createLucideIcon("git-branch", __iconNode$c);
-/**
- * @license lucide-react v0.552.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const __iconNode$b = [
-  ["path", { d: "M5 3v14", key: "9nsxs2" }],
-  ["path", { d: "M12 3v8", key: "1h2ygw" }],
-  ["path", { d: "M19 3v18", key: "1sk56x" }]
-];
-const Kanban = createLucideIcon("kanban", __iconNode$b);
+const GitBranch = createLucideIcon("git-branch", __iconNode$b);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
@@ -6149,7 +6129,8 @@ function useKanbanData(options) {
 const TaskCard = ({
   task,
   onClick,
-  isDragOverlay = false
+  isDragOverlay = false,
+  isSelected = false
 }) => {
   const { theme: theme2 } = useTheme();
   const {
@@ -6176,10 +6157,10 @@ const TaskCard = ({
   };
   const style2 = {
     flexShrink: 0,
-    background: theme2.colors.surface,
+    background: isSelected ? `${theme2.colors.primary}10` : theme2.colors.surface,
     borderRadius: theme2.radii[2],
     padding: "12px",
-    border: `1px solid ${theme2.colors.border}`,
+    border: `1px solid ${isSelected ? theme2.colors.primary : theme2.colors.border}`,
     borderLeft: `4px solid ${getPriorityColor(task.priority)}`,
     cursor: isDragOverlay ? "grabbing" : "grab",
     transition: isDragging ? "none" : "all 0.2s ease",
@@ -6189,6 +6170,10 @@ const TaskCard = ({
     // When dragging, the original card stays in place but becomes a placeholder
     // The DragOverlay handles the visual movement
     opacity: isDragging ? 0.4 : 1,
+    // Selected card styling
+    ...isSelected && !isDragOverlay && {
+      boxShadow: `0 0 0 1px ${theme2.colors.primary}`
+    },
     // Overlay card styling
     ...isDragOverlay && {
       boxShadow: `0 8px 16px rgba(0, 0, 0, 0.15)`,
@@ -6328,7 +6313,8 @@ const KanbanColumn = ({
   isLoadingMore = false,
   onLoadMore,
   onTaskClick,
-  fullWidth = false
+  fullWidth = false,
+  selectedTaskId
 }) => {
   const { theme: theme2 } = useTheme();
   const { setNodeRef, isOver } = useDroppable({
@@ -6417,7 +6403,8 @@ const KanbanColumn = ({
                 TaskCard,
                 {
                   task,
-                  onClick: onTaskClick
+                  onClick: onTaskClick,
+                  isSelected: selectedTaskId === task.id
                 },
                 task.id
               )),
@@ -6741,6 +6728,7 @@ const TaskModal = ({
   onSave,
   task,
   defaultStatus = "To Do",
+  defaultMilestone = "",
   availableStatuses = ["To Do", "In Progress", "Done"],
   availableMilestones = []
 }) => {
@@ -6773,11 +6761,11 @@ const TaskModal = ({
         setPriority("medium");
         setLabels("");
         setAssignee("");
-        setMilestone("");
+        setMilestone(defaultMilestone);
       }
       setError(null);
     }
-  }, [isOpen, task, defaultStatus]);
+  }, [isOpen, task, defaultStatus, defaultMilestone]);
   const handleSubmit = async (e) => {
     e.preventDefault();
     if (!title.trim()) {
@@ -7154,7 +7142,7 @@ const TaskModal = ({
                         },
                         children: [
                           /* @__PURE__ */ jsx("option", { value: "", children: "None" }),
-                          availableMilestones.map((m) => /* @__PURE__ */ jsx("option", { value: m, children: m }, m))
+                          availableMilestones.map((m) => /* @__PURE__ */ jsx("option", { value: m.id, children: m.title }, m.id))
                         ]
                       }
                     )
@@ -7315,6 +7303,11 @@ function useMilestoneData(options) {
     try {
       const files = fileTreeSlice.data.allFiles;
       const filePaths = files.map((f) => f.path);
+      const taskPaths = filePaths.filter((p2) => p2.includes("backlog/tasks/"));
+      console.log(`[useMilestoneData] File paths: ${filePaths.length} total, ${taskPaths.length} task files`);
+      if (taskPaths.length > 0) {
+        console.log(`[useMilestoneData] Sample task paths:`, taskPaths.slice(0, 3));
+      }
       const fs = new PanelFileSystemAdapter({
         fetchFile: fetchFileContent,
         filePaths,
@@ -7337,6 +7330,11 @@ function useMilestoneData(options) {
       setCanWrite(fs.canWrite);
       await core2.initializeLazy(filePaths);
       coreRef.current = core2;
+      const taskIndex = core2.taskIndex;
+      if (taskIndex) {
+        const indexedIds = Array.from(taskIndex.keys());
+        console.log(`[useMilestoneData] Core taskIndex has ${indexedIds.length} tasks:`, indexedIds.slice(0, 5));
+      }
       console.log("[useMilestoneData] Core instance:", core2);
       console.log("[useMilestoneData] Core.listMilestones:", typeof core2.listMilestones);
       console.log("[useMilestoneData] Core prototype:", Object.getPrototypeOf(core2));
@@ -7350,7 +7348,7 @@ function useMilestoneData(options) {
       console.log(`[useMilestoneData] Loaded ${milestoneList.length} milestones`);
       const allTaskIds = milestoneList.flatMap((m) => m.tasks);
       const uniqueTaskIds = [...new Set(allTaskIds)];
-      console.log(`[useMilestoneData] Task IDs to load:`, uniqueTaskIds.slice(0, 10), `(${uniqueTaskIds.length} total)`);
+      console.log(`[useMilestoneData] Milestone task IDs to load:`, uniqueTaskIds.slice(0, 5), `(${uniqueTaskIds.length} total)`);
       let allTasks = [];
       if (uniqueTaskIds.length > 0) {
         try {
@@ -7468,326 +7466,6 @@ function useMilestoneData(options) {
     core: coreRef.current
   };
 }
-const MilestoneCard = ({
-  milestoneState,
-  onToggle,
-  onTaskClick
-}) => {
-  const { theme: theme2 } = useTheme();
-  const { milestone, tasks, isLoading, isExpanded } = milestoneState;
-  const totalTasks = milestone.tasks.length;
-  const doneTasks = tasks.filter(
-    (t) => {
-      var _a, _b;
-      return ((_a = t.status) == null ? void 0 : _a.toLowerCase().includes("done")) || ((_b = t.status) == null ? void 0 : _b.toLowerCase().includes("complete"));
-    }
-  ).length;
-  const progress = totalTasks > 0 ? Math.round(doneTasks / totalTasks * 100) : 0;
-  const showProgress = tasks.length > 0 || totalTasks === 0;
-  const getPriorityColor = (priority) => {
-    switch (priority) {
-      case "high":
-        return theme2.colors.error;
-      case "medium":
-        return theme2.colors.warning;
-      case "low":
-        return theme2.colors.info;
-      default:
-        return theme2.colors.border;
-    }
-  };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        flexShrink: 0,
-        background: theme2.colors.surface,
-        borderRadius: theme2.radii[2],
-        border: `1px solid ${theme2.colors.border}`,
-        overflow: "hidden"
-      },
-      children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            onClick: onToggle,
-            style: {
-              padding: "16px",
-              cursor: "pointer",
-              display: "flex",
-              flexDirection: "column",
-              gap: "12px",
-              transition: "background 0.2s ease"
-            },
-            onMouseEnter: (e) => {
-              e.currentTarget.style.background = theme2.colors.backgroundSecondary;
-            },
-            onMouseLeave: (e) => {
-              e.currentTarget.style.background = "transparent";
-            },
-            children: [
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "space-between",
-                    gap: "12px"
-                  },
-                  children: [
-                    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
-                      isLoading ? /* @__PURE__ */ jsx(
-                        LoaderCircle,
-                        {
-                          size: 16,
-                          color: theme2.colors.primary,
-                          style: { animation: "spin 1s linear infinite" }
-                        }
-                      ) : isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { size: 16, color: theme2.colors.textSecondary }) : /* @__PURE__ */ jsx(ChevronRight, { size: 16, color: theme2.colors.textSecondary }),
-                      /* @__PURE__ */ jsx(
-                        "h3",
-                        {
-                          style: {
-                            margin: 0,
-                            fontSize: theme2.fontSizes[3],
-                            fontWeight: theme2.fontWeights.semibold,
-                            color: theme2.colors.text
-                          },
-                          children: milestone.title
-                        }
-                      )
-                    ] }),
-                    /* @__PURE__ */ jsxs(
-                      "span",
-                      {
-                        style: {
-                          fontSize: theme2.fontSizes[1],
-                          color: theme2.colors.textSecondary,
-                          background: theme2.colors.backgroundSecondary,
-                          padding: "4px 10px",
-                          borderRadius: theme2.radii[1],
-                          fontWeight: theme2.fontWeights.medium
-                        },
-                        children: [
-                          totalTasks,
-                          " task",
-                          totalTasks !== 1 ? "s" : "",
-                          showProgress && /* @__PURE__ */ jsxs(Fragment, { children: [
-                            " · ",
-                            /* @__PURE__ */ jsxs("span", { style: { color: progress === 100 ? theme2.colors.success : theme2.colors.text }, children: [
-                              progress,
-                              "%"
-                            ] })
-                          ] })
-                        ]
-                      }
-                    )
-                  ]
-                }
-              ),
-              !isExpanded && milestone.description && /* @__PURE__ */ jsx(
-                "p",
-                {
-                  style: {
-                    margin: 0,
-                    fontSize: theme2.fontSizes[1],
-                    color: theme2.colors.textSecondary,
-                    overflow: "hidden",
-                    textOverflow: "ellipsis",
-                    display: "-webkit-box",
-                    WebkitLineClamp: 2,
-                    WebkitBoxOrient: "vertical",
-                    lineHeight: "1.4"
-                  },
-                  children: milestone.description
-                }
-              )
-            ]
-          }
-        ),
-        isExpanded && /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              borderTop: `1px solid ${theme2.colors.border}`,
-              padding: "16px",
-              display: "flex",
-              flexDirection: "column",
-              gap: "12px"
-            },
-            children: [
-              milestone.description && /* @__PURE__ */ jsx(
-                "p",
-                {
-                  style: {
-                    margin: 0,
-                    fontSize: theme2.fontSizes[1],
-                    color: theme2.colors.textSecondary,
-                    lineHeight: "1.5"
-                  },
-                  children: milestone.description
-                }
-              ),
-              tasks.length > 0 && /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    gap: "12px",
-                    flexWrap: "wrap",
-                    fontSize: theme2.fontSizes[1]
-                  },
-                  children: [
-                    /* @__PURE__ */ jsxs("span", { style: { color: theme2.colors.success }, children: [
-                      doneTasks,
-                      " done"
-                    ] }),
-                    /* @__PURE__ */ jsxs("span", { style: { color: theme2.colors.textSecondary }, children: [
-                      totalTasks - doneTasks,
-                      " remaining"
-                    ] })
-                  ]
-                }
-              ),
-              isLoading ? /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    padding: "24px",
-                    color: theme2.colors.textSecondary,
-                    gap: "8px"
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx(
-                      LoaderCircle,
-                      {
-                        size: 16,
-                        style: { animation: "spin 1s linear infinite" }
-                      }
-                    ),
-                    "Loading tasks..."
-                  ]
-                }
-              ) : tasks.length > 0 ? /* @__PURE__ */ jsx(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    flexDirection: "column",
-                    gap: "8px",
-                    maxHeight: "300px",
-                    overflowY: "auto",
-                    paddingRight: "4px"
-                  },
-                  children: tasks.map((task) => {
-                    var _a;
-                    return /* @__PURE__ */ jsxs(
-                      "div",
-                      {
-                        onClick: (e) => {
-                          e.stopPropagation();
-                          onTaskClick == null ? void 0 : onTaskClick(task);
-                        },
-                        style: {
-                          background: theme2.colors.background,
-                          borderRadius: theme2.radii[1],
-                          padding: "10px 12px",
-                          border: `1px solid ${theme2.colors.border}`,
-                          borderLeft: `3px solid ${getPriorityColor(task.priority)}`,
-                          cursor: onTaskClick ? "pointer" : "default",
-                          transition: "all 0.2s ease",
-                          display: "flex",
-                          alignItems: "center",
-                          justifyContent: "space-between",
-                          gap: "12px"
-                        },
-                        onMouseEnter: (e) => {
-                          if (onTaskClick) {
-                            e.currentTarget.style.background = theme2.colors.backgroundSecondary;
-                          }
-                        },
-                        onMouseLeave: (e) => {
-                          e.currentTarget.style.background = theme2.colors.background;
-                        },
-                        children: [
-                          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px", flex: 1, minWidth: 0 }, children: [
-                            /* @__PURE__ */ jsxs(
-                              "span",
-                              {
-                                style: {
-                                  fontFamily: theme2.fonts.monospace,
-                                  fontSize: theme2.fontSizes[0],
-                                  color: theme2.colors.textMuted,
-                                  flexShrink: 0
-                                },
-                                children: [
-                                  "#",
-                                  task.id
-                                ]
-                              }
-                            ),
-                            /* @__PURE__ */ jsx(
-                              "span",
-                              {
-                                style: {
-                                  fontSize: theme2.fontSizes[1],
-                                  color: theme2.colors.text,
-                                  overflow: "hidden",
-                                  textOverflow: "ellipsis",
-                                  whiteSpace: "nowrap"
-                                },
-                                children: task.title
-                              }
-                            )
-                          ] }),
-                          /* @__PURE__ */ jsx(
-                            "span",
-                            {
-                              style: {
-                                fontSize: theme2.fontSizes[0],
-                                color: ((_a = task.status) == null ? void 0 : _a.toLowerCase().includes("done")) ? theme2.colors.success : theme2.colors.textSecondary,
-                                background: theme2.colors.backgroundSecondary,
-                                padding: "2px 8px",
-                                borderRadius: theme2.radii[1],
-                                flexShrink: 0
-                              },
-                              children: task.status
-                            }
-                          )
-                        ]
-                      },
-                      task.id
-                    );
-                  })
-                }
-              ) : totalTasks === 0 ? /* @__PURE__ */ jsx(
-                "div",
-                {
-                  style: {
-                    padding: "16px",
-                    textAlign: "center",
-                    color: theme2.colors.textMuted,
-                    fontSize: theme2.fontSizes[1]
-                  },
-                  children: "No tasks in this milestone"
-                }
-              ) : null
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx("style", { children: `
-          @keyframes spin {
-            to { transform: rotate(360deg); }
-          }
-        ` })
-      ]
-    }
-  );
-};
 const MilestoneModal = ({
   isOpen,
   onClose,
@@ -8096,7 +7774,7 @@ const KanbanPanel = ({
 }) => {
   var _a, _b;
   const { theme: theme2 } = useTheme();
-  const [_selectedTask, setSelectedTask] = useState(null);
+  const [selectedTaskId, setSelectedTaskId] = useState(null);
   const [selectedTab, setSelectedTab] = useState("todo");
   const [isNarrowView, setIsNarrowView] = useState(false);
   const containerRef = useRef(null);
@@ -8107,6 +7785,8 @@ const KanbanPanel = ({
   const [isMilestoneModalOpen, setIsMilestoneModalOpen] = useState(false);
   const [editingMilestone, setEditingMilestone] = useState(void 0);
   const [isRefreshingMilestones, setIsRefreshingMilestones] = useState(false);
+  const [selectedMilestoneId, setSelectedMilestoneId] = useState(null);
+  const [milestoneStatusFilter, setMilestoneStatusFilter] = useState(null);
   const [searchQuery, setSearchQuery] = useState("");
   const sensors = useSensors(
     useSensor(PointerSensor, {
@@ -8132,6 +7812,16 @@ const KanbanPanel = ({
     observer.observe(container);
     return () => observer.disconnect();
   }, []);
+  useEffect(() => {
+    if (!events2) return;
+    const unsubscribe = events2.on("task:selected", (event) => {
+      const payload = event.payload;
+      if (payload == null ? void 0 : payload.taskId) {
+        setSelectedTaskId(payload.taskId);
+      }
+    });
+    return unsubscribe;
+  }, [events2]);
   const {
     statusColumns,
     tasksByStatus,
@@ -8153,7 +7843,6 @@ const KanbanPanel = ({
     milestones,
     isLoading: isMilestonesLoading,
     error: milestonesError,
-    toggleMilestone,
     refreshData: refreshMilestones,
     canWrite: canWriteMilestones,
     core: milestoneCore
@@ -8207,7 +7896,7 @@ const KanbanPanel = ({
     }
   }, [getTaskById, moveTaskOptimistic]);
   const handleTaskClick = (task) => {
-    setSelectedTask(task);
+    setSelectedTaskId(task.id);
     if (events2) {
       events2.emit({
         type: "task:selected",
@@ -8328,7 +8017,7 @@ const KanbanPanel = ({
     }
   };
   const handleMilestoneTaskClick = (task) => {
-    setSelectedTask(task);
+    setSelectedTaskId(task.id);
     if (events2) {
       events2.emit({
         type: "task:selected",
@@ -8374,7 +8063,6 @@ const KanbanPanel = ({
             },
             children: [
               /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [
-                /* @__PURE__ */ jsx(Kanban, { size: 24, color: theme2.colors.primary }),
                 /* @__PURE__ */ jsx(
                   "h2",
                   {
@@ -8383,7 +8071,21 @@ const KanbanPanel = ({
                       fontSize: theme2.fontSizes[4],
                       color: theme2.colors.text
                     },
-                    children: "Kanban Board"
+                    children: /* @__PURE__ */ jsx(
+                      "a",
+                      {
+                        href: "https://github.com/MrLesk/Backlog.md",
+                        target: "_blank",
+                        rel: "noopener noreferrer",
+                        style: {
+                          color: "inherit",
+                          textDecoration: "none"
+                        },
+                        onMouseEnter: (e) => e.currentTarget.style.textDecoration = "underline",
+                        onMouseLeave: (e) => e.currentTarget.style.textDecoration = "none",
+                        children: "Backlog.md"
+                      }
+                    )
                   }
                 ),
                 isBacklogProject && /* @__PURE__ */ jsxs(
@@ -8559,6 +8261,33 @@ const KanbanPanel = ({
                   }
                 )
               ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                canWrite && /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    onClick: handleOpenNewTask,
+                    disabled: !selectedMilestoneId,
+                    title: selectedMilestoneId ? "Add task to milestone" : "Select a milestone first",
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "6px",
+                      background: selectedMilestoneId ? theme2.colors.primary : theme2.colors.backgroundSecondary,
+                      color: selectedMilestoneId ? theme2.colors.textOnPrimary : theme2.colors.textMuted,
+                      border: selectedMilestoneId ? "none" : `1px solid ${theme2.colors.border}`,
+                      borderRadius: theme2.radii[2],
+                      padding: "6px 12px",
+                      fontSize: theme2.fontSizes[1],
+                      fontWeight: theme2.fontWeights.medium,
+                      cursor: selectedMilestoneId ? "pointer" : "not-allowed",
+                      opacity: selectedMilestoneId ? 1 : 0.6,
+                      transition: "all 0.2s ease"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(Plus, { size: 14 }),
+                      "Add Task"
+                    ]
+                  }
+                ),
                 canWriteMilestones && /* @__PURE__ */ jsxs(
                   "button",
                   {
@@ -8752,7 +8481,8 @@ const KanbanPanel = ({
                                   status: STATUS_DISPLAY_LABELS[status],
                                   tasks: columnTasks,
                                   onTaskClick: handleTaskClick,
-                                  fullWidth: isNarrowView
+                                  fullWidth: isNarrowView,
+                                  selectedTaskId
                                 },
                                 status
                               );
@@ -8780,14 +8510,14 @@ const KanbanPanel = ({
             ]
           }
         ) : (
-          /* Milestones View */
+          /* Milestones View - Two Column Layout */
           /* @__PURE__ */ jsx(
             "div",
             {
               style: {
                 flex: 1,
                 display: "flex",
-                flexDirection: "column",
+                gap: "16px",
                 overflow: "hidden"
               },
               children: isMilestonesLoading ? /* @__PURE__ */ jsx(
@@ -8822,30 +8552,352 @@ const KanbanPanel = ({
                     ] })
                   ]
                 }
-              ) : /* @__PURE__ */ jsx(
-                "div",
-                {
-                  style: {
-                    flex: 1,
-                    overflowY: "auto",
-                    overflowX: "hidden",
-                    display: "flex",
-                    flexDirection: "column",
-                    gap: "12px",
-                    paddingRight: "4px",
-                    marginRight: "-4px"
-                  },
-                  children: milestones.map((milestoneState) => /* @__PURE__ */ jsx(
-                    MilestoneCard,
-                    {
-                      milestoneState,
-                      onToggle: () => toggleMilestone(milestoneState.milestone.id),
-                      onTaskClick: handleMilestoneTaskClick
+              ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      flex: 1,
+                      minWidth: 0,
+                      display: "flex",
+                      flexDirection: "column",
+                      overflow: "hidden"
                     },
-                    milestoneState.milestone.id
-                  ))
-                }
-              )
+                    children: /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        style: {
+                          flex: 1,
+                          overflowY: "auto",
+                          display: "flex",
+                          flexDirection: "column",
+                          gap: "8px",
+                          paddingRight: "4px"
+                        },
+                        children: milestones.map((milestoneState) => {
+                          const isSelected = selectedMilestoneId === milestoneState.milestone.id;
+                          const totalTasks = milestoneState.milestone.tasks.length;
+                          const doneTasks = milestoneState.tasks.filter(
+                            (t) => {
+                              var _a2, _b2;
+                              return ((_a2 = t.status) == null ? void 0 : _a2.toLowerCase().includes("done")) || ((_b2 = t.status) == null ? void 0 : _b2.toLowerCase().includes("complete"));
+                            }
+                          ).length;
+                          const progress = totalTasks > 0 ? Math.round(doneTasks / totalTasks * 100) : 0;
+                          const showProgress = milestoneState.tasks.length > 0 || totalTasks === 0;
+                          return /* @__PURE__ */ jsxs(
+                            "div",
+                            {
+                              onClick: () => {
+                                setSelectedMilestoneId(milestoneState.milestone.id);
+                                setMilestoneStatusFilter(null);
+                              },
+                              style: {
+                                padding: "12px 16px",
+                                background: isSelected ? theme2.colors.primary + "15" : theme2.colors.surface,
+                                border: `1px solid ${isSelected ? theme2.colors.primary : theme2.colors.border}`,
+                                borderRadius: theme2.radii[2],
+                                cursor: "pointer",
+                                transition: "all 0.2s ease"
+                              },
+                              children: [
+                                /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: "12px" }, children: [
+                                  /* @__PURE__ */ jsx(
+                                    "h3",
+                                    {
+                                      style: {
+                                        margin: 0,
+                                        fontSize: theme2.fontSizes[2],
+                                        fontWeight: theme2.fontWeights.semibold,
+                                        color: theme2.colors.text,
+                                        overflow: "hidden",
+                                        textOverflow: "ellipsis",
+                                        whiteSpace: "nowrap"
+                                      },
+                                      children: milestoneState.milestone.title
+                                    }
+                                  ),
+                                  /* @__PURE__ */ jsxs(
+                                    "span",
+                                    {
+                                      style: {
+                                        fontSize: theme2.fontSizes[1],
+                                        color: theme2.colors.textSecondary,
+                                        background: theme2.colors.backgroundSecondary,
+                                        padding: "2px 8px",
+                                        borderRadius: theme2.radii[1],
+                                        flexShrink: 0
+                                      },
+                                      children: [
+                                        totalTasks,
+                                        " task",
+                                        totalTasks !== 1 ? "s" : "",
+                                        showProgress && /* @__PURE__ */ jsxs(Fragment, { children: [
+                                          " · ",
+                                          /* @__PURE__ */ jsxs("span", { style: { color: progress === 100 ? theme2.colors.success : theme2.colors.text }, children: [
+                                            progress,
+                                            "%"
+                                          ] })
+                                        ] })
+                                      ]
+                                    }
+                                  )
+                                ] }),
+                                isSelected && milestoneState.milestone.description && /* @__PURE__ */ jsx(
+                                  "p",
+                                  {
+                                    style: {
+                                      margin: "8px 0 0 0",
+                                      fontSize: theme2.fontSizes[1],
+                                      color: theme2.colors.textSecondary,
+                                      lineHeight: "1.4"
+                                    },
+                                    children: milestoneState.milestone.description
+                                  }
+                                )
+                              ]
+                            },
+                            milestoneState.milestone.id
+                          );
+                        })
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      flex: 1,
+                      minWidth: 0,
+                      display: "flex",
+                      flexDirection: "column",
+                      background: theme2.colors.surface,
+                      borderRadius: theme2.radii[2],
+                      border: `1px solid ${theme2.colors.border}`,
+                      overflow: "hidden"
+                    },
+                    children: (() => {
+                      const selectedMilestone = milestones.find((m) => m.milestone.id === selectedMilestoneId);
+                      if (!selectedMilestone) {
+                        return /* @__PURE__ */ jsxs(
+                          "div",
+                          {
+                            style: {
+                              flex: 1,
+                              display: "flex",
+                              flexDirection: "column",
+                              alignItems: "center",
+                              justifyContent: "center",
+                              gap: "8px",
+                              color: theme2.colors.textMuted,
+                              padding: "24px"
+                            },
+                            children: [
+                              /* @__PURE__ */ jsx(Milestone, { size: 32, color: theme2.colors.border }),
+                              /* @__PURE__ */ jsx("span", { style: { fontSize: theme2.fontSizes[1] }, children: "Select a milestone to view tasks" })
+                            ]
+                          }
+                        );
+                      }
+                      const tasks = selectedMilestone.tasks;
+                      const getPriorityColor = (priority) => {
+                        switch (priority) {
+                          case "high":
+                            return theme2.colors.error;
+                          case "medium":
+                            return theme2.colors.warning;
+                          case "low":
+                            return theme2.colors.info;
+                          default:
+                            return theme2.colors.border;
+                        }
+                      };
+                      const todoCount = tasks.filter((t) => t.status === "To Do").length;
+                      const inProgressCount = tasks.filter((t) => t.status === "In Progress").length;
+                      const doneCount = tasks.filter(
+                        (t) => {
+                          var _a2, _b2;
+                          return ((_a2 = t.status) == null ? void 0 : _a2.toLowerCase().includes("done")) || ((_b2 = t.status) == null ? void 0 : _b2.toLowerCase().includes("complete"));
+                        }
+                      ).length;
+                      const filteredTasks = milestoneStatusFilter ? tasks.filter((t) => {
+                        var _a2, _b2;
+                        if (milestoneStatusFilter === "Done") {
+                          return ((_a2 = t.status) == null ? void 0 : _a2.toLowerCase().includes("done")) || ((_b2 = t.status) == null ? void 0 : _b2.toLowerCase().includes("complete"));
+                        }
+                        return t.status === milestoneStatusFilter;
+                      }) : tasks;
+                      const getFilterButtonStyle = (status, count, color2) => {
+                        const isActive = milestoneStatusFilter === status;
+                        return {
+                          flex: 1,
+                          padding: "8px 12px",
+                          border: "none",
+                          borderBottom: isActive ? `2px solid ${color2}` : "2px solid transparent",
+                          background: isActive ? `${color2}15` : "transparent",
+                          color: isActive ? color2 : theme2.colors.textSecondary,
+                          fontSize: theme2.fontSizes[1],
+                          fontWeight: isActive ? theme2.fontWeights.medium : theme2.fontWeights.body,
+                          cursor: count > 0 ? "pointer" : "default",
+                          transition: "all 0.2s ease",
+                          textAlign: "center",
+                          opacity: count === 0 ? 0.5 : 1
+                        };
+                      };
+                      const handleFilterClick = (status, count) => {
+                        if (count === 0) return;
+                        setMilestoneStatusFilter(milestoneStatusFilter === status ? null : status);
+                      };
+                      return /* @__PURE__ */ jsxs(Fragment, { children: [
+                        /* @__PURE__ */ jsxs(
+                          "div",
+                          {
+                            style: {
+                              borderBottom: `1px solid ${theme2.colors.border}`,
+                              background: theme2.colors.backgroundSecondary,
+                              display: "flex"
+                            },
+                            children: [
+                              /* @__PURE__ */ jsxs(
+                                "button",
+                                {
+                                  onClick: () => handleFilterClick("To Do", todoCount),
+                                  style: getFilterButtonStyle("To Do", todoCount, theme2.colors.textSecondary),
+                                  children: [
+                                    todoCount,
+                                    " To Do"
+                                  ]
+                                }
+                              ),
+                              /* @__PURE__ */ jsxs(
+                                "button",
+                                {
+                                  onClick: () => handleFilterClick("In Progress", inProgressCount),
+                                  style: getFilterButtonStyle("In Progress", inProgressCount, theme2.colors.warning),
+                                  children: [
+                                    inProgressCount,
+                                    " In Progress"
+                                  ]
+                                }
+                              ),
+                              /* @__PURE__ */ jsxs(
+                                "button",
+                                {
+                                  onClick: () => handleFilterClick("Done", doneCount),
+                                  style: getFilterButtonStyle("Done", doneCount, theme2.colors.success),
+                                  children: [
+                                    doneCount,
+                                    " Done"
+                                  ]
+                                }
+                              )
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            style: {
+                              flex: 1,
+                              overflowY: "auto",
+                              padding: "12px",
+                              display: "flex",
+                              flexDirection: "column",
+                              gap: "8px"
+                            },
+                            children: filteredTasks.length === 0 ? /* @__PURE__ */ jsx(
+                              "div",
+                              {
+                                style: {
+                                  flex: 1,
+                                  display: "flex",
+                                  alignItems: "center",
+                                  justifyContent: "center",
+                                  color: theme2.colors.textMuted,
+                                  fontSize: theme2.fontSizes[1]
+                                },
+                                children: milestoneStatusFilter ? `No ${milestoneStatusFilter.toLowerCase()} tasks` : "No tasks in this milestone"
+                              }
+                            ) : filteredTasks.map((task) => {
+                              var _a2;
+                              return /* @__PURE__ */ jsxs(
+                                "div",
+                                {
+                                  onClick: () => handleMilestoneTaskClick(task),
+                                  style: {
+                                    padding: "10px 12px",
+                                    background: selectedTaskId === task.id ? `${theme2.colors.primary}10` : theme2.colors.background,
+                                    border: `1px solid ${selectedTaskId === task.id ? theme2.colors.primary : theme2.colors.border}`,
+                                    borderLeft: `3px solid ${getPriorityColor(task.priority)}`,
+                                    borderRadius: theme2.radii[1],
+                                    cursor: "pointer",
+                                    transition: "all 0.2s ease",
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "space-between",
+                                    gap: "12px",
+                                    ...selectedTaskId === task.id && {
+                                      boxShadow: `0 0 0 1px ${theme2.colors.primary}`
+                                    }
+                                  },
+                                  children: [
+                                    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px", flex: 1, minWidth: 0 }, children: [
+                                      /* @__PURE__ */ jsxs(
+                                        "span",
+                                        {
+                                          style: {
+                                            fontFamily: theme2.fonts.monospace,
+                                            fontSize: theme2.fontSizes[0],
+                                            color: theme2.colors.textMuted,
+                                            flexShrink: 0
+                                          },
+                                          children: [
+                                            "#",
+                                            task.id
+                                          ]
+                                        }
+                                      ),
+                                      /* @__PURE__ */ jsx(
+                                        "span",
+                                        {
+                                          style: {
+                                            fontSize: theme2.fontSizes[1],
+                                            color: theme2.colors.text,
+                                            overflow: "hidden",
+                                            textOverflow: "ellipsis",
+                                            whiteSpace: "nowrap"
+                                          },
+                                          children: task.title
+                                        }
+                                      )
+                                    ] }),
+                                    /* @__PURE__ */ jsx(
+                                      "span",
+                                      {
+                                        style: {
+                                          fontSize: theme2.fontSizes[0],
+                                          color: ((_a2 = task.status) == null ? void 0 : _a2.toLowerCase().includes("done")) ? theme2.colors.success : theme2.colors.textSecondary,
+                                          background: theme2.colors.backgroundSecondary,
+                                          padding: "2px 8px",
+                                          borderRadius: theme2.radii[1],
+                                          flexShrink: 0
+                                        },
+                                        children: task.status
+                                      }
+                                    )
+                                  ]
+                                },
+                                task.id
+                              );
+                            })
+                          }
+                        )
+                      ] });
+                    })()
+                  }
+                )
+              ] })
             }
           )
         ),
@@ -8857,7 +8909,9 @@ const KanbanPanel = ({
             onSave: handleSaveTask,
             task: editingTask,
             defaultStatus: "To Do",
-            availableStatuses
+            defaultMilestone: viewMode === "milestones" ? selectedMilestoneId || "" : "",
+            availableStatuses,
+            availableMilestones: milestones.map((m) => ({ id: m.milestone.id, title: m.milestone.title }))
           }
         ),
         /* @__PURE__ */ jsx(