🐛 FIX: review comments failed with 403 after serve restarted

Each start made a new token, so pages opened earlier were refused. The
token now persists in the settings folder, stale pages fetch the current
one and retry, and a failed save says so.

Author: austinginder

CHANGELOG.md

@@ -55,6 +55,12 @@ All notable changes to Wavelength. Versions follow semantic versioning.
 - `width` takes `monoBelow` (Hz): the low end below it is made mono and the rest keeps its width. The
   width effect's "narrowing removes" warning leaves out the low side signal it removes on purpose.
 
+### Fixed
+- `wavelength serve`: comments and previews failed with 403 in a page opened before the server started
+  again (after a rebuild or a login-item restart), because each start made a new token. The token is now
+  kept in the settings folder (readable by this user only), a page whose token is stale fetches the
+  current one and tries again, and a comment that can't be saved says so under the save button.
+
 ## [0.3.0] - 2026-09-26
 
 Highlights: VST2 hosting (Intel-only plugins under Rosetta); DAWproject import and export (songs open

src/serve.cpp

@@ -227,15 +227,30 @@ std::string fnv(const std::string &s) {
     return std::string(buf).substr(0, 12);
 }
 
+// The token pages send with every change. It lives in the settings folder (readable by this user only), so a
+// server started again (after a rebuild, by a login item) still accepts the pages already open; other sites
+// can never read it, which is all it guards against.
+std::string serveToken() {
+    const fs::path f = platform::dataDir() / "serve-token";
+    {
+        std::ifstream in(f);
+        std::string t;
+        if (in >> t && t.size() == 32 && t.find_first_not_of("0123456789abcdef") == std::string::npos) return t;
+    }
+    std::random_device rd;
+    std::mt19937_64 g(rd());
+    char buf[33];
+    std::snprintf(buf, sizeof buf, "%016llx%016llx", (unsigned long long)g(), (unsigned long long)g());
+    std::error_code ec;
+    fs::create_directories(f.parent_path(), ec);
+    std::ofstream(f) << buf << "\n";
+    fs::permissions(f, fs::perms::owner_read | fs::perms::owner_write, fs::perm_options::replace, ec);
+    return buf;
+}
+
 class Server {
 public:
-    explicit Server(const ServeOptions &o) : opt_(o), root_(fs::absolute(o.root)) {
-        std::random_device rd;
-        std::mt19937_64 g(rd());
-        char buf[33];
-        std::snprintf(buf, sizeof buf, "%016llx%016llx", (unsigned long long)g(), (unsigned long long)g());
-        token_ = buf;
-    }
+    explicit Server(const ServeOptions &o) : opt_(o), root_(fs::absolute(o.root)), token_(serveToken()) {}
     int run();
 
 private:

ui/editor.css

@@ -60,3 +60,4 @@ dialog.ed::backdrop { background: rgba(12, 14, 23, .6); backdrop-filter: blur(2p
 .ed-status { font-size: 12px; color: var(--accent); max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .ed-status.busy { color: var(--warn); }
 .ed-status.busy::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); margin-right: 6px; animation: pulse 1.2s infinite; }
+.ed-hint.err { color: var(--warn); }

ui/editor.js

@@ -17,6 +17,7 @@
 		sel: { b0: null, b1: null, tracks: new Set(), notes: [] }, loop: false, drag: null, userScrollAt: 0, follow: true,
 	};
 	let dlg, scroller, canvas, space, tip;
+	const HINT = 'Saved to review.json in the song folder with the bars, tracks, notes and time you selected.';
 
 	/* ---------- markup ---------- */
 	function build() {
@@ -57,7 +58,7 @@
 					<h4>Comment for the agent</h4>
 					<textarea id="ed-text" placeholder="What should change here? (Cmd+Enter to save)"></textarea>
 					<div class="ed-actions"><button class="ed-btn primary" id="ed-save">Save comment</button></div>
-					<div class="ed-hint">Saved to review.json in the song folder with the bars, tracks, notes and time you selected.</div>
+					<div class="ed-hint">${HINT}</div>
 				</section>
 				<h4 style="padding:12px 14px 0;margin:0">Comments <span class="r" id="ed-count"></span></h4>
 				<div class="ed-list" id="ed-list"></div>
@@ -575,12 +576,24 @@
 		const r = reference();
 		const body = { op: 'add', text, ref: r.ref || 'whole song', render: state.song.reportPath ? state.files[state.song.reportPath]?.[1] : null };
 		for (const k of ['bars', 'beats', 'time', 'tracks', 'notes']) if (r[k]) body[k] = r[k];
-		const res = await fetch('api/review?song=' + encodeURIComponent(state.slug), { method: 'POST', headers: postHeaders(), body: JSON.stringify(body) }).then(r => r.json());
-		if (res.comments) { E.comments = res.comments; $d('#ed-text').value = ''; renderComments(); badge(); dirty(); }
+		const res = await post(body);
+		if (res?.comments) { E.comments = res.comments; $d('#ed-text').value = ''; renderComments(); badge(); dirty(); }
 	}
 	async function op(body) {
-		const res = await fetch('api/review?song=' + encodeURIComponent(state.slug), { method: 'POST', headers: postHeaders(), body: JSON.stringify(body) }).then(r => r.json());
-		if (res.comments) { E.comments = res.comments; renderComments(); badge(); dirty(); }
+		const res = await post(body);
+		if (res?.comments) { E.comments = res.comments; renderComments(); badge(); dirty(); }
+	}
+	// a change to review.json; a failure shows under the save button instead of vanishing (the text stays in the box)
+	async function post(body) {
+		const hint = $d('.ed-hint');
+		try {
+			const res = await postJson('api/review?song=' + encodeURIComponent(state.slug), body);
+			hint.textContent = HINT; hint.classList.remove('err');
+			return res;
+		} catch (e) {
+			hint.textContent = `Not saved: ${e.message}. Reload the page and save again.`; hint.classList.add('err');
+			return null;
+		}
 	}
 	function renderComments() {
 		if (!dlg) return;

ui/index.html

@@ -330,8 +330,22 @@ <h2>Files</h2>
 // Every source knows where it sits in the song: `lead` seconds of silence at the start of the file
 // (the mix's lead-in), then song time from `start`. A bar preview starts mid-song with no lead-in and
 // loops. The playhead, seeking and the editor all work in song seconds.
-const TOKEN = document.querySelector('meta[name="wavelength-token"]')?.content || '';
+let TOKEN = document.querySelector('meta[name="wavelength-token"]')?.content || '';
 function postHeaders() { return { 'Content-Type': 'application/json', 'X-Wavelength-Token': TOKEN }; }
+// POST JSON and read the answer. A 403 means this page's token is stale (a server from before 0.4 made a new
+// one each start): take the current one from a fresh copy of the page and try once more.
+async function postJson(url, body) {
+	const send = () => fetch(url, { method: 'POST', headers: postHeaders(), body: JSON.stringify(body) });
+	let r = await send();
+	if (r.status === 403) {
+		const page = await fetch('./', { cache: 'no-store' }).then(x => x.text()).catch(() => '');
+		const m = page.match(/name="wavelength-token" content="([0-9a-f]+)"/);
+		if (m && m[1] !== TOKEN) { TOKEN = m[1]; r = await send(); }
+	}
+	const j = await r.json().catch(() => ({}));
+	if (!r.ok) throw new Error(j.error || `the server answered ${r.status}`);
+	return j;
+}
 const songLead = () => state.song?.report?.leadIn ?? state.song?.job?.leadIn ?? 0;
 function songSecNow() { return audio.currentTime - (state.srcLead ?? songLead()) + (state.srcStart || 0); }
 function seekSongSec(s, play) {
@@ -422,9 +436,9 @@ <h2>Files</h2>
 		state.pending = null; show(`Could not render ${spec.label}: ${r.error || r.status}`);
 	};
 	show(`Rendering ${spec.label}…`);
-	fetch('api/preview', { method: 'POST', headers: postHeaders(), body: JSON.stringify({ song: slug, tracks: spec.tracks || [], from: spec.from || 0, to: spec.to || 0 }) })
-		.then(r => r.json()).then(r => r.error ? (state.pending = null, show(`Could not render ${spec.label}: ${r.error}`)) : r.status === 'ready' ? done(r) : poll(r.id))
-		.catch(() => { state.pending = null; show('The server did not answer'); });
+	postJson('api/preview', { song: slug, tracks: spec.tracks || [], from: spec.from || 0, to: spec.to || 0 })
+		.then(r => r.error ? (state.pending = null, show(`Could not render ${spec.label}: ${r.error}`)) : r.status === 'ready' ? done(r) : poll(r.id))
+		.catch(e => { state.pending = null; show(`Could not render ${spec.label}: ${e.message || 'the server did not answer'}`); });
 	drawTimeline();
 }