feat(web): refresh the MR view in place when its source branch moves

A push to the source branch sends an mr-head event instead of the reload
banner. The page fetches itself, swaps the head-dependent regions, keeps
the reader's line, folds, tab and focus, and waits for unsent comments.

commit: e97c08ee5c24b3c1e3d6931238d9bd485833c889
author: brice · 2d ago · 2026-10-20 05:43 UTC
parent: b46e8c1
signature: GPG VerifiedCD88F9E564E0102646FB6077A1A07C7C7C3E349D · arch-gpg Verified for the committer email

19 files · +899 -450

M docs/merge-requests.md +14 -0


@@ -118,3 +118,17 @@ The rail keeps Files (including its `g f` shortcut) and Verdicts. Merge settings
118	118		are read-only information in the More (⋯) menu, available to every viewer.
119	119		Signing-key information is also there when a merge box offers signed modes;
120	120		merge actions remain restricted to their existing permissions.
	121	+
	122	+	## Live source-branch updates
	123	+
	124	+	A push to the source branch refreshes the web review in place: the diff, files
	125	+	rail, commits/checks footer, diff range and merge controls follow the new head.
	126	+	The review keeps its visible file/line, folded files and selected footer tab.
	127	+	The page request still reads only one 25-file window of hunks; the visible
	128	+	anchor's window is fetched too if needed, and other windows remain lazy.
	129	+
	130	+	While a comment is focused or has unsent edits, the refresh waits. A small
	131	+	“branch updated” status offers refresh now, which also refreshes in place
	132	+	and keeps unsent forms (including a comment whose old line disappeared).
	133	+	Emptying or cancelling the draft lets the pending refresh proceed. Submitting
	134	+	an ordinary comment navigates to the server's current review as usual.


@@ -118,3 +118,17 @@ The rail keeps Files (including its `g f` shortcut) and Verdicts. Merge settings
118	are read-only information in the More (⋯) menu, available to every viewer.	118		are read-only information in the More (⋯) menu, available to every viewer.
119	Signing-key information is also there when a merge box offers signed modes;	119		Signing-key information is also there when a merge box offers signed modes;
120	merge actions remain restricted to their existing permissions.	120		merge actions remain restricted to their existing permissions.
		121	+
		122	+	## Live source-branch updates
		123	+
		124	+	A push to the source branch refreshes the web review in place: the diff, files
		125	+	rail, commits/checks footer, diff range and merge controls follow the new head.
		126	+	The review keeps its visible file/line, folded files and selected footer tab.
		127	+	The page request still reads only one 25-file window of hunks; the visible
		128	+	anchor's window is fetched too if needed, and other windows remain lazy.
		129	+
		130	+	While a comment is focused or has unsent edits, the refresh waits. A small
		131	+	“branch updated” status offers refresh now, which also refreshes in place
		132	+	and keeps unsent forms (including a comment whose old line disappeared).
		133	+	Emptying or cancelling the draft lets the pending refresh proceed. Submitting
		134	+	an ordinary comment navigates to the server's current review as usual.

M internal/adapters/web/events.go +5 -1


