@industry-theme/github-panels 0.1.53 → 0.1.54

package/dist/panels.bundle.js

@@ -49149,22 +49149,38 @@ 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 = () => {
-    if (!events || !selectedIssue) return;
+    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",
@@ -49173,9 +49189,19 @@ const GitHubIssueDetailPanelContent = ({ events }) => {
       payload: {
         issue: selectedIssue,
         owner,
-        repo
+        repo,
+        taskType: selectedTaskType,
+        additionalInstructions: additionalInstructions.trim() || void 0
       }
     });
+    setModalStep("type");
+    setSelectedTaskType(null);
+    setAdditionalInstructions("");
+  };
+  const handleBackToTaskType = () => {
+    setModalStep("type");
+    setSelectedTaskType(null);
+    setAdditionalInstructions("");
   };
   useEffect(() => {
     if (!events) return;
@@ -49293,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",
@@ -49358,197 +49389,359 @@ const GitHubIssueDetailPanelContent = ({ events }) => {
               ]
             }
           ),
-          selectedIssue.comments > 0 && /* @__PURE__ */ jsxs(
-            "span",
+          /* @__PURE__ */ jsx("div", { style: { flex: 1 } }),
+          /* @__PURE__ */ jsx(
+            "a",
             {
+              href: selectedIssue.html_url,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              title: "View on GitHub",
               style: {
                 display: "inline-flex",
                 alignItems: "center",
-                gap: "4px",
+                justifyContent: "center",
+                width: "28px",
+                height: "28px",
+                padding: 0,
+                border: `1px solid ${theme2.colors.border}`,
+                borderRadius: "6px",
+                backgroundColor: theme2.colors.background,
                 color: theme2.colors.textSecondary,
-                fontSize: theme2.fontSizes[0]
+                textDecoration: "none"
               },
-              children: [
-                /* @__PURE__ */ jsx(MessageSquare, { size: 12 }),
-                selectedIssue.comments
-              ]
+              children: /* @__PURE__ */ jsx(Github, { size: 16 })
             }
           ),
-          selectedIssue.assignees && selectedIssue.assignees.length > 0 && /* @__PURE__ */ jsxs(
-            "span",
+          /* @__PURE__ */ jsx(
+            "button",
             {
+              type: "button",
+              onClick: handleBack,
+              title: "Close",
               style: {
                 display: "inline-flex",
                 alignItems: "center",
-                gap: "4px",
+                justifyContent: "center",
+                width: "28px",
+                height: "28px",
+                padding: 0,
+                border: `1px solid ${theme2.colors.border}`,
+                borderRadius: "6px",
+                backgroundColor: theme2.colors.background,
                 color: theme2.colors.textSecondary,
-                fontSize: theme2.fontSizes[0],
-                fontFamily: theme2.fonts.body
+                cursor: "pointer"
               },
-              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))
-              ]
+              children: /* @__PURE__ */ jsx(X, { size: 16 })
             }
-          ),
-          /* @__PURE__ */ jsx("div", { style: { flex: 1 } }),
-          taskCreation.status === "idle" && /* @__PURE__ */ jsxs(
-            "button",
+          )
+        ]
+      }
+    ),
+    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",
             {
-              onClick: handleCreateTask,
               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,
+                color: theme2.colors.textSecondary,
                 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;
+                fontFamily: theme2.fonts.body,
+                fontWeight: theme2.fontWeights.medium
               },
-              title: "Create task in backlog.md",
-              children: [
-                /* @__PURE__ */ jsx(FileText, { size: 14 }),
-                "Create Task"
-              ]
+              children: "Assigned to:"
             }
           ),
-          taskCreation.status === "loading" && /* @__PURE__ */ jsxs(
+          /* @__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: "6px 12px",
-                color: theme2.colors.textSecondary,
-                fontSize: theme2.fontSizes[1]
+                padding: "4px 10px",
+                backgroundColor: theme2.colors.background,
+                border: `1px solid ${theme2.colors.border}`,
+                borderRadius: "16px"
               },
               children: [
-                /* @__PURE__ */ jsx(LoaderCircle, { size: 14, style: { animation: "spin 1s linear infinite" } }),
-                "Creating..."
+                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
+                  }
+                )
               ]
-            }
-          ),
-          taskCreation.status === "success" && /* @__PURE__ */ jsxs(
-            "div",
+            },
+            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",
-                gap: "6px",
-                padding: "6px 12px",
-                border: `1px solid ${theme2.colors.success}`,
-                borderRadius: theme2.radii[1],
-                background: `${theme2.colors.success}15`,
-                color: theme2.colors.success,
+                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
+                fontWeight: theme2.fontWeights.medium,
+                transition: "background 0.2s ease"
               },
-              children: [
-                /* @__PURE__ */ jsx(CircleCheckBig, { size: 14 }),
-                "Task Created"
-              ]
-            }
-          ),
-          taskCreation.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]
+              onMouseEnter: (e) => {
+                e.currentTarget.style.background = theme2.colors.backgroundSecondary;
+              },
+              onMouseLeave: (e) => {
+                e.currentTarget.style.background = "transparent";
               },
-              title: taskCreation.error,
               children: [
-                /* @__PURE__ */ jsx(CircleAlert, { size: 14 }),
-                "Failed",
-                /* @__PURE__ */ jsx(
-                  "button",
+                /* @__PURE__ */ jsx(MessageSquare, { size: 16 }),
+                /* @__PURE__ */ jsx("span", { style: { lineHeight: 1 }, children: "View Discussion" }),
+                selectedIssue.comments > 0 && /* @__PURE__ */ jsx(
+                  "span",
                   {
-                    onClick: () => setTaskCreation({ status: "idle" }),
                     style: {
-                      background: "none",
-                      border: "none",
-                      color: theme2.colors.error,
-                      cursor: "pointer",
-                      padding: "0 0 0 4px",
+                      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],
-                      textDecoration: "underline"
+                      fontWeight: theme2.fontWeights.semibold,
+                      color: theme2.colors.textSecondary,
+                      lineHeight: 1
                     },
-                    children: "Retry"
+                    children: selectedIssue.comments
                   }
                 )
               ]
             }
-          ),
-          /* @__PURE__ */ jsx(
-            "a",
-            {
-              href: selectedIssue.html_url,
-              target: "_blank",
-              rel: "noopener noreferrer",
-              title: "View on GitHub",
-              style: {
-                display: "inline-flex",
-                alignItems: "center",
-                justifyContent: "center",
-                width: "28px",
-                height: "28px",
-                padding: 0,
-                border: `1px solid ${theme2.colors.border}`,
-                borderRadius: "6px",
-                backgroundColor: theme2.colors.background,
-                color: theme2.colors.textSecondary,
-                textDecoration: "none"
-              },
-              children: /* @__PURE__ */ jsx(ExternalLink, { size: 14 })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onClick: handleBack,
-              title: "Close",
-              style: {
-                display: "inline-flex",
-                alignItems: "center",
-                justifyContent: "center",
-                width: "28px",
-                height: "28px",
-                padding: 0,
-                border: `1px solid ${theme2.colors.border}`,
-                borderRadius: "6px",
-                backgroundColor: theme2.colors.background,
-                color: theme2.colors.textSecondary,
-                cursor: "pointer"
-              },
-              children: /* @__PURE__ */ jsx(X, { size: 16 })
-            }
-          )
+          ) })
         ]
       }
     ),
@@ -49605,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"
+                    }
+                  )
+                ] })
+              ] })
+            ]
+          }
+        )
+      }
     )
   ] });
 };