@industry-theme/backlogmd-kanban-panel 1.0.9 → 1.0.11

package/dist/panels.bundle.js

@@ -3,7 +3,7 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import * as React2 from "react";
-import React2__default, { forwardRef, createElement, createContext, useState, useEffect, useContext, useRef, useCallback, useImperativeHandle, useMemo, useLayoutEffect } from "react";
+import React2__default, { forwardRef, createElement, createContext, useState, useEffect, useContext, useRef, useCallback, useLayoutEffect, useImperativeHandle, useMemo } from "react";
 import { createPortal } from "react-dom";
 /**
  * @license lucide-react v0.552.0 - ISC
@@ -110,81 +110,89 @@ 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$j = [
+const __iconNode$m = [
   ["path", { d: "m12 19-7-7 7-7", key: "1l729n" }],
   ["path", { d: "M19 12H5", key: "x3x0zl" }]
 ];
-const ArrowLeft = createLucideIcon("arrow-left", __iconNode$j);
+const ArrowLeft = createLucideIcon("arrow-left", __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$i = [
+const __iconNode$l = [
   ["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$i);
+const Calendar = createLucideIcon("calendar", __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$h = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
-const Check = createLucideIcon("check", __iconNode$h);
+const __iconNode$k = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
+const Check = createLucideIcon("check", __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$g = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
-const ChevronDown = createLucideIcon("chevron-down", __iconNode$g);
+const __iconNode$j = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+const ChevronDown = createLucideIcon("chevron-down", __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$f = [
+const __iconNode$i = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
+const ChevronRight = createLucideIcon("chevron-right", __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$h = [
   ["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$f);
+const CircleAlert = createLucideIcon("circle-alert", __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$e = [
+const __iconNode$g = [
   ["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$e);
+const CircleCheck = createLucideIcon("circle-check", __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$d = [
+const __iconNode$f = [
   ["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$d);
+const Copy = createLucideIcon("copy", __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$c = [
+const __iconNode$e = [
   ["path", { d: "m15 15 6 6", key: "1s409w" }],
   ["path", { d: "m15 9 6-6", key: "ko1vev" }],
   ["path", { d: "M21 16v5h-5", key: "1ck2sf" }],
@@ -194,26 +202,26 @@ const __iconNode$c = [
   ["path", { d: "M3 8V3h5", key: "1ln10m" }],
   ["path", { d: "M9 9 3 3", key: "v551iv" }]
 ];
-const Expand = createLucideIcon("expand", __iconNode$c);
+const Expand = createLucideIcon("expand", __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$b = [
+const __iconNode$d = [
   ["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$b);
+const ExternalLink = createLucideIcon("external-link", __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$a = [
+const __iconNode$c = [
   [
     "path",
     {
@@ -226,14 +234,14 @@ const __iconNode$a = [
   ["path", { d: "M16 13H8", key: "t4e002" }],
   ["path", { d: "M16 17H8", key: "z1uh3a" }]
 ];
-const FileText = createLucideIcon("file-text", __iconNode$a);
+const FileText = createLucideIcon("file-text", __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$9 = [
+const __iconNode$b = [
   [
     "path",
     {
@@ -242,14 +250,14 @@ const __iconNode$9 = [
     }
   ]
 ];
-const Flag = createLucideIcon("flag", __iconNode$9);
+const Flag = createLucideIcon("flag", __iconNode$b);
 /**
  * @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$8 = [
+const __iconNode$a = [
   ["path", { d: "M12 10v6", key: "1bos4e" }],
   ["path", { d: "M9 13h6", key: "1uhe8q" }],
   [
@@ -260,70 +268,70 @@ const __iconNode$8 = [
     }
   ]
 ];
-const FolderPlus = createLucideIcon("folder-plus", __iconNode$8);
+const FolderPlus = createLucideIcon("folder-plus", __iconNode$a);
 /**
  * @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$7 = [
+const __iconNode$9 = [
   ["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$7);
+const GitBranch = createLucideIcon("git-branch", __iconNode$9);
 /**
  * @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$6 = [
+const __iconNode$8 = [
   ["path", { d: "M5 3v14", key: "9nsxs2" }],
   ["path", { d: "M12 3v8", key: "1h2ygw" }],
   ["path", { d: "M19 3v18", key: "1sk56x" }]
 ];
-const Kanban = createLucideIcon("kanban", __iconNode$6);
+const Kanban = createLucideIcon("kanban", __iconNode$8);
 /**
  * @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$5 = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]];
-const LoaderCircle = createLucideIcon("loader-circle", __iconNode$5);
+const __iconNode$7 = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]];
+const LoaderCircle = createLucideIcon("loader-circle", __iconNode$7);
 /**
  * @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$4 = [
+const __iconNode$6 = [
   ["rect", { width: "20", height: "14", x: "2", y: "3", rx: "2", key: "48i651" }],
   ["line", { x1: "8", x2: "16", y1: "21", y2: "21", key: "1svkeh" }],
   ["line", { x1: "12", x2: "12", y1: "17", y2: "21", key: "vw1qmm" }]
 ];
-const Monitor = createLucideIcon("monitor", __iconNode$4);
+const Monitor = createLucideIcon("monitor", __iconNode$6);
 /**
  * @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$3 = [
+const __iconNode$5 = [
   ["path", { d: "M18 8L22 12L18 16", key: "1r0oui" }],
   ["path", { d: "M2 12H22", key: "1m8cig" }]
 ];
-const MoveRight = createLucideIcon("move-right", __iconNode$3);
+const MoveRight = createLucideIcon("move-right", __iconNode$5);
 /**
  * @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$2 = [
+const __iconNode$4 = [
   [
     "path",
     {
@@ -332,14 +340,27 @@ const __iconNode$2 = [
     }
   ]
 ];
-const Play = createLucideIcon("play", __iconNode$2);
+const Play = createLucideIcon("play", __iconNode$4);
 /**
  * @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$1 = [
+const __iconNode$3 = [
+  ["path", { d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8", key: "v9h5vc" }],
+  ["path", { d: "M21 3v5h-5", key: "1q7to0" }],
+  ["path", { d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16", key: "3uifl3" }],
+  ["path", { d: "M8 16H3v5", key: "1cv678" }]
+];
+const RefreshCw = createLucideIcon("refresh-cw", __iconNode$3);
+/**
+ * @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$2 = [
   [
     "path",
     {
@@ -349,7 +370,19 @@ const __iconNode$1 = [
   ],
   ["circle", { cx: "7.5", cy: "7.5", r: ".5", fill: "currentColor", key: "kqv944" }]
 ];
-const Tag = createLucideIcon("tag", __iconNode$1);
+const Tag = createLucideIcon("tag", __iconNode$2);
+/**
+ * @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$1 = [
+  ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
+  ["circle", { cx: "12", cy: "12", r: "6", key: "1vlfrh" }],
+  ["circle", { cx: "12", cy: "12", r: "2", key: "1c9p78" }]
+];
+const Target = createLucideIcon("target", __iconNode$1);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
@@ -601,6 +634,77 @@ function parseTaskMarkdown(content2, filePath) {
     filePath
   };
 }
+function serializeTaskMarkdown(task) {
+  const lines = [];
+  lines.push("---");
+  lines.push(`status: ${task.status}`);
+  if (task.priority) {
+    lines.push(`priority: ${task.priority}`);
+  }
+  if (task.assignee && task.assignee.length > 0) {
+    lines.push(`assignee: [${task.assignee.join(", ")}]`);
+  }
+  if (task.reporter) {
+    lines.push(`reporter: ${task.reporter}`);
+  }
+  if (task.labels && task.labels.length > 0) {
+    lines.push(`labels: [${task.labels.join(", ")}]`);
+  }
+  if (task.milestone) {
+    lines.push(`milestone: ${task.milestone}`);
+  }
+  if (task.dependencies && task.dependencies.length > 0) {
+    lines.push(`dependencies: [${task.dependencies.join(", ")}]`);
+  }
+  if (task.parentTaskId) {
+    lines.push(`parentTaskId: ${task.parentTaskId}`);
+  }
+  if (task.subtasks && task.subtasks.length > 0) {
+    lines.push(`subtasks: [${task.subtasks.join(", ")}]`);
+  }
+  if (task.branch) {
+    lines.push(`branch: ${task.branch}`);
+  }
+  if (task.ordinal !== void 0) {
+    lines.push(`ordinal: ${task.ordinal}`);
+  }
+  if (task.createdDate) {
+    lines.push(`createdDate: ${task.createdDate}`);
+  }
+  if (task.updatedDate) {
+    lines.push(`updatedDate: ${task.updatedDate}`);
+  }
+  lines.push("---");
+  lines.push("");
+  lines.push(`# ${task.title}`);
+  lines.push("");
+  if (task.description) {
+    lines.push(task.description);
+    lines.push("");
+  }
+  if (task.acceptanceCriteriaItems && task.acceptanceCriteriaItems.length > 0) {
+    lines.push("## Acceptance Criteria");
+    lines.push("");
+    for (const criterion of task.acceptanceCriteriaItems) {
+      const checkbox = criterion.checked ? "[x]" : "[ ]";
+      lines.push(`- ${checkbox} ${criterion.text}`);
+    }
+    lines.push("");
+  }
+  if (task.implementationPlan) {
+    lines.push("## Implementation Plan");
+    lines.push("");
+    lines.push(task.implementationPlan);
+    lines.push("");
+  }
+  if (task.implementationNotes) {
+    lines.push("## Implementation Notes");
+    lines.push("");
+    lines.push(task.implementationNotes);
+    lines.push("");
+  }
+  return lines.join("\n");
+}
 function parseMarkdownContent(content2) {
   let frontmatter = {};
   let remaining = content2;
@@ -717,6 +821,79 @@ function extractTaskIndexFromPath(filePath) {
 function escapeRegex(str) {
   return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
+function extractSection(content2, sectionTitle) {
+  var _a;
+  const src = content2.replace(/\r\n/g, "\n");
+  const regex2 = new RegExp(`## ${sectionTitle}\\s*\\n([\\s\\S]*?)(?=\\n## |$)`, "i");
+  const match = src.match(regex2);
+  return (_a = match == null ? void 0 : match[1]) == null ? void 0 : _a.trim();
+}
+function parseMilestoneFrontmatter(raw2) {
+  const result = {};
+  for (const line of raw2.split("\n")) {
+    const match = line.match(/^(\w+):\s*(.+)$/);
+    if (!match)
+      continue;
+    const [, key, value] = match;
+    let cleanValue = value.trim();
+    if (cleanValue.startsWith('"') && cleanValue.endsWith('"') || cleanValue.startsWith("'") && cleanValue.endsWith("'")) {
+      cleanValue = cleanValue.slice(1, -1);
+    }
+    switch (key) {
+      case "id":
+      case "title":
+        result[key] = cleanValue;
+        break;
+      case "tasks":
+        if (cleanValue.startsWith("[") && cleanValue.endsWith("]")) {
+          result.tasks = cleanValue.slice(1, -1).split(",").map((s2) => s2.trim()).filter(Boolean);
+        }
+        break;
+    }
+  }
+  return result;
+}
+function parseMilestoneMarkdown(content2) {
+  let frontmatter = {};
+  let remaining = content2;
+  const frontmatterMatch = content2.match(/^---\n([\s\S]*?)\n---\n/);
+  if (frontmatterMatch) {
+    frontmatter = parseMilestoneFrontmatter(frontmatterMatch[1]);
+    remaining = content2.slice(frontmatterMatch[0].length);
+  }
+  const rawContent = remaining.trim();
+  const description = extractSection(rawContent, "Description") || "";
+  return {
+    id: frontmatter.id || "",
+    title: frontmatter.title || "",
+    description,
+    rawContent,
+    tasks: frontmatter.tasks || []
+  };
+}
+function serializeMilestoneMarkdown(milestone) {
+  const lines = [];
+  lines.push("---");
+  lines.push(`id: ${milestone.id}`);
+  const escapedTitle = milestone.title.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
+  lines.push(`title: "${escapedTitle}"`);
+  lines.push(`tasks: [${milestone.tasks.join(", ")}]`);
+  lines.push("---");
+  lines.push("");
+  lines.push("## Description");
+  lines.push("");
+  lines.push(milestone.description || `Milestone: ${milestone.title}`);
+  lines.push("");
+  return lines.join("\n");
+}
+function getMilestoneFilename(id, title) {
+  const safeTitle = title.replace(/[<>:"/\\|?*]/g, "").replace(/\s+/g, "-").toLowerCase().slice(0, 50);
+  return `${id} - ${safeTitle}.md`;
+}
+function extractMilestoneIdFromFilename(filename) {
+  const match = filename.match(/^(m-\d+)/);
+  return match ? match[1] : null;
+}
 const DEFAULT_STATUSES = ["To Do", "In Progress", "Done"];
 function parseBacklogConfig(content2) {
   const config = {};
@@ -928,6 +1105,124 @@ function groupTasksByStatus(tasks, statuses) {
   }
   return grouped;
 }
+const NO_MILESTONE_KEY = "__none";
+function normalizeMilestoneName(name2) {
+  return name2.trim();
+}
+function milestoneKey(name2) {
+  return normalizeMilestoneName(name2 ?? "").toLowerCase();
+}
+function isDoneStatus(status) {
+  const normalized = (status ?? "").toLowerCase();
+  return normalized.includes("done") || normalized.includes("complete");
+}
+function getMilestoneLabel(milestoneId, milestoneEntities) {
+  if (!milestoneId) {
+    return "Tasks without milestone";
+  }
+  const entity = milestoneEntities.find((m) => milestoneKey(m.id) === milestoneKey(milestoneId));
+  return (entity == null ? void 0 : entity.title) || milestoneId;
+}
+function collectMilestoneIds(tasks, milestoneEntities) {
+  const merged = [];
+  const seen = /* @__PURE__ */ new Set();
+  const addMilestone = (value) => {
+    const normalized = normalizeMilestoneName(value);
+    if (!normalized)
+      return;
+    const key = milestoneKey(normalized);
+    if (seen.has(key))
+      return;
+    seen.add(key);
+    merged.push(normalized);
+  };
+  for (const entity of milestoneEntities) {
+    addMilestone(entity.id);
+  }
+  for (const task of tasks) {
+    addMilestone(task.milestone ?? "");
+  }
+  return merged;
+}
+function collectMilestones(tasks, configMilestones) {
+  const merged = [];
+  const seen = /* @__PURE__ */ new Set();
+  const addMilestone = (value) => {
+    const normalized = normalizeMilestoneName(value);
+    if (!normalized)
+      return;
+    const key = milestoneKey(normalized);
+    if (seen.has(key))
+      return;
+    seen.add(key);
+    merged.push(normalized);
+  };
+  for (const m of configMilestones) {
+    addMilestone(m);
+  }
+  for (const task of tasks) {
+    addMilestone(task.milestone ?? "");
+  }
+  return merged;
+}
+function createBucket(milestoneId, tasks, statuses, milestoneEntities, isNoMilestone) {
+  const bucketMilestoneKey = milestoneKey(milestoneId);
+  const bucketTasks = tasks.filter((task) => {
+    const taskMilestoneKey = milestoneKey(task.milestone);
+    return bucketMilestoneKey ? taskMilestoneKey === bucketMilestoneKey : !taskMilestoneKey;
+  });
+  const counts = {};
+  for (const status of statuses) {
+    counts[status] = 0;
+  }
+  for (const task of bucketTasks) {
+    const status = task.status ?? "";
+    counts[status] = (counts[status] ?? 0) + 1;
+  }
+  const doneCount = bucketTasks.filter((t) => isDoneStatus(t.status)).length;
+  const progress = bucketTasks.length > 0 ? Math.round(doneCount / bucketTasks.length * 100) : 0;
+  const key = bucketMilestoneKey ? bucketMilestoneKey : NO_MILESTONE_KEY;
+  const label = getMilestoneLabel(milestoneId, milestoneEntities);
+  return {
+    key,
+    label,
+    milestone: milestoneId,
+    isNoMilestone,
+    tasks: bucketTasks,
+    statusCounts: counts,
+    total: bucketTasks.length,
+    doneCount,
+    progress
+  };
+}
+function buildMilestoneBuckets(tasks, milestoneEntities, statuses) {
+  const allMilestoneIds = collectMilestoneIds(tasks, milestoneEntities);
+  const buckets = [
+    // "No milestone" bucket first
+    createBucket(void 0, tasks, statuses, milestoneEntities, true),
+    // Then each milestone bucket
+    ...allMilestoneIds.map((m) => createBucket(m, tasks, statuses, milestoneEntities, false))
+  ];
+  return buckets;
+}
+function buildMilestoneBucketsFromConfig(tasks, configMilestones, statuses) {
+  const milestoneEntities = configMilestones.map((id) => ({
+    id,
+    title: id,
+    description: "",
+    rawContent: "",
+    tasks: []
+  }));
+  return buildMilestoneBuckets(tasks, milestoneEntities, statuses);
+}
+function groupTasksByMilestone(tasks, configMilestones, statuses) {
+  const milestones = collectMilestones(tasks, configMilestones);
+  const buckets = buildMilestoneBucketsFromConfig(tasks, configMilestones, statuses);
+  return {
+    milestones,
+    buckets
+  };
+}
 class Core {
   constructor(options) {
     __publicField(this, "projectRoot");
@@ -1207,6 +1502,10 @@ class Core {
     if (filter == null ? void 0 : filter.priority) {
       tasks = tasks.filter((t) => t.priority === filter.priority);
     }
+    if (filter == null ? void 0 : filter.milestone) {
+      const filterKey = milestoneKey(filter.milestone);
+      tasks = tasks.filter((t) => milestoneKey(t.milestone) === filterKey);
+    }
     if ((filter == null ? void 0 : filter.labels) && filter.labels.length > 0) {
       tasks = tasks.filter((t) => filter.labels.some((label) => t.labels.includes(label)));
     }
@@ -1227,6 +1526,205 @@ class Core {
     const tasks = Array.from(this.tasks.values());
     return groupTasksByStatus(tasks, this.config.statuses);
   }
+  /**
+   * Get tasks grouped by milestone
+   *
+   * Returns a MilestoneSummary with:
+   * - milestones: List of milestone IDs in display order
+   * - buckets: Array of MilestoneBucket with tasks, progress, status counts
+   *
+   * The first bucket is always "Tasks without milestone".
+   * Each bucket includes progress percentage based on done status.
+   *
+   * @example
+   * ```typescript
+   * const summary = core.getTasksByMilestone();
+   * for (const bucket of summary.buckets) {
+   *   console.log(`${bucket.label}: ${bucket.progress}% complete`);
+   *   console.log(`  ${bucket.doneCount}/${bucket.total} tasks done`);
+   * }
+   * ```
+   */
+  getTasksByMilestone() {
+    this.ensureInitialized();
+    const tasks = Array.from(this.tasks.values());
+    return groupTasksByMilestone(tasks, this.config.milestones, this.config.statuses);
+  }
+  // =========================================================================
+  // Milestone CRUD Operations
+  // =========================================================================
+  /**
+   * Get the milestones directory path
+   */
+  getMilestonesDir() {
+    return this.fs.join(this.projectRoot, "backlog", "milestones");
+  }
+  /**
+   * List all milestones from the milestones directory
+   *
+   * @returns Array of Milestone objects sorted by ID
+   */
+  async listMilestones() {
+    const milestonesDir = this.getMilestonesDir();
+    if (!await this.fs.exists(milestonesDir)) {
+      return [];
+    }
+    const entries = await this.fs.readDir(milestonesDir);
+    const milestones = [];
+    for (const entry of entries) {
+      if (!entry.endsWith(".md"))
+        continue;
+      if (entry.toLowerCase() === "readme.md")
+        continue;
+      const milestoneId = extractMilestoneIdFromFilename(entry);
+      if (!milestoneId)
+        continue;
+      const filepath = this.fs.join(milestonesDir, entry);
+      if (await this.fs.isDirectory(filepath))
+        continue;
+      try {
+        const content2 = await this.fs.readFile(filepath);
+        milestones.push(parseMilestoneMarkdown(content2));
+      } catch (error) {
+        console.warn(`Failed to parse milestone file ${filepath}:`, error);
+      }
+    }
+    return milestones.sort((a, b) => a.id.localeCompare(b.id, void 0, { numeric: true }));
+  }
+  /**
+   * Load a single milestone by ID
+   *
+   * @param id - Milestone ID (e.g., "m-0")
+   * @returns Milestone or null if not found
+   */
+  async loadMilestone(id) {
+    const milestonesDir = this.getMilestonesDir();
+    if (!await this.fs.exists(milestonesDir)) {
+      return null;
+    }
+    const entries = await this.fs.readDir(milestonesDir);
+    const milestoneFile = entries.find((entry) => {
+      const fileId = extractMilestoneIdFromFilename(entry);
+      return fileId === id;
+    });
+    if (!milestoneFile) {
+      return null;
+    }
+    const filepath = this.fs.join(milestonesDir, milestoneFile);
+    try {
+      const content2 = await this.fs.readFile(filepath);
+      return parseMilestoneMarkdown(content2);
+    } catch {
+      return null;
+    }
+  }
+  /**
+   * Create a new milestone
+   *
+   * @param input - Milestone creation input
+   * @returns Created milestone
+   */
+  async createMilestone(input) {
+    const milestonesDir = this.getMilestonesDir();
+    await this.fs.createDir(milestonesDir, { recursive: true });
+    const entries = await this.fs.readDir(milestonesDir).catch(() => []);
+    const existingIds = entries.map((f) => {
+      const match = f.match(/^m-(\d+)/);
+      return (match == null ? void 0 : match[1]) ? parseInt(match[1], 10) : -1;
+    }).filter((id2) => id2 >= 0);
+    const nextId = existingIds.length > 0 ? Math.max(...existingIds) + 1 : 0;
+    const id = `m-${nextId}`;
+    const description = input.description || `Milestone: ${input.title}`;
+    const tempMilestone = {
+      id,
+      title: input.title,
+      description,
+      tasks: []
+    };
+    const content2 = serializeMilestoneMarkdown(tempMilestone);
+    const milestone = {
+      id,
+      title: input.title,
+      description,
+      rawContent: content2,
+      tasks: []
+    };
+    const filename = getMilestoneFilename(id, input.title);
+    const filepath = this.fs.join(milestonesDir, filename);
+    await this.fs.writeFile(filepath, content2);
+    return milestone;
+  }
+  /**
+   * Update an existing milestone
+   *
+   * @param id - Milestone ID to update
+   * @param input - Fields to update
+   * @returns Updated milestone or null if not found
+   */
+  async updateMilestone(id, input) {
+    const existing = await this.loadMilestone(id);
+    if (!existing) {
+      return null;
+    }
+    const milestonesDir = this.getMilestonesDir();
+    const entries = await this.fs.readDir(milestonesDir);
+    const currentFile = entries.find((entry) => {
+      const fileId = extractMilestoneIdFromFilename(entry);
+      return fileId === id;
+    });
+    if (!currentFile) {
+      return null;
+    }
+    const newTitle = input.title ?? existing.title;
+    const newDescription = input.description ?? existing.description;
+    const tempMilestone = {
+      id: existing.id,
+      title: newTitle,
+      description: newDescription,
+      tasks: existing.tasks
+    };
+    const content2 = serializeMilestoneMarkdown(tempMilestone);
+    const updated = {
+      id: existing.id,
+      title: newTitle,
+      description: newDescription,
+      rawContent: content2,
+      tasks: existing.tasks
+    };
+    const oldPath = this.fs.join(milestonesDir, currentFile);
+    await this.fs.deleteFile(oldPath);
+    const newFilename = getMilestoneFilename(id, updated.title);
+    const newPath = this.fs.join(milestonesDir, newFilename);
+    await this.fs.writeFile(newPath, content2);
+    return updated;
+  }
+  /**
+   * Delete a milestone
+   *
+   * @param id - Milestone ID to delete
+   * @returns true if deleted, false if not found
+   */
+  async deleteMilestone(id) {
+    const milestonesDir = this.getMilestonesDir();
+    if (!await this.fs.exists(milestonesDir)) {
+      return false;
+    }
+    const entries = await this.fs.readDir(milestonesDir);
+    const milestoneFile = entries.find((entry) => {
+      const fileId = extractMilestoneIdFromFilename(entry);
+      return fileId === id;
+    });
+    if (!milestoneFile) {
+      return false;
+    }
+    const filepath = this.fs.join(milestonesDir, milestoneFile);
+    try {
+      await this.fs.deleteFile(filepath);
+      return true;
+    } catch {
+      return false;
+    }
+  }
   /**
    * Get a single task by ID
    *
@@ -1359,6 +1857,10 @@ class Core {
     if (filter.priority) {
       result = result.filter((t) => t.priority === filter.priority);
     }
+    if (filter.milestone) {
+      const filterKey = milestoneKey(filter.milestone);
+      result = result.filter((t) => milestoneKey(t.milestone) === filterKey);
+    }
     if (filter.labels && filter.labels.length > 0) {
       result = result.filter((t) => filter.labels.some((label) => t.labels.includes(label)));
     }
@@ -1387,6 +1889,247 @@ class Core {
       }
     }
   }
+  // =========================================================================
+  // Milestone-Task Sync Helpers
+  // =========================================================================
+  /**
+   * Add a task ID to a milestone's tasks array
+   *
+   * @param taskId - Task ID to add
+   * @param milestoneId - Milestone ID to update
+   */
+  async addTaskToMilestone(taskId, milestoneId) {
+    const milestone = await this.loadMilestone(milestoneId);
+    if (!milestone) {
+      console.warn(`Milestone ${milestoneId} not found when adding task ${taskId}`);
+      return;
+    }
+    if (milestone.tasks.includes(taskId)) {
+      return;
+    }
+    const updatedMilestone = {
+      ...milestone,
+      tasks: [...milestone.tasks, taskId]
+    };
+    await this.writeMilestoneFile(updatedMilestone);
+  }
+  /**
+   * Remove a task ID from a milestone's tasks array
+   *
+   * @param taskId - Task ID to remove
+   * @param milestoneId - Milestone ID to update
+   */
+  async removeTaskFromMilestone(taskId, milestoneId) {
+    const milestone = await this.loadMilestone(milestoneId);
+    if (!milestone) {
+      return;
+    }
+    if (!milestone.tasks.includes(taskId)) {
+      return;
+    }
+    const updatedMilestone = {
+      ...milestone,
+      tasks: milestone.tasks.filter((id) => id !== taskId)
+    };
+    await this.writeMilestoneFile(updatedMilestone);
+  }
+  /**
+   * Write a milestone to disk
+   */
+  async writeMilestoneFile(milestone) {
+    const milestonesDir = this.getMilestonesDir();
+    const entries = await this.fs.readDir(milestonesDir).catch(() => []);
+    const currentFile = entries.find((entry) => {
+      const fileId = extractMilestoneIdFromFilename(entry);
+      return fileId === milestone.id;
+    });
+    if (currentFile) {
+      const oldPath = this.fs.join(milestonesDir, currentFile);
+      await this.fs.deleteFile(oldPath).catch(() => {
+      });
+    }
+    const content2 = serializeMilestoneMarkdown(milestone);
+    const filename = getMilestoneFilename(milestone.id, milestone.title);
+    const filepath = this.fs.join(milestonesDir, filename);
+    await this.fs.writeFile(filepath, content2);
+  }
+  /**
+   * Get the tasks directory path
+   */
+  getTasksDir() {
+    return this.fs.join(this.projectRoot, "backlog", "tasks");
+  }
+  // =========================================================================
+  // Task CRUD Operations
+  // =========================================================================
+  /**
+   * Create a new task
+   *
+   * @param input - Task creation input
+   * @returns Created task
+   */
+  async createTask(input) {
+    var _a;
+    this.ensureInitialized();
+    const tasksDir = this.getTasksDir();
+    await this.fs.createDir(tasksDir, { recursive: true });
+    const existingIds = Array.from(this.tasks.keys()).map((id) => parseInt(id.replace(/\D/g, ""), 10)).filter((n) => !isNaN(n));
+    const nextId = existingIds.length > 0 ? Math.max(...existingIds) + 1 : 1;
+    const taskId = String(nextId);
+    const now = (/* @__PURE__ */ new Date()).toISOString().split("T")[0];
+    const task = {
+      id: taskId,
+      title: input.title,
+      status: input.status || this.config.defaultStatus || "To Do",
+      priority: input.priority,
+      assignee: input.assignee || [],
+      createdDate: now,
+      labels: input.labels || [],
+      milestone: input.milestone,
+      dependencies: input.dependencies || [],
+      parentTaskId: input.parentTaskId,
+      description: input.description,
+      implementationPlan: input.implementationPlan,
+      implementationNotes: input.implementationNotes,
+      acceptanceCriteriaItems: (_a = input.acceptanceCriteria) == null ? void 0 : _a.map((ac, i) => ({
+        index: i + 1,
+        text: ac.text,
+        checked: ac.checked || false
+      })),
+      rawContent: input.rawContent,
+      source: "local"
+    };
+    const content2 = serializeTaskMarkdown(task);
+    const safeTitle = input.title.replace(/[<>:"/\\|?*]/g, "").replace(/\s+/g, " ").slice(0, 50);
+    const filename = `${taskId} - ${safeTitle}.md`;
+    const filepath = this.fs.join(tasksDir, filename);
+    await this.fs.writeFile(filepath, content2);
+    task.filePath = filepath;
+    this.tasks.set(taskId, task);
+    if (input.milestone) {
+      await this.addTaskToMilestone(taskId, input.milestone);
+    }
+    return task;
+  }
+  /**
+   * Update an existing task
+   *
+   * @param id - Task ID to update
+   * @param input - Fields to update
+   * @returns Updated task or null if not found
+   */
+  async updateTask(id, input) {
+    this.ensureInitialized();
+    const existing = this.tasks.get(id);
+    if (!existing) {
+      return null;
+    }
+    const oldMilestone = existing.milestone;
+    const newMilestone = input.milestone === null ? void 0 : input.milestone !== void 0 ? input.milestone : oldMilestone;
+    const now = (/* @__PURE__ */ new Date()).toISOString().split("T")[0];
+    const updated = {
+      ...existing,
+      title: input.title ?? existing.title,
+      status: input.status ?? existing.status,
+      priority: input.priority ?? existing.priority,
+      milestone: newMilestone,
+      updatedDate: now,
+      description: input.description ?? existing.description,
+      implementationPlan: input.clearImplementationPlan ? void 0 : input.implementationPlan ?? existing.implementationPlan,
+      implementationNotes: input.clearImplementationNotes ? void 0 : input.implementationNotes ?? existing.implementationNotes,
+      ordinal: input.ordinal ?? existing.ordinal,
+      dependencies: input.dependencies ?? existing.dependencies
+    };
+    if (input.labels) {
+      updated.labels = input.labels;
+    } else {
+      if (input.addLabels) {
+        updated.labels = [.../* @__PURE__ */ new Set([...updated.labels, ...input.addLabels])];
+      }
+      if (input.removeLabels) {
+        updated.labels = updated.labels.filter((l) => !input.removeLabels.includes(l));
+      }
+    }
+    if (input.assignee) {
+      updated.assignee = input.assignee;
+    }
+    if (input.addDependencies) {
+      updated.dependencies = [
+        .../* @__PURE__ */ new Set([...updated.dependencies, ...input.addDependencies])
+      ];
+    }
+    if (input.removeDependencies) {
+      updated.dependencies = updated.dependencies.filter((d) => !input.removeDependencies.includes(d));
+    }
+    if (input.acceptanceCriteria) {
+      updated.acceptanceCriteriaItems = input.acceptanceCriteria.map((ac, i) => ({
+        index: i + 1,
+        text: ac.text,
+        checked: ac.checked || false
+      }));
+    }
+    const content2 = serializeTaskMarkdown(updated);
+    if (existing.filePath) {
+      await this.fs.deleteFile(existing.filePath).catch(() => {
+      });
+    }
+    const tasksDir = this.getTasksDir();
+    const safeTitle = updated.title.replace(/[<>:"/\\|?*]/g, "").replace(/\s+/g, " ").slice(0, 50);
+    const filename = `${id} - ${safeTitle}.md`;
+    const filepath = this.fs.join(tasksDir, filename);
+    await this.fs.writeFile(filepath, content2);
+    updated.filePath = filepath;
+    this.tasks.set(id, updated);
+    const milestoneChanged = milestoneKey(oldMilestone) !== milestoneKey(newMilestone);
+    if (milestoneChanged) {
+      if (oldMilestone) {
+        await this.removeTaskFromMilestone(id, oldMilestone);
+      }
+      if (newMilestone) {
+        await this.addTaskToMilestone(id, newMilestone);
+      }
+    }
+    return updated;
+  }
+  /**
+   * Delete a task
+   *
+   * @param id - Task ID to delete
+   * @returns true if deleted, false if not found
+   */
+  async deleteTask(id) {
+    this.ensureInitialized();
+    const task = this.tasks.get(id);
+    if (!task) {
+      return false;
+    }
+    if (task.milestone) {
+      await this.removeTaskFromMilestone(id, task.milestone);
+    }
+    if (task.filePath) {
+      try {
+        await this.fs.deleteFile(task.filePath);
+      } catch {
+      }
+    }
+    this.tasks.delete(id);
+    return true;
+  }
+  /**
+   * Load specific tasks by their IDs (for lazy loading milestone tasks)
+   *
+   * @param ids - Array of task IDs to load
+   * @returns Array of loaded tasks (missing tasks excluded)
+   */
+  async loadTasksByIds(ids) {
+    if (this.initialized) {
+      return ids.map((id) => this.tasks.get(id)).filter((t) => t !== void 0);
+    }
+    if (this.lazyInitialized) {
+      return this.loadTasks(ids);
+    }
+    throw new Error("Core not initialized. Call initialize() or initializeLazy() first.");
+  }
 }
 class PanelFileSystemAdapter {
   constructor(access) {
@@ -1818,7 +2561,8 @@ const KanbanColumn = ({
   hasMore = false,
   isLoadingMore = false,
   onLoadMore,
-  onTaskClick
+  onTaskClick,
+  fullWidth = false
 }) => {
   const { theme: theme2 } = useTheme();
   const getPriorityColor = (priority) => {
@@ -1840,8 +2584,8 @@ const KanbanColumn = ({
       style: {
         flex: "1 1 0",
         // Grow to fill available width equally
-        minWidth: "280px",
-        maxWidth: "500px",
+        minWidth: fullWidth ? void 0 : "280px",
+        maxWidth: fullWidth ? void 0 : "500px",
         // Cap max width for readability
         height: "100%",
         // Fill parent height
@@ -1905,7 +2649,11 @@ const KanbanColumn = ({
               flexDirection: "column",
               gap: "8px",
               overflowY: "auto",
-              WebkitOverflowScrolling: "touch"
+              overflowX: "hidden",
+              WebkitOverflowScrolling: "touch",
+              // Add padding for scroll content, use margin trick to prevent clipping
+              paddingRight: "4px",
+              marginRight: "-4px"
             },
             children: [
               tasks.map((task) => /* @__PURE__ */ jsxs(
@@ -2084,7 +2832,8 @@ const KanbanColumn = ({
                     "Loading..."
                   ] }) : `Load more (${remaining} remaining)`
                 }
-              )
+              ),
+              /* @__PURE__ */ jsx("div", { style: { flexShrink: 0, height: "4px" } })
             ]
           }
         ),
@@ -2354,6 +3103,20 @@ const KanbanPanelContent = ({
   var _a, _b;
   const { theme: theme2 } = useTheme();
   const [_selectedTask, setSelectedTask] = useState(null);
+  const [selectedTab, setSelectedTab] = useState("todo");
+  const [isNarrowView, setIsNarrowView] = useState(false);
+  const containerRef = useRef(null);
+  useLayoutEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setIsNarrowView(entry.contentRect.width < 768);
+      }
+    });
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, []);
   const {
     statusColumns,
     tasksByStatus,
@@ -2444,6 +3207,7 @@ const KanbanPanelContent = ({
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ref: containerRef,
       style: {
         padding: "clamp(12px, 3vw, 20px)",
         // Responsive padding for mobile
@@ -2488,7 +3252,7 @@ const KanbanPanelContent = ({
                 )
               ] }),
               isBacklogProject && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "16px", flexWrap: "wrap" }, children: [
-                /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: statusColumns.map((status) => {
+                !isNarrowView && /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: statusColumns.map((status) => {
                   const statusState = tasksByStatus.get(status);
                   const count = (statusState == null ? void 0 : statusState.count) || 0;
                   const completedState = columnStates.get("completed");
@@ -2565,44 +3329,113 @@ const KanbanPanelContent = ({
             canInitialize,
             onInitialize: handleInitialize
           }
-        ) : /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              flex: 1,
-              display: "flex",
-              gap: "16px",
-              justifyContent: "center",
-              // Center columns when they hit max-width
-              overflowX: "auto",
-              overflowY: "hidden",
-              paddingBottom: "8px",
-              minHeight: 0,
-              // Allow flex child to shrink below content size
-              WebkitOverflowScrolling: "touch"
-              // Smooth scrolling on iOS
-            },
-            children: statusColumns.map((status) => {
-              const statusState = tasksByStatus.get(status);
-              const columnTasks = (statusState == null ? void 0 : statusState.tasks) || [];
-              const isCompleted = status === "completed";
-              const completedState = columnStates.get("completed");
-              return /* @__PURE__ */ jsx(
-                KanbanColumn,
+        ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          isNarrowView && /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                flexShrink: 0,
+                display: "flex",
+                gap: "4px",
+                background: theme2.colors.backgroundSecondary,
+                borderRadius: theme2.radii[2],
+                padding: "4px"
+              },
+              children: statusColumns.map((status) => {
+                const isSelected = status === selectedTab;
+                const statusState = tasksByStatus.get(status);
+                const count = (statusState == null ? void 0 : statusState.count) || 0;
+                return /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    onClick: () => setSelectedTab(status),
+                    style: {
+                      flex: 1,
+                      padding: "10px 12px",
+                      border: "none",
+                      borderRadius: theme2.radii[1],
+                      background: isSelected ? theme2.colors.primary : "transparent",
+                      color: isSelected ? theme2.colors.background : theme2.colors.textSecondary,
+                      fontSize: theme2.fontSizes[1],
+                      fontWeight: theme2.fontWeights.medium,
+                      cursor: "pointer",
+                      transition: "all 0.2s ease",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      gap: "6px"
+                    },
+                    children: [
+                      STATUS_DISPLAY_LABELS[status],
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          style: {
+                            background: isSelected ? "rgba(255,255,255,0.2)" : theme2.colors.background,
+                            padding: "2px 6px",
+                            borderRadius: theme2.radii[1],
+                            fontSize: theme2.fontSizes[0]
+                          },
+                          children: count
+                        }
+                      )
+                    ]
+                  },
+                  status
+                );
+              })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                flex: 1,
+                overflowX: isNarrowView ? "hidden" : "auto",
+                overflowY: "hidden",
+                minHeight: 0,
+                // Allow flex child to shrink below content size
+                WebkitOverflowScrolling: "touch"
+                // Smooth scrolling on iOS
+              },
+              children: /* @__PURE__ */ jsx(
+                "div",
                 {
-                  status: STATUS_DISPLAY_LABELS[status],
-                  tasks: columnTasks,
-                  total: isCompleted ? completedState == null ? void 0 : completedState.total : void 0,
-                  hasMore: isCompleted ? completedState == null ? void 0 : completedState.hasMore : false,
-                  isLoadingMore: isCompleted ? completedState == null ? void 0 : completedState.isLoadingMore : false,
-                  onLoadMore: isCompleted ? () => loadMore("completed") : void 0,
-                  onTaskClick: handleTaskClick
-                },
-                status
-              );
-            })
-          }
-        )
+                  style: {
+                    display: "flex",
+                    gap: "16px",
+                    height: "100%",
+                    paddingBottom: "8px",
+                    width: "fit-content",
+                    minWidth: "100%",
+                    margin: "0 auto"
+                    // Center when columns don't fill width
+                  },
+                  children: statusColumns.filter((status) => !isNarrowView || status === selectedTab).map((status) => {
+                    const statusState = tasksByStatus.get(status);
+                    const columnTasks = (statusState == null ? void 0 : statusState.tasks) || [];
+                    const isCompleted = status === "completed";
+                    const completedState = columnStates.get("completed");
+                    return /* @__PURE__ */ jsx(
+                      KanbanColumn,
+                      {
+                        status: STATUS_DISPLAY_LABELS[status],
+                        tasks: columnTasks,
+                        total: isCompleted ? completedState == null ? void 0 : completedState.total : void 0,
+                        hasMore: isCompleted ? completedState == null ? void 0 : completedState.hasMore : false,
+                        isLoadingMore: isCompleted ? completedState == null ? void 0 : completedState.isLoadingMore : false,
+                        onLoadMore: isCompleted ? () => loadMore("completed") : void 0,
+                        onTaskClick: handleTaskClick,
+                        fullWidth: isNarrowView
+                      },
+                      status
+                    );
+                  })
+                }
+              )
+            }
+          )
+        ] })
       ]
     }
   );
