@react-spot/plugin-comments 0.0.1

package/dist/index.js

@@ -0,0 +1,716 @@
+import { useDeactivateInspector, useProjectRoot, useWidgetPortalContainer } from "@react-spot/core";
+import { Button, ChatBubbleIcon, ClipboardIcon, DropdownMenu, IconButton, OpencodeIcon, PanelHeader, Popover, Select, Separator, Textarea, ToolbarButton, Tooltip, TrashIcon, XIcon } from "@react-spot/ui-components";
+import { useEffect, useRef, useState } from "react";
+import { atom, useAtomValue, useSetAtom } from "jotai";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createOpencodeClient } from "@opencode-ai/sdk";
+
+//#region src/store.ts
+const commentEntriesAtom = atom([]);
+const pendingCommentAtom = atom(null);
+const commentsSnapshotAtom = atom((get) => ({
+	comments: get(commentEntriesAtom),
+	pending: get(pendingCommentAtom)
+}));
+const addCommentAtom = atom(null, (get, set, entry) => {
+	const id = crypto.randomUUID();
+	const comment = {
+		...entry,
+		id,
+		createdAt: Date.now()
+	};
+	set(commentEntriesAtom, [...get(commentEntriesAtom), comment]);
+	return id;
+});
+const updateCommentAtom = atom(null, (get, set, payload) => {
+	set(commentEntriesAtom, get(commentEntriesAtom).map((comment) => comment.id === payload.id ? {
+		...comment,
+		comment: payload.text
+	} : comment));
+});
+const removeCommentAtom = atom(null, (get, set, id) => {
+	set(commentEntriesAtom, get(commentEntriesAtom).filter((comment) => comment.id !== id));
+});
+const clearAllCommentsAtom = atom(null, (_get, set) => {
+	set(commentEntriesAtom, []);
+});
+function useCommentsSnapshot() {
+	return useAtomValue(commentsSnapshotAtom);
+}
+function useCommentEntries() {
+	return useCommentsSnapshot().comments;
+}
+function usePendingComment() {
+	return useCommentsSnapshot().pending;
+}
+function useCommentsActions() {
+	return {
+		addComment: useSetAtom(addCommentAtom),
+		updateComment: useSetAtom(updateCommentAtom),
+		removeComment: useSetAtom(removeCommentAtom),
+		clearAllComments: useSetAtom(clearAllCommentsAtom),
+		setPending: useSetAtom(pendingCommentAtom)
+	};
+}
+
+//#endregion
+//#region src/CommentEditor.tsx
+function CommentEditorOverlay() {
+	const portalContainer = useWidgetPortalContainer();
+	const pending = usePendingComment();
+	const { addComment, setPending } = useCommentsActions();
+	const [text, setText] = useState("");
+	const textareaRef = useRef(null);
+	useEffect(() => {
+		if (pending) {
+			setText("");
+			requestAnimationFrame(() => {
+				textareaRef.current?.focus();
+			});
+		}
+	}, [pending]);
+	const handleCancel = () => {
+		setPending(null);
+	};
+	const handleSubmit = () => {
+		if (!pending || !text.trim()) return;
+		addComment({
+			filePath: pending.filePath,
+			lineNumber: pending.lineNumber,
+			comment: text.trim()
+		});
+		setPending(null);
+	};
+	const handleKeyDown = (e) => {
+		if (e.key === "Escape") {
+			e.preventDefault();
+			handleCancel();
+		} else if (e.key === "Enter" && !e.shiftKey) {
+			e.preventDefault();
+			handleSubmit();
+		}
+	};
+	if (!pending) return null;
+	return /* @__PURE__ */ jsx(Popover.Root, {
+		open: true,
+		onOpenChange: (open) => {
+			if (!open) setPending(null);
+		},
+		children: /* @__PURE__ */ jsx(Popover.Portal, {
+			container: portalContainer,
+			children: /* @__PURE__ */ jsx(Popover.Positioner, {
+				anchor: pending.anchorEl,
+				side: "bottom",
+				align: "start",
+				sideOffset: 8,
+				collisionPadding: 8,
+				positionMethod: "fixed",
+				style: {
+					zIndex: 9999999,
+					pointerEvents: "auto"
+				},
+				children: /* @__PURE__ */ jsxs(Popover.Popup, {
+					initialFocus: false,
+					style: {
+						width: 480,
+						border: "1px solid #3b82f6",
+						padding: 8,
+						fontFamily: "system-ui, sans-serif",
+						boxSizing: "border-box"
+					},
+					onClick: (e) => e.stopPropagation(),
+					onKeyDown: (e) => e.stopPropagation(),
+					children: [
+						/* @__PURE__ */ jsx(Textarea, {
+							ref: textareaRef,
+							value: text,
+							onChange: (e) => setText(e.target.value),
+							onKeyDown: handleKeyDown,
+							placeholder: "Add comment",
+							rows: 3
+						}),
+						/* @__PURE__ */ jsx(Separator, { style: { margin: "4px 0" } }),
+						/* @__PURE__ */ jsxs("div", {
+							style: {
+								display: "flex",
+								alignItems: "center",
+								justifyContent: "space-between",
+								paddingTop: 4
+							},
+							children: [/* @__PURE__ */ jsxs("span", {
+								style: {
+									fontSize: 11,
+									color: "#71717a",
+									fontFamily: "ui-monospace, monospace"
+								},
+								children: ["Commenting on line ", pending.lineNumber]
+							}), /* @__PURE__ */ jsxs("div", {
+								style: {
+									display: "flex",
+									gap: 6
+								},
+								children: [/* @__PURE__ */ jsx(Button, {
+									variant: "secondary",
+									onClick: handleCancel,
+									children: "Cancel"
+								}), /* @__PURE__ */ jsx(Button, {
+									variant: "primary",
+									onClick: handleSubmit,
+									disabled: !text.trim(),
+									children: "Comment"
+								})]
+							})]
+						})
+					]
+				})
+			})
+		})
+	});
+}
+
+//#endregion
+//#region src/utils.ts
+/**
+* Formats a comment as a compact `file:line: comment` string.
+* Used for both copy-to-clipboard and the synthetic text part sent to OpenCode.
+*/
+function formatCommentNote(filePath, lineNumber, comment) {
+	return `${filePath}:${lineNumber}: ${comment}`;
+}
+
+//#endregion
+//#region src/SendToOpencode.tsx
+function SendToOpencodeForm({ root, comments, onClearComments, onDone }) {
+	const portalContainer = useWidgetPortalContainer();
+	const [sessions, setSessions] = useState([]);
+	const [selectedId, setSelectedId] = useState("__new__");
+	const [generalComment, setGeneralComment] = useState("");
+	const [status, setStatus] = useState("loading-sessions");
+	const [errorMsg, setErrorMsg] = useState("");
+	const textareaRef = useRef(null);
+	const [client] = useState(() => createOpencodeClient({
+		baseUrl: "http://localhost:4096",
+		...root ? { directory: root } : {}
+	}));
+	useEffect(() => {
+		client.session.list().then((res) => {
+			const list = (res.data ?? []).filter((s) => !s.parentID).toSorted((a, b) => (b.time?.updated ?? 0) - (a.time?.updated ?? 0));
+			setSessions(list);
+			setStatus("ready");
+			if (list.length > 0) setSelectedId(list[0].id);
+			requestAnimationFrame(() => textareaRef.current?.focus());
+		}).catch(() => {
+			setStatus("error");
+			setErrorMsg("Could not connect to OpenCode. Is it running?");
+		});
+	}, [client]);
+	const handleSend = async () => {
+		if (!comments.length) return;
+		setStatus("sending");
+		setErrorMsg("");
+		try {
+			const previews = await Promise.all(comments.map(async (c) => {
+				try {
+					return ((await client.file.read({ query: { path: c.filePath } })).data?.content ?? "").split("\n")[c.lineNumber - 1] ?? "";
+				} catch {
+					return "";
+				}
+			}));
+			const parts = [];
+			const trimmed = generalComment.trim();
+			if (trimmed) parts.push({
+				type: "text",
+				text: trimmed
+			});
+			for (let i = 0; i < comments.length; i++) {
+				const c = comments[i];
+				const preview = previews[i];
+				const absUrl = root ? `file://${root.replace(/\/$/, "")}/${c.filePath}?start=${c.lineNumber}&end=${c.lineNumber}` : `file:///${c.filePath}?start=${c.lineNumber}&end=${c.lineNumber}`;
+				const filename = c.filePath.split("/").pop() ?? c.filePath;
+				parts.push({
+					type: "text",
+					text: formatCommentNote(c.filePath, c.lineNumber, c.comment),
+					synthetic: true,
+					metadata: { opencodeComment: {
+						path: c.filePath,
+						selection: {
+							startLine: c.lineNumber,
+							endLine: c.lineNumber,
+							startChar: 0,
+							endChar: 0
+						},
+						comment: c.comment,
+						preview,
+						origin: "file"
+					} }
+				});
+				parts.push({
+					type: "file",
+					mime: "text/plain",
+					filename,
+					url: absUrl
+				});
+			}
+			let sessionId = selectedId;
+			if (sessionId === "__new__") {
+				const res = await client.session.create({ body: {} });
+				if (!res.data?.id) throw new Error("Failed to create session");
+				sessionId = res.data.id;
+			}
+			await client.session.promptAsync({
+				path: { id: sessionId },
+				body: { parts }
+			});
+			onClearComments();
+			setStatus("sent");
+			setTimeout(onDone, 1200);
+		} catch (e) {
+			setStatus("error");
+			setErrorMsg(e instanceof Error ? e.message : "Failed to send to OpenCode");
+		}
+	};
+	const handleKeyDown = (e) => {
+		if (e.key === "Escape") {
+			e.preventDefault();
+			onDone();
+		} else if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+			e.preventDefault();
+			handleSend();
+		}
+	};
+	if (status === "sent") return /* @__PURE__ */ jsx("div", {
+		style: {
+			padding: "12px",
+			textAlign: "center",
+			fontSize: 12,
+			color: "#4ade80",
+			fontFamily: "system-ui, sans-serif"
+		},
+		children: "Sent to OpenCode!"
+	});
+	const loading = status === "loading-sessions";
+	const sending = status === "sending";
+	const disabled = loading || sending;
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			padding: "10px 12px 8px",
+			display: "flex",
+			flexDirection: "column",
+			gap: 8
+		},
+		onKeyDown: (e) => e.stopPropagation(),
+		children: [
+			/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
+				style: {
+					display: "block",
+					fontSize: 11,
+					color: "#71717a",
+					fontFamily: "system-ui, sans-serif",
+					marginBottom: 4
+				},
+				children: "Session"
+			}), /* @__PURE__ */ jsxs(Select.Root, {
+				value: selectedId,
+				onValueChange: (v) => v && setSelectedId(v),
+				disabled,
+				children: [/* @__PURE__ */ jsx(Select.Trigger, {
+					style: { borderRadius: 4 },
+					children: /* @__PURE__ */ jsx(Select.Value, {
+						placeholder: "Select a session…",
+						children: (value) => sessions.find((s) => s.id === value)?.title ?? value
+					})
+				}), /* @__PURE__ */ jsx(Select.Portal, {
+					container: portalContainer,
+					children: /* @__PURE__ */ jsx(Select.Positioner, {
+						style: {
+							zIndex: 9999999,
+							pointerEvents: "auto"
+						},
+						children: /* @__PURE__ */ jsx(Select.Popup, { children: /* @__PURE__ */ jsxs(Select.List, { children: [/* @__PURE__ */ jsx(Select.Item, {
+							value: "__new__",
+							children: /* @__PURE__ */ jsx(Select.ItemText, { children: "+ New session" })
+						}), loading ? /* @__PURE__ */ jsx(Select.Item, {
+							value: "__loading__",
+							disabled: true,
+							children: /* @__PURE__ */ jsx(Select.ItemText, { children: "Loading sessions…" })
+						}) : sessions.map((s) => /* @__PURE__ */ jsx(Select.Item, {
+							value: s.id,
+							children: /* @__PURE__ */ jsx(Select.ItemText, { children: s.title || `Session ${s.id.slice(0, 8)}` })
+						}, s.id))] }) })
+					})
+				})]
+			})] }),
+			/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("label", {
+				style: {
+					display: "block",
+					fontSize: 11,
+					color: "#71717a",
+					fontFamily: "system-ui, sans-serif",
+					marginBottom: 4
+				},
+				children: ["Message ", /* @__PURE__ */ jsx("span", {
+					style: { color: "#52525b" },
+					children: "(optional)"
+				})]
+			}), /* @__PURE__ */ jsx(Textarea, {
+				ref: textareaRef,
+				value: generalComment,
+				onChange: (e) => setGeneralComment(e.target.value),
+				onKeyDown: handleKeyDown,
+				placeholder: "e.g. Left the comments below, please address",
+				rows: 2,
+				disabled
+			})] }),
+			status === "error" && errorMsg && /* @__PURE__ */ jsx("p", {
+				style: {
+					margin: 0,
+					fontSize: 11,
+					color: "#f87171",
+					fontFamily: "system-ui, sans-serif"
+				},
+				children: errorMsg
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					justifyContent: "flex-end",
+					gap: 6
+				},
+				children: [/* @__PURE__ */ jsx(Button, {
+					variant: "secondary",
+					onClick: onDone,
+					disabled: sending,
+					children: "Cancel"
+				}), /* @__PURE__ */ jsx(Button, {
+					variant: "primary",
+					onClick: handleSend,
+					disabled,
+					children: sending ? "Sending…" : "Send"
+				})]
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/CommentsMenu.tsx
+function CommentRow({ comment, onDelete, onUpdate }) {
+	const [hovered, setHovered] = useState(false);
+	const [editing, setEditing] = useState(false);
+	const [draft, setDraft] = useState(comment.comment);
+	const textareaRef = useRef(null);
+	useEffect(() => {
+		if (!editing) setDraft(comment.comment);
+	}, [comment.comment, editing]);
+	const startEditing = () => {
+		setDraft(comment.comment);
+		setEditing(true);
+		requestAnimationFrame(() => {
+			const el = textareaRef.current;
+			if (!el) return;
+			el.focus();
+			el.selectionStart = el.selectionEnd = el.value.length;
+		});
+	};
+	const handleSave = () => {
+		const trimmed = draft.trim();
+		if (trimmed && trimmed !== comment.comment) onUpdate(trimmed);
+		setEditing(false);
+	};
+	const handleCancel = () => {
+		setDraft(comment.comment);
+		setEditing(false);
+	};
+	const handleKeyDown = (e) => {
+		if (e.key === "Escape") {
+			e.preventDefault();
+			handleCancel();
+		} else if (e.key === "Enter" && !e.shiftKey) {
+			e.preventDefault();
+			handleSave();
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			padding: "6px 12px",
+			background: hovered ? "rgba(255,255,255,0.03)" : "transparent",
+			transition: "background 0.1s"
+		},
+		onMouseEnter: () => setHovered(true),
+		onMouseLeave: () => setHovered(false),
+		children: [/* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "flex",
+				alignItems: "flex-start",
+				justifyContent: "space-between",
+				gap: 8
+			},
+			children: [/* @__PURE__ */ jsxs("span", {
+				style: {
+					fontSize: 11,
+					fontFamily: "ui-monospace, monospace",
+					color: "#3b82f6",
+					flexShrink: 0
+				},
+				children: [
+					comment.filePath,
+					":",
+					comment.lineNumber
+				]
+			}), hovered && !editing && /* @__PURE__ */ jsx(IconButton, {
+				onClick: onDelete,
+				title: "Remove comment",
+				style: {
+					padding: 0,
+					flexShrink: 0
+				},
+				children: /* @__PURE__ */ jsx(XIcon, { size: 12 })
+			})]
+		}), editing ? /* @__PURE__ */ jsxs("div", {
+			style: { marginTop: 4 },
+			children: [/* @__PURE__ */ jsx(Textarea, {
+				ref: textareaRef,
+				value: draft,
+				onChange: (e) => setDraft(e.target.value),
+				onKeyDown: handleKeyDown,
+				rows: 3
+			}), /* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					justifyContent: "flex-end",
+					gap: 6,
+					marginTop: 4
+				},
+				children: [/* @__PURE__ */ jsx(Button, {
+					variant: "secondary",
+					onClick: handleCancel,
+					style: {
+						height: 24,
+						fontSize: 11
+					},
+					children: "Cancel"
+				}), /* @__PURE__ */ jsx(Button, {
+					variant: "primary",
+					onClick: handleSave,
+					disabled: !draft.trim(),
+					style: {
+						height: 24,
+						fontSize: 11
+					},
+					children: "Save"
+				})]
+			})]
+		}) : /* @__PURE__ */ jsx("p", {
+			onClick: startEditing,
+			title: "Click to edit",
+			style: {
+				margin: "3px 0 0",
+				fontSize: 12,
+				color: "#d4d4d8",
+				fontFamily: "system-ui, sans-serif",
+				lineHeight: 1.4,
+				whiteSpace: "pre-wrap",
+				wordBreak: "break-word",
+				cursor: "text"
+			},
+			children: comment.comment
+		})]
+	});
+}
+function CommentsMenu({ onClose }) {
+	const root = useProjectRoot();
+	const comments = useCommentEntries();
+	const { clearAllComments, removeComment, updateComment } = useCommentsActions();
+	const [copyFeedback, setCopyFeedback] = useState(false);
+	const [showSendForm, setShowSendForm] = useState(false);
+	useEffect(() => {
+		if (!comments.length) setShowSendForm(false);
+	}, [comments.length]);
+	const handleCopy = () => {
+		if (!comments.length) return;
+		const text = comments.map((c) => formatCommentNote(c.filePath, c.lineNumber, c.comment)).join("\n\n");
+		navigator.clipboard.writeText(text).then(() => {
+			setCopyFeedback(true);
+			setTimeout(() => setCopyFeedback(false), 1500);
+		}).catch(() => {});
+	};
+	const handleClear = () => {
+		clearAllComments();
+		onClose();
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			width: 320,
+			overflow: "hidden"
+		},
+		onClick: (e) => e.stopPropagation(),
+		children: [
+			/* @__PURE__ */ jsx(PanelHeader, {
+				title: /* @__PURE__ */ jsxs(Fragment, { children: ["Comments", comments.length > 0 && /* @__PURE__ */ jsxs("span", {
+					style: {
+						marginLeft: 6,
+						fontSize: 11,
+						color: "#71717a",
+						fontWeight: 400
+					},
+					children: [
+						"(",
+						comments.length,
+						")"
+					]
+				})] }),
+				actionsRender: /* @__PURE__ */ jsx(IconButton, {
+					onClick: onClose,
+					title: "Close",
+					children: /* @__PURE__ */ jsx(XIcon, {})
+				})
+			}),
+			comments.length === 0 ? /* @__PURE__ */ jsx("div", {
+				style: {
+					padding: "16px 12px",
+					fontSize: 12,
+					lineHeight: 1.5,
+					color: "#97979b",
+					fontFamily: "system-ui, sans-serif",
+					textAlign: "center",
+					textWrap: "balance"
+				},
+				children: "No comments yet. Inspect an element and click \"Add comment\"."
+			}) : /* @__PURE__ */ jsx("div", {
+				style: {
+					maxHeight: 280,
+					overflowY: "auto",
+					paddingBlock: 6
+				},
+				onKeyDown: (e) => e.stopPropagation(),
+				children: comments.map((c) => /* @__PURE__ */ jsx(CommentRow, {
+					comment: c,
+					onDelete: () => removeComment(c.id),
+					onUpdate: (text) => updateComment({
+						id: c.id,
+						text
+					})
+				}, c.id))
+			}),
+			comments.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", { style: {
+				borderTop: "1px solid #27272a",
+				margin: "4px 0 0"
+			} }), showSendForm ? /* @__PURE__ */ jsx(SendToOpencodeForm, {
+				root,
+				comments,
+				onClearComments: clearAllComments,
+				onDone: () => {
+					setShowSendForm(false);
+					onClose();
+				}
+			}) : /* @__PURE__ */ jsxs("div", {
+				style: { padding: "4px 6px" },
+				children: [
+					/* @__PURE__ */ jsxs(DropdownMenu.Item, {
+						closeOnClick: false,
+						onClick: () => setShowSendForm(true),
+						children: [/* @__PURE__ */ jsx(OpencodeIcon, { size: 13 }), "Send to OpenCode"]
+					}),
+					/* @__PURE__ */ jsxs(DropdownMenu.Item, {
+						closeOnClick: false,
+						onClick: handleCopy,
+						children: [/* @__PURE__ */ jsx(ClipboardIcon, {}), copyFeedback ? "Copied!" : "Copy to clipboard"]
+					}),
+					/* @__PURE__ */ jsxs(DropdownMenu.Item, {
+						style: { color: "#ef4444" },
+						onClick: handleClear,
+						children: [/* @__PURE__ */ jsx(TrashIcon, {}), "Clear all"]
+					})
+				]
+			})] })
+		]
+	});
+}
+
+//#endregion
+//#region src/index.tsx
+function CommentsToolbarIcon({ count }) {
+	return /* @__PURE__ */ jsxs("span", {
+		style: {
+			position: "relative",
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center"
+		},
+		children: [/* @__PURE__ */ jsx(ChatBubbleIcon, {}), count > 0 && /* @__PURE__ */ jsx("span", {
+			style: {
+				position: "absolute",
+				top: -6,
+				right: -6,
+				background: "#ef4444",
+				color: "#fff",
+				fontSize: 9,
+				fontWeight: 700,
+				fontFamily: "system-ui, sans-serif",
+				lineHeight: 1,
+				minWidth: 14,
+				height: 14,
+				borderRadius: 7,
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				padding: "0 3px",
+				boxSizing: "border-box",
+				pointerEvents: "none"
+			},
+			children: count > 99 ? "99+" : count
+		})]
+	});
+}
+function CommentsToolbar() {
+	const comments = useCommentEntries();
+	const portalContainer = useWidgetPortalContainer();
+	const deactivateInspector = useDeactivateInspector();
+	const buttonRef = useRef(null);
+	const [isOpen, setIsOpen] = useState(false);
+	const count = comments.length;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(Tooltip, {
+			label: "Comments",
+			container: portalContainer,
+			render: /* @__PURE__ */ jsx(ToolbarButton, { ref: buttonRef }),
+			"aria-label": "Comments",
+			onClick: () => {
+				deactivateInspector();
+				setIsOpen((open) => !open);
+			},
+			children: /* @__PURE__ */ jsx(CommentsToolbarIcon, { count })
+		}),
+		/* @__PURE__ */ jsx(DropdownMenu.Root, {
+			open: isOpen,
+			onOpenChange: setIsOpen,
+			children: /* @__PURE__ */ jsx(DropdownMenu.Portal, {
+				container: portalContainer,
+				children: /* @__PURE__ */ jsx(DropdownMenu.Positioner, {
+					anchor: buttonRef.current,
+					side: "top",
+					align: "end",
+					sideOffset: 8,
+					collisionPadding: 8,
+					positionMethod: "fixed",
+					style: {
+						zIndex: 9999999,
+						pointerEvents: "auto"
+					},
+					children: /* @__PURE__ */ jsx(DropdownMenu.Popup, { children: /* @__PURE__ */ jsx(CommentsMenu, { onClose: () => setIsOpen(false) }) })
+				})
+			})
+		}),
+		/* @__PURE__ */ jsx(CommentEditorOverlay, {})
+	] });
+}
+function CommentsPlugin() {
+	return {
+		name: "comments",
+		toolbar: CommentsToolbar
+	};
+}
+
+//#endregion
+export { CommentsPlugin };
+//# sourceMappingURL=index.js.map