@@ -31,7 +31,7 @@ import (
31	31		// GET /-/events?topic=repo:<name>&view=summary\|refs
32	32		// GET /-/events?topic=repo:<name>&view=commits&ref=<branch>&head=<sha>
33	33		// GET /-/events?topic=repo:<name>&view=mrs
34		-	// GET /-/events?topic=repo:<name>&view=mr&n=<number>&ref=<source branch>&target=<target branch>
	34	+	// GET /-/events?topic=repo:<name>&view=mr&n=<number>&ref=<source branch>&head=<sha>&target=<target branch>
35	35		// GET /-/events?topic=repo:<name>&view=issues
36	36		// GET /-/events?topic=repo:<name>&view=issue&n=<number>
37	37		// GET /-/events?topic=repo:<name>&view=actions

@@ -60,6 +60,10 @@ import (
60	60		// the badge of the merge box (a slot like mr-notice), when the
61	61		// mergeability of the request shown settles or a push moves its
62	62		// source or target
	63	+	// mr-head data: <div id="mr-head"></div>; the source branch moved.
	64	+	// ermiteMR fetches the current page and refreshes its head-dependent
	65	+	// regions in place, preserving the reader's position and drafts.
	66	+	// The replacement stream uses the new head for CI filtering.
63	67		// mr-notice data: <div id="mr-notice">…</div>, on the merge request and issue pages:
64	68		// something changed, with the link that reloads the page
65	69		// ci-run data: <tr id="run-<id>">…</tr> (the list of runs),

 //	GET /-/events?topic=repo:<name>&view=summary|refs
 //	GET /-/events?topic=repo:<name>&view=commits&ref=<branch>&head=<sha>
 //	GET /-/events?topic=repo:<name>&view=mrs
-//	GET /-/events?topic=repo:<name>&view=mr&n=<number>&ref=<source branch>&target=<target branch>
+//	GET /-/events?topic=repo:<name>&view=mr&n=<number>&ref=<source branch>&head=<sha>&target=<target branch>
 //	GET /-/events?topic=repo:<name>&view=issues
 //	GET /-/events?topic=repo:<name>&view=issue&n=<number>
 //	GET /-/events?topic=repo:<name>&view=actions
 //	                the badge of the merge box (a slot like mr-notice), when the
 //	                mergeability of the request shown settles or a push moves its
 //	                source or target
+//	mr-head         data: <div id="mr-head"></div>; the source branch moved.
+//	                ermiteMR fetches the current page and refreshes its head-dependent
+//	                regions in place, preserving the reader's position and drafts.
+//	                The replacement stream uses the new head for CI filtering.
 //	mr-notice       data: <div id="mr-notice">…</div>, on the merge request and issue pages:
 //	                something changed, with the link that reloads the page
 //	ci-run          data: <tr id="run-<id>">…</tr> (the list of runs),

M internal/adapters/web/events_test.go +24 -0


@@ -478,3 +478,27 @@ func TestCommitsBannerWithoutMergeRequests(t *testing.T) {
478	478		require.Len(t, got, 1)
479	479		assert.Contains(t, got[0].html, "the branch moved — reload")
480	480		}
	481	+
	482	+	func TestMRPushEventsKeepMergeability(t *testing.T) {
	483	+	t.Parallel()
	484	+	svc := mocks.NewMergeRequestService(t)
	485	+	svc.EXPECT().Mergeability(mock.Anything, mock.Anything, mock.Anything, int64(1)).
	486	+	Return(domain.Mergeability{State: domain.MergeabilityUpToDate}, nil).Twice()
	487	+	l := liveStream{s: &Server{cfg: Config{MergeRequests: svc}}, repo: "demo", view: "mr", n: "1", ref: "feature", target: "main"}
	488	+	ctx := context.WithValue(t.Context(), signedInKey{}, struct{}{})
	489	+	for _, ref := range []string{"feature", "main"} {
	490	+	fs, err := l.mrPushed(ctx, domain.PushEvent{Updates: []domain.RefUpdate{{Ref: "refs/heads/" + ref}}})
	491	+	require.NoError(t, err)
	492	+	if ref == "feature" {
	493	+	require.Len(t, fs, 2)
	494	+	assert.Equal(t, "mr-head", fs[0].event)
	495	+	assert.Equal(t, "event: mr-head\nid: b-1\ndata: <div id=\"mr-head\"></div>\n\n", formatEvent("b-1", fs[0].event, fs[0].html, true))
	496	+	} else {
	497	+	require.Len(t, fs, 1)
	498	+	}
	499	+	assert.Equal(t, "mr-mergeability", fs[len(fs)-1].event)
	500	+	for _, f := range fs {
	501	+	assert.NotEqual(t, "mr-notice", f.event)
	502	+	}
	503	+	}
	504	+	}


@@ -478,3 +478,27 @@ func TestCommitsBannerWithoutMergeRequests(t *testing.T) {
478	require.Len(t, got, 1)	478		require.Len(t, got, 1)
479	assert.Contains(t, got[0].html, "the branch moved — reload")	479		assert.Contains(t, got[0].html, "the branch moved — reload")
480	}	480		}
		481	+
		482	+	func TestMRPushEventsKeepMergeability(t *testing.T) {
		483	+	t.Parallel()
		484	+	svc := mocks.NewMergeRequestService(t)
		485	+	svc.EXPECT().Mergeability(mock.Anything, mock.Anything, mock.Anything, int64(1)).
		486	+	Return(domain.Mergeability{State: domain.MergeabilityUpToDate}, nil).Twice()
		487	+	l := liveStream{s: &Server{cfg: Config{MergeRequests: svc}}, repo: "demo", view: "mr", n: "1", ref: "feature", target: "main"}
		488	+	ctx := context.WithValue(t.Context(), signedInKey{}, struct{}{})
		489	+	for _, ref := range []string{"feature", "main"} {
		490	+	fs, err := l.mrPushed(ctx, domain.PushEvent{Updates: []domain.RefUpdate{{Ref: "refs/heads/" + ref}}})
		491	+	require.NoError(t, err)
		492	+	if ref == "feature" {
		493	+	require.Len(t, fs, 2)
		494	+	assert.Equal(t, "mr-head", fs[0].event)
		495	+	assert.Equal(t, "event: mr-head\nid: b-1\ndata: <div id=\"mr-head\"></div>\n\n", formatEvent("b-1", fs[0].event, fs[0].html, true))
		496	+	} else {
		497	+	require.Len(t, fs, 1)
		498	+	}
		499	+	assert.Equal(t, "mr-mergeability", fs[len(fs)-1].event)
		500	+	for _, f := range fs {
		501	+	assert.NotEqual(t, "mr-notice", f.event)
		502	+	}
		503	+	}
		504	+	}

M internal/adapters/web/fragments.go +2 -7


@@ -474,8 +474,7 @@ func (l *liveStream) issueNotice(ctx context.Context, number int64, text string)
474	474		// mrPushed announces a push to the source branch of the merge request shown,
475	475		// and has the badge follow a push to its source or its target.
476	476		func (l *liveStream) mrPushed(ctx context.Context, p domain.PushEvent) ([]fragment, error) {
477		-	n, err := strconv.ParseInt(l.n, 10, 64)
478		-	if err != nil {
	477	+	if _, err := strconv.ParseInt(l.n, 10, 64); err != nil {
479	478		return nil, nil
480	479		}
481	480		var out []fragment

@@ -483,11 +482,7 @@ func (l *liveStream) mrPushed(ctx context.Context, p domain.PushEvent) ([]fragme
483	482		for _, u := range p.Updates {
484	483		switch {
485	484		case l.ref != "" && u.Ref == "refs/heads/"+l.ref:
486		-	notice, err := l.notice(ctx, "the branch changed — reload", mrHref(l.repo, n))
487		-	if err != nil {
488		-	return nil, err
489		-	}
490		-	out = append(out, notice...)
	485	+	out = append(out, fragment{event: "mr-head", html: `<div id="mr-head"></div>`})
491	486		moved = true
492	487		case l.target != "" && u.Ref == "refs/heads/"+l.target:
493	488		moved = true

 // mrPushed announces a push to the source branch of the merge request shown,
 // and has the badge follow a push to its source or its target.
 func (l *liveStream) mrPushed(ctx context.Context, p domain.PushEvent) ([]fragment, error) {
-	n, err := strconv.ParseInt(l.n, 10, 64)
+	if _, err := strconv.ParseInt(l.n, 10, 64); err != nil {
-	if err != nil {
 		return nil, nil
 	}
 	var out []fragment
 	for _, u := range p.Updates {
 		switch {
 		case l.ref != "" && u.Ref == "refs/heads/"+l.ref:
-			notice, err := l.notice(ctx, "the branch changed — reload", mrHref(l.repo, n))
+			out = append(out, fragment{event: "mr-head", html: `<div id="mr-head"></div>`})
-			if err != nil {
-				return nil, err
-			}
-			out = append(out, notice...)
 			moved = true
 		case l.target != "" && u.Ref == "refs/heads/"+l.target:
 			moved = true

M internal/adapters/web/fragments.templ +1 -0


@@ -103,6 +103,7 @@ templ Live(l Layout) {
103	103		htmx:sse:error -> ermiteLive.error(event.detail.status);
104	104		htmx:sse:before:connection -> ermiteLive.gate(event);
105	105		home-list, repo-last-push, refs-list, commits-head, mr-notice, mr-mergeability, ci-run, ci-job, inbox -> ermiteLive.swap(event.detail.data);
	106	+	mr-head -> ermiteMR.headChanged();
106	107		gap -> ermiteLive.reload()"
107	108		></span>
108	109		}


@@ -103,6 +103,7 @@ templ Live(l Layout) {
103	htmx:sse:error -> ermiteLive.error(event.detail.status);	103		htmx:sse:error -> ermiteLive.error(event.detail.status);
104	htmx:sse:before:connection -> ermiteLive.gate(event);	104		htmx:sse:before:connection -> ermiteLive.gate(event);
105	home-list, repo-last-push, refs-list, commits-head, mr-notice, mr-mergeability, ci-run, ci-job, inbox -> ermiteLive.swap(event.detail.data);	105		home-list, repo-last-push, refs-list, commits-head, mr-notice, mr-mergeability, ci-run, ci-job, inbox -> ermiteLive.swap(event.detail.data);
		106	+	mr-head -> ermiteMR.headChanged();
106	gap -> ermiteLive.reload()"	107		gap -> ermiteLive.reload()"
107	></span>	108		></span>
108	}	109		}

M internal/adapters/web/fragments_templ.go +1 -1 generated file: collapsed

load diff

M internal/adapters/web/fragments_test.go +22 -0


@@ -7,6 +7,8 @@ import (
7	7		"strings"
8	8		"testing"
9	9
	10	+	"bnema.dev/ermite/internal/domain"
	11	+
10	12		"github.com/a-h/templ"
11	13		"github.com/stretchr/testify/assert"
12	14		"github.com/stretchr/testify/require"

@@ -77,3 +79,23 @@ func TestDiffControlsPassDataThroughAttributes(t *testing.T) {
77	79		assert.Contains(t, link, `this.dataset.view`)
78	80		assert.NotContains(t, link, "=== 'split'")
79	81		}
	82	+
	83	+	// The push signal is intentionally constant-sized: diff work belongs to the
	84	+	// subsequent windowed page request, not to each subscriber's event handler.
	85	+	func TestMRPushedHeadSignal(t *testing.T) {
	86	+	t.Parallel()
	87	+	l := liveStream{s: &Server{}, repo: "demo", view: "mr", n: "1", ref: "feature", target: "main"}
	88	+	for _, tt := range []struct {
	89	+	ref string
	90	+	want int
	91	+	}{{"refs/heads/feature", 1}, {"refs/heads/main", 0}, {"refs/heads/other", 0}} {
	92	+	fs, err := l.mrPushed(t.Context(), domain.PushEvent{Updates: []domain.RefUpdate{{Ref: tt.ref}}})
	93	+	require.NoError(t, err)
	94	+	require.Len(t, fs, tt.want)
	95	+	if tt.want > 0 {
	96	+	assert.Equal(t, "mr-head", fs[0].event)
	97	+	assert.Equal(t, `<div id="mr-head"></div>`, fs[0].html)
	98	+	assert.NotContains(t, fs[0].html, "the branch changed")
	99	+	}
	100	+	}
	101	+	}


@@ -7,6 +7,8 @@ import (
7	"strings"	7		"strings"
8	"testing"	8		"testing"
9		9
		10	+	"bnema.dev/ermite/internal/domain"
		11	+
10	"github.com/a-h/templ"	12		"github.com/a-h/templ"
11	"github.com/stretchr/testify/assert"	13		"github.com/stretchr/testify/assert"
12	"github.com/stretchr/testify/require"	14		"github.com/stretchr/testify/require"

@@ -77,3 +79,23 @@ func TestDiffControlsPassDataThroughAttributes(t *testing.T) {
77	assert.Contains(t, link, `this.dataset.view`)	79		assert.Contains(t, link, `this.dataset.view`)
78	assert.NotContains(t, link, "=== 'split'")	80		assert.NotContains(t, link, "=== 'split'")
79	}	81		}
		82	+
		83	+	// The push signal is intentionally constant-sized: diff work belongs to the
		84	+	// subsequent windowed page request, not to each subscriber's event handler.
		85	+	func TestMRPushedHeadSignal(t *testing.T) {
		86	+	t.Parallel()
		87	+	l := liveStream{s: &Server{}, repo: "demo", view: "mr", n: "1", ref: "feature", target: "main"}
		88	+	for _, tt := range []struct {
		89	+	ref string
		90	+	want int
		91	+	}{{"refs/heads/feature", 1}, {"refs/heads/main", 0}, {"refs/heads/other", 0}} {
		92	+	fs, err := l.mrPushed(t.Context(), domain.PushEvent{Updates: []domain.RefUpdate{{Ref: tt.ref}}})
		93	+	require.NoError(t, err)
		94	+	require.Len(t, fs, tt.want)
		95	+	if tt.want > 0 {
		96	+	assert.Equal(t, "mr-head", fs[0].event)
		97	+	assert.Equal(t, `<div id="mr-head"></div>`, fs[0].html)
		98	+	assert.NotContains(t, fs[0].html, "the branch changed")
		99	+	}
		100	+	}
		101	+	}

M internal/adapters/web/jstest/mr.test.mjs +108 -0


@@ -300,3 +300,111 @@ test('touch control: lazy links enable toolbar; ordinary taps pass through; rang
300	300		}
301	301		}
302	302		});
	303	+
	304	+	// Deterministic timers: no sleeps, and each test restores every mocked global.
	305	+	function clock() {
	306	+	const saved = { setTimeout: globalThis.setTimeout, clearTimeout: globalThis.clearTimeout };
	307	+	const tasks = new Map(); let n = 0;
	308	+	globalThis.setTimeout = (fn) => { tasks.set(++n, fn); return n; };
	309	+	globalThis.clearTimeout = (id) => tasks.delete(id);
	310	+	return { async tick() { const batch = [...tasks.values()]; tasks.clear(); for (const fn of batch) await fn(); },
	311	+	size: () => tasks.size, restore() { Object.assign(globalThis, saved); } };
	312	+	}
	313	+
	314	+	test('head refresh defers a real textarea draft, resumes after emptying and blurring', async () => {
	315	+	const saved = globalThis.document, c = clock();
	316	+	const text = { value: 'unsent', defaultValue: '' };
	317	+	let fetched = 0, applied = 0; const notices = [];
	318	+	globalThis.document = { activeElement: text, querySelectorAll: () => [text] };
	319	+	const r = window.ermiteMR.refresher({ blocked: window.ermiteMR.hasDraft,
	320	+	fetchPage: async () => { fetched++; return 'page'; }, apply: () => applied++,
	321	+	notice: (v) => notices.push(v), failed: () => assert.fail('unexpected fallback') });
	322	+	try {
	323	+	r.request(); await c.tick();
	324	+	assert.equal(fetched, 0); assert.deepEqual(notices, [true]);
	325	+	text.value = ''; r.resume(); await c.tick();
	326	+	assert.equal(fetched, 0, 'focus still protects an empty draft');
	327	+	document.activeElement = null; r.resume(); await c.tick();
	328	+	assert.equal(fetched, 1); assert.equal(applied, 1); assert.equal(r.pending(), false);
	329	+	} finally { globalThis.document = saved; c.restore(); }
	330	+	});
	331	+
	332	+	test('head refresh debounces bursts, serializes requests, and reruns after an in-flight push', async () => {
	333	+	const c = clock(); let fetched = 0, applied = 0, resolve;
	334	+	const r = window.ermiteMR.refresher({ blocked: () => false,
	335	+	fetchPage: () => { fetched++; return new Promise((r) => { resolve = r; }); },
	336	+	apply: () => applied++, notice() {}, failed: () => assert.fail('unexpected failure') });
	337	+	try {
	338	+	r.request(); r.request(); r.request(); assert.equal(c.size(), 1);
	339	+	const first = c.tick(); assert.equal(fetched, 1);
	340	+	r.request(); await c.tick(); assert.equal(fetched, 1, 'one fetch in flight');
	341	+	resolve('one'); await first; assert.equal(applied, 1); assert.equal(c.size(), 1);
	342	+	const second = c.tick(); assert.equal(fetched, 2); resolve('two'); await second;
	343	+	assert.equal(applied, 2); assert.equal(c.size(), 0);
	344	+	} finally { c.restore(); }
	345	+	});
	346	+
	347	+	test('typing during fetch defers the swap; manual refresh bypasses deferral', async () => {
	348	+	const c = clock(); let blocked = false, applied = 0, resolve; const notices = [];
	349	+	const r = window.ermiteMR.refresher({ blocked: () => blocked,
	350	+	fetchPage: () => new Promise((r) => { resolve = r; }), apply: (_page, manual) => { applied++; assert.equal(manual, true); },
	351	+	notice: (v) => notices.push(v), failed: () => assert.fail('unexpected failure') });
	352	+	try {
	353	+	r.request(); const first = c.tick(); blocked = true; resolve('page'); await first;
	354	+	assert.equal(applied, 0); assert.deepEqual(notices, [true]);
	355	+	r.request(true); const second = c.tick(); resolve('new page'); await second;
	356	+	assert.equal(applied, 1); assert.equal(notices.at(-1), false);
	357	+	} finally { c.restore(); }
	358	+	});
	359	+
	360	+	test('fetch failures and non-MR responses take the fallback, never apply', async () => {
	361	+	const saved = { fetch: globalThis.fetch, location: globalThis.location, DOMParser: globalThis.DOMParser };
	362	+	const c = clock(); let fallback = 0;
	363	+	globalThis.location = { href: 'https://forge.test/demo/merge-requests/1?view=split&from=25' };
	364	+	const r = window.ermiteMR.refresher({ blocked: () => false, fetchPage: window.ermiteMR.fetchPage,
	365	+	apply: () => assert.fail('must not swap'), notice() {}, failed: () => fallback++ });
	366	+	try {
	367	+	for (const result of ['network', { ok: false }, { ok: true, redirected: true }, { ok: true, text: async () => '<html>login</html>' }]) {
	368	+	globalThis.fetch = async (url, opts) => {
	369	+	assert.equal(url, location.href); assert.equal(opts.credentials, 'same-origin');
	370	+	if (result === 'network') throw new Error('offline'); return result;
	371	+	};
	372	+	globalThis.DOMParser = class { parseFromString() { return { querySelector: () => null }; } };
	373	+	r.request(); await c.tick();
	374	+	}
	375	+	assert.equal(fallback, 4);
	376	+	} finally {
	377	+	for (const [k,v] of Object.entries(saved)) { if (v === undefined) delete globalThis[k]; else globalThis[k] = v; }
	378	+	c.restore();
	379	+	}
	380	+	});
	381	+
	382	+	test('viewport probe finds a stable path/side/line and restores its offset without line scans', () => {
	383	+	const names = ['document', 'location', 'innerHeight', 'innerWidth', 'scrollY', 'scrollBy', 'scrollTo', 'CSS', 'matchMedia'];
	384	+	const saved = Object.fromEntries(names.map((k) => [k, globalThis[k]]));
	385	+	const rect = (top, bottom = top + 20) => ({ top, bottom, left: 0, width: 900 });
	386	+	let lineTop = 160, headerTop = -200, found = true; const calls = [];
	387	+	const header = { getBoundingClientRect: () => rect(headerTop) };
	388	+	const row = { getBoundingClientRect: () => rect(lineTop), querySelector: () => link };
	389	+	const link = { href: 'https://forge.test/demo/merge-requests/1?on=new:42:a.go#f2', closest: () => row };
	390	+	const file = { id: 'f2', dataset: { file: 'a.go' }, querySelector: (s) => s.includes('summary') ? header : s.includes('href$') ? (assert.ok(s.includes('on=new:42:a.go#f3')), found ? link : null) : null };
	391	+	const hit = { closest: (s) => s === 'tr' ? row : file };
	392	+	const diffs = { dataset: { diff: 'unified' }, getBoundingClientRect: () => rect(120), contains: () => true };
	393	+	globalThis.document = {
	394	+	querySelector: (s) => s === '#diffs' ? diffs : s === '.hdr' ? { getBoundingClientRect: () => rect(0, 100) } : null,
	395	+	querySelectorAll: (s) => { assert.equal(s, '#diffs details.dfile', 'only files, never every line'); return found === 'gone' ? [] : [file]; },
	396	+	elementFromPoint: () => hit, documentElement: { scrollHeight: 10000 },
	397	+	};
	398	+	Object.assign(globalThis, { location: { href: link.href }, innerHeight: 800, innerWidth: 1200, scrollY: 2500,
	399	+	scrollBy: (arg) => calls.push(['by', arg]), scrollTo: (arg) => calls.push(['to', arg]), CSS: { escape: (s) => s }, matchMedia: () => ({ matches: false }) });
	400	+	try {
	401	+	const a = window.ermiteMR.scrollAnchor();
	402	+	assert.equal(a.file, 'a.go'); assert.equal(a.on, 'new:42:a.go'); assert.equal(a.offset, 160);
	403	+	file.id = 'f3'; lineTop = 260; window.ermiteMR.restoreAnchor(a);
	404	+	assert.deepEqual(calls.pop(), ['by', { top: 100, behavior: 'instant' }]);
	405	+	found = false; headerTop = -100; window.ermiteMR.restoreAnchor(a);
	406	+	assert.deepEqual(calls.pop(), ['by', { top: 100, behavior: 'instant' }]);
	407	+	found = 'gone'; window.ermiteMR.restoreAnchor({ ...a, y: 20000 });
	408	+	assert.deepEqual(calls.pop(), ['to', { top: 9200, behavior: 'instant' }]);
	409	+	} finally { for (const [k,v] of Object.entries(saved)) { if (v === undefined) delete globalThis[k]; else globalThis[k] = v; } }
	410	+	});


@@ -300,3 +300,111 @@ test('touch control: lazy links enable toolbar; ordinary taps pass through; rang
300	}	300		}
301	}	301		}
302	});	302		});
		303	+
		304	+	// Deterministic timers: no sleeps, and each test restores every mocked global.
		305	+	function clock() {
		306	+	const saved = { setTimeout: globalThis.setTimeout, clearTimeout: globalThis.clearTimeout };
		307	+	const tasks = new Map(); let n = 0;
		308	+	globalThis.setTimeout = (fn) => { tasks.set(++n, fn); return n; };
		309	+	globalThis.clearTimeout = (id) => tasks.delete(id);
		310	+	return { async tick() { const batch = [...tasks.values()]; tasks.clear(); for (const fn of batch) await fn(); },
		311	+	size: () => tasks.size, restore() { Object.assign(globalThis, saved); } };
		312	+	}
		313	+
		314	+	test('head refresh defers a real textarea draft, resumes after emptying and blurring', async () => {
		315	+	const saved = globalThis.document, c = clock();
		316	+	const text = { value: 'unsent', defaultValue: '' };
		317	+	let fetched = 0, applied = 0; const notices = [];
		318	+	globalThis.document = { activeElement: text, querySelectorAll: () => [text] };
		319	+	const r = window.ermiteMR.refresher({ blocked: window.ermiteMR.hasDraft,
		320	+	fetchPage: async () => { fetched++; return 'page'; }, apply: () => applied++,
		321	+	notice: (v) => notices.push(v), failed: () => assert.fail('unexpected fallback') });
		322	+	try {
		323	+	r.request(); await c.tick();
		324	+	assert.equal(fetched, 0); assert.deepEqual(notices, [true]);
		325	+	text.value = ''; r.resume(); await c.tick();
		326	+	assert.equal(fetched, 0, 'focus still protects an empty draft');
		327	+	document.activeElement = null; r.resume(); await c.tick();
		328	+	assert.equal(fetched, 1); assert.equal(applied, 1); assert.equal(r.pending(), false);
		329	+	} finally { globalThis.document = saved; c.restore(); }
		330	+	});
		331	+
		332	+	test('head refresh debounces bursts, serializes requests, and reruns after an in-flight push', async () => {
		333	+	const c = clock(); let fetched = 0, applied = 0, resolve;
		334	+	const r = window.ermiteMR.refresher({ blocked: () => false,
		335	+	fetchPage: () => { fetched++; return new Promise((r) => { resolve = r; }); },
		336	+	apply: () => applied++, notice() {}, failed: () => assert.fail('unexpected failure') });
		337	+	try {
		338	+	r.request(); r.request(); r.request(); assert.equal(c.size(), 1);
		339	+	const first = c.tick(); assert.equal(fetched, 1);
		340	+	r.request(); await c.tick(); assert.equal(fetched, 1, 'one fetch in flight');
		341	+	resolve('one'); await first; assert.equal(applied, 1); assert.equal(c.size(), 1);
		342	+	const second = c.tick(); assert.equal(fetched, 2); resolve('two'); await second;
		343	+	assert.equal(applied, 2); assert.equal(c.size(), 0);
		344	+	} finally { c.restore(); }
		345	+	});
		346	+
		347	+	test('typing during fetch defers the swap; manual refresh bypasses deferral', async () => {
		348	+	const c = clock(); let blocked = false, applied = 0, resolve; const notices = [];
		349	+	const r = window.ermiteMR.refresher({ blocked: () => blocked,
		350	+	fetchPage: () => new Promise((r) => { resolve = r; }), apply: (_page, manual) => { applied++; assert.equal(manual, true); },
		351	+	notice: (v) => notices.push(v), failed: () => assert.fail('unexpected failure') });
		352	+	try {
		353	+	r.request(); const first = c.tick(); blocked = true; resolve('page'); await first;
		354	+	assert.equal(applied, 0); assert.deepEqual(notices, [true]);
		355	+	r.request(true); const second = c.tick(); resolve('new page'); await second;
		356	+	assert.equal(applied, 1); assert.equal(notices.at(-1), false);
		357	+	} finally { c.restore(); }
		358	+	});
		359	+
		360	+	test('fetch failures and non-MR responses take the fallback, never apply', async () => {
		361	+	const saved = { fetch: globalThis.fetch, location: globalThis.location, DOMParser: globalThis.DOMParser };
		362	+	const c = clock(); let fallback = 0;
		363	+	globalThis.location = { href: 'https://forge.test/demo/merge-requests/1?view=split&from=25' };
		364	+	const r = window.ermiteMR.refresher({ blocked: () => false, fetchPage: window.ermiteMR.fetchPage,
		365	+	apply: () => assert.fail('must not swap'), notice() {}, failed: () => fallback++ });
		366	+	try {
		367	+	for (const result of ['network', { ok: false }, { ok: true, redirected: true }, { ok: true, text: async () => '<html>login</html>' }]) {
		368	+	globalThis.fetch = async (url, opts) => {
		369	+	assert.equal(url, location.href); assert.equal(opts.credentials, 'same-origin');
		370	+	if (result === 'network') throw new Error('offline'); return result;
		371	+	};
		372	+	globalThis.DOMParser = class { parseFromString() { return { querySelector: () => null }; } };
		373	+	r.request(); await c.tick();
		374	+	}
		375	+	assert.equal(fallback, 4);
		376	+	} finally {
		377	+	for (const [k,v] of Object.entries(saved)) { if (v === undefined) delete globalThis[k]; else globalThis[k] = v; }
		378	+	c.restore();
		379	+	}
		380	+	});
		381	+
		382	+	test('viewport probe finds a stable path/side/line and restores its offset without line scans', () => {
		383	+	const names = ['document', 'location', 'innerHeight', 'innerWidth', 'scrollY', 'scrollBy', 'scrollTo', 'CSS', 'matchMedia'];
		384	+	const saved = Object.fromEntries(names.map((k) => [k, globalThis[k]]));
		385	+	const rect = (top, bottom = top + 20) => ({ top, bottom, left: 0, width: 900 });
		386	+	let lineTop = 160, headerTop = -200, found = true; const calls = [];
		387	+	const header = { getBoundingClientRect: () => rect(headerTop) };
		388	+	const row = { getBoundingClientRect: () => rect(lineTop), querySelector: () => link };
		389	+	const link = { href: 'https://forge.test/demo/merge-requests/1?on=new:42:a.go#f2', closest: () => row };
		390	+	const file = { id: 'f2', dataset: { file: 'a.go' }, querySelector: (s) => s.includes('summary') ? header : s.includes('href$') ? (assert.ok(s.includes('on=new:42:a.go#f3')), found ? link : null) : null };
		391	+	const hit = { closest: (s) => s === 'tr' ? row : file };
		392	+	const diffs = { dataset: { diff: 'unified' }, getBoundingClientRect: () => rect(120), contains: () => true };
		393	+	globalThis.document = {
		394	+	querySelector: (s) => s === '#diffs' ? diffs : s === '.hdr' ? { getBoundingClientRect: () => rect(0, 100) } : null,
		395	+	querySelectorAll: (s) => { assert.equal(s, '#diffs details.dfile', 'only files, never every line'); return found === 'gone' ? [] : [file]; },
		396	+	elementFromPoint: () => hit, documentElement: { scrollHeight: 10000 },
		397	+	};
		398	+	Object.assign(globalThis, { location: { href: link.href }, innerHeight: 800, innerWidth: 1200, scrollY: 2500,
		399	+	scrollBy: (arg) => calls.push(['by', arg]), scrollTo: (arg) => calls.push(['to', arg]), CSS: { escape: (s) => s }, matchMedia: () => ({ matches: false }) });
		400	+	try {
		401	+	const a = window.ermiteMR.scrollAnchor();
		402	+	assert.equal(a.file, 'a.go'); assert.equal(a.on, 'new:42:a.go'); assert.equal(a.offset, 160);
		403	+	file.id = 'f3'; lineTop = 260; window.ermiteMR.restoreAnchor(a);
		404	+	assert.deepEqual(calls.pop(), ['by', { top: 100, behavior: 'instant' }]);
		405	+	found = false; headerTop = -100; window.ermiteMR.restoreAnchor(a);
		406	+	assert.deepEqual(calls.pop(), ['by', { top: 100, behavior: 'instant' }]);
		407	+	found = 'gone'; window.ermiteMR.restoreAnchor({ ...a, y: 20000 });
		408	+	assert.deepEqual(calls.pop(), ['to', { top: 9200, behavior: 'instant' }]);
		409	+	} finally { for (const [k,v] of Object.entries(saved)) { if (v === undefined) delete globalThis[k]; else globalThis[k] = v; } }
		410	+	});

