@industry-theme/github-panels 0.1.52 → 0.1.54

package/dist/panels.bundle.js

@@ -130,7 +130,7 @@ 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$E = [
+const __iconNode$F = [
   ["path", { d: "M12 7v14", key: "1akyts" }],
   [
     "path",
@@ -140,14 +140,14 @@ const __iconNode$E = [
     }
   ]
 ];
-const BookOpen = createLucideIcon("book-open", __iconNode$E);
+const BookOpen = createLucideIcon("book-open", __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$D = [
+const __iconNode$E = [
   ["path", { d: "M10 12h4", key: "a56b0p" }],
   ["path", { d: "M10 8h4", key: "1sr2af" }],
   ["path", { d: "M14 21v-3a2 2 0 0 0-4 0v3", key: "1rgiei" }],
@@ -160,56 +160,67 @@ const __iconNode$D = [
   ],
   ["path", { d: "M6 21V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v16", key: "16ra0t" }]
 ];
-const Building2 = createLucideIcon("building-2", __iconNode$D);
+const Building2 = createLucideIcon("building-2", __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$C = [
+const __iconNode$D = [
   ["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$C);
+const Calendar = createLucideIcon("calendar", __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$B = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
-const Check = createLucideIcon("check", __iconNode$B);
+const __iconNode$C = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
+const Check = createLucideIcon("check", __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$A = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
-const ChevronDown = createLucideIcon("chevron-down", __iconNode$A);
+const __iconNode$B = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+const ChevronDown = createLucideIcon("chevron-down", __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$z = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
-const ChevronRight = createLucideIcon("chevron-right", __iconNode$z);
+const __iconNode$A = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
+const ChevronRight = createLucideIcon("chevron-right", __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$y = [
+const __iconNode$z = [
   ["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$y);
+const CircleAlert = createLucideIcon("circle-alert", __iconNode$z);
+/**
+ * @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$y = [
+  ["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$y);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
@@ -49138,25 +49149,67 @@ const formatDate$1 = (dateString) => {
   return `${years} ${years === 1 ? "year" : "years"} ago`;
 };
 const GitHubIssueDetailPanelContent = ({ events }) => {
+  var _a;
   const { theme: theme2 } = useTheme();
   const [selectedIssue, setSelectedIssue] = useState(null);
   const [owner, setOwner] = useState("");
   const [repo, setRepo] = useState("");
+  const [taskCreation, setTaskCreation] = useState({ status: "idle" });
+  const [showTaskTypeModal, setShowTaskTypeModal] = useState(false);
+  const [modalStep, setModalStep] = useState("type");
+  const [selectedTaskType, setSelectedTaskType] = useState(null);
+  const [additionalInstructions, setAdditionalInstructions] = useState("");
   const panelRef = useRef(null);
   gt(
     "github-issue-detail",
     events,
     () => {
-      var _a;
-      return (_a = panelRef.current) == null ? void 0 : _a.focus();
+      var _a2;
+      return (_a2 = panelRef.current) == null ? void 0 : _a2.focus();
     }
   );
+  const handleCreateTask = () => {
+    setShowTaskTypeModal(true);
+    setModalStep("type");
+    setSelectedTaskType(null);
+    setAdditionalInstructions("");
+  };
+  const handleSelectTaskType = (taskType2) => {
+    setSelectedTaskType(taskType2);
+    setModalStep("instructions");
+  };
+  const handleSubmitTask = () => {
+    if (!events || !selectedIssue || !selectedTaskType) return;
+    setShowTaskTypeModal(false);
+    setTaskCreation({ status: "loading" });
+    events.emit({
+      type: "issue:create-task",
+      source: "github-issue-detail-panel",
+      timestamp: Date.now(),
+      payload: {
+        issue: selectedIssue,
+        owner,
+        repo,
+        taskType: selectedTaskType,
+        additionalInstructions: additionalInstructions.trim() || void 0
+      }
+    });
+    setModalStep("type");
+    setSelectedTaskType(null);
+    setAdditionalInstructions("");
+  };
+  const handleBackToTaskType = () => {
+    setModalStep("type");
+    setSelectedTaskType(null);
+    setAdditionalInstructions("");
+  };
   useEffect(() => {
     if (!events) return;
     const handleIssueSelected = (event) => {
       setSelectedIssue(event.payload.issue);
       setOwner(event.payload.owner);
       setRepo(event.payload.repo);
+      setTaskCreation({ status: "idle" });
     };
     const unsubscribe = events.on("issue:selected", handleIssueSelected);
     return () => {
@@ -49165,6 +49218,34 @@ const GitHubIssueDetailPanelContent = ({ events }) => {
       }
     };
   }, [events]);
+  useEffect(() => {
+    if (!events) return;
+    const unsubscribers = [
+      events.on("issue:task-created", (event) => {
+        const payload = event.payload;
+        if (selectedIssue && payload.issueNumber === selectedIssue.number) {
+          setTaskCreation({
+            status: "success",
+            taskId: payload.taskId
+          });
+        }
+      }),
+      events.on("issue:create-task:error", (event) => {
+        const payload = event.payload;
+        if (selectedIssue && payload.issueNumber === selectedIssue.number) {
+          setTaskCreation({
+            status: "error",
+            error: payload.error
+          });
+        }
+      })
+    ];
+    return () => {
+      unsubscribers.forEach((unsub) => {
+        if (typeof unsub === "function") unsub();
+      });
+    };
+  }, [events, selectedIssue]);
   const handleBack = () => {
     setSelectedIssue(null);
     setOwner("");
@@ -49238,6 +49319,11 @@ const GitHubIssueDetailPanelContent = ({ events }) => {
   const statusColor = isOpen ? theme2.colors.success || "#22c55e" : theme2.colors.error || "#ef4444";
   const statusBg = `${statusColor}20`;
   const statusLabel = isOpen ? "Open" : "Closed";
+  const taskLabel = (_a = selectedIssue.labels) == null ? void 0 : _a.find(
+    (label) => label.name === "backlog-task:investigate" || label.name === "backlog-task:fix"
+  );
+  const hasTask = !!taskLabel;
+  taskLabel == null ? void 0 : taskLabel.name.split(":")[1];
   return /* @__PURE__ */ jsxs("div", { ref: panelRef, tabIndex: -1, style: { ...containerStyle, outline: "none" }, children: [
     /* @__PURE__ */ jsxs(
       "div",
@@ -49303,43 +49389,6 @@ const GitHubIssueDetailPanelContent = ({ events }) => {
               ]
             }
           ),
-          selectedIssue.comments > 0 && /* @__PURE__ */ jsxs(
-            "span",
-            {
-              style: {
-                display: "inline-flex",
-                alignItems: "center",
-                gap: "4px",
-                color: theme2.colors.textSecondary,
-                fontSize: theme2.fontSizes[0]
-              },
-              children: [
-                /* @__PURE__ */ jsx(MessageSquare, { size: 12 }),
-                selectedIssue.comments
-              ]
-            }
-          ),
-          selectedIssue.assignees && selectedIssue.assignees.length > 0 && /* @__PURE__ */ jsxs(
-            "span",
-            {
-              style: {
-                display: "inline-flex",
-                alignItems: "center",
-                gap: "4px",
-                color: theme2.colors.textSecondary,
-                fontSize: theme2.fontSizes[0],
-                fontFamily: theme2.fonts.body
-              },
-              children: [
-                "assigned to",
-                " ",
-                selectedIssue.assignees.map((assignee, index2) => /* @__PURE__ */ jsxs("span", { children: [
-                  /* @__PURE__ */ jsx("span", { style: { color: theme2.colors.primary }, children: assignee.login }),
-                  index2 < selectedIssue.assignees.length - 1 && ", "
-                ] }, assignee.login))
-              ]
-            }
-          ),
           /* @__PURE__ */ jsx("div", { style: { flex: 1 } }),
           /* @__PURE__ */ jsx(
             "a",
@@ -49361,7 +49410,7 @@ const GitHubIssueDetailPanelContent = ({ events }) => {
                 color: theme2.colors.textSecondary,
                 textDecoration: "none"
               },
-              children: /* @__PURE__ */ jsx(ExternalLink, { size: 14 })
+              children: /* @__PURE__ */ jsx(Github, { size: 16 })
             }
           ),
           /* @__PURE__ */ jsx(
@@ -49389,6 +49438,313 @@ const GitHubIssueDetailPanelContent = ({ events }) => {
         ]
       }
     ),
+    selectedIssue.assignees && selectedIssue.assignees.length > 0 && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          padding: "12px 16px",
+          backgroundColor: theme2.colors.backgroundSecondary,
+          borderBottom: `1px solid ${theme2.colors.border}`,
+          display: "flex",
+          alignItems: "center",
+          gap: "12px"
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                color: theme2.colors.textSecondary,
+                fontSize: theme2.fontSizes[1],
+                fontFamily: theme2.fonts.body,
+                fontWeight: theme2.fontWeights.medium
+              },
+              children: "Assigned to:"
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", gap: "8px", flexWrap: "wrap" }, children: selectedIssue.assignees.map((assignee) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: "6px",
+                padding: "4px 10px",
+                backgroundColor: theme2.colors.background,
+                border: `1px solid ${theme2.colors.border}`,
+                borderRadius: "16px"
+              },
+              children: [
+                assignee.avatar_url && /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: assignee.avatar_url,
+                    alt: assignee.login,
+                    style: {
+                      width: "20px",
+                      height: "20px",
+                      borderRadius: "50%"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    style: {
+                      color: theme2.colors.text,
+                      fontSize: theme2.fontSizes[1],
+                      fontFamily: theme2.fonts.body,
+                      fontWeight: theme2.fontWeights.medium
+                    },
+                    children: assignee.login
+                  }
+                )
+              ]
+            },
+            assignee.login
+          )) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          gap: "1px",
+          backgroundColor: theme2.colors.border,
+          borderBottom: `1px solid ${theme2.colors.border}`
+        },
+        children: [
+          /* @__PURE__ */ jsxs("div", { style: { flex: 1, backgroundColor: theme2.colors.background }, children: [
+            taskCreation.status === "idle" && !hasTask && /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: handleCreateTask,
+                style: {
+                  width: "100%",
+                  height: "100%",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  gap: "8px",
+                  padding: "12px 16px",
+                  border: "none",
+                  background: "transparent",
+                  cursor: "pointer",
+                  color: theme2.colors.primary,
+                  fontSize: theme2.fontSizes[1],
+                  fontWeight: theme2.fontWeights.medium,
+                  transition: "background 0.2s ease"
+                },
+                onMouseEnter: (e) => {
+                  e.currentTarget.style.background = theme2.colors.backgroundSecondary;
+                },
+                onMouseLeave: (e) => {
+                  e.currentTarget.style.background = "transparent";
+                },
+                children: [
+                  /* @__PURE__ */ jsx(FileText, { size: 16 }),
+                  /* @__PURE__ */ jsx("span", { style: { lineHeight: 1 }, children: "Create Task" })
+                ]
+              }
+            ),
+            taskCreation.status === "idle" && hasTask && /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: () => {
+                  if (events) {
+                    events.emit({
+                      type: "task:view",
+                      source: "github-issue-detail-panel",
+                      timestamp: Date.now(),
+                      payload: {
+                        issue: selectedIssue,
+                        owner,
+                        repo
+                      }
+                    });
+                  }
+                },
+                style: {
+                  width: "100%",
+                  height: "100%",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  gap: "8px",
+                  padding: "12px 16px",
+                  border: "none",
+                  background: "transparent",
+                  cursor: "pointer",
+                  color: theme2.colors.success,
+                  fontSize: theme2.fontSizes[1],
+                  fontWeight: theme2.fontWeights.medium,
+                  transition: "background 0.2s ease"
+                },
+                onMouseEnter: (e) => {
+                  e.currentTarget.style.background = theme2.colors.backgroundSecondary;
+                },
+                onMouseLeave: (e) => {
+                  e.currentTarget.style.background = "transparent";
+                },
+                children: [
+                  /* @__PURE__ */ jsx(CircleCheckBig, { size: 16 }),
+                  /* @__PURE__ */ jsx("span", { style: { lineHeight: 1 }, children: "Task Started" })
+                ]
+              }
+            ),
+            taskCreation.status === "loading" && /* @__PURE__ */ jsxs(
+              "button",
+              {
+                disabled: true,
+                style: {
+                  width: "100%",
+                  height: "100%",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  gap: "8px",
+                  padding: "12px 16px",
+                  border: "none",
+                  background: "transparent",
+                  cursor: "default",
+                  color: theme2.colors.textSecondary,
+                  fontSize: theme2.fontSizes[1]
+                },
+                children: [
+                  /* @__PURE__ */ jsx(LoaderCircle, { size: 16, style: { animation: "spin 1s linear infinite" } }),
+                  /* @__PURE__ */ jsx("span", { style: { lineHeight: 1 }, children: "Creating Task..." })
+                ]
+              }
+            ),
+            taskCreation.status === "success" && /* @__PURE__ */ jsxs(
+              "button",
+              {
+                disabled: true,
+                style: {
+                  width: "100%",
+                  height: "100%",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  gap: "8px",
+                  padding: "12px 16px",
+                  border: "none",
+                  background: "transparent",
+                  cursor: "default",
+                  color: theme2.colors.success,
+                  fontSize: theme2.fontSizes[1],
+                  fontWeight: theme2.fontWeights.medium
+                },
+                children: [
+                  /* @__PURE__ */ jsx(CircleCheckBig, { size: 16 }),
+                  /* @__PURE__ */ jsx("span", { style: { lineHeight: 1 }, children: "Task Created" })
+                ]
+              }
+            ),
+            taskCreation.status === "error" && /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: () => setTaskCreation({ status: "idle" }),
+                style: {
+                  width: "100%",
+                  height: "100%",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  gap: "8px",
+                  padding: "12px 16px",
+                  border: "none",
+                  background: "transparent",
+                  cursor: "pointer",
+                  color: theme2.colors.error,
+                  fontSize: theme2.fontSizes[1],
+                  fontWeight: theme2.fontWeights.medium,
+                  transition: "background 0.2s ease"
+                },
+                onMouseEnter: (e) => {
+                  e.currentTarget.style.background = theme2.colors.backgroundSecondary;
+                },
+                onMouseLeave: (e) => {
+                  e.currentTarget.style.background = "transparent";
+                },
+                title: taskCreation.error,
+                children: [
+                  /* @__PURE__ */ jsx(CircleAlert, { size: 16 }),
+                  /* @__PURE__ */ jsx("span", { style: { lineHeight: 1 }, children: "Retry Task Creation" })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { style: { flex: 1, backgroundColor: theme2.colors.background }, children: /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: () => {
+                if (events) {
+                  events.emit({
+                    type: "issue:view-discussion",
+                    source: "github-issue-detail-panel",
+                    timestamp: Date.now(),
+                    payload: {
+                      issue: selectedIssue,
+                      owner,
+                      repo
+                    }
+                  });
+                }
+              },
+              style: {
+                width: "100%",
+                height: "100%",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                gap: "8px",
+                padding: "12px 16px",
+                border: "none",
+                background: "transparent",
+                cursor: "pointer",
+                color: theme2.colors.text,
+                fontSize: theme2.fontSizes[1],
+                fontWeight: theme2.fontWeights.medium,
+                transition: "background 0.2s ease"
+              },
+              onMouseEnter: (e) => {
+                e.currentTarget.style.background = theme2.colors.backgroundSecondary;
+              },
+              onMouseLeave: (e) => {
+                e.currentTarget.style.background = "transparent";
+              },
+              children: [
+                /* @__PURE__ */ jsx(MessageSquare, { size: 16 }),
+                /* @__PURE__ */ jsx("span", { style: { lineHeight: 1 }, children: "View Discussion" }),
+                selectedIssue.comments > 0 && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    style: {
+                      display: "inline-flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      minWidth: "20px",
+                      padding: "2px 6px",
+                      backgroundColor: theme2.colors.backgroundSecondary,
+                      border: `1px solid ${theme2.colors.border}`,
+                      borderRadius: "10px",
+                      fontSize: theme2.fontSizes[0],
+                      fontWeight: theme2.fontWeights.semibold,
+                      color: theme2.colors.textSecondary,
+                      lineHeight: 1
+                    },
+                    children: selectedIssue.comments
+                  }
+                )
+              ]
+            }
+          ) })
+        ]
+      }
+    ),
     /* @__PURE__ */ jsx(
       "div",
       {
@@ -49442,6 +49798,280 @@ const GitHubIssueDetailPanelContent = ({ events }) => {
           }
         )
       }
