@industry-theme/github-panels 0.1.55 → 0.1.57

package/dist/panels.bundle.js

@@ -49184,6 +49184,7 @@ const GitHubIssueDetailPanelContent = ({ events }) => {
   const [modalStep, setModalStep] = useState("type");
   const [selectedTaskType, setSelectedTaskType] = useState(null);
   const [additionalInstructions, setAdditionalInstructions] = useState("");
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
   const panelRef = useRef(null);
   gt(
     "github-issue-detail",
@@ -49284,6 +49285,21 @@ const GitHubIssueDetailPanelContent = ({ events }) => {
       });
     }
   };
+  const handleDelete2 = () => {
+    if (selectedIssue && events) {
+      events.emit({
+        type: "github-issue:delete",
+        source: "github-issue-detail-panel",
+        timestamp: Date.now(),
+        payload: {
+          owner,
+          repo,
+          number: selectedIssue.number
+        }
+      });
+    }
+    setShowDeleteConfirm(false);
+  };
   const containerStyle = {
     display: "flex",
     flexDirection: "column",
@@ -49415,6 +49431,28 @@ const GitHubIssueDetailPanelContent = ({ events }) => {
             }
           ),
           /* @__PURE__ */ jsx("div", { style: { flex: 1 } }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => setShowDeleteConfirm(true),
+              title: "Delete issue",
+              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(Trash2, { size: 14 })
+            }
+          ),
           /* @__PURE__ */ jsx(
             "a",
             {
@@ -50097,6 +50135,149 @@ const GitHubIssueDetailPanelContent = ({ events }) => {
           }
         )
       }
+    ),
+    showDeleteConfirm && selectedIssue && /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          backgroundColor: "rgba(0, 0, 0, 0.5)",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          zIndex: 1e3
+        },
+        onClick: () => setShowDeleteConfirm(false),
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              backgroundColor: theme2.colors.background,
+              border: `1px solid ${theme2.colors.border}`,
+              borderRadius: "8px",
+              padding: "24px",
+              minWidth: "320px",
+              maxWidth: "400px",
+              boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)"
+            },
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "12px",
+                    marginBottom: "16px"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        style: {
+                          width: "40px",
+                          height: "40px",
+                          borderRadius: "50%",
+                          backgroundColor: theme2.colors.error ? `${theme2.colors.error}20` : "#ef444420",
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          color: theme2.colors.error || "#ef4444"
+                        },
+                        children: /* @__PURE__ */ jsx(Trash2, { size: 20 })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "h3",
+                      {
+                        style: {
+                          margin: 0,
+                          fontFamily: theme2.fonts.heading,
+                          fontSize: theme2.fontSizes[2],
+                          fontWeight: 600,
+                          color: theme2.colors.text
+                        },
+                        children: "Delete Issue?"
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "p",
+                {
+                  style: {
+                    margin: "0 0 24px 0",
+                    fontFamily: theme2.fonts.body,
+                    fontSize: theme2.fontSizes[1],
+                    color: theme2.colors.textSecondary,
+                    lineHeight: 1.5
+                  },
+                  children: [
+                    'Are you sure you want to delete "',
+                    selectedIssue.title,
+                    '"? This action cannot be undone.'
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    gap: "12px",
+                    justifyContent: "flex-end"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => setShowDeleteConfirm(false),
+                        style: {
+                          padding: "8px 16px",
+                          border: `1px solid ${theme2.colors.border}`,
+                          borderRadius: "6px",
+                          backgroundColor: theme2.colors.background,
+                          color: theme2.colors.text,
+                          fontFamily: theme2.fonts.body,
+                          fontSize: theme2.fontSizes[1],
+                          cursor: "pointer"
+                        },
+                        children: "Cancel"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: handleDelete2,
+                        style: {
+                          padding: "8px 16px",
+                          border: "none",
+                          borderRadius: "6px",
+                          backgroundColor: theme2.colors.error || "#ef4444",
+                          color: "#ffffff",
+                          fontFamily: theme2.fonts.body,
+                          fontSize: theme2.fontSizes[1],
+                          fontWeight: 500,
+                          cursor: "pointer"
+                        },
+                        children: "Delete"
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      }
     )
   ] });
 };
