@industry-theme/backlogmd-kanban-panel 1.0.30 → 1.0.32

package/dist/panels/TaskDetailPanel.d.ts

@@ -1,5 +1,17 @@
 import React from 'react';
 import type { PanelComponentProps } from '../types';
+/**
+ * Configuration options for TaskDetailPanel
+ */
+export interface TaskDetailPanelConfig {
+    editable?: boolean;
+}
+/**
+ * Extended props for TaskDetailPanel that includes optional config
+ */
+export interface TaskDetailPanelProps extends PanelComponentProps {
+    config?: TaskDetailPanelConfig;
+}
 /**
  * TaskDetailPanel - A panel for viewing task details from Backlog.md
  *
@@ -10,5 +22,5 @@ import type { PanelComponentProps } from '../types';
  *
  * Listens for 'task:selected' events from other panels (e.g., KanbanPanel)
  */
-export declare const TaskDetailPanel: React.FC<PanelComponentProps>;
+export declare const TaskDetailPanel: React.FC<TaskDetailPanelProps>;
 //# sourceMappingURL=TaskDetailPanel.d.ts.map

package/dist/panels/TaskDetailPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TaskDetailPanel.d.ts","sourceRoot":"","sources":["../../src/panels/TaskDetailPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,OAAO,KAAK,EAAE,mBAAmB,EAAqB,MAAM,UAAU,CAAC;AA+IvE;;;;;;;;;GASG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAkRzD,CAAC"}
+{"version":3,"file":"TaskDetailPanel.d.ts","sourceRoot":"","sources":["../../src/panels/TaskDetailPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAIhE,OAAO,KAAK,EAAE,mBAAmB,EAAqB,MAAM,UAAU,CAAC;AAiFvE;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,oBAAqB,SAAQ,mBAAmB;IAC/D,MAAM,CAAC,EAAE,qBAAqB,CAAC;CAChC;AA0ED;;;;;;;;;GASG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAwd1D,CAAC"}

package/dist/panels/TaskDetailPanel.stories.d.ts

@@ -2,11 +2,12 @@ import React from 'react';
 import type { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
-    component: React.FC<import("@principal-ade/panel-framework-core").PanelComponentProps>;
+    component: React.FC<import("./TaskDetailPanel").TaskDetailPanelProps>;
     parameters: {
         layout: string;
     };
     decorators: ((Story: import("storybook/internal/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
+        config?: import("./TaskDetailPanel").TaskDetailPanelConfig | undefined;
         context: import("@principal-ade/panel-framework-core").PanelContextValue;
         actions: import("@principal-ade/panel-framework-core").PanelActions;
         events: import("@principal-ade/panel-framework-core").PanelEventEmitter;

package/dist/panels/TaskDetailPanel.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TaskDetailPanel.stories.d.ts","sourceRoot":"","sources":["../../src/panels/TaskDetailPanel.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAW5D,QAAA,MAAM,IAAI;;;;;;;;;;;;CAkB8B,CAAC;AAEzC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAkFnC,eAAO,MAAM,UAAU,EAAE,KAaxB,CAAC;AAQF,eAAO,MAAM,gBAAgB,EAAE,KAoB9B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KA6B9B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KA4BzB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KA2B5B,CAAC"}
+{"version":3,"file":"TaskDetailPanel.stories.d.ts","sourceRoot":"","sources":["../../src/panels/TaskDetailPanel.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAW5D,QAAA,MAAM,IAAI;;;;;;;;;;;;;CAkB8B,CAAC;AAEzC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAkFnC,eAAO,MAAM,UAAU,EAAE,KAaxB,CAAC;AAQF,eAAO,MAAM,gBAAgB,EAAE,KAoB9B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KA6B9B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KA4BzB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KA2B5B,CAAC"}

package/dist/panels/kanban/components/KanbanColumn.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"KanbanColumn.d.ts","sourceRoot":"","sources":["../../../../src/panels/kanban/components/KanbanColumn.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAE7C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAE3D,UAAU,iBAAiB;IACzB,mDAAmD;IACnD,QAAQ,EAAE,YAAY,CAAC;IACvB,mCAAmC;IACnC,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,4DAA4D;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oDAAoD;IACpD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kCAAkC;IAClC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACnC,sEAAsE;IACtE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iCAAiC;IACjC,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAChC;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAuKpD,CAAC"}
+{"version":3,"file":"KanbanColumn.d.ts","sourceRoot":"","sources":["../../../../src/panels/kanban/components/KanbanColumn.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAE7C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAE3D,UAAU,iBAAiB;IACzB,mDAAmD;IACnD,QAAQ,EAAE,YAAY,CAAC;IACvB,mCAAmC;IACnC,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,4DAA4D;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oDAAoD;IACpD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kCAAkC;IAClC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACnC,sEAAsE;IACtE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iCAAiC;IACjC,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAChC;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAyKpD,CAAC"}

package/dist/panels.bundle.js

@@ -3740,41 +3740,67 @@ 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 8V4H8", key: "hb8ula" }],
+  ["rect", { width: "16", height: "12", x: "4", y: "8", rx: "2", key: "enze0r" }],
+  ["path", { d: "M2 14h2", key: "vft8re" }],
+  ["path", { d: "M20 14h2", key: "4cs60a" }],
+  ["path", { d: "M15 13v2", key: "1xurst" }],
+  ["path", { d: "M9 13v2", key: "rq6x2g" }]
+];
+const Bot = createLucideIcon("bot", __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$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$m);
+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$l = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
-const Check = createLucideIcon("check", __iconNode$l);
+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$k = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
-const ChevronDown = createLucideIcon("chevron-down", __iconNode$k);
+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$j = [
+const __iconNode$k = [
   ["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$j);
+const CircleAlert = createLucideIcon("circle-alert", __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$j = [
+  ["path", { d: "M21.801 10A10 10 0 1 1 17 3.335", key: "yps3ct" }],
+  ["path", { d: "m9 11 3 3L22 4", key: "1pflzl" }]
+];
+const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$j);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
@@ -4070,6 +4096,7 @@ function parseTaskMarkdown(content2, filePath) {
     labels: frontmatter.labels || [],
     milestone: frontmatter.milestone,
     dependencies: frontmatter.dependencies || [],
+    references: frontmatter.references || [],
     parentTaskId: frontmatter.parentTaskId,
     subtasks: frontmatter.subtasks,
     branch: frontmatter.branch,
@@ -4102,6 +4129,9 @@ function serializeTaskMarkdown(task) {
   if (task.dependencies && task.dependencies.length > 0) {
     lines.push(`dependencies: [${task.dependencies.join(", ")}]`);
   }
+  if (task.references && task.references.length > 0) {
+    lines.push(`references: [${task.references.join(", ")}]`);
+  }
   if (task.parentTaskId) {
     lines.push(`parentTaskId: ${task.parentTaskId}`);
   }
@@ -4197,6 +4227,7 @@ function parseFrontmatter(raw2) {
       case "assignee":
       case "labels":
       case "dependencies":
+      case "references":
       case "subtasks":
         result[key2] = parseArrayValue(value);
         break;
@@ -5469,6 +5500,7 @@ class Core {
       labels: input.labels || [],
       milestone: input.milestone,
       dependencies: input.dependencies || [],
+      references: input.references || [],
       parentTaskId: input.parentTaskId,
       description: input.description,
       implementationPlan: input.implementationPlan,
@@ -5520,7 +5552,8 @@ class Core {
       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
+      dependencies: input.dependencies ?? existing.dependencies,
+      references: input.references ?? existing.references ?? []
     };
     if (input.labels) {
       updated.labels = input.labels;
@@ -5547,6 +5580,15 @@ class Core {
         return !((_a = input.removeDependencies) == null ? void 0 : _a.includes(d));
       });
     }
+    if (input.addReferences) {
+      updated.references = [.../* @__PURE__ */ new Set([...updated.references || [], ...input.addReferences])];
+    }
+    if (input.removeReferences) {
+      updated.references = (updated.references || []).filter((r2) => {
+        var _a;
+        return !((_a = input.removeReferences) == null ? void 0 : _a.includes(r2));
+      });
+    }
     if (input.acceptanceCriteria) {
       updated.acceptanceCriteriaItems = input.acceptanceCriteria.map((ac, i) => ({
         index: i + 1,
@@ -6354,7 +6396,7 @@ const KanbanColumn = ({
         transition: "background-color 0.2s ease, border 0.2s ease"
       },
       children: [
-        /* @__PURE__ */ jsxs(
+        !fullWidth && /* @__PURE__ */ jsxs(
           "div",
           {
             style: {
@@ -49328,7 +49370,8 @@ var createIndustryMarkdownComponents = ({
   enableHtmlPopout,
   slideHeaderMarginTopOverride,
   index: index2,
-  repositoryInfo
+  repositoryInfo,
+  editable = false
 }) => {
   const getLuminance = (hex) => {
     const rgb = hex.replace("#", "").match(/.{2}/g);
@@ -49460,19 +49503,20 @@ var createIndustryMarkdownComponents = ({
           checked: isChecked,
           onChange: handleChange,
           onClick: (e) => e.stopPropagation(),
+          disabled: !editable,
           style: {
             marginRight: theme2.space[2],
             marginTop: theme2.space[1],
             width: "16px",
             height: "16px",
-            cursor: "pointer"
+            cursor: editable ? "pointer" : "default"
           },
           id
         }), /* @__PURE__ */ React2__default.createElement("label", {
           htmlFor: id,
           style: {
             flex: 1,
-            cursor: "pointer",
+            cursor: editable ? "pointer" : "default",
             color: isChecked ? theme2.colors.textMuted : "inherit",
             lineHeight: theme2.lineHeights.relaxed
           }
@@ -50554,7 +50598,8 @@ var IndustryMarkdownSlide = React2__default.memo(function IndustryMarkdownSlide2
   maxScreenWidth: _maxScreenWidth,
   enableKeyboardScrolling = true,
   keyboardScrollConfig,
-  repositoryInfo
+  repositoryInfo,
+  editable = false
 }) {
   const slideRef = useRef(null);
   const scrollPositionsRef = useRef(/* @__PURE__ */ new Map());
@@ -50910,7 +50955,8 @@ var IndustryMarkdownSlide = React2__default.memo(function IndustryMarkdownSlide2
       enableHtmlPopout,
       slideHeaderMarginTopOverride,
       index: chunkIndex,
-      repositoryInfo
+      repositoryInfo,
+      editable
     });
     if (searchQuery) {
       return {
@@ -50943,7 +50989,8 @@ var IndustryMarkdownSlide = React2__default.memo(function IndustryMarkdownSlide2
     enableHtmlPopout,
     slideHeaderMarginTopOverride,
     repositoryInfo,
-    searchQuery
+    searchQuery,
+    editable
   ]);
   return /* @__PURE__ */ React2__default.createElement("div", {
     className: "markdown-slide",
@@ -52728,7 +52775,8 @@ var DocumentView = ({
   repositoryInfo,
   fontSizeScale,
   theme: theme2,
-  transparentBackground = false
+  transparentBackground = false,
+  editable = false
 }) => {
   const containerRef = useRef(null);
   const backgroundColor = transparentBackground ? "transparent" : theme2.colors.background;
@@ -52760,7 +52808,8 @@ var DocumentView = ({
     fontSizeScale,
     handlePromptCopy,
     repositoryInfo,
-    transparentBackground
+    transparentBackground,
+    editable
   })));
 };
 function getTaskBodyMarkdown(task, options = {}) {
@@ -52863,13 +52912,42 @@ const MetadataRow = ({ icon, label, value }) => {
     }
   );
 };
-const TaskDetailPanel = ({ context, actions, events: events2 }) => {
+const TaskDetailPanel = ({ context, actions, events: events2, config }) => {
+  var _a;
   const { theme: theme2 } = useTheme();
   const [selectedTask, setSelectedTask] = useState(null);
+  const [claudeAssignment, setClaudeAssignment] = useState({ status: "idle" });
+  const { editable = false } = config ?? {};
+  const repoCapabilities = context.getRepositorySlice("repoCapabilities");
+  const hasClaudeWorkflow = ((_a = repoCapabilities == null ? void 0 : repoCapabilities.data) == null ? void 0 : _a.hasClaudeWorkflow) ?? false;
+  const handleAssignToClaude = useCallback(() => {
+    if (!events2 || !selectedTask) return;
+    setClaudeAssignment({ status: "loading" });
+    events2.emit({
+      type: "task:assign-to-claude",
+      source: "task-detail-panel",
+      timestamp: Date.now(),
+      payload: {
+        taskId: selectedTask.id,
+        task: {
+          id: selectedTask.id,
+          title: selectedTask.title,
+          description: selectedTask.description,
+          priority: selectedTask.priority,
+          labels: selectedTask.labels,
+          assignee: selectedTask.assignee,
+          acceptanceCriteria: selectedTask.acceptanceCriteriaItems,
+          implementationPlan: selectedTask.implementationPlan,
+          rawContent: selectedTask.rawContent
+        }
+      }
+    });
+  }, [events2, selectedTask]);
   useEffect(() => {
     if (!events2) return;
     const handleTaskSelected = (event) => {
       setSelectedTask(event.payload.task);
+      setClaudeAssignment({ status: "idle" });
     };
     const unsubscribe = events2.on("task:selected", handleTaskSelected);
     return () => {
@@ -52878,6 +52956,35 @@ const TaskDetailPanel = ({ context, actions, events: events2 }) => {
       }
     };
   }, [events2]);
+  useEffect(() => {
+    if (!events2) return;
+    const unsubscribers = [
+      events2.on("task:assigned-to-claude", (event) => {
+        const payload = event.payload;
+        if (payload.taskId === (selectedTask == null ? void 0 : selectedTask.id)) {
+          setClaudeAssignment({
+            status: "success",
+            issueNumber: payload.issueNumber,
+            issueUrl: payload.issueUrl
+          });
+        }
+      }),
+      events2.on("task:assign-to-claude:error", (event) => {
+        const payload = event.payload;
+        if (payload.taskId === (selectedTask == null ? void 0 : selectedTask.id)) {
+          setClaudeAssignment({
+            status: "error",
+            error: payload.error
+          });
+        }
+      })
+    ];
+    return () => {
+      unsubscribers.forEach((unsub) => {
+        if (typeof unsub === "function") unsub();
+      });
+    };
+  }, [events2, selectedTask == null ? void 0 : selectedTask.id]);
   const handleBack = () => {
     setSelectedTask(null);
     if (events2) {
@@ -52982,38 +53089,159 @@ const TaskDetailPanel = ({ context, actions, events: events2 }) => {
                       ),
                       /* @__PURE__ */ jsx(StatusBadge, { status: selectedTask.status })
                     ] }),
-                    /* @__PURE__ */ jsx(
-                      "button",
-                      {
-                        onClick: handleBack,
-                        style: {
-                          display: "flex",
-                          alignItems: "center",
-                          justifyContent: "center",
-                          width: "32px",
-                          height: "32px",
-                          border: `1px solid ${theme2.colors.border}`,
-                          borderRadius: theme2.radii[1],
-                          background: theme2.colors.surface,
-                          cursor: "pointer",
-                          color: theme2.colors.textSecondary,
-                          transition: "all 0.2s ease"
-                        },
-                        onMouseEnter: (e) => {
-                          e.currentTarget.style.background = theme2.colors.backgroundSecondary;
-                          e.currentTarget.style.color = theme2.colors.text;
-                        },
-                        onMouseLeave: (e) => {
-                          e.currentTarget.style.background = theme2.colors.surface;
-                          e.currentTarget.style.color = theme2.colors.textSecondary;
-                        },
-                        title: "Close",
-                        children: /* @__PURE__ */ jsx(X, { size: 16 })
-                      }
-                    )
+                    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+                      hasClaudeWorkflow && claudeAssignment.status === "idle" && /* @__PURE__ */ jsxs(
+                        "button",
+                        {
+                          onClick: handleAssignToClaude,
+                          style: {
+                            display: "flex",
+                            alignItems: "center",
+                            gap: "6px",
+                            padding: "6px 12px",
+                            border: `1px solid ${theme2.colors.primary}`,
+                            borderRadius: theme2.radii[1],
+                            background: "transparent",
+                            cursor: "pointer",
+                            color: theme2.colors.primary,
+                            fontSize: theme2.fontSizes[1],
+                            fontWeight: theme2.fontWeights.medium,
+                            transition: "all 0.2s ease"
+                          },
+                          onMouseEnter: (e) => {
+                            e.currentTarget.style.background = theme2.colors.primary;
+                            e.currentTarget.style.color = theme2.colors.background;
+                          },
+                          onMouseLeave: (e) => {
+                            e.currentTarget.style.background = "transparent";
+                            e.currentTarget.style.color = theme2.colors.primary;
+                          },
+                          title: "Assign to Claude",
+                          children: [
+                            /* @__PURE__ */ jsx(Bot, { size: 14 }),
+                            "Assign to Claude"
+                          ]
+                        }
+                      ),
+                      claudeAssignment.status === "loading" && /* @__PURE__ */ jsxs(
+                        "div",
+                        {
+                          style: {
+                            display: "flex",
+                            alignItems: "center",
+                            gap: "6px",
+                            padding: "6px 12px",
+                            color: theme2.colors.textSecondary,
+                            fontSize: theme2.fontSizes[1]
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx(LoaderCircle, { size: 14, style: { animation: "spin 1s linear infinite" } }),
+                            "Assigning..."
+                          ]
+                        }
+                      ),
+                      claudeAssignment.status === "success" && /* @__PURE__ */ jsxs(
+                        "a",
+                        {
+                          href: claudeAssignment.issueUrl,
+                          target: "_blank",
+                          rel: "noopener noreferrer",
+                          style: {
+                            display: "flex",
+                            alignItems: "center",
+                            gap: "6px",
+                            padding: "6px 12px",
+                            border: `1px solid ${theme2.colors.success}`,
+                            borderRadius: theme2.radii[1],
+                            background: `${theme2.colors.success}15`,
+                            color: theme2.colors.success,
+                            fontSize: theme2.fontSizes[1],
+                            fontWeight: theme2.fontWeights.medium,
+                            textDecoration: "none",
+                            transition: "all 0.2s ease"
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx(CircleCheckBig, { size: 14 }),
+                            "Issue #",
+                            claudeAssignment.issueNumber
+                          ]
+                        }
+                      ),
+                      claudeAssignment.status === "error" && /* @__PURE__ */ jsxs(
+                        "div",
+                        {
+                          style: {
+                            display: "flex",
+                            alignItems: "center",
+                            gap: "6px",
+                            padding: "6px 12px",
+                            border: `1px solid ${theme2.colors.error}`,
+                            borderRadius: theme2.radii[1],
+                            background: `${theme2.colors.error}15`,
+                            color: theme2.colors.error,
+                            fontSize: theme2.fontSizes[1]
+                          },
+                          title: claudeAssignment.error,
+                          children: [
+                            /* @__PURE__ */ jsx(CircleAlert, { size: 14 }),
+                            "Failed",
+                            /* @__PURE__ */ jsx(
+                              "button",
+                              {
+                                onClick: () => setClaudeAssignment({ status: "idle" }),
+                                style: {
+                                  background: "none",
+                                  border: "none",
+                                  color: theme2.colors.error,
+                                  cursor: "pointer",
+                                  padding: "0 0 0 4px",
+                                  fontSize: theme2.fontSizes[0],
+                                  textDecoration: "underline"
+                                },
+                                children: "Retry"
+                              }
+                            )
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          onClick: handleBack,
+                          style: {
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            width: "32px",
+                            height: "32px",
+                            border: `1px solid ${theme2.colors.border}`,
+                            borderRadius: theme2.radii[1],
+                            background: theme2.colors.surface,
+                            cursor: "pointer",
+                            color: theme2.colors.textSecondary,
+                            transition: "all 0.2s ease"
+                          },
+                          onMouseEnter: (e) => {
+                            e.currentTarget.style.background = theme2.colors.backgroundSecondary;
+                            e.currentTarget.style.color = theme2.colors.text;
+                          },
+                          onMouseLeave: (e) => {
+                            e.currentTarget.style.background = theme2.colors.surface;
+                            e.currentTarget.style.color = theme2.colors.textSecondary;
+                          },
+                          title: "Close",
+                          children: /* @__PURE__ */ jsx(X, { size: 16 })
+                        }
+                      )
+                    ] })
                   ]
                 }
               ),
+              /* @__PURE__ */ jsx("style", { children: `
+            @keyframes spin {
+              to { transform: rotate(360deg); }
+            }
+          ` }),
               /* @__PURE__ */ jsx(
                 "h1",
                 {
@@ -53119,7 +53347,8 @@ const TaskDetailPanel = ({ context, actions, events: events2 }) => {
                 content: bodyMarkdown,
                 theme: theme2,
                 maxWidth: "100%",
-                transparentBackground: true
+                transparentBackground: true,
+                editable
               }
             ) : /* @__PURE__ */ jsx(
               "div",