npm - @david-xpn/llm-ui-feedback - Versions diffs - 0.1.0 → 0.1.2 - Mend

@david-xpn/llm-ui-feedback 0.1.0 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/dist/index.js CHANGED Viewed

@@ -30,15 +30,12 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  FeedbackWidget: () => FeedbackWidget,
-  clearEntries: () => clearEntries,
-  deleteEntry: () => deleteEntry,
-  loadEntries: () => loadEntries
+  FeedbackWidget: () => FeedbackWidget
 });
 module.exports = __toCommonJS(index_exports);
 // src/components/FeedbackWidget.tsx
-var import_react4 = require("react");
+var import_react7 = require("react");
 var import_react_dom = require("react-dom");
 // src/utils/color.ts
@@ -55,44 +52,107 @@ function getContrastColor(hexColor) {
 // src/components/FloatingButton.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-function FloatingButton({ onClick, active, position, buttonColor }) {
+function FloatingButton({ onPickClick, onPanelToggle, draftCount, panelOpen, position, buttonColor }) {
   const isBottom = position.includes("bottom");
   const isRight = position.includes("right");
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "button",
-    {
-      onClick,
-      "aria-label": active ? "Cancel feedback" : "Add feedback",
-      style: {
-        position: "fixed",
-        [isBottom ? "bottom" : "top"]: 24,
-        [isRight ? "right" : "left"]: 24,
-        zIndex: 99999,
-        width: 48,
-        height: 48,
-        borderRadius: "50%",
-        border: "none",
-        background: active ? "#ef4444" : buttonColor,
-        color: active ? "#fff" : getContrastColor(buttonColor),
-        fontSize: 24,
-        cursor: "pointer",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        boxShadow: "0 2px 8px rgba(0,0,0,0.25)",
-        transition: "background 0.15s, transform 0.15s",
-        transform: active ? "rotate(45deg)" : "none"
-      },
-      children: "+"
-    }
-  );
+  const anchor = {
+    position: "fixed",
+    [isBottom ? "bottom" : "top"]: 24,
+    [isRight ? "right" : "left"]: 24,
+    zIndex: 99999,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: 8
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: anchor, children: [
+    draftCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        onClick: onPanelToggle,
+        "aria-label": panelOpen ? "Close drafts panel" : `Open drafts panel (${draftCount})`,
+        style: {
+          width: 32,
+          height: 32,
+          borderRadius: "50%",
+          border: "none",
+          background: panelOpen ? "#ef4444" : buttonColor,
+          color: panelOpen ? "#fff" : getContrastColor(buttonColor),
+          fontFamily: "system-ui, -apple-system, sans-serif",
+          fontSize: 13,
+          fontWeight: 700,
+          lineHeight: 1,
+          cursor: "pointer",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          boxShadow: "0 2px 8px rgba(0,0,0,0.25)",
+          transition: "background 0.15s",
+          padding: 0
+        },
+        children: draftCount
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        onClick: panelOpen ? onPanelToggle : onPickClick,
+        "aria-label": panelOpen ? "Close panel" : "Pick element for feedback",
+        style: {
+          width: 48,
+          height: 48,
+          borderRadius: "50%",
+          border: "none",
+          background: panelOpen ? "#ef4444" : buttonColor,
+          color: panelOpen ? "#fff" : getContrastColor(buttonColor),
+          fontFamily: "system-ui, -apple-system, sans-serif",
+          fontSize: 28,
+          fontWeight: 300,
+          lineHeight: 1,
+          cursor: "pointer",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          boxShadow: "0 2px 8px rgba(0,0,0,0.25)",
+          transition: "background 0.15s, transform 0.15s",
+          transform: panelOpen ? "rotate(45deg)" : "none",
+          padding: 0
+        },
+        children: "+"
+      }
+    )
+  ] });
 }
 // src/components/PickOverlay.tsx
 var import_react = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var WIDGET_CONTAINER_ID = "llm-ui-feedback-root";