@@ -50319,108 +50500,153 @@ const ReactionBar = ({ reactions, onToggleReaction, disabled }) => {
 const CommentEvent = ({ event, onToggleReaction, getMergedReactions }) => {
   const { theme: theme2 } = useTheme();
   const user = event.user || event.actor;
+  const containerRef = useRef(null);
+  const [isLargeView, setIsLargeView] = useState(true);
+  useEffect(() => {
+    const checkWidth = () => {
+      if (containerRef.current) {
+        setIsLargeView(containerRef.current.offsetWidth >= 400);
+      }
+    };
+    checkWidth();
+    window.addEventListener("resize", checkWidth);
+    return () => window.removeEventListener("resize", checkWidth);
+  }, []);
   const mergedReactions = getMergedReactions ? getMergedReactions(event.id, "comment", event.reactions) : event.reactions;
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ref: containerRef,
       style: {
-        display: "flex",
-        gap: "12px",
         padding: "16px",
         borderBottom: `1px solid ${theme2.colors.border}`
       },
       children: [
-        /* @__PURE__ */ jsx(Avatar, { user }),
-        /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: {
-                display: "flex",
-                alignItems: "center",
-                gap: "8px",
-                marginBottom: "8px"
-              },
-              children: [
-                /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    style: {
-                      fontWeight: 600,
-                      color: theme2.colors.text,
-                      fontFamily: theme2.fonts.body,
-                      fontSize: theme2.fontSizes[1]
-                    },
-                    children: user.login
-                  }
-                ),
-                /* @__PURE__ */ jsxs(
-                  "span",
-                  {
-                    style: {
-                      fontFamily: theme2.fonts.body,
-                      color: theme2.colors.textMuted,
-                      fontSize: theme2.fontSizes[0]
-                    },
-                    children: [
-                      "commented ",
-                      formatDate(event.created_at)
-                    ]
-                  }
-                ),
-                event.author_association && event.author_association !== "NONE" && /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    style: {
-                      padding: "2px 6px",
-                      borderRadius: "4px",
-                      backgroundColor: theme2.colors.backgroundSecondary,
-                      border: `1px solid ${theme2.colors.border}`,
-                      fontFamily: theme2.fonts.body,
-                      fontSize: theme2.fontSizes[0],
-                      color: theme2.colors.textSecondary,
-                      textTransform: "uppercase"
-                    },
-                    children: event.author_association.toLowerCase()
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: {
-                backgroundColor: theme2.colors.backgroundSecondary,
-                border: `1px solid ${theme2.colors.border}`,
-                borderRadius: "8px",
-                overflow: "hidden"
-              },
-              children: /* @__PURE__ */ jsx(
-                DocumentView,
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              gap: "12px",
+              alignItems: "center",
+              marginBottom: "8px"
+            },
+            children: [
+              /* @__PURE__ */ jsx(Avatar, { user }),
+              /* @__PURE__ */ jsxs(
+                "div",
                 {
-                  content: event.body,
-                  theme: theme2,
-                  maxWidth: "100%",
-                  transparentBackground: true
-                }
-              )
-            }
-          ),
-          mergedReactions && /* @__PURE__ */ jsx(
-            ReactionBar,
-            {
-              reactions: mergedReactions,
-              onToggleReaction: onToggleReaction ? (type, reactionId) => onToggleReaction(event.id, "comment", type, reactionId) : void 0
-            }
-          )
-        ] })
-      ]
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "8px",
+                    flex: 1,
+                    minWidth: 0
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        style: {
+                          fontWeight: 600,
+                          color: theme2.colors.text,
+                          fontFamily: theme2.fonts.body,
+                          fontSize: theme2.fontSizes[1]
+                        },
+                        children: user.login
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs(
+                      "span",
+                      {
+                        style: {
+                          fontFamily: theme2.fonts.body,
+                          color: theme2.colors.textMuted,
+                          fontSize: theme2.fontSizes[0]
+                        },
+                        children: [
+                          "commented ",
+                          formatDate(event.created_at)
+                        ]
+                      }
+                    ),
+                    event.author_association && event.author_association !== "NONE" && /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        style: {
+                          padding: "2px 6px",
+                          borderRadius: "4px",
+                          backgroundColor: theme2.colors.backgroundSecondary,
+                          border: `1px solid ${theme2.colors.border}`,
+                          fontFamily: theme2.fonts.body,
+                          fontSize: theme2.fontSizes[0],
+                          color: theme2.colors.textSecondary,
+                          textTransform: "uppercase"
+                        },
+                        children: event.author_association.toLowerCase()
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              marginLeft: isLargeView ? "44px" : "0"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    backgroundColor: theme2.colors.backgroundSecondary,
+                    border: `1px solid ${theme2.colors.border}`,
+                    borderRadius: "8px",
+                    overflow: "hidden"
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    DocumentView,
+                    {
+                      content: event.body,
+                      theme: theme2,
+                      maxWidth: "100%",
+                      transparentBackground: true
+                    }
+                  )
+                }
+              ),
+              mergedReactions && /* @__PURE__ */ jsx(
+                ReactionBar,
+                {
+                  reactions: mergedReactions,
+                  onToggleReaction: onToggleReaction ? (type, reactionId) => onToggleReaction(event.id, "comment", type, reactionId) : void 0
+                }
+              )
+            ]
+          }
+        )
+      ]
     }
   );
 };
 const ReviewEvent = ({ event }) => {
   const { theme: theme2 } = useTheme();
+  const containerRef = useRef(null);
+  const [isLargeView, setIsLargeView] = useState(true);
+  useEffect(() => {
+    const checkWidth = () => {
+      if (containerRef.current) {
+        setIsLargeView(containerRef.current.offsetWidth >= 400);
+      }
+    };
+    checkWidth();
+    window.addEventListener("resize", checkWidth);
+    return () => window.removeEventListener("resize", checkWidth);
+  }, []);
   const stateConfig = {
     approved: {
       icon: /* @__PURE__ */ jsx(Check, { size: 16 }),
@@ -50447,85 +50673,104 @@ const ReviewEvent = ({ event }) => {
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ref: containerRef,
       style: {
-        display: "flex",
-        gap: "12px",
         padding: "16px",
         borderBottom: `1px solid ${theme2.colors.border}`
       },
       children: [
-        /* @__PURE__ */ jsx(Avatar, { user: event.user }),
-        /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: {
-                display: "flex",
-                alignItems: "center",
-                gap: "8px",
-                marginBottom: event.body ? "8px" : 0
-              },
-              children: [
-                /* @__PURE__ */ jsx("span", { style: { color: config.color }, children: config.icon }),
-                /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    style: {
-                      fontWeight: 600,
-                      color: theme2.colors.text,
-                      fontFamily: theme2.fonts.body,
-                      fontSize: theme2.fontSizes[1]
-                    },
-                    children: event.user.login
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    style: {
-                      fontFamily: theme2.fonts.body,
-                      color: config.color,
-                      fontWeight: 500,
-                      fontSize: theme2.fontSizes[1]
-                    },
-                    children: config.label
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    style: {
-                      fontFamily: theme2.fonts.body,
-                      color: theme2.colors.textMuted,
-                      fontSize: theme2.fontSizes[0]
-                    },
-                    children: formatDate(event.submitted_at)
-                  }
-                )
-              ]
-            }
-          ),
-          event.body && /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: {
-                backgroundColor: theme2.colors.backgroundSecondary,
-                border: `1px solid ${theme2.colors.border}`,
-                borderRadius: "8px",
-                overflow: "hidden"
-              },
-              children: /* @__PURE__ */ jsx(
-                DocumentView,
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              gap: "12px",
+              alignItems: "center",
+              marginBottom: event.body ? "8px" : 0
+            },
+            children: [
+              /* @__PURE__ */ jsx(Avatar, { user: event.user }),
+              /* @__PURE__ */ jsxs(
+                "div",
                 {
-                  content: event.body,
-                  theme: theme2,
-                  maxWidth: "100%",
-                  transparentBackground: true
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "8px",
+                    flex: 1,
+                    minWidth: 0
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx("span", { style: { color: config.color }, children: config.icon }),
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        style: {
+                          fontWeight: 600,
+                          color: theme2.colors.text,
+                          fontFamily: theme2.fonts.body,
+                          fontSize: theme2.fontSizes[1]
+                        },
+                        children: event.user.login
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        style: {
+                          fontFamily: theme2.fonts.body,
+                          color: config.color,
+                          fontWeight: 500,
+                          fontSize: theme2.fontSizes[1]
+                        },
+                        children: config.label
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        style: {
+                          fontFamily: theme2.fonts.body,
+                          color: theme2.colors.textMuted,
+                          fontSize: theme2.fontSizes[0]
+                        },
+                        children: formatDate(event.submitted_at)
+                      }
+                    )
+                  ]
                 }
               )