M internal/adapters/web/mr.templ +32 -28


@@ -157,35 +157,39 @@ templ MergeRequest(l Layout, p MRPage) {
157	157		<p class="d-err" role="alert">{ p.MergeError }</p>
158	158		}
159	159		@LiveSlot("mr-notice")
160		-	if p.Since != nil {
161		-	<nav class="since" aria-label="Diff range">
162		-	<a
163		-	href={ templ.SafeURL(p.Since.AllHref) }
164		-	if !p.Since.Current {
165		-	aria-current="page"
166		-	}
167		-	>all changes <span class="mute">vs { p.Target }</span></a>
168		-	<a
169		-	href={ templ.SafeURL(p.Since.SinceHref) }
170		-	if p.Since.Current {
171		-	aria-current="page"
172		-	}
173		-	>since your last read <span class="mute">{ p.Since.ReadShort } → { p.Since.HeadShort }</span></a>
174		-	</nav>
175		-	}
176		-	if p.SinceNote != "" {
177		-	<p class="notice">{ p.SinceNote }</p>
178		-	}
	160	+	<div id="mr-range" hidden?={ p.Since == nil && p.SinceNote == "" }>
	161	+	if p.Since != nil {
	162	+	<nav class="since" aria-label="Diff range">
	163	+	<a
	164	+	href={ templ.SafeURL(p.Since.AllHref) }
	165	+	if !p.Since.Current {
	166	+	aria-current="page"
	167	+	}
	168	+	>all changes <span class="mute">vs { p.Target }</span></a>
	169	+	<a
	170	+	href={ templ.SafeURL(p.Since.SinceHref) }
	171	+	if p.Since.Current {
	172	+	aria-current="page"
	173	+	}
	174	+	>since your last read <span class="mute">{ p.Since.ReadShort } → { p.Since.HeadShort }</span></a>
	175	+	</nav>
	176	+	}
	177	+	if p.SinceNote != "" {
	178	+	<p class="notice">{ p.SinceNote }</p>
	179	+	}
	180	+	</div>
179	181		@mrBar(p)
180		-	if p.Invisible {
181		-	<p class="notice">
182		-	this diff holds invisible characters (direction controls, zero-width characters). They are shown as
183		-	<span class="inv"><U+XXXX></span> markers, never applied.
184		-	</p>
185		-	}
186		-	if p.Note != "" {
187		-	<p class="notice">{ p.Note }</p>
188		-	}
	182	+	<div id="mr-diff-notices" hidden?={ !p.Invisible && p.Note == "" }>
	183	+	if p.Invisible {
	184	+	<p class="notice">
	185	+	this diff holds invisible characters (direction controls, zero-width characters). They are shown as
	186	+	<span class="inv"><U+XXXX></span> markers, never applied.
	187	+	</p>
	188	+	}
	189	+	if p.Note != "" {
	190	+	<p class="notice">{ p.Note }</p>
	191	+	}
	192	+	</div>