@@ -46939,6 +47772,803 @@ const TaskDetailPanelContent = ({ context, actions, events }) => {
 const TaskDetailPanel = (props) => {
   return /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(TaskDetailPanelContent, { ...props }) });
 };
+function useMilestoneData(options) {
+  const { context, actions } = options || {};
+  const [milestones, setMilestones] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [isBacklogProject, setIsBacklogProject] = useState(false);
+  const coreRef = useRef(null);
+  const activeFilePathRef = useRef(null);
+  const contextRef = useRef(context);
+  const actionsRef = useRef(actions);
+  useEffect(() => {
+    contextRef.current = context;
+    actionsRef.current = actions;
+  }, [context, actions]);
+  const fetchFileContent = useCallback(async (path2) => {
+    const currentContext = contextRef.current;
+    const currentActions = actionsRef.current;
+    if (!currentActions || !currentContext) {
+      throw new Error("PanelContext not available");
+    }
+    if (activeFilePathRef.current === path2) {
+      await new Promise((resolve) => setTimeout(resolve, 100));
+    }
+    activeFilePathRef.current = path2;
+    try {
+      if (currentActions.openFile) {
+        const result = await currentActions.openFile(path2);
+        if (typeof result === "string") {
+          return result;
+        }
+      } else {
+        throw new Error("openFile action not available");
+      }
+      const activeFileSlice = currentContext.getRepositorySlice("active-file");
+      const fileData = activeFileSlice == null ? void 0 : activeFileSlice.data;
+      if (!(fileData == null ? void 0 : fileData.content)) {
+        throw new Error(`Failed to fetch content for ${path2}`);
+      }
+      return fileData.content;
+    } finally {
+      activeFilePathRef.current = null;
+    }
+  }, []);
+  const fileTreeVersionRef = useRef(null);
+  const loadMilestoneData = useCallback(async () => {
+    var _a, _b;
+    if (!context || !actions) {
+      console.log("[useMilestoneData] No context provided");
+      setIsBacklogProject(false);
+      setMilestones([]);
+      setIsLoading(false);
+      coreRef.current = null;
+      fileTreeVersionRef.current = null;
+      return;
+    }
+    const fileTreeSlice = context.getRepositorySlice("fileTree");
+    if (!((_a = fileTreeSlice == null ? void 0 : fileTreeSlice.data) == null ? void 0 : _a.allFiles)) {
+      console.log("[useMilestoneData] FileTree not available");
+      setIsBacklogProject(false);
+      setMilestones([]);
+      coreRef.current = null;
+      fileTreeVersionRef.current = null;
+      return;
+    }
+    const currentVersion = fileTreeSlice.data.sha || ((_b = fileTreeSlice.data.metadata) == null ? void 0 : _b.sourceSha) || "unknown";
+    if (coreRef.current && fileTreeVersionRef.current === currentVersion) {
+      console.log("[useMilestoneData] Data already loaded for this version");
+      setIsLoading(false);
+      return;
+    }
+    setIsLoading(true);
+    setError(null);
+    try {
+      const files = fileTreeSlice.data.allFiles;
+      const filePaths = files.map((f) => f.path);
+      const fs = new PanelFileSystemAdapter({
+        fetchFile: fetchFileContent,
+        filePaths
+      });
+      const core2 = new Core({
+        projectRoot: "",
+        adapters: { fs }
+      });
+      const isProject = await core2.isBacklogProject();
+      if (!isProject) {
+        console.log("[useMilestoneData] Not a Backlog.md project");
+        setIsBacklogProject(false);
+        setMilestones([]);
+        coreRef.current = null;
+        return;
+      }
+      console.log("[useMilestoneData] Loading milestone data...");
+      setIsBacklogProject(true);
+      await core2.initializeLazy(filePaths);
+      coreRef.current = core2;
+      console.log("[useMilestoneData] Core instance:", core2);
+      console.log("[useMilestoneData] Core.listMilestones:", typeof core2.listMilestones);
+      console.log("[useMilestoneData] Core prototype:", Object.getPrototypeOf(core2));
+      if (typeof core2.listMilestones !== "function") {
+        console.error("[useMilestoneData] core.listMilestones is not a function!");
+        console.error("[useMilestoneData] Core methods:", Object.keys(core2));
+        console.error("[useMilestoneData] Core prototype methods:", Object.getOwnPropertyNames(Object.getPrototypeOf(core2)));
+        throw new Error("core.listMilestones is not available - check @backlog-md/core version");
+      }
+      const milestoneList = await core2.listMilestones();
+      console.log(`[useMilestoneData] Loaded ${milestoneList.length} milestones`);
+      const milestoneStates = milestoneList.map((m) => ({
+        milestone: m,
+        tasks: [],
+        isLoading: false,
+        isExpanded: false
+      }));
+      fileTreeVersionRef.current = currentVersion;
+      setMilestones(milestoneStates);
+    } catch (err) {
+      console.error("[useMilestoneData] Failed to load:", err);
+      setError(err instanceof Error ? err.message : "Failed to load milestone data");
+      setIsBacklogProject(false);
+      setMilestones([]);
+      coreRef.current = null;
+      fileTreeVersionRef.current = null;
+    } finally {
+      setIsLoading(false);
+    }
+  }, [context, actions, fetchFileContent]);
+  useEffect(() => {
+    loadMilestoneData();
+  }, [loadMilestoneData]);
+  const expandMilestone = useCallback(async (milestoneId) => {
+    const core2 = coreRef.current;
+    if (!core2) {
+      console.warn("[useMilestoneData] Core not available");
+      return;
+    }
+    const milestoneState = milestones.find((m) => m.milestone.id === milestoneId);
+    if (!milestoneState) {
+      console.warn(`[useMilestoneData] Milestone ${milestoneId} not found`);
+      return;
+    }
+    if (milestoneState.tasks.length > 0) {
+      setMilestones(
+        (prev) => prev.map(
+          (m) => m.milestone.id === milestoneId ? { ...m, isExpanded: true } : m
+        )
+      );
+      return;
+    }
+    setMilestones(
+      (prev) => prev.map(
+        (m) => m.milestone.id === milestoneId ? { ...m, isLoading: true, isExpanded: true } : m
+      )
+    );
+    try {
+      const taskIds = milestoneState.milestone.tasks;
+      console.log(`[useMilestoneData] Loading ${taskIds.length} tasks for milestone ${milestoneId}`);
+      const tasks = await core2.loadTasksByIds(taskIds);
+      console.log(`[useMilestoneData] Loaded ${tasks.length} tasks`);
+      setMilestones(
+        (prev) => prev.map(
+          (m) => m.milestone.id === milestoneId ? { ...m, tasks, isLoading: false } : m
+        )
+      );
+    } catch (err) {
+      console.error(`[useMilestoneData] Failed to load tasks for ${milestoneId}:`, err);
+      setError(err instanceof Error ? err.message : "Failed to load tasks");
+      setMilestones(
+        (prev) => prev.map(
+          (m) => m.milestone.id === milestoneId ? { ...m, isLoading: false } : m
+        )
+      );
+    }
+  }, [milestones]);
+  const collapseMilestone = useCallback((milestoneId) => {
+    setMilestones(
+      (prev) => prev.map(
+        (m) => m.milestone.id === milestoneId ? { ...m, isExpanded: false } : m
+      )
+    );
+  }, []);
+  const toggleMilestone = useCallback(async (milestoneId) => {
+    const milestoneState = milestones.find((m) => m.milestone.id === milestoneId);
+    if (!milestoneState) return;
+    if (milestoneState.isExpanded) {
+      collapseMilestone(milestoneId);
+    } else {
+      await expandMilestone(milestoneId);
+    }
+  }, [milestones, expandMilestone, collapseMilestone]);
+  const refreshData = useCallback(async () => {
+    fileTreeVersionRef.current = null;
+    await loadMilestoneData();
+  }, [loadMilestoneData]);
+  return {
+    milestones,
+    isLoading,
+    error,
+    isBacklogProject,
+    expandMilestone,
+    collapseMilestone,
+    toggleMilestone,
+    refreshData
+  };
+}
+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" : ""
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      flex: 1,
+                      height: "6px",
+                      background: theme2.colors.backgroundSecondary,
+                      borderRadius: theme2.radii[1],
+                      overflow: "hidden"
+                    },
+                    children: /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        style: {
+                          height: "100%",
+                          width: showProgress ? `${progress}%` : "0%",
+                          background: progress === 100 ? theme2.colors.success : theme2.colors.primary,
+                          transition: "width 0.3s ease"
+                        }
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    style: {
+                      fontSize: theme2.fontSizes[1],
+                      color: theme2.colors.textSecondary,
+                      minWidth: "45px",
+                      textAlign: "right"
+                    },
+                    children: showProgress ? `${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 MilestonePanelContent = ({
+  context,
+  actions,
+  events
+}) => {
+  const { theme: theme2 } = useTheme();
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const {
+    milestones,
+    isLoading,
+    error,
+    isBacklogProject,
+    toggleMilestone,
+    refreshData
+  } = useMilestoneData({
+    context,
+    actions
+  });
+  const handleTaskClick = (task) => {
+    if (events) {
+      events.emit({
+        type: "task:selected",
+        source: "milestone-panel",
+        timestamp: Date.now(),
+        payload: { taskId: task.id, task }
+      });
+    }
+  };
+  const handleRefresh = async () => {
+    setIsRefreshing(true);
+    try {
+      await refreshData();
+    } finally {
+      setIsRefreshing(false);
+    }
+  };
+  const totalMilestones = milestones.length;
+  const totalTasks = milestones.reduce((sum, m) => sum + m.milestone.tasks.length, 0);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        padding: "clamp(12px, 3vw, 20px)",
+        fontFamily: theme2.fonts.body,
+        height: "100%",
+        boxSizing: "border-box",
+        display: "flex",
+        flexDirection: "column",
+        gap: "16px",
+        overflow: "hidden",
+        backgroundColor: theme2.colors.background,
+        color: theme2.colors.text
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              flexShrink: 0,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              gap: "12px",
+              flexWrap: "wrap"
+            },
+            children: [
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [
+                /* @__PURE__ */ jsx(Target, { size: 24, color: theme2.colors.primary }),
+                /* @__PURE__ */ jsx(
+                  "h2",
+                  {
+                    style: {
+                      margin: 0,
+                      fontSize: theme2.fontSizes[4],
+                      color: theme2.colors.text
+                    },
+                    children: "Milestones"
+                  }
+                )
+              ] }),
+              isBacklogProject && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [
+                /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    style: {
+                      fontSize: theme2.fontSizes[1],
+                      color: theme2.colors.textSecondary,
+                      background: theme2.colors.backgroundSecondary,
+                      padding: "4px 10px",
+                      borderRadius: theme2.radii[1]
+                    },
+                    children: [
+                      totalMilestones,
+                      " milestone",
+                      totalMilestones !== 1 ? "s" : "",
+                      " · ",
+                      totalTasks,
+                      " task",
+                      totalTasks !== 1 ? "s" : ""
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: handleRefresh,
+                    disabled: isRefreshing || isLoading,
+                    style: {
+                      background: theme2.colors.backgroundSecondary,
+                      border: `1px solid ${theme2.colors.border}`,
+                      borderRadius: theme2.radii[1],
+                      padding: "6px",
+                      cursor: isRefreshing ? "wait" : "pointer",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      transition: "all 0.2s ease"
+                    },
+                    title: "Refresh milestones",
+                    children: /* @__PURE__ */ jsx(
+                      RefreshCw,
+                      {
+                        size: 16,
+                        color: theme2.colors.textSecondary,
+                        style: {
+                          animation: isRefreshing ? "spin 1s linear infinite" : "none"
+                        }
+                      }
+                    )
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        error && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              flexShrink: 0,
+              padding: "12px",
+              background: `${theme2.colors.error}20`,
+              border: `1px solid ${theme2.colors.error}`,
+              borderRadius: theme2.radii[2],
+              display: "flex",
+              alignItems: "center",
+              gap: "8px",
+              color: theme2.colors.error,
+              fontSize: theme2.fontSizes[1]
+            },
+            children: [
+              /* @__PURE__ */ jsx(CircleAlert, { size: 16 }),
+              /* @__PURE__ */ jsx("span", { children: error })
+            ]
+          }
+        ),
+        isLoading ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              flex: 1,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              color: theme2.colors.textSecondary
+            },
+            children: "Loading milestones..."
+          }
+        ) : !isBacklogProject ? /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              flex: 1,
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: "16px",
+              color: theme2.colors.textSecondary
+            },
+            children: [
+              /* @__PURE__ */ jsx(Target, { size: 48, color: theme2.colors.border }),
+              /* @__PURE__ */ jsxs("div", { style: { textAlign: "center" }, children: [
+                /* @__PURE__ */ jsx("p", { style: { margin: 0, fontSize: theme2.fontSizes[2] }, children: "No Backlog.md project found" }),
+                /* @__PURE__ */ jsx("p", { style: { margin: "8px 0 0 0", fontSize: theme2.fontSizes[1] }, children: "Initialize a project from the Kanban Board panel" })
+              ] })
+            ]
+          }
+        ) : milestones.length === 0 ? /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              flex: 1,
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: "16px",
+              color: theme2.colors.textSecondary
+            },
+            children: [
+              /* @__PURE__ */ jsx(Target, { size: 48, color: theme2.colors.border }),
+              /* @__PURE__ */ jsxs("div", { style: { textAlign: "center" }, children: [
+                /* @__PURE__ */ jsx("p", { style: { margin: 0, fontSize: theme2.fontSizes[2] }, children: "No milestones yet" }),
+                /* @__PURE__ */ jsx("p", { style: { margin: "8px 0 0 0", fontSize: theme2.fontSizes[1] }, children: "Create milestones to organize your tasks into releases or sprints" })
+              ] })
+            ]
+          }
+        ) : /* @__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: handleTaskClick
+              },
+              milestoneState.milestone.id
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsx("style", { children: `
+          @keyframes spin {
+            to { transform: rotate(360deg); }
+          }
+        ` })
+      ]
+    }
+  );
+};
+const MilestonePanel = (props) => {
+  return /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(MilestonePanelContent, { ...props }) });
+};
 const moveTaskTool = {
   name: "move_task",
   description: "Moves a task to a different status column on the kanban board",
@@ -47111,6 +48741,28 @@ const panels = [
     onUnmount: async (_context) => {
       console.log("Task Detail Panel unmounting");
     }
+  },
+  {
+    metadata: {
+      id: "principal-ade.milestone-panel",
+      name: "Milestones",
+      icon: "🎯",
+      version: "0.1.0",
+      author: "Principal ADE",
+      description: "View and manage Backlog.md milestones with progress tracking",
+      slices: ["fileTree"]
+    },
+    component: MilestonePanel,
+    onMount: async (context) => {
+      var _a;
+      console.log(
+        "Milestone Panel mounted",
+        (_a = context.currentScope.repository) == null ? void 0 : _a.path
+      );
+    },
+    onUnmount: async (_context) => {
+      console.log("Milestone Panel unmounting");
+    }
   }
 ];
 const onPackageLoad = async () => {