-            }
-          )
-        ] })
+            ]
+          }
+        ),
+        event.body && /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              marginLeft: isLargeView ? "44px" : "0"
+            },
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  backgroundColor: theme2.colors.backgroundSecondary,
+                  border: `1px solid ${theme2.colors.border}`,
+                  borderRadius: "8px",
+                  overflow: "hidden"
+                },
+                children: /* @__PURE__ */ jsx(
+                  DocumentView,
+                  {
+                    content: event.body,
+                    theme: theme2,
+                    maxWidth: "100%",
+                    transparentBackground: true
+                  }
+                )
+              }
+            )
+          }
+        )
       ]
     }
   );
@@ -50833,121 +51078,154 @@ const RefEvent = ({ event }) => {
 };
 const InlineReviewComment = ({ comment: comment2, onToggleReaction, getMergedReactions }) => {
   const { theme: theme2 } = useTheme();
+  const containerRef = useRef(null);
+  const [isLargeView, setIsLargeView] = useState(true);
+  useEffect(() => {
+    const checkWidth = () => {
+      if (containerRef.current) {
+        setIsLargeView(containerRef.current.offsetWidth >= 400);
+      }
+    };
+    checkWidth();
+    window.addEventListener("resize", checkWidth);
+    return () => window.removeEventListener("resize", checkWidth);
+  }, []);
   const mergedReactions = getMergedReactions ? getMergedReactions(comment2.id, "review_comment", comment2.reactions) : comment2.reactions;
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ref: containerRef,
       style: {
-        display: "flex",
-        gap: "12px",
         padding: "12px 16px",
         borderBottom: `1px solid ${theme2.colors.border}`,
         backgroundColor: theme2.colors.backgroundSecondary
       },
       children: [
-        /* @__PURE__ */ jsx(Avatar, { user: comment2.user, size: 28 }),
-        /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: {
-                display: "flex",
-                alignItems: "center",
-                gap: "8px",
-                marginBottom: "8px"
-              },
-              children: [
-                /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    style: {
-                      fontFamily: theme2.fonts.body,
-                      fontWeight: 600,
-                      color: theme2.colors.text,
-                      fontSize: theme2.fontSizes[0]
-                    },
-                    children: comment2.user.login
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    style: {
-                      fontFamily: theme2.fonts.body,
-                      color: theme2.colors.textMuted,
-                      fontSize: theme2.fontSizes[0]
-                    },
-                    children: "on"
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "code",
-                  {
-                    style: {
-                      padding: "2px 6px",
-                      borderRadius: "4px",
-                      backgroundColor: theme2.colors.background,
-                      fontFamily: theme2.fonts.monospace,
-                      fontSize: "11px",
-                      color: theme2.colors.primary
-                    },
-                    children: comment2.path
-                  }
-                ),
-                comment2.line && /* @__PURE__ */ jsxs("span", { style: { fontFamily: theme2.fonts.body, fontSize: theme2.fontSizes[0], color: theme2.colors.textSecondary }, children: [
-                  "line ",
-                  comment2.line
-                ] })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: {
-                backgroundColor: theme2.colors.background,
-                border: `1px solid ${theme2.colors.border}`,
-                borderRadius: "6px",
-                overflow: "hidden",
-                marginBottom: comment2.diff_hunk ? "8px" : 0
-              },
-              children: /* @__PURE__ */ jsx(
-                DocumentView,
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              gap: "12px",
+              alignItems: "center",
+              marginBottom: "8px"
+            },
+            children: [
+              /* @__PURE__ */ jsx(Avatar, { user: comment2.user, size: 28 }),
+              /* @__PURE__ */ jsxs(
+                "div",
                 {
-                  content: comment2.body,
-                  theme: theme2,
-                  maxWidth: "100%",
-                  transparentBackground: true
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "8px",
+                    flex: 1,
+                    minWidth: 0
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        style: {
+                          fontFamily: theme2.fonts.body,
+                          fontWeight: 600,
+                          color: theme2.colors.text,
+                          fontSize: theme2.fontSizes[0]
+                        },
+                        children: comment2.user.login
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        style: {
+                          fontFamily: theme2.fonts.body,
+                          color: theme2.colors.textMuted,
+                          fontSize: theme2.fontSizes[0]
+                        },
+                        children: "on"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "code",
+                      {
+                        style: {
+                          padding: "2px 6px",
+                          borderRadius: "4px",
+                          backgroundColor: theme2.colors.background,
+                          fontFamily: theme2.fonts.monospace,
+                          fontSize: "11px",
+                          color: theme2.colors.primary
+                        },
+                        children: comment2.path
+                      }
+                    ),
+                    comment2.line && /* @__PURE__ */ jsxs("span", { style: { fontFamily: theme2.fonts.body, fontSize: theme2.fontSizes[0], color: theme2.colors.textSecondary }, children: [
+                      "line ",
+                      comment2.line
+                    ] })
+                  ]
                 }
               )
-            }
-          ),
-          comment2.diff_hunk && /* @__PURE__ */ jsx(
-            "pre",
-            {
-              style: {
-                margin: 0,
-                padding: "8px",
-                backgroundColor: theme2.colors.background,
-                border: `1px solid ${theme2.colors.border}`,
-                borderRadius: "6px",
-                fontFamily: theme2.fonts.monospace,
-                fontSize: "11px",
-                color: theme2.colors.textSecondary,
-                overflow: "auto",
-                maxHeight: "100px"
-              },
-              children: comment2.diff_hunk
-            }
-          ),
-          mergedReactions && /* @__PURE__ */ jsx(
-            ReactionBar,
-            {
-              reactions: mergedReactions,
-              onToggleReaction: onToggleReaction ? (type, reactionId) => onToggleReaction(comment2.id, "review_comment", type, reactionId) : void 0
-            }
-          )
-        ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              marginLeft: isLargeView ? "40px" : "0"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    backgroundColor: theme2.colors.background,
+                    border: `1px solid ${theme2.colors.border}`,
+                    borderRadius: "6px",
+                    overflow: "hidden",
+                    marginBottom: comment2.diff_hunk ? "8px" : 0
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    DocumentView,
+                    {
+                      content: comment2.body,
+                      theme: theme2,
+                      maxWidth: "100%",
+                      transparentBackground: true
+                    }
+                  )
+                }
+              ),
+              comment2.diff_hunk && /* @__PURE__ */ jsx(
+                "pre",
+                {
+                  style: {
+                    margin: 0,
+                    padding: "8px",
+                    backgroundColor: theme2.colors.background,
+                    border: `1px solid ${theme2.colors.border}`,
+                    borderRadius: "6px",
+                    fontFamily: theme2.fonts.monospace,
+                    fontSize: "11px",
+                    color: theme2.colors.textSecondary,
+                    overflow: "auto",
+                    maxHeight: "100px"
+                  },
+                  children: comment2.diff_hunk
+                }
+              ),
+              mergedReactions && /* @__PURE__ */ jsx(
+                ReactionBar,
+                {
+                  reactions: mergedReactions,
+                  onToggleReaction: onToggleReaction ? (type, reactionId) => onToggleReaction(comment2.id, "review_comment", type, reactionId) : void 0
+                }
+              )
+            ]
+          }
+        )
       ]
     }
   );