189	193		<div
190	194		id="diffs"
191	195		data-mr


@@ -157,35 +157,39 @@ templ MergeRequest(l Layout, p MRPage) {
157		<p class="d-err" role="alert">{ p.MergeError }</p>	157		<p class="d-err" role="alert">{ p.MergeError }</p>
158		}	158		}
159		@LiveSlot("mr-notice")	159		@LiveSlot("mr-notice")
160	-	if p.Since != nil {	160	+	<div id="mr-range" hidden?={ p.Since == nil && p.SinceNote == "" }>
161	-	<nav class="since" aria-label="Diff range">	161	+	if p.Since != nil {
162	-	<a	162	+	<nav class="since" aria-label="Diff range">
163	-	href={ templ.SafeURL(p.Since.AllHref) }	163	+	<a
164	-	if !p.Since.Current {	164	+	href={ templ.SafeURL(p.Since.AllHref) }
165	-	aria-current="page"	165	+	if !p.Since.Current {
166	-	}	166	+	aria-current="page"
167	-	>all changes <span class="mute">vs { p.Target }</span></a>	167	+	}
168	-	<a	168	+	>all changes <span class="mute">vs { p.Target }</span></a>
169	-	href={ templ.SafeURL(p.Since.SinceHref) }	169	+	<a
170	-	if p.Since.Current {	170	+	href={ templ.SafeURL(p.Since.SinceHref) }
171	-	aria-current="page"	171	+	if p.Since.Current {
172	-	}	172	+	aria-current="page"
173	-	>since your last read <span class="mute">{ p.Since.ReadShort } → { p.Since.HeadShort }</span></a>	173	+	}
174	-	</nav>	174	+	>since your last read <span class="mute">{ p.Since.ReadShort } → { p.Since.HeadShort }</span></a>
175	-	}	175	+	</nav>
176	-	if p.SinceNote != "" {	176	+	}
177	-	<p class="notice">{ p.SinceNote }</p>	177	+	if p.SinceNote != "" {
178	-	}	178	+	<p class="notice">{ p.SinceNote }</p>
			179	+	}
			180	+	</div>
179		@mrBar(p)	181		@mrBar(p)
180	-	if p.Invisible {	182	+	<div id="mr-diff-notices" hidden?={ !p.Invisible && p.Note == "" }>
181	-	<p class="notice">	183	+	if p.Invisible {
182	-	this diff holds invisible characters (direction controls, zero-width characters). They are shown as	184	+	<p class="notice">
183	-	<span class="inv"><U+XXXX></span> markers, never applied.	185	+	this diff holds invisible characters (direction controls, zero-width characters). They are shown as
184	-	</p>	186	+	<span class="inv"><U+XXXX></span> markers, never applied.
185	-	}	187	+	</p>
186	-	if p.Note != "" {	188	+	}
187	-	<p class="notice">{ p.Note }</p>	189	+	if p.Note != "" {
188	-	}	190	+	<p class="notice">{ p.Note }</p>
			191	+	}
			192	+	</div>
189		<div	193		<div
190		id="diffs"	194		id="diffs"
191		data-mr	195		data-mr

M internal/adapters/web/mr_templ.go +414 -402 generated file: collapsed

load diff

M internal/adapters/web/static/css/80-live.css +5 -0


@@ -8,5 +8,10 @@
8	8		padding: var(--s3) var(--s4); font-weight: 700;
9	9		background: var(--bg-surface); border: 1px solid var(--border-strong); border-left: 3px solid var(--teal); border-radius: var(--r-s);
10	10		}
	11	+	/* A deferred MR refresh must not insert height above a long diff. */
	12	+	#mr-refresh-status:has(a) {
	13	+	position: fixed; bottom: var(--s4); left: var(--s4); z-index: 24;
	14	+	max-width: min(42rem, calc(100vw - 2 * var(--s4))); font-size: var(--fs-s);
	15	+	}
11	16		.live-slot a { color: var(--ink-hi); }
12	17		}


@@ -8,5 +8,10 @@
8	padding: var(--s3) var(--s4); font-weight: 700;	8		padding: var(--s3) var(--s4); font-weight: 700;
9	background: var(--bg-surface); border: 1px solid var(--border-strong); border-left: 3px solid var(--teal); border-radius: var(--r-s);	9		background: var(--bg-surface); border: 1px solid var(--border-strong); border-left: 3px solid var(--teal); border-radius: var(--r-s);
10	}	10		}
		11	+	/* A deferred MR refresh must not insert height above a long diff. */
		12	+	#mr-refresh-status:has(a) {
		13	+	position: fixed; bottom: var(--s4); left: var(--s4); z-index: 24;
		14	+	max-width: min(42rem, calc(100vw - 2 * var(--s4))); font-size: var(--fs-s);
		15	+	}
11	.live-slot a { color: var(--ink-hi); }	16		.live-slot a { color: var(--ink-hi); }
12	}	17		}

M internal/adapters/web/static/js/ermite.js +9 -1


@@ -731,13 +731,21 @@
731	731		mark();
732	732		}, { rootMargin: '0px 0px -67% 0px' });
733	733		for (const f of files) io.observe(f);
	734	+	// A refreshed MR replaced the rail and the windowed diff. Rebuild once,
	735	+	// not once per file (which would make a large file list quadratic).
	736	+	ermite.refreshFiles = () => {
	737	+	io.disconnect(); inBand.clear(); current = null;
	738	+	files = $$('.dfile'); links.clear();
	739	+	for (const a of $$('.files a[href^="#"]')) links.set(a.hash.slice(1), a);
	740	+	for (const f of files) io.observe(f);
	741	+	};
734	742		// A window of files of a merge request came in (mr.js): its files replace
735	743		// placeholders, which the observer and the list knew by element.
736	744		ermite.watchFile = (f, old) => {
737	745		if (old) { io.unobserve(old); inBand.delete(old); }
738	746		files = $$('.dfile');
739	747		for (const x of [...inBand]) if (!x.isConnected) inBand.delete(x);
740		-	if (current && !current.isConnected) current = document.getElementById(current.id);
	748	+	if (current && !current.isConnected) current = null;
741	749		io.observe(f);
742	750		};
743	751		}

       mark();
     }, { rootMargin: '0px 0px -67% 0px' });
     for (const f of files) io.observe(f);
+    // A refreshed MR replaced the rail and the windowed diff. Rebuild once,
+    // not once per file (which would make a large file list quadratic).
+    ermite.refreshFiles = () => {
+      io.disconnect(); inBand.clear(); current = null;
+      files = $$('.dfile'); links.clear();
+      for (const a of $$('.files a[href^="#"]')) links.set(a.hash.slice(1), a);
+      for (const f of files) io.observe(f);
+    };
     // A window of files of a merge request came in (mr.js): its files replace
     // placeholders, which the observer and the list knew by element.
     ermite.watchFile = (f, old) => {
       if (old) { io.unobserve(old); inBand.delete(old); }
       files = $$('.dfile');
       for (const x of [...inBand]) if (!x.isConnected) inBand.delete(x);
-      if (current && !current.isConnected) current = document.getElementById(current.id);
+      if (current && !current.isConnected) current = null;
       io.observe(f);
     };
   }

M internal/adapters/web/static/js/mr.js +254 -8


