emdash 0.20.0 → 0.22.0

package/src/comments/query.ts

@@ -7,15 +7,26 @@
 
 import type { Kysely } from "kysely";
 
+import { CommentReactionRepository } from "../database/repositories/comment-reaction.js";
 import { CommentRepository } from "../database/repositories/comment.js";
 import type { PublicComment } from "../database/repositories/comment.js";
 import type { Database } from "../database/types.js";
 import { getDb } from "../loader.js";
+import { cachedQuery, CacheNamespace } from "../object-cache/index.js";
+import { reactionScore } from "./ranking.js";
 
 export interface GetCommentsOptions {
 	collection: string;
 	contentId: string;
 	threaded?: boolean;
+	/** Attach aggregate reaction counts to each comment. */
+	reactions?: boolean;
+	/**
+	 * Order of top-level comments. `oldest` (default) preserves the existing
+	 * chronological display; `best` ranks by Wilson-scored reactions (implies
+	 * `reactions`). Replies always stay chronological.
+	 */
+	sort?: "oldest" | "best";
 }
 
 export interface GetCommentsResult {
@@ -38,8 +49,21 @@ export interface GetCommentsResult {
  * ```
  */
 export async function getComments(options: GetCommentsOptions): Promise<GetCommentsResult> {
-	const db = await getDb();
-	return getCommentsWithDb(db, options);
+	// The result varies by every option getCommentsWithDb branches on, so all of
+	// them belong in the key. `best` implies reactions, so normalize the reaction
+	// flag — `{ sort: "best" }` and `{ sort: "best", reactions: true }` produce
+	// identical output and should share one entry.
+	const sort = options.sort ?? "oldest";
+	const withReactions = options.reactions || sort === "best";
+	const threaded = options.threaded ? "t" : "f";
+	return cachedQuery({
+		namespace: CacheNamespace.COMMENTS,
+		key: `comments:${options.collection}:${options.contentId}:${threaded}:${withReactions ? "r" : "n"}:${sort}`,
+		load: async () => {
+			const db = await getDb();
+			return getCommentsWithDb(db, options);
+		},
+	});
 }
 
 /**
@@ -65,16 +89,63 @@ export async function getCommentsWithDb(
 		limit: MAX_COMMENTS,
 	});
 
-	if (options.threaded) {
-		const threaded = CommentRepository.assembleThreads(result.items);
-		const items = threaded.map((c) => CommentRepository.toPublicComment(c));
-		return { items, total };
+	const items: PublicComment[] = options.threaded
+		? CommentRepository.assembleThreads(result.items).map((c) =>
+				CommentRepository.toPublicComment(c),
+			)
+		: result.items.map((c) => CommentRepository.toPublicComment(c));
+
+	// `best` sort needs reaction data, so it implies reactions.
+	if (options.reactions || options.sort === "best") {
+		await attachReactions(db, items);
+		if (options.sort === "best") {
+			sortByBest(items);
+		}
 	}
 
-	const items = result.items.map((c) => CommentRepository.toPublicComment(c));
 	return { items, total };
 }
 
+/**
+ * Attach aggregate reaction counts to a list of public comments (and their
+ * replies), in a single batched query.
+ */
+async function attachReactions(db: Kysely<Database>, items: PublicComment[]): Promise<void> {
+	const ids: string[] = [];
+	for (const comment of items) {
+		ids.push(comment.id);
+		if (comment.replies) {
+			for (const reply of comment.replies) ids.push(reply.id);
+		}
+	}
+	if (ids.length === 0) return;
+
+	const counts = await new CommentReactionRepository(db).countsForComments(ids);
+
+	const assign = (comment: PublicComment) => {
+		const reactions = counts.get(comment.id);
+		if (reactions) comment.reactions = reactions;
+	};
+	for (const comment of items) {
+		assign(comment);
+		comment.replies?.forEach(assign);
+	}
+}
+
+/**
+ * Sort top-level comments by Wilson-scored reactions (descending), tie-broken
+ * by oldest-first to keep ordering stable.
+ */
+function sortByBest(items: PublicComment[]): void {
+	items.sort((a, b) => {
+		const scoreDelta = reactionScore(b.reactions ?? {}) - reactionScore(a.reactions ?? {});
+		if (scoreDelta !== 0) return scoreDelta;
+		if (a.createdAt < b.createdAt) return -1;
+		if (a.createdAt > b.createdAt) return 1;
+		return 0;
+	});
+}
+
 /**
  * Get the count of approved comments for a content item.
  *

package/src/comments/ranking.ts

@@ -0,0 +1,58 @@
+/**
+ * Comment ranking utilities (Tier 1 of the best-in-class comments RFC).
+ *
+ * Wilson score lower-bound (95% confidence) — the same primitive Reddit uses
+ * for its "Best" comment sort. Ranks by the statistical lower bound of the
+ * positive-reaction proportion rather than the raw count, so a comment with a
+ * couple of reactions can't outrank a heavily-reacted one until it earns
+ * confidence, and a late-but-popular comment still rises (submission time is
+ * irrelevant).
+ *
+ * Positive-only reactions (the recommended default) degrade gracefully: with
+ * `down = 0` the score still increases monotonically with `up` while penalising
+ * low-sample comments — wilson(1,0) ≈ 0.21, wilson(10,0) ≈ 0.73,
+ * wilson(200,0) ≈ 0.98.
+ */
+
+/** z for a 95% two-sided confidence interval. */
+const DEFAULT_Z = 1.96;
+
+/** Reactions that count against a comment when both signals are in use. */
+const NEGATIVE_REACTIONS: ReadonlySet<string> = new Set(["dislike", "down"]);
+
+/**
+ * Wilson score lower bound of the positive proportion.
+ *
+ * @param up   count of positive reactions
+ * @param down count of negative reactions
+ * @returns a score in [0, 1]; 0 when there are no reactions
+ */
+export function wilsonLowerBound(up: number, down: number, z: number = DEFAULT_Z): number {
+	const n = up + down;
+	if (n <= 0) return 0;
+	const phat = up / n;
+	const z2 = z * z;
+	const denom = 1 + z2 / n;
+	const centre = phat + z2 / (2 * n);
+	const margin = z * Math.sqrt((phat * (1 - phat) + z2 / (4 * n)) / n);
+	return (centre - margin) / denom;
+}
+
+/**
+ * Reduce a per-reaction count map to a single rank score via the Wilson
+ * lower bound. Any reaction not in {@link NEGATIVE_REACTIONS} is treated as
+ * positive, so the positive-only default (just `like`) works without special
+ * casing.
+ */
+export function reactionScore(counts: Record<string, number>): number {
+	let up = 0;
+	let down = 0;
+	for (const [reaction, count] of Object.entries(counts)) {
+		if (NEGATIVE_REACTIONS.has(reaction)) {
+			down += count;
+		} else {
+			up += count;
+		}
+	}
+	return wilsonLowerBound(up, down);
+}

package/src/components/Comments.astro

@@ -21,6 +21,10 @@ interface Props {
 	collection: string;
 	contentId: string;
 	threaded?: boolean;
+	/** Show a like/reaction button per comment (opt-in). */
+	reactions?: boolean;
+	/** Order of top-level comments: chronological (default) or Wilson-ranked. */
+	sort?: "oldest" | "best";
 	class?: string;
 }
 
@@ -28,13 +32,15 @@ const {
 	collection,
 	contentId,
 	threaded = false,
+	reactions = false,
+	sort = "oldest",
 	class: className,
 } = Astro.props;
 
 const collectionInfo = await getCollectionInfo(collection);
 const enabled = collectionInfo?.commentsEnabled ?? false;
 const { items, total } = enabled
-	? await getComments({ collection, contentId, threaded })
+	? await getComments({ collection, contentId, threaded, reactions, sort })
 	: { items: [], total: 0 };
 
 const URL_RE = /https?:\/\/[^\s<>"')\]]+/g;
@@ -62,15 +68,72 @@ function escapeHtml(text: string): string {
 function formatBody(text: string): string {
 	return autoLinkUrls(escapeHtml(text));
 }
+
+// Progressive-enhancement script for reactions. Emitted verbatim (is:inline)
+// only when `reactions` is enabled, so non-reaction pages ship zero extra JS.
+// Avoids template literals internally so it survives the outer backticks.
+const REACTION_SCRIPT = `
+(() => {
+  const sections = document.querySelectorAll('[data-ec-comments][data-ec-reactions]');
+  sections.forEach((section) => {
+    const collection = section.getAttribute('data-collection');
+    const contentId = section.getAttribute('data-content-id');
+    if (!collection || !contentId) return;
+    const base = '/_emdash/api/comments/' + encodeURIComponent(collection) + '/' + encodeURIComponent(contentId) + '/reactions';
+    const headers = { 'X-EmDash-Request': '1' };
+
+    fetch(base, { headers: headers })
+      .then((r) => (r.ok ? r.json() : null))
+      .then((payload) => {
+        const viewer = payload && payload.data && payload.data.viewer;
+        if (!viewer) return;
+        Object.keys(viewer).forEach((commentId) => {
+          (viewer[commentId] || []).forEach((reaction) => {
+            const sel = '.ec-reaction[data-comment-id="' + commentId + '"][data-ec-reaction="' + reaction + '"]';
+            const btn = section.querySelector(sel);
+            if (btn) btn.setAttribute('aria-pressed', 'true');
+          });
+        });
+      })
+      .catch(() => {});
+
+    section.addEventListener('click', (event) => {
+      const btn = event.target.closest('.ec-reaction');
+      if (!btn || !section.contains(btn)) return;
+      const commentId = btn.getAttribute('data-comment-id');
+      const reaction = btn.getAttribute('data-ec-reaction');
+      if (!commentId || !reaction) return;
+      btn.disabled = true;
+      fetch(base, {
+        method: 'POST',
+        headers: Object.assign({ 'Content-Type': 'application/json' }, headers),
+        body: JSON.stringify({ commentId: commentId, reaction: reaction }),
+      })
+        .then((r) => (r.ok ? r.json() : null))
+        .then((payload) => {
+          const data = payload && payload.data;
+          if (!data) return;
+          btn.setAttribute('aria-pressed', data.reacted ? 'true' : 'false');
+          const countEl = btn.querySelector('[data-ec-reaction-count]');
+          if (countEl) countEl.textContent = String((data.counts && data.counts[reaction]) || 0);
+        })
+        .catch(() => {})
+        .finally(() => { btn.disabled = false; });
+    });
+  });
+})();
+`;
 ---
 
 {
 	enabled && (
+		<Fragment>
 		<section
 			class:list={["ec-comments", className]}
 			data-ec-comments
 			data-collection={collection}
 			data-content-id={contentId}
+			{...(reactions ? { "data-ec-reactions": "" } : {})}
 		>
 			<h3 class="ec-comments-heading">
 				{total === 0
@@ -112,6 +175,25 @@ function formatBody(text: string): string {
 									class="ec-comment-body"
 									set:html={formatBody(comment.body)}
 								/>
+								{reactions && (
+									<div class="ec-comment-actions">
+										<button
+											type="button"
+											class="ec-reaction"
+											data-ec-reaction="like"
+											data-comment-id={comment.id}
+											aria-pressed="false"
+										>
+											<span class="ec-reaction-icon" aria-hidden="true">
+												&#x2661;
+											</span>
+											<span class="ec-reaction-label">Like</span>
+											<span class="ec-reaction-count" data-ec-reaction-count>
+												{comment.reactions?.like ?? 0}
+											</span>
+										</button>
+									</div>
+								)}
 								{threaded && comment.replies && comment.replies.length > 0 && (
 									<ol class="ec-comment-replies">
 										{comment.replies.map((reply: PublicComment) => (
@@ -153,6 +235,21 @@ function formatBody(text: string): string {
 														class="ec-comment-body"
 														set:html={formatBody(reply.body)}
 													/>
+													{reactions && (
+														<div class="ec-comment-actions">
+															<button
+																type="button"
+																class="ec-reaction"
+																data-ec-reaction="like"
+																data-comment-id={reply.id}
+																aria-pressed="false"
+															>
+																<span class="ec-reaction-icon" aria-hidden="true">&#x2661;</span>
+																<span class="ec-reaction-label">Like</span>
+																<span class="ec-reaction-count" data-ec-reaction-count>{reply.reactions?.like ?? 0}</span>
+															</button>
+														</div>
+													)}
 												</article>
 											</li>
 										))}
@@ -164,6 +261,8 @@ function formatBody(text: string): string {
 				</ol>
 			)}
 		</section>
+		{reactions && <script is:inline set:html={REACTION_SCRIPT} />}
+		</Fragment>
 	)
 }
 
@@ -229,4 +328,40 @@ function formatBody(text: string): string {
 		white-space: pre-wrap;
 		word-break: break-word;
 	}
+
+	.ec-comment-actions {
+		margin-top: 0.5rem;
+	}
+
+	.ec-reaction {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.35rem;
+		font: inherit;
+		font-size: 0.875em;
+		color: inherit;
+		background: none;
+		border: var(--ec-comment-border);
+		border-radius: 999px;
+		padding: 0.15rem 0.6rem;
+		cursor: pointer;
+	}
+
+	.ec-reaction[aria-pressed="true"] {
+		border-color: currentColor;
+		font-weight: 600;
+	}
+
+	.ec-reaction[aria-pressed="true"] .ec-reaction-icon {
+		color: #e0245e;
+	}
+
+	.ec-reaction:disabled {
+		opacity: 0.5;
+		cursor: default;
+	}
+
+	.ec-reaction-count {
+		font-variant-numeric: tabular-nums;
+	}
 </style>

package/src/config/secrets.ts

@@ -31,9 +31,15 @@ import { sha256 } from "@oslojs/crypto/sha2";
 import { encodeHexLowerCase } from "@oslojs/encoding";
 import type { Kysely } from "kysely";
 
+import { after } from "../after.js";
 import { OptionsRepository } from "../database/repositories/options.js";
 import type { Database } from "../database/types.js";
 import { decodeBase64url, encodeBase64url } from "../utils/base64.js";
+import {
+	createSingleFlightCache,
+	type SingleFlightCache,
+	singleFlightCached,
+} from "../utils/single-flight-cache.js";
 
 /** v1 encryption key prefix. Bumping requires a separate KDF version. */
 export const ENCRYPTION_KEY_PREFIX = "emdash_enc_v1_";
@@ -370,17 +376,23 @@ export async function validateEncryptionKeyAtStartup(env?: SecretsEnv): Promise<
  *
  * Lives on `globalThis` so module-duplication during SSR bundling can't
  * fragment the cache. See `request-context.ts` for the same pattern.
+ *
+ * Each db gets its own poison-immune single-flight cache (see
+ * `utils/single-flight-cache.ts`): the resolved *value* is cached, never an
+ * in-flight promise, so a request cancelled mid-resolve can't strand later
+ * preview/comment requests on the isolate.
  */
 // Versioned to prevent cache fragmentation if `ResolvedSecrets`'s shape
 // ever changes. Bump the suffix on incompatible changes so a co-resident
-// older build doesn't read a newer-shape value.
-const SECRETS_CACHE_KEY = Symbol.for("@emdash-cms/core/secrets-cache@1");
+// older build doesn't read a newer-shape value. Bumped to @2 when the cached
+// value changed from a bare promise to a single-flight cache.
+const SECRETS_CACHE_KEY = Symbol.for("@emdash-cms/core/secrets-cache@2");
 
 interface SecretsCacheHolder {
-	cache: WeakMap<Kysely<Database>, Promise<ResolvedSecrets>>;
+	cache: WeakMap<Kysely<Database>, SingleFlightCache<ResolvedSecrets>>;
 }
 
-function getSecretsCache(): WeakMap<Kysely<Database>, Promise<ResolvedSecrets>> {
+function getSecretsCache(): WeakMap<Kysely<Database>, SingleFlightCache<ResolvedSecrets>> {
 	// eslint-disable-next-line typescript/no-unsafe-type-assertion -- globalThis singleton pattern
 	const holder = globalThis as Record<symbol, SecretsCacheHolder | undefined>;
 	let entry = holder[SECRETS_CACHE_KEY];
@@ -397,19 +409,21 @@ function getSecretsCache(): WeakMap<Kysely<Database>, Promise<ResolvedSecrets>>
  * env / re-query options on every request.
  *
  * The cache is keyed by `Kysely` instance, so playground / per-DO / per-test
- * databases each get their own resolution.
+ * databases each get their own resolution. Concurrent cold callers coalesce
+ * onto one resolution via the single-flight lock; a failed resolution
+ * propagates to the caller and releases the lock so the next caller retries.
  */
 export function resolveSecretsCached(db: Kysely<Database>): Promise<ResolvedSecrets> {
-	const cache = getSecretsCache();
-	const cached = cache.get(db);
-	if (cached) return cached;
-	const promise = resolveSecrets({ db }).catch((error) => {
-		// Don't poison the cache on transient failure; next caller retries.
-		cache.delete(db);
-		throw error;
+	const caches = getSecretsCache();
+	let cache = caches.get(db);
+	if (!cache) {
+		cache = createSingleFlightCache<ResolvedSecrets>();
+		caches.set(db, cache);
+	}
+	return singleFlightCached(cache, () => resolveSecrets({ db }), {
+		anchor: (promise) => after(() => promise),
+		ownerTimeoutMs: 30_000,
 	});
-	cache.set(db, promise);
-	return promise;
 }
 
 /**

package/src/database/instrumentation.ts

@@ -33,6 +33,19 @@ export interface QueryRecorder {
 	route: string;
 	method: string;
 	phase: string;
+	/**
+	 * Set once the recorder has been emitted, so a flush is idempotent.
+	 * Without this, a fallback flush and the stream-end flush could both
+	 * fire and double-emit the events.
+	 */
+	flushed?: boolean;
+	/**
+	 * Set when the response body is wrapped for stream-end metrics. The
+	 * recorder is then flushed when the body finishes streaming (so it
+	 * captures queries issued by components during streaming) rather than
+	 * when middleware returns (headers ready, body not yet streamed).
+	 */
+	deferredFlush?: boolean;
 }
 
 export function createRecorder(route: string, method: string, phase: string): QueryRecorder {
@@ -60,9 +73,16 @@ export function recordEvent(
  * harness pipes the child's stdout, filters lines beginning with
  * QUERY_LOG_PREFIX, and writes them to its own file. Using stdout means
  * the sink works uniformly in Node and in workerd (which has no fs).
+ *
+ * Idempotent: the first call emits and marks the recorder flushed, later
+ * calls no-op. For streamed responses the flush is deferred to stream end
+ * (see wrapBodyForStreamMetrics) so it captures queries issued while the
+ * body is still rendering; bodyless responses fall back to a flush when
+ * middleware returns.
  */
 export function flushRecorder(rec: QueryRecorder): void {
-	if (rec.events.length === 0) return;
+	if (rec.flushed) return;
+	rec.flushed = true;
 	for (const e of rec.events) {
 		console.log(`${QUERY_LOG_PREFIX} ${JSON.stringify(e)}`);
 	}

package/src/database/migrations/044_comment_reactions.ts

@@ -0,0 +1,56 @@
+import type { Kysely } from "kysely";
+
+import { currentTimestamp } from "../dialect-helpers.js";
+
+/**
+ * Comment reactions (Tier 1 of the best-in-class comments RFC).
+ *
+ * One row per (comment, voter, reaction). Toggle semantics are enforced by the
+ * unique index — a voter either has a given reaction on a comment or doesn't.
+ * `voter_hash` is a salted SHA-256 of the visitor's IP (same primitive as
+ * `_emdash_comments.ip_hash`), so no cleartext identity is stored.
+ *
+ * Additive and backward-compatible: a new table, no change to existing schema.
+ */
+export async function up(db: Kysely<unknown>): Promise<void> {
+	await db.schema
+		.createTable("_emdash_comment_reactions")
+		.ifNotExists()
+		.addColumn("id", "text", (col) => col.primaryKey())
+		.addColumn("comment_id", "text", (col) =>
+			col.notNull().references("_emdash_comments.id").onDelete("cascade"),
+		)
+		.addColumn("reaction", "text", (col) => col.notNull().defaultTo("like"))
+		.addColumn("voter_hash", "text", (col) => col.notNull())
+		.addColumn("created_at", "text", (col) => col.defaultTo(currentTimestamp(db)))
+		.execute();
+
+	// One reaction of a given type per voter per comment (toggle semantics).
+	await db.schema
+		.createIndex("idx_comment_reactions_unique")
+		.ifNotExists()
+		.on("_emdash_comment_reactions")
+		.columns(["comment_id", "voter_hash", "reaction"])
+		.unique()
+		.execute();
+
+	// Aggregate counts per comment (GROUP BY comment_id, reaction).
+	await db.schema
+		.createIndex("idx_comment_reactions_comment")
+		.ifNotExists()
+		.on("_emdash_comment_reactions")
+		.column("comment_id")
+		.execute();
+
+	// Per-voter rate limiting (recent reactions by a voter).
+	await db.schema
+		.createIndex("idx_comment_reactions_voter")
+		.ifNotExists()
+		.on("_emdash_comment_reactions")
+		.columns(["voter_hash", "created_at"])
+		.execute();
+}
+
+export async function down(db: Kysely<unknown>): Promise<void> {
+	await db.schema.dropTable("_emdash_comment_reactions").execute();
+}

package/src/database/migrations/runner.ts

@@ -45,6 +45,7 @@ import * as m040 from "./040_byline_i18n.js";
 import * as m041 from "./041_content_locale_list_index.js";
 import * as m042 from "./042_byline_fields.js";
 import * as m043 from "./043_content_references.js";
+import * as m044 from "./044_comment_reactions.js";
 
 const MIGRATIONS: Readonly<Record<string, Migration>> = Object.freeze({
 	"001_initial": m001,
@@ -89,6 +90,7 @@ const MIGRATIONS: Readonly<Record<string, Migration>> = Object.freeze({
 	"041_content_locale_list_index": m041,
 	"042_byline_fields": m042,
 	"043_content_references": m043,
+	"044_comment_reactions": m044,
 });
 
 /** Total number of registered migrations. Exported for use in tests. */

package/src/database/repositories/byline.ts

@@ -2,6 +2,10 @@ import { sql, type Kysely, type Selectable } from "kysely";
 import { ulid } from "ulidx";
 
 import { getBylineFieldDefs } from "../../bylines/field-defs-cache.js";
+import {
+	invalidateBylineObjectCache,
+	invalidateCollectionCache,
+} from "../../object-cache/index.js";
 import {
 	clearRequestCacheEntry,
 	peekRequestCache,
@@ -773,6 +777,7 @@ export class BylineRepository {
 		if (touchedGroupShared) {
 			clearRequestCacheEntry(`byline-field-group-values:${translationGroup}`);
 		}
+		invalidateBylineObjectCache();
 
 		const byline = await this.findById(id);
 		if (!byline) {
@@ -820,6 +825,7 @@ export class BylineRepository {
 		if (touchedGroupShared) {
 			clearRequestCacheEntry(`byline-field-group-values:${group}`);
 		}
+		invalidateBylineObjectCache();
 
 		return await this.findById(id);
 	}
@@ -908,6 +914,7 @@ export class BylineRepository {
 			}
 		});
 
+		invalidateBylineObjectCache();
 		return true;
 	}
 
@@ -1271,6 +1278,9 @@ export class BylineRepository {
 			SET primary_byline_id = ${firstByline}
 			WHERE id = ${targetContentId}
 		`.execute(this.db);
+
+		// Byline credits are folded into the target entry's cached payload.
+		invalidateCollectionCache(collection);
 	}
 
 	/**
@@ -1365,6 +1375,9 @@ export class BylineRepository {
 			WHERE id = ${contentId}
 		`.execute(this.db);
 
+		// Byline credits are folded into this entry's cached payload.
+		invalidateCollectionCache(collectionSlug);
+
 		return await this.getContentBylines(collectionSlug, contentId);
 	}
 }