@@ -50990,6 +51268,7 @@ const TimelineEventRenderer = ({ event, onToggleReaction, getMergedReactions })
   }
 };
 const GitHubMessagesPanelContent = ({ context, events }) => {
+  var _a;
   const { theme: theme2 } = useTheme();
   const panelRef = useRef(null);
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
@@ -51002,6 +51281,10 @@ const GitHubMessagesPanelContent = ({ context, events }) => {
     return /* @__PURE__ */ new Set();
   });
   const [showHiddenMessages, setShowHiddenMessages] = useState(false);
+  const [commentText, setCommentText] = useState("");
+  const [isSending, setIsSending] = useState(false);
+  const [sendError, setSendError] = useState(null);
+  const textareaRef = useRef(null);
   const handleDelete2 = () => {
     const messagesSlice2 = context.getSlice("github-messages");
     const messagesData2 = messagesSlice2 == null ? void 0 : messagesSlice2.data;
@@ -51094,6 +51377,27 @@ const GitHubMessagesPanelContent = ({ context, events }) => {
       });
     }
   }, [context, events]);
+  const handleSendComment = useCallback(() => {
+    const messagesSlice2 = context.getSlice("github-messages");
+    const messagesData2 = messagesSlice2 == null ? void 0 : messagesSlice2.data;
+    if (!events || !(messagesData2 == null ? void 0 : messagesData2.target) || !commentText.trim() || isSending) return;
+    const { owner, repo, target: target2 } = messagesData2;
+    setIsSending(true);
+    setSendError(null);
+    events.emit({
+      type: "github-messages:comment:create",
+      source: "github-messages-panel",
+      timestamp: Date.now(),
+      payload: {
+        owner,
+        repo,
+        targetType: target2.type,
+        targetNumber: target2.number,
+        body: commentText.trim()
+      }
+    });
+    setCommentText("");
+  }, [context, events, commentText, isSending]);
   const getMergedReactions = useCallback((itemId, itemType, apiReactions) => {
     const key = `${itemType}-${itemId}`;
     const local = localReactions[key];
@@ -51136,8 +51440,8 @@ const GitHubMessagesPanelContent = ({ context, events }) => {
     "github-messages",
     events,
     () => {
-      var _a;
-      return (_a = panelRef.current) == null ? void 0 : _a.focus();
+      var _a2;
+      return (_a2 = panelRef.current) == null ? void 0 : _a2.focus();
     }
   );
   const messagesSlice = context.getSlice("github-messages");
@@ -51179,6 +51483,46 @@ const GitHubMessagesPanelContent = ({ context, events }) => {
       if (typeof unsubPR === "function") unsubPR();
     };
   }, [events]);
