@nuniapp/widget 0.1.10 → 0.1.11

package/dist/index.d.ts

@@ -49,6 +49,11 @@ declare const EN: {
   yourName: string;
   leaveComment: string;
   notYou: string;
+  signIn: string;
+  signInGithub: string;
+  signOut: string;
+  signedInAs: string;
+  signedInGithub: string;
   cancel: string;
   post: string;
   posting: string;
@@ -122,6 +127,8 @@ declare const EN: {
   copied: string;
   copyFailed: string;
   signedIn: string;
+  commenterSignedIn: string;
+  signedOut: string;
   linkGone: string;
   enterName: string;
   writeFirst: string;

package/dist/index.js

@@ -176,7 +176,7 @@ function buildCommentPrompt(comment, options = {}) {
 }
 //#endregion
 //#region src/config.ts
-const VERSION = "0.1.10";
+const VERSION = "0.1.11";
 function resolveConfig(options) {
 	return {
 		project: options.project,
@@ -5285,10 +5285,10 @@ var NuniApi = class {
 		}, (comments) => cb(comments), onError);
 	}
 	/** The visitor's own comments on every page, live. */
-	onMine(authorSecret, cb) {
+	onMine(author, cb) {
 		return this.client.onUpdate(api.comments.listMine, {
 			publicId: this.config.project,
-			authorSecret
+			...author
 		}, (comments) => cb(comments), () => {});
 	}
 	onPages(cb) {
@@ -5300,6 +5300,24 @@ var NuniApi = class {
 			sessionToken
 		}, cb, () => {});
 	}
+	/** Who a stored commenter sign-in belongs to, live (invalid once revoked). */
+	onCommenter(commenterToken, cb) {
+		return this.client.onUpdate(api.commenters.validate, {
+			publicId: this.config.project,
+			commenterToken
+		}, cb, () => {});
+	}
+	/** Right after signing in: this browser's guest comments become the account's. */
+	linkBrowser(authorSecret, commenterToken) {
+		return this.run(this.client.mutation(api.commenters.linkBrowser, {
+			publicId: this.config.project,
+			authorSecret,
+			commenterToken
+		}));
+	}
+	signOutCommenter(commenterToken) {
+		return this.client.mutation(api.commenters.signOut, { commenterToken }).catch(() => null);
+	}
 	/** A comment with the owner-only context (screenshot, console, DOM). */
 	onOwnerComment(id, sessionToken, cb) {
 		return this.client.onUpdate(api.comments.getForOwner, {
@@ -5360,21 +5378,22 @@ var NuniApi = class {
 		return data.id;
 	}
 	/** Attach the element's screenshot (for the owner) to a just-posted comment. */
-	uploadScreenshot(id, authorSecret, image) {
-		return this.upload("screenshot", id, authorSecret, image);
+	uploadScreenshot(id, author, image) {
+		return this.upload("screenshot", id, author, image);
 	}
 	/** An image for everyone: picked, pasted or a marked-up screenshot. */
-	uploadImage(id, authorSecret, image) {
-		return this.upload("image", id, authorSecret, image);
+	uploadImage(id, author, image) {
+		return this.upload("image", id, author, image);
 	}
-	async upload(kind, id, authorSecret, image) {
+	async upload(kind, id, author, image) {
 		const response = await fetch(`${this.config.convexSiteUrl}/widget/${kind}`, {
 			method: "POST",
 			headers: {
 				"Content-Type": image.type,
 				"X-Nuni-Project": this.config.project,
 				"X-Nuni-Comment": id,
-				"X-Nuni-Author": authorSecret
+				"X-Nuni-Author": author.authorSecret,
+				...author.commenterToken ? { "X-Nuni-Commenter": author.commenterToken } : {}
 			},
 			body: image
 		});
@@ -5390,18 +5409,18 @@ var NuniApi = class {
 			throw new NuniApiError(errorMessage(error), "error");
 		}
 	}
-	editOwn(id, authorSecret, body, suggestion) {
+	editOwn(id, author, body, suggestion) {
 		return this.run(this.client.mutation(api.comments.editOwn, {
 			id,
-			authorSecret,
+			...author,
 			body,
 			suggestion
 		}));
 	}
-	deleteOwn(id, authorSecret) {
+	deleteOwn(id, author) {
 		return this.run(this.client.mutation(api.comments.deleteOwn, {
 			id,
-			authorSecret
+			...author
 		}));
 	}
 	resolve(id, sessionToken, resolution) {
@@ -5444,17 +5463,17 @@ var NuniApi = class {
 			sessionToken
 		}));
 	}
-	editReply(id, authorSecret, body) {
+	editReply(id, author, body) {
 		return this.run(this.client.mutation(api.replies.editOwn, {
 			id,
-			authorSecret,
+			...author,
 			body
 		}));
 	}
-	deleteReply(id, authorSecret) {
+	deleteReply(id, author) {
 		return this.run(this.client.mutation(api.replies.deleteOwn, {
 			id,
-			authorSecret
+			...author
 		}));
 	}
 	removeReply(id, sessionToken) {
@@ -5463,13 +5482,13 @@ var NuniApi = class {
 			sessionToken
 		}));
 	}
-	toggleReaction(commentId, targetId, emoji, authorSecret) {
+	toggleReaction(commentId, targetId, emoji, author) {
 		return this.run(this.client.mutation(api.reactions.toggle, {
 			publicId: this.config.project,
 			commentId,
 			targetId,
 			emoji,
-			authorSecret
+			...author
 		}));
 	}
 	remove(id, sessionToken) {
@@ -5531,6 +5550,11 @@ const EN = {
 	yourName: "Your name",
 	leaveComment: "Leave a comment",
 	notYou: "Not you?",
+	signIn: "Sign in",
+	signInGithub: "Sign in with GitHub to comment as yourself",
+	signOut: "Sign out",
+	signedInAs: "Signed in as {name}",
+	signedInGithub: "Signed in with GitHub",
 	cancel: "Cancel",
 	post: "Post",
 	posting: "Posting…",
@@ -5604,6 +5628,8 @@ const EN = {
 	copied: "Copied for your coding agent",
 	copyFailed: "Couldn't copy",
 	signedIn: "You're signed in as the owner",
+	commenterSignedIn: "You're signed in",
+	signedOut: "Signed out",
 	linkGone: "That comment was deleted or is on another page",
 	enterName: "Enter your name",
 	writeFirst: "Write a comment first",
@@ -5947,6 +5973,8 @@ const KEYS = {
 	name: "nuni:name",
 	secret: "nuni:author-secret",
 	session: (project) => `nuni:session:${project}`,
+	/** A visitor's sign-in to comment under their account. */
+	commenter: (project) => `nuni:commenter:${project}`,
 	/** Where this visitor dragged the toolbar. */
 	position: (project) => `nuni:position:${project}`,
 	/** The comment this visitor opened last, marked in the panel. */
@@ -6281,6 +6309,10 @@ button { cursor: pointer; }
   justify-content: center;
   flex: none;
 }
+.avatar { position: relative; overflow: hidden; }
+.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
+.signed-in { display: inline-flex; flex: none; color: var(--n-fg-muted); }
+.signed-in .icon { width: 13px; height: 13px; }
 .author { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .meta { color: var(--n-fg-muted); font-size: 12px; white-space: nowrap; }
 .badge {
@@ -6509,6 +6541,10 @@ textarea.field { resize: vertical; min-height: 72px; max-height: 240px; }
   white-space: nowrap;
 }
 .cmp-link:hover { color: var(--n-fg); }
+.cmp-head-guest { padding-right: 116px; }
+.cmp-sign-in { position: absolute; top: 13px; right: 44px; height: 32px; display: inline-flex; align-items: center; gap: 4px; }
+.cmp-sign-in .icon { width: 13px; height: 13px; }
+.signed-in-as { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
 .composer .quote, .composer .suggest { margin: 6px 14px 0; }
 .suggest {
   display: grid;
@@ -6830,11 +6866,23 @@ function isTypingTarget(target) {
 	const el = target;
 	return el.isContentEditable || el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.tagName === "SELECT";
 }
-function avatar(name) {
-	return h("span", {
+/** Initials, under the account photo of an author who signed in. */
+function avatar(name, photo) {
+	const el = h("span", {
 		class: "avatar",
 		style: `background:${colorFor(name)}`
 	}, initials(name));
+	if (photo?.startsWith("https://")) {
+		const img = h("img", {
+			src: photo,
+			alt: "",
+			loading: "lazy",
+			referrerpolicy: "no-referrer",
+			onerror: () => img.remove()
+		});
+		el.append(img);
+	}
+	return el;
 }
 function describeElement(el) {
 	const tag = el.tagName.toLowerCase();
@@ -6913,6 +6961,10 @@ var NuniWidget = class {
 		_defineProperty(this, "secretHash", "");
 		_defineProperty(this, "ownerToken", void 0);
 		_defineProperty(this, "ownerName", null);
+		_defineProperty(this, "commenterToken", void 0);
+		_defineProperty(this, "commenter", null);
+		_defineProperty(this, "commenterUnsub", null);
+		_defineProperty(this, "mineToken", null);
 		_defineProperty(this, "deepLinkId", null);
 		_defineProperty(this, "extraComment", null);
 		_defineProperty(this, "ownerDetail", null);
@@ -7023,6 +7075,7 @@ var NuniWidget = class {
 		}
 		this.secret = secret;
 		this.ownerToken = read(KEYS.session(config.project));
+		this.commenterToken = read(KEYS.commenter(config.project));
 		this.lastViewedId = read(KEYS.lastViewed(config.project));
 		this.position = oneOf(read(KEYS.position(config.project)) ?? void 0, POSITIONS, config.position);
 		this.host = document.createElement("div");
@@ -7100,6 +7153,7 @@ var NuniWidget = class {
 			this.render();
 		}));
 		if (this.ownerToken) this.watchSession(this.ownerToken);
+		if (this.commenterToken) this.watchCommenter(this.commenterToken);
 		this.readDeepLink();
 		this.subscribePage();
 		this.cleanups.push(onLocationChange(() => {
@@ -7172,6 +7226,7 @@ var NuniWidget = class {
 		this.endToolbarDrag?.();
 		this.pageUnsub?.();
 		this.sessionUnsub?.();
+		this.commenterUnsub?.();
 		this.ownerDetailUnsub?.();
 		this.threadUnsub?.();
 		this.mineUnsub?.();
@@ -7228,6 +7283,62 @@ var NuniWidget = class {
 			this.render();
 		});
 	}
+	watchCommenter(token) {
+		this.commenterUnsub?.();
+		this.commenterUnsub = this.api.onCommenter(token, (result) => {
+			if (this.commenterToken !== token) return;
+			if (result.valid) {
+				const { name, avatarUrl, authorKey } = result;
+				this.commenter = {
+					name,
+					avatarUrl,
+					authorKey
+				};
+			} else this.forgetCommenter();
+			this.render();
+		});
+	}
+	/** Back to commenting as a guest in this browser. */
+	forgetCommenter() {
+		this.commenterUnsub?.();
+		this.commenterUnsub = null;
+		this.commenterToken = null;
+		this.commenter = null;
+		write(KEYS.commenter(this.config.project), null);
+		this.syncMine();
+	}
+	/** Who is writing, for every comment, reply, reaction and upload. */
+	get author() {
+		return {
+			authorSecret: this.secret,
+			commenterToken: this.commenterToken ?? void 0
+		};
+	}
+	/** The name new comments go out under. */
+	get displayName() {
+		return this.commenter?.name ?? this.name;
+	}
+	/** The key on what this visitor writes now. */
+	get authorKey() {
+		return this.commenter?.authorKey ?? this.secretHash;
+	}
+	/** Signed in or not, this browser's own guest comments stay editable. */
+	ownsKey(key) {
+		return Boolean(key) && (key === this.secretHash || key === this.commenter?.authorKey);
+	}
+	/** An author's photo and name, marked when they wrote it signed in. */
+	authorLine(row) {
+		return [
+			avatar(row.authorName, row.signedIn ? row.avatarUrl : void 0),
+			h("span", { class: "author" }, row.authorName),
+			row.signedIn ? h("span", {
+				class: "signed-in",
+				role: "img",
+				"aria-label": this.t("signedInGithub"),
+				title: this.t("signedInGithub")
+			}, icon(ICONS.github)) : null
+		];
+	}
 	/** Keep the owner-only details of the open thread subscribed. */
 	syncOwnerDetail() {
 		const token = this.ownerToken;
@@ -7265,7 +7376,7 @@ var NuniWidget = class {
 		return Boolean(this.ownerToken && this.ownerName);
 	}
 	isMine(comment) {
-		return Boolean(this.secretHash) && comment.authorKeyHash === this.secretHash;
+		return this.ownsKey(comment.authorKeyHash);
 	}
 	visibleComments() {
 		return this.comments.filter((c) => c.status === (this.panelOpen && this.tab === "resolved" ? "resolved" : "open") || this.card?.kind === "thread" && this.card.id === c._id);
@@ -7692,7 +7803,7 @@ var NuniWidget = class {
 	async attachScreenshot(id, shot) {
 		try {
 			const image = await shot;
-			if (image) await this.api.uploadScreenshot(id, this.secret, image);
+			if (image) await this.api.uploadScreenshot(id, this.author, image);
 		} catch {}
 	}
 	/** One after another, so they keep their order. */
@@ -7700,7 +7811,7 @@ var NuniWidget = class {
 		const images = draft.images ?? [];
 		revokeImages(draft);
 		try {
-			for (const image of images) await this.api.uploadImage(id, this.secret, image.blob);
+			for (const image of images) await this.api.uploadImage(id, this.author, image.blob);
 		} catch (error) {
 			this.showToast(error instanceof NuniApiError ? error.message : this.t("imageFailed"));
 		}
@@ -7983,6 +8094,29 @@ var NuniWidget = class {
 		url.searchParams.set("origin", location.origin);
 		if (!window.open(url.toString(), "nuni-claim", "popup,width=480,height=680")) location.href = url.toString();
 	}
+	/** Sign in to comment under an account, in a popup on the dashboard. */
+	openCommenterSignIn() {
+		const url = new URL(`${this.config.appUrl}/dashboard/comment-sign-in`);
+		url.searchParams.set("project", this.config.project);
+		url.searchParams.set("origin", location.origin);
+		if (!window.open(url.toString(), "nuni-comment-sign-in", "popup,width=480,height=680")) location.href = url.toString();
+	}
+	async onCommenterSignedIn(token) {
+		this.commenterToken = token;
+		write(KEYS.commenter(this.config.project), token);
+		await this.api.linkBrowser(this.secret, token).catch(() => null);
+		if (this.commenterToken !== token) return;
+		this.watchCommenter(token);
+		this.syncMine();
+		this.showToast(this.t("commenterSignedIn"));
+	}
+	signOutCommenter() {
+		const token = this.commenterToken;
+		if (!token) return;
+		this.forgetCommenter();
+		this.api.signOutCommenter(token);
+		this.showToast(this.t("signedOut"));
+	}
 	onMessage(e) {
 		let appOrigin;
 		try {
@@ -7992,7 +8126,12 @@ var NuniWidget = class {
 		}
 		if (e.origin !== appOrigin) return;
 		const data = e.data;
-		if (!data || data.type !== "nuni:session" || data.project !== this.config.project) return;
+		if (!data || data.project !== this.config.project) return;
+		if (data.type === "nuni:commenter" && typeof data.token === "string" && data.token.startsWith("nuni_c_")) {
+			this.onCommenterSignedIn(data.token);
+			return;
+		}
+		if (data.type !== "nuni:session") return;
 		if (typeof data.token !== "string" || !data.token.startsWith("nuni_s_")) return;
 		this.ownerToken = data.token;
 		write(KEYS.session(this.config.project), data.token);
@@ -8040,7 +8179,8 @@ var NuniWidget = class {
 		setTimeout(() => this.scheduleLayout(), 400);
 	}
 	async submitDraft(draft, body, name) {
-		const cleanName = name.trim().slice(0, LIMITS.nameMaxLength);
+		const signedIn = Boolean(this.commenter);
+		const cleanName = (this.commenter?.name ?? name).trim().slice(0, LIMITS.nameMaxLength);
 		const cleanBody = body.trim();
 		if (!cleanName) return this.setDraftError(draft, this.t("enterName"));
 		const before = draft.suggesting ? draft.suggestFrom : null;
@@ -8053,8 +8193,10 @@ var NuniWidget = class {
 		} : void 0;
 		if (!cleanBody && !suggestion) return this.setDraftError(draft, this.t("writeFirst"));
 		if (cleanBody.length > LIMITS.bodyMaxLength) return this.setDraftError(draft, this.t("commentTooLong", { count: LIMITS.bodyMaxLength }));
-		this.name = cleanName;
-		write(KEYS.name, cleanName);
+		if (!signedIn) {
+			this.name = cleanName;
+			write(KEYS.name, cleanName);
+		}
 		draft.sending = true;
 		draft.error = void 0;
 		this.render();
@@ -8065,7 +8207,7 @@ var NuniWidget = class {
 				body: cleanBody,
 				suggestion,
 				authorName: cleanName,
-				authorSecret: this.secret,
+				...this.author,
 				page: {
 					...loc,
 					path: this.pageKey,
@@ -8174,7 +8316,7 @@ var NuniWidget = class {
 	async deleteComment(c) {
 		if (!await this.ask(this.t("confirmDeleteComment"), this.t("delete"))) return;
 		const token = this.ownerToken;
-		const action = this.isMine(c) ? () => this.api.deleteOwn(c._id, this.secret) : token ? () => this.api.remove(c._id, token) : null;
+		const action = this.isMine(c) ? () => this.api.deleteOwn(c._id, this.author) : token ? () => this.api.remove(c._id, token) : null;
 		if (!action) return;
 		this.act(c._id, action, this.t("deleted")).then((ok) => {
 			if (!ok) return;
@@ -8185,12 +8327,12 @@ var NuniWidget = class {
 		});
 	}
 	isMyReply(reply) {
-		return Boolean(this.secretHash) && reply.authorKeyHash === this.secretHash;
+		return this.ownsKey(reply.authorKeyHash);
 	}
 	async sendReply(comment, body, name) {
 		const card = this.card;
 		if (card?.kind !== "thread" || card.id !== comment._id) return;
-		const authorName = (this.isOwner ? this.ownerName : name)?.trim().slice(0, LIMITS.nameMaxLength);
+		const authorName = (this.isOwner ? this.ownerName : this.commenter?.name ?? name)?.trim().slice(0, LIMITS.nameMaxLength);
 		const clean = body.trim();
 		if (!clean) return;
 		if (!authorName) {
@@ -8203,7 +8345,7 @@ var NuniWidget = class {
 			this.render();
 			return;
 		}
-		if (!this.isOwner) {
+		if (!this.isOwner && !this.commenter) {
 			this.name = authorName;
 			write(KEYS.name, authorName);
 		}
@@ -8215,7 +8357,7 @@ var NuniWidget = class {
 				commentId: comment._id,
 				body: clean,
 				authorName,
-				authorSecret: this.secret,
+				...this.author,
 				sessionToken: this.ownerToken ?? void 0
 			});
 			const box = this.uiLayer.querySelector("[data-focus-key=\"reply\"]");
@@ -8227,7 +8369,7 @@ var NuniWidget = class {
 		this.render();
 	}
 	toggleReaction(comment, targetId, emoji) {
-		this.api.toggleReaction(comment._id, targetId, emoji, this.secret).catch((error) => {
+		this.api.toggleReaction(comment._id, targetId, emoji, this.author).catch((error) => {
 			if (this.card?.kind === "thread" && this.card.id === comment._id) {
 				this.card.error = error instanceof Error ? error.message : this.t("reactFailed");
 				this.render();
@@ -8237,11 +8379,11 @@ var NuniWidget = class {
 	async deleteReply(comment, reply) {
 		if (!await this.ask(this.t("confirmDeleteReply"), this.t("delete"))) return;
 		const token = this.ownerToken;
-		const action = this.isMyReply(reply) ? () => this.api.deleteReply(reply._id, this.secret) : token ? () => this.api.removeReply(reply._id, token) : null;
+		const action = this.isMyReply(reply) ? () => this.api.deleteReply(reply._id, this.author) : token ? () => this.api.removeReply(reply._id, token) : null;
 		if (action) this.act(comment._id, action, this.t("replyDeleted"));
 	}
 	saveReplyEdit(comment, reply, body) {
-		this.act(comment._id, () => this.api.editReply(reply._id, this.secret, body), this.t("saved")).then((ok) => {
+		this.act(comment._id, () => this.api.editReply(reply._id, this.author, body), this.t("saved")).then((ok) => {
 			if (ok && this.card?.kind === "thread") {
 				this.card.replyEditing = void 0;
 				this.render();
@@ -8249,7 +8391,7 @@ var NuniWidget = class {
 		});
 	}
 	saveEdit(c, body, suggestion) {
-		this.act(c._id, () => this.api.editOwn(c._id, this.secret, body, suggestion), this.t("saved"));
+		this.act(c._id, () => this.api.editOwn(c._id, this.author, body, suggestion), this.t("saved"));
 	}
 	/** For the owner: the suggested words, ready to paste into the code. */
 	copyNewTextButton(text) {
@@ -8268,13 +8410,22 @@ var NuniWidget = class {
 		}, 2400);
 		this.render();
 	}
-	togglePanel(open = !this.panelOpen) {
-		if (open === this.panelOpen) return;
-		this.panelOpen = open;
-		if (open && !this.mineUnsub) this.mineUnsub = this.api.onMine(this.secret, (mine) => {
+	/** Keep Yours subscribed with the current sign-in, once the panel opened. */
+	syncMine() {
+		if (!this.mineUnsub && !this.panelOpen) return;
+		if (this.mineUnsub && this.mineToken === this.commenterToken) return;
+		this.mineUnsub?.();
+		this.mine = null;
+		this.mineToken = this.commenterToken;
+		this.mineUnsub = this.api.onMine(this.author, (mine) => {
 			this.mine = mine;
 			this.render();
 		});
+	}
+	togglePanel(open = !this.panelOpen) {
+		if (open === this.panelOpen) return;
+		this.panelOpen = open;
+		if (open) this.syncMine();
 		if (open) {
 			this.keepFocus();
 			this.focusNext = ".panel [role=\"tab\"][aria-selected=\"true\"]";
@@ -8370,8 +8521,8 @@ var NuniWidget = class {
 			const pin = h("div", {
 				class: "pin pin-draft pin-pending",
 				"aria-hidden": "true"
-			}, this.name ? initials(this.name) : "+");
-			pin.style.background = this.name ? colorFor(this.name) : "var(--n-accent)";
+			}, this.displayName ? initials(this.displayName) : "+");
+			pin.style.background = this.displayName ? colorFor(this.displayName) : "var(--n-accent)";
 			pin.style.transform = `translate(${Math.round(x)}px, ${Math.round(y)}px)`;
 			this.pinLayer.append(pin);
 		}
@@ -8543,10 +8694,7 @@ var NuniWidget = class {
 			"aria-current": c._id === this.lastViewedId ? "true" : null,
 			"data-focus-key": `item-${c._id}`,
 			onclick: () => this.focusComment(c._id)
-		}, h("div", { class: "row" }, h("span", {
-			class: "avatar",
-			style: `background:${colorFor(c.authorName)}`
-		}, initials(c.authorName)), h("span", { class: "author" }, c.authorName), h("span", { class: "meta" }, this.i18n.timeAgo(c.createdAt) + (c.replyCount ? ` · ${this.t("replyCount", { count: c.replyCount })}` : "")), c.page.origin !== location.origin ? h("span", {
+		}, h("div", { class: "row" }, ...this.authorLine(c), h("span", { class: "meta" }, this.i18n.timeAgo(c.createdAt) + (c.replyCount ? ` · ${this.t("replyCount", { count: c.replyCount })}` : "")), c.page.origin !== location.origin ? h("span", {
 			class: "badge",
 			title: c.page.origin
 		}, new URL(c.page.origin).host) : null, c.resolution === "outdated" ? h("span", { class: "badge" }, this.t("outdated")) : null), ...content(c));
@@ -8633,17 +8781,25 @@ var NuniWidget = class {
 			id: "nuni-panel-list",
 			role: "tabpanel",
 			"aria-labelledby": `nuni-tab-${this.tab}`
-		}, ...children), this.status && !this.status.claimed && !this.isOwner ? this.renderPanelFooter() : null);
+		}, ...children), this.renderPanelFooter());
 	}
 	renderPanelFooter() {
-		return h("div", { class: "panel-foot" }, h("div", { class: "row" }, h("span", { class: "meta" }, this.t("ownSite")), h("span", { class: "spacer" }), h("button", {
+		const claimable = this.status && !this.status.claimed && !this.isOwner;
+		const commenter = this.commenter;
+		if (!claimable && !commenter) return null;
+		return h("div", { class: "panel-foot" }, commenter ? h("div", { class: "row" }, avatar(commenter.name, commenter.avatarUrl), h("span", { class: "meta signed-in-as" }, this.t("signedInAs", { name: commenter.name })), h("span", { class: "spacer" }), h("button", {
+			class: "cmp-link",
+			type: "button",
+			onclick: () => this.signOutCommenter()
+		}, this.t("signOut"))) : null, claimable ? h("div", { class: "row" }, h("span", { class: "meta" }, this.t("ownSite")), h("span", { class: "spacer" }), h("button", {
 			class: "btn",
 			type: "button",
 			onclick: () => this.openClaim()
-		}, icon(ICONS.github), this.t("claim"))));
+		}, icon(ICONS.github), this.t("claim"))) : null);
 	}
 	renderComposer(draft, cls) {
-		const needsName = !this.name;
+		const commenter = this.commenter;
+		const needsName = !commenter && !this.name;
 		const avatar = h("span", {
 			class: "avatar cmp-avatar",
 			"aria-hidden": "true"
@@ -8769,7 +8925,15 @@ var NuniWidget = class {
 				e.preventDefault();
 				submit();
 			}
-		}, h("div", { class: "cmp-head" }, avatar, needsName ? nameInput : h("span", { class: "author" }, this.name), h("span", { class: "spacer" }), needsName ? null : h("button", {
+		}, commenter ? h("div", { class: "cmp-head" }, ...this.authorLine({
+			authorName: commenter.name,
+			avatarUrl: commenter.avatarUrl,
+			signedIn: true
+		}), h("span", { class: "spacer" }), h("button", {
+			class: "cmp-link",
+			type: "button",
+			onclick: () => this.signOutCommenter()
+		}, this.t("signOut"))) : h("div", { class: "cmp-head cmp-head-guest" }, avatar, needsName ? nameInput : h("span", { class: "author" }, this.name), h("span", { class: "spacer" }), needsName ? null : h("button", {
 			class: "cmp-link",
 			type: "button",
 			onclick: () => {
@@ -8818,7 +8982,12 @@ var NuniWidget = class {
 			title: this.t(draft.preparingMarkup ? "preparingScreenshot" : "markUpScreenshot"),
 			disabled: Boolean(draft.preparingMarkup),
 			onclick: () => void this.markUpScreenshot(draft)
-		}, icon(ICONS.pen)) : null, fileInput, counter, h("span", { class: "spacer" }), post), h("button", {
+		}, icon(ICONS.pen)) : null, fileInput, counter, h("span", { class: "spacer" }), post), commenter ? null : h("button", {
+			class: "cmp-link cmp-sign-in",
+			type: "button",
+			title: this.t("signInGithub"),
+			onclick: () => this.openCommenterSignIn()
+		}, icon(ICONS.github), this.t("signIn")), h("button", {
 			class: "icon-btn cmp-close",
 			type: "button",
 			"aria-label": this.t("cancel"),
@@ -8889,7 +9058,7 @@ var NuniWidget = class {
 			].filter((badge) => badge !== null);
 			const contextPending = owner && !(this.ownerDetailLoaded && this.ownerDetailId === comment._id);
 			const resolved = comment.status === "resolved";
-			body = h("div", { class: "card-body msg" }, h("div", { class: "card-head" }, avatar(comment.authorName), h("span", { class: "author" }, comment.authorName), h("span", { class: "meta" }, this.i18n.timeAgo(comment.createdAt) + (comment.editedAt ? ` · ${this.t("edited")}` : "")), h("span", { class: "spacer" }), owner ? h("button", {
+			body = h("div", { class: "card-body msg" }, h("div", { class: "card-head" }, ...this.authorLine(comment), h("span", { class: "meta" }, this.i18n.timeAgo(comment.createdAt) + (comment.editedAt ? ` · ${this.t("edited")}` : "")), h("span", { class: "spacer" }), owner ? h("button", {
 				class: `icon-btn${resolved ? " is-resolved" : ""}`,
 				type: "button",
 				"aria-label": this.t(resolved ? "reopen" : "resolve"),
@@ -8982,7 +9151,7 @@ var NuniWidget = class {
 		const open = card.picker === targetId;
 		if (!withAdd && !summaries.length && !open) return null;
 		return h("div", { class: "reactions" }, ...summaries.map((r) => {
-			const mine = r.authorKeyHashes.includes(this.secretHash);
+			const mine = r.authorKeyHashes.includes(this.authorKey);
 			return h("button", {
 				class: "reaction",
 				type: "button",
@@ -9055,7 +9224,7 @@ var NuniWidget = class {
 			return h("div", {
 				class: "reply msg",
 				"data-reply": reply._id
-			}, h("div", { class: "card-head" }, avatar(reply.authorName), h("span", { class: "author" }, reply.authorName), reply.isOwner ? h("span", { class: "badge badge-owner" }, this.t("owner")) : null, h("span", { class: "meta" }, this.i18n.timeAgo(reply.createdAt) + (reply.editedAt ? ` · ${this.t("edited")}` : "")), h("span", { class: "spacer" }), h("span", { class: "msg-tools" }, this.reactionAdd(reply._id, "icon-btn"), mine ? h("button", {
+			}, h("div", { class: "card-head" }, ...this.authorLine(reply), reply.isOwner ? h("span", { class: "badge badge-owner" }, this.t("owner")) : null, h("span", { class: "meta" }, this.i18n.timeAgo(reply.createdAt) + (reply.editedAt ? ` · ${this.t("edited")}` : "")), h("span", { class: "spacer" }), h("span", { class: "msg-tools" }, this.reactionAdd(reply._id, "icon-btn"), mine ? h("button", {
 				class: "icon-btn",
 				type: "button",
 				"aria-label": this.t("editReply"),
@@ -9074,7 +9243,7 @@ var NuniWidget = class {
 				onclick: () => void this.deleteReply(comment, reply)
 			}, icon(ICONS.trash)) : null)), h("div", { class: "msg-main" }, h("div", { class: "comment-body" }, reply.body), this.renderReactions(comment, reply._id, false)));
 		});
-		const needsName = !owner && !this.name;
+		const needsName = !owner && !this.displayName;
 		const nameInput = h("input", {
 			class: "reply-name",
 			placeholder: this.t("yourName"),
@@ -9167,7 +9336,7 @@ var NuniWidget = class {
 	}
 	focusComposer() {
 		requestAnimationFrame(() => {
-			this.uiLayer.querySelector(this.name ? "[data-focus-key=\"body\"]" : "[data-focus-key=\"name\"]")?.focus();
+			this.uiLayer.querySelector(this.displayName ? "[data-focus-key=\"body\"]" : "[data-focus-key=\"name\"]")?.focus();
 		});
 	}
 };