@taterboom/shiteki 0.1.0 → 0.1.2

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/components/ShitekiWidget.tsx
-import { useCallback as useCallback9, useEffect as useEffect7, useState as useState11 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect8, useState as useState12 } from "react";
 import ReactDOM from "react-dom";
 import { AnimatePresence as AnimatePresence3 } from "motion/react";
 
@@ -44,6 +44,13 @@ function useAnnotations() {
     });
     return annotation;
   }, []);
+  const update = useCallback((id, comment) => {
+    setAnnotations((prev) => {
+      const next = prev.map((a) => a.id === id ? { ...a, comment } : a);
+      writeStored(next, nextIdRef.current);
+      return next;
+    });
+  }, []);
   const remove = useCallback((id) => {
     setAnnotations((prev) => {
       const next = prev.filter((a) => a.id !== id);
@@ -56,7 +63,7 @@ function useAnnotations() {
     nextIdRef.current = 1;
     removeStored();
   }, []);
-  return { annotations, add, remove, clear };
+  return { annotations, add, update, remove, clear };
 }
 
 // src/hooks/useConfig.ts
@@ -78,7 +85,8 @@ function merge(defaults, stored) {
     githubToken: stored.githubToken || defaults.githubToken,
     owner: stored.owner || defaults.owner,
     repo: stored.repo || defaults.repo,
-    labels: stored.labels ?? defaults.labels
+    labels: stored.labels ?? defaults.labels,
+    clearAfterCopy: stored.clearAfterCopy ?? defaults.clearAfterCopy
   };
 }
 function useConfig(defaults) {
@@ -340,7 +348,7 @@ function useKeyboardShortcuts(opts) {
       if (key === "c" && opts.annotationCount > 0) {
         e.preventDefault();
         opts.onCopy();
-      } else if (key === "s" && opts.annotationCount > 0) {
+      } else if (key === "s" && opts.annotationCount > 0 && opts.canSend) {
         e.preventDefault();
         opts.onSend();
       } else if (key === "d" && opts.annotationCount > 0) {
@@ -360,6 +368,7 @@ function useKeyboardShortcuts(opts) {
     opts.open,
     opts.mode,
     opts.annotationCount,
+    opts.canSend,
     opts.settingsOpen,
     opts.sendDialogOpen,
     opts.onCopy,
@@ -406,13 +415,13 @@ function generatePrompt(annotations) {
     `**Annotations:** ${annotations.length}`,
     `**Captured:** ${now}`
   ];
-  for (const ann of annotations) {
+  annotations.forEach((ann, i) => {
     const { elementInfo: el } = ann;
     lines.push(
       "",
       "---",
       "",
-      `## Annotation #${ann.id}`,
+      `## Annotation #${i + 1}`,
       "",
       "**What should change:**",
       `> ${ann.comment}`,
@@ -426,7 +435,7 @@ function generatePrompt(annotations) {
     if (attrEntries.length > 0) {
       lines.push(`- Attributes: ${attrEntries.map(([k, v]) => `\`${k}="${v}"\``).join(", ")}`);
     }
-  }
+  });
   lines.push("");
   return lines.join("\n");
 }
@@ -444,6 +453,7 @@ function Toolbar({
   annotationCount,
   copied,
   sending,
+  canSend,
   settingsOpen,
   onOpen,
   onCopy,
@@ -514,25 +524,25 @@ function Toolbar({
             transition: spring,
             style: { overflow: "hidden", display: "flex", alignItems: "center", gap: 4 },
             children: [
-              annotationCount > 0 && /* @__PURE__ */ jsx("div", { className: "shiteki-toolbar-sep" }),
-              annotationCount > 0 && /* @__PURE__ */ jsx("button", { className: "shiteki-toolbar-btn", onClick: onCopy, title: "Copy to clipboard", children: copied ? /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) }) : /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+              /* @__PURE__ */ jsx("div", { className: "shiteki-toolbar-sep" }),
+              /* @__PURE__ */ jsx("button", { className: "shiteki-toolbar-btn", onClick: onCopy, disabled: annotationCount === 0, title: "Copy to clipboard", children: copied ? /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) }) : /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
                 /* @__PURE__ */ jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
                 /* @__PURE__ */ jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
               ] }) }),
-              annotationCount > 0 && /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx(
                 "button",
                 {
                   className: "shiteki-toolbar-btn",
-                  onClick: onSend,
-                  disabled: sending,
-                  title: "Send as GitHub Issue",
+                  onClick: canSend ? onSend : onSettings,
+                  disabled: sending || annotationCount === 0,
+                  title: canSend ? "Send as GitHub Issue" : "Configure settings to enable send",
                   children: /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
                     /* @__PURE__ */ jsx("line", { x1: "22", y1: "2", x2: "11", y2: "13" }),
                     /* @__PURE__ */ jsx("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })
                   ] })
                 }
               ),
-              annotationCount > 0 && /* @__PURE__ */ jsx("button", { className: "shiteki-toolbar-btn", onClick: onClear, title: "Clear all annotations", children: /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+              /* @__PURE__ */ jsx("button", { className: "shiteki-toolbar-btn", onClick: onClear, disabled: annotationCount === 0, title: "Clear all annotations", children: /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
                 /* @__PURE__ */ jsx("polyline", { points: "3 6 5 6 21 6" }),
                 /* @__PURE__ */ jsx("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })
               ] }) }),
@@ -566,20 +576,35 @@ function Toolbar({
             exit: { opacity: 0, y: 4 },
             transition: { duration: 0.15 },
             children: [
-              /* @__PURE__ */ jsxs("span", { children: [
-                /* @__PURE__ */ jsx("kbd", { children: "X" }),
-                " Toggle",
-                /* @__PURE__ */ jsx("kbd", { children: "C" }),
-                " Copy",
-                /* @__PURE__ */ jsx("kbd", { children: "S" }),
-                " Send",
-                /* @__PURE__ */ jsx("kbd", { children: "DD" }),
-                " Clear"
-              ] }),
               /* @__PURE__ */ jsx("button", { className: "shiteki-shortcut-hint-close", onClick: onDismissHint, "aria-label": "Dismiss", children: /* @__PURE__ */ jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
                 /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
                 /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-              ] }) })
+              ] }) }),
+              /* @__PURE__ */ jsxs("div", { className: "shiteki-shortcut-hint-list", children: [
+                /* @__PURE__ */ jsxs("span", { children: [
+                  /* @__PURE__ */ jsx("kbd", { children: "X" }),
+                  " Toggle"
+                ] }),
+                /* @__PURE__ */ jsxs("span", { children: [
+                  /* @__PURE__ */ jsx("kbd", { children: "C" }),
+                  " Copy"
+                ] }),
+                /* @__PURE__ */ jsxs("span", { children: [
+                  /* @__PURE__ */ jsx("kbd", { children: "S" }),
+                  " Send"
+                ] }),
+                /* @__PURE__ */ jsxs("span", { children: [
+                  /* @__PURE__ */ jsx("kbd", { children: "DD" }),
+                  " Clear"
+                ] }),
+                /* @__PURE__ */ jsxs("span", { children: [
+                  /* @__PURE__ */ jsxs("kbd", { children: [
+                    navigator.userAgent.includes("Mac") ? "\u2318" : "Ctrl",
+                    "+Click"
+                  ] }),
+                  " Remove"
+                ] })
+              ] })
             ]
           },
           "hint"
@@ -699,23 +724,123 @@ function AnnotationPopover({ elementInfo, onAdd, onCancel }) {
   );
 }
 
+// src/components/AnnotationDetailPopover.tsx
+import { useEffect as useEffect4, useRef as useRef6, useState as useState8 } from "react";
+import { motion as motion3 } from "motion/react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function AnnotationDetailPopover({ annotation, index, onUpdate, onRemove, onClose }) {
+  const [comment, setComment] = useState8(annotation.comment);
+  const textareaRef = useRef6(null);
+  const [dragOffset, setDragOffset] = useState8({ x: 0, y: 0 });
+  const dragRef = useRef6(null);
+  useEffect4(() => {
+    textareaRef.current?.focus();
+  }, []);
+  const { rect } = annotation.elementInfo;
+  const spaceBelow = window.innerHeight - (rect.top + rect.height);
+  const above = spaceBelow < 250;
+  const top = above ? rect.top - 180 : rect.top + rect.height + 8;
+  let left = rect.left + rect.width / 2 - 160;
+  left = Math.max(12, Math.min(left, window.innerWidth - 332));
+  const yOffset = above ? -8 : 8;
+  const handlePointerDown = (e) => {
+    dragRef.current = { startX: e.clientX, startY: e.clientY, origX: dragOffset.x, origY: dragOffset.y };
+    e.target.setPointerCapture(e.pointerId);
+  };
+  const handlePointerMove = (e) => {
+    if (!dragRef.current) return;
+    setDragOffset({
+      x: dragRef.current.origX + e.clientX - dragRef.current.startX,
+      y: dragRef.current.origY + e.clientY - dragRef.current.startY
+    });
+  };
+  const handlePointerUp = () => {
+    dragRef.current = null;
+  };
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (!comment.trim()) return;
+    onUpdate(comment.trim());
+  };
+  return /* @__PURE__ */ jsxs3(
+    motion3.div,
+    {
+      className: "shiteki-popover",
+      style: { top: top + dragOffset.y, left: left + dragOffset.x, transformOrigin: above ? "bottom center" : "top center" },
+      initial: { opacity: 0, scale: 0.95, y: yOffset },
+      animate: { opacity: 1, scale: 1, y: 0 },
+      exit: { opacity: 0, scale: 0.95, y: yOffset },
+      transition: spring,
+      children: [
+        /* @__PURE__ */ jsxs3(
+          "div",
+          {
+            className: "shiteki-popover-info",
+            style: { cursor: "grab" },
+            onPointerDown: handlePointerDown,
+            onPointerMove: handlePointerMove,
+            onPointerUp: handlePointerUp,
+            children: [
+              /* @__PURE__ */ jsxs3("span", { className: "shiteki-popover-tag", children: [
+                "#",
+                index,
+                " <",
+                annotation.elementInfo.tagName,
+                ">"
+              ] }),
+              annotation.elementInfo.textContent && /* @__PURE__ */ jsxs3("span", { className: "shiteki-popover-text", children: [
+                '"',
+                annotation.elementInfo.textContent,
+                '"'
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs3("form", { className: "shiteki-popover-form", onSubmit: handleSubmit, children: [
+          /* @__PURE__ */ jsx4(
+            "textarea",
+            {
+              ref: textareaRef,
+              className: "shiteki-popover-textarea",
+              placeholder: "What should change?",
+              value: comment,
+              onChange: (e) => setComment(e.target.value),
+              rows: 3
+            }
+          ),
+          /* @__PURE__ */ jsxs3("div", { className: "shiteki-popover-actions", children: [
+            /* @__PURE__ */ jsx4("button", { type: "button", className: "shiteki-btn shiteki-btn--danger shiteki-btn--icon", onClick: onRemove, title: "Remove annotation", children: /* @__PURE__ */ jsxs3("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+              /* @__PURE__ */ jsx4("polyline", { points: "3 6 5 6 21 6" }),
+              /* @__PURE__ */ jsx4("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })
+            ] }) }),
+            /* @__PURE__ */ jsx4("div", { style: { flex: 1 } }),
+            /* @__PURE__ */ jsx4("button", { type: "button", className: "shiteki-btn shiteki-btn--ghost", onClick: onClose, children: "Cancel" }),
+            /* @__PURE__ */ jsx4("button", { type: "submit", className: "shiteki-btn shiteki-btn--primary", disabled: !comment.trim(), children: "Save" })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
 // src/components/AnnotationMarkers.tsx
 import { AnimatePresence as AnimatePresence2 } from "motion/react";
 
 // src/hooks/useMarkerPositions.ts
-import { useEffect as useEffect4, useState as useState8 } from "react";
+import { useEffect as useEffect5, useState as useState9 } from "react";
 function useMarkerPositions(annotations) {
-  const [positions, setPositions] = useState8([]);
-  useEffect4(() => {
+  const [positions, setPositions] = useState9([]);
+  useEffect5(() => {
     function update() {
-      const newPositions = annotations.map((ann) => {
+      const newPositions = annotations.map((ann, i) => {
+        const index = i + 1;
         const el = document.querySelector(ann.elementInfo.selector);
         if (el) {
           const rect = el.getBoundingClientRect();
-          return { id: ann.id, top: rect.top, left: rect.left + rect.width };
+          return { id: ann.id, index, top: rect.top, left: rect.left + rect.width };
         }
         const r = ann.elementInfo.rect;
-        return { id: ann.id, top: r.top, left: r.left + r.width };
+        return { id: ann.id, index, top: r.top, left: r.left + r.width };
       });
       setPositions(newPositions);
     }
@@ -731,56 +856,57 @@ function useMarkerPositions(annotations) {
 }
 
 // src/components/AnnotationMarker.tsx
-import { motion as motion3 } from "motion/react";
-import { jsx as jsx4 } from "react/jsx-runtime";
-function AnnotationMarker({ id, top, left, onRemove }) {
-  return /* @__PURE__ */ jsx4(
-    motion3.div,
+import { motion as motion4 } from "motion/react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+function AnnotationMarker({ id, index, top, left, onClick }) {
+  return /* @__PURE__ */ jsx5(
+    motion4.div,
     {
       className: "shiteki-marker",
       style: { top: top - 10, left: left - 10 },
-      title: `Annotation #${id} (click to remove)`,
-      onClick: () => onRemove(id),
+      title: `#${index} \u2014 click to view, ${navigator.userAgent.includes("Mac") ? "\u2318" : "Ctrl"}+click to remove`,
+      onClick: (e) => onClick(id, e),
       initial: { opacity: 0, scale: 0 },
       animate: { opacity: 1, scale: 1 },
       exit: { opacity: 0, scale: 0 },
       transition: spring,
       whileHover: { scale: 1.25 },
-      children: id
+      children: index
     }
   );
 }
 
 // src/components/AnnotationMarkers.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
-function AnnotationMarkers({ annotations, onRemove }) {
+import { jsx as jsx6 } from "react/jsx-runtime";
+function AnnotationMarkers({ annotations, onClick }) {
   const positions = useMarkerPositions(annotations);
-  return /* @__PURE__ */ jsx5(AnimatePresence2, { children: positions.map((pos) => /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(AnimatePresence2, { children: positions.map((pos) => /* @__PURE__ */ jsx6(
     AnnotationMarker,
     {
       id: pos.id,
+      index: pos.index,
       top: pos.top,
       left: pos.left,
-      onRemove
+      onClick
     },
     pos.id
   )) });
 }
 
 // src/components/StatusMessage.tsx
-import { useEffect as useEffect5 } from "react";
-import { motion as motion4 } from "motion/react";
-import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+import { useEffect as useEffect6 } from "react";
+import { motion as motion5 } from "motion/react";
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 function StatusMessage({ state, onDismiss }) {
-  useEffect5(() => {
+  useEffect6(() => {
     if (state.status === "success" || state.status === "error") {
       const timer = setTimeout(onDismiss, 4e3);
       return () => clearTimeout(timer);
     }
   }, [state.status, onDismiss]);
   if (state.status === "success") {
-    return /* @__PURE__ */ jsxs3(
-      motion4.div,
+    return /* @__PURE__ */ jsxs4(
+      motion5.div,
       {
         className: "shiteki-status shiteki-status--success",
         initial: { opacity: 0, y: 12, scale: 0.95 },
@@ -790,7 +916,7 @@ function StatusMessage({ state, onDismiss }) {
         children: [
           "Issue created!",
           " ",
-          /* @__PURE__ */ jsxs3("a", { href: state.result.issueUrl, target: "_blank", rel: "noopener noreferrer", children: [
+          /* @__PURE__ */ jsxs4("a", { href: state.result.issueUrl, target: "_blank", rel: "noopener noreferrer", children: [
             "#",
             state.result.issueNumber
           ] })
@@ -799,8 +925,8 @@ function StatusMessage({ state, onDismiss }) {
     );
   }
   if (state.status === "error") {
-    return /* @__PURE__ */ jsx6(
-      motion4.div,
+    return /* @__PURE__ */ jsx7(
+      motion5.div,
       {
         className: "shiteki-status shiteki-status--error",
         initial: { opacity: 0, y: 12, scale: 0.95 },
@@ -812,8 +938,8 @@ function StatusMessage({ state, onDismiss }) {
     );
   }
   if (state.status === "loading") {
-    return /* @__PURE__ */ jsx6(
-      motion4.div,
+    return /* @__PURE__ */ jsx7(
+      motion5.div,
       {
         className: "shiteki-status",
         initial: { opacity: 0, y: 12, scale: 0.95 },
@@ -828,16 +954,45 @@ function StatusMessage({ state, onDismiss }) {
 }
 
 // src/components/SettingsPanel.tsx
-import { useCallback as useCallback7, useState as useState9 } from "react";
-import { motion as motion5 } from "motion/react";
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+import { useCallback as useCallback7, useState as useState10 } from "react";
+import { motion as motion6 } from "motion/react";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+function HelpLink({ href }) {
+  return /* @__PURE__ */ jsx8(
+    "a",
+    {
+      className: "shiteki-settings-help",
+      href,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      onClick: (e) => e.stopPropagation(),
+      children: /* @__PURE__ */ jsxs5("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", children: [
+        /* @__PURE__ */ jsx8("circle", { cx: "8", cy: "8", r: "7", stroke: "currentColor", strokeWidth: "1.5" }),
+        /* @__PURE__ */ jsx8(
+          "text",
+          {
+            x: "8",
+            y: "11.5",
+            textAnchor: "middle",
+            fill: "currentColor",
+            fontSize: "10",
+            fontWeight: "600",
+            fontFamily: "inherit",
+            children: "?"
+          }
+        )
+      ] })
+    }
+  );
+}
 function SettingsPanel({ config, onSave, onCancel }) {
-  const [mode, setMode] = useState9(config.mode);
-  const [endpoint, setEndpoint] = useState9(config.endpoint);
-  const [githubToken, setGithubToken] = useState9(config.githubToken);
-  const [owner, setOwner] = useState9(config.owner);
-  const [repo, setRepo] = useState9(config.repo);
-  const [labels, setLabels] = useState9((config.labels ?? []).join(", "));
+  const [mode, setMode] = useState10(config.mode);
+  const [endpoint, setEndpoint] = useState10(config.endpoint);
+  const [githubToken, setGithubToken] = useState10(config.githubToken);
+  const [owner, setOwner] = useState10(config.owner);
+  const [repo, setRepo] = useState10(config.repo);
+  const [labels, setLabels] = useState10((config.labels ?? []).join(", "));
+  const [clearAfterCopy, setClearAfterCopy] = useState10(config.clearAfterCopy ?? false);
   const handleSave = useCallback7(() => {
     onSave({
       mode,
@@ -845,11 +1000,12 @@ function SettingsPanel({ config, onSave, onCancel }) {
       githubToken: githubToken.trim(),
       owner: owner.trim(),
       repo: repo.trim(),
-      labels: labels.split(",").map((l) => l.trim()).filter(Boolean)
+      labels: labels.split(",").map((l) => l.trim()).filter(Boolean),
+      clearAfterCopy
     });
-  }, [mode, endpoint, githubToken, owner, repo, labels, onSave]);
-  return /* @__PURE__ */ jsxs4(
-    motion5.div,
+  }, [mode, endpoint, githubToken, owner, repo, labels, clearAfterCopy, onSave]);
+  return /* @__PURE__ */ jsxs5(
+    motion6.div,
     {
       className: "shiteki-settings",
       initial: { opacity: 0, y: 12 },
@@ -857,13 +1013,13 @@ function SettingsPanel({ config, onSave, onCancel }) {
       exit: { opacity: 0, y: 12 },
       transition: spring,
       children: [
-        /* @__PURE__ */ jsx7("div", { className: "shiteki-settings-header", children: "Settings" }),
-        /* @__PURE__ */ jsxs4("div", { className: "shiteki-settings-body", children: [
-          /* @__PURE__ */ jsxs4("div", { className: "shiteki-settings-field", children: [
-            /* @__PURE__ */ jsx7("span", { className: "shiteki-settings-label", children: "Submit mode" }),
-            /* @__PURE__ */ jsxs4("div", { className: "shiteki-radio-group", children: [
-              /* @__PURE__ */ jsxs4("label", { className: "shiteki-radio", children: [
-                /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8("div", { className: "shiteki-settings-header", children: "Settings" }),
+        /* @__PURE__ */ jsxs5("div", { className: "shiteki-settings-body", children: [
+          /* @__PURE__ */ jsxs5("div", { className: "shiteki-settings-field", children: [
+            /* @__PURE__ */ jsx8("span", { className: "shiteki-settings-label", children: "Submit mode" }),
+            /* @__PURE__ */ jsxs5("div", { className: "shiteki-radio-group", children: [
+              /* @__PURE__ */ jsxs5("label", { className: "shiteki-radio", children: [
+                /* @__PURE__ */ jsx8(
                   "input",
                   {
                     type: "radio",
@@ -872,10 +1028,10 @@ function SettingsPanel({ config, onSave, onCancel }) {
                     onChange: () => setMode("endpoint")
                   }
                 ),
-                /* @__PURE__ */ jsx7("span", { children: "Endpoint" })
+                /* @__PURE__ */ jsx8("span", { children: "Endpoint" })
               ] }),
-              /* @__PURE__ */ jsxs4("label", { className: "shiteki-radio", children: [
-                /* @__PURE__ */ jsx7(
+              /* @__PURE__ */ jsxs5("label", { className: "shiteki-radio", children: [
+                /* @__PURE__ */ jsx8(
                   "input",
                   {
                     type: "radio",
@@ -884,13 +1040,16 @@ function SettingsPanel({ config, onSave, onCancel }) {
                     onChange: () => setMode("direct")
                   }
                 ),
-                /* @__PURE__ */ jsx7("span", { children: "Direct" })
+                /* @__PURE__ */ jsx8("span", { children: "Direct" })
               ] })
             ] })
           ] }),
-          mode === "endpoint" ? /* @__PURE__ */ jsxs4("label", { className: "shiteki-settings-field", children: [
-            /* @__PURE__ */ jsx7("span", { className: "shiteki-settings-label", children: "Endpoint" }),
-            /* @__PURE__ */ jsx7(
+          mode === "endpoint" ? /* @__PURE__ */ jsxs5("label", { className: "shiteki-settings-field", children: [
+            /* @__PURE__ */ jsxs5("span", { className: "shiteki-settings-label", children: [
+              "Endpoint",
+              /* @__PURE__ */ jsx8(HelpLink, { href: "https://github.com/taterboom/shiteki/tree/main/apps/api" })
+            ] }),
+            /* @__PURE__ */ jsx8(
               "input",
               {
                 className: "shiteki-settings-input",
@@ -900,9 +1059,12 @@ function SettingsPanel({ config, onSave, onCancel }) {
                 placeholder: "https://..."
               }
             )
-          ] }) : /* @__PURE__ */ jsxs4("label", { className: "shiteki-settings-field", children: [
-            /* @__PURE__ */ jsx7("span", { className: "shiteki-settings-label", children: "GitHub Token" }),
-            /* @__PURE__ */ jsx7(
+          ] }) : /* @__PURE__ */ jsxs5("label", { className: "shiteki-settings-field", children: [
+            /* @__PURE__ */ jsxs5("span", { className: "shiteki-settings-label", children: [
+              "GitHub Token",
+              /* @__PURE__ */ jsx8(HelpLink, { href: "https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens" })
+            ] }),
+            /* @__PURE__ */ jsx8(
               "input",
               {
                 className: "shiteki-settings-input",
@@ -913,9 +1075,9 @@ function SettingsPanel({ config, onSave, onCancel }) {
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs4("label", { className: "shiteki-settings-field", children: [
-            /* @__PURE__ */ jsx7("span", { className: "shiteki-settings-label", children: "Owner" }),
-            /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsxs5("label", { className: "shiteki-settings-field", children: [
+            /* @__PURE__ */ jsx8("span", { className: "shiteki-settings-label", children: "Owner" }),
+            /* @__PURE__ */ jsx8(
               "input",
               {
                 className: "shiteki-settings-input",
@@ -926,9 +1088,9 @@ function SettingsPanel({ config, onSave, onCancel }) {
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs4("label", { className: "shiteki-settings-field", children: [
-            /* @__PURE__ */ jsx7("span", { className: "shiteki-settings-label", children: "Repo" }),
-            /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsxs5("label", { className: "shiteki-settings-field", children: [
+            /* @__PURE__ */ jsx8("span", { className: "shiteki-settings-label", children: "Repo" }),
+            /* @__PURE__ */ jsx8(
               "input",
               {
                 className: "shiteki-settings-input",
@@ -939,9 +1101,12 @@ function SettingsPanel({ config, onSave, onCancel }) {
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs4("label", { className: "shiteki-settings-field", children: [
-            /* @__PURE__ */ jsx7("span", { className: "shiteki-settings-label", children: "Labels" }),
-            /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsxs5("label", { className: "shiteki-settings-field", children: [
+            /* @__PURE__ */ jsxs5("span", { className: "shiteki-settings-label", children: [
+              "Labels",
+              /* @__PURE__ */ jsx8(HelpLink, { href: "https://docs.github.com/en/issues/using-labels-and-milestones-to-track-work/managing-labels" })
+            ] }),
+            /* @__PURE__ */ jsx8(
               "input",
               {
                 className: "shiteki-settings-input",
@@ -951,11 +1116,23 @@ function SettingsPanel({ config, onSave, onCancel }) {
                 placeholder: "bug, feedback"
               }
             )
+          ] }),
+          /* @__PURE__ */ jsxs5("label", { className: "shiteki-settings-field shiteki-settings-field--row", children: [
+            /* @__PURE__ */ jsx8("span", { className: "shiteki-settings-label", children: "Clear after copy" }),
+            /* @__PURE__ */ jsx8(
+              "input",
+              {
+                type: "checkbox",
+                className: "shiteki-settings-checkbox",
+                checked: clearAfterCopy,
+                onChange: (e) => setClearAfterCopy(e.target.checked)
+              }
+            )
           ] })
         ] }),
-        /* @__PURE__ */ jsxs4("div", { className: "shiteki-settings-actions", children: [
-          /* @__PURE__ */ jsx7("button", { className: "shiteki-btn shiteki-btn--ghost", onClick: onCancel, children: "Cancel" }),
-          /* @__PURE__ */ jsx7("button", { className: "shiteki-btn shiteki-btn--primary", onClick: handleSave, children: "Save" })
+        /* @__PURE__ */ jsxs5("div", { className: "shiteki-settings-actions", children: [
+          /* @__PURE__ */ jsx8("button", { className: "shiteki-btn shiteki-btn--ghost", onClick: onCancel, children: "Cancel" }),
+          /* @__PURE__ */ jsx8("button", { className: "shiteki-btn shiteki-btn--primary", onClick: handleSave, children: "Save" })
         ] })
       ]
     }
@@ -963,13 +1140,13 @@ function SettingsPanel({ config, onSave, onCancel }) {
 }
 
 // src/components/SendDialog.tsx
-import { useCallback as useCallback8, useEffect as useEffect6, useRef as useRef6, useState as useState10 } from "react";
-import { motion as motion6 } from "motion/react";
-import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+import { useCallback as useCallback8, useEffect as useEffect7, useRef as useRef7, useState as useState11 } from "react";
+import { motion as motion7 } from "motion/react";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 function SendDialog({ defaultTitle, sending, onConfirm, onCancel }) {
-  const [title, setTitle] = useState10(defaultTitle);
-  const inputRef = useRef6(null);
-  useEffect6(() => {
+  const [title, setTitle] = useState11(defaultTitle);
+  const inputRef = useRef7(null);
+  useEffect7(() => {
     inputRef.current?.focus();
     inputRef.current?.select();
   }, []);
@@ -981,8 +1158,8 @@ function SendDialog({ defaultTitle, sending, onConfirm, onCancel }) {
     },
     [title, sending, onConfirm]
   );
-  return /* @__PURE__ */ jsxs5(
-    motion6.div,
+  return /* @__PURE__ */ jsxs6(
+    motion7.div,
     {
       className: "shiteki-popover",
       style: {
@@ -996,9 +1173,9 @@ function SendDialog({ defaultTitle, sending, onConfirm, onCancel }) {
       exit: { opacity: 0, y: 12 },
       transition: spring,
       children: [
-        /* @__PURE__ */ jsx8("div", { className: "shiteki-popover-info", children: /* @__PURE__ */ jsx8("span", { className: "shiteki-popover-tag", children: "Create Issue" }) }),
-        /* @__PURE__ */ jsxs5("form", { className: "shiteki-popover-form", onSubmit: handleSubmit, children: [
-          /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx9("div", { className: "shiteki-popover-info", children: /* @__PURE__ */ jsx9("span", { className: "shiteki-popover-tag", children: "Create Issue" }) }),
+        /* @__PURE__ */ jsxs6("form", { className: "shiteki-popover-form", onSubmit: handleSubmit, children: [
+          /* @__PURE__ */ jsx9(
             "input",
             {
               ref: inputRef,
@@ -1009,8 +1186,8 @@ function SendDialog({ defaultTitle, sending, onConfirm, onCancel }) {
               placeholder: "Issue title"
             }
           ),
-          /* @__PURE__ */ jsxs5("div", { className: "shiteki-popover-actions", children: [
-            /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsxs6("div", { className: "shiteki-popover-actions", children: [
+            /* @__PURE__ */ jsx9(
               "button",
               {
                 type: "button",
@@ -1020,7 +1197,7 @@ function SendDialog({ defaultTitle, sending, onConfirm, onCancel }) {
                 children: "Cancel"
               }
             ),
-            /* @__PURE__ */ jsx8(
+            /* @__PURE__ */ jsx9(
               "button",
               {
                 type: "submit",
@@ -1059,22 +1236,23 @@ function styleInject(css, { insertAt } = {}) {
 }
 
 // src/styles/widget.css
-styleInject('.shiteki-root {\n  --shiteki-primary: #2563eb;\n  --shiteki-primary-hover: #1d4ed8;\n  --shiteki-bg: #ffffff;\n  --shiteki-border: #e5e7eb;\n  --shiteki-text: #111827;\n  --shiteki-text-secondary: #6b7280;\n  --shiteki-radius: 12px;\n  --shiteki-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);\n  font-family:\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    Roboto,\n    sans-serif;\n  font-size: 14px;\n  line-height: 1.5;\n  color: var(--shiteki-text);\n  box-sizing: border-box;\n}\n.shiteki-toolbar {\n  position: fixed;\n  bottom: 20px;\n  right: 20px;\n  display: flex;\n  align-items: center;\n  border-radius: 9999px;\n  z-index: 99999;\n  background: var(--shiteki-bg);\n  border: 1px solid var(--shiteki-border);\n  box-shadow: var(--shiteki-shadow);\n}\n.shiteki-toolbar-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 36px;\n  height: 36px;\n  border: none;\n  border-radius: 50%;\n  background: transparent;\n  color: var(--shiteki-text);\n  cursor: pointer;\n  transition: background 0.15s, color 0.15s;\n}\n.shiteki-toolbar-btn:hover {\n  background: #f3f4f6;\n}\n.shiteki-toolbar-btn:active {\n  transform: scale(0.9);\n}\n.shiteki-toolbar-btn--active {\n  background: var(--shiteki-primary);\n  color: #fff;\n}\n.shiteki-toolbar-btn--active:hover {\n  background: var(--shiteki-primary-hover);\n}\n.shiteki-toolbar-btn:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n.shiteki-toolbar-picker {\n  position: relative;\n}\n.shiteki-toolbar-badge {\n  position: absolute;\n  top: -4px;\n  right: -6px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 16px;\n  height: 16px;\n  padding: 0 4px;\n  border-radius: 8px;\n  background: #ef4444;\n  color: #fff;\n  font-size: 10px;\n  font-weight: 700;\n  line-height: 1;\n  pointer-events: none;\n  box-sizing: border-box;\n}\n.shiteki-toolbar-sep {\n  width: 1px;\n  height: 24px;\n  background: var(--shiteki-border);\n  margin: 0 4px;\n}\n.shiteki-highlight {\n  position: fixed;\n  pointer-events: none;\n  border: 1.5px solid var(--shiteki-primary, #2563eb);\n  background: rgba(37, 99, 235, 0.08);\n  z-index: 99997;\n  transition: all 0.05s ease-out;\n  box-sizing: border-box;\n}\n.shiteki-marker {\n  position: fixed;\n  width: 22px;\n  height: 22px;\n  border-radius: 50%;\n  background: var(--shiteki-primary, #2563eb);\n  color: #fff;\n  font-size: 11px;\n  font-weight: 700;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  z-index: 99998;\n  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);\n  user-select: none;\n}\n.shiteki-popover {\n  position: fixed;\n  width: 320px;\n  background: var(--shiteki-bg);\n  border: 1px solid var(--shiteki-border);\n  border-radius: var(--shiteki-radius);\n  box-shadow: var(--shiteki-shadow);\n  z-index: 99999;\n  overflow: hidden;\n}\n.shiteki-popover-info {\n  padding: 10px 14px;\n  background: #f9fafb;\n  border-bottom: 1px solid var(--shiteki-border);\n  display: flex;\n  align-items: baseline;\n  gap: 8px;\n  overflow: hidden;\n}\n.shiteki-popover-tag {\n  font-family:\n    ui-monospace,\n    SFMono-Regular,\n    "SF Mono",\n    Menlo,\n    monospace;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--shiteki-primary);\n  white-space: nowrap;\n}\n.shiteki-popover-text {\n  font-size: 12px;\n  color: var(--shiteki-text-secondary);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.shiteki-popover-form {\n  padding: 12px 14px;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n.shiteki-popover-textarea {\n  width: 100%;\n  padding: 8px 10px;\n  border: 1px solid var(--shiteki-border);\n  border-radius: 8px;\n  font: inherit;\n  font-size: 13px;\n  color: var(--shiteki-text);\n  background: transparent;\n  outline: none;\n  resize: vertical;\n  min-height: 60px;\n  box-sizing: border-box;\n  transition: border-color 0.15s;\n}\n.shiteki-popover-textarea:focus {\n  border-color: var(--shiteki-primary);\n}\n.shiteki-popover-actions {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n}\n.shiteki-btn {\n  padding: 6px 14px;\n  border: none;\n  border-radius: 8px;\n  font: inherit;\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: background 0.15s;\n}\n.shiteki-btn:active {\n  transform: scale(0.95);\n}\n.shiteki-btn--primary {\n  background: var(--shiteki-primary);\n  color: #fff;\n}\n.shiteki-btn--primary:hover:not(:disabled) {\n  background: var(--shiteki-primary-hover);\n}\n.shiteki-btn--primary:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.shiteki-btn--ghost {\n  background: transparent;\n  color: var(--shiteki-text-secondary);\n}\n.shiteki-btn--ghost:hover {\n  background: #f3f4f6;\n}\n.shiteki-status {\n  position: fixed;\n  bottom: 76px;\n  right: 20px;\n  padding: 8px 18px;\n  background: var(--shiteki-bg);\n  border: 1px solid var(--shiteki-border);\n  border-radius: 8px;\n  box-shadow: var(--shiteki-shadow);\n  font-size: 13px;\n  white-space: nowrap;\n  z-index: 99998;\n}\n.shiteki-status--success {\n  color: #059669;\n}\n.shiteki-status--error {\n  color: #dc2626;\n}\n.shiteki-status a {\n  color: inherit;\n  text-decoration: underline;\n}\n.shiteki-settings {\n  position: fixed;\n  bottom: 76px;\n  right: 20px;\n  width: 280px;\n  background: var(--shiteki-bg);\n  border: 1px solid var(--shiteki-border);\n  border-radius: var(--shiteki-radius);\n  box-shadow: var(--shiteki-shadow);\n  z-index: 99999;\n  overflow: hidden;\n}\n.shiteki-settings-header {\n  padding: 10px 14px;\n  font-size: 13px;\n  font-weight: 600;\n  border-bottom: 1px solid var(--shiteki-border);\n  background: #f9fafb;\n}\n.shiteki-settings-body {\n  padding: 12px 14px;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n.shiteki-settings-field {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n.shiteki-settings-label {\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--shiteki-text-secondary);\n}\n.shiteki-settings-input {\n  width: 100%;\n  padding: 6px 8px;\n  border: 1px solid var(--shiteki-border);\n  border-radius: 8px;\n  font: inherit;\n  font-size: 13px;\n  color: var(--shiteki-text);\n  background: transparent;\n  outline: none;\n  box-sizing: border-box;\n  transition: border-color 0.15s;\n}\n.shiteki-settings-input:focus {\n  border-color: var(--shiteki-primary);\n}\n.shiteki-radio-group {\n  display: flex;\n  gap: 12px;\n}\n.shiteki-radio {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 13px;\n  cursor: pointer;\n}\n.shiteki-radio input[type=radio] {\n  margin: 0;\n  accent-color: var(--shiteki-primary);\n  cursor: pointer;\n}\n.shiteki-settings-actions {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n  padding: 0 14px 12px;\n}\n.shiteki-shortcut-hint {\n  position: absolute;\n  bottom: calc(100% + 8px);\n  right: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 4px 10px;\n  background: var(--shiteki-bg);\n  border: 1px solid var(--shiteki-border);\n  border-radius: 8px;\n  box-shadow: var(--shiteki-shadow);\n  font-size: 12px;\n  color: var(--shiteki-text-secondary);\n  white-space: nowrap;\n}\n.shiteki-shortcut-hint kbd {\n  display: inline-block;\n  padding: 1px 5px;\n  margin-right: 2px;\n  background: #f3f4f6;\n  border: 1px solid var(--shiteki-border);\n  border-radius: 4px;\n  font-family: inherit;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--shiteki-text);\n  line-height: 1.4;\n  min-width: 19.5px;\n  text-align: center;\n}\n.shiteki-shortcut-hint span {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.shiteki-shortcut-hint-close {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 18px;\n  height: 18px;\n  border: none;\n  border-radius: 4px;\n  background: transparent;\n  color: var(--shiteki-text-secondary);\n  cursor: pointer;\n  padding: 0;\n}\n.shiteki-shortcut-hint-close:hover {\n  background: #f3f4f6;\n}\n');
+styleInject('.shiteki-root {\n  --shiteki-primary: #2563eb;\n  --shiteki-primary-hover: #1d4ed8;\n  --shiteki-bg: #ffffff;\n  --shiteki-border: #e5e7eb;\n  --shiteki-text: #111827;\n  --shiteki-text-secondary: #6b7280;\n  --shiteki-radius: 12px;\n  --shiteki-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);\n  font-family:\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    Roboto,\n    sans-serif;\n  font-size: 14px;\n  line-height: 1.5;\n  color: var(--shiteki-text);\n  box-sizing: border-box;\n}\n.shiteki-toolbar {\n  position: fixed;\n  bottom: 20px;\n  right: 20px;\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  border-radius: 9999px;\n  z-index: 99999;\n  background: var(--shiteki-bg);\n  border: 1px solid var(--shiteki-border);\n  box-shadow: var(--shiteki-shadow);\n}\n.shiteki-toolbar-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 36px;\n  height: 36px;\n  border: none;\n  border-radius: 50%;\n  background: transparent;\n  color: var(--shiteki-text);\n  cursor: pointer;\n  transition: background 0.15s, color 0.15s;\n}\n.shiteki-toolbar-btn:hover {\n  background: #f3f4f6;\n}\n.shiteki-toolbar-btn:active {\n  transform: scale(0.9);\n}\n.shiteki-toolbar-btn--active {\n  background: var(--shiteki-primary);\n  color: #fff;\n}\n.shiteki-toolbar-btn--active:hover {\n  background: var(--shiteki-primary-hover);\n}\n.shiteki-toolbar-btn:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n.shiteki-toolbar-picker {\n  position: relative;\n}\n.shiteki-toolbar-badge {\n  position: absolute;\n  top: -4px;\n  right: -6px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 16px;\n  height: 16px;\n  padding: 0 4px;\n  border-radius: 8px;\n  background: #ef4444;\n  color: #fff;\n  font-size: 10px;\n  font-weight: 700;\n  line-height: 1;\n  pointer-events: none;\n  box-sizing: border-box;\n}\n.shiteki-toolbar-sep {\n  width: 1px;\n  height: 24px;\n  background: var(--shiteki-border);\n  margin: 0 4px;\n}\n.shiteki-highlight {\n  position: fixed;\n  pointer-events: none;\n  border: 1.5px solid var(--shiteki-primary, #2563eb);\n  background: rgba(37, 99, 235, 0.08);\n  z-index: 99997;\n  transition: all 0.05s ease-out;\n  box-sizing: border-box;\n}\n.shiteki-marker {\n  position: fixed;\n  width: 22px;\n  height: 22px;\n  border-radius: 50%;\n  background: var(--shiteki-primary, #2563eb);\n  color: #fff;\n  font-size: 11px;\n  font-weight: 700;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  z-index: 99998;\n  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);\n  user-select: none;\n}\n.shiteki-popover {\n  position: fixed;\n  width: 320px;\n  background: var(--shiteki-bg);\n  border: 1px solid var(--shiteki-border);\n  border-radius: var(--shiteki-radius);\n  box-shadow: var(--shiteki-shadow);\n  z-index: 99999;\n  overflow: hidden;\n}\n.shiteki-popover-info {\n  padding: 10px 14px;\n  background: #f9fafb;\n  border-bottom: 1px solid var(--shiteki-border);\n  display: flex;\n  align-items: baseline;\n  gap: 8px;\n  overflow: hidden;\n}\n.shiteki-popover-tag {\n  font-family:\n    ui-monospace,\n    SFMono-Regular,\n    "SF Mono",\n    Menlo,\n    monospace;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--shiteki-primary);\n  white-space: nowrap;\n}\n.shiteki-popover-text {\n  font-size: 12px;\n  color: var(--shiteki-text-secondary);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.shiteki-popover-form {\n  padding: 12px 14px;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n.shiteki-popover-textarea {\n  width: 100%;\n  padding: 8px 10px;\n  border: 1px solid var(--shiteki-border);\n  border-radius: 8px;\n  font: inherit;\n  font-size: 13px;\n  color: var(--shiteki-text);\n  background: transparent;\n  outline: none;\n  resize: vertical;\n  min-height: 60px;\n  box-sizing: border-box;\n  transition: border-color 0.15s;\n}\n.shiteki-popover-textarea:focus {\n  border-color: var(--shiteki-primary);\n}\n.shiteki-popover-comment {\n  font-size: 13px;\n  color: var(--shiteki-text);\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n.shiteki-popover-actions {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n}\n.shiteki-btn {\n  padding: 6px 14px;\n  border: none;\n  border-radius: 8px;\n  font: inherit;\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: background 0.15s;\n}\n.shiteki-btn:active {\n  transform: scale(0.95);\n}\n.shiteki-btn--primary {\n  background: var(--shiteki-primary);\n  color: #fff;\n}\n.shiteki-btn--primary:hover:not(:disabled) {\n  background: var(--shiteki-primary-hover);\n}\n.shiteki-btn--primary:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.shiteki-btn--ghost {\n  background: transparent;\n  color: var(--shiteki-text-secondary);\n}\n.shiteki-btn--ghost:hover {\n  background: #f3f4f6;\n}\n.shiteki-btn--danger {\n  background: #fee2e2;\n  color: #dc2626;\n}\n.shiteki-btn--danger:hover {\n  background: #fecaca;\n}\n.shiteki-btn--icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 30px;\n  height: 30px;\n  padding: 0;\n}\n.shiteki-status {\n  position: fixed;\n  bottom: 76px;\n  right: 20px;\n  padding: 8px 18px;\n  background: var(--shiteki-bg);\n  border: 1px solid var(--shiteki-border);\n  border-radius: 8px;\n  box-shadow: var(--shiteki-shadow);\n  font-size: 13px;\n  white-space: nowrap;\n  z-index: 99998;\n}\n.shiteki-status--success {\n  color: #059669;\n}\n.shiteki-status--error {\n  color: #dc2626;\n}\n.shiteki-status a {\n  color: inherit;\n  text-decoration: underline;\n}\n.shiteki-settings {\n  position: fixed;\n  bottom: 76px;\n  right: 20px;\n  width: 280px;\n  background: var(--shiteki-bg);\n  border: 1px solid var(--shiteki-border);\n  border-radius: var(--shiteki-radius);\n  box-shadow: var(--shiteki-shadow);\n  z-index: 99999;\n  overflow: hidden;\n}\n.shiteki-settings-header {\n  padding: 10px 14px;\n  font-size: 13px;\n  font-weight: 600;\n  border-bottom: 1px solid var(--shiteki-border);\n  background: #f9fafb;\n}\n.shiteki-settings-body {\n  padding: 12px 14px;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n.shiteki-settings-field {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n.shiteki-settings-field--row {\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  cursor: pointer;\n}\n.shiteki-settings-checkbox {\n  margin: 0;\n  accent-color: var(--shiteki-primary);\n  cursor: pointer;\n}\n.shiteki-settings-label {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--shiteki-text-secondary);\n}\n.shiteki-settings-help {\n  display: inline-flex;\n  align-items: center;\n  color: var(--shiteki-text-secondary);\n  opacity: 0.5;\n  transition: opacity 0.15s;\n}\n.shiteki-settings-help:hover {\n  opacity: 1;\n}\n.shiteki-settings-input {\n  width: 100%;\n  padding: 6px 8px;\n  border: 1px solid var(--shiteki-border);\n  border-radius: 8px;\n  font: inherit;\n  font-size: 13px;\n  color: var(--shiteki-text);\n  background: transparent;\n  outline: none;\n  box-sizing: border-box;\n  transition: border-color 0.15s;\n}\n.shiteki-settings-input:focus {\n  border-color: var(--shiteki-primary);\n}\n.shiteki-radio-group {\n  display: flex;\n  gap: 12px;\n}\n.shiteki-radio {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 13px;\n  cursor: pointer;\n}\n.shiteki-radio input[type=radio] {\n  margin: 0;\n  accent-color: var(--shiteki-primary);\n  cursor: pointer;\n}\n.shiteki-settings-actions {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n  padding: 0 14px 12px;\n}\n.shiteki-shortcut-hint {\n  position: absolute;\n  bottom: calc(100% + 8px);\n  right: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n  padding: 8px 12px;\n  background: var(--shiteki-bg);\n  border: 1px solid var(--shiteki-border);\n  border-radius: 8px;\n  box-shadow: var(--shiteki-shadow);\n  font-size: 12px;\n  color: var(--shiteki-text-secondary);\n  white-space: nowrap;\n}\n.shiteki-shortcut-hint-close {\n  position: absolute;\n  top: 6px;\n  right: 6px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 18px;\n  height: 18px;\n  border: none;\n  border-radius: 4px;\n  background: transparent;\n  color: var(--shiteki-text-secondary);\n  cursor: pointer;\n  padding: 0;\n}\n.shiteki-shortcut-hint-close:hover {\n  background: #f3f4f6;\n}\n.shiteki-shortcut-hint-list {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n.shiteki-shortcut-hint-list span {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n.shiteki-shortcut-hint kbd {\n  display: inline-block;\n  padding: 1px 5px;\n  background: #f3f4f6;\n  border: 1px solid var(--shiteki-border);\n  border-radius: 4px;\n  font-family: inherit;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--shiteki-text);\n  line-height: 1.4;\n  min-width: 20px;\n  text-align: center;\n}\n.shiteki-shortcut-hint-close:hover {\n  background: #f3f4f6;\n}\n');
 
 // src/components/ShitekiWidget.tsx
-import { Fragment, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 function ShitekiWidget(props) {
   const { config, updateConfig } = useConfig(props);
-  const [open, setOpen] = useState11(false);
-  const [mode, setMode] = useState11("idle");
-  const [settingsOpen, setSettingsOpen] = useState11(false);
-  const [sendDialogOpen, setSendDialogOpen] = useState11(false);
-  const [selectedElement, setSelectedElement] = useState11(null);
-  const { annotations, add, remove, clear } = useAnnotations();
+  const [open, setOpen] = useState12(false);
+  const [mode, setMode] = useState12("idle");
+  const [settingsOpen, setSettingsOpen] = useState12(false);
+  const [sendDialogOpen, setSendDialogOpen] = useState12(false);
+  const [selectedElement, setSelectedElement] = useState12(null);
+  const [viewingAnnotation, setViewingAnnotation] = useState12(null);
+  const { annotations, add, update, remove, clear } = useAnnotations();
   const { state: submitState, submit, reset: resetSubmit } = useSubmit(config);
   const { copied, copy } = useClipboard();
   const { showHint, dismissHint } = useShortcutHint();
-  useEffect7(() => {
+  useEffect8(() => {
     if (submitState.status === "success") {
       clear();
     }
@@ -1117,10 +1295,43 @@ function ShitekiWidget(props) {
     setSelectedElement(null);
     setMode("picking");
   }, []);
+  const handleMarkerClick = useCallback9(
+    (id, e) => {
+      if (e.metaKey || e.ctrlKey) {
+        remove(id);
+      } else {
+        const ann = annotations.find((a) => a.id === id);
+        if (ann) setViewingAnnotation(ann);
+      }
+    },
+    [annotations, remove]
+  );
+  const handleCloseViewing = useCallback9(() => {
+    setViewingAnnotation(null);
+  }, []);
+  const handleUpdateViewing = useCallback9(
+    (comment) => {
+      if (viewingAnnotation) {
+        update(viewingAnnotation.id, comment);
+        setViewingAnnotation(null);
+      }
+    },
+    [viewingAnnotation, update]
+  );
+  const handleRemoveViewing = useCallback9(() => {
+    if (viewingAnnotation) {
+      remove(viewingAnnotation.id);
+      setViewingAnnotation(null);
+    }
+  }, [viewingAnnotation, remove]);
   const handleCopy = useCallback9(() => {
     const prompt = generatePrompt(annotations);
     copy(prompt);
-  }, [annotations, copy]);
+    if (config.clearAfterCopy) {
+      clear();
+      setSelectedElement(null);
+    }
+  }, [annotations, copy, config.clearAfterCopy, clear]);
   const handleSend = useCallback9(() => {
     setSendDialogOpen(true);
   }, []);
@@ -1138,11 +1349,13 @@ function ShitekiWidget(props) {
   const handleClear = useCallback9(() => {
     clear();
     setSelectedElement(null);
+    setViewingAnnotation(null);
   }, [clear]);
   const handleClose = useCallback9(() => {
     setOpen(false);
     setMode("idle");
     setSelectedElement(null);
+    setViewingAnnotation(null);
     setSettingsOpen(false);
   }, []);
   const handleToggleSettings = useCallback9(() => {
@@ -1158,10 +1371,12 @@ function ShitekiWidget(props) {
   const handleSettingsCancel = useCallback9(() => {
     setSettingsOpen(false);
   }, []);
+  const canSend = config.owner.trim() !== "" && config.repo.trim() !== "" && (config.mode === "endpoint" ? config.endpoint.trim() !== "" : config.githubToken.trim() !== "");
   useKeyboardShortcuts({
     open,
     mode,
     annotationCount: annotations.length,
+    canSend,
     settingsOpen,
     sendDialogOpen,
     onCopy: handleCopy,
@@ -1174,14 +1389,15 @@ function ShitekiWidget(props) {
     onCloseSendDialog: handleSendCancel
   });
   return ReactDOM.createPortal(
-    /* @__PURE__ */ jsxs6("div", { className: "shiteki-root", children: [
-      /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsxs7("div", { className: "shiteki-root", children: [
+      /* @__PURE__ */ jsx10(
         Toolbar,
         {
           open,
           annotationCount: annotations.length,
           copied,
           sending: submitState.status === "loading",
+          canSend,
           settingsOpen,
           onOpen: handleOpen,
           onCopy: handleCopy,
@@ -1193,9 +1409,9 @@ function ShitekiWidget(props) {
           onDismissHint: dismissHint
         }
       ),
-      open && /* @__PURE__ */ jsxs6(Fragment, { children: [
-        /* @__PURE__ */ jsx9(ElementHighlight, { rect: hoveredRect }),
-        /* @__PURE__ */ jsx9(AnimatePresence3, { children: mode === "annotating" && selectedElement && /* @__PURE__ */ jsx9(
+      open && /* @__PURE__ */ jsxs7(Fragment, { children: [
+        /* @__PURE__ */ jsx10(ElementHighlight, { rect: hoveredRect }),
+        /* @__PURE__ */ jsx10(AnimatePresence3, { children: mode === "annotating" && selectedElement && /* @__PURE__ */ jsx10(
           AnnotationPopover,
           {
             elementInfo: selectedElement,
@@ -1204,9 +1420,20 @@ function ShitekiWidget(props) {
           },
           "popover"
         ) }),
-        /* @__PURE__ */ jsx9(AnnotationMarkers, { annotations, onRemove: remove }),
-        /* @__PURE__ */ jsxs6(AnimatePresence3, { children: [
-          settingsOpen && /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx10(AnnotationMarkers, { annotations, onClick: handleMarkerClick }),
+        /* @__PURE__ */ jsx10(AnimatePresence3, { children: viewingAnnotation && /* @__PURE__ */ jsx10(
+          AnnotationDetailPopover,
+          {
+            annotation: viewingAnnotation,
+            index: annotations.findIndex((a) => a.id === viewingAnnotation.id) + 1,
+            onUpdate: handleUpdateViewing,
+            onRemove: handleRemoveViewing,
+            onClose: handleCloseViewing
+          },
+          "detail"
+        ) }),
+        /* @__PURE__ */ jsxs7(AnimatePresence3, { children: [
+          settingsOpen && /* @__PURE__ */ jsx10(
             SettingsPanel,
             {
               config,
@@ -1215,7 +1442,7 @@ function ShitekiWidget(props) {
             },
             "settings"
           ),
-          sendDialogOpen && /* @__PURE__ */ jsx9(
+          sendDialogOpen && /* @__PURE__ */ jsx10(
             SendDialog,
             {
               defaultTitle: `Visual Annotations (${annotations.length}) \u2014 ${document.title || location.href}`,
@@ -1226,7 +1453,7 @@ function ShitekiWidget(props) {
             "send-dialog"
           )
         ] }),
-        /* @__PURE__ */ jsx9(AnimatePresence3, { children: submitState.status !== "idle" && /* @__PURE__ */ jsx9(StatusMessage, { state: submitState, onDismiss: resetSubmit }, "status") })
+        /* @__PURE__ */ jsx10(AnimatePresence3, { children: submitState.status !== "idle" && /* @__PURE__ */ jsx10(StatusMessage, { state: submitState, onDismiss: resetSubmit }, "status") })
       ] })
     ] }),
     document.body