+  useEffect(() => {
+    if (textareaRef.current) {
+      const minHeight = 36;
+      const maxHeight = 200;
+      if (!commentText) {
+        textareaRef.current.style.height = `${minHeight}px`;
+        return;
+      }
+      textareaRef.current.style.height = `${minHeight}px`;
+      const scrollHeight = textareaRef.current.scrollHeight;
+      const newHeight = Math.min(Math.max(scrollHeight, minHeight), maxHeight);
+      textareaRef.current.style.height = `${newHeight}px`;
+    }
+  }, [commentText]);
+  useEffect(() => {
+    if (!events) return;
+    const messagesSlice2 = context.getSlice("github-messages");
+    const messagesData2 = messagesSlice2 == null ? void 0 : messagesSlice2.data;
+    const unsubscribers = [
+      events.on("github-messages:comment:created", (event) => {
+        const payload = event.payload;
+        if ((messagesData2 == null ? void 0 : messagesData2.target) && payload.targetNumber === messagesData2.target.number) {
+          setIsSending(false);
+          setSendError(null);
+        }
+      }),
+      events.on("github-messages:comment:error", (event) => {
+        const payload = event.payload;
+        if ((messagesData2 == null ? void 0 : messagesData2.target) && payload.targetNumber === messagesData2.target.number) {
+          setIsSending(false);
+          setSendError(payload.error);
+        }
+      })
+    ];
+    return () => {
+      unsubscribers.forEach((unsub) => {
+        if (typeof unsub === "function") unsub();
+      });
+    };
+  }, [events, context]);
   const containerStyle = {
     display: "flex",
     flexDirection: "column",
@@ -51403,28 +51747,6 @@ const GitHubMessagesPanelContent = ({ context, events }) => {
               ]
             }
           ),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onClick: () => setShowDeleteConfirm(true),