@@ -84,11 +84,13 @@ window.ermiteMR = (() => {
84	84		let refreshTouchComments = () => {};
85	85		let moved = false;
86	86		let lazyIO = null; // the observer of the placeholders (watch)
	87	+	let diffGeneration = 0;
87	88		let revealGen = 0; // the last reveal wins the scroll
88	89
89	90		// load fetches the window of a placeholder and swaps its files in. The
90	91		// promise resolves once they are in the page (or the page said to reload).
91	92		function load(ph) {
	93	+	const generation = diffGeneration;
92	94		const src = ph?.dataset.src;
93	95		if (!src \|\| moved) return Promise.resolve();
94	96		if (loading.has(src)) return loading.get(src);

@@ -102,12 +104,14 @@ window.ermiteMR = (() => {
102	104		const p = fetch(url, { headers: { Accept: 'text/html' }, credentials: 'same-origin' })
103	105		.then(async (res) => {
104	106		const html = await res.text();
	107	+	if (generation !== diffGeneration) return;
105	108		if (res.status === 409) return stale(html);
106	109		if (!res.ok) throw new Error('loading files: ' + res.status);
107	110		// A window of the old diff after the page went stale stays out.
108	111		if (!moved) swap(html);
109	112		})
110	113		.catch((err) => {
	114	+	if (generation !== diffGeneration) return;
111	115		loading.delete(src);
112	116		for (const p of $$('.dlazy[data-loading]')) if (p.dataset.src === src) p.removeAttribute('data-loading');
113	117		window.ermite?.flash?.(err.message, 4000);

@@ -195,6 +199,7 @@ window.ermiteMR = (() => {
195	199		// that come in are marked in the list of files (ermite.js marks the one in
196	200		// view).
197	201		function watch() {
	202	+	lazyIO?.disconnect();
198	203		if (!('IntersectionObserver' in window)) {
199	204		for (const p of $$('.dlazy[data-src]')) load(p);
200	205		return;

@@ -309,7 +314,9 @@ window.ermiteMR = (() => {
309	314		}
310	315
311	316		// Enhance the ordinary anchor navigation only when scripts are available.
	317	+	let disposePanels = () => {};
312	318		function panels() {
	319	+	disposePanels();
313	320		const footer = $('#mr-panels'), nav = $('[data-mr-tabs]');
314	321		if (!footer \|\| !nav) return;
315	322		const tabs = $$('a', nav), panels = $$('[data-mr-panel]', footer);

@@ -342,20 +349,30 @@ window.ermiteMR = (() => {
342	349		footer.open = true; select(index);
343	350		}
344	351		// A repeated click on the same hash must also reopen a folded footer.
345		-	document.addEventListener('click', (e) => {
	352	+	const checksClick = (e) => {
346	353		if (e.target.closest?.('#mr-ck')) { footer.open = true; select(1); }
347		-	});
	354	+	};
	355	+	document.addEventListener('click', checksClick);
	356	+	let observer;
348	357		const summary = $('#mr-ck');
349	358		if (summary) {
350	359		const sync = () => { $('[data-checks-label]', nav).textContent = $('#mr-ck')?.title \|\| $('#mr-ck')?.textContent.trim() \|\| 'no checks'; };
351		-	new MutationObserver(sync).observe(summary.parentElement, { childList: true, subtree: true, characterData: true });
	360	+	observer = new MutationObserver(sync);
	361	+	observer.observe(summary.parentElement, { childList: true, subtree: true, characterData: true });
352	362		sync();
353	363		}
354	364		select(0); hash();
355	365		addEventListener('hashchange', hash);
	366	+	disposePanels = () => {
	367	+	document.removeEventListener?.('click', checksClick);
	368	+	window.removeEventListener?.('hashchange', hash);
	369	+	observer?.disconnect?.();
	370	+	};
356	371		}
357	372
358		-	function touchComments() {
	373	+	let disposeTouch = () => {};
	374	+	function touchComments(scroll = true) {
	375	+	disposeTouch();
359	376		const diffs = $('#diffs');
360	377		const bar = document.createElement('div');
361	378		bar.className = 'mr-touch-range';

@@ -392,23 +409,252 @@ window.ermiteMR = (() => {
392	409		marker.setAttribute('data-range-start', '');
393	410		status.textContent = `Range starts at line ${link.textContent.trim()}. Tap the last line number (same file and side).`;
394	411		});
395		-	touch?.addEventListener('change', () => {
	412	+	const changed = () => {
396	413		if (touch.matches) return;
397	414		enabled = false;
398	415		clear();
399	416		button.setAttribute('aria-pressed', 'false');
400	417		status.textContent = '';
401		-	});
	418	+	};
	419	+	touch?.addEventListener('change', changed);
	420	+	disposeTouch = () => { touch?.removeEventListener?.('change', changed); bar.remove?.(); };
402	421		// The server opens the line form. Scroll after layout without stealing
403	422		// focus or forcing a mobile keyboard to appear.
404		-	if (new URL(location.href).searchParams.has('on')) requestAnimationFrame(() => {
	423	+	if (scroll && new URL(location.href).searchParams.has('on')) requestAnimationFrame(() => {
405	424		const form = $$('.fnote .cform', diffs).find((f) => f.getClientRects().length);
406	425		form?.scrollIntoView({ block: 'center' });
407	426		});
408	427		}
409	428
	429	+	// A refresh scheduler has one request in flight, a trailing debounce, and
	430	+	// a dirty bit for pushes received during that request. Drafts are checked
	431	+	// again after the fetch: typing while the network is slow is safe too.
	432	+	function refresher({ blocked, fetchPage, apply, notice, failed, delay = 300 }) {
	433	+	let timer, busy = false, pending = false, force = false;
	434	+	const schedule = () => { clearTimeout(timer); timer = setTimeout(run, delay); };
	435	+	async function run() {
	436	+	if (busy \|\| !pending) return;
	437	+	if (!force && blocked()) { notice(true); return; }
	438	+	busy = true;
	439	+	pending = false;
	440	+	const manual = force; force = false;
	441	+	try {
	442	+	const page = await fetchPage();
	443	+	if (!manual && blocked()) { pending = true; notice(true); return; }
	444	+	if (await apply(page, manual) === false) { pending = true; notice(true); }
	445	+	else notice(false);
	446	+	} catch { failed(); }
	447	+	finally {
	448	+	busy = false;
	449	+	if (pending && (force \|\| !blocked())) schedule();
	450	+	}
	451	+	}
	452	+	return {
	453	+	request(manual = false) { pending = true; force \|\|= manual; schedule(); },
	454	+	resume() { if (pending) schedule(); },
	455	+	pending() { return pending \|\| busy; },
	456	+	};
	457	+	}
	458	+
	459	+	function hasDraft() {
	460	+	return $$('textarea').some((t) => (t.value.length > 0 && t.value !== t.defaultValue) \|\| document.activeElement === t) \|\|
	461	+	!!document.activeElement?.closest?.('.cform');
	462	+	}
	463	+
	464	+	// Path + side + line is stable when files are inserted before this one;
	465	+	// fN is only a positional anchor. Hidden unified/split rows are ignored.
	466	+	function scrollAnchor() {
	467	+	const top = Math.max(0, $('.hdr')?.getBoundingClientRect().bottom \|\| 0,
	468	+	$('.mr-bar')?.getBoundingClientRect().bottom \|\| 0);
	469	+	const diffs = $('#diffs');
	470	+	const bounds = diffs.getBoundingClientRect();
	471	+	const x = Math.max(1, Math.min(innerWidth - 1, bounds.left + Math.min(100, bounds.width / 2)));
	472	+	// A bounded number of probes, independent of the number of diff lines.
	473	+	for (const y of [top + 2, top + 24, top + 64, top + 128]) {
	474	+	if (y >= innerHeight) break;
	475	+	const hit = document.elementFromPoint(x, y);
	476	+	const file = hit?.closest('details.dfile');
	477	+	if (!file \|\| !diffs.contains(file)) continue;
	478	+	const row = hit.closest('tr');
	479	+	const link = row && $('.ln a[href*="on="]', row);
	480	+	const header = $(':scope > summary', file);
	481	+	return { file: file.dataset.file,
	482	+	on: link && new URL(link.href, location.href).searchParams.get('on'),
	483	+	offset: (link ? row : header).getBoundingClientRect().top,
	484	+	headerOffset: header.getBoundingClientRect().top, y: scrollY };
	485	+	}
	486	+	return { y: scrollY };
	487	+	}
	488	+
	489	+	function restoreAnchor(anchor) {
	490	+	const file = $$('#diffs details.dfile').find((f) => f.dataset.file === anchor.file);
	491	+	let el, offset = anchor.offset;
	492	+	if (file && anchor.on) {
	493	+	// Exact href suffix: no traversal or measurement of every line. URLSearchParams
	494	+	// uses the same form encoding as the Go line links (space is '+').
	495	+	const parts = /^(new\|old):(\d+):(.+)$/.exec(anchor.on);
	496	+	const path = parts && new URLSearchParams({ path: parts[3] }).toString().slice(5);
	497	+	const suffix = parts && 'on=' + parts[1] + ':' + parts[2] + ':' + path + '#' + file.id;
	498	+	const layout = $('#diffs').dataset.diff \|\| $('#diffs').dataset.view;
	499	+	const table = $(layout === 'split' && !window.matchMedia?.('(max-width: 720px)').matches ? '.dt.spl' : '.dt.uni', file) \|\| file;
	500	+	if (suffix) el = $('a[href$="' + CSS.escape(suffix) + '"]', table)?.closest('tr');
	501	+	}
	502	+	if (!el && file) { el = $(':scope > summary', file); offset = anchor.headerOffset ?? anchor.offset; }
	503	+	if (el) window.scrollBy({ top: el.getBoundingClientRect().top - offset, behavior: 'instant' });
	504	+	else window.scrollTo({ top: Math.max(0, Math.min(anchor.y, document.documentElement.scrollHeight - innerHeight)), behavior: 'instant' });
	505	+	}
	506	+
	507	+	async function fetchPage() {
	508	+	const res = await fetch(location.href, { credentials: 'same-origin', headers: { Accept: 'text/html' } });
	509	+	if (!res.ok \|\| res.redirected) throw new Error('MR refresh refused');
	510	+	const page = new DOMParser().parseFromString(await res.text(), 'text/html');
	511	+	if (!$('#diffs[data-mr]', page) \|\| !$('.mr-bar', page) \|\| !$('.hint-live', page)) throw new Error('not an MR page');
	512	+	return page;
	513	+	}
	514	+
	515	+	// Use htmx's swap rather than replaceWith: its cleanup retires the old SSE
	516	+	// reader and hx-live bindings, and process activates the inserted controls.
	517	+	async function replaceRegion(old, fresh) {
	518	+	if (!old \|\| !fresh) throw new Error('missing MR refresh region');
	519	+	for (const el of $$('[autofocus]', fresh)) el.removeAttribute('autofocus');
	520	+	await window.htmx.swap({ sourceElement: old, target: old, text: fresh.outerHTML,
	521	+	swap: 'outerHTML settle:0 transition:false focusScroll:false', push: false, replace: false });
	522	+	}
	523	+
	524	+	async function refreshPage(page, manual = false) {
	525	+	const regions = ['.mr-footer', '#mr-range', '.mr-bar', '#mr-diff-notices', '#diffs', '.rail', '.hint-live'];
	526	+	for (const sel of regions) if (!$(sel) \|\| !$(sel, page)) throw new Error('missing MR region');
	527	+	let anchor = scrollAnchor();
	528	+	const anchorFile = $$('#diffs details.dfile', page).find((f) => f.dataset.file === anchor.file);
	529	+	const placeholder = anchorFile && $('.dlazy[data-src]', anchorFile);
	530	+	if (placeholder) {
	531	+	const d = $('#diffs').dataset;
	532	+	const url = placeholder.dataset.src + '&view=' + encodeURIComponent(d.diff \|\| d.view \|\| 'unified') + '&layouts=' + (d.diff ? 'both' : 'one');
	533	+	const res = await fetch(url, { credentials: 'same-origin', headers: { Accept: 'text/html' } });
	534	+	if (!res.ok \|\| res.redirected) throw new Error('anchor window changed');
	535	+	const windowPage = new DOMParser().parseFromString(await res.text(), 'text/html');
	536	+	const byID = new Map($$('#diffs details.dfile', page).map((f) => [f.id, f]));
	537	+	for (const f of $$('details.dfile', windowPage)) byID.get(f.id)?.replaceWith(f);
	538	+	if (!manual && hasDraft()) return false;
	539	+	anchor = scrollAnchor();
	540	+	}
	541	+	const files = new Map($$('#diffs details.dfile').map((f) => [f.dataset.file, f.open]));
	542	+	const folded = $('.r-files')?.hasAttribute('data-folded');
	543	+	const railY = $('.rail')?.scrollTop, filesY = $('.r-files .files')?.scrollTop;
	544	+	const footerOpen = $('#mr-panels')?.open;
	545	+	const tab = $('[data-mr-tabs] [aria-selected="true"]')?.id;
	546	+	const active = document.activeElement;
	547	+	const focus = active && { menu: active.closest?.('details.menu')?.id, id: active.id, tag: active.tagName, name: active.getAttribute('name'), href: active.getAttribute('href') };
	548	+	// Manual refresh keeps even an active draft whose line disappeared. It
	549	+	// stays an ordinary form, under an explicit previous-diff label.
	550	+	const drafts = [...new Set($$('#diffs textarea').filter((t) => t.value !== t.defaultValue \|\| t === active \|\| t.closest('form')?.contains(active)).map((t) => t.closest('form')).filter(Boolean))];
	551	+	let draftID = 0;
	552	+	for (const form of drafts) {
	553	+	for (const t of $$('textarea', form)) {
	554	+	if (!t.id) t.id = 'mr-preserved-draft-' + (++draftID);
	555	+	if (t === active) focus.id = t.id;
	556	+	}
	557	+	const id = $('textarea', form)?.id;
	558	+	const replacement = id && $$('textarea', page).find((t) => t.id === id)?.closest('.cform');
	559	+	const copy = form.cloneNode(true);
	560	+	const originalFields = $$('textarea, input, select', form);
	561	+	$$('textarea, input, select', copy).forEach((field, i) => {
	562	+	const original = originalFields[i];
	563	+	if (field.tagName === 'TEXTAREA') field.textContent = original.defaultValue;
	564	+	else if (field.tagName === 'INPUT') { field.setAttribute('value', original.value); field.toggleAttribute('checked', original.checked); }
	565	+	});
	566	+	if (replacement) replacement.replaceWith(copy);
	567	+	else {
	568	+	const box = page.createElement('div');
	569	+	const label = page.createElement('p'); label.className = 'notice';
	570	+	label.textContent = 'Unsent comment on the previous diff (the line may have moved).';
	571	+	box.append(label, copy); $('#diffs', page).prepend(box);
	572	+	}
	573	+	}
	574	+	// Serializing markup does not retain textarea.value or selection. Restore
	575	+	// values after the htmx swap, without ever clearing the source drafts.
	576	+	const values = drafts.flatMap((f) => $$('textarea', f).map((t) => ({ id: t.id, value: t.value, start: t.selectionStart, end: t.selectionEnd })));
	577	+	for (const f of $$('#diffs details.dfile', page)) if (files.has(f.dataset.file)) f.open = files.get(f.dataset.file);
	578	+	++diffGeneration; ++revealGen; moved = false; loading.clear(); lazyIO?.disconnect();
	579	+	// Keep the chosen client-side layout when the URL was not pinned.
	580	+	const layout = $('#diffs')?.dataset;
	581	+	if (layout?.diff && $('#diffs', page).dataset.diff) $('#diffs', page).dataset.diff = layout.diff;
	582	+	$('#diffs', page).dataset.mrStarted = 'true';
	583	+	for (const sel of regions) {
	584	+	const fresh = $(sel, page);
	585	+	await replaceRegion($(sel), fresh);
	586	+	fresh.remove(); // release each parsed region as soon as it is consumed
	587	+	}
	588	+	for (const v of values) {
	589	+	const t = document.getElementById(v.id);
	590	+	if (t) { t.value = v.value; t.setSelectionRange(v.start, v.end); }
	591	+	}
	592	+	for (const key of ['ref', 'sha', 'paths', 'blob']) {
	593	+	if (page.body.dataset[key] !== undefined) document.body.dataset[key] = page.body.dataset[key];
	594	+	}
	595	+	const oldSHA = $('.hdr .ref .sha'), newSHA = $('.hdr .ref .sha', page);
	596	+	if (oldSHA && newSHA) oldSHA.textContent = newSHA.textContent;
	597	+	panels();
	598	+	if (tab) {
	599	+	const oldURL = location.href;
	600	+	document.getElementById(tab)?.click();
	601	+	if (location.href !== oldURL) history.replaceState(history.state, '', oldURL);
	602	+	}
	603	+	if ($('#mr-panels')) $('#mr-panels').open = footerOpen;
	604	+	foldFiles(!!folded);
	605	+	if ($('.rail')) $('.rail').scrollTop = railY;
	606	+	if ($('.r-files .files')) $('.r-files .files').scrollTop = filesY;
	607	+	touchComments(false);
	608	+	$('#diffs').dataset.mobile = String(!!window.matchMedia?.('(max-width: 720px)').matches);
	609	+	window.ermite?.refreshFiles?.();
	610	+	watch();
	611	+	if (focus && active !== document.body) {
	612	+	const same = (e) => e.tagName === focus.tag && (focus.id ? e.id === focus.id :
	613	+	focus.href ? e.getAttribute('href') === focus.href : focus.name && e.getAttribute('name') === focus.name);
	614	+	const el = focus.menu && !focus.id && !focus.name && !focus.href ? document.getElementById(focus.menu)?.querySelector(':scope > summary') : focus.id ? document.getElementById(focus.id) : focus.href ? $('a[href="' + CSS.escape(focus.href) + '"]') : focus.name ? $('[name="' + CSS.escape(focus.name) + '"]') : null;
	615	+	if (el && (same(el) \|\| focus.menu)) el.focus({ preventScroll: true });
	616	+	}
	617	+	restoreAnchor(anchor);
	618	+	}
	619	+
	620	+	function refreshNotice(deferred) {
	621	+	let slot = $('#mr-refresh-status');
	622	+	if (!slot) {
	623	+	slot = document.createElement('div'); slot.id = 'mr-refresh-status'; slot.className = 'live-slot';
	624	+	slot.setAttribute('role', 'status'); slot.setAttribute('aria-live', 'polite');
	625	+	$('#mr-notice')?.after(slot);
	626	+	}
	627	+	slot.className = deferred ? 'live-slot' : 'sr';
	628	+	slot.replaceChildren();
	629	+	if (!deferred) {
	630	+	const text = document.createElement('span'); text.textContent = 'branch updated'; slot.append(text);
	631	+	return;
	632	+	}
	633	+	slot.append('branch updated — refreshing after your comment. ');
	634	+	const a = document.createElement('a'); a.href = location.href; a.textContent = 'refresh now';
	635	+	a.addEventListener('click', (e) => { e.preventDefault(); headRefresh.request(true); });
	636	+	slot.append(a);
	637	+	}
	638	+	const headRefresh = refresher({ blocked: hasDraft, fetchPage, apply: refreshPage, notice: refreshNotice,
	639	+	failed: () => { if (hasDraft()) refreshNotice(true); else window.ermiteLive?.reload(); } });
	640	+	function headChanged() { if ($('#diffs[data-mr]')) headRefresh.request(); }
	641	+
410	642		function start() {
411	643		if (!$('#diffs[data-mr]')) return;
	644	+	// Global delegation is installed once; replacement regions have their own
	645	+	// disposable panel/touch hooks below.
	646	+	if ($('#diffs').dataset.mrStarted) return;
	647	+	$('#diffs').dataset.mrStarted = 'true';
	648	+	for (const type of ['input', 'focusout', 'reset', 'submit']) document.addEventListener?.(type, () => headRefresh.resume());
	649	+	document.addEventListener?.('click', (e) => {
	650	+	const cancel = e.target.closest?.('.cform .f-btns a');
	651	+	if (!cancel \|\| !headRefresh.pending() \|\| e.ctrlKey \|\| e.metaKey \|\| e.shiftKey \|\| e.altKey) return;
	652	+	e.preventDefault();
	653	+	const form = cancel.closest('.cform');
	654	+	for (const t of $$('textarea', form)) t.value = '';
	655	+	if (form.contains(document.activeElement)) document.activeElement.blur();
	656	+	headRefresh.resume();
	657	+	});
412	658		panels();
413	659		// Large diffs may contain only the split table. Ask the existing server
414	660		// route for unified rather than writing the saved session preference.

@@ -457,7 +703,7 @@ window.ermiteMR = (() => {
457	703		});
458	704		}
459	705
460		-	return { core, panels, start, load, reveal, openMerge, menuKey, markRead, focusFiles, stepFiles, leaveFiles, foldFiles, openFile };
	706	+	return { core, refresher, hasDraft, fetchPage, scrollAnchor, restoreAnchor, headChanged, panels, start, load, reveal, openMerge, menuKey, markRead, focusFiles, stepFiles, leaveFiles, foldFiles, openFile };
461	707		})();
462	708
463	709		if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', () => window.ermiteMR.start());


@@ -84,11 +84,13 @@ window.ermiteMR = (() => {
84		let refreshTouchComments = () => {};	84		let refreshTouchComments = () => {};
85		let moved = false;	85		let moved = false;
86		let lazyIO = null; // the observer of the placeholders (watch)	86		let lazyIO = null; // the observer of the placeholders (watch)
			87	+	let diffGeneration = 0;
87		let revealGen = 0; // the last reveal wins the scroll	88		let revealGen = 0; // the last reveal wins the scroll
88			89
89		// load fetches the window of a placeholder and swaps its files in. The	90		// load fetches the window of a placeholder and swaps its files in. The
90		// promise resolves once they are in the page (or the page said to reload).	91		// promise resolves once they are in the page (or the page said to reload).
91		function load(ph) {	92		function load(ph) {
			93	+	const generation = diffGeneration;
92		const src = ph?.dataset.src;	94		const src = ph?.dataset.src;
93		if (!src \|\| moved) return Promise.resolve();	95		if (!src \|\| moved) return Promise.resolve();
94		if (loading.has(src)) return loading.get(src);	96		if (loading.has(src)) return loading.get(src);

@@ -102,12 +104,14 @@ window.ermiteMR = (() => {
102		const p = fetch(url, { headers: { Accept: 'text/html' }, credentials: 'same-origin' })	104		const p = fetch(url, { headers: { Accept: 'text/html' }, credentials: 'same-origin' })
103		.then(async (res) => {	105		.then(async (res) => {
104		const html = await res.text();	106		const html = await res.text();
			107	+	if (generation !== diffGeneration) return;
105		if (res.status === 409) return stale(html);	108		if (res.status === 409) return stale(html);
106		if (!res.ok) throw new Error('loading files: ' + res.status);	109		if (!res.ok) throw new Error('loading files: ' + res.status);
107		// A window of the old diff after the page went stale stays out.	110		// A window of the old diff after the page went stale stays out.
108		if (!moved) swap(html);	111		if (!moved) swap(html);
109		})	112		})
110		.catch((err) => {	113		.catch((err) => {
			114	+	if (generation !== diffGeneration) return;
111		loading.delete(src);	115		loading.delete(src);
112		for (const p of $$('.dlazy[data-loading]')) if (p.dataset.src === src) p.removeAttribute('data-loading');	116		for (const p of $$('.dlazy[data-loading]')) if (p.dataset.src === src) p.removeAttribute('data-loading');
113		window.ermite?.flash?.(err.message, 4000);	117		window.ermite?.flash?.(err.message, 4000);

@@ -195,6 +199,7 @@ window.ermiteMR = (() => {
195		// that come in are marked in the list of files (ermite.js marks the one in	199		// that come in are marked in the list of files (ermite.js marks the one in
196		// view).	200		// view).
197		function watch() {	201		function watch() {
			202	+	lazyIO?.disconnect();
198		if (!('IntersectionObserver' in window)) {	203		if (!('IntersectionObserver' in window)) {
199		for (const p of $$('.dlazy[data-src]')) load(p);	204		for (const p of $$('.dlazy[data-src]')) load(p);
200		return;	205		return;

@@ -309,7 +314,9 @@ window.ermiteMR = (() => {
309		}	314		}
310			315
311		// Enhance the ordinary anchor navigation only when scripts are available.	316		// Enhance the ordinary anchor navigation only when scripts are available.
			317	+	let disposePanels = () => {};
312		function panels() {	318		function panels() {
			319	+	disposePanels();
313		const footer = $('#mr-panels'), nav = $('[data-mr-tabs]');	320		const footer = $('#mr-panels'), nav = $('[data-mr-tabs]');
314		if (!footer \|\| !nav) return;	321		if (!footer \|\| !nav) return;
315		const tabs = $$('a', nav), panels = $$('[data-mr-panel]', footer);	322		const tabs = $$('a', nav), panels = $$('[data-mr-panel]', footer);

@@ -342,20 +349,30 @@ window.ermiteMR = (() => {
342		footer.open = true; select(index);	349		footer.open = true; select(index);
343		}	350		}
344		// A repeated click on the same hash must also reopen a folded footer.	351		// A repeated click on the same hash must also reopen a folded footer.
345	-	document.addEventListener('click', (e) => {	352	+	const checksClick = (e) => {
346		if (e.target.closest?.('#mr-ck')) { footer.open = true; select(1); }	353		if (e.target.closest?.('#mr-ck')) { footer.open = true; select(1); }
347	-	});	354	+	};
			355	+	document.addEventListener('click', checksClick);
			356	+	let observer;
348		const summary = $('#mr-ck');	357		const summary = $('#mr-ck');
349		if (summary) {	358		if (summary) {
350		const sync = () => { $('[data-checks-label]', nav).textContent = $('#mr-ck')?.title \|\| $('#mr-ck')?.textContent.trim() \|\| 'no checks'; };	359		const sync = () => { $('[data-checks-label]', nav).textContent = $('#mr-ck')?.title \|\| $('#mr-ck')?.textContent.trim() \|\| 'no checks'; };
351	-	new MutationObserver(sync).observe(summary.parentElement, { childList: true, subtree: true, characterData: true });	360	+	observer = new MutationObserver(sync);
			361	+	observer.observe(summary.parentElement, { childList: true, subtree: true, characterData: true });
352		sync();	362		sync();
353		}	363		}
354		select(0); hash();	364		select(0); hash();
355		addEventListener('hashchange', hash);	365		addEventListener('hashchange', hash);
			366	+	disposePanels = () => {
			367	+	document.removeEventListener?.('click', checksClick);
			368	+	window.removeEventListener?.('hashchange', hash);
			369	+	observer?.disconnect?.();
			370	+	};
356		}	371		}
357			372
358	-	function touchComments() {	373	+	let disposeTouch = () => {};
			374	+	function touchComments(scroll = true) {
			375	+	disposeTouch();
359		const diffs = $('#diffs');	376		const diffs = $('#diffs');
360		const bar = document.createElement('div');	377		const bar = document.createElement('div');
361		bar.className = 'mr-touch-range';	378		bar.className = 'mr-touch-range';

@@ -392,23 +409,252 @@ window.ermiteMR = (() => {
392		marker.setAttribute('data-range-start', '');	409		marker.setAttribute('data-range-start', '');
393		status.textContent = `Range starts at line ${link.textContent.trim()}. Tap the last line number (same file and side).`;	410		status.textContent = `Range starts at line ${link.textContent.trim()}. Tap the last line number (same file and side).`;
394		});	411		});
395	-	touch?.addEventListener('change', () => {	412	+	const changed = () => {
396		if (touch.matches) return;	413		if (touch.matches) return;
397		enabled = false;	414		enabled = false;
398		clear();	415		clear();
399		button.setAttribute('aria-pressed', 'false');	416		button.setAttribute('aria-pressed', 'false');
400		status.textContent = '';	417		status.textContent = '';
401	-	});	418	+	};
			419	+	touch?.addEventListener('change', changed);
			420	+	disposeTouch = () => { touch?.removeEventListener?.('change', changed); bar.remove?.(); };
402		// The server opens the line form. Scroll after layout without stealing	421		// The server opens the line form. Scroll after layout without stealing
403		// focus or forcing a mobile keyboard to appear.	422		// focus or forcing a mobile keyboard to appear.
404	-	if (new URL(location.href).searchParams.has('on')) requestAnimationFrame(() => {	423	+	if (scroll && new URL(location.href).searchParams.has('on')) requestAnimationFrame(() => {
405		const form = $$('.fnote .cform', diffs).find((f) => f.getClientRects().length);	424		const form = $$('.fnote .cform', diffs).find((f) => f.getClientRects().length);
406		form?.scrollIntoView({ block: 'center' });	425		form?.scrollIntoView({ block: 'center' });
407		});	426		});
408		}	427		}
409			428
			429	+	// A refresh scheduler has one request in flight, a trailing debounce, and
			430	+	// a dirty bit for pushes received during that request. Drafts are checked
			431	+	// again after the fetch: typing while the network is slow is safe too.
			432	+	function refresher({ blocked, fetchPage, apply, notice, failed, delay = 300 }) {
			433	+	let timer, busy = false, pending = false, force = false;
			434	+	const schedule = () => { clearTimeout(timer); timer = setTimeout(run, delay); };
			435	+	async function run() {
			436	+	if (busy \|\| !pending) return;
			437	+	if (!force && blocked()) { notice(true); return; }
			438	+	busy = true;
			439	+	pending = false;
			440	+	const manual = force; force = false;
			441	+	try {
			442	+	const page = await fetchPage();
			443	+	if (!manual && blocked()) { pending = true; notice(true); return; }
			444	+	if (await apply(page, manual) === false) { pending = true; notice(true); }
			445	+	else notice(false);
			446	+	} catch { failed(); }
			447	+	finally {
			448	+	busy = false;
			449	+	if (pending && (force \|\| !blocked())) schedule();
			450	+	}
			451	+	}
			452	+	return {
			453	+	request(manual = false) { pending = true; force \|\|= manual; schedule(); },
			454	+	resume() { if (pending) schedule(); },
			455	+	pending() { return pending \|\| busy; },
			456	+	};
			457	+	}
			458	+
			459	+	function hasDraft() {
			460	+	return $$('textarea').some((t) => (t.value.length > 0 && t.value !== t.defaultValue) \|\| document.activeElement === t) \|\|
			461	+	!!document.activeElement?.closest?.('.cform');
			462	+	}
			463	+
			464	+	// Path + side + line is stable when files are inserted before this one;
			465	+	// fN is only a positional anchor. Hidden unified/split rows are ignored.
			466	+	function scrollAnchor() {
			467	+	const top = Math.max(0, $('.hdr')?.getBoundingClientRect().bottom \|\| 0,
			468	+	$('.mr-bar')?.getBoundingClientRect().bottom \|\| 0);
			469	+	const diffs = $('#diffs');
			470	+	const bounds = diffs.getBoundingClientRect();
			471	+	const x = Math.max(1, Math.min(innerWidth - 1, bounds.left + Math.min(100, bounds.width / 2)));
			472	+	// A bounded number of probes, independent of the number of diff lines.
			473	+	for (const y of [top + 2, top + 24, top + 64, top + 128]) {
			474	+	if (y >= innerHeight) break;
			475	+	const hit = document.elementFromPoint(x, y);
			476	+	const file = hit?.closest('details.dfile');
			477	+	if (!file \|\| !diffs.contains(file)) continue;
			478	+	const row = hit.closest('tr');
			479	+	const link = row && $('.ln a[href*="on="]', row);
			480	+	const header = $(':scope > summary', file);
			481	+	return { file: file.dataset.file,
			482	+	on: link && new URL(link.href, location.href).searchParams.get('on'),
			483	+	offset: (link ? row : header).getBoundingClientRect().top,
			484	+	headerOffset: header.getBoundingClientRect().top, y: scrollY };
			485	+	}
			486	+	return { y: scrollY };
			487	+	}
			488	+
			489	+	function restoreAnchor(anchor) {
			490	+	const file = $$('#diffs details.dfile').find((f) => f.dataset.file === anchor.file);
			491	+	let el, offset = anchor.offset;
			492	+	if (file && anchor.on) {
			493	+	// Exact href suffix: no traversal or measurement of every line. URLSearchParams
			494	+	// uses the same form encoding as the Go line links (space is '+').
			495	+	const parts = /^(new\|old):(\d+):(.+)$/.exec(anchor.on);
			496	+	const path = parts && new URLSearchParams({ path: parts[3] }).toString().slice(5);
			497	+	const suffix = parts && 'on=' + parts[1] + ':' + parts[2] + ':' + path + '#' + file.id;
			498	+	const layout = $('#diffs').dataset.diff \|\| $('#diffs').dataset.view;
			499	+	const table = $(layout === 'split' && !window.matchMedia?.('(max-width: 720px)').matches ? '.dt.spl' : '.dt.uni', file) \|\| file;
			500	+	if (suffix) el = $('a[href$="' + CSS.escape(suffix) + '"]', table)?.closest('tr');
			501	+	}
			502	+	if (!el && file) { el = $(':scope > summary', file); offset = anchor.headerOffset ?? anchor.offset; }
			503	+	if (el) window.scrollBy({ top: el.getBoundingClientRect().top - offset, behavior: 'instant' });
			504	+	else window.scrollTo({ top: Math.max(0, Math.min(anchor.y, document.documentElement.scrollHeight - innerHeight)), behavior: 'instant' });
			505	+	}
			506	+
			507	+	async function fetchPage() {
			508	+	const res = await fetch(location.href, { credentials: 'same-origin', headers: { Accept: 'text/html' } });
			509	+	if (!res.ok \|\| res.redirected) throw new Error('MR refresh refused');
			510	+	const page = new DOMParser().parseFromString(await res.text(), 'text/html');
			511	+	if (!$('#diffs[data-mr]', page) \|\| !$('.mr-bar', page) \|\| !$('.hint-live', page)) throw new Error('not an MR page');
			512	+	return page;
			513	+	}
			514	+
			515	+	// Use htmx's swap rather than replaceWith: its cleanup retires the old SSE
			516	+	// reader and hx-live bindings, and process activates the inserted controls.
			517	+	async function replaceRegion(old, fresh) {
			518	+	if (!old \|\| !fresh) throw new Error('missing MR refresh region');
			519	+	for (const el of $$('[autofocus]', fresh)) el.removeAttribute('autofocus');
			520	+	await window.htmx.swap({ sourceElement: old, target: old, text: fresh.outerHTML,
			521	+	swap: 'outerHTML settle:0 transition:false focusScroll:false', push: false, replace: false });
			522	+	}
			523	+
			524	+	async function refreshPage(page, manual = false) {
			525	+	const regions = ['.mr-footer', '#mr-range', '.mr-bar', '#mr-diff-notices', '#diffs', '.rail', '.hint-live'];
			526	+	for (const sel of regions) if (!$(sel) \|\| !$(sel, page)) throw new Error('missing MR region');
			527	+	let anchor = scrollAnchor();
			528	+	const anchorFile = $$('#diffs details.dfile', page).find((f) => f.dataset.file === anchor.file);
			529	+	const placeholder = anchorFile && $('.dlazy[data-src]', anchorFile);
			530	+	if (placeholder) {
			531	+	const d = $('#diffs').dataset;
			532	+	const url = placeholder.dataset.src + '&view=' + encodeURIComponent(d.diff \|\| d.view \|\| 'unified') + '&layouts=' + (d.diff ? 'both' : 'one');
			533	+	const res = await fetch(url, { credentials: 'same-origin', headers: { Accept: 'text/html' } });
			534	+	if (!res.ok \|\| res.redirected) throw new Error('anchor window changed');
			535	+	const windowPage = new DOMParser().parseFromString(await res.text(), 'text/html');
			536	+	const byID = new Map($$('#diffs details.dfile', page).map((f) => [f.id, f]));
			537	+	for (const f of $$('details.dfile', windowPage)) byID.get(f.id)?.replaceWith(f);
			538	+	if (!manual && hasDraft()) return false;
			539	+	anchor = scrollAnchor();
			540	+	}
			541	+	const files = new Map($$('#diffs details.dfile').map((f) => [f.dataset.file, f.open]));
			542	+	const folded = $('.r-files')?.hasAttribute('data-folded');
			543	+	const railY = $('.rail')?.scrollTop, filesY = $('.r-files .files')?.scrollTop;
			544	+	const footerOpen = $('#mr-panels')?.open;
			545	+	const tab = $('[data-mr-tabs] [aria-selected="true"]')?.id;
			546	+	const active = document.activeElement;
			547	+	const focus = active && { menu: active.closest?.('details.menu')?.id, id: active.id, tag: active.tagName, name: active.getAttribute('name'), href: active.getAttribute('href') };
			548	+	// Manual refresh keeps even an active draft whose line disappeared. It
			549	+	// stays an ordinary form, under an explicit previous-diff label.
			550	+	const drafts = [...new Set($$('#diffs textarea').filter((t) => t.value !== t.defaultValue \|\| t === active \|\| t.closest('form')?.contains(active)).map((t) => t.closest('form')).filter(Boolean))];
			551	+	let draftID = 0;
			552	+	for (const form of drafts) {
			553	+	for (const t of $$('textarea', form)) {
			554	+	if (!t.id) t.id = 'mr-preserved-draft-' + (++draftID);
			555	+	if (t === active) focus.id = t.id;
			556	+	}
			557	+	const id = $('textarea', form)?.id;
			558	+	const replacement = id && $$('textarea', page).find((t) => t.id === id)?.closest('.cform');
			559	+	const copy = form.cloneNode(true);
			560	+	const originalFields = $$('textarea, input, select', form);
			561	+	$$('textarea, input, select', copy).forEach((field, i) => {
			562	+	const original = originalFields[i];
			563	+	if (field.tagName === 'TEXTAREA') field.textContent = original.defaultValue;
			564	+	else if (field.tagName === 'INPUT') { field.setAttribute('value', original.value); field.toggleAttribute('checked', original.checked); }
			565	+	});
			566	+	if (replacement) replacement.replaceWith(copy);
			567	+	else {
			568	+	const box = page.createElement('div');
			569	+	const label = page.createElement('p'); label.className = 'notice';
			570	+	label.textContent = 'Unsent comment on the previous diff (the line may have moved).';
			571	+	box.append(label, copy); $('#diffs', page).prepend(box);
			572	+	}
			573	+	}
			574	+	// Serializing markup does not retain textarea.value or selection. Restore
			575	+	// values after the htmx swap, without ever clearing the source drafts.
			576	+	const values = drafts.flatMap((f) => $$('textarea', f).map((t) => ({ id: t.id, value: t.value, start: t.selectionStart, end: t.selectionEnd })));
			577	+	for (const f of $$('#diffs details.dfile', page)) if (files.has(f.dataset.file)) f.open = files.get(f.dataset.file);
			578	+	++diffGeneration; ++revealGen; moved = false; loading.clear(); lazyIO?.disconnect();
			579	+	// Keep the chosen client-side layout when the URL was not pinned.
			580	+	const layout = $('#diffs')?.dataset;
			581	+	if (layout?.diff && $('#diffs', page).dataset.diff) $('#diffs', page).dataset.diff = layout.diff;
			582	+	$('#diffs', page).dataset.mrStarted = 'true';
			583	+	for (const sel of regions) {
			584	+	const fresh = $(sel, page);
			585	+	await replaceRegion($(sel), fresh);
			586	+	fresh.remove(); // release each parsed region as soon as it is consumed
			587	+	}
			588	+	for (const v of values) {
			589	+	const t = document.getElementById(v.id);
			590	+	if (t) { t.value = v.value; t.setSelectionRange(v.start, v.end); }
			591	+	}
			592	+	for (const key of ['ref', 'sha', 'paths', 'blob']) {
			593	+	if (page.body.dataset[key] !== undefined) document.body.dataset[key] = page.body.dataset[key];
			594	+	}
			595	+	const oldSHA = $('.hdr .ref .sha'), newSHA = $('.hdr .ref .sha', page);
			596	+	if (oldSHA && newSHA) oldSHA.textContent = newSHA.textContent;
			597	+	panels();
			598	+	if (tab) {
			599	+	const oldURL = location.href;
			600	+	document.getElementById(tab)?.click();
			601	+	if (location.href !== oldURL) history.replaceState(history.state, '', oldURL);
			602	+	}
			603	+	if ($('#mr-panels')) $('#mr-panels').open = footerOpen;
			604	+	foldFiles(!!folded);
			605	+	if ($('.rail')) $('.rail').scrollTop = railY;
			606	+	if ($('.r-files .files')) $('.r-files .files').scrollTop = filesY;
			607	+	touchComments(false);
			608	+	$('#diffs').dataset.mobile = String(!!window.matchMedia?.('(max-width: 720px)').matches);
			609	+	window.ermite?.refreshFiles?.();
			610	+	watch();
			611	+	if (focus && active !== document.body) {
			612	+	const same = (e) => e.tagName === focus.tag && (focus.id ? e.id === focus.id :
			613	+	focus.href ? e.getAttribute('href') === focus.href : focus.name && e.getAttribute('name') === focus.name);
			614	+	const el = focus.menu && !focus.id && !focus.name && !focus.href ? document.getElementById(focus.menu)?.querySelector(':scope > summary') : focus.id ? document.getElementById(focus.id) : focus.href ? $('a[href="' + CSS.escape(focus.href) + '"]') : focus.name ? $('[name="' + CSS.escape(focus.name) + '"]') : null;
			615	+	if (el && (same(el) \|\| focus.menu)) el.focus({ preventScroll: true });
			616	+	}
			617	+	restoreAnchor(anchor);
			618	+	}
			619	+
			620	+	function refreshNotice(deferred) {
			621	+	let slot = $('#mr-refresh-status');
			622	+	if (!slot) {
			623	+	slot = document.createElement('div'); slot.id = 'mr-refresh-status'; slot.className = 'live-slot';
			624	+	slot.setAttribute('role', 'status'); slot.setAttribute('aria-live', 'polite');
			625	+	$('#mr-notice')?.after(slot);
			626	+	}
			627	+	slot.className = deferred ? 'live-slot' : 'sr';
			628	+	slot.replaceChildren();
			629	+	if (!deferred) {
			630	+	const text = document.createElement('span'); text.textContent = 'branch updated'; slot.append(text);
			631	+	return;
			632	+	}
			633	+	slot.append('branch updated — refreshing after your comment. ');
			634	+	const a = document.createElement('a'); a.href = location.href; a.textContent = 'refresh now';
			635	+	a.addEventListener('click', (e) => { e.preventDefault(); headRefresh.request(true); });
			636	+	slot.append(a);
			637	+	}
			638	+	const headRefresh = refresher({ blocked: hasDraft, fetchPage, apply: refreshPage, notice: refreshNotice,
			639	+	failed: () => { if (hasDraft()) refreshNotice(true); else window.ermiteLive?.reload(); } });
			640	+	function headChanged() { if ($('#diffs[data-mr]')) headRefresh.request(); }
			641	+
410		function start() {	642		function start() {
411		if (!$('#diffs[data-mr]')) return;	643		if (!$('#diffs[data-mr]')) return;
			644	+	// Global delegation is installed once; replacement regions have their own
			645	+	// disposable panel/touch hooks below.
			646	+	if ($('#diffs').dataset.mrStarted) return;
			647	+	$('#diffs').dataset.mrStarted = 'true';
			648	+	for (const type of ['input', 'focusout', 'reset', 'submit']) document.addEventListener?.(type, () => headRefresh.resume());
			649	+	document.addEventListener?.('click', (e) => {
			650	+	const cancel = e.target.closest?.('.cform .f-btns a');
			651	+	if (!cancel \|\| !headRefresh.pending() \|\| e.ctrlKey \|\| e.metaKey \|\| e.shiftKey \|\| e.altKey) return;
			652	+	e.preventDefault();
			653	+	const form = cancel.closest('.cform');
			654	+	for (const t of $$('textarea', form)) t.value = '';
			655	+	if (form.contains(document.activeElement)) document.activeElement.blur();
			656	+	headRefresh.resume();
			657	+	});
412		panels();	658		panels();
413		// Large diffs may contain only the split table. Ask the existing server	659		// Large diffs may contain only the split table. Ask the existing server
414		// route for unified rather than writing the saved session preference.	660		// route for unified rather than writing the saved session preference.

@@ -457,7 +703,7 @@ window.ermiteMR = (() => {
457		});	703		});
458		}	704		}
459			705
460	-	return { core, panels, start, load, reveal, openMerge, menuKey, markRead, focusFiles, stepFiles, leaveFiles, foldFiles, openFile };	706	+	return { core, refresher, hasDraft, fetchPage, scrollAnchor, restoreAnchor, headChanged, panels, start, load, reveal, openMerge, menuKey, markRead, focusFiles, stepFiles, leaveFiles, foldFiles, openFile };
461		})();	707		})();
462			708
463		if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', () => window.ermiteMR.start());	709		if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', () => window.ermiteMR.start());

M internal/app/testdata/web/commits-root.html +1 -0


@@ -973,6 +973,7 @@
973	973		htmx:sse:error -> ermiteLive.error(event.detail.status);
974	974		htmx:sse:before:connection -> ermiteLive.gate(event);
975	975		home-list, repo-last-push, refs-list, commits-head, mr-notice, mr-mergeability, ci-run, ci-job, inbox -> ermiteLive.swap(event.detail.data);
	976	+	mr-head -> ermiteMR.headChanged();
976	977		gap -> ermiteLive.reload()">
977	978		</span>
978	979		</div>


@@ -973,6 +973,7 @@
973	htmx:sse:error -> ermiteLive.error(event.detail.status);	973		htmx:sse:error -> ermiteLive.error(event.detail.status);
974	htmx:sse:before:connection -> ermiteLive.gate(event);	974		htmx:sse:before:connection -> ermiteLive.gate(event);
975	home-list, repo-last-push, refs-list, commits-head, mr-notice, mr-mergeability, ci-run, ci-job, inbox -> ermiteLive.swap(event.detail.data);	975		home-list, repo-last-push, refs-list, commits-head, mr-notice, mr-mergeability, ci-run, ci-job, inbox -> ermiteLive.swap(event.detail.data);
		976	+	mr-head -> ermiteMR.headChanged();
976	gap -> ermiteLive.reload()">	977		gap -> ermiteLive.reload()">
977	</span>	978		</span>
978	</div>	979		</div>

M internal/app/testdata/web/commits-small.html +1 -0


@@ -318,6 +318,7 @@
318	318		htmx:sse:error -> ermiteLive.error(event.detail.status);
319	319		htmx:sse:before:connection -> ermiteLive.gate(event);
320	320		home-list, repo-last-push, refs-list, commits-head, mr-notice, mr-mergeability, ci-run, ci-job, inbox -> ermiteLive.swap(event.detail.data);
	321	+	mr-head -> ermiteMR.headChanged();
321	322		gap -> ermiteLive.reload()">
322	323		</span>
323	324		</div>


@@ -318,6 +318,7 @@
318	htmx:sse:error -> ermiteLive.error(event.detail.status);	318		htmx:sse:error -> ermiteLive.error(event.detail.status);
319	htmx:sse:before:connection -> ermiteLive.gate(event);	319		htmx:sse:before:connection -> ermiteLive.gate(event);
320	home-list, repo-last-push, refs-list, commits-head, mr-notice, mr-mergeability, ci-run, ci-job, inbox -> ermiteLive.swap(event.detail.data);	320		home-list, repo-last-push, refs-list, commits-head, mr-notice, mr-mergeability, ci-run, ci-job, inbox -> ermiteLive.swap(event.detail.data);
		321	+	mr-head -> ermiteMR.headChanged();
321	gap -> ermiteLive.reload()">	322		gap -> ermiteLive.reload()">
322	</span>	323		</span>
323	</div>	324		</div>

M internal/app/testdata/web/home.html +1 -0


@@ -194,6 +194,7 @@
194	194		htmx:sse:error -> ermiteLive.error(event.detail.status);
195	195		htmx:sse:before:connection -> ermiteLive.gate(event);
196	196		home-list, repo-last-push, refs-list, commits-head, mr-notice, mr-mergeability, ci-run, ci-job, inbox -> ermiteLive.swap(event.detail.data);
	197	+	mr-head -> ermiteMR.headChanged();
197	198		gap -> ermiteLive.reload()">
198	199		</span>
199	200		</div>


@@ -194,6 +194,7 @@
194	htmx:sse:error -> ermiteLive.error(event.detail.status);	194		htmx:sse:error -> ermiteLive.error(event.detail.status);
195	htmx:sse:before:connection -> ermiteLive.gate(event);	195		htmx:sse:before:connection -> ermiteLive.gate(event);
196	home-list, repo-last-push, refs-list, commits-head, mr-notice, mr-mergeability, ci-run, ci-job, inbox -> ermiteLive.swap(event.detail.data);	196		home-list, repo-last-push, refs-list, commits-head, mr-notice, mr-mergeability, ci-run, ci-job, inbox -> ermiteLive.swap(event.detail.data);
		197	+	mr-head -> ermiteMR.headChanged();
197	gap -> ermiteLive.reload()">	198		gap -> ermiteLive.reload()">
198	</span>	199		</span>
199	</div>	200		</div>

M internal/app/testdata/web/refs.html +1 -0


@@ -200,6 +200,7 @@
200	200		htmx:sse:error -> ermiteLive.error(event.detail.status);
201	201		htmx:sse:before:connection -> ermiteLive.gate(event);
202	202		home-list, repo-last-push, refs-list, commits-head, mr-notice, mr-mergeability, ci-run, ci-job, inbox -> ermiteLive.swap(event.detail.data);
	203	+	mr-head -> ermiteMR.headChanged();
203	204		gap -> ermiteLive.reload()">
204	205		</span>
205	206		</div>


@@ -200,6 +200,7 @@
200	htmx:sse:error -> ermiteLive.error(event.detail.status);	200		htmx:sse:error -> ermiteLive.error(event.detail.status);
201	htmx:sse:before:connection -> ermiteLive.gate(event);	201		htmx:sse:before:connection -> ermiteLive.gate(event);
202	home-list, repo-last-push, refs-list, commits-head, mr-notice, mr-mergeability, ci-run, ci-job, inbox -> ermiteLive.swap(event.detail.data);	202		home-list, repo-last-push, refs-list, commits-head, mr-notice, mr-mergeability, ci-run, ci-job, inbox -> ermiteLive.swap(event.detail.data);
		203	+	mr-head -> ermiteMR.headChanged();
203	gap -> ermiteLive.reload()">	204		gap -> ermiteLive.reload()">
204	</span>	205		</span>
205	</div>	206		</div>

M internal/app/testdata/web/summary.html +1 -0


@@ -226,6 +226,7 @@
226	226		htmx:sse:error -> ermiteLive.error(event.detail.status);
227	227		htmx:sse:before:connection -> ermiteLive.gate(event);
228	228		home-list, repo-last-push, refs-list, commits-head, mr-notice, mr-mergeability, ci-run, ci-job, inbox -> ermiteLive.swap(event.detail.data);
	229	+	mr-head -> ermiteMR.headChanged();
229	230		gap -> ermiteLive.reload()">
230	231		</span>
231	232		</div>


@@ -226,6 +226,7 @@
226	htmx:sse:error -> ermiteLive.error(event.detail.status);	226		htmx:sse:error -> ermiteLive.error(event.detail.status);
227	htmx:sse:before:connection -> ermiteLive.gate(event);	227		htmx:sse:before:connection -> ermiteLive.gate(event);
228	home-list, repo-last-push, refs-list, commits-head, mr-notice, mr-mergeability, ci-run, ci-job, inbox -> ermiteLive.swap(event.detail.data);	228		home-list, repo-last-push, refs-list, commits-head, mr-notice, mr-mergeability, ci-run, ci-job, inbox -> ermiteLive.swap(event.detail.data);
		229	+	mr-head -> ermiteMR.headChanged();
229	gap -> ermiteLive.reload()">	230		gap -> ermiteLive.reload()">
230	</span>	231		</span>
231	</div>	232		</div>

M internal/app/web_mr_test.go +3 -2


@@ -595,8 +595,9 @@ func TestWebMergeRequestEvents(t *testing.T) {
595	595
596	596		r.writeFile(r.wt, "more.txt", []byte("more\n"))
597	597		r.mustGit(r.wt, "push", "-q", r.url, "feat/search")
598		-	ev = nextNamed(t, one, "mr-notice")
599		-	assert.Contains(t, ev.data, "the branch changed")
	598	+	ev = nextNamed(t, one, "mr-head")
	599	+	assert.Equal(t, `<div id="mr-head"></div>`, ev.data)
	600	+	assert.NotContains(t, ev.data, "the branch changed")
600	601
601	602		r.cli(t, adminToken, "mr", "close", "proj", "1").ok(t)
602	603		assert.Contains(t, nextNamed(t, one, "mr-notice").data, "was closed")


@@ -595,8 +595,9 @@ func TestWebMergeRequestEvents(t *testing.T) {
595			595
596		r.writeFile(r.wt, "more.txt", []byte("more\n"))	596		r.writeFile(r.wt, "more.txt", []byte("more\n"))
597		r.mustGit(r.wt, "push", "-q", r.url, "feat/search")	597		r.mustGit(r.wt, "push", "-q", r.url, "feat/search")
598	-	ev = nextNamed(t, one, "mr-notice")	598	+	ev = nextNamed(t, one, "mr-head")
599	-	assert.Contains(t, ev.data, "the branch changed")	599	+	assert.Equal(t, `<div id="mr-head"></div>`, ev.data)
			600	+	assert.NotContains(t, ev.data, "the branch changed")
600			601
601		r.cli(t, adminToken, "mr", "close", "proj", "1").ok(t)	602		r.cli(t, adminToken, "mr", "close", "proj", "1").ok(t)
602		assert.Contains(t, nextNamed(t, one, "mr-notice").data, "was closed")	603		assert.Contains(t, nextNamed(t, one, "mr-notice").data, "was closed")