-function getElementBeneath(x, y) {
+function getElementsBeneathRect(rect) {
+  const container = document.getElementById(WIDGET_CONTAINER_ID);
+  if (container) container.style.display = "none";
+  const seen = /* @__PURE__ */ new Set();
+  const step = 8;
+  for (let x = rect.x; x <= rect.x + rect.width; x += step) {
+    for (let y = rect.y; y <= rect.y + rect.height; y += step) {
+      const el = document.elementFromPoint(x, y);
+      if (el && !seen.has(el)) seen.add(el);
+    }
+  }
+  for (const [x, y] of [
+    [rect.x, rect.y],
+    [rect.x + rect.width, rect.y],
+    [rect.x, rect.y + rect.height],
+    [rect.x + rect.width, rect.y + rect.height],
+    [rect.x + rect.width / 2, rect.y + rect.height / 2]
+  ]) {
+    const el = document.elementFromPoint(x, y);
+    if (el && !seen.has(el)) seen.add(el);
+  }
+  if (container) container.style.display = "";
+  return Array.from(seen).filter((el) => !container?.contains(el));
+}
+function getElementAtPoint(x, y) {
   const container = document.getElementById(WIDGET_CONTAINER_ID);
   if (container) container.style.display = "none";
   const el = document.elementFromPoint(x, y);
@@ -100,218 +160,541 @@ function getElementBeneath(x, y) {
   if (el && container?.contains(el)) return null;
   return el;
 }
+var DRAG_THRESHOLD = 10;
 function PickOverlay({ onPick, onCancel }) {
-  const lastOutlinedRef = (0, import_react.useRef)(null);
-  const clearOutline = (0, import_react.useCallback)(() => {
-    if (lastOutlinedRef.current) {
-      lastOutlinedRef.current.style.outline = "";
-      lastOutlinedRef.current = null;
+  const activeRef = (0, import_react.useRef)(false);
+  const startRef = (0, import_react.useRef)(null);
+  const isDragRef = (0, import_react.useRef)(false);
+  const [hoverRect, setHoverRect] = (0, import_react.useState)(null);
+  const [selRect, setSelRect] = (0, import_react.useState)(null);
+  const onPickRef = (0, import_react.useRef)(onPick);
+  onPickRef.current = onPick;
+  const onCancelRef = (0, import_react.useRef)(onCancel);
+  onCancelRef.current = onCancel;
+  (0, import_react.useEffect)(() => {
+    function handleMouseMove(e) {
+      if (activeRef.current && startRef.current) {
+        const dx = Math.abs(e.clientX - startRef.current.x);
+        const dy = Math.abs(e.clientY - startRef.current.y);
+        if (dx >= DRAG_THRESHOLD || dy >= DRAG_THRESHOLD) {
+          isDragRef.current = true;
+        }
+        if (isDragRef.current) {
+          setHoverRect(null);
+          setSelRect({
+            left: Math.min(startRef.current.x, e.clientX),
+            top: Math.min(startRef.current.y, e.clientY),
+            width: Math.abs(e.clientX - startRef.current.x),
+            height: Math.abs(e.clientY - startRef.current.y)
+          });
+        }
+        e.preventDefault();
+      } else {
+        const el = getElementAtPoint(e.clientX, e.clientY);
+        if (el) {
+          const r = el.getBoundingClientRect();
+          setHoverRect({ x: r.left, y: r.top, width: r.width, height: r.height });
+        } else {
+          setHoverRect(null);
+        }
+      }
     }
-  }, []);
-  const handleMouseMove = (0, import_react.useCallback)((e) => {
-    const el = getElementBeneath(e.clientX, e.clientY);
-    clearOutline();
-    if (el && el instanceof HTMLElement) {
-      el.style.outline = "2px solid #3b82f6";
-      lastOutlinedRef.current = el;
-    }
-  }, [clearOutline]);
-  const handleClick = (0, import_react.useCallback)(
-    (e) => {
+    function handleMouseDown(e) {
+      if (e.button !== 0) return;
       e.preventDefault();
       e.stopPropagation();
-      clearOutline();
-      const el = getElementBeneath(e.clientX, e.clientY);
-      if (el) {
-        onPick(el, e.clientX, e.clientY);
+      startRef.current = { x: e.clientX, y: e.clientY };
+      isDragRef.current = false;
+      activeRef.current = true;
+    }
+    function handleMouseUp(e) {
+      if (!activeRef.current || !startRef.current) return;
+      e.preventDefault();
+      e.stopPropagation();
+      const start = startRef.current;
+      activeRef.current = false;
+      startRef.current = null;
+      setSelRect(null);
+      setHoverRect(null);
+      if (!isDragRef.current) {
+        const el = getElementAtPoint(e.clientX, e.clientY);
+        if (el) {
+          const r = el.getBoundingClientRect();
+          onPickRef.current({ x: r.left, y: r.top, width: r.width, height: r.height }, [el]);
+        }
+        return;
       }
-    },
-    [onPick, clearOutline]
-  );
-  const handleKeyDown = (0, import_react.useCallback)(
-    (e) => {
+      const x = Math.min(start.x, e.clientX);
+      const y = Math.min(start.y, e.clientY);
+      const width = Math.abs(e.clientX - start.x);
+      const height = Math.abs(e.clientY - start.y);
+      const rect = { x, y, width, height };
+      const elements = getElementsBeneathRect(rect);
+      onPickRef.current(rect, elements);
+    }
+    function handleKeyDown(e) {
       if (e.key === "Escape") {
-        clearOutline();
-        onCancel();
+        activeRef.current = false;
+        startRef.current = null;
+        setSelRect(null);
+        setHoverRect(null);
+        onCancelRef.current();
       }
-    },
-    [onCancel, clearOutline]
-  );
-  (0, import_react.useEffect)(() => {
+    }
+    document.addEventListener("mousedown", handleMouseDown, true);
     document.addEventListener("mousemove", handleMouseMove, true);
-    document.addEventListener("click", handleClick, true);
+    document.addEventListener("mouseup", handleMouseUp, true);
     document.addEventListener("keydown", handleKeyDown, true);
     return () => {
+      document.removeEventListener("mousedown", handleMouseDown, true);
       document.removeEventListener("mousemove", handleMouseMove, true);
-      document.removeEventListener("click", handleClick, true);
+      document.removeEventListener("mouseup", handleMouseUp, true);
       document.removeEventListener("keydown", handleKeyDown, true);
-      if (lastOutlinedRef.current) {
-        lastOutlinedRef.current.style.outline = "";
-        lastOutlinedRef.current = null;
-      }
     };
-  }, [handleMouseMove, handleClick, handleKeyDown]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          zIndex: 99997,
+          cursor: "crosshair"
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          top: 0,
+          left: 0,
+          right: 0,
+          zIndex: 99998,
+          background: "rgba(59, 130, 246, 0.08)",
+          padding: "8px 16px",
+          textAlign: "center",
+          fontSize: 14,
+          color: "#1e40af",
+          fontFamily: "system-ui, sans-serif",
+          pointerEvents: "none"
+        },
+        children: [
+          "Click an element or drag to select an area. Press ",
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("strong", { children: "Esc" }),
+          " to cancel."
+        ]
+      }
+    ),
+    hoverRect && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          left: hoverRect.x,
+          top: hoverRect.y,
+          width: hoverRect.width,
+          height: hoverRect.height,
+          border: "2px solid #3b82f6",
+          background: "rgba(59, 130, 246, 0.08)",
+          zIndex: 99998,
+          pointerEvents: "none",
+          borderRadius: 2,
+          transition: "all 0.1s ease-out"
+        }
+      }
+    ),
+    selRect && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          left: selRect.left,
+          top: selRect.top,
+          width: selRect.width,
+          height: selRect.height,
+          border: "2px dashed #3b82f6",
+          background: "rgba(59, 130, 246, 0.1)",
+          zIndex: 99998,
+          pointerEvents: "none",
+          borderRadius: 2
+        }
+      }
+    )
+  ] });
+}
+// src/components/SidePanel.tsx
+var import_react3 = __toESM(require("react"));
+// src/components/DraftItem.tsx
+var import_react2 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function DraftItem({ draft, selected, screenshotUrl, onToggleSelect, onUpdate, onDelete, onPreviewScreenshot }) {
+  const [editing, setEditing] = (0, import_react2.useState)(false);
+  const [editComment, setEditComment] = (0, import_react2.useState)(draft.comment);
+  const [confirmDelete, setConfirmDelete] = (0, import_react2.useState)(false);
+  const handleSaveEdit = () => {
+    if (editComment.trim()) {
+      onUpdate(draft.id, editComment.trim());
+    }
+    setEditing(false);
+  };
+  const truncatedPath = draft.componentPath.length > 50 ? "..." + draft.componentPath.slice(-47) : draft.componentPath;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      style: {
+        padding: "10px 12px",
+        borderBottom: "1px solid #e5e7eb",
+        fontSize: 13,
+        fontFamily: "system-ui, sans-serif"
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", alignItems: "flex-start", gap: 8 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "input",
+          {
+            type: "checkbox",
+            checked: selected,
+            onChange: () => onToggleSelect(draft.id),
+            style: { marginTop: 3, cursor: "pointer" }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { color: "#6b7280", fontSize: 11, marginBottom: 2 }, title: draft.componentPath, children: truncatedPath }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { color: "#9ca3af", fontSize: 11, marginBottom: 4 }, title: draft.url, children: draft.url.length > 60 ? draft.url.slice(0, 60) + "..." : draft.url }),
+          screenshotUrl && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "img",
+            {
+              src: screenshotUrl,
+              alt: "Screenshot",
+              onClick: () => onPreviewScreenshot(draft.id),
+              style: {
+                width: "100%",
+                maxHeight: 160,
+                objectFit: "cover",
+                borderRadius: 4,
+                border: "1px solid #e5e7eb",
+                cursor: "pointer",
+                marginBottom: 6
+              },
+              title: "Click to enlarge"
+            }
+          ),
+          editing ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "textarea",
+              {
+                value: editComment,
+                onChange: (e) => setEditComment(e.target.value),
+                autoFocus: true,
+                style: {
+                  width: "100%",
+                  minHeight: 48,
+                  padding: 6,
+                  borderRadius: 4,
+                  border: "1px solid #d1d5db",
+                  fontSize: 13,
+                  resize: "vertical",
+                  boxSizing: "border-box"
+                }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", gap: 4, marginTop: 4 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { onClick: handleSaveEdit, style: smallBtn("#3b82f6", "#fff"), children: "Save" }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { onClick: () => {
+                setEditing(false);
+                setEditComment(draft.comment);
+              }, style: smallBtn("#f3f4f6", "#374151"), children: "Cancel" })
+            ] })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "div",
+            {
+              onClick: () => setEditing(true),
+              style: { cursor: "pointer", color: "#1f2937", lineHeight: 1.4 },
+              title: "Click to edit",
+              children: draft.comment
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { flexShrink: 0 }, children: confirmDelete ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", gap: 4, fontSize: 12 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { onClick: () => onDelete(draft.id), style: smallBtn("#ef4444", "#fff"), children: "Yes" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { onClick: () => setConfirmDelete(false), style: smallBtn("#f3f4f6", "#374151"), children: "No" })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "button",
+          {
+            onClick: () => setConfirmDelete(true),
+            style: {
+              background: "none",
+              border: "none",
+              cursor: "pointer",
+              color: "#9ca3af",
+              fontSize: 16,
+              padding: "0 4px"
+            },
+            title: "Delete draft",
+            children: "x"
+          }
+        ) })
+      ] })
+    }
+  );
+}
+function smallBtn(bg, color) {
+  return {
+    padding: "3px 8px",
+    borderRadius: 4,
+    border: "1px solid #d1d5db",
+    background: bg,
+    color,
+    fontSize: 12,
+    cursor: "pointer"
+  };
+}
+// src/components/SidePanel.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function SidePanel({
+  position,
+  drafts,
+  selectedDraftIds,
+  onToggleSelect,
+  onSelectAll,
+  onUpdateDraft,
+  onDeleteDraft,
+  onSubmit,
+  onClose,
+  api,
+  user
+}) {
+  const isRight = position.includes("right");
+  const allSelected = drafts.length > 0 && selectedDraftIds.size === drafts.length;
+  const [screenshotUrls, setScreenshotUrls] = (0, import_react3.useState)({});
+  const [previewUrl, setPreviewUrl] = (0, import_react3.useState)(null);
+  import_react3.default.useEffect(() => {
+    const draftsWithScreenshots = drafts.filter((d) => d.screenshotKey && !screenshotUrls[d.id]);
+    draftsWithScreenshots.forEach((draft) => {
+      api.getScreenshotUrl(draft.id).then((url) => {
+        setScreenshotUrls((prev) => ({ ...prev, [draft.id]: url }));
+      }).catch(() => {
+      });
+    });
+  }, [drafts, api]);
+  const handlePreviewScreenshot = (draftId) => {
+    const url = screenshotUrls[draftId];
+    if (url) setPreviewUrl(url);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "div",
     {
       style: {
         position: "fixed",
         top: 0,
-        left: 0,
-        right: 0,
+        [isRight ? "right" : "left"]: 0,
+        width: 360,
+        maxWidth: "100vw",
+        height: "100vh",
+        background: "#fff",
+        boxShadow: isRight ? "-4px 0 16px rgba(0,0,0,0.1)" : "4px 0 16px rgba(0,0,0,0.1)",
         zIndex: 99998,
-        background: "rgba(59, 130, 246, 0.08)",
-        padding: "8px 16px",
-        textAlign: "center",
-        fontSize: 14,
-        color: "#1e40af",
-        fontFamily: "system-ui, sans-serif",
-        pointerEvents: "none"
+        display: "flex",
+        flexDirection: "column",
+        fontFamily: "system-ui, sans-serif"
       },
       children: [
-        "Click on any element to leave feedback. Press ",
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("strong", { children: "Esc" }),
-        " to cancel."
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          "div",
+          {
+            style: {
+              padding: "16px 16px 12px",
+              borderBottom: "1px solid #e5e7eb"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h3", { style: { margin: 0, fontSize: 15, fontWeight: 600 }, children: "Feedback Session" }),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "button",
+                  {
+                    onClick: onClose,
+                    style: {
+                      background: "none",
+                      border: "none",
+                      fontSize: 18,
+                      cursor: "pointer",
+                      color: "#6b7280",
+                      padding: "0 4px"
+                    },
+                    children: "x"
+                  }
+                )
+              ] }),
+              user && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { marginTop: 6, fontSize: 12, color: "#6b7280", lineHeight: 1.4 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontWeight: 500, color: "#374151" }, children: user.name }),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { children: user.email })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { flex: 1, overflow: "auto" }, children: drafts.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { padding: 24, textAlign: "center", color: "#9ca3af", fontSize: 13 }, children: "No drafts yet. Pick an element to start." }) : drafts.map((draft) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          DraftItem,
+          {
+            draft,
+            selected: selectedDraftIds.has(draft.id),
+            screenshotUrl: screenshotUrls[draft.id] || null,
+            onToggleSelect,
+            onUpdate: onUpdateDraft,
+            onDelete: onDeleteDraft,
+            onPreviewScreenshot: handlePreviewScreenshot
+          },
+          draft.id
+        )) }),
+        drafts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          "div",
+          {
+            style: {
+              padding: "12px 16px",
+              borderTop: "1px solid #e5e7eb",
+              display: "flex",
+              alignItems: "center",
+              gap: 12
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { style: { display: "flex", alignItems: "center", gap: 6, fontSize: 13, cursor: "pointer", whiteSpace: "nowrap" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "input",
+                  {
+                    type: "checkbox",
+                    checked: allSelected,
+                    onChange: (e) => onSelectAll(e.target.checked)
+                  }
+                ),
+                "Select All"
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                "button",
+                {
+                  onClick: onSubmit,
+                  disabled: selectedDraftIds.size === 0,
+                  style: {
+                    flex: 1,
+                    padding: "8px 12px",
+                    borderRadius: 6,
+                    border: "none",
+                    background: selectedDraftIds.size === 0 ? "#93c5fd" : "#3b82f6",
+                    color: "#fff",
+                    fontSize: 13,
+                    fontWeight: 500,
+                    cursor: selectedDraftIds.size === 0 ? "default" : "pointer"
+                  },
+                  children: [
+                    "Submit Feedback (",
+                    selectedDraftIds.size,
+                    ")"
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        previewUrl && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "div",
+          {
+            onClick: () => setPreviewUrl(null),
+            style: {
+              position: "fixed",
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              background: "rgba(0,0,0,0.6)",
+              zIndex: 99999,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center"
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+              "div",
+              {
+                onClick: (e) => e.stopPropagation(),
+                style: {
+                  background: "#fff",
+                  borderRadius: 8,
+                  padding: 8,
+                  maxWidth: "90vw",
+                  maxHeight: "90vh",
+                  position: "relative"
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                    "button",
+                    {
+                      onClick: () => setPreviewUrl(null),
+                      style: {
+                        position: "absolute",
+                        top: 4,
+                        right: 8,
+                        background: "none",
+                        border: "none",
+                        fontSize: 18,
+                        cursor: "pointer",
+                        color: "#6b7280",
+                        zIndex: 1
+                      },
+                      children: "x"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                    "img",
+                    {
+                      src: previewUrl,
+                      alt: "Screenshot preview",
+                      style: { maxWidth: "85vw", maxHeight: "85vh", display: "block", borderRadius: 4 }
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        )
       ]
     }
   );
 }
-// src/components/FeedbackDialog.tsx
-var import_react2 = require("react");
-// src/utils/prompt.ts
-function buildPrompt(context, comment) {
-  const propsStr = context.components.filter((c) => Object.keys(c.props).length > 0).map((c) => `  ${c.name}: ${JSON.stringify(c.props)}`).join("\n");
-  const lines = [
-    `Page: ${context.url}`,
-    `Component: ${context.componentPath}`
-  ];
-  if (propsStr) {
-    lines.push(`Props:
-${propsStr}`);
-  }
-  if (context.elementText) {
-    lines.push(`Element text: "${context.elementText}"`);
-  }
-  lines.push("", `User feedback: "${comment}"`, "", "Screenshot attached with red X marking the clicked element.");
-  return lines.join("\n");
-}
-// src/utils/storage.ts
-var STORAGE_KEY = "llm_ui_feedback_items";
-function loadEntries() {
-  try {
-    const raw = localStorage.getItem(STORAGE_KEY);
-    return raw ? JSON.parse(raw) : [];
-  } catch {
-    return [];
-  }
-}
-function saveEntry(entry) {
-  const entries = loadEntries();
-  entries.push(entry);
-  try {
-    localStorage.setItem(STORAGE_KEY, JSON.stringify(entries));
-    return { ok: true };
-  } catch (e) {
-    if (e instanceof DOMException && (e.name === "QuotaExceededError" || e.code === 22)) {
-      const oldestWithScreenshot = entries.findIndex((ent) => ent.screenshot !== null);
-      if (oldestWithScreenshot >= 0) {
-        entries[oldestWithScreenshot] = { ...entries[oldestWithScreenshot], screenshot: null };
-        try {
-          localStorage.setItem(STORAGE_KEY, JSON.stringify(entries));
-          return { ok: true };
-        } catch {
-        }
+// src/components/DraftModal.tsx
+var import_react4 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var WIDGET_CONTAINER_ID2 = "llm-ui-feedback-root";
+function DraftModal({ pendingContext, addingDraft, onAdd, onCancel }) {
+  const [comment, setComment] = (0, import_react4.useState)("");
+  (0, import_react4.useEffect)(() => {
+    const container = document.getElementById(WIDGET_CONTAINER_ID2);
+    const inerted = [];
+    for (const child of Array.from(document.body.children)) {
+      if (child === container || child.id === WIDGET_CONTAINER_ID2) continue;
+      if (!child.hasAttribute("inert")) {
+        child.setAttribute("inert", "");
+        inerted.push(child);
       }
-      return { ok: false, error: "Storage is full. Delete old feedback entries to free space." };
-    }
-    return { ok: false, error: "Failed to save feedback entry." };
-  }
-}
-function deleteEntry(id) {
-  const entries = loadEntries().filter((e) => e.id !== id);
-  localStorage.setItem(STORAGE_KEY, JSON.stringify(entries));
-}
-function clearEntries() {
-  localStorage.removeItem(STORAGE_KEY);
-}
-// src/components/FeedbackDialog.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-async function copyToClipboard(text) {
-  if (navigator.clipboard?.writeText) {
-    try {
-      await navigator.clipboard.writeText(text);
-      return "success";
-    } catch {
     }
-  }
-  try {
-    const textarea = document.createElement("textarea");
-    textarea.value = text;
-    textarea.style.cssText = "position:fixed;left:-9999px;top:-9999px";
-    document.body.appendChild(textarea);
-    textarea.focus();
-    textarea.select();
-    const ok = document.execCommand("copy");
-    document.body.removeChild(textarea);
-    if (ok) return "fallback-success";
-  } catch {
-  }
-  return "failed";
-}
-function FeedbackDialog({ context, screenshot, onClose }) {
-  const [comment, setComment] = (0, import_react2.useState)("");
-  const [saved, setSaved] = (0, import_react2.useState)(false);
-  const [copyStatus, setCopyStatus] = (0, import_react2.useState)("idle");
-  const [saveError, setSaveError] = (0, import_react2.useState)(null);
-  const [showPromptText, setShowPromptText] = (0, import_react2.useState)(false);
-  const handleSubmit = () => {
-    if (!comment.trim()) return;
-    const prompt = buildPrompt(context, comment);
-    const entry = {
-      id: `f_${Date.now()}`,
-      timestamp: (/* @__PURE__ */ new Date()).toISOString(),
-      url: context.url,
-      componentPath: context.componentPath,
-      components: context.components,
-      elementText: context.elementText,
-      comment,
-      screenshot,
-      prompt
+    return () => {
+      for (const el of inerted) {
+        el.removeAttribute("inert");
+      }
     };
-    const result = saveEntry(entry);
-    if (result.ok) {
-      setSaved(true);
-      setSaveError(null);
-    } else {
-      setSaveError(result.error || "Failed to save.");
-    }
-  };
-  const handleCopyPrompt = async () => {
-    const prompt = buildPrompt(context, comment || "(no comment)");
-    const result = await copyToClipboard(prompt);
-    if (result === "failed") {
-      setCopyStatus("failed");
-      setShowPromptText(true);
-    } else {
-      setCopyStatus("copied");
-      setTimeout(() => setCopyStatus("idle"), 2e3);
+  }, []);
+  const handleAdd = () => {
+    if (comment.trim() && !addingDraft) {
+      onAdd(comment.trim());
     }
   };
-  const handleDownloadScreenshot = () => {
-    if (!screenshot) return;
-    const link = document.createElement("a");
-    link.download = `feedback_${Date.now()}.png`;
-    link.href = screenshot;
-    link.click();
-  };
-  const copyButtonLabel = copyStatus === "copied" ? "Copied!" : copyStatus === "failed" ? "Copy failed" : "Copy Prompt";
-  const copyButtonBg = copyStatus === "copied" ? "#dcfce7" : copyStatus === "failed" ? "#fee2e2" : "#f3f4f6";
-  const copyButtonColor = copyStatus === "copied" ? "#16a34a" : copyStatus === "failed" ? "#dc2626" : "#374151";
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  const { context, screenshot } = pendingContext;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "div",
     {
       style: {
@@ -325,9 +708,9 @@ function FeedbackDialog({ context, screenshot, onClose }) {
         fontFamily: "system-ui, sans-serif"
       },
       onClick: (e) => {
-        if (e.target === e.currentTarget) onClose();
+        if (e.target === e.currentTarget && !addingDraft) onCancel();
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
         "div",
         {
           style: {
@@ -336,47 +719,31 @@ function FeedbackDialog({ context, screenshot, onClose }) {
             padding: 24,
             width: 480,
             maxWidth: "90vw",
-            maxHeight: "80vh",
+            maxHeight: "85vh",
             overflow: "auto",
             boxShadow: "0 8px 32px rgba(0,0,0,0.2)"
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { style: { margin: 0, fontSize: 16 }, children: "Leave Feedback" }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                "button",
-                {
-                  onClick: onClose,
-                  style: {
-                    background: "none",
-                    border: "none",
-                    fontSize: 20,
-                    cursor: "pointer",
-                    color: "#666"
-                  },
-                  children: "x"
-                }
-              )
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { fontSize: 12, color: "#666", marginBottom: 12 }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { children: "Page:" }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h3", { style: { margin: "0 0 16px", fontSize: 16 }, children: "New Feedback" }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { fontSize: 12, color: "#6b7280", marginBottom: 12 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("strong", { children: "Component:" }),
                 " ",
-                context.url
+                context.componentPath
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { children: "Component:" }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("strong", { children: "Path:" }),
                 " ",
-                context.componentPath
+                context.urlPath
               ] }),
-              context.elementText && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { children: "Element:" }),
+              context.elementText && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("strong", { children: "Element:" }),
                 ' "',
-                context.elementText.slice(0, 100),
+                context.elementText.slice(0, 80),
                 '"'
               ] })
             ] }),
-            screenshot && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            screenshot && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               "img",
               {
                 src: screenshot,
@@ -385,64 +752,67 @@ function FeedbackDialog({ context, screenshot, onClose }) {
                   width: "100%",
                   borderRadius: 8,
                   border: "1px solid #e5e7eb",
-                  marginBottom: 12
+                  marginBottom: 12,
+                  maxHeight: 180,
+                  objectFit: "cover"
+                }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "textarea",
+              {
+                value: comment,
+                onChange: (e) => setComment(e.target.value),
+                placeholder: "Describe the issue or suggestion...",
+                autoFocus: true,
+                onKeyDown: (e) => {
+                  if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) handleAdd();
+                },
+                style: {
+                  width: "100%",
+                  minHeight: 80,
+                  padding: 10,
+                  borderRadius: 8,
+                  border: "1px solid #d1d5db",
+                  fontSize: 14,
+                  resize: "vertical",
+                  boxSizing: "border-box"
                 }
               }
             ),
-            !saved ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                "textarea",
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", gap: 8, marginTop: 16, justifyContent: "flex-end" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "button",
                 {
-                  value: comment,
-                  onChange: (e) => setComment(e.target.value),
-                  placeholder: "Describe the issue or suggestion...",
-                  autoFocus: true,
+                  onClick: onCancel,
+                  disabled: addingDraft,
                   style: {
-                    width: "100%",
-                    minHeight: 80,
-                    padding: 10,
-                    borderRadius: 8,
+                    padding: "8px 16px",
+                    borderRadius: 6,
                     border: "1px solid #d1d5db",
-                    fontSize: 14,
-                    resize: "vertical",
-                    boxSizing: "border-box"
-                  }
+                    background: "#f3f4f6",
+                    color: "#374151",
+                    fontSize: 13,
+                    cursor: "pointer"
+                  },
+                  children: "Cancel"
                 }
               ),
-              saveError && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { color: "#dc2626", fontSize: 13, marginTop: 8 }, children: saveError }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", gap: 8, marginTop: 12 }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { onClick: handleSubmit, style: btnStyle("#3b82f6", "#fff"), children: "Save" }),
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { onClick: handleCopyPrompt, style: btnStyle(copyButtonBg, copyButtonColor), children: copyButtonLabel }),
-                screenshot && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { onClick: handleDownloadScreenshot, style: btnStyle("#f3f4f6", "#374151"), children: "Download Screenshot" })
-              ] })
-            ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { textAlign: "center", padding: 16, color: "#16a34a" }, children: [
-              "Saved to localStorage.",
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", gap: 8, marginTop: 12, justifyContent: "center" }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { onClick: handleCopyPrompt, style: btnStyle(copyButtonBg, copyButtonColor), children: copyButtonLabel }),
-                screenshot && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { onClick: handleDownloadScreenshot, style: btnStyle("#f3f4f6", "#374151"), children: "Download Screenshot" }),
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { onClick: onClose, style: btnStyle("#3b82f6", "#fff"), children: "Done" })
-              ] })
-            ] }),
-            showPromptText && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginTop: 12 }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { fontSize: 12, color: "#666", marginBottom: 4 }, children: "Could not copy automatically. Select and copy manually:" }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                "textarea",
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "button",
                 {
-                  readOnly: true,
-                  value: buildPrompt(context, comment || "(no comment)"),
+                  onClick: handleAdd,
+                  disabled: !comment.trim() || addingDraft,
                   style: {
-                    width: "100%",
-                    minHeight: 120,
-                    padding: 10,
-                    borderRadius: 8,
-                    border: "1px solid #d1d5db",
-                    fontSize: 12,
-                    fontFamily: "monospace",
-                    resize: "vertical",
-                    boxSizing: "border-box",
-                    background: "#f9fafb"
+                    padding: "8px 16px",
+                    borderRadius: 6,
+                    border: "none",
+                    background: !comment.trim() || addingDraft ? "#93c5fd" : "#3b82f6",
+                    color: "#fff",
+                    fontSize: 13,
+                    cursor: !comment.trim() || addingDraft ? "default" : "pointer"
                   },
-                  onClick: (e) => e.target.select()
+                  children: addingDraft ? "Adding..." : "Add to Drafts"
                 }
               )
             ] })