-              title: "Delete issue",
-              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(Trash2, { size: 14 })
-            }
-          ),
           /* @__PURE__ */ jsx(
             "a",
             {
@@ -51519,6 +51841,141 @@ const GitHubMessagesPanelContent = ({ context, events }) => {
         }) })
       }
     ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          borderTop: `1px solid ${theme2.colors.border}`,
+          backgroundColor: theme2.colors.background,
+          padding: "12px",
+          display: "flex",
+          flexDirection: "column",
+          gap: "8px"
+        },
+        children: [
+          sendError && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                padding: "8px 12px",
+                backgroundColor: theme2.colors.error ? `${theme2.colors.error}20` : "#ef444420",
+                border: `1px solid ${theme2.colors.error || "#ef4444"}`,
+                borderRadius: "6px",
+                color: theme2.colors.error || "#ef4444",
+                fontSize: theme2.fontSizes[0],
+                fontFamily: theme2.fonts.body,
+                display: "flex",
+                alignItems: "center",
+                gap: "8px"
+              },
+              children: [
+                /* @__PURE__ */ jsx(CircleAlert, { size: 14 }),
+                /* @__PURE__ */ jsx("span", { children: sendError }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setSendError(null),
+                    style: {
+                      marginLeft: "auto",
+                      background: "none",
+                      border: "none",
+                      cursor: "pointer",
+                      color: "inherit",
+                      padding: "2px"
+                    },
+                    children: /* @__PURE__ */ jsx(X, { size: 14 })
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                gap: "8px",
+                alignItems: "flex-end"
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "textarea",
+                  {
+                    ref: textareaRef,
+                    value: commentText,
+                    onChange: (e) => setCommentText(e.target.value),
+                    onKeyDown: (e) => {
+                      if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+                        e.preventDefault();
+                        handleSendComment();
+                      }
+                    },
+                    placeholder: "Write a comment",
+                    disabled: isSending,
+                    "aria-label": "Write a comment",
+                    style: {
+                      flex: 1,
+                      height: "36px",
+                      maxHeight: "200px",
+                      padding: "8px 12px",
+                      border: `1px solid ${theme2.colors.border}`,
+                      borderRadius: "6px",
+                      backgroundColor: isSending ? theme2.colors.backgroundSecondary : theme2.colors.background,
+                      color: theme2.colors.text,
+                      fontFamily: theme2.fonts.body,
+                      fontSize: theme2.fontSizes[1],
+                      lineHeight: 1.5,
+                      resize: "none",
+                      outline: "none",
+                      transition: "border-color 0.2s",
+                      overflow: "hidden",
+                      boxSizing: "border-box"
+                    },
+                    onFocus: (e) => {
+                      e.currentTarget.style.borderColor = theme2.colors.primary;
+                    },
+                    onBlur: (e) => {
+                      e.currentTarget.style.borderColor = theme2.colors.border;
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: handleSendComment,
+                    disabled: !commentText.trim() || isSending,
+                    "aria-label": "Send comment",
+                    title: isSending ? "Sending..." : "Send comment (Cmd/Ctrl+Enter)",
+                    style: {
+                      padding: "12px 20px",
+                      border: "none",
+                      borderRadius: "6px",
+                      backgroundColor: !commentText.trim() || isSending ? theme2.colors.backgroundSecondary : theme2.colors.primary,
+                      color: !commentText.trim() || isSending ? theme2.colors.textMuted : theme2.colors.textOnPrimary || "#ffffff",
+                      cursor: !commentText.trim() || isSending ? "not-allowed" : "pointer",
+                      fontFamily: theme2.fonts.body,
+                      fontSize: theme2.fontSizes[1],
+                      fontWeight: ((_a = theme2.fontWeights) == null ? void 0 : _a.medium) || 500,
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "8px",
+                      transition: "background-color 0.2s",
+                      opacity: !commentText.trim() || isSending ? 0.5 : 1
+                    },
+                    children: isSending ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx(LoaderCircle, { size: 16, style: { animation: "spin 1s linear infinite" } }),
+                      "Sending..."
+                    ] }) : "Send"
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    ),
     showDeleteConfirm && /* @__PURE__ */ jsx(
       "div",
       {