@nuniapp/widget 0.1.2 → 0.1.4

package/dist/index.js

@@ -1,43 +1,4 @@
-//#region ../shared/src/id.ts
-const ALPHABET = "123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz";
-const PROJECT_ID_PATTERN = new RegExp(`^nuni_[${ALPHABET}]{22}$`);
-/** Random base58 string using the platform CSPRNG (browser, Node, Convex). */
-function randomBase58(length) {
-	const bytes = new Uint8Array(length);
-	crypto.getRandomValues(bytes);
-	let out = "";
-	for (const byte of bytes) {
-		let b = byte;
-		while (b >= 232) {
-			const retry = /* @__PURE__ */ new Uint8Array(1);
-			crypto.getRandomValues(retry);
-			b = retry[0];
-		}
-		out += ALPHABET[b % 58];
-	}
-	return out;
-}
-function isProjectId(value) {
-	return typeof value === "string" && PROJECT_ID_PATTERN.test(value);
-}
-/** Secret used by anonymous commenters to edit/delete their own comments. */
-function generateSecret() {
-	return randomBase58(32);
-}
-//#endregion
-//#region ../shared/src/limits.ts
-const LIMITS = {
-	bodyMaxLength: 2e3,
-	nameMaxLength: 50,
-	unclaimedCommentCap: 500,
-	maxOriginsPerProject: 20,
-	sessionTtlMs: 2592e6,
-	anchorTextMaxLength: 120,
-	/** Per page, the widget loads this many newest open and resolved comments. */
-	pageOpenLimit: 1e3,
-	pageResolvedLimit: 200
-};
-//#endregion
+import { a as generateSecret, i as LIMITS, n as MASK_ATTRIBUTE, o as isProjectId, r as MASK_SELECTOR, t as CAPTURE_MARK } from "./mark-BeysEAHp.js";
 //#region ../shared/src/path.ts
 /**
 * Normalize a URL to the key comments are matched by. Query and hash are
@@ -71,16 +32,417 @@ function describeLocation(input) {
 		url: url.href
 	};
 }
+/** URL that opens the page with the comment focused by the widget. */
+function commentUrl(page, id) {
+	const [pathname, hashRoute] = page.path.split("#");
+	const origin = new URL(page.origin).origin;
+	let url = new URL(pathname ?? "/", origin);
+	if (url.origin !== origin) url = new URL("/", origin);
+	const params = new URLSearchParams(page.search ?? "");
+	params.set("nuni", id);
+	url.search = params.toString();
+	if (hashRoute) url.hash = hashRoute;
+	return url.toString();
+}
+/** Origin + path only: query strings and hashes often carry tokens. */
+function withoutQuery(input, base) {
+	try {
+		const url = new URL(input, base);
+		return `${url.origin}${url.pathname}`;
+	} catch {
+		return input.split(/[?#]/)[0] ?? "";
+	}
+}
+/**
+* Cut a word of free text at the query or hash of the URL in it: after a
+* path ("/reset?token=1", "https://a.com/x#t") or before a key=value pair
+* ("?token=1", "#access_token=1"). One pass, so long words stay cheap.
+*/
+function stripWord(word) {
+	const slash = word.indexOf("/");
+	const equals = word.lastIndexOf("=");
+	for (let i = 0; i < word.length - 1; i++) {
+		const c = word[i];
+		if ((c === "?" || c === "#") && (slash >= 0 && slash < i || equals > i)) return word.slice(0, i);
+	}
+	return word;
+}
+/**
+* Remove query strings and hashes from every URL inside free text (log
+* lines, markup, CSS values), absolute or relative.
+*/
+function stripUrlQueries(text) {
+	return text.replace(/[^\s"'<>`]+/g, stripWord);
+}
+const ATTRIBUTE = /(\s([^\s"'<>/=]+)\s*=\s*)("[^"]*"|'[^']*')/g;
+/** Attributes that hold URLs, including lazy-loading ones like data-src. */
+const URL_ATTRIBUTE = /^(?:action|formaction|poster|cite|ping|data|background|(?:[\w-]*[-:])?(?:href|src|srcset|url|uri))$/i;
+/**
+* Remove query strings and hashes from serialized HTML: URL attributes
+* (links, images, srcset lists, data-src) always, relative or absolute,
+* and URLs anywhere else (inline styles, other attributes, text).
+*/
+function stripHtmlUrlQueries(html) {
+	return stripUrlQueries(html.replace(ATTRIBUTE, (all, prefix, name, quoted) => {
+		if (!URL_ATTRIBUTE.test(name)) return all;
+		const quote = quoted[0];
+		const value = quoted.slice(1, -1);
+		return `${prefix}${quote}${/srcset$/i.test(name) ? value.replace(/[?#][^\s,]*/g, "") : value.replace(/[?#][\s\S]*$/, "")}${quote}`;
+	}));
+}
+//#endregion
+//#region ../shared/src/comment-prompt.ts
+/** A code fence longer than any backtick run inside `content`. */
+function fence(content, lang = "") {
+	const longest = Math.max(0, ...Array.from(content.matchAll(/`+/g), (m) => m[0].length));
+	const ticks = "`".repeat(Math.max(3, longest + 1));
+	return `${ticks}${lang}\n${content}\n${ticks}`;
+}
+function quote(text) {
+	return text.split("\n").map((line) => line ? `> ${line}` : ">").join("\n");
+}
+function inline(text) {
+	const clean = text.replace(/\s+/g, " ").trim();
+	return clean.includes("`") ? `"${clean}"` : `\`${clean}\``;
+}
+/**
+* One comment as a ready-to-paste task for a coding agent. Single source of
+* truth for the widget, dashboard, CLI and MCP server.
+*/
+function buildCommentPrompt(comment, options = {}) {
+	const includeContext = options.includeContext ?? true;
+	const { anchor, page } = comment;
+	const out = [];
+	out.push("Fix this piece of feedback that was left on the live site with Nuni.", "", "## Comment", "", quote(comment.body), "", `From ${comment.authorName} on ${new Date(comment.createdAt).toISOString().slice(0, 10)}` + (comment.status === "resolved" ? " (already resolved)" : ""));
+	out.push("", "## Where", "");
+	out.push(`- Page: ${page.title ? `${page.title} ` : ""}(${page.path})`);
+	out.push(`- Open it: ${commentUrl(page, comment._id)}`);
+	out.push(`- Viewport: ${comment.viewport.w}×${comment.viewport.h} at ${comment.viewport.dpr}x`);
+	if (includeContext && comment.userAgent) out.push(`- Browser: ${comment.userAgent}`);
+	out.push("", "## Element", "");
+	out.push(`- Tag: <${anchor.tag}>`);
+	if (anchor.text) out.push(`- Text: ${inline(anchor.text)}`);
+	if (anchor.componentName) out.push(`- React component: ${anchor.componentName}`);
+	if (anchor.selectors.testId) out.push(`- Test ID: ${inline(anchor.selectors.testId)}`);
+	if (anchor.selectors.id) out.push(`- ID: ${inline(anchor.selectors.id)}`);
+	if (anchor.selectors.css) out.push(`- CSS selector: ${inline(anchor.selectors.css)}`);
+	out.push(`- DOM path: ${inline(anchor.selectors.path)}`);
+	const labels = Object.entries(anchor.attrs).filter(([name]) => name !== "class" && name !== "style").map(([name, value]) => `${name}="${value}"`);
+	if (labels.length) out.push(`- Attributes: ${inline(labels.join(" "))}`);
+	const context = includeContext ? comment.context : void 0;
+	if (context?.dom?.html) out.push("", fence(context.dom.html, "html"));
+	const styles = Object.entries(context?.dom?.styles ?? {});
+	if (styles.length) out.push("", "Computed styles:", "", fence(styles.map(([k, v]) => `${k}: ${v};`).join("\n"), "css"));
+	if (context?.console?.length) {
+		out.push("", `## Console (${context.console.length})`, "");
+		out.push(fence(context.console.map((e) => `[${e.level}] ${e.message}`).join("\n"), "text"));
+	}
+	if (context?.network?.length) {
+		out.push("", `## Failed requests (${context.network.length})`, "");
+		for (const r of context.network) out.push(`- ${r.method} ${r.url} → ${r.status === 0 ? "network error" : r.status}`);
+	}
+	if (includeContext && comment.screenshotUrl) out.push("", "## Screenshot", "", comment.screenshotUrl);
+	out.push("", "## Steps", "", "1. Find the code that renders this element. Search for the text, the component name, the test ID or the selector.", "2. Make the change the comment asks for, and keep the fix focused on it.", "3. Tell me what you changed, so the comment can be resolved in Nuni.");
+	return out.join("\n");
+}
 //#endregion
 //#region src/config.ts
-const VERSION = "0.1.2";
+const VERSION = "0.1.4";
 function resolveConfig(options) {
 	return {
 		project: options.project,
 		convexUrl: options.convexUrl ?? "https://greedy-giraffe-33.convex.cloud",
 		convexSiteUrl: options.convexSiteUrl ?? "https://greedy-giraffe-33.convex.site",
 		appUrl: (options.appUrl ?? "https://nuni.praveenjuge.com").replace(/\/$/, ""),
-		getPageKey: options.getPageKey
+		getPageKey: options.getPageKey,
+		capture: {
+			console: options.capture?.console ?? true,
+			network: options.capture?.network ?? true,
+			dom: options.capture?.dom ?? true,
+			screenshot: options.capture?.screenshot ?? true
+		}
+	};
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.151.0/helpers/esm/typeof.js
+function _typeof(o) {
+	"@babel/helpers - typeof";
+	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
+		return typeof o;
+	} : function(o) {
+		return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+	}, _typeof(o);
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.151.0/helpers/esm/toPrimitive.js
+function toPrimitive(t, r) {
+	if ("object" != _typeof(t) || !t) return t;
+	var e = t[Symbol.toPrimitive];
+	if (void 0 !== e) {
+		var i = e.call(t, r || "default");
+		if ("object" != _typeof(i)) return i;
+		throw new TypeError("@@toPrimitive must return a primitive value.");
+	}
+	return ("string" === r ? String : Number)(t);
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.151.0/helpers/esm/toPropertyKey.js
+function toPropertyKey(t) {
+	var i = toPrimitive(t, "string");
+	return "symbol" == _typeof(i) ? i : i + "";
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.151.0/helpers/esm/defineProperty.js
+function _defineProperty(e, r, t) {
+	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+		value: t,
+		enumerable: !0,
+		configurable: !0,
+		writable: !0
+	}) : e[r] = t, e;
+}
+//#endregion
+//#region src/context.ts
+const MESSAGE_MAX = LIMITS.contextMessageMaxLength;
+function describeValue(value) {
+	if (typeof value === "string") return value;
+	if (value instanceof Error) {
+		const frame = value.stack?.split("\n").find((line) => line.trim().startsWith("at "));
+		return `${value.name}: ${value.message}${frame ? ` (${frame.trim()})` : ""}`;
+	}
+	try {
+		let budget = 200;
+		return JSON.stringify(value, (_key, v) => budget-- > 0 ? v : void 0) ?? String(value);
+	} catch {
+		return String(value);
+	}
+}
+function clip(text) {
+	return text.length > MESSAGE_MAX ? `${text.slice(0, MESSAGE_MAX - 1)}…` : text;
+}
+/** Origin + path only: query strings and hashes often carry tokens. */
+function safeUrl(input) {
+	return clip(withoutQuery(input, location.href));
+}
+var Ring = class {
+	constructor() {
+		_defineProperty(this, "items", []);
+	}
+	push(item) {
+		this.items.push(item);
+		if (this.items.length > LIMITS.contextEntryMax) this.items.shift();
+	}
+};
+/**
+* Keep the latest console errors and failed requests, so a comment can carry
+* what went wrong on the page. Installed once per mount, removed on destroy.
+* `ignore` skips Nuni's own traffic.
+*/
+function startCollectors(options, ignore) {
+	const logs = new Ring();
+	const requests = new Ring();
+	const undo = [];
+	const log = (level, args) => {
+		logs.push({
+			level,
+			message: clip(stripUrlQueries(args.map(describeValue).join(" "))),
+			at: Date.now()
+		});
+	};
+	const failed = (method, url, status) => {
+		if (ignore(url)) return;
+		requests.push({
+			method: method.toUpperCase(),
+			url: safeUrl(url),
+			status,
+			at: Date.now()
+		});
+	};
+	if (options.console) {
+		for (const level of ["error", "warn"]) {
+			const original = console[level];
+			const wrapped = (...args) => {
+				log(level, args);
+				original.apply(console, args);
+			};
+			console[level] = wrapped;
+			undo.push(() => {
+				if (console[level] === wrapped) console[level] = original;
+			});
+		}
+		const onError = (e) => {
+			if (e.error) log("error", [e.error]);
+			else log("error", [`${e.message}${e.filename ? ` (${safeUrl(e.filename)}:${e.lineno})` : ""}`]);
+		};
+		const onRejection = (e) => log("error", ["Unhandled rejection:", e.reason]);
+		window.addEventListener("error", onError);
+		window.addEventListener("unhandledrejection", onRejection);
+		undo.push(() => {
+			window.removeEventListener("error", onError);
+			window.removeEventListener("unhandledrejection", onRejection);
+		});
+	}
+	if (options.network) {
+		const originalFetch = window.fetch;
+		if (typeof originalFetch === "function") {
+			const wrappedFetch = async (input, init) => {
+				if (init && init[CAPTURE_MARK]) return originalFetch.call(window, input, init);
+				const url = typeof input === "string" ? input : input instanceof URL ? input.href : input.url;
+				const method = init?.method ?? (typeof input === "object" && "method" in input ? input.method : "GET");
+				try {
+					const response = await originalFetch.call(window, input, init);
+					if (!response.ok && response.type !== "opaque") failed(method, url, response.status);
+					return response;
+				} catch (error) {
+					if (!(error instanceof DOMException && error.name === "AbortError")) failed(method, url, 0);
+					throw error;
+				}
+			};
+			window.fetch = wrappedFetch;
+			undo.push(() => {
+				if (window.fetch === wrappedFetch) window.fetch = originalFetch;
+			});
+		}
+		const proto = window.XMLHttpRequest?.prototype;
+		if (proto) {
+			const open = proto.open;
+			const send = proto.send;
+			const info = /* @__PURE__ */ new WeakMap();
+			const wrappedOpen = function(method, url, ...rest) {
+				info.set(this, {
+					method,
+					url: String(url)
+				});
+				return open.call(this, method, url, ...rest);
+			};
+			proto.open = wrappedOpen;
+			const wrappedSend = function(body) {
+				const request = info.get(this);
+				if (request) {
+					let aborted = false;
+					const onAbort = () => aborted = true;
+					const onEnd = () => {
+						this.removeEventListener("abort", onAbort);
+						this.removeEventListener("loadend", onEnd);
+						if (!aborted && (this.status === 0 || this.status >= 400)) failed(request.method, request.url, this.status);
+					};
+					this.addEventListener("abort", onAbort);
+					this.addEventListener("loadend", onEnd);
+				}
+				return send.call(this, body);
+			};
+			proto.send = wrappedSend;
+			undo.push(() => {
+				if (proto.open === wrappedOpen) proto.open = open;
+				if (proto.send === wrappedSend) proto.send = send;
+			});
+		}
+	}
+	return {
+		console: () => [...logs.items],
+		network: () => [...requests.items],
+		stop() {
+			for (const fn of undo.splice(0)) fn();
+		}
+	};
+}
+const STYLE_PROPS = [
+	"display",
+	"position",
+	"width",
+	"height",
+	"margin",
+	"padding",
+	"gap",
+	"font-family",
+	"font-size",
+	"font-weight",
+	"line-height",
+	"letter-spacing",
+	"text-align",
+	"color",
+	"background-color",
+	"border",
+	"border-radius",
+	"box-shadow",
+	"opacity"
+];
+const ATTR_MAX = 200;
+const TEXT_MAX = 200;
+/** Replace an element's contents with a short note. */
+function redact(el, note) {
+	el.replaceChildren(el.ownerDocument.createComment(` ${note} `));
+}
+/**
+* Remove what should never leave the page (form values, option lists and
+* masked areas) and trim the rest.
+*/
+function scrub(root) {
+	const walker = root.ownerDocument.createTreeWalker(root, 5);
+	const drop = [];
+	for (let node = root; node; node = walker.nextNode()) {
+		if (node.nodeType === 3) {
+			const text = node.textContent ?? "";
+			if (text.length > TEXT_MAX) node.textContent = `${text.slice(0, TEXT_MAX)}…`;
+			continue;
+		}
+		const el = node;
+		const tag = el.tagName;
+		if (tag === "SCRIPT" || tag === "STYLE" || tag === "NOSCRIPT") {
+			drop.push(el);
+			continue;
+		}
+		if (el.hasAttribute("data-nuni-mask")) {
+			for (const attr of Array.from(el.attributes)) if (attr.name !== "id" && attr.name !== "class" && attr.name !== "data-nuni-mask") el.removeAttribute(attr.name);
+			redact(el, "masked");
+			continue;
+		}
+		if (tag === "INPUT" || tag === "TEXTAREA") {
+			el.removeAttribute("value");
+			if (tag === "TEXTAREA") el.textContent = "";
+		}
+		if (tag === "SELECT" || tag === "DATALIST") {
+			const count = el.getElementsByTagName("option").length;
+			redact(el, `${count} options`);
+		}
+		for (const attr of Array.from(el.attributes)) if (attr.value.length > ATTR_MAX) el.setAttribute(attr.name, `${attr.value.slice(0, ATTR_MAX)}…`);
+	}
+	for (const node of drop) node.parentNode?.removeChild(node);
+}
+/** Clone at most `depth` levels of children. */
+function shallowClone(el, depth) {
+	const copy = el.cloneNode(false);
+	if (depth > 0) for (const child of Array.from(el.childNodes)) copy.appendChild(child.nodeType === 1 ? shallowClone(child, depth - 1) : child.cloneNode(false));
+	else if (el.childElementCount) copy.appendChild(el.ownerDocument.createComment(` ${el.childElementCount} more `));
+	return copy;
+}
+/** The element's markup and key computed styles, for design feedback. */
+function domContext(el) {
+	const max = LIMITS.domSnippetMaxLength;
+	let html = "";
+	const inMasked = Boolean(el.parentElement?.closest(`[${MASK_ATTRIBUTE}]`));
+	for (const depth of inMasked ? [-1] : [
+		Infinity,
+		3,
+		1,
+		0
+	]) {
+		const copy = depth === Infinity ? el.cloneNode(true) : shallowClone(el, Math.max(0, depth));
+		if (depth < 0) copy.setAttribute(MASK_ATTRIBUTE, "");
+		scrub(copy);
+		html = stripHtmlUrlQueries(copy.outerHTML);
+		if (html.length <= max) break;
+	}
+	if (html.length > max) html = `${html.slice(0, max - 1)}…`;
+	const styles = {};
+	const computed = el.ownerDocument.defaultView?.getComputedStyle(el);
+	for (const prop of STYLE_PROPS) {
+		const value = computed?.getPropertyValue(prop).trim();
+		if (value) styles[prop] = value;
+	}
+	return {
+		html,
+		styles
 	};
 }
 //#endregion
@@ -359,7 +721,7 @@ function describeSegment(el, options) {
 		}
 	}
 	const label = el.getAttribute("aria-label");
-	if (label && label.length <= 60) segment += attrSelector("aria-label", label);
+	if (label && label.length <= 60 && !el.closest(MASK_SELECTOR)) segment += attrSelector("aria-label", label);
 	return segment;
 }
 /**
@@ -411,8 +773,14 @@ const SKIP_TEXT_TAGS = /* @__PURE__ */ new Set([
 function normalizeText(value) {
 	return value.replace(/\s+/g, " ").trim();
 }
-/** Visible-ish text of an element, whitespace-normalized and truncated. */
+/**
+* Visible-ish text of an element, whitespace-normalized and truncated.
+* Areas marked data-nuni-mask count as empty, both when capturing and when
+* resolving, so their (private) text is never stored and matching stays
+* consistent.
+*/
 function elementText(el, max = 120) {
+	if (el.closest(MASK_SELECTOR)) return "";
 	if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) return normalizeText(el.placeholder || el.getAttribute("aria-label") || "").slice(0, max);
 	let out = "";
 	const walk = (node) => {
@@ -424,6 +792,7 @@ function elementText(el, max = 120) {
 		if (node.nodeType !== 1) return;
 		const tag = node.tagName.toUpperCase();
 		if (SKIP_TEXT_TAGS.has(tag)) return;
+		if (node.hasAttribute("data-nuni-mask")) return;
 		if (tag === "IMG") {
 			out += " " + (node.getAttribute("alt") ?? "") + " ";
 			return;
@@ -463,6 +832,7 @@ function textSimilarity(a, b) {
 //#region ../anchor/src/capture.ts
 function capturedAttributes(el, options) {
 	const attrs = {};
+	if (el.closest(MASK_SELECTOR)) return attrs;
 	for (const name of CAPTURED_ATTRIBUTES) {
 		if (!attributeAllowed(name, options)) continue;
 		if (name === "value" && !(el instanceof HTMLButtonElement || el.getAttribute("type") === "submit")) continue;
@@ -4188,44 +4558,6 @@ var ConvexClient = class {
 	}
 };
 //#endregion
-//#region \0@oxc-project+runtime@0.151.0/helpers/esm/typeof.js
-function _typeof(o) {
-	"@babel/helpers - typeof";
-	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
-		return typeof o;
-	} : function(o) {
-		return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
-	}, _typeof(o);
-}
-//#endregion
-//#region \0@oxc-project+runtime@0.151.0/helpers/esm/toPrimitive.js
-function toPrimitive(t, r) {
-	if ("object" != _typeof(t) || !t) return t;
-	var e = t[Symbol.toPrimitive];
-	if (void 0 !== e) {
-		var i = e.call(t, r || "default");
-		if ("object" != _typeof(i)) return i;
-		throw new TypeError("@@toPrimitive must return a primitive value.");
-	}
-	return ("string" === r ? String : Number)(t);
-}
-//#endregion
-//#region \0@oxc-project+runtime@0.151.0/helpers/esm/toPropertyKey.js
-function toPropertyKey(t) {
-	var i = toPrimitive(t, "string");
-	return "symbol" == _typeof(i) ? i : i + "";
-}
-//#endregion
-//#region \0@oxc-project+runtime@0.151.0/helpers/esm/defineProperty.js
-function _defineProperty(e, r, t) {
-	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
-		value: t,
-		enumerable: !0,
-		configurable: !0,
-		writable: !0
-	}) : e[r] = t, e;
-}
-//#endregion
 //#region src/api.ts
 var NuniApiError = class extends Error {
 	constructor(message, code) {
@@ -4275,6 +4607,14 @@ var NuniApi = class {
 			sessionToken
 		}, cb, () => {});
 	}
+	/** A comment with the owner-only context (screenshot, console, DOM). */
+	onOwnerComment(id, sessionToken, cb) {
+		return this.client.onUpdate(api.comments.getForOwner, {
+			publicId: this.config.project,
+			id,
+			sessionToken
+		}, (comment) => cb(comment), () => {});
+	}
 	/** One comment by id, for deep links outside the page listing window. */
 	getComment(id) {
 		return this.client.query(api.comments.getById, {
@@ -4300,6 +4640,23 @@ var NuniApi = class {
 		if (!response.ok || !data.id) throw new NuniApiError(data.message ?? "Couldn't post the comment", data.code ?? "error");
 		return data.id;
 	}
+	/** Attach a screenshot to the author's own, just-posted comment. */
+	async uploadScreenshot(id, authorSecret, image) {
+		const response = await fetch(`${this.config.convexSiteUrl}/widget/screenshot`, {
+			method: "POST",
+			headers: {
+				"Content-Type": image.type,
+				"X-Nuni-Project": this.config.project,
+				"X-Nuni-Comment": id,
+				"X-Nuni-Author": authorSecret
+			},
+			body: image
+		});
+		if (!response.ok) {
+			const data = await response.json().catch(() => ({}));
+			throw new NuniApiError(data.message ?? "Couldn't attach the screenshot", data.code ?? "error");
+		}
+	}
 	async run(promise) {
 		try {
 			return await promise;
@@ -4387,6 +4744,26 @@ function colorFor(name) {
 	for (const ch of name) hash = hash * 31 + ch.charCodeAt(0) >>> 0;
 	return `oklch(0.62 0.17 ${hash % 360})`;
 }
+/** Copy text, falling back to execCommand where the async clipboard is off (plain http previews). */
+async function copyText(text) {
+	try {
+		await navigator.clipboard.writeText(text);
+		return true;
+	} catch {}
+	const area = document.createElement("textarea");
+	area.value = text;
+	area.setAttribute("readonly", "");
+	area.style.cssText = "position:fixed;top:0;left:0;opacity:0";
+	document.body.appendChild(area);
+	area.select();
+	try {
+		return document.execCommand("copy");
+	} catch {
+		return false;
+	} finally {
+		area.remove();
+	}
+}
 //#endregion
 //#region src/icons.ts
 const s = (d) => `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${d}</svg>`;
@@ -4399,6 +4776,7 @@ const ICONS = {
 	trash: s("<path d=\"M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6\"/>"),
 	edit: s("<path d=\"M12 20h9\"/><path d=\"M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z\"/>"),
 	send: s("<path d=\"m22 2-7 20-4-9-9-4z\"/><path d=\"M22 2 11 13\"/>"),
+	bot: s("<path d=\"M12 8V4H8\"/><rect width=\"16\" height=\"12\" x=\"4\" y=\"8\" rx=\"2\"/><path d=\"M2 14h2M20 14h2M15 13v2M9 13v2\"/>"),
 	target: s("<circle cx=\"12\" cy=\"12\" r=\"9\"/><circle cx=\"12\" cy=\"12\" r=\"3\"/>"),
 	github: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M12 .5a11.5 11.5 0 0 0-3.6 22.4c.6.1.8-.3.8-.6v-2c-3.2.7-3.9-1.5-3.9-1.5-.5-1.3-1.3-1.7-1.3-1.7-1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1 1.8 2.8 1.3 3.5 1 .1-.8.4-1.3.7-1.6-2.6-.3-5.3-1.3-5.3-5.7 0-1.3.5-2.3 1.2-3.1-.1-.3-.5-1.5.1-3.1 0 0 1-.3 3.2 1.2a11 11 0 0 1 5.8 0c2.2-1.5 3.2-1.2 3.2-1.2.6 1.6.2 2.8.1 3.1.8.8 1.2 1.9 1.2 3.1 0 4.4-2.7 5.4-5.3 5.7.4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6A11.5 11.5 0 0 0 12 .5z"/></svg>`,
 	link: s("<path d=\"M15 3h6v6M10 14 21 3M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"/>")
@@ -4632,6 +5010,7 @@ const STYLES = `
   font-size: 14px;
   line-height: 1.45;
   -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 @media (prefers-color-scheme: dark) {
   :host {
@@ -4809,6 +5188,26 @@ button { cursor: pointer; }
 }
 .badge-ok { background: rgba(31,157,85,0.14); color: var(--n-ok); }
 .comment-body { white-space: pre-wrap; word-break: break-word; }
+.shot {
+  display: block;
+  border: 1px solid var(--n-border);
+  border-radius: 8px;
+  overflow: hidden;
+  background: var(--n-bg-subtle);
+}
+.shot img { display: block; width: 100%; max-height: 160px; object-fit: cover; object-position: top; }
+.shot-preview { display: grid; gap: 4px; }
+.shot-preview img {
+  display: block;
+  width: 100%;
+  max-height: 200px;
+  /* The whole image, so the commenter sees everything that is attached. */
+  object-fit: contain;
+  border: 1px solid var(--n-border);
+  border-radius: 8px;
+  background: var(--n-bg-subtle);
+}
+.shot-note { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--n-fg-muted); }
 .field {
   width: 100%;
   padding: 8px 10px;
@@ -4940,6 +5339,14 @@ function isTypingTarget(target) {
 	if (!(target instanceof HTMLElement)) return false;
 	return target.isContentEditable || target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.tagName === "SELECT";
 }
+function dataUrl(blob) {
+	return new Promise((resolve, reject) => {
+		const reader = new FileReader();
+		reader.onload = () => resolve(String(reader.result));
+		reader.onerror = () => reject(reader.error);
+		reader.readAsDataURL(blob);
+	});
+}
 function describeElement(el) {
 	const tag = el.tagName.toLowerCase();
 	const id = el.id ? `#${el.id}` : "";
@@ -4948,8 +5355,9 @@ function describeElement(el) {
 	return `${tag}${id}${cls}${text ? ` "${text}"` : ""}`;
 }
 var NuniWidget = class {
-	constructor(config) {
+	constructor(config, runtime) {
 		this.config = config;
+		this.runtime = runtime;
 		_defineProperty(this, "host", void 0);
 		_defineProperty(this, "root", void 0);
 		_defineProperty(this, "pinLayer", void 0);
@@ -4981,6 +5389,10 @@ var NuniWidget = class {
 		_defineProperty(this, "ownerName", null);
 		_defineProperty(this, "deepLinkId", null);
 		_defineProperty(this, "extraComment", null);
+		_defineProperty(this, "ownerDetail", null);
+		_defineProperty(this, "ownerDetailId", null);
+		_defineProperty(this, "ownerDetailLoaded", false);
+		_defineProperty(this, "ownerDetailUnsub", null);
 		_defineProperty(this, "layoutFrame", 0);
 		_defineProperty(this, "pinPositions", /* @__PURE__ */ new Map());
 		_defineProperty(this, "resolveTimer", 0);
@@ -5016,15 +5428,20 @@ var NuniWidget = class {
 				y: e.clientY
 			}, { ignoreAttributePrefixes: [] });
 			this.setPicking(false);
+			const draft = {
+				anchor,
+				element
+			};
+			if (this.config.capture.dom) try {
+				draft.dom = domContext(element);
+			} catch {}
 			this.card = {
 				kind: "composer",
-				draft: {
-					anchor,
-					element
-				}
+				draft
 			};
 			this.render();
 			this.focusComposer();
+			this.takeScreenshot(draft);
 		});
 		let secret = read(KEYS.secret);
 		if (!secret) {
@@ -5112,6 +5529,7 @@ var NuniWidget = class {
 		this.setPicking(false);
 		this.pageUnsub?.();
 		this.sessionUnsub?.();
+		this.ownerDetailUnsub?.();
 		for (const cleanup of this.cleanups) cleanup();
 		cancelAnimationFrame(this.layoutFrame);
 		clearTimeout(this.resolveTimer);
@@ -5159,6 +5577,24 @@ var NuniWidget = class {
 			this.render();
 		});
 	}
+	/** Keep the owner-only details of the open thread subscribed. */
+	syncOwnerDetail() {
+		const token = this.ownerToken;
+		const id = this.card?.kind === "thread" && this.isOwner && token ? this.card.id : null;
+		if (id === this.ownerDetailId) return;
+		this.ownerDetailUnsub?.();
+		this.ownerDetailUnsub = null;
+		this.ownerDetail = null;
+		this.ownerDetailLoaded = false;
+		this.ownerDetailId = id;
+		if (!id || !token) return;
+		this.ownerDetailUnsub = this.api.onOwnerComment(id, token, (comment) => {
+			if (this.ownerDetailId !== id) return;
+			this.ownerDetail = comment;
+			this.ownerDetailLoaded = true;
+			this.render();
+		});
+	}
 	get isOwner() {
 		return Boolean(this.ownerToken && this.ownerName);
 	}
@@ -5286,6 +5722,50 @@ var NuniWidget = class {
 		const target = e.target;
 		return target instanceof Element ? target : null;
 	}
+	/** Capture while the person types, so posting stays instant. */
+	async takeScreenshot(draft) {
+		const load = this.runtime.loadScreenshot;
+		if (!load) return;
+		const accent = getComputedStyle(this.host).getPropertyValue("--n-accent").trim() || "#d6246e";
+		try {
+			await new Promise((resolve) => setTimeout(resolve, 60));
+			const capture = await load();
+			const blob = capture ? await capture(draft.element, {
+				exclude: this.host,
+				accent
+			}) : null;
+			if (!blob || !this.isComposing(draft) || draft.sending) return;
+			const preview = await dataUrl(blob);
+			if (!this.isComposing(draft) || draft.sending) return;
+			draft.screenshot = {
+				blob,
+				preview
+			};
+			this.render();
+		} catch {}
+	}
+	isComposing(draft) {
+		return this.card?.kind === "composer" && this.card.draft === draft;
+	}
+	collectContext(draft) {
+		const { collectors } = this.runtime;
+		const context = {};
+		const logs = collectors.console();
+		const failed = collectors.network();
+		if (logs.length) context.console = logs;
+		if (failed.length) context.network = failed;
+		if (draft.dom) context.dom = draft.dom;
+		return Object.keys(context).length ? context : void 0;
+	}
+	async attachScreenshot(id, image) {
+		try {
+			await this.api.uploadScreenshot(id, this.secret, image);
+		} catch {}
+	}
+	copyForAgent(comment) {
+		const detail = this.ownerDetail?._id === comment._id ? this.ownerDetail : null;
+		copyText(buildCommentPrompt(detail ?? comment, { includeContext: Boolean(detail) })).then((ok) => this.showToast(ok ? "Copied for your coding agent" : "Couldn't copy"));
+	}
 	renderHighlight() {
 		this.overlayLayer.replaceChildren();
 		if (!this.picking) return;
@@ -5397,6 +5877,7 @@ var NuniWidget = class {
 		draft.error = void 0;
 		this.render();
 		const loc = describeLocation(location.href);
+		const shot = draft.screenshot;
 		try {
 			const id = await this.api.createComment({
 				body: cleanBody,
@@ -5412,8 +5893,10 @@ var NuniWidget = class {
 					w: window.innerWidth,
 					h: window.innerHeight,
 					dpr: window.devicePixelRatio || 1
-				}
+				},
+				context: this.collectContext(draft)
 			});
+			if (shot) this.attachScreenshot(id, shot.blob);
 			this.placements.set(id, {
 				element: draft.element,
 				confidence: "exact"
@@ -5504,6 +5987,7 @@ var NuniWidget = class {
 		this.render();
 	}
 	render() {
+		this.syncOwnerDetail();
 		this.renderPins();
 		this.renderUi();
 		this.renderHighlight();
@@ -5735,7 +6219,17 @@ var NuniWidget = class {
 					this.name = "";
 					this.render();
 				}
-			}, "Not you?")), textarea, draft.error ? h("div", {
+			}, "Not you?")), textarea, draft.screenshot ? h("div", { class: "shot-preview" }, h("img", {
+				src: draft.screenshot.preview,
+				alt: "Screenshot that will be attached"
+			}), h("div", { class: "shot-note" }, h("span", {}, "Screenshot attached. Only the site owner sees it."), h("span", { class: "spacer" }), h("button", {
+				class: "link",
+				type: "button",
+				onclick: () => {
+					draft.screenshot = void 0;
+					this.render();
+				}
+			}, "Remove"))) : null, draft.error ? h("div", {
 				class: "error",
 				role: "alert"
 			}, draft.error) : null, h("div", { class: "row" }, h("span", { class: "kbd" }, "⌘ + Enter"), h("span", { class: "spacer" }), h("button", {
@@ -5783,7 +6277,16 @@ var NuniWidget = class {
 			type: "button",
 			"aria-label": "Close",
 			onclick: () => this.closeCard()
-		}, icon(ICONS.close))), h("div", { class: "comment-body" }, comment.body), h("div", { class: "row" }, comment.status === "resolved" ? h("span", { class: "badge badge-ok" }, icon(ICONS.check), "Resolved") : null, comment.page.origin !== location.origin ? h("span", {
+		}, icon(ICONS.close))), h("div", { class: "comment-body" }, comment.body), this.ownerDetail?._id === comment._id && this.ownerDetail.screenshotUrl ? h("a", {
+			class: "shot",
+			href: this.ownerDetail.screenshotUrl,
+			target: "_blank",
+			rel: "noreferrer",
+			title: "Open the screenshot"
+		}, h("img", {
+			src: this.ownerDetail.screenshotUrl,
+			alt: "Screenshot taken when the comment was left"
+		})) : null, h("div", { class: "row" }, comment.status === "resolved" ? h("span", { class: "badge badge-ok" }, icon(ICONS.check), "Resolved") : null, comment.page.origin !== location.origin ? h("span", {
 			class: "badge",
 			title: `Left on ${comment.page.origin}`
 		}, new URL(comment.page.origin).host) : null, placement?.confidence === "low" ? h("span", {
@@ -5810,6 +6313,15 @@ var NuniWidget = class {
 				onclick: () => this.reopenComment(comment)
 			}, icon(ICONS.undo), "Reopen"));
 			actions.push(h("span", { class: "spacer" }));
+			const contextPending = owner && !(this.ownerDetailLoaded && this.ownerDetailId === comment._id);
+			actions.push(h("button", {
+				class: "btn btn-ghost btn-icon",
+				type: "button",
+				"aria-label": "Copy for agent",
+				title: contextPending ? "Loading page context…" : "Copy for your coding agent",
+				disabled: contextPending,
+				onclick: () => this.copyForAgent(comment)
+			}, icon(ICONS.bot)));
 			if (mine) actions.push(h("button", {
 				class: "btn btn-ghost btn-icon",
 				type: "button",
@@ -5834,7 +6346,7 @@ var NuniWidget = class {
 			"data-card": "thread",
 			role: "dialog",
 			"aria-label": `Comment by ${comment.authorName}`
-		}, body, actions.length > 1 || owner ? h("div", { class: "actions" }, ...actions) : null);
+		}, body, actions.length ? h("div", { class: "actions" }, ...actions) : null);
 	}
 	positionCard() {
 		const el = this.uiLayer.querySelector("[data-card]");
@@ -5877,19 +6389,31 @@ var NuniWidget = class {
 	}
 };
 //#endregion
-//#region src/index.ts
+//#region src/mount.ts
+/** Nuni's own requests are not the page's problem. */
+function isNuniUrl(config) {
+	const origins = [config.convexUrl, config.convexSiteUrl].flatMap((url) => {
+		try {
+			return [new URL(url).origin];
+		} catch {
+			return [];
+		}
+	});
+	return (url) => {
+		try {
+			return origins.includes(new URL(url, location.href).origin);
+		} catch {
+			return false;
+		}
+	};
+}
 let active = null;
-/**
-* Mount Nuni on the page. Call once on the client. Calling it again with the
-* same project shares the mounted widget; it is removed when every handle is
-* destroyed. A different project replaces it. Each handle only ever tears
-* down the widget it was created for.
-*/
-function init(options) {
+/** The shared implementation of `init` for both builds (see index.ts). */
+function mount(options, runtime) {
 	const noop = { destroy() {} };
 	if (typeof window === "undefined" || typeof document === "undefined") return noop;
 	if (!isProjectId(options.project)) {
-		console.warn(`[nuni] "${options.project}" is not a valid project ID. Run \`npx @nuniapp/cli init\` to get one.`);
+		console.warn(`[nuni] "${options.project}" is not a valid project ID. Run \`npx @nuniapp/cli@latest init\` to get one.`);
 		return noop;
 	}
 	if (active?.project === options.project) return handleFor(active);
@@ -5898,22 +6422,26 @@ function init(options) {
 	const state = {
 		project: options.project,
 		widget: null,
+		collectors: startCollectors(config.capture, isNuniUrl(config)),
 		timer: 0,
 		handles: 0
 	};
 	active = state;
-	const mount = () => {
+	const start = () => {
 		if (active !== state) return;
 		if (!document.body) {
-			state.timer = window.setTimeout(mount, 50);
+			state.timer = window.setTimeout(start, 50);
 			return;
 		}
-		state.widget = new NuniWidget(config);
+		state.widget = new NuniWidget(config, {
+			collectors: state.collectors,
+			loadScreenshot: config.capture.screenshot ? runtime.loadScreenshot : null
+		});
 		state.widget.start();
 	};
 	const idle = window.requestIdleCallback;
-	if (idle) idle(mount, { timeout: 1500 });
-	else state.timer = window.setTimeout(mount, 1);
+	if (idle) idle(start, { timeout: 1500 });
+	else state.timer = window.setTimeout(start, 1);
 	return handleFor(state);
 }
 function handleFor(state) {
@@ -5930,7 +6458,19 @@ function unmount(state) {
 	clearTimeout(state.timer);
 	state.widget?.destroy();
 	state.widget = null;
+	state.collectors.stop();
 	if (active === state) active = null;
 }
 //#endregion
+//#region src/index.ts
+/**
+* Mount Nuni on the page. Call once on the client. Calling it again with the
+* same project shares the mounted widget; it is removed when every handle is
+* destroyed. A different project replaces it. Each handle only ever tears
+* down the widget it was created for.
+*/
+function init(options) {
+	return mount(options, { loadScreenshot: () => import("./screenshot-B2x2-nI_.js").then((m) => m.captureScreenshot) });
+}
+//#endregion
 export { VERSION, init };