@supersuit/artifacts 0.32.0 → 0.33.0

package/CHANGELOG.md

@@ -3,6 +3,44 @@
 `@supersuit/artifacts`. One entry per version, newest first. Each entry says what changed, how a
 host can tell whether it is affected (DETECTOR), what a host does about it (REMEDY), and the tests.
 
+## 0.33.0
+
+**A comment thread can be resolved** (Gary, 2026-10-12: "Are you going to resolve the comments at
+some point?"). Until now a shared comment could only be replied to, so a page whose every comment
+had been dealt with still read as a page full of open questions, and the publisher's notifier kept
+listing them.
+
+- `POST /api/artifacts/<id>/resolve` (`RESOLVE`), body `{ entry, resolved?, note?, by? }`: the
+  publish key or a publisher pass (an agent resolves with the credential it publishes with), or a
+  reader signed in as `ownerEmail` or one of `admins`, same-origin JSON. Nobody else: 401 signed
+  out, 403 signed in, before the page is looked up. `entry` may name a reply; the thread's top
+  comment is what is resolved. `resolved: false` reopens. `note` is one line of at most 280.
+- Recorded on the top comment's value as `resolved: { at, by, note? }`, where `by` is a first name
+  or what the publisher calls itself, never an email. A reader cannot write the field (the
+  comment check refuses it), and an edit keeps it.
+- On the page a resolved thread draws a muted check pin with no box, opens collapsed to
+  "Resolved: <note>" with the comment and replies a tap away, and leaves the Comments count. The
+  owner and admins get Resolve and Reopen in every shared thread.
+- The comments feed carries `resolved` on every row (a reply carries its thread's), takes
+  `&open=1` to leave resolved threads out (a reply written after the resolution stays in), and
+  answers `cursor` and `more` so a filtered caller can page.
+- `StateStore.setResolved` (optional), implemented by `createStateStore` and
+  `createMemoryStateStore`.
+- DETECTOR: `POST /api/artifacts/<id>/resolve` with the publish key answers 404 from the host's
+  router (no route file), or the feed's rows have no `resolved` key: 0.32.0 or earlier.
+- REMEDY: update the dependency and add `app/api/artifacts/[id]/resolve/route.ts` exporting
+  `POST` delegating to `RESOLVE`. A host with its own `StateStore` implements `setResolved`, or the
+  route answers 501. No index or data migration: an open thread is one with no `resolved`.
+- Tests: `routes/resolve.test.tsx` (anonymous and signed-in non-admin refused, the comment's own
+  writer refused; owner, admin, publish key and publisher pass allowed; origin and JSON for the
+  cookie path; note length and lines; a reply resolves its thread; reopen; 501s; readers and the
+  writer shown the resolution; a forged `resolved` refused; an edit keeps it; the feed's field,
+  `open=1`, `cursor`), `artifacts/comments.test.ts` (note rules, `resolutionOf`),
+  `reader/comment-layer.test.tsx` (muted pin, no box, open count, collapsed line, expand, owner
+  Resolve and Reopen post the route, a reader gets neither, an edit never sends `resolved`),
+  `routes/publisher-pass.test.tsx` (RESOLVE takes a pass exactly as the key), and `check-packed`
+  (the tarball resolves through the fixture's route, the feed carries it, `open=1` drops it).
+
 ## 0.32.0
 
 **The page's owner and the hub's admins always get past a locked page's door** (Gary, 2026-10-11).

package/README.md

@@ -83,6 +83,7 @@ The rest, each exporting the named handler(s) from `artifacts`:
 | `app/api/reader/leave/route.ts` | `GET` = `LEAVE` |
 | `app/api/reader/ack/route.ts` | `POST` = `ACK` |
 | `app/api/reader/track/route.ts` | `POST` = `TRACK` |
+| `app/api/artifacts/[id]/resolve/route.ts` | `POST` = `RESOLVE` (see [resolving a thread](#resolving-a-thread)) |
 | `app/api/comments/route.ts` | `GET` = `COMMENTS_FEED` (see [the comments feed](#the-comments-feed)) |
 
 Pages live at `/<id>` by default. Mounting inside a larger site, pass `pagePrefix: '/a/'` and put
@@ -702,6 +703,48 @@ The bucket also needs CORS allowing `PUT` from the site's origin with the `conte
 `cache-control` and `x-goog-content-length-range` headers, since the reader's browser uploads
 directly.
 
+### Resolving a thread
+
+When what a comment asked for has been done, the thread is resolved. On the page it then draws a
+muted check pin with no box over the page, opens collapsed to one line, **"Resolved: <note>"** (or
+**"Resolved"**), with the comment and its replies a tap away, and leaves the Comments count. The
+reader who left the comment sees the note. The owner and the hub's admins get **Resolve** (with an
+optional note) and **Reopen** in every shared thread.
+
+```
+POST /api/artifacts/<id>/resolve
+Authorization: Bearer <publish key or publisher pass>
+Content-Type: application/json
+
+{ "entry": "<entryId>", "note": "Named the river in the second paragraph.", "by": "Pat's agent" }
+
+200 { id, entry, resolved: { at, by, note? } }
+```
+
+- **Who:** the publish key or a publisher pass, so an agent resolves with the credential it
+  publishes with; or a reader signed in as `ownerEmail` or one of `admins`, from this host's own
+  pages, as JSON. Anyone else is refused (401 signed out, 403 signed in) before the page is looked
+  up. Leaving a comment does not make you able to resolve it.
+- **`entry`** is a comment's entry id, as the feed and `/responses` give it. Naming a reply
+  resolves the thread it belongs to; the answer's `entry` is that thread's top comment, which is
+  where `resolved` is stored (in the comment's value, beside `body`).
+- **`note`** is optional: one line, at most 280 characters, saying what changed. **`by`** names the
+  resolver and is the publisher's to set (one line, at most 80; default "the publisher"); a signed-in
+  owner or admin is named by their first name. Never an email: a readers-visible page shows it.
+- **Reopen** with `{ "entry": "<entryId>", "resolved": false }` (no note), by the same people.
+- A reader cannot set `resolved` by writing a comment (the server refuses the field), and an edit to
+  a resolved comment keeps its resolution.
+- 404 for a page or comment that is not there; 501 on a host with no `state`, or whose own
+  `StateStore` has no `setResolved` (`createStateStore` and `createMemoryStateStore` have it).
+
+```ts
+// app/api/artifacts/[id]/resolve/route.ts
+import type { NextRequest } from 'next/server'
+import { artifacts } from '@/lib/artifacts'
+type Ctx = { params: Promise<{ id: string }> }
+export function POST(request: NextRequest, ctx: Ctx) { return artifacts.RESOLVE(request, ctx) }
+```
+
 ### The comments feed
 
 So the publisher hears about a shared comment without opening every page, one route lists every
@@ -712,8 +755,8 @@ appear (the privacy test covers this handler like every other).
 GET /api/comments?since=2026-09-28T12:00:00Z
 Authorization: Bearer <publish key>
 
-200 { now, comments: [ { artifactId, title, entryId, parent, name, quote, region, body,
-                         transcript, audioUrl, at, link } ] }
+200 { now, cursor, more, comments: [ { artifactId, title, entryId, parent, name, quote, region,
+                                       body, transcript, audioUrl, at, resolved, link } ] }
 ```
 
 Oldest first, at most 200, strictly after `since` (an ISO 8601 time with a zone; anything else is
@@ -725,6 +768,12 @@ parent's; a comment on an earlier version is highlighted in that list). A caller
 at the last row's `at` and leaves it where it was when nothing came back; `now` is where a first
 run starts, so it does not replay history.
 
+`resolved` is the row's THREAD's resolution (`{ at, by, note? }`, a reply carries its parent's), or
+null while the thread is open. **`&open=1` lists only open threads**: every row of a resolved thread
+is left out, except a reply written after the thread was resolved, which is news about it. Filtered,
+a page can come back short while more remains, so page with `cursor` (the `at` of the last comment
+read, filtered or not) and `more` (a full page was read) rather than with the last row.
+
 The path sits outside `/api/artifacts/` because `comments` is itself a legal page id there.
 
 ```ts

package/lib/artifacts/comments.d.ts

@@ -28,7 +28,31 @@ export type CommentValue = {
     transcript?: (typeof COMMENT_TRANSCRIPTS)[number];
     /** The name a reader typed so the owner can credit them. A signed-in reader's account name wins. */
     by?: string;
+    /** On a thread's top-level comment only: the owner, an admin or the publisher marked the thread
+     *  done (0.33.0). Written by the resolve route, never by a reader: `validateComment` refuses the
+     *  key, and an edit keeps whatever the comment already carried. */
+    resolved?: CommentResolution;
 };
+/** A resolved thread: when, by whom (a first name, or what the publisher called itself, never an
+ *  email, because a readers-visible page shows it to every reader), and an optional one-line note
+ *  saying what changed. */
+export type CommentResolution = {
+    at: string;
+    by: string;
+    note?: string;
+};
+export declare const MAX_RESOLVE_NOTE_CHARS = 280;
+/** The resolve route's check on a note: absent, null or blank means no note; otherwise one line of
+ *  at most MAX_RESOLVE_NOTE_CHARS, trimmed. */
+export declare function cleanResolveNote(v: unknown): {
+    ok: true;
+    note: string | null;
+} | {
+    ok: false;
+    error: string;
+};
+/** The resolution a stored value carries, or null. Tolerant of anything, since it reads stored JSON. */
+export declare function resolutionOf(v: unknown): CommentResolution | null;
 /** The server's check on a comment, called by the state POST for the `comments` slot. `existing`
  *  returns a comment THIS WRITER can see by its entry id, so a reply can only name a thread its
  *  writer was shown. The browser checks too; this is the one that counts. */

package/lib/artifacts/comments.js

@@ -16,6 +16,29 @@ export function mergeCommentsState(state, comments, visible) {
 export const MAX_COMMENT_CHARS = 4000;
 export const MAX_COMMENT_NAME_CHARS = 80;
 export const COMMENT_TRANSCRIPTS = ['browser', 'host', 'typed'];
+export const MAX_RESOLVE_NOTE_CHARS = 280;
+/** The resolve route's check on a note: absent, null or blank means no note; otherwise one line of
+ *  at most MAX_RESOLVE_NOTE_CHARS, trimmed. */
+export function cleanResolveNote(v) {
+    if (v === undefined || v === null)
+        return { ok: true, note: null };
+    if (typeof v !== 'string')
+        return { ok: false, error: 'note is one line of text, or null' };
+    const note = v.trim();
+    if (/[\r\n]/.test(note))
+        return { ok: false, error: 'note is one line' };
+    if (note.length > MAX_RESOLVE_NOTE_CHARS)
+        return { ok: false, error: `note is at most ${MAX_RESOLVE_NOTE_CHARS} characters` };
+    return { ok: true, note: note || null };
+}
+/** The resolution a stored value carries, or null. Tolerant of anything, since it reads stored JSON. */
+export function resolutionOf(v) {
+    const r = v && typeof v === 'object' ? v.resolved : undefined;
+    if (!r || typeof r !== 'object' || typeof r.at !== 'string')
+        return null;
+    const { at, by, note } = r;
+    return { at, by: typeof by === 'string' ? by : '', ...(typeof note === 'string' && note ? { note } : {}) };
+}
 const ENTRY_ID = /^[A-Za-z0-9_-]{1,128}$/;
 // An uploaded asset path under the page (comments/<id>.webm), never a URL and never `..`.
 const AUDIO_PATH = /^(?!.*\.\.)[A-Za-z0-9_-][A-Za-z0-9._/-]{0,299}$/;

package/lib/artifacts/state-store.d.ts

@@ -67,6 +67,16 @@ export interface StateStore {
      *  feed reads it. Optional so a host's own store keeps working; without it the feed answers 501.
      *  The Firestore query needs a composite index on <base>State: slot ASC, at ASC. */
     slotSince?(slot: string, after: string, limit: number): Promise<StateEntry[]>;
+    /** Set or clear `resolved` on one `many` entry's value, whoever wrote it (resolving a comment
+     *  thread, 0.33.0). Keeps the entry's id, writer and time. Null when the entry is not on this page
+     *  in this slot. Only the resolve route calls it, after its own check of who is asking. Optional
+     *  so a host's own store keeps working; without it the resolve route answers 501. */
+    setResolved?(input: {
+        artifactId: string;
+        slot: string;
+        entryId: string;
+        resolved: unknown | null;
+    }): Promise<StateEntry | null>;
 }
 export declare const readerKeyFor: {
     signedIn: (uid: string) => string;

package/lib/artifacts/state-store.js

@@ -21,6 +21,15 @@ export const readerKeyFor = {
 const writerOf = (w) => ({
     ...(w.uid ? { uid: w.uid } : {}), ...(w.email ? { email: w.email } : {}), name: w.name, anonymous: w.anonymous,
 });
+/** The value with `resolved` set to the given resolution, or removed when it is null. */
+const withResolved = (value, resolved) => {
+    const base = value && typeof value === 'object' && !Array.isArray(value) ? { ...value } : {};
+    if (resolved === null)
+        delete base.resolved;
+    else
+        base.resolved = structuredClone(resolved);
+    return base;
+};
 const oneId = (artifactId, slot, readerKey) => `${artifactId}__${slot}__${readerKey}`;
 const toEntry = (id, d) => {
     const { json, ...rest } = d;
@@ -105,6 +114,18 @@ export function createStateStore(db, base) {
         // order on at. Needs the composite index (slot ASC, at ASC) on <base>State, or Firestore
         // refuses the query with FAILED_PRECONDITION and a link that creates it.
         slotSince: (slot, after, limit) => load(col().where('slot', '==', slot).where('at', '>', after).orderBy('at').limit(limit)),
+        async setResolved({ artifactId, slot, entryId, resolved }) {
+            const ref = col().doc(entryId);
+            const snap = await ref.get();
+            if (!snap.exists)
+                return null;
+            const e = toEntry(snap.id, snap.data());
+            if (e.artifactId !== artifactId || e.slot !== slot || e.shape !== 'many')
+                return null;
+            const value = withResolved(e.value, resolved);
+            await ref.update({ json: JSON.stringify(value) });
+            return { ...e, value };
+        },
     };
     return store;
 }
@@ -172,6 +193,14 @@ export function createMemoryStateStore() {
             docs.set(entryId, next);
             return structuredClone(next);
         },
+        async setResolved({ artifactId, slot, entryId, resolved }) {
+            const e = docs.get(entryId);
+            if (!e || e.artifactId !== artifactId || e.slot !== slot || e.shape !== 'many')
+                return null;
+            const next = { ...e, value: withResolved(e.value, resolved) };
+            docs.set(entryId, next);
+            return structuredClone(next);
+        },
         slotSince: async (slot, after, limit) => [...docs.values()]
             .filter((e) => e.slot === slot && e.at > after)
             .sort((x, y) => x.at.localeCompare(y.at) || x.id.localeCompare(y.id))

package/lib/reader/comment-layer.d.ts

@@ -1,6 +1,8 @@
-import { type CommentsMode } from '../artifacts/comments.js';
+import { type CommentResolution, type CommentsMode } from '../artifacts/comments.js';
 import { type VoiceHost } from './voice-recorder.js';
 import { type DeviceAudio } from './device-audio.js';
+/** The line a resolved thread collapses to. */
+export declare const resolvedLine: (r: CommentResolution) => string;
 /** A finger rather than a mouse: the comment button then goes where the OS menu is not. */
 export declare function onTouch(): boolean;
 export declare function CommentLayer({ artifactId, rootId, ownerName, comments, canShare, signedIn, isOwner, version, accent, ground, signIn, voice, audioStore, }: {

package/lib/reader/comment-layer.js

@@ -20,13 +20,18 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // on load and on every hashchange the pin is scrolled into view and its thread opened; a reply's
 // id opens its parent's thread; a comment on an earlier version is scrolled to and highlighted.
 //
+// A RESOLVED thread (0.33.0: the owner, an admin or the publisher marked it done) draws a muted
+// check pin with no box, so the page reads clean, and opens collapsed to one line, "Resolved: <note>",
+// with the comment and its replies a tap away. The Comments count is open threads only. The owner
+// and admins get Resolve and Reopen in every shared thread.
+//
 // Rendered empty on the server and on the first client render so the markup always hydrates; the
 // overlay is portalled onto document.body so its coordinates are page coordinates.
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { PINS_SET, announcePins, signInBack } from './page-bridge.js';
 import { MAX_QUOTE_CHARS, textAnchorFrom } from '../artifacts/anchor.js';
-import { COMMENTS_SLOT } from '../artifacts/comments.js';
+import { COMMENTS_SLOT, MAX_RESOLVE_NOTE_CHARS, resolutionOf } from '../artifacts/comments.js';
 import { CommentCard } from './comment-card.js';
 import { AudioPlay, hostVoice, newMemoId } from './voice-recorder.js';
 import { deviceAudio as defaultDeviceAudio, isDeviceAudio } from './device-audio.js';
@@ -40,6 +45,9 @@ const LONG_PRESS_MS = 400;
 const HASH = /^#comment-([A-Za-z0-9_-]{1,128})$/;
 /** The entry id a `#comment-<id>` hash names, or null. */
 const commentHashId = (hash) => HASH.exec(hash)?.[1] ?? null;
+/** The line a resolved thread collapses to. */
+export const resolvedLine = (r) => (r.note ? `Resolved: ${r.note}` : 'Resolved');
+const resolvedOf = (item) => (item.kind === 'shared' ? resolutionOf(item.value) : null);
 const DRAG_PX = 8;
 /** Where a drag never starts a box: controls, and anything that is somebody's words. */
 const NOT_FOR_BOXES = 'a, button, input, textarea, select, audio, video[controls], summary, label, [data-comment-ui], [data-note-toggle], [data-heading-notes], [data-artifact-notes], .artifact-defined-term, .artifact-word';
@@ -83,6 +91,7 @@ export function CommentLayer({ artifactId, rootId, ownerName, comments, canShare
     const host = useMemo(() => voice ?? hostVoice(artifactId), [voice, artifactId]);
     const audioDb = useMemo(() => audioStore ?? defaultDeviceAudio, [audioStore]);
     const stateUrl = `/api/artifacts/${artifactId}/state`;
+    const resolveUrl = `/api/artifacts/${artifactId}/resolve`;
     const personalUrl = `/api/artifacts/${artifactId}/personal`;
     const [mounted, setMounted] = useState(false);
     const [shared, setShared] = useState([]);
@@ -105,6 +114,8 @@ export function CommentLayer({ artifactId, rootId, ownerName, comments, canShare
     const [highlight, setHighlight] = useState(null);
     /** A selector to scroll into view once the render that draws it has committed. */
     const [scrollTo, setScrollTo] = useState(null);
+    /** A resolved thread the address named, opened expanded rather than collapsed. */
+    const [expanded, setExpanded] = useState(null);
     const call = useCallback(async (url, init) => {
         try {
             const r = await fetch(url, { credentials: 'same-origin', cache: 'no-store', ...init });
@@ -379,6 +390,7 @@ export function CommentLayer({ artifactId, rootId, ownerName, comments, canShare
             setShowPins(true);
             setHighlight(null);
             setThread(id);
+            setExpanded(id);
             setScrollTo(`[data-comment-pin][data-comment-id="${id}"]`);
         }
         else if (layout.earlier.some((i) => i.id === id)) {
@@ -461,7 +473,9 @@ export function CommentLayer({ artifactId, rootId, ownerName, comments, canShare
             setThread(null);
     };
     const edit = async (item, body) => {
-        const value = { ...item.value, body };
+        // `resolved` is the owner's to set, and the server keeps it through an edit; sending it back is refused.
+        const { resolved: _resolved, ...rest } = item.value;
+        const value = { ...rest, body };
         if (item.where === 'device') {
             replaceDeviceNote(artifactId, item.id, value);
             refreshDevice();
@@ -486,19 +500,29 @@ export function CommentLayer({ artifactId, rootId, ownerName, comments, canShare
         setShared(sharedFrom(r.body));
         return null;
     };
+    const resolveThread = async (item, resolved, note) => {
+        const r = await call(resolveUrl, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ entry: item.id, resolved, ...(note ? { note } : {}) }) });
+        if (r.status !== 200)
+            return typeof r.body.error === 'string' ? r.body.error : 'that did not save; try again';
+        const s = await call(stateUrl);
+        if (s.status === 200)
+            setShared(sharedFrom(s.body));
+        return null;
+    };
     const open = layout.placed.find((p) => p.item.id === thread);
     const openItem = open?.item ?? layout.earlier.find((i) => i.id === thread);
-    const count = tops.length;
-    const overlay = mounted ? (_jsxs("div", { "data-comment-ui": true, "data-nospeak": true, className: "font-sans", style: theme, children: [missing ? (_jsxs("div", { "data-comment-missing": true, role: "status", className: "fixed inset-x-3 top-3 z-50 mx-auto max-w-sm rounded-xl border border-[color:var(--a-line-strong)] bg-[color:var(--a-surface)] p-4 font-sans text-sm leading-snug text-[color:var(--a-strong)] shadow-xl", children: [_jsxs("div", { className: "flex items-start gap-3", children: [_jsx("p", { className: "m-0 flex-1", children: "That comment can't be shown to you. Comments on this page are visible to its owner and admins." }), _jsx("button", { type: "button", "aria-label": "Close", onClick: () => setMissing(false), className: "-mr-1 -mt-1 px-1 text-lg leading-none opacity-60", children: "\u00D7" })] }), !signedIn && signIn ? (_jsx("a", { "data-comment-missing-sign-in": true, href: signInBack(signIn), className: "mt-3 inline-block rounded-full px-4 py-1.5 font-medium no-underline", style: { background: accent, color: 'var(--a-on-accent, #111)' }, children: "Sign in" })) : null] })) : null, showPins ? layout.placed.map(({ item, left, top, box }) => (_jsxs("div", { children: [box ? (_jsx("div", { "data-comment-box": item.id, "aria-hidden": true, className: "pointer-events-none absolute z-30 rounded-md border-2", style: { left: box.left, top: box.top, width: box.width, height: box.height, borderColor: accent, borderStyle: item.kind === 'personal' ? 'dashed' : 'solid', opacity: thread === item.id ? 1 : 0.55 } })) : null, _jsx(Pin, { item: item, left: left, top: top, accent: accent, ground: ground, onOpen: () => setThread(thread === item.id ? null : item.id) })] }, item.id))) : null, chip && !draft ? (
+    const count = tops.filter((i) => !resolvedOf(i)).length;
+    const overlay = mounted ? (_jsxs("div", { "data-comment-ui": true, "data-nospeak": true, className: "font-sans", style: theme, children: [missing ? (_jsxs("div", { "data-comment-missing": true, role: "status", className: "fixed inset-x-3 top-3 z-50 mx-auto max-w-sm rounded-xl border border-[color:var(--a-line-strong)] bg-[color:var(--a-surface)] p-4 font-sans text-sm leading-snug text-[color:var(--a-strong)] shadow-xl", children: [_jsxs("div", { className: "flex items-start gap-3", children: [_jsx("p", { className: "m-0 flex-1", children: "That comment can't be shown to you. Comments on this page are visible to its owner and admins." }), _jsx("button", { type: "button", "aria-label": "Close", onClick: () => setMissing(false), className: "-mr-1 -mt-1 px-1 text-lg leading-none opacity-60", children: "\u00D7" })] }), !signedIn && signIn ? (_jsx("a", { "data-comment-missing-sign-in": true, href: signInBack(signIn), className: "mt-3 inline-block rounded-full px-4 py-1.5 font-medium no-underline", style: { background: accent, color: 'var(--a-on-accent, #111)' }, children: "Sign in" })) : null] })) : null, showPins ? layout.placed.map(({ item, left, top, box }) => (_jsxs("div", { children: [box && !resolvedOf(item) ? (_jsx("div", { "data-comment-box": item.id, "aria-hidden": true, className: "pointer-events-none absolute z-30 rounded-md border-2", style: { left: box.left, top: box.top, width: box.width, height: box.height, borderColor: accent, borderStyle: item.kind === 'personal' ? 'dashed' : 'solid', opacity: thread === item.id ? 1 : 0.55 } })) : null, _jsx(Pin, { item: item, left: left, top: top, accent: accent, ground: ground, onOpen: () => setThread(thread === item.id ? null : item.id) })] }, item.id))) : null, chip && !draft ? (
             // On a phone the button sits at the TOP of the screen, never beside the selection: that is
             // where iOS draws its own Copy / Look Up menu, and the two fought for the same tap (Gary,
             // 2026-09-29: "I keep trying to fight with the Apple pop-up"). A mouse keeps it by the text.
-            _jsx("button", { type: "button", "data-comment-chip": true, "data-comment-chip-at": onTouch() ? 'top' : 'selection', className: onTouch() ? 'fixed left-1/2 z-50 -translate-x-1/2 rounded-full px-5 py-2 text-sm font-medium shadow-lg' : 'absolute z-50 -translate-x-full rounded-full px-3 py-1 text-xs font-medium shadow-lg', style: onTouch() ? { top: 'calc(env(safe-area-inset-top, 0px) + 12px)', background: accent, color: 'var(--a-on-accent, #111)' } : { left: chip.x, top: chip.y, background: accent, color: 'var(--a-on-accent, #111)' }, onMouseDown: (e) => e.preventDefault(), onClick: () => { setDraft(chip); setChip(null); }, children: "Comment" })) : null, draft ? (_jsx(Floating, { x: draft.x, y: draft.y, children: _jsx(CommentCard, { ownerName: ownerName, mode: comments, canShare: canShare, signedIn: signedIn && onServer, quote: draft.quote, accent: accent, signIn: signIn, voice: host, onSave: (body, share, memo, by) => saveNew(body, share, draft, memo, by), onCancel: () => setDraft(null) }) })) : null, openItem && open ? (_jsx(Floating, { x: open.left + 28, y: open.top, children: _jsx(Thread, { item: openItem, replies: items.filter((i) => i.value.parent === openItem.id), canReply: openItem.kind === 'shared' && canShare, accent: accent, audioDb: audioDb, onClose: () => setThread(null), onRemove: remove, onEdit: edit, onReply: reply }) })) : null, drag ? (_jsx("div", { "aria-hidden": true, className: "pointer-events-none fixed z-40 rounded-md border-2 border-dashed", style: { left: Math.min(drag.x1, drag.x2), top: Math.min(drag.y1, drag.y2), width: Math.abs(drag.x2 - drag.x1), height: Math.abs(drag.y2 - drag.y1), borderColor: accent, background: `color-mix(in srgb, ${accent} 12%, transparent)` } })) : null, _jsxs("div", { className: "fixed right-4 z-40 flex flex-col items-end gap-2", style: { bottom: 'calc(env(safe-area-inset-bottom, 0px) + 5.5rem)' }, children: [panel ? (_jsxs("div", { "data-comment-panel": true, className: "w-64 rounded-xl border border-[color:var(--a-line-strong)] bg-[color:var(--a-surface)] p-3 text-xs text-[color:var(--a-strong)] shadow-xl", children: [_jsx("p", { className: "opacity-80", children: "Select any text, or hold and drag a box over anything, to leave a comment." }), isOwner ? _jsx("p", { "data-comment-owner": true, className: "mt-1 opacity-80", children: "This is your page: you see every comment, with the name of who left it." }) : null, _jsx("button", { type: "button", "data-comment-pins-toggle": true, className: "mt-2 underline", onClick: () => setShowPins((v) => !v), children: showPins ? 'Hide comments' : 'Show comments' })] })) : null, _jsx("button", { type: "button", "data-comment-button": true, "aria-expanded": panel, onClick: () => setPanel((v) => !v), className: "rounded-full border px-3 py-1.5 text-xs font-medium shadow-lg backdrop-blur", style: { borderColor: accent, color: accent, background: `color-mix(in srgb, ${ground} 85%, transparent)` }, children: count ? `Comments · ${count}` : 'Comment' })] })] })) : null;
-    return (_jsxs(_Fragment, { children: [_jsx("span", { hidden: true, "data-comment-layer": comments, "data-comment-can-share": canShare ? 'yes' : 'no' }), mounted && layout.earlier.length ? (_jsxs("section", { "data-comments-earlier": true, "data-comment-ui": true, "data-nospeak": true, className: "mx-auto max-w-2xl px-6 pb-16 text-sm", children: [_jsx("p", { className: "text-[11px] uppercase tracking-[0.2em]", style: { color: accent }, children: "Comments on earlier versions" }), _jsx("ul", { className: "m-0 mt-2 grid list-none gap-3 p-0", children: layout.earlier.map((item) => (_jsxs("li", { "data-comment-earlier-id": item.id, ...(highlight === item.id ? { 'data-comment-highlight': '' } : {}), className: "m-0 border-l-2 py-1 pl-3", style: { borderColor: accent, borderStyle: item.kind === 'personal' ? 'dashed' : 'solid', ...(highlight === item.id ? { background: `color-mix(in srgb, ${accent} 14%, transparent)` } : {}) }, children: [item.value.anchor.kind === 'text' ? _jsxs("span", { className: "block text-[13px] italic opacity-70", children: ["\u201C", item.value.anchor.quote, "\u201D"] }) : _jsx("span", { className: "block text-[13px] italic opacity-70", children: "A box on part of the page that has changed" }), _jsx("span", { className: "block whitespace-pre-wrap text-[15px] text-[color:var(--a-strong)]", children: item.value.body }), _jsxs("span", { className: "block text-xs opacity-60", children: [item.kind === 'personal' ? 'only you' : item.name, ` · version ${item.value.version}`, item.mine ? _jsx("button", { type: "button", onClick: () => void remove(item), className: "ml-2 underline", children: "delete" }) : null] })] }, item.id))) })] })) : null, overlay ? createPortal(overlay, document.body) : null] }));
+            _jsx("button", { type: "button", "data-comment-chip": true, "data-comment-chip-at": onTouch() ? 'top' : 'selection', className: onTouch() ? 'fixed left-1/2 z-50 -translate-x-1/2 rounded-full px-5 py-2 text-sm font-medium shadow-lg' : 'absolute z-50 -translate-x-full rounded-full px-3 py-1 text-xs font-medium shadow-lg', style: onTouch() ? { top: 'calc(env(safe-area-inset-top, 0px) + 12px)', background: accent, color: 'var(--a-on-accent, #111)' } : { left: chip.x, top: chip.y, background: accent, color: 'var(--a-on-accent, #111)' }, onMouseDown: (e) => e.preventDefault(), onClick: () => { setDraft(chip); setChip(null); }, children: "Comment" })) : null, draft ? (_jsx(Floating, { x: draft.x, y: draft.y, children: _jsx(CommentCard, { ownerName: ownerName, mode: comments, canShare: canShare, signedIn: signedIn && onServer, quote: draft.quote, accent: accent, signIn: signIn, voice: host, onSave: (body, share, memo, by) => saveNew(body, share, draft, memo, by), onCancel: () => setDraft(null) }) })) : null, openItem && open ? (_jsx(Floating, { x: open.left + 28, y: open.top, children: _jsx(Thread, { item: openItem, replies: items.filter((i) => i.value.parent === openItem.id), canReply: openItem.kind === 'shared' && canShare, canResolve: openItem.kind === 'shared' && isOwner, startExpanded: expanded === openItem.id, accent: accent, audioDb: audioDb, onClose: () => { setThread(null); setExpanded(null); }, onRemove: remove, onEdit: edit, onReply: reply, onResolve: resolveThread }, openItem.id) })) : null, drag ? (_jsx("div", { "aria-hidden": true, className: "pointer-events-none fixed z-40 rounded-md border-2 border-dashed", style: { left: Math.min(drag.x1, drag.x2), top: Math.min(drag.y1, drag.y2), width: Math.abs(drag.x2 - drag.x1), height: Math.abs(drag.y2 - drag.y1), borderColor: accent, background: `color-mix(in srgb, ${accent} 12%, transparent)` } })) : null, _jsxs("div", { className: "fixed right-4 z-40 flex flex-col items-end gap-2", style: { bottom: 'calc(env(safe-area-inset-bottom, 0px) + 5.5rem)' }, children: [panel ? (_jsxs("div", { "data-comment-panel": true, className: "w-64 rounded-xl border border-[color:var(--a-line-strong)] bg-[color:var(--a-surface)] p-3 text-xs text-[color:var(--a-strong)] shadow-xl", children: [_jsx("p", { className: "opacity-80", children: "Select any text, or hold and drag a box over anything, to leave a comment." }), isOwner ? _jsx("p", { "data-comment-owner": true, className: "mt-1 opacity-80", children: "This is your page: you see every comment, with the name of who left it." }) : null, _jsx("button", { type: "button", "data-comment-pins-toggle": true, className: "mt-2 underline", onClick: () => setShowPins((v) => !v), children: showPins ? 'Hide comments' : 'Show comments' })] })) : null, _jsx("button", { type: "button", "data-comment-button": true, "aria-expanded": panel, onClick: () => setPanel((v) => !v), className: "rounded-full border px-3 py-1.5 text-xs font-medium shadow-lg backdrop-blur", style: { borderColor: accent, color: accent, background: `color-mix(in srgb, ${ground} 85%, transparent)` }, children: count ? `Comments · ${count}` : 'Comment' })] })] })) : null;
+    return (_jsxs(_Fragment, { children: [_jsx("span", { hidden: true, "data-comment-layer": comments, "data-comment-can-share": canShare ? 'yes' : 'no' }), mounted && layout.earlier.length ? (_jsxs("section", { "data-comments-earlier": true, "data-comment-ui": true, "data-nospeak": true, className: "mx-auto max-w-2xl px-6 pb-16 text-sm", children: [_jsx("p", { className: "text-[11px] uppercase tracking-[0.2em]", style: { color: accent }, children: "Comments on earlier versions" }), _jsx("ul", { className: "m-0 mt-2 grid list-none gap-3 p-0", children: layout.earlier.map((item) => (_jsxs("li", { "data-comment-earlier-id": item.id, ...(highlight === item.id ? { 'data-comment-highlight': '' } : {}), className: "m-0 border-l-2 py-1 pl-3", style: { borderColor: accent, borderStyle: item.kind === 'personal' ? 'dashed' : 'solid', ...(highlight === item.id ? { background: `color-mix(in srgb, ${accent} 14%, transparent)` } : {}) }, children: [resolvedOf(item) ? _jsxs("span", { "data-comment-resolved-line": true, className: "block text-[13px] font-medium", style: { color: accent }, children: ["\u2713 ", resolvedLine(resolvedOf(item))] }) : null, item.value.anchor.kind === 'text' ? _jsxs("span", { className: "block text-[13px] italic opacity-70", children: ["\u201C", item.value.anchor.quote, "\u201D"] }) : _jsx("span", { className: "block text-[13px] italic opacity-70", children: "A box on part of the page that has changed" }), _jsx("span", { className: "block whitespace-pre-wrap text-[15px] text-[color:var(--a-strong)]", children: item.value.body }), _jsxs("span", { className: "block text-xs opacity-60", children: [item.kind === 'personal' ? 'only you' : item.name, ` · version ${item.value.version}`, item.mine ? _jsx("button", { type: "button", onClick: () => void remove(item), className: "ml-2 underline", children: "delete" }) : null] })] }, item.id))) })] })) : null, overlay ? createPortal(overlay, document.body) : null] }));
 }
 function Pin({ item, left, top, accent, ground, onOpen }) {
     const personal = item.kind === 'personal';
-    return (_jsx("button", { type: "button", "data-comment-pin": item.kind, "data-comment-id": item.id, onClick: onOpen, "aria-label": personal ? 'Your personal note (only you)' : `Comment by ${item.name}`, className: "absolute z-30 flex h-6 min-w-6 items-center justify-center gap-1 rounded-full border-2 px-1.5 text-[10px] font-semibold shadow", style: { left, top, borderColor: accent, background: personal ? ground : accent, color: personal ? accent : 'var(--a-on-accent, #111)' }, children: personal ? _jsx("span", { children: "only you" }) : _jsx("span", { "aria-hidden": true, children: "\u25CF" }) }));
+    const resolved = resolvedOf(item);
+    return (_jsx("button", { type: "button", "data-comment-pin": item.kind, "data-comment-id": item.id, onClick: onOpen, ...(resolved ? { 'data-comment-resolved': '' } : {}), "aria-label": personal ? 'Your personal note (only you)' : resolved ? `${resolvedLine(resolved)}. Comment by ${item.name}` : `Comment by ${item.name}`, className: "absolute z-30 flex h-6 min-w-6 items-center justify-center gap-1 rounded-full border-2 px-1.5 text-[10px] font-semibold shadow", style: { left, top, borderColor: accent, background: personal || resolved ? ground : accent, color: personal || resolved ? accent : 'var(--a-on-accent, #111)', ...(resolved ? { opacity: 0.45 } : {}) }, children: personal ? _jsx("span", { children: "only you" }) : resolved ? _jsx("span", { "aria-hidden": true, children: "\u2713" }) : _jsx("span", { "aria-hidden": true, children: "\u25CF" }) }));
 }
 function Floating({ x, y, children }) {
     // Kept inside the screen on a phone, where the margin a pin sits in may be the screen's edge.
@@ -506,12 +530,25 @@ function Floating({ x, y, children }) {
     const left = typeof window === 'undefined' ? x : Math.max(window.scrollX + 8, Math.min(x, window.scrollX + window.innerWidth - width - 8));
     return _jsx("div", { className: "absolute z-50", style: { left, top: y }, children: children });
 }
-function Thread({ item, replies, canReply, accent, audioDb, onClose, onRemove, onEdit, onReply }) {
+function Thread({ item, replies, canReply, canResolve = false, startExpanded = false, accent, audioDb, onClose, onRemove, onEdit, onReply, onResolve }) {
     const [replying, setReplying] = useState(false);
-    return (_jsxs("div", { "data-comment-thread": true, "data-comment-ui": true, "data-nospeak": true, className: "w-[min(22rem,calc(100vw-2rem))] rounded-xl border border-[color:var(--a-line-strong)] bg-[color:var(--a-surface)] p-3 text-sm text-[color:var(--a-strong)] shadow-xl", children: [_jsxs("div", { className: "mb-2 flex items-center justify-between text-[11px] uppercase tracking-[0.15em]", style: { color: accent }, children: [_jsx("span", { children: item.kind === 'personal' ? 'Only you' : 'Comment' }), _jsx("button", { type: "button", onClick: onClose, "aria-label": "Close", className: "opacity-70 hover:opacity-100", children: "\u00D7" })] }), item.value.anchor.kind === 'text' ? _jsx("p", { className: "mb-2 line-clamp-2 border-l-2 pl-2 text-[13px] italic opacity-70", style: { borderColor: accent }, children: item.value.anchor.quote }) : null, _jsx(Entry, { item: item, accent: accent, audioDb: audioDb, onRemove: onRemove, onEdit: onEdit }), replies.length ? _jsx("ul", { className: "m-0 mt-2 grid list-none gap-2 border-l pl-3 p-0", children: replies.map((r) => _jsx("li", { className: "m-0", children: _jsx(Entry, { item: r, accent: accent, audioDb: audioDb, onRemove: onRemove, onEdit: onEdit }) }, r.id)) }) : null, canReply ? (replying
+    const [resolving, setResolving] = useState(false);
+    const [error, setError] = useState(null);
+    const [showResolved, setShowResolved] = useState(startExpanded);
+    const resolved = resolvedOf(item);
+    const shell = 'w-[min(22rem,calc(100vw-2rem))] rounded-xl border border-[color:var(--a-line-strong)] bg-[color:var(--a-surface)] p-3 text-sm text-[color:var(--a-strong)] shadow-xl';
+    const reopen = canResolve && onResolve ? (_jsx("button", { type: "button", "data-comment-reopen": true, className: "ml-3 text-xs underline", onClick: async () => setError(await onResolve(item, false)), children: "Reopen" })) : null;
+    if (resolved && !showResolved) {
+        return (_jsxs("div", { "data-comment-thread": true, "data-comment-thread-resolved": true, "data-comment-ui": true, "data-nospeak": true, className: shell, children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsxs("p", { "data-comment-resolved-line": true, className: "m-0 flex-1 text-[14px]", children: [_jsx("span", { "aria-hidden": true, style: { color: accent }, children: "\u2713 " }), resolvedLine(resolved)] }), _jsx("button", { type: "button", onClick: onClose, "aria-label": "Close", className: "opacity-70 hover:opacity-100", children: "\u00D7" })] }), _jsxs("p", { className: "m-0 mt-1 text-xs opacity-60", children: [resolved.by ? `by ${resolved.by}` : null, _jsxs("button", { type: "button", "data-comment-expand": true, className: resolved.by ? 'ml-3 underline' : 'underline', onClick: () => setShowResolved(true), children: ["Show comment", replies.length ? ` and ${replies.length} ${replies.length === 1 ? 'reply' : 'replies'}` : ''] }), reopen] }), error ? _jsx("p", { role: "alert", className: "text-xs text-amber-500", children: error }) : null] }));
+    }
+    return (_jsxs("div", { "data-comment-thread": true, "data-comment-ui": true, "data-nospeak": true, className: shell, children: [_jsxs("div", { className: "mb-2 flex items-center justify-between text-[11px] uppercase tracking-[0.15em]", style: { color: accent }, children: [_jsx("span", { children: item.kind === 'personal' ? 'Only you' : resolved ? 'Resolved comment' : 'Comment' }), _jsx("button", { type: "button", onClick: onClose, "aria-label": "Close", className: "opacity-70 hover:opacity-100", children: "\u00D7" })] }), resolved ? _jsxs("p", { "data-comment-resolved-line": true, className: "m-0 mb-2 text-[13px]", style: { color: accent }, children: ["\u2713 ", resolvedLine(resolved), resolved.by ? _jsx("span", { className: "opacity-70", children: ` · ${resolved.by}` }) : null] }) : null, item.value.anchor.kind === 'text' ? _jsx("p", { className: "mb-2 line-clamp-2 border-l-2 pl-2 text-[13px] italic opacity-70", style: { borderColor: accent }, children: item.value.anchor.quote }) : null, _jsx(Entry, { item: item, accent: accent, audioDb: audioDb, onRemove: onRemove, onEdit: onEdit }), replies.length ? _jsx("ul", { className: "m-0 mt-2 grid list-none gap-2 border-l pl-3 p-0", children: replies.map((r) => _jsx("li", { className: "m-0", children: _jsx(Entry, { item: r, accent: accent, audioDb: audioDb, onRemove: onRemove, onEdit: onEdit }) }, r.id)) }) : null, canReply ? (replying
                 ? _jsx(InlineForm, { label: "Reply", accent: accent, onCancel: () => setReplying(false), onSubmit: async (b) => { const e = await onReply(item, b); if (!e)
                         setReplying(false); return e; } })
-                : _jsx("button", { type: "button", "data-comment-reply": true, onClick: () => setReplying(true), className: "mt-2 text-xs underline", children: "Reply" })) : null] }));
+                : _jsx("button", { type: "button", "data-comment-reply": true, onClick: () => setReplying(true), className: "mt-2 text-xs underline", children: "Reply" })) : null, canResolve && onResolve && !replying ? (resolved ? _jsx("p", { className: "m-0 mt-2", children: reopen })
+                : resolving
+                    ? _jsx(InlineForm, { label: "Resolve", accent: accent, optional: true, placeholder: "What changed (optional)", maxLength: MAX_RESOLVE_NOTE_CHARS, onCancel: () => setResolving(false), onSubmit: async (note) => { const e = await onResolve(item, true, note || undefined); if (!e)
+                            setResolving(false); return e; } })
+                    : _jsx("button", { type: "button", "data-comment-resolve": true, onClick: () => setResolving(true), className: canReply ? 'ml-3 mt-2 text-xs underline' : 'mt-2 text-xs underline', children: "Resolve" })) : null, error ? _jsx("p", { role: "alert", className: "text-xs text-amber-500", children: error }) : null] }));
 }
 /** Where a comment's recording plays from: its signed URL, or this browser's copy of a device note's. */
 function useAudioSrc(item, audioDb) {
@@ -539,9 +576,9 @@ function Entry({ item, accent, audioDb, onRemove, onEdit }) {
                 setEditing(false); return e; } });
     return (_jsxs("div", { children: [src ? _jsx(AudioPlay, { src: src, accent: accent }) : null, item.value.body ? _jsx("p", { className: "m-0 whitespace-pre-wrap text-[15px]", children: item.value.body }) : null, _jsxs("p", { className: "m-0 text-xs opacity-60", children: [item.kind === 'personal' ? (item.where === 'device' ? 'only you, on this device' : 'only you') : item.name, item.mine ? (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", "data-comment-edit": true, onClick: () => setEditing(true), className: "ml-2 underline", children: "edit" }), _jsx("button", { type: "button", "data-comment-delete": true, onClick: () => void onRemove(item), className: "ml-2 underline", children: "delete" })] })) : null] })] }));
 }
-function InlineForm({ label, initial = '', accent = 'currentColor', onSubmit, onCancel }) {
+function InlineForm({ label, initial = '', accent = 'currentColor', optional = false, placeholder, maxLength, onSubmit, onCancel }) {
     const [text, setText] = useState(initial);
     const [error, setError] = useState(null);
-    return (_jsxs("form", { className: "mt-2", onSubmit: async (e) => { e.preventDefault(); if (text.trim())
-            setError(await onSubmit(text.trim())); }, children: [_jsx("textarea", { value: text, autoFocus: true, rows: 2, onChange: (e) => setText(e.target.value), "aria-label": label, className: "w-full rounded-lg border border-[color:var(--a-line)] bg-transparent p-2", style: NO_ZOOM_FONT }), error ? _jsx("p", { role: "alert", className: "text-xs text-amber-500", children: error }) : null, _jsxs("div", { className: "mt-1 flex gap-3 text-xs", children: [_jsx("button", { type: "submit", disabled: !text.trim(), className: "rounded-full px-3 py-0.5 font-medium disabled:opacity-40", style: { background: accent, color: 'var(--a-on-accent, #111)' }, children: label }), _jsx("button", { type: "button", onClick: onCancel, className: "opacity-70", children: "Cancel" })] })] }));
+    return (_jsxs("form", { className: "mt-2", onSubmit: async (e) => { e.preventDefault(); if (optional || text.trim())
+            setError(await onSubmit(text.trim())); }, children: [_jsx("textarea", { value: text, autoFocus: true, rows: 2, onChange: (e) => setText(optional ? e.target.value.replace(/[\r\n]+/g, ' ') : e.target.value), "aria-label": optional && placeholder ? placeholder : label, placeholder: placeholder, maxLength: maxLength, className: "w-full rounded-lg border border-[color:var(--a-line)] bg-transparent p-2", style: NO_ZOOM_FONT }), error ? _jsx("p", { role: "alert", className: "text-xs text-amber-500", children: error }) : null, _jsxs("div", { className: "mt-1 flex gap-3 text-xs", children: [_jsx("button", { type: "submit", disabled: !optional && !text.trim(), className: "rounded-full px-3 py-0.5 font-medium disabled:opacity-40", style: { background: accent, color: 'var(--a-on-accent, #111)' }, children: label }), _jsx("button", { type: "button", onClick: onCancel, className: "opacity-70", children: "Cancel" })] })] }));
 }

package/lib/routes/artifacts.d.ts

@@ -156,6 +156,11 @@ export declare function createArtifactRoutes(config: ArtifactRoutesConfig): {
         }>;
     }) => Promise<NextResponse<unknown>>;
     COMMENTS_FEED: (req: NextRequest) => Promise<NextResponse<unknown>>;
+    RESOLVE: (req: NextRequest, { params }: {
+        params: Promise<{
+            id: string;
+        }>;
+    }) => Promise<NextResponse<unknown>>;
     Page: ({ params, searchParams }: PageProps) => Promise<import("react").JSX.Element>;
     generateMetadata: ({ params }: Params) => Promise<Metadata>;
     VersionPage: ({ params, searchParams }: VersionProps) => Promise<import("react").JSX.Element>;

package/lib/routes/state-routes.d.ts

@@ -50,5 +50,6 @@ export declare function createStateRoutes(ctx: StateRoutesContext): {
     STATE_POST: (req: NextRequest, { params }: Params) => Promise<NextResponse<unknown> | undefined>;
     RESPONSES: (req: NextRequest, { params }: Params) => Promise<NextResponse<unknown>>;
     COMMENTS_FEED: (req: NextRequest) => Promise<NextResponse<unknown>>;
+    RESOLVE: (req: NextRequest, { params }: Params) => Promise<NextResponse<unknown>>;
 };
 export {};

package/lib/routes/state-routes.js

@@ -5,6 +5,9 @@
 //   GET  /api/artifacts/<id>/responses  publish key; every answer with who (?format=csv)
 //   DELETE /api/artifacts/<id>/responses?reader=<key>  publish key; one reader's answers
 //   GET  /api/comments?since=<ISO>      publish key; every shared comment on any page after a time
+//                                       (&open=1: leave out threads that are resolved)
+//   POST /api/artifacts/<id>/resolve    publish key, or the owner or an admin signed in; resolve or
+//                                       reopen one comment thread { entry, resolved?, note?, by? }
 //
 // Who is writing: the grant a gated page already uses, or on a page with `writers: anyone`, an
 // anonymous id in an HttpOnly cookie. When both are present the anonymous answers move to the
@@ -16,7 +19,7 @@ import { ARTIFACT_ID_RE } from './ids.js';
 import { GRANT_COOKIE, decide, firstName, signInUrl, verifyGrant } from '../artifacts/reader.js';
 import { isUnlocked, unlockCookieName } from '../artifacts/unlock.js';
 import { ANON_WRITES_PER_MINUTE, MAX_ENTRIES_PER_SLOT, checkValue, effectiveWriters, slotVisibility } from '../artifacts/state.js';
-import { COMMENTS_SLOT, validateComment } from '../artifacts/comments.js';
+import { COMMENTS_SLOT, MAX_COMMENT_NAME_CHARS, cleanResolveNote, resolutionOf, validateComment } from '../artifacts/comments.js';
 import { isCommentAudioPath } from '../artifacts/audio.js';
 import { readerKeyFor } from '../artifacts/state-store.js';
 import { NOTES_SLOT, checkNoteValue, checklistAnswerIds, hasNotesWidget } from '../artifacts/widgets.js';
@@ -24,6 +27,7 @@ import { CHECKLIST_SLOT, checkChecklistValue } from '../artifacts/checklist.js';
 import { responsesCsv, responsesOf, stateView } from '../artifacts/state-view.js';
 export const ANON_COOKIE = 'artifact_anon';
 const ANON_ID = /^[A-Za-z0-9]{24}$/;
+const ENTRY_ID = /^[A-Za-z0-9_-]{1,128}$/;
 const MAX_BODY = 16 * 1024;
 /** The most comments one feed answer carries. A caller that gets this many moves its cursor to the
  *  last row's `at` and asks again. */
@@ -266,6 +270,10 @@ export function createStateRoutes(ctx) {
                 if (op === 'replace' && seen.has(entryId) && (seen.get(entryId).parent ?? null) !== (c.value.parent ?? null))
                     return json({ error: 'an edit cannot move a comment into or out of a thread' }, 400);
                 value = c.value;
+                // Resolving is the owner's, never the writer's: an edit keeps the thread as it was.
+                const prev = op === 'replace' ? resolutionOf(seen.get(entryId)) : null;
+                if (prev)
+                    value = { ...c.value, resolved: prev };
             }
             if (op === 'replace') {
                 const r = await ctx.state.replace({ artifactId: id, slot, readerKey: writer.key, entryId: entryId, value });
@@ -321,13 +329,23 @@ export function createStateRoutes(ctx) {
     /** GET /api/comments?since=<ISO>: every SHARED comment on any of this host's pages written after
      *  `since` (exclusive), oldest first, at most FEED_MAX, each with a link that opens it on the
      *  page. It reads the `comments` slot of the state core only; personal notes live in a store no
-     *  publisher route reads, so they cannot appear here. The publisher's own notifier polls it. */
+     *  publisher route reads, so they cannot appear here. The publisher's own notifier polls it.
+     *
+     *  Each row carries `resolved`: its THREAD's resolution (a reply carries its parent's), or null.
+     *  `&open=1` leaves out every row of a resolved thread, except a reply written after the thread
+     *  was resolved, which is news about it. `cursor` is the `at` of the last comment READ, filtered
+     *  or not, and `more` says a full page was read; a caller paging with `open=1` follows `cursor`,
+     *  since the last row it was given can sit well before it. */
     async function COMMENTS_FEED(req) {
         if (!isPublisherAuthed(req, ctx))
             return json({ error: 'Unauthorized' }, 401);
         const since = feedSince(req.nextUrl.searchParams.get('since'));
         if (!since)
             return json({ error: 'since must be an ISO 8601 time with a zone, like 2026-09-28T12:00:00Z' }, 400);
+        const openParam = req.nextUrl.searchParams.get('open');
+        if (openParam !== null && !['1', 'true', '0', 'false'].includes(openParam))
+            return json({ error: 'open is 1 or 0' }, 400);
+        const openOnly = openParam === '1' || openParam === 'true';
         if (!ctx.state)
             return json({ error: 'this host keeps no answers' }, 501);
         if (!ctx.state.slotSince)
@@ -337,6 +355,14 @@ export function createStateRoutes(ctx) {
         const pages = new Map();
         const pageOf = (id) => { if (!pages.has(id))
             pages.set(id, ctx.store.get(id)); return pages.get(id); };
+        // A reply's thread is resolved on its parent, which may sit outside this window: read the page's
+        // comments once, and only for a page that has a reply in it.
+        const threads = new Map();
+        const commentsOf = (id) => {
+            if (!threads.has(id))
+                threads.set(id, ctx.state.entries(id).then((all) => new Map(all.filter((e) => e.slot === COMMENTS_SLOT).map((e) => [e.id, e]))));
+            return threads.get(id);
+        };
         const comments = [];
         for (const e of entries) {
             const a = await pageOf(e.artifactId);
@@ -344,16 +370,98 @@ export function createStateRoutes(ctx) {
             if (!a)
                 continue;
             const v = e.value;
+            const resolved = resolutionOf(v.parent ? (await commentsOf(e.artifactId)).get(v.parent)?.value : v);
+            if (openOnly && resolved && !(v.parent && e.at > resolved.at))
+                continue;
             const audio = isCommentAudioPath(v.audio) && ctx.audioUrl ? await ctx.audioUrl(e.artifactId, v.audio) : null;
             comments.push({
                 artifactId: e.artifactId, title: a.title, entryId: e.id, parent: v.parent ?? null,
                 name: e.writer.anonymous ? null : e.writer.name?.trim() || 'a signed-in reader',
                 quote: v.anchor?.kind === 'text' ? v.anchor.quote : null, region: v.anchor?.kind === 'region',
-                body: v.body, transcript: v.transcript ?? null, audioUrl: audio, at: e.at,
+                body: v.body, transcript: v.transcript ?? null, audioUrl: audio, at: e.at, resolved,
                 link: `${ctx.pageUrl(e.artifactId)}#comment-${e.id}`,
             });
         }
-        return json({ now, comments });
+        return json({ now, comments, cursor: entries.length ? entries[entries.length - 1].at : null, more: entries.length >= FEED_MAX });
+    }
+    /** POST /api/artifacts/<id>/resolve: mark one comment thread done, or open it again (0.33.0).
+     *  Body { entry, resolved?: true|false (default true), note?: one line, at most 280, by?: one line }.
+     *  `entry` may name a reply: the thread it belongs to is what is resolved, and the answer's
+     *  `entry` names that thread's top comment.
+     *
+     *  Who: the publish key or a publisher pass (an agent on the operator's machine resolves with the
+     *  credential it publishes with, and may say who it is with `by`), or a reader signed in as the
+     *  page's owner or one of this hub's admins (named by their first name; `by` is ignored), from
+     *  this host's own pages as JSON. Everyone else is refused before the page is looked up. */
+    async function RESOLVE(req, { params }) {
+        const publisher = isPublisherAuthed(req, ctx);
+        let by = 'the publisher';
+        if (!publisher) {
+            const reader = verifyGrant(ctx.readerSecret(), req.cookies.get(GRANT_COOKIE)?.value);
+            if (!reader)
+                return json({ error: 'sign in as the page\'s owner, or send the publish key' }, 401);
+            if (!isOwner(reader))
+                return json({ error: 'only the page\'s owner, this hub\'s admins and the publisher resolve comments' }, 403);
+            const origin = req.headers.get('origin');
+            const site = req.headers.get('sec-fetch-site');
+            if ((origin !== null && origin !== siteOrigin) || (site !== null && site !== 'same-origin'))
+                return json({ error: 'wrong origin' }, 403);
+            if (!/^application\/json\b/i.test(req.headers.get('content-type') ?? ''))
+                return json({ error: 'send JSON' }, 415);
+            by = reader.name?.trim().split(/\s+/)[0] || 'the owner';
+        }
+        const raw = await req.text();
+        if (Buffer.byteLength(raw, 'utf8') > 4096)
+            return json({ error: 'request over 4 KB' }, 413);
+        let b;
+        try {
+            const parsed = JSON.parse(raw);
+            if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed))
+                return json({ error: 'body must be a JSON object' }, 400);
+            b = parsed;
+        }
+        catch {
+            return json({ error: 'body must be JSON' }, 400);
+        }
+        const unknownKeys = Object.keys(b).filter((k) => !['entry', 'resolved', 'note', 'by'].includes(k));
+        if (unknownKeys.length)
+            return json({ error: `unknown field: ${unknownKeys.join(', ')}; the body is { entry, resolved?, note?, by? }` }, 400);
+        if (typeof b.entry !== 'string' || !ENTRY_ID.test(b.entry))
+            return json({ error: 'entry is the id of the comment to resolve' }, 400);
+        if (b.resolved !== undefined && typeof b.resolved !== 'boolean')
+            return json({ error: 'resolved is true or false' }, 400);
+        const resolve = b.resolved !== false;
+        const note = cleanResolveNote(b.note);
+        if (!note.ok)
+            return json({ error: note.error }, 400);
+        if (!resolve && note.note)
+            return json({ error: 'reopening a thread takes no note' }, 400);
+        if (publisher && b.by !== undefined) {
+            if (typeof b.by !== 'string' || /[\r\n]/.test(b.by) || !b.by.trim() || b.by.trim().length > MAX_COMMENT_NAME_CHARS)
+                return json({ error: `by is one line of at most ${MAX_COMMENT_NAME_CHARS} characters` }, 400);
+            by = b.by.trim();
+        }
+        if (!ctx.state)
+            return json({ error: 'this host keeps no answers' }, 501);
+        if (!ctx.state.setResolved)
+            return json({ error: 'this host cannot resolve comments' }, 501);
+        const { id } = await params;
+        const a = ARTIFACT_ID_RE.test(id) ? await ctx.store.get(id) : null;
+        if (!a)
+            return json({ error: `no artifact with id ${id}` }, 404);
+        const all = new Map((await ctx.state.entries(id)).filter((e) => e.slot === COMMENTS_SLOT).map((e) => [e.id, e]));
+        const asked = all.get(b.entry);
+        if (!asked)
+            return json({ error: 'no comment with that id on this page' }, 404);
+        const parent = asked.value.parent;
+        const root = parent ? all.get(parent) : asked;
+        if (!root)
+            return json({ error: 'the comment this reply answers is gone' }, 404);
+        const resolution = resolve ? { at: new Date().toISOString(), by, ...(note.note ? { note: note.note } : {}) } : null;
+        const r = await ctx.state.setResolved({ artifactId: id, slot: COMMENTS_SLOT, entryId: root.id, resolved: resolution });
+        if (!r)
+            return json({ error: 'no comment with that id on this page' }, 404);
+        return json({ id, entry: root.id, resolved: resolution });
     }
-    return { STATE_GET, STATE_POST, RESPONSES, COMMENTS_FEED };
+    return { STATE_GET, STATE_POST, RESPONSES, COMMENTS_FEED, RESOLVE };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@supersuit/artifacts",
-  "version": "0.32.0",
+  "version": "0.33.0",
   "description": "Publish markdown as branded, read-aloud pages from a Next.js app: the artifacts store, the route factory, the read-along reader, brand packs, password and confidential pages, and share cards.",
   "license": "MIT",
   "type": "module",