+    ),
+    showTaskTypeModal && /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          backgroundColor: "rgba(0, 0, 0, 0.7)",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          zIndex: 1e4
+        },
+        onClick: () => setShowTaskTypeModal(false),
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              backgroundColor: theme2.colors.surface,
+              borderRadius: "12px",
+              padding: "24px",
+              maxWidth: "500px",
+              width: "90%",
+              boxShadow: "0 8px 32px rgba(0, 0, 0, 0.3)"
+            },
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              modalStep === "type" && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsxs("div", { style: { marginBottom: "20px" }, children: [
+                  /* @__PURE__ */ jsx(
+                    "h2",
+                    {
+                      style: {
+                        margin: 0,
+                        marginBottom: "8px",
+                        fontFamily: theme2.fonts.heading,
+                        fontSize: theme2.fontSizes[3],
+                        fontWeight: 600,
+                        color: theme2.colors.text
+                      },
+                      children: "Choose Task Type"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "p",
+                    {
+                      style: {
+                        margin: 0,
+                        fontFamily: theme2.fonts.body,
+                        fontSize: theme2.fontSizes[1],
+                        color: theme2.colors.textSecondary,
+                        lineHeight: 1.5
+                      },
+                      children: "What type of task do you want to create for this issue?"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "12px" }, children: [
+                  /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      onClick: () => handleSelectTaskType("investigate"),
+                      style: {
+                        padding: "16px",
+                        border: `2px solid ${theme2.colors.border}`,
+                        borderRadius: "8px",
+                        backgroundColor: theme2.colors.background,
+                        cursor: "pointer",
+                        textAlign: "left",
+                        transition: "all 0.2s ease"
+                      },
+                      onMouseEnter: (e) => {
+                        e.currentTarget.style.borderColor = theme2.colors.primary;
+                        e.currentTarget.style.backgroundColor = theme2.colors.backgroundSecondary;
+                      },
+                      onMouseLeave: (e) => {
+                        e.currentTarget.style.borderColor = theme2.colors.border;
+                        e.currentTarget.style.backgroundColor = theme2.colors.background;
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            style: {
+                              fontFamily: theme2.fonts.heading,
+                              fontSize: theme2.fontSizes[2],
+                              fontWeight: 600,
+                              color: theme2.colors.text,
+                              marginBottom: "4px"
+                            },
+                            children: "🔍 Investigate Issue"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            style: {
+                              fontFamily: theme2.fonts.body,
+                              fontSize: theme2.fontSizes[1],
+                              color: theme2.colors.textSecondary,
+                              lineHeight: 1.4
+                            },
+                            children: "Research and identify the root cause of the problem"
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      onClick: () => handleSelectTaskType("fix"),
+                      style: {
+                        padding: "16px",
+                        border: `2px solid ${theme2.colors.border}`,
+                        borderRadius: "8px",
+                        backgroundColor: theme2.colors.background,
+                        cursor: "pointer",
+                        textAlign: "left",
+                        transition: "all 0.2s ease"
+                      },
+                      onMouseEnter: (e) => {
+                        e.currentTarget.style.borderColor = theme2.colors.primary;
+                        e.currentTarget.style.backgroundColor = theme2.colors.backgroundSecondary;
+                      },
+                      onMouseLeave: (e) => {
+                        e.currentTarget.style.borderColor = theme2.colors.border;
+                        e.currentTarget.style.backgroundColor = theme2.colors.background;
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            style: {
+                              fontFamily: theme2.fonts.heading,
+                              fontSize: theme2.fontSizes[2],
+                              fontWeight: 600,
+                              color: theme2.colors.text,
+                              marginBottom: "4px"
+                            },
+                            children: "🔧 Fix Issue"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            style: {
+                              fontFamily: theme2.fonts.body,
+                              fontSize: theme2.fontSizes[1],
+                              color: theme2.colors.textSecondary,
+                              lineHeight: 1.4
+                            },
+                            children: "Implement a solution to resolve the issue"
+                          }
+                        )
+                      ]
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx("div", { style: { marginTop: "20px", textAlign: "center" }, children: /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: () => setShowTaskTypeModal(false),
+                    style: {
+                      padding: "8px 16px",
+                      border: "none",
+                      background: "transparent",
+                      cursor: "pointer",
+                      color: theme2.colors.textSecondary,
+                      fontSize: theme2.fontSizes[1],
+                      fontFamily: theme2.fonts.body
+                    },
+                    children: "Cancel"
+                  }
+                ) })
+              ] }),
+              modalStep === "instructions" && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsxs("div", { style: { marginBottom: "20px" }, children: [
+                  /* @__PURE__ */ jsx(
+                    "h2",
+                    {
+                      style: {
+                        margin: 0,
+                        marginBottom: "8px",
+                        fontFamily: theme2.fonts.heading,
+                        fontSize: theme2.fontSizes[3],
+                        fontWeight: 600,
+                        color: theme2.colors.text
+                      },
+                      children: "Additional Instructions"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "p",
+                    {
+                      style: {
+                        margin: 0,
+                        fontFamily: theme2.fonts.body,
+                        fontSize: theme2.fontSizes[1],
+                        color: theme2.colors.textSecondary,
+                        lineHeight: 1.5
+                      },
+                      children: "Add any specific instructions or context for this task (optional)"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "textarea",
+                  {
+                    value: additionalInstructions,
+                    onChange: (e) => setAdditionalInstructions(e.target.value),
+                    placeholder: "e.g., Focus on the authentication flow, check error handling in useWebSocket hook, etc.",
+                    style: {
+                      width: "100%",
+                      minHeight: "120px",
+                      padding: "12px",
+                      border: `1px solid ${theme2.colors.border}`,
+                      borderRadius: "6px",
+                      backgroundColor: theme2.colors.background,
+                      color: theme2.colors.text,
+                      fontFamily: theme2.fonts.body,
+                      fontSize: theme2.fontSizes[1],
+                      lineHeight: 1.5,
+                      resize: "vertical",
+                      boxSizing: "border-box"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { style: { marginTop: "20px", display: "flex", gap: "12px", justifyContent: "flex-end" }, children: [
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: handleBackToTaskType,
+                      style: {
+                        padding: "8px 16px",
+                        border: `1px solid ${theme2.colors.border}`,
+                        borderRadius: "6px",
+                        background: theme2.colors.background,
+                        cursor: "pointer",
+                        color: theme2.colors.text,
+                        fontSize: theme2.fontSizes[1],
+                        fontFamily: theme2.fonts.body,
+                        fontWeight: theme2.fontWeights.medium
+                      },
+                      children: "Back"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: handleSubmitTask,
+                      style: {
+                        padding: "8px 24px",
+                        border: "none",
+                        borderRadius: "6px",
+                        background: theme2.colors.primary,
+                        cursor: "pointer",
+                        color: theme2.colors.textOnPrimary || "#ffffff",
+                        fontSize: theme2.fontSizes[1],
+                        fontFamily: theme2.fonts.body,
+                        fontWeight: theme2.fontWeights.medium
+                      },
+                      children: "Create Task"
+                    }
+                  )
+                ] })
+              ] })
+            ]
+          }
+        )
+      }
     )
   ] });
 };