@industry-theme/backlogmd-kanban-panel 1.0.12 → 1.0.14

package/dist/panels.bundle.js

@@ -3740,89 +3740,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$m = [
+const __iconNode$o = [
   ["path", { d: "m12 19-7-7 7-7", key: "1l729n" }],
   ["path", { d: "M19 12H5", key: "x3x0zl" }]
 ];
-const ArrowLeft = createLucideIcon("arrow-left", __iconNode$m);
+const ArrowLeft = createLucideIcon("arrow-left", __iconNode$o);
 /**
  * @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 = [
+const __iconNode$n = [
   ["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$l);
+const Calendar = createLucideIcon("calendar", __iconNode$n);
 /**
  * @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 = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
-const Check = createLucideIcon("check", __iconNode$k);
+const __iconNode$m = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
+const Check = createLucideIcon("check", __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$j = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
-const ChevronDown = createLucideIcon("chevron-down", __iconNode$j);
+const __iconNode$l = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+const ChevronDown = createLucideIcon("chevron-down", __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$i = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
-const ChevronRight = createLucideIcon("chevron-right", __iconNode$i);
+const __iconNode$k = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
+const ChevronRight = createLucideIcon("chevron-right", __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$h = [
+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$h);
+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$g = [
+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$g);
+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$f = [
+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$f);
+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$e = [
+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" }],
@@ -3832,26 +3832,26 @@ const __iconNode$e = [
   ["path", { d: "M3 8V3h5", key: "1ln10m" }],
   ["path", { d: "M9 9 3 3", key: "v551iv" }]
 ];
-const Expand = createLucideIcon("expand", __iconNode$e);
+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$d = [
+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$d);
+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$c = [
+const __iconNode$e = [
   [
     "path",
     {
@@ -3864,14 +3864,14 @@ const __iconNode$c = [
   ["path", { d: "M16 13H8", key: "t4e002" }],
   ["path", { d: "M16 17H8", key: "z1uh3a" }]
 ];
-const FileText = createLucideIcon("file-text", __iconNode$c);
+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$b = [
+const __iconNode$d = [
   [
     "path",
     {
@@ -3880,14 +3880,14 @@ const __iconNode$b = [
     }
   ]
 ];
-const Flag = createLucideIcon("flag", __iconNode$b);
+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$a = [
+const __iconNode$c = [
   ["path", { d: "M12 10v6", key: "1bos4e" }],
   ["path", { d: "M9 13h6", key: "1uhe8q" }],
   [
@@ -3898,70 +3898,70 @@ const __iconNode$a = [
     }
   ]
 ];
-const FolderPlus = createLucideIcon("folder-plus", __iconNode$a);
+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$9 = [
+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$9);
+const GitBranch = createLucideIcon("git-branch", __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: "M5 3v14", key: "9nsxs2" }],
   ["path", { d: "M12 3v8", key: "1h2ygw" }],
   ["path", { d: "M19 3v18", key: "1sk56x" }]
 ];
-const Kanban = createLucideIcon("kanban", __iconNode$8);
+const Kanban = createLucideIcon("kanban", __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 = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]];
-const LoaderCircle = createLucideIcon("loader-circle", __iconNode$7);
+const __iconNode$9 = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]];
+const LoaderCircle = createLucideIcon("loader-circle", __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 = [
   ["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$6);
+const Monitor = createLucideIcon("monitor", __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 = [
+const __iconNode$7 = [
   ["path", { d: "M18 8L22 12L18 16", key: "1r0oui" }],
   ["path", { d: "M2 12H22", key: "1m8cig" }]
 ];
-const MoveRight = createLucideIcon("move-right", __iconNode$5);
+const MoveRight = createLucideIcon("move-right", __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 = [
   [
     "path",
     {
@@ -3970,27 +3970,38 @@ const __iconNode$4 = [
     }
   ]
 ];
-const Play = createLucideIcon("play", __iconNode$4);
+const Play = createLucideIcon("play", __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: "M5 12h14", key: "1ays0h" }],
+  ["path", { d: "M12 5v14", key: "s699le" }]
+];
+const Plus = createLucideIcon("plus", __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$4 = [
   ["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);
+const RefreshCw = createLucideIcon("refresh-cw", __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$2 = [
+const __iconNode$3 = [
   [
     "path",
     {
@@ -4000,30 +4011,41 @@ const __iconNode$2 = [
   ],
   ["circle", { cx: "7.5", cy: "7.5", r: ".5", fill: "currentColor", key: "kqv944" }]
 ];
-const Tag = createLucideIcon("tag", __iconNode$2);
+const Tag = createLucideIcon("tag", __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$1 = [
+const __iconNode$2 = [
   ["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);
+const Target = createLucideIcon("target", __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 = [
+const __iconNode$1 = [
   ["path", { d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2", key: "975kel" }],
   ["circle", { cx: "12", cy: "7", r: "4", key: "17ys0d" }]
 ];
-const User = createLucideIcon("user", __iconNode);
+const User = createLucideIcon("user", __iconNode$1);
+/**
+ * @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 = [
+  ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
+  ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
+];
+const X = createLucideIcon("x", __iconNode);
 var terminalTheme$1 = {
   space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
   fonts: {
@@ -5765,6 +5787,7 @@ class PanelFileSystemAdapter {
   constructor(access) {
     this.fetchFile = access.fetchFile;
     this.filePaths = new Set(access.filePaths);
+    this.hostFileSystem = access.hostFileSystem;
     this.directories = /* @__PURE__ */ new Set();
     for (const filePath of access.filePaths) {
       const parts = filePath.split("/");
@@ -5774,6 +5797,13 @@ class PanelFileSystemAdapter {
     }
     this.directories.add("");
   }
+  /**
+   * Check if write operations are available
+   */
+  get canWrite() {
+    var _a, _b;
+    return !!(((_a = this.hostFileSystem) == null ? void 0 : _a.writeFile) && ((_b = this.hostFileSystem) == null ? void 0 : _b.createDir));
+  }
   async exists(path2) {
     const normalized = this.normalizePath(path2);
     return this.filePaths.has(normalized) || this.directories.has(normalized);
@@ -5785,14 +5815,36 @@ class PanelFileSystemAdapter {
     }
     return this.fetchFile(normalized);
   }
-  async writeFile(_path, _content) {
-    throw new Error("Write operations not supported in panel context");
+  async writeFile(path2, content2) {
+    var _a;
+    if (!((_a = this.hostFileSystem) == null ? void 0 : _a.writeFile)) {
+      throw new Error("Write operations not available - host adapter not configured");
+    }
+    const normalized = this.normalizePath(path2);
+    await this.hostFileSystem.writeFile(normalized, content2);
+    this.filePaths.add(normalized);
+    const parts = normalized.split("/");
+    for (let i = 1; i < parts.length; i++) {
+      this.directories.add(parts.slice(0, i).join("/"));
+    }
   }
-  async deleteFile(_path) {
-    throw new Error("Delete operations not supported in panel context");
+  async deleteFile(path2) {
+    var _a;
+    if (!((_a = this.hostFileSystem) == null ? void 0 : _a.deleteFile)) {
+      throw new Error("Delete operations not available - host adapter not configured");
+    }
+    const normalized = this.normalizePath(path2);
+    await this.hostFileSystem.deleteFile(normalized);
+    this.filePaths.delete(normalized);
   }
-  async createDir(_path, _options) {
-    throw new Error("Directory creation not supported in panel context");
+  async createDir(path2, _options) {
+    var _a;
+    if (!((_a = this.hostFileSystem) == null ? void 0 : _a.createDir)) {
+      throw new Error("Directory creation not available - host adapter not configured");
+    }
+    const normalized = this.normalizePath(path2);
+    await this.hostFileSystem.createDir(normalized);
+    this.directories.add(normalized);
   }
   async readDir(path2) {
     const normalized = this.normalizePath(path2);
@@ -5905,6 +5957,7 @@ function useKanbanData(options) {
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState(null);
   const [isBacklogProject, setIsBacklogProject] = useState(false);
+  const [canWrite, setCanWrite] = useState(false);
   const [tasksBySource, setTasksBySource] = useState(
     /* @__PURE__ */ new Map()
   );
@@ -5950,7 +6003,7 @@ function useKanbanData(options) {
   }, []);
   const fileTreeVersionRef = useRef(null);
   const loadBacklogData = useCallback(async () => {
-    var _a, _b;
+    var _a, _b, _c;
     if (!context || !actions) {
       console.log("[useKanbanData] No context provided");
       setIsBacklogProject(false);
@@ -5986,7 +6039,8 @@ function useKanbanData(options) {
       const filePaths = files.map((f) => f.path);
       const fs = new PanelFileSystemAdapter({
         fetchFile: fetchFileContent,
-        filePaths
+        filePaths,
+        hostFileSystem: (_c = context.adapters) == null ? void 0 : _c.fileSystem
       });
       const core2 = new Core({
         projectRoot: "",
@@ -6004,6 +6058,7 @@ function useKanbanData(options) {
       }
       console.log("[useKanbanData] Loading Backlog.md data with lazy loading...");
       setIsBacklogProject(true);
+      setCanWrite(fs.canWrite);
       await core2.initializeLazy(filePaths);
       coreRef.current = core2;
       const paginatedResult = await core2.getTasksBySourcePaginated({
@@ -6138,14 +6193,28 @@ function useKanbanData(options) {
     await loadBacklogData();
   }, [loadBacklogData]);
   const updateTaskStatus = useCallback(
-    async (_taskId, _newStatus) => {
+    async (taskId, newStatus) => {
+      const core2 = coreRef.current;
+      if (!core2) {
+        console.warn("[useKanbanData] Core not available for updateTaskStatus");
+        setError("Cannot update task - backlog not loaded");
+        return;
+      }
       setError(null);
-      console.warn(
-        "[useKanbanData] Task status updates not yet implemented for Backlog.md"
-      );
-      setError("Task editing is not yet supported");
+      try {
+        console.log(`[useKanbanData] Updating task ${taskId} status to "${newStatus}"`);
+        const updatedTask = await core2.updateTask(taskId, { status: newStatus });
+        if (!updatedTask) {
+          throw new Error(`Task ${taskId} not found`);
+        }
+        console.log(`[useKanbanData] Task ${taskId} updated successfully`);
+        await loadBacklogData();
+      } catch (err) {
+        console.error("[useKanbanData] Failed to update task status:", err);
+        setError(err instanceof Error ? err.message : "Failed to update task");
+      }
     },
-    []
+    [loadBacklogData]
   );
   const moveTaskOptimistic = useCallback(
     (taskId, toColumn) => {
@@ -6237,7 +6306,10 @@ function useKanbanData(options) {
     loadMoreActive,
     // Drag-and-drop support
     moveTaskOptimistic,
-    getTaskById
+    getTaskById,
+    // Write support
+    canWrite,
+    core: coreRef.current
   };
 }
 const TaskCard = ({
@@ -6830,6 +6902,519 @@ const EmptyState = ({
     )
   ] });
 };
+const TaskModal = ({
+  isOpen,
+  onClose,
+  onSave,
+  task,
+  defaultStatus = "To Do",
+  availableStatuses = ["To Do", "In Progress", "Done"],
+  availableMilestones = []
+}) => {
+  const { theme: theme2 } = useTheme();
+  const isEditing = !!task;
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+  const [status, setStatus] = useState(defaultStatus);
+  const [priority, setPriority] = useState("medium");
+  const [labels, setLabels] = useState("");
+  const [assignee, setAssignee] = useState("");
+  const [milestone, setMilestone] = useState("");
+  const [isSaving, setIsSaving] = useState(false);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    var _a, _b;
+    if (isOpen) {
+      if (task) {
+        setTitle(task.title || "");
+        setDescription(task.description || "");
+        setStatus(task.status || defaultStatus);
+        setPriority(task.priority || "medium");
+        setLabels(((_a = task.labels) == null ? void 0 : _a.join(", ")) || "");
+        setAssignee(((_b = task.assignee) == null ? void 0 : _b.join(", ")) || "");
+        setMilestone(task.milestone || "");
+      } else {
+        setTitle("");
+        setDescription("");
+        setStatus(defaultStatus);
+        setPriority("medium");
+        setLabels("");
+        setAssignee("");
+        setMilestone("");
+      }
+      setError(null);
+    }
+  }, [isOpen, task, defaultStatus]);
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (!title.trim()) {
+      setError("Title is required");
+      return;
+    }
+    setIsSaving(true);
+    setError(null);
+    try {
+      const labelsArray = labels.split(",").map((l) => l.trim()).filter(Boolean);
+      const assigneeArray = assignee.split(",").map((a) => a.trim()).filter(Boolean);
+      if (isEditing) {
+        const input = {
+          title: title.trim(),
+          description: description.trim() || void 0,
+          status,
+          priority,
+          labels: labelsArray.length > 0 ? labelsArray : void 0,
+          assignee: assigneeArray.length > 0 ? assigneeArray : void 0,
+          milestone: milestone || void 0
+        };
+        await onSave(input);
+      } else {
+        const input = {
+          title: title.trim(),
+          description: description.trim() || void 0,
+          status,
+          priority,
+          labels: labelsArray.length > 0 ? labelsArray : void 0,
+          assignee: assigneeArray.length > 0 ? assigneeArray : void 0,
+          milestone: milestone || void 0
+        };
+        await onSave(input);
+      }
+      onClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to save task");
+    } finally {
+      setIsSaving(false);
+    }
+  };
+  if (!isOpen) return null;
+  const modalContent = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        inset: 0,
+        zIndex: 9999,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "16px"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            onClick: onClose,
+            style: {
+              position: "absolute",
+              inset: 0,
+              backgroundColor: "rgba(0, 0, 0, 0.5)"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              position: "relative",
+              width: "100%",
+              maxWidth: "500px",
+              maxHeight: "90vh",
+              overflow: "auto",
+              backgroundColor: theme2.colors.background,
+              borderRadius: theme2.radii[3],
+              boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+              border: `1px solid ${theme2.colors.border}`
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    padding: "16px 20px",
+                    borderBottom: `1px solid ${theme2.colors.border}`
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "h2",
+                      {
+                        style: {
+                          margin: 0,
+                          fontSize: theme2.fontSizes[4],
+                          fontWeight: 600,
+                          color: theme2.colors.text
+                        },
+                        children: isEditing ? "Edit Task" : "New Task"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        onClick: onClose,
+                        style: {
+                          background: "none",
+                          border: "none",
+                          cursor: "pointer",
+                          padding: "4px",
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          borderRadius: theme2.radii[1],
+                          color: theme2.colors.textMuted
+                        },
+                        children: /* @__PURE__ */ jsx(X, { size: 20 })
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, children: [
+                /* @__PURE__ */ jsxs("div", { style: { padding: "20px", display: "flex", flexDirection: "column", gap: "16px" }, children: [
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx(
+                      "label",
+                      {
+                        style: {
+                          display: "block",
+                          marginBottom: "6px",
+                          fontSize: theme2.fontSizes[1],
+                          fontWeight: 500,
+                          color: theme2.colors.text
+                        },
+                        children: "Title *"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        type: "text",
+                        value: title,
+                        onChange: (e) => setTitle(e.target.value),
+                        placeholder: "Enter task title",
+                        autoFocus: true,
+                        style: {
+                          width: "100%",
+                          padding: "10px 12px",
+                          fontSize: theme2.fontSizes[2],
+                          border: `1px solid ${theme2.colors.border}`,
+                          borderRadius: theme2.radii[2],
+                          backgroundColor: theme2.colors.backgroundSecondary,
+                          color: theme2.colors.text,
+                          outline: "none",
+                          boxSizing: "border-box"
+                        }
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx(
+                      "label",
+                      {
+                        style: {
+                          display: "block",
+                          marginBottom: "6px",
+                          fontSize: theme2.fontSizes[1],
+                          fontWeight: 500,
+                          color: theme2.colors.text
+                        },
+                        children: "Description"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "textarea",
+                      {
+                        value: description,
+                        onChange: (e) => setDescription(e.target.value),
+                        placeholder: "Enter task description (markdown supported)",
+                        rows: 4,
+                        style: {
+                          width: "100%",
+                          padding: "10px 12px",
+                          fontSize: theme2.fontSizes[2],
+                          border: `1px solid ${theme2.colors.border}`,
+                          borderRadius: theme2.radii[2],
+                          backgroundColor: theme2.colors.backgroundSecondary,
+                          color: theme2.colors.text,
+                          outline: "none",
+                          resize: "vertical",
+                          fontFamily: theme2.fonts.body,
+                          boxSizing: "border-box"
+                        }
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "12px" }, children: [
+                    /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
+                      /* @__PURE__ */ jsx(
+                        "label",
+                        {
+                          style: {
+                            display: "block",
+                            marginBottom: "6px",
+                            fontSize: theme2.fontSizes[1],
+                            fontWeight: 500,
+                            color: theme2.colors.text
+                          },
+                          children: "Status"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "select",
+                        {
+                          value: status,
+                          onChange: (e) => setStatus(e.target.value),
+                          style: {
+                            width: "100%",
+                            padding: "10px 12px",
+                            fontSize: theme2.fontSizes[2],
+                            border: `1px solid ${theme2.colors.border}`,
+                            borderRadius: theme2.radii[2],
+                            backgroundColor: theme2.colors.backgroundSecondary,
+                            color: theme2.colors.text,
+                            outline: "none",
+                            cursor: "pointer"
+                          },
+                          children: availableStatuses.map((s2) => /* @__PURE__ */ jsx("option", { value: s2, children: s2 }, s2))
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
+                      /* @__PURE__ */ jsx(
+                        "label",
+                        {
+                          style: {
+                            display: "block",
+                            marginBottom: "6px",
+                            fontSize: theme2.fontSizes[1],
+                            fontWeight: 500,
+                            color: theme2.colors.text
+                          },
+                          children: "Priority"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs(
+                        "select",
+                        {
+                          value: priority,
+                          onChange: (e) => setPriority(e.target.value),
+                          style: {
+                            width: "100%",
+                            padding: "10px 12px",
+                            fontSize: theme2.fontSizes[2],
+                            border: `1px solid ${theme2.colors.border}`,
+                            borderRadius: theme2.radii[2],
+                            backgroundColor: theme2.colors.backgroundSecondary,
+                            color: theme2.colors.text,
+                            outline: "none",
+                            cursor: "pointer"
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx("option", { value: "low", children: "Low" }),
+                            /* @__PURE__ */ jsx("option", { value: "medium", children: "Medium" }),
+                            /* @__PURE__ */ jsx("option", { value: "high", children: "High" })
+                          ]
+                        }
+                      )
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx(
+                      "label",
+                      {
+                        style: {
+                          display: "block",
+                          marginBottom: "6px",
+                          fontSize: theme2.fontSizes[1],
+                          fontWeight: 500,
+                          color: theme2.colors.text
+                        },
+                        children: "Labels"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        type: "text",
+                        value: labels,
+                        onChange: (e) => setLabels(e.target.value),
+                        placeholder: "bug, feature, enhancement (comma-separated)",
+                        style: {
+                          width: "100%",
+                          padding: "10px 12px",
+                          fontSize: theme2.fontSizes[2],
+                          border: `1px solid ${theme2.colors.border}`,
+                          borderRadius: theme2.radii[2],
+                          backgroundColor: theme2.colors.backgroundSecondary,
+                          color: theme2.colors.text,
+                          outline: "none",
+                          boxSizing: "border-box"
+                        }
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx(
+                      "label",
+                      {
+                        style: {
+                          display: "block",
+                          marginBottom: "6px",
+                          fontSize: theme2.fontSizes[1],
+                          fontWeight: 500,
+                          color: theme2.colors.text
+                        },
+                        children: "Assignee"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        type: "text",
+                        value: assignee,
+                        onChange: (e) => setAssignee(e.target.value),
+                        placeholder: "user@example.com (comma-separated)",
+                        style: {
+                          width: "100%",
+                          padding: "10px 12px",
+                          fontSize: theme2.fontSizes[2],
+                          border: `1px solid ${theme2.colors.border}`,
+                          borderRadius: theme2.radii[2],
+                          backgroundColor: theme2.colors.backgroundSecondary,
+                          color: theme2.colors.text,
+                          outline: "none",
+                          boxSizing: "border-box"
+                        }
+                      }
+                    )
+                  ] }),
+                  availableMilestones.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx(
+                      "label",
+                      {
+                        style: {
+                          display: "block",
+                          marginBottom: "6px",
+                          fontSize: theme2.fontSizes[1],
+                          fontWeight: 500,
+                          color: theme2.colors.text
+                        },
+                        children: "Milestone"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs(
+                      "select",
+                      {
+                        value: milestone,
+                        onChange: (e) => setMilestone(e.target.value),
+                        style: {
+                          width: "100%",
+                          padding: "10px 12px",
+                          fontSize: theme2.fontSizes[2],
+                          border: `1px solid ${theme2.colors.border}`,
+                          borderRadius: theme2.radii[2],
+                          backgroundColor: theme2.colors.backgroundSecondary,
+                          color: theme2.colors.text,
+                          outline: "none",
+                          cursor: "pointer"
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx("option", { value: "", children: "None" }),
+                          availableMilestones.map((m) => /* @__PURE__ */ jsx("option", { value: m, children: m }, m))
+                        ]
+                      }
+                    )
+                  ] }),
+                  error && /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        padding: "10px 12px",
+                        backgroundColor: `${theme2.colors.error}15`,
+                        border: `1px solid ${theme2.colors.error}`,
+                        borderRadius: theme2.radii[2],
+                        color: theme2.colors.error,
+                        fontSize: theme2.fontSizes[1]
+                      },
+                      children: error
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      justifyContent: "flex-end",
+                      gap: "12px",
+                      padding: "16px 20px",
+                      borderTop: `1px solid ${theme2.colors.border}`
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: onClose,
+                          disabled: isSaving,
+                          style: {
+                            padding: "10px 20px",
+                            fontSize: theme2.fontSizes[2],
+                            fontWeight: 500,
+                            border: `1px solid ${theme2.colors.border}`,
+                            borderRadius: theme2.radii[2],
+                            backgroundColor: "transparent",
+                            color: theme2.colors.text,
+                            cursor: "pointer"
+                          },
+                          children: "Cancel"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs(
+                        "button",
+                        {
+                          type: "submit",
+                          disabled: isSaving,
+                          style: {
+                            display: "flex",
+                            alignItems: "center",
+                            gap: "8px",
+                            padding: "10px 20px",
+                            fontSize: theme2.fontSizes[2],
+                            fontWeight: 500,
+                            border: "none",
+                            borderRadius: theme2.radii[2],
+                            backgroundColor: theme2.colors.primary,
+                            color: "#fff",
+                            cursor: isSaving ? "wait" : "pointer",
+                            opacity: isSaving ? 0.7 : 1
+                          },
+                          children: [
+                            isSaving && /* @__PURE__ */ jsx(LoaderCircle, { size: 16, style: { animation: "spin 1s linear infinite" } }),
+                            isEditing ? "Save Changes" : "Create Task"
+                          ]
+                        }
+                      )
+                    ]
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("style", { children: `
+        @keyframes spin {
+          from { transform: rotate(0deg); }
+          to { transform: rotate(360deg); }
+        }
+      ` })
+      ]
+    }
+  );
+  if (typeof document === "undefined") return null;
+  return createPortal(modalContent, document.body);
+};
 const KanbanPanelContent = ({
   context,
   actions,
@@ -6842,6 +7427,8 @@ const KanbanPanelContent = ({
   const [isNarrowView, setIsNarrowView] = useState(false);
   const containerRef = useRef(null);
   const [activeTask, setActiveTask] = useState(null);
+  const [isTaskModalOpen, setIsTaskModalOpen] = useState(false);
+  const [editingTask, setEditingTask] = useState(void 0);
   const sensors = useSensors(
     useSensor(PointerSensor, {
       activationConstraint: {
@@ -6877,7 +7464,9 @@ const KanbanPanelContent = ({
     isBacklogProject,
     refreshData,
     moveTaskOptimistic,
-    getTaskById
+    getTaskById,
+    canWrite,
+    core: core2
   } = useKanbanData({
     context,
     actions,
@@ -6972,14 +7561,38 @@ const KanbanPanelContent = ({
       normalize: (path2) => path2.replace(/\/+/g, "/"),
       homedir: () => "/"
     };
-    const core2 = new Core({
+    const core22 = new Core({
       projectRoot: repoPath,
       adapters: { fs: fsAdapter }
     });
     const projectName = ((_b2 = context.currentScope.repository) == null ? void 0 : _b2.name) || "Backlog";
-    await core2.initProject({ projectName });
+    await core22.initProject({ projectName });
     await refreshData();
   }, [fileSystem, context.currentScope.repository, refreshData]);
+  const handleOpenNewTask = useCallback(() => {
+    setEditingTask(void 0);
+    setIsTaskModalOpen(true);
+  }, []);
+  useCallback((task) => {
+    setEditingTask(task);
+    setIsTaskModalOpen(true);
+  }, []);
+  const handleCloseTaskModal = useCallback(() => {
+    setIsTaskModalOpen(false);
+    setEditingTask(void 0);
+  }, []);
+  const handleSaveTask = useCallback(async (input) => {
+    if (!core2) {
+      throw new Error("Backlog not loaded");
+    }
+    if (editingTask) {
+      await core2.updateTask(editingTask.id, input);
+    } else {
+      await core2.createTask(input);
+    }
+    await refreshData();
+  }, [core2, editingTask, refreshData]);
+  const availableStatuses = ["To Do", "In Progress", "Done"];
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -7053,12 +7666,14 @@ const KanbanPanelContent = ({
                     status
                   );
                 }) }),
-                activeTasksState.hasMore && /* @__PURE__ */ jsx(
+                canWrite && /* @__PURE__ */ jsxs(
                   "button",
                   {
-                    onClick: loadMoreActive,
-                    disabled: activeTasksState.isLoadingMore,
+                    onClick: handleOpenNewTask,
                     style: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "6px",
                       background: theme2.colors.primary,
                       color: theme2.colors.background,
                       border: "none",
@@ -7066,6 +7681,28 @@ const KanbanPanelContent = ({
                       padding: "6px 12px",
                       fontSize: theme2.fontSizes[1],
                       fontWeight: theme2.fontWeights.medium,
+                      cursor: "pointer",
+                      transition: "opacity 0.2s ease"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(Plus, { size: 14 }),
+                      "Add Task"
+                    ]
+                  }
+                ),
+                activeTasksState.hasMore && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: loadMoreActive,
+                    disabled: activeTasksState.isLoadingMore,
+                    style: {
+                      background: theme2.colors.backgroundSecondary,
+                      color: theme2.colors.text,
+                      border: `1px solid ${theme2.colors.border}`,
+                      borderRadius: theme2.radii[2],
+                      padding: "6px 12px",
+                      fontSize: theme2.fontSizes[1],
+                      fontWeight: theme2.fontWeights.medium,
                       cursor: activeTasksState.isLoadingMore ? "wait" : "pointer",
                       opacity: activeTasksState.isLoadingMore ? 0.7 : 1,
                       transition: "opacity 0.2s ease"
@@ -7247,6 +7884,17 @@ const KanbanPanelContent = ({
               )
             ]
           }
+        ),
+        /* @__PURE__ */ jsx(
+          TaskModal,
+          {
+            isOpen: isTaskModalOpen,
+            onClose: handleCloseTaskModal,
+            onSave: handleSaveTask,
+            task: editingTask,
+            defaultStatus: "To Do",
+            availableStatuses
+          }
         )
       ]
     }
@@ -51590,6 +52238,7 @@ function useMilestoneData(options) {
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState(null);
   const [isBacklogProject, setIsBacklogProject] = useState(false);
+  const [canWrite, setCanWrite] = useState(false);
   const coreRef = useRef(null);
   const activeFilePathRef = useRef(null);
   const contextRef = useRef(context);
@@ -51629,7 +52278,7 @@ function useMilestoneData(options) {
   }, []);
   const fileTreeVersionRef = useRef(null);
   const loadMilestoneData = useCallback(async () => {
-    var _a, _b;
+    var _a, _b, _c;
     if (!context || !actions) {
       console.log("[useMilestoneData] No context provided");
       setIsBacklogProject(false);
@@ -51661,7 +52310,8 @@ function useMilestoneData(options) {
       const filePaths = files.map((f) => f.path);
       const fs = new PanelFileSystemAdapter({
         fetchFile: fetchFileContent,
-        filePaths
+        filePaths,
+        hostFileSystem: (_c = context.adapters) == null ? void 0 : _c.fileSystem
       });
       const core2 = new Core({
         projectRoot: "",
@@ -51677,6 +52327,7 @@ function useMilestoneData(options) {
       }
       console.log("[useMilestoneData] Loading milestone data...");
       setIsBacklogProject(true);
+      setCanWrite(fs.canWrite);
       await core2.initializeLazy(filePaths);
       coreRef.current = core2;
       console.log("[useMilestoneData] Core instance:", core2);
@@ -51784,7 +52435,10 @@ function useMilestoneData(options) {
     expandMilestone,
     collapseMilestone,
     toggleMilestone,
-    refreshData
+    refreshData,
+    // Write support
+    canWrite,
+    core: coreRef.current
   };
 }
 const MilestoneCard = ({
@@ -52137,6 +52791,307 @@ const MilestoneCard = ({
     }
   );
 };
+const MilestoneModal = ({
+  isOpen,
+  onClose,
+  onSave,
+  milestone
+}) => {
+  const { theme: theme2 } = useTheme();
+  const isEditing = !!milestone;
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+  const [isSaving, setIsSaving] = useState(false);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    if (isOpen) {
+      if (milestone) {
+        setTitle(milestone.title || "");
+        setDescription(milestone.description || "");
+      } else {
+        setTitle("");
+        setDescription("");
+      }
+      setError(null);
+    }
+  }, [isOpen, milestone]);
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (!title.trim()) {
+      setError("Title is required");
+      return;
+    }
+    setIsSaving(true);
+    setError(null);
+    try {
+      if (isEditing) {
+        const input = {
+          title: title.trim(),
+          description: description.trim() || void 0
+        };
+        await onSave(input);
+      } else {
+        const input = {
+          title: title.trim(),
+          description: description.trim() || void 0
+        };
+        await onSave(input);
+      }
+      onClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to save milestone");
+    } finally {
+      setIsSaving(false);
+    }
+  };
+  if (!isOpen) return null;
+  const modalContent = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        inset: 0,
+        zIndex: 9999,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "16px"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            onClick: onClose,
+            style: {
+              position: "absolute",
+              inset: 0,
+              backgroundColor: "rgba(0, 0, 0, 0.5)"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              position: "relative",
+              width: "100%",
+              maxWidth: "500px",
+              maxHeight: "90vh",
+              overflow: "auto",
+              backgroundColor: theme2.colors.background,
+              borderRadius: theme2.radii[3],
+              boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+              border: `1px solid ${theme2.colors.border}`
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    padding: "16px 20px",
+                    borderBottom: `1px solid ${theme2.colors.border}`
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "h2",
+                      {
+                        style: {
+                          margin: 0,
+                          fontSize: theme2.fontSizes[4],
+                          fontWeight: 600,
+                          color: theme2.colors.text
+                        },
+                        children: isEditing ? "Edit Milestone" : "New Milestone"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        onClick: onClose,
+                        style: {
+                          background: "none",
+                          border: "none",
+                          cursor: "pointer",
+                          padding: "4px",
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          borderRadius: theme2.radii[1],
+                          color: theme2.colors.textMuted
+                        },
+                        children: /* @__PURE__ */ jsx(X, { size: 20 })
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, children: [
+                /* @__PURE__ */ jsxs("div", { style: { padding: "20px", display: "flex", flexDirection: "column", gap: "16px" }, children: [
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx(
+                      "label",
+                      {
+                        style: {
+                          display: "block",
+                          marginBottom: "6px",
+                          fontSize: theme2.fontSizes[1],
+                          fontWeight: 500,
+                          color: theme2.colors.text
+                        },
+                        children: "Title *"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        type: "text",
+                        value: title,
+                        onChange: (e) => setTitle(e.target.value),
+                        placeholder: "Enter milestone title",
+                        autoFocus: true,
+                        style: {
+                          width: "100%",
+                          padding: "10px 12px",
+                          fontSize: theme2.fontSizes[2],
+                          border: `1px solid ${theme2.colors.border}`,
+                          borderRadius: theme2.radii[2],
+                          backgroundColor: theme2.colors.backgroundSecondary,
+                          color: theme2.colors.text,
+                          outline: "none",
+                          boxSizing: "border-box"
+                        }
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx(
+                      "label",
+                      {
+                        style: {
+                          display: "block",
+                          marginBottom: "6px",
+                          fontSize: theme2.fontSizes[1],
+                          fontWeight: 500,
+                          color: theme2.colors.text
+                        },
+                        children: "Description"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "textarea",
+                      {
+                        value: description,
+                        onChange: (e) => setDescription(e.target.value),
+                        placeholder: "Enter milestone description (markdown supported)",
+                        rows: 4,
+                        style: {
+                          width: "100%",
+                          padding: "10px 12px",
+                          fontSize: theme2.fontSizes[2],
+                          border: `1px solid ${theme2.colors.border}`,
+                          borderRadius: theme2.radii[2],
+                          backgroundColor: theme2.colors.backgroundSecondary,
+                          color: theme2.colors.text,
+                          outline: "none",
+                          resize: "vertical",
+                          fontFamily: theme2.fonts.body,
+                          boxSizing: "border-box"
+                        }
+                      }
+                    )
+                  ] }),
+                  error && /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        padding: "10px 12px",
+                        backgroundColor: `${theme2.colors.error}15`,
+                        border: `1px solid ${theme2.colors.error}`,
+                        borderRadius: theme2.radii[2],
+                        color: theme2.colors.error,
+                        fontSize: theme2.fontSizes[1]
+                      },
+                      children: error
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      justifyContent: "flex-end",
+                      gap: "12px",
+                      padding: "16px 20px",
+                      borderTop: `1px solid ${theme2.colors.border}`
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: onClose,
+                          disabled: isSaving,
+                          style: {
+                            padding: "10px 20px",
+                            fontSize: theme2.fontSizes[2],
+                            fontWeight: 500,
+                            border: `1px solid ${theme2.colors.border}`,
+                            borderRadius: theme2.radii[2],
+                            backgroundColor: "transparent",
+                            color: theme2.colors.text,
+                            cursor: "pointer"
+                          },
+                          children: "Cancel"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs(
+                        "button",
+                        {
+                          type: "submit",
+                          disabled: isSaving,
+                          style: {
+                            display: "flex",
+                            alignItems: "center",
+                            gap: "8px",
+                            padding: "10px 20px",
+                            fontSize: theme2.fontSizes[2],
+                            fontWeight: 500,
+                            border: "none",
+                            borderRadius: theme2.radii[2],
+                            backgroundColor: theme2.colors.primary,
+                            color: "#fff",
+                            cursor: isSaving ? "wait" : "pointer",
+                            opacity: isSaving ? 0.7 : 1
+                          },
+                          children: [
+                            isSaving && /* @__PURE__ */ jsx(LoaderCircle, { size: 16, style: { animation: "spin 1s linear infinite" } }),
+                            isEditing ? "Save Changes" : "Create Milestone"
+                          ]
+                        }
+                      )
+                    ]
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("style", { children: `
+        @keyframes spin {
+          from { transform: rotate(0deg); }
+          to { transform: rotate(360deg); }
+        }
+      ` })
+      ]
+    }
+  );
+  if (typeof document === "undefined") return null;
+  return createPortal(modalContent, document.body);
+};
 const MilestonePanelContent = ({
   context,
   actions,
@@ -52144,13 +53099,17 @@ const MilestonePanelContent = ({
 }) => {
   const { theme: theme2 } = useTheme();
   const [isRefreshing, setIsRefreshing] = useState(false);
+  const [isMilestoneModalOpen, setIsMilestoneModalOpen] = useState(false);
+  const [editingMilestone, setEditingMilestone] = useState(void 0);
   const {
     milestones,
     isLoading,
     error,
     isBacklogProject,
     toggleMilestone,
-    refreshData
+    refreshData,
+    canWrite,
+    core: core2
   } = useMilestoneData({
     context,
     actions
@@ -52173,6 +53132,29 @@ const MilestonePanelContent = ({
       setIsRefreshing(false);
     }
   };
+  const handleOpenNewMilestone = useCallback(() => {
+    setEditingMilestone(void 0);
+    setIsMilestoneModalOpen(true);
+  }, []);
+  useCallback((milestone) => {
+    setEditingMilestone(milestone);
+    setIsMilestoneModalOpen(true);
+  }, []);
+  const handleCloseMilestoneModal = useCallback(() => {
+    setIsMilestoneModalOpen(false);
+    setEditingMilestone(void 0);
+  }, []);
+  const handleSaveMilestone = useCallback(async (input) => {
+    if (!core2) {
+      throw new Error("Backlog not loaded");
+    }
+    if (editingMilestone) {
+      await core2.updateMilestone(editingMilestone.id, input);
+    } else {
+      await core2.createMilestone(input);
+    }
+    await refreshData();
+  }, [core2, editingMilestone, refreshData]);
   const totalMilestones = milestones.length;
   const totalTasks = milestones.reduce((sum, m) => sum + m.milestone.tasks.length, 0);
   return /* @__PURE__ */ jsxs(
@@ -52239,6 +53221,30 @@ const MilestonePanelContent = ({
                     ]
                   }
                 ),
+                canWrite && /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    onClick: handleOpenNewMilestone,
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "6px",
+                      background: theme2.colors.primary,
+                      color: theme2.colors.background,
+                      border: "none",
+                      borderRadius: theme2.radii[2],
+                      padding: "6px 12px",
+                      fontSize: theme2.fontSizes[1],
+                      fontWeight: theme2.fontWeights.medium,
+                      cursor: "pointer",
+                      transition: "opacity 0.2s ease"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(Plus, { size: 14 }),
+                      "Add Milestone"
+                    ]
+                  }
+                ),
                 /* @__PURE__ */ jsx(
                   "button",
                   {
@@ -52373,7 +53379,16 @@ const MilestonePanelContent = ({
           @keyframes spin {
             to { transform: rotate(360deg); }
           }
-        ` })
+        ` }),
+        /* @__PURE__ */ jsx(
+          MilestoneModal,
+          {
+            isOpen: isMilestoneModalOpen,
+            onClose: handleCloseMilestoneModal,
+            onSave: handleSaveMilestone,
+            milestone: editingMilestone
+          }
+        )
       ]
     }
   );