@@ -452,325 +822,112 @@ function FeedbackDialog({ context, screenshot, onClose }) {
     }
   );
 }
-function btnStyle(bg, color) {
-  return {
-    padding: "8px 16px",
-    borderRadius: 6,
-    border: "1px solid #d1d5db",
-    background: bg,
-    color,
-    fontSize: 13,
-    cursor: "pointer"
-  };
-}
-// src/components/FeedbackListPanel.tsx
-var import_react3 = require("react");
-// src/utils/time.ts
-function relativeTime(iso) {
-  const seconds = Math.floor((Date.now() - new Date(iso).getTime()) / 1e3);
-  if (seconds < 0) return "just now";
-  if (seconds < 60) return "just now";
-  const minutes = Math.floor(seconds / 60);
-  if (minutes < 60) return `${minutes}m ago`;
-  const hours = Math.floor(minutes / 60);
-  if (hours < 24) return `${hours}h ago`;
-  const days = Math.floor(hours / 24);
-  if (days < 30) return `${days}d ago`;
-  return new Date(iso).toLocaleDateString();
-}
-// src/components/EntryCard.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-function EntryCard({ entry, onDelete, onCopyPrompt }) {
-  const truncatedComment = entry.comment.length > 80 ? entry.comment.slice(0, 80) + "..." : entry.comment;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-    "div",
-    {
-      style: {
-        padding: 12,
-        borderBottom: "1px solid #e5e7eb",
-        fontFamily: "system-ui, sans-serif"
-      },
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 6 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { fontSize: 13, color: "#111827", flex: 1, marginRight: 8 }, children: truncatedComment || "(no comment)" }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { fontSize: 11, color: "#9ca3af", whiteSpace: "nowrap", flexShrink: 0 }, children: relativeTime(entry.timestamp) })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontSize: 11, color: "#6b7280", marginBottom: 4 }, children: entry.url }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontSize: 11, color: "#9ca3af", marginBottom: 8 }, children: entry.componentPath }),
-        entry.screenshot && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          "img",
-          {
-            src: entry.screenshot,
-            alt: "Screenshot thumbnail",
-            style: {
-              width: 60,
-              height: 40,
-              objectFit: "cover",
-              borderRadius: 4,
-              border: "1px solid #e5e7eb",
-              marginBottom: 8,
-              display: "block"
-            }
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", gap: 6 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            "button",
-            {
-              onClick: () => onCopyPrompt(entry.prompt),
-              style: {
-                padding: "4px 10px",
-                fontSize: 11,
-                borderRadius: 4,
-                border: "1px solid #d1d5db",
-                background: "#f9fafb",
-                color: "#374151",
-                cursor: "pointer"
-              },
-              children: "Copy Prompt"
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            "button",
-            {
-              onClick: () => onDelete(entry.id),
-              style: {
-                padding: "4px 10px",
-                fontSize: 11,
-                borderRadius: 4,
-                border: "1px solid #fecaca",
-                background: "#fef2f2",
-                color: "#dc2626",
-                cursor: "pointer"
-              },
-              children: "Delete"
-            }
-          )
-        ] })
-      ]
-    }
-  );
-}
-// src/components/FeedbackListPanel.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
-async function copyToClipboard2(text) {
-  if (navigator.clipboard?.writeText) {
-    try {
-      await navigator.clipboard.writeText(text);
-      return true;
-    } catch {
-    }
-  }
-  try {
-    const textarea = document.createElement("textarea");
-    textarea.value = text;
-    textarea.style.cssText = "position:fixed;left:-9999px;top:-9999px";
-    document.body.appendChild(textarea);
-    textarea.focus();
-    textarea.select();
-    const ok = document.execCommand("copy");
-    document.body.removeChild(textarea);
-    return ok;
-  } catch {
-  }
-  return false;
-}
-function FeedbackListPanel({ onClose, position }) {
-  const [entries, setEntries] = (0, import_react3.useState)(() => loadEntries());
-  const [confirmClear, setConfirmClear] = (0, import_react3.useState)(false);
-  const [copiedId, setCopiedId] = (0, import_react3.useState)(null);
-  const isRight = position.includes("right");
-  const refreshEntries = (0, import_react3.useCallback)(() => {
-    setEntries(loadEntries());
-  }, []);
-  const handleDelete = (0, import_react3.useCallback)(
-    (id) => {
-      deleteEntry(id);
-      refreshEntries();
-    },
-    [refreshEntries]
-  );
-  const handleCopyPrompt = (0, import_react3.useCallback)(async (prompt) => {
-    const ok = await copyToClipboard2(prompt);
-    if (ok) {
-    }
-  }, []);
-  const handleClear = (0, import_react3.useCallback)(() => {
-    if (!confirmClear) {
-      setConfirmClear(true);
-      setTimeout(() => setConfirmClear(false), 3e3);
-      return;
+// src/components/SubmitModal.tsx
+var import_react5 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function SubmitModal({ count, onSubmit, onCancel, submitting }) {
+  const [title, setTitle] = (0, import_react5.useState)("");
+  const handleSubmit = () => {
+    if (title.trim() && !submitting) {
+      onSubmit(title.trim());
     }
-    clearEntries();
-    setConfirmClear(false);
-    refreshEntries();
-  }, [confirmClear, refreshEntries]);
-  const sortedEntries = [...entries].reverse();
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "div",
     {
       style: {
         position: "fixed",
-        top: 0,
-        [isRight ? "right" : "left"]: 0,
-        bottom: 0,
-        width: 380,
-        maxWidth: "90vw",
+        inset: 0,
         zIndex: 99999,
-        background: "#fff",
-        boxShadow: isRight ? "-4px 0 24px rgba(0,0,0,0.15)" : "4px 0 24px rgba(0,0,0,0.15)",
         display: "flex",
-        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        background: "rgba(0,0,0,0.4)",
         fontFamily: "system-ui, sans-serif"
       },
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-          "div",
-          {
-            style: {
-              padding: 16,
-              borderBottom: "1px solid #e5e7eb",
-              display: "flex",
-              justifyContent: "space-between",
-              alignItems: "center",
-              flexShrink: 0
-            },
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("h3", { style: { margin: 0, fontSize: 15, color: "#111827" }, children: [
-                "Feedback (",
-                entries.length,
-                ")"
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      onClick: (e) => {
+        if (e.target === e.currentTarget && !submitting) onCancel();
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+        "div",
+        {
+          style: {
+            background: "#fff",
+            borderRadius: 12,
+            padding: 24,
+            width: 400,
+            maxWidth: "90vw",
+            boxShadow: "0 8px 32px rgba(0,0,0,0.2)"
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h3", { style: { margin: "0 0 16px", fontSize: 16 }, children: "Submit Feedback" }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("p", { style: { margin: "0 0 12px", fontSize: 14, color: "#6b7280" }, children: [
+              count,
+              " item",
+              count !== 1 ? "s" : "",
+              " selected. Name this feedback session:"
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              "input",
+              {
+                type: "text",
+                value: title,
+                onChange: (e) => setTitle(e.target.value),
+                placeholder: "e.g. Homepage redesign feedback",
+                autoFocus: true,
+                onKeyDown: (e) => {
+                  if (e.key === "Enter") handleSubmit();
+                },
+                style: {
+                  width: "100%",
+                  padding: 10,
+                  borderRadius: 8,
+                  border: "1px solid #d1d5db",
+                  fontSize: 14,
+                  boxSizing: "border-box"
+                }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", gap: 8, marginTop: 16, justifyContent: "flex-end" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                 "button",
                 {
-                  onClick: onClose,
+                  onClick: onCancel,
+                  disabled: submitting,
                   style: {
-                    background: "none",
+                    padding: "8px 16px",
+                    borderRadius: 6,
+                    border: "1px solid #d1d5db",
+                    background: "#f3f4f6",
+                    color: "#374151",
+                    fontSize: 13,
+                    cursor: "pointer"
+                  },
+                  children: "Cancel"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                "button",
+                {
+                  onClick: handleSubmit,
+                  disabled: !title.trim() || submitting,
+                  style: {
+                    padding: "8px 16px",
+                    borderRadius: 6,
                     border: "none",
-                    fontSize: 20,
-                    cursor: "pointer",
-                    color: "#666",
-                    padding: "0 4px"
+                    background: !title.trim() || submitting ? "#93c5fd" : "#3b82f6",
+                    color: "#fff",
+                    fontSize: 13,
+                    cursor: !title.trim() || submitting ? "default" : "pointer"
                   },
-                  children: "\xD7"
+                  children: submitting ? "Submitting..." : "Submit"
                 }
               )
-            ]
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { flex: 1, overflowY: "auto", padding: 0 }, children: sortedEntries.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          "div",
-          {
-            style: {
-              textAlign: "center",
-              padding: 32,
-              color: "#9ca3af",
-              fontSize: 13
-            },
-            children: "No feedback entries yet"
-          }
-        ) : sortedEntries.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          EntryCard,
-          {
-            entry,
-            onDelete: handleDelete,
-            onCopyPrompt: handleCopyPrompt
-          },
-          entry.id
-        )) }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          "div",
-          {
-            style: {
-              padding: "12px 16px",
-              borderTop: "1px solid #e5e7eb",
-              flexShrink: 0
-            },
-            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-              "button",
-              {
-                onClick: handleClear,
-                disabled: entries.length === 0,
-                style: {
-                  width: "100%",
-                  padding: "8px 16px",
-                  borderRadius: 6,
-                  border: "1px solid #d1d5db",
-                  background: confirmClear ? "#fef2f2" : "#f9fafb",
-                  color: confirmClear ? "#dc2626" : entries.length === 0 ? "#9ca3af" : "#374151",
-                  fontSize: 13,
-                  cursor: entries.length === 0 ? "default" : "pointer"
-                },
-                children: confirmClear ? "Are you sure? Clear" : "Clear All"
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
-}
-// src/components/ListButton.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
-function ListButton({ onClick, count, position, buttonColor }) {
-  if (count === 0) return null;
-  const isBottom = position.includes("bottom");
-  const isRight = position.includes("right");
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-    "button",
-    {
-      onClick,
-      "aria-label": `View ${count} feedback entries`,
-      style: {
-        position: "fixed",
-        [isBottom ? "bottom" : "top"]: 80,
-        [isRight ? "right" : "left"]: 24,
-        zIndex: 99999,
-        width: 36,
-        height: 36,
-        borderRadius: "50%",
-        border: "1px solid #d1d5db",
-        background: "#f3f4f6",
-        color: "#374151",
-        fontSize: 16,
-        cursor: "pointer",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        boxShadow: "0 2px 6px rgba(0,0,0,0.15)",
-        padding: 0
-      },
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { lineHeight: 1 }, children: "\u2630" }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-          "span",
-          {
-            style: {
-              position: "absolute",
-              top: -4,
-              [isRight ? "right" : "left"]: -4,
-              background: buttonColor,
-              color: getContrastColor(buttonColor),
-              fontSize: 10,
-              fontWeight: 600,
-              borderRadius: "50%",
-              width: 18,
-              height: 18,
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              lineHeight: 1
-            },
-            children: count > 99 ? "99+" : count
-          }
-        )
-      ]
+            ] })
+          ]
+        }
+      )
     }
   );
 }
@@ -820,31 +977,247 @@ function getComponentPath(el, maxDepth = 8) {
 // src/utils/screenshot.ts
 var import_html2canvas_pro = __toESM(require("html2canvas-pro"));
-async function captureScreenshot(clickX, clickY) {
-  const docX = clickX + window.scrollX;
-  const docY = clickY + window.scrollY;
-  const canvas = await (0, import_html2canvas_pro.default)(document.body, {
+async function captureScreenshot(rect) {
+  const fullCanvas = await (0, import_html2canvas_pro.default)(document.body, {
     logging: false,
     useCORS: true
   });
-  const ctx = canvas.getContext("2d");
+  const docX = rect.x + window.scrollX;
+  const docY = rect.y + window.scrollY;
+  const scaleX = fullCanvas.width / document.documentElement.scrollWidth;
+  const scaleY = fullCanvas.height / document.documentElement.scrollHeight;
+  const sx = Math.round(docX * scaleX);
+  const sy = Math.round(docY * scaleY);
+  const sw = Math.round(rect.width * scaleX);
+  const sh = Math.round(rect.height * scaleY);
+  const cropped = document.createElement("canvas");
+  cropped.width = sw;
+  cropped.height = sh;
+  const ctx = cropped.getContext("2d");
   if (ctx) {
-    ctx.strokeStyle = "red";
+    ctx.drawImage(fullCanvas, sx, sy, sw, sh, 0, 0, sw, sh);
+    ctx.strokeStyle = "#3b82f6";
     ctx.lineWidth = 3;
-    const size = 14;
-    ctx.beginPath();
-    ctx.moveTo(docX - size, docY - size);
-    ctx.lineTo(docX + size, docY + size);
-    ctx.moveTo(docX + size, docY - size);
-    ctx.lineTo(docX - size, docY + size);
-    ctx.stroke();
-    ctx.beginPath();
-    ctx.arc(docX, docY, size + 4, 0, Math.PI * 2);
-    ctx.stroke();
+    ctx.strokeRect(1, 1, sw - 2, sh - 2);
+  }
+  return cropped.toDataURL("image/png");
+}
+// src/utils/prompt.ts
+function buildPrompt(context, comment) {
+  const propsStr = context.components.filter((c) => Object.keys(c.props).length > 0).map((c) => `  ${c.name}: ${JSON.stringify(c.props)}`).join("\n");
+  const lines = [
+    `Page: ${context.url}`,
+    `Path: ${context.urlPath}`,
+    `Reported at: ${context.reportedAt}`,
+    `Component: ${context.componentPath}`
+  ];
+  if (propsStr) {
+    lines.push(`Props:
+${propsStr}`);
+  }
+  if (context.elementText) {
+    lines.push(`Element text: "${context.elementText}"`);
+  }
+  lines.push("", `User feedback: "${comment}"`, "", "Screenshot attached showing the selected region.");
+  return lines.join("\n");
+}
+// src/utils/blob.ts
+function dataUrlToBlob(dataUrl) {
+  const [header, base64] = dataUrl.split(",");
+  const mime = header.match(/:(.*?);/)?.[1] || "image/png";
+  const binary = atob(base64);
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i++) {
+    bytes[i] = binary.charCodeAt(i);
+  }
+  return new Blob([bytes], { type: mime });
+}
+// src/hooks/useSession.ts
+var import_react6 = require("react");
+var import_meta = {};
+var SESSION_TOKEN_KEY = "llm_feedback_session_token";
+var USER_KEY = "llm_feedback_user";
+var AUTH_BYPASS = typeof globalThis !== "undefined" && globalThis.__FEEDBACK_AUTH_BYPASS__ || typeof import_meta !== "undefined" && import_meta.env?.VITE_AUTH_BYPASS === "true";
+function getSessionToken() {
+  if (AUTH_BYPASS) return "bypass-token";
+  return localStorage.getItem(SESSION_TOKEN_KEY);
+}
+var BYPASS_USER = {
+  email: "bypass@test.local",
+  name: "Bypass User",
+  picture: "",
+  sub: "bypass-user"
+};
+function useSession(apiUrl, clientId) {
+  const [status, setStatus] = (0, import_react6.useState)(AUTH_BYPASS ? "authenticated" : "loading");
+  const [user, setUser] = (0, import_react6.useState)(AUTH_BYPASS ? BYPASS_USER : null);
+  const pendingAuthRef = (0, import_react6.useRef)(false);
+  (0, import_react6.useEffect)(() => {
+    if (AUTH_BYPASS) return;
+    let cancelled = false;
+    async function checkSession() {
+      const token = localStorage.getItem(SESSION_TOKEN_KEY);
+      const savedUser = localStorage.getItem(USER_KEY);
+      if (!token || !savedUser) {
+        if (!cancelled) setStatus("unauthenticated");
+        return;
+      }
+      try {
+        const res = await fetch(`${apiUrl}/auth/status`, {
+          headers: { "X-Session-Token": token }
+        });
+        const data = await res.json();
+        if (!cancelled) {
+          if (data.authenticated) {
+            setUser(data.user);
+            setStatus("authenticated");
+          } else {
+            localStorage.removeItem(SESSION_TOKEN_KEY);
+            localStorage.removeItem(USER_KEY);
+            setStatus("unauthenticated");
+          }
+        }
+      } catch {
+        if (!cancelled) {
+          try {
+            setUser(JSON.parse(savedUser));
+            setStatus("authenticated");
+          } catch {
+            setStatus("unauthenticated");
+          }
+        }
+      }
+    }
+    checkSession();
+    return () => {
+      cancelled = true;
+    };
+  }, [apiUrl]);
+  (0, import_react6.useEffect)(() => {
+    function handleMessage(event) {
+      if (event.data?.type !== "feedback-auth") return;
+      const { sessionToken, user: userData } = event.data;
+      if (sessionToken && userData) {
+        localStorage.setItem(SESSION_TOKEN_KEY, sessionToken);
+        localStorage.setItem(USER_KEY, JSON.stringify(userData));
+        setUser(userData);
+        setStatus("authenticated");
+        pendingAuthRef.current = false;
+      }
+    }
+    window.addEventListener("message", handleMessage);
+    return () => window.removeEventListener("message", handleMessage);
+  }, []);
+  const signIn = (0, import_react6.useCallback)(() => {
+    if (pendingAuthRef.current) return;
+    pendingAuthRef.current = true;
+    const loginUrl = `${apiUrl}/auth/login?clientId=${encodeURIComponent(clientId)}&origin=${encodeURIComponent(window.location.origin)}`;
+    const popup = window.open(loginUrl, "feedback-auth", "width=500,height=600,menubar=no,toolbar=no");
+    if (!popup) {
+      pendingAuthRef.current = false;
+      return;
+    }
+    const interval = setInterval(() => {
+      if (popup.closed) {
+        clearInterval(interval);
+        pendingAuthRef.current = false;
+      }
+    }, 500);
+  }, [apiUrl, clientId]);
+  const signOut = (0, import_react6.useCallback)(async () => {
+    const token = localStorage.getItem(SESSION_TOKEN_KEY);
+    localStorage.removeItem(SESSION_TOKEN_KEY);
+    localStorage.removeItem(USER_KEY);
+    setUser(null);
+    setStatus("unauthenticated");
+    if (token) {
+      try {
+        await fetch(`${apiUrl}/auth/logout`, {
+          method: "POST",
+          headers: { "X-Session-Token": token }
+        });
+      } catch {
+      }
+    }
+  }, [apiUrl]);
+  return { status, user, signIn, signOut };
+}
+// src/api/client.ts
+function createApiClient(apiUrl, clientId) {
+  async function apiFetch(path, options = {}) {
+    const token = getSessionToken();
+    const res = await fetch(`${apiUrl}${path}`, {
+      ...options,
+      headers: {
+        "Content-Type": "application/json",
+        ...token ? { "X-Session-Token": token } : {},
+        "X-Client-Id": clientId,
+        ...options.headers
+      }
+    });
+    if (!res.ok) {
+      const body = await res.json().catch(() => ({}));
+      throw new Error(
+        body.error || `API error ${res.status}`
+      );
+    }
+    if (res.status === 204) return void 0;
+    return res.json();
   }
-  return canvas.toDataURL("image/png");
+  return {
+    async fetchDrafts() {
+      const data = await apiFetch("/drafts");
+      return data.items;
+    },
+    async createDraft(draft) {
+      return apiFetch("/drafts", {
+        method: "POST",
+        body: JSON.stringify(draft)
+      });
+    },
+    async updateDraft(id, data) {
+      return apiFetch(`/drafts/${id}`, {
+        method: "PATCH",
+        body: JSON.stringify(data)
+      });
+    },
+    async deleteDraft(id) {
+      await apiFetch(`/drafts/${id}`, { method: "DELETE" });
+    },
+    async submitSession(data) {
+      return apiFetch("/feedback-groups/submit", {
+        method: "POST",
+        body: JSON.stringify(data)
+      });
+    },
+    async getUploadUrl(entryId, timestamp) {
+      return apiFetch("/upload-url", {
+        method: "POST",
+        body: JSON.stringify({ entryId, timestamp })
+      });
+    },
+    async getScreenshotUrl(draftId) {
+      const data = await apiFetch(`/drafts/${draftId}/screenshot-url`);
+      return data.url;
+    },
+    async uploadScreenshot(uploadUrl, blob) {
+      const res = await fetch(uploadUrl, {
+        method: "PUT",
+        body: blob,
+        headers: { "Content-Type": "image/png" }
+      });
+      if (!res.ok) throw new Error(`S3 upload failed: ${res.status}`);
+    }
+  };
 }
+// src/config.ts
+var DEFAULT_API_URL = "https://your-lambda-function-url.lambda-url.us-east-1.on.aws";
 // src/components/FeedbackWidget.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var CONTAINER_ID = "llm-ui-feedback-root";
@@ -857,17 +1230,69 @@ function getOrCreateContainer() {
   }
   return el;
 }
+var initialState = {
+  panelOpen: false,
+  picking: false,
+  pendingContext: null,
+  drafts: [],
+  selectedDraftIds: /* @__PURE__ */ new Set(),
+  submitModalOpen: false,
+  addingDraft: false,
+  submitting: false
+};
 function widgetReducer(state, action) {
   switch (action.type) {
+    case "TOGGLE_PANEL":
+      return state.panelOpen ? { ...state, panelOpen: false, picking: false, pendingContext: null } : { ...state, panelOpen: true };
+    case "OPEN_PANEL":
+      return { ...state, panelOpen: true };
+    case "CLOSE_PANEL":
+      return { ...state, panelOpen: false, picking: false, pendingContext: null };
     case "START_PICKING":
-      return state.mode === "idle" ? { mode: "picking" } : state;
-    case "CANCEL":
-    case "CLOSE":
-      return { mode: "idle" };
+      return { ...state, picking: true };
+    case "CANCEL_PICKING":
+      return { ...state, picking: false };
+    case "CANCEL_DRAFT_MODAL":
+      return { ...state, pendingContext: null, addingDraft: false };
     case "ELEMENT_PICKED":
-      return { mode: "dialog", context: action.context, screenshot: action.screenshot };
-    case "OPEN_LIST":
-      return state.mode === "idle" ? { mode: "list" } : state;
+      return { ...state, picking: false, pendingContext: { context: action.context, screenshot: action.screenshot } };
+    case "SET_ADDING_DRAFT":
+      return { ...state, addingDraft: action.adding };
+    case "DRAFT_ADDED":
+      return { ...state, pendingContext: null, addingDraft: false, drafts: [action.draft, ...state.drafts] };
+    case "SET_DRAFTS":
+      return { ...state, drafts: action.drafts };
+    case "DRAFT_UPDATED":
+      return { ...state, drafts: state.drafts.map((d) => d.id === action.id ? { ...d, comment: action.comment } : d) };
+    case "DRAFT_DELETED": {
+      const next = new Set(state.selectedDraftIds);
+      next.delete(action.id);
+      return { ...state, drafts: state.drafts.filter((d) => d.id !== action.id), selectedDraftIds: next };
+    }
+    case "TOGGLE_SELECT": {
+      const next = new Set(state.selectedDraftIds);
+      if (next.has(action.id)) next.delete(action.id);
+      else next.add(action.id);
+      return { ...state, selectedDraftIds: next };
+    }
+    case "SELECT_ALL":
+      return { ...state, selectedDraftIds: action.selected ? new Set(state.drafts.map((d) => d.id)) : /* @__PURE__ */ new Set() };
+    case "OPEN_SUBMIT_MODAL":
+      return { ...state, submitModalOpen: true };
+    case "CLOSE_SUBMIT_MODAL":
+      return { ...state, submitModalOpen: false };
+    case "SET_SUBMITTING":
+      return { ...state, submitting: action.submitting };
+    case "SUBMIT_COMPLETE": {
+      const submitted = new Set(action.submittedIds);
+      return {
+        ...state,
+        submitting: false,
+        submitModalOpen: false,
+        drafts: state.drafts.filter((d) => !submitted.has(d.id)),
+        selectedDraftIds: /* @__PURE__ */ new Set()
+      };
+    }
     default:
       return state;
   }
@@ -891,102 +1316,221 @@ function isEditableTarget(el) {
   return false;
 }
 function FeedbackWidget({
+  clientId,
+  apiUrl = DEFAULT_API_URL,
   position = "bottom-right",
   buttonColor = "#3b82f6",
   hotkey
-} = {}) {
-  const [state, dispatch] = (0, import_react4.useReducer)(widgetReducer, { mode: "idle" });
-  const [entryCount, setEntryCount] = (0, import_react4.useState)(0);
-  (0, import_react4.useEffect)(() => {
-    if (state.mode === "idle") {
-      setEntryCount(loadEntries().length);
+}) {
+  const session = useSession(apiUrl, clientId);
+  const [state, dispatch] = (0, import_react7.useReducer)(widgetReducer, initialState);
+  const pendingOpenRef = (0, import_react7.useRef)(false);
+  const api = (0, import_react7.useMemo)(
+    () => createApiClient(apiUrl, clientId),
+    [apiUrl, clientId]
+  );
+  (0, import_react7.useEffect)(() => {
+    if (session.status === "authenticated" && pendingOpenRef.current) {
+      pendingOpenRef.current = false;
+      dispatch({ type: "OPEN_PANEL" });
     }
-  }, [state.mode]);
-  (0, import_react4.useEffect)(() => {
-    setEntryCount(loadEntries().length);
-  }, []);
-  (0, import_react4.useEffect)(() => {
+  }, [session.status]);
+  (0, import_react7.useEffect)(() => {
+    if (session.status === "authenticated") {
+      api.fetchDrafts().then((drafts) => {
+        dispatch({ type: "SET_DRAFTS", drafts });
+      }).catch(() => {
+      });
+    }
+  }, [state.panelOpen, session.status, api]);
+  (0, import_react7.useEffect)(() => {
     if (!hotkey) return;
     const parsed = parseHotkey(hotkey);
     function handler(e) {
       if (isEditableTarget(document.activeElement)) return;
       if (e.key.toLowerCase() === parsed.key && e.ctrlKey === parsed.ctrl && e.altKey === parsed.alt && e.shiftKey === parsed.shift && e.metaKey === parsed.meta) {
         e.preventDefault();
-        dispatch(
-          state.mode === "picking" ? { type: "CANCEL" } : state.mode === "idle" ? { type: "START_PICKING" } : { type: "CLOSE" }
-        );
+        dispatch({ type: "TOGGLE_PANEL" });
       }
     }
     window.addEventListener("keydown", handler);
     return () => window.removeEventListener("keydown", handler);
-  }, [hotkey, state.mode]);
-  const handleToggle = (0, import_react4.useCallback)(() => {
+  }, [hotkey]);
+  const handlePickClick = (0, import_react7.useCallback)(() => {
+    if (session.status === "unauthenticated") {
+      pendingOpenRef.current = true;
+      session.signIn();
+      return;
+    }
     dispatch({ type: "START_PICKING" });
-  }, []);
-  const handlePick = (0, import_react4.useCallback)(async (element, x, y) => {
-    const components = getComponentPath(element);
-    const componentPath = components.map((c) => c.name).join(" > ") || "(no React component found)";
-    const rawText = (element.innerText || element.textContent || "").trim();
-    const elementText = rawText.length > 100 ? rawText.slice(0, 100) + "..." : rawText;
+  }, [session]);
+  const handlePanelToggle = (0, import_react7.useCallback)(() => {
+    if (session.status === "unauthenticated") {
+      pendingOpenRef.current = true;
+      session.signIn();
+      return;
+    }
+    dispatch({ type: "TOGGLE_PANEL" });
+  }, [session]);
+  const handlePick = (0, import_react7.useCallback)(async (rect, elements) => {
+    const seenNames = /* @__PURE__ */ new Set();
+    const allComponents = [];
+    for (const el of elements) {
+      for (const comp of getComponentPath(el)) {
+        if (!seenNames.has(comp.name)) {
+          seenNames.add(comp.name);
+          allComponents.push(comp);
+        }
+      }
+    }
+    const componentPath = allComponents.map((c) => c.name).join(", ") || "(no React component found)";
+    const textParts = /* @__PURE__ */ new Set();
+    for (const el of elements) {
+      const raw = (el.innerText || el.textContent || "").trim();
+      if (raw) textParts.add(raw);
+    }
+    const combined = Array.from(textParts).join(" ").trim();
+    const elementText = combined.length > 200 ? combined.slice(0, 200) + "..." : combined;
+    const centerX = rect.x + rect.width / 2;
+    const centerY = rect.y + rect.height / 2;
     const context = {
       url: window.location.href,
+      urlPath: window.location.pathname,
+      reportedAt: (/* @__PURE__ */ new Date()).toISOString(),
       componentPath,
-      components,
+      components: allComponents,
       elementText,
-      clickX: x,
-      clickY: y
+      clickX: centerX,
+      clickY: centerY
     };
+    const isDrag = rect.width > 20 && rect.height > 20;
     let screenshot = null;
-    try {
-      screenshot = await captureScreenshot(x, y);
-    } catch {
+    if (isDrag) {
+      try {
+        screenshot = await captureScreenshot(rect);
+      } catch {
+      }
     }
     dispatch({ type: "ELEMENT_PICKED", context, screenshot });
   }, []);
-  const handleCancel = (0, import_react4.useCallback)(() => {
-    dispatch({ type: "CANCEL" });
-  }, []);
-  const handleClose = (0, import_react4.useCallback)(() => {
-    dispatch({ type: "CLOSE" });
-  }, []);
-  const handleOpenList = (0, import_react4.useCallback)(() => {
-    dispatch({ type: "OPEN_LIST" });
-  }, []);
-  const handleCloseList = (0, import_react4.useCallback)(() => {
-    dispatch({ type: "CLOSE" });
+  const handleCancelPicking = (0, import_react7.useCallback)(() => {
+    dispatch({ type: "CANCEL_PICKING" });
   }, []);
+  const handleAddDraft = (0, import_react7.useCallback)(async (comment) => {
+    if (!state.pendingContext) return;
+    dispatch({ type: "SET_ADDING_DRAFT", adding: true });
+    const { context, screenshot } = state.pendingContext;
+    const entryId = `f_${Date.now()}`;
+    const timestamp = (/* @__PURE__ */ new Date()).toISOString();
+    let screenshotKey;
+    if (screenshot) {
+      const blob = dataUrlToBlob(screenshot);
+      try {
+        const { uploadUrl, key } = await api.getUploadUrl(entryId, timestamp);
+        await api.uploadScreenshot(uploadUrl, blob);
+        screenshotKey = key;
+      } catch {
+      }
+    }
+    try {
+      const draft = await api.createDraft({
+        id: entryId,
+        url: context.url,
+        componentPath: context.componentPath,
+        components: context.components,
+        elementText: context.elementText,
+        comment,
+        prompt: buildPrompt(context, comment),
+        ...screenshotKey ? { screenshotKey } : {}
+      });
+      dispatch({ type: "DRAFT_ADDED", draft });
+    } catch {
+      dispatch({ type: "SET_ADDING_DRAFT", adding: false });
+    }
+  }, [state.pendingContext, api]);
+  const handleUpdateDraft = (0, import_react7.useCallback)(async (id, comment) => {
+    dispatch({ type: "DRAFT_UPDATED", id, comment });
+    try {
+      await api.updateDraft(id, { comment });
+    } catch {
+      api.fetchDrafts().then((drafts) => dispatch({ type: "SET_DRAFTS", drafts })).catch(() => {
+      });
+    }
+  }, [api]);
+  const handleDeleteDraft = (0, import_react7.useCallback)(async (id) => {
+    dispatch({ type: "DRAFT_DELETED", id });
+    try {
+      await api.deleteDraft(id);
+    } catch {
+      api.fetchDrafts().then((drafts) => dispatch({ type: "SET_DRAFTS", drafts })).catch(() => {
+      });
+    }
+  }, [api]);
+  const handleSubmit = (0, import_react7.useCallback)(async (title) => {
+    dispatch({ type: "SET_SUBMITTING", submitting: true });
+    const draftIds = Array.from(state.selectedDraftIds);
+    try {
+      await api.submitSession({ title, draftIds });
+      dispatch({ type: "SUBMIT_COMPLETE", submittedIds: draftIds });
+    } catch {
+      dispatch({ type: "SET_SUBMITTING", submitting: false });
+    }
+  }, [state.selectedDraftIds, api]);
+  if (session.status === "loading") return null;
   return (0, import_react_dom.createPortal)(
     /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-      state.mode === "idle" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-        ListButton,
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        FloatingButton,
         {
-          onClick: handleOpenList,
-          count: entryCount,
+          onPickClick: handlePickClick,
+          onPanelToggle: handlePanelToggle,
+          draftCount: state.drafts.length,
+          panelOpen: state.panelOpen,
           position,
           buttonColor
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-        FloatingButton,
+      state.picking && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PickOverlay, { onPick: handlePick, onCancel: handleCancelPicking }),
+      state.panelOpen && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        SidePanel,
         {
-          onClick: state.mode === "picking" ? handleCancel : handleToggle,
-          active: state.mode === "picking",
           position,
-          buttonColor
+          drafts: state.drafts,
+          selectedDraftIds: state.selectedDraftIds,
+          onToggleSelect: (id) => dispatch({ type: "TOGGLE_SELECT", id }),
+          onSelectAll: (selected) => dispatch({ type: "SELECT_ALL", selected }),
+          onUpdateDraft: handleUpdateDraft,
+          onDeleteDraft: handleDeleteDraft,
+          onSubmit: () => dispatch({ type: "OPEN_SUBMIT_MODAL" }),
+          onClose: () => dispatch({ type: "CLOSE_PANEL" }),
+          api,
+          user: session.user
+        }
+      ),
+      state.pendingContext && !state.picking && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        DraftModal,
+        {
+          pendingContext: state.pendingContext,
+          addingDraft: state.addingDraft,
+          onAdd: handleAddDraft,
+          onCancel: () => dispatch({ type: "CANCEL_DRAFT_MODAL" })
         }
       ),
-      state.mode === "picking" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PickOverlay, { onPick: handlePick, onCancel: handleCancel }),
-      state.mode === "dialog" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FeedbackDialog, { context: state.context, screenshot: state.screenshot, onClose: handleClose }),
-      state.mode === "list" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FeedbackListPanel, { onClose: handleCloseList, position })
+      state.submitModalOpen && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        SubmitModal,
+        {
+          count: state.selectedDraftIds.size,
+          onSubmit: handleSubmit,
+          onCancel: () => dispatch({ type: "CLOSE_SUBMIT_MODAL" }),
+          submitting: state.submitting
+        }
+      )
     ] }),
     getOrCreateContainer()
   );
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  FeedbackWidget,
-  clearEntries,
-  deleteEntry,
-  loadEntries
+  FeedbackWidget
 });
 //# sourceMappingURL=index.js.map