Merge fe192203ee99178ad1bcbf9cd0c6e9b8e02cf667 into cc7ba64ee52412f41c3ce5207bac7e47b9f01f30

commit: 33987875264b2da83ba42dcad14ff1bc37fd16ae
author: ermite · 2d ago · 2026-10-20 09:05 UTC
merge of: cc7ba64 + fe19220 · diff against the first parent
signature: unsigned

40 files · +2546 -1249

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


@@ -104,3 +104,32 @@ report whether more exist; ancestry, rather than the bounded list, detects a
104	104		rewrite. Merge-request details include at most `ports.MaxMergeRequestCommits`
105	105		(100) commits. These history queries remain on the merge-request service
106	106		because it owns the merge-git port.
	107	+
	108	+	### Review page panels
	109	+
	110	+	The main request card ends with a footer of two tabs, Commits and Checks, both
	111	+	collapsed by default. Clicking a tab opens its panel, clicking the open tab
	112	+	folds it again, clicking the other tab switches. Arrow keys (and Home / End)
	113	+	move between the tabs. Without scripts the tabs are anchor links and the URL
	114	+	fragment (`#mr-commits`, `#mr-checks`) shows the panel. The checks summary above
	115	+	the diff opens the Checks panel and continues to update live. Commit totals use
	116	+	`N+` when the branch list is capped: the reader's existing count operation counts all reachable
	117	+	ancestors, not the source-minus-target range.
	118	+
	119	+	The rail keeps Files (including its `g f` shortcut) and Verdicts. Merge settings
	120	+	are read-only information in the More (⋯) menu, available to every viewer.
	121	+	Signing-key information is also there when a merge box offers signed modes;
	122	+	merge actions remain restricted to their existing permissions.
	123	+
	124	+	## Live source-branch updates
	125	+
	126	+	A push to the source branch refreshes the web review in place: the diff, files
	127	+	rail, commits/checks footer, diff range and merge controls follow the new head.
	128	+	The review keeps its visible file/line, folded files and open footer panel.
	129	+	The page request still reads only one 25-file window of hunks; the visible
	130	+	anchor's window is fetched too if needed, and other windows remain lazy.
	131	+
	132	+	While a comment is focused or has unsent edits, the refresh waits. A small
	133	+	“branch updated — refreshing after your comment” status explains the delay.
	134	+	Sending, cancelling, or reverting the draft and leaving its form lets the
	135	+	pending refresh proceed. Refresh never preserves or discards an unsent draft.


@@ -104,3 +104,32 @@ report whether more exist; ancestry, rather than the bounded list, detects a
104	rewrite. Merge-request details include at most `ports.MaxMergeRequestCommits`	104		rewrite. Merge-request details include at most `ports.MaxMergeRequestCommits`
105	(100) commits. These history queries remain on the merge-request service	105		(100) commits. These history queries remain on the merge-request service
106	because it owns the merge-git port.	106		because it owns the merge-git port.
		107	+
		108	+	### Review page panels
		109	+
		110	+	The main request card ends with a footer of two tabs, Commits and Checks, both
		111	+	collapsed by default. Clicking a tab opens its panel, clicking the open tab
		112	+	folds it again, clicking the other tab switches. Arrow keys (and Home / End)
		113	+	move between the tabs. Without scripts the tabs are anchor links and the URL
		114	+	fragment (`#mr-commits`, `#mr-checks`) shows the panel. The checks summary above
		115	+	the diff opens the Checks panel and continues to update live. Commit totals use
		116	+	`N+` when the branch list is capped: the reader's existing count operation counts all reachable
		117	+	ancestors, not the source-minus-target range.
		118	+
		119	+	The rail keeps Files (including its `g f` shortcut) and Verdicts. Merge settings
		120	+	are read-only information in the More (⋯) menu, available to every viewer.
		121	+	Signing-key information is also there when a merge box offers signed modes;
		122	+	merge actions remain restricted to their existing permissions.
		123	+
		124	+	## Live source-branch updates
		125	+
		126	+	A push to the source branch refreshes the web review in place: the diff, files
		127	+	rail, commits/checks footer, diff range and merge controls follow the new head.
		128	+	The review keeps its visible file/line, folded files and open footer panel.
		129	+	The page request still reads only one 25-file window of hunks; the visible
		130	+	anchor's window is fetched too if needed, and other windows remain lazy.
		131	+
		132	+	While a comment is focused or has unsent edits, the refresh waits. A small
		133	+	“branch updated — refreshing after your comment” status explains the delay.
		134	+	Sending, cancelling, or reverting the draft and leaving its form lets the
		135	+	pending refresh proceed. Refresh never preserves or discards an unsent draft.

M internal/adapters/web/actions.templ +2 -2


@@ -434,7 +434,7 @@ templ CommitChecks(c ChecksSummary) {
434	434		}
435	435
436	436		// MRChecksSum is the state of the checks of a merge request in the bar above
437		-	// the diff, a link to the checks of the rail. The event stream replaces it
	437	+	// the diff, a link to the checks of the card footer. The event stream replaces it
438	438		// with the checks section (same event, fragments.go).
439	439		templ MRChecksSum(c ChecksSummary) {
440	440		<a class="ck-sum mr-ck" id="mr-ck" href="#mr-checks" title={ c.Title }>

@@ -447,7 +447,7 @@ templ MRChecksSum(c ChecksSummary) {
447	447		</a>
448	448		}
449	449
450		-	// MRChecks is the checks section of the rail of a merge request.
	450	+	// MRChecks is the checks section of the footer of a merge request.
451	451		templ MRChecks(c ChecksSection) {
452	452		<section aria-labelledby="r-checks" id="mr-checks">
453	453		<h2 id="r-checks">Checks <span class="count">{ itoa(len(c.Rows)) }</span></h2>


@@ -434,7 +434,7 @@ templ CommitChecks(c ChecksSummary) {
434		}	434		}
435			435
436		// MRChecksSum is the state of the checks of a merge request in the bar above	436		// MRChecksSum is the state of the checks of a merge request in the bar above
437	-	// the diff, a link to the checks of the rail. The event stream replaces it	437	+	// the diff, a link to the checks of the card footer. The event stream replaces it
438		// with the checks section (same event, fragments.go).	438		// with the checks section (same event, fragments.go).
439		templ MRChecksSum(c ChecksSummary) {	439		templ MRChecksSum(c ChecksSummary) {
440		<a class="ck-sum mr-ck" id="mr-ck" href="#mr-checks" title={ c.Title }>	440		<a class="ck-sum mr-ck" id="mr-ck" href="#mr-checks" title={ c.Title }>

@@ -447,7 +447,7 @@ templ MRChecksSum(c ChecksSummary) {
447		</a>	447		</a>
448		}	448		}
449			449
450	-	// MRChecks is the checks section of the rail of a merge request.	450	+	// MRChecks is the checks section of the footer of a merge request.
451		templ MRChecks(c ChecksSection) {	451		templ MRChecks(c ChecksSection) {
452		<section aria-labelledby="r-checks" id="mr-checks">	452		<section aria-labelledby="r-checks" id="mr-checks">
453		<h2 id="r-checks">Checks <span class="count">{ itoa(len(c.Rows)) }</span></h2>	453		<h2 id="r-checks">Checks <span class="count">{ itoa(len(c.Rows)) }</span></h2>

M internal/adapters/web/actions_templ.go +2 -2


@@ -3020,7 +3020,7 @@ func CommitChecks(c ChecksSummary) templ.Component {
3020	3020		}
3021	3021
3022	3022		// MRChecksSum is the state of the checks of a merge request in the bar above
3023		-	// the diff, a link to the checks of the rail. The event stream replaces it
	3023	+	// the diff, a link to the checks of the card footer. The event stream replaces it
3024	3024		// with the checks section (same event, fragments.go).
3025	3025		func MRChecksSum(c ChecksSummary) templ.Component {
3026	3026		return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {

@@ -3096,7 +3096,7 @@ func MRChecksSum(c ChecksSummary) templ.Component {
3096	3096		})
3097	3097		}
3098	3098
3099		-	// MRChecks is the checks section of the rail of a merge request.
	3099	+	// MRChecks is the checks section of the footer of a merge request.
3100	3100		func MRChecks(c ChecksSection) templ.Component {
3101	3101		return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
3102	3102		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context


@@ -3020,7 +3020,7 @@ func CommitChecks(c ChecksSummary) templ.Component {
3020		}	3020		}
3021			3021
3022		// MRChecksSum is the state of the checks of a merge request in the bar above	3022		// MRChecksSum is the state of the checks of a merge request in the bar above
3023	-	// the diff, a link to the checks of the rail. The event stream replaces it	3023	+	// the diff, a link to the checks of the card footer. The event stream replaces it
3024		// with the checks section (same event, fragments.go).	3024		// with the checks section (same event, fragments.go).
3025		func MRChecksSum(c ChecksSummary) templ.Component {	3025		func MRChecksSum(c ChecksSummary) templ.Component {
3026		return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {	3026		return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {

@@ -3096,7 +3096,7 @@ func MRChecksSum(c ChecksSummary) templ.Component {
3096		})	3096		})
3097		}	3097		}
3098			3098
3099	-	// MRChecks is the checks section of the rail of a merge request.	3099	+	// MRChecks is the checks section of the footer of a merge request.
3100		func MRChecks(c ChecksSection) templ.Component {	3100		func MRChecks(c ChecksSection) templ.Component {
3101		return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {	3101		return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
3102		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context	3102		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context

M internal/adapters/web/checks.go +1 -1


@@ -81,7 +81,7 @@ func checksSummary(repo domain.RepoName, sha string, checks []ports.CheckView) C
81	81		return sum
82	82		}
83	83
84		-	// checksSection is the checks of the rail of a merge request, with the rule of
	84	+	// checksSection is the checks of the footer of a merge request, with the rule of
85	85		// the repository that applies to them.
86	86		func checksSection(repo domain.Repo, checks []ports.CheckView) ChecksSection {
87	87		sec := ChecksSection{}


@@ -81,7 +81,7 @@ func checksSummary(repo domain.RepoName, sha string, checks []ports.CheckView) C
81		return sum	81		return sum
82		}	82		}
83			83
84	-	// checksSection is the checks of the rail of a merge request, with the rule of	84	+	// checksSection is the checks of the footer of a merge request, with the rule of
85		// the repository that applies to them.	85		// the repository that applies to them.
86		func checksSection(repo domain.Repo, checks []ports.CheckView) ChecksSection {	86		func checksSection(repo domain.Repo, checks []ports.CheckView) ChecksSection {
87		sec := ChecksSection{}	87		sec := ChecksSection{}

M internal/adapters/web/diff.templ +6 -2


@@ -117,7 +117,7 @@ templ diffViewMenu(p DiffView) {
117	117		<details class="menu vmenu">
118	118		<summary class="btn" aria-label="Diff view">
119	119		if p.Both {
120		-	<span hx-live="this.textContent = q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">{ viewLabel(p.View) }</span>
	120	+	<span hx-live="this.textContent = q('#diffs').attr['data-mobile'] !== 'true' && q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">{ viewLabel(p.View) }</span>
121	121		} else {
122	122		{ viewLabel(p.View) }
123	123		}

@@ -139,12 +139,16 @@ templ viewLink(p DiffView, view, label, key, href string) {
139	139		class="btn vbtn"
140	140		data-view={ view }
141	141		aria-keyshortcuts={ key }
	142	+	if view == "split" {
	143	+	:aria-disabled="q('#diffs').attr['data-mobile'] === 'true' ? 'true' : false"
	144	+	:title="q('#diffs').attr['data-mobile'] === 'true' ? 'Split view requires a wider screen' : 'Split view'"
	145	+	}
142	146		if p.View == view {
143	147		aria-current="true"
144	148		}
145	149		if p.Both {
146	150		data-fire={ view }
147		-	:aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false"
	151	+	:aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false"
148	152		}
149	153		>{ label }<kbd aria-hidden="true">{ key }</kbd></a>
150	154		}

 	<details class="menu vmenu">
 		<summary class="btn" aria-label="Diff view">
 			if p.Both {
-				<span hx-live="this.textContent = q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">{ viewLabel(p.View) }</span>
+				<span hx-live="this.textContent = q('#diffs').attr['data-mobile'] !== 'true' && q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">{ viewLabel(p.View) }</span>
 			} else {
 				{ viewLabel(p.View) }
 			}
 		class="btn vbtn"
 		data-view={ view }
 		aria-keyshortcuts={ key }
+		if view == "split" {
+			:aria-disabled="q('#diffs').attr['data-mobile'] === 'true' ? 'true' : false"
+			:title="q('#diffs').attr['data-mobile'] === 'true' ? 'Split view requires a wider screen' : 'Split view'"
+		}
 		if p.View == view {
 			aria-current="true"
 		}
 		if p.Both {
 			data-fire={ view }
-			:aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false"
+			:aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false"
 		}
 	>{ label }<kbd aria-hidden="true">{ key }</kbd></a>
 }

M internal/adapters/web/diff_templ.go +190 -184 generated file: collapsed

load diff

M internal/adapters/web/events.go +13 -3


@@ -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

@@ -44,7 +44,9 @@ import (
44	44		// lists first: the banner counts the commits between that head and the new
45	45		// tip, so it stays right however many pushes came in and however often the
46	46		// stream reconnected. A Last-Event-ID header resumes the stream
47		-	// (resume_after).
	47	+	// (resume_after). With no header, after=<event id> supplies the resume cursor
	48	+	// for a replacement stream. The header wins. Both use Watch's parseID
	49	+	// validation: an invalid or expired cursor produces a gap.
48	50		//
49	51		// Events, each with the id of the Watch event it comes from:
50	52		//

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

@@ -184,8 +190,12 @@ func (s Server) events(w http.ResponseWriter, r http.Request) {
184	190		var startOnce sync.Once
185	191		start := func() { startOnce.Do(func() { close(started) }) }
186	192		finished := make(chan struct{})
	193	+	resume := r.Header.Get("Last-Event-ID")
	194	+	if resume == "" {
	195	+	resume = q.Get("after")
	196	+	}
187	197		params := ports.WatchParams{
188		-	Topics: []string{topic}, ResumeAfter: r.Header.Get("Last-Event-ID"),
	198	+	Topics: []string{topic}, ResumeAfter: resume,
189	199		// The visitor is the client of the watch, for the limit per client.
190	200		Client: clientlimit.Key(clientlimit.ClientAddr(r, s.cfg.TrustedProxies)),
191	201		Ready: start,

 //	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
 // lists first: the banner counts the commits between that head and the new
 // tip, so it stays right however many pushes came in and however often the
 // stream reconnected. A Last-Event-ID header resumes the stream
-// (resume_after).
+// (resume_after). With no header, after=<event id> supplies the resume cursor
+// for a replacement stream. The header wins. Both use Watch's parseID
+// validation: an invalid or expired cursor produces a gap.
 //
 // Events, each with the id of the Watch event it comes from:
 //
 //	                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),
 	var startOnce sync.Once
 	start := func() { startOnce.Do(func() { close(started) }) }
 	finished := make(chan struct{})
+	resume := r.Header.Get("Last-Event-ID")
+	if resume == "" {
+		resume = q.Get("after")
+	}
 	params := ports.WatchParams{
-		Topics: []string{topic}, ResumeAfter: r.Header.Get("Last-Event-ID"),
+		Topics: []string{topic}, ResumeAfter: resume,
 		// The visitor is the client of the watch, for the limit per client.
 		Client: clientlimit.Key(clientlimit.ClientAddr(r, s.cfg.TrustedProxies)),
 		Ready:  start,

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


@@ -478,3 +478,53 @@ 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	+	}
	505	+
	506	+	func TestMRPushBothBranches(t *testing.T) {
	507	+	t.Parallel()
	508	+	for _, refs := range [][]string{{"feature", "main"}, {"main", "feature"}} {
	509	+	t.Run(strings.Join(refs, "-"), func(t *testing.T) {
	510	+	t.Parallel()
	511	+	svc := mocks.NewMergeRequestService(t)
	512	+	svc.EXPECT().Mergeability(mock.Anything, mock.Anything, mock.Anything, int64(1)).Return(domain.Mergeability{State: domain.MergeabilityUpToDate}, nil).Once()
	513	+	l := liveStream{s: &Server{cfg: Config{MergeRequests: svc}}, repo: "demo", view: "mr", n: "1", ref: "feature", target: "main"}
	514	+	ctx := context.WithValue(t.Context(), signedInKey{}, struct{}{})
	515	+	fs, err := l.mrPushed(ctx, domain.PushEvent{Updates: []domain.RefUpdate{{Ref: "refs/heads/" + refs[0]}, {Ref: "refs/heads/" + refs[1]}}})
	516	+	require.NoError(t, err)
	517	+	require.Len(t, fs, 2)
	518	+	assert.Equal(t, "mr-head", fs[0].event)
	519	+	assert.Equal(t, "mr-mergeability", fs[1].event)
	520	+	})
	521	+	}
	522	+	}
	523	+
	524	+	func TestNonMRPushRoutingNeverEmitsMRHead(t *testing.T) {
	525	+	t.Parallel()
	526	+	l := liveStream{s: &Server{}, repo: "demo", view: "mrs", n: "1", ref: "feature", target: "main"}
	527	+	fs, err := l.render(t.Context(), ports.WatchEvent{Event: domain.PushEvent{Repo: repoName(t, "demo"), Updates: []domain.RefUpdate{{Ref: "refs/heads/feature"}}}})
	528	+	require.NoError(t, err)
	529	+	assert.Empty(t, fs)
	530	+	}


@@ -478,3 +478,53 @@ 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	+	}
		505	+
		506	+	func TestMRPushBothBranches(t *testing.T) {
		507	+	t.Parallel()
		508	+	for _, refs := range [][]string{{"feature", "main"}, {"main", "feature"}} {
		509	+	t.Run(strings.Join(refs, "-"), func(t *testing.T) {
		510	+	t.Parallel()
		511	+	svc := mocks.NewMergeRequestService(t)
		512	+	svc.EXPECT().Mergeability(mock.Anything, mock.Anything, mock.Anything, int64(1)).Return(domain.Mergeability{State: domain.MergeabilityUpToDate}, nil).Once()
		513	+	l := liveStream{s: &Server{cfg: Config{MergeRequests: svc}}, repo: "demo", view: "mr", n: "1", ref: "feature", target: "main"}
		514	+	ctx := context.WithValue(t.Context(), signedInKey{}, struct{}{})
		515	+	fs, err := l.mrPushed(ctx, domain.PushEvent{Updates: []domain.RefUpdate{{Ref: "refs/heads/" + refs[0]}, {Ref: "refs/heads/" + refs[1]}}})
		516	+	require.NoError(t, err)
		517	+	require.Len(t, fs, 2)
		518	+	assert.Equal(t, "mr-head", fs[0].event)
		519	+	assert.Equal(t, "mr-mergeability", fs[1].event)
		520	+	})
		521	+	}
		522	+	}
		523	+
		524	+	func TestNonMRPushRoutingNeverEmitsMRHead(t *testing.T) {
		525	+	t.Parallel()
		526	+	l := liveStream{s: &Server{}, repo: "demo", view: "mrs", n: "1", ref: "feature", target: "main"}
		527	+	fs, err := l.render(t.Context(), ports.WatchEvent{Event: domain.PushEvent{Repo: repoName(t, "demo"), Updates: []domain.RefUpdate{{Ref: "refs/heads/feature"}}}})
		528	+	require.NoError(t, err)
		529	+	assert.Empty(t, fs)
		530	+	}

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/a11y.test.mjs +23 -0


@@ -358,3 +358,26 @@ test('activity moves a home row up only in newest activity order, preserving foc
358	358		assert.ok(fresh.hasAttribute('data-cursor'));
359	359		}
360	360		});
	361	+
	362	+	test('mobile MR layout shortcuts preserve the saved preference until back on desktop', () => {
	363	+	const diffs = el('div', { id: 'diffs', attrs: { 'data-mr': '', 'data-diff': 'split', 'data-mobile': 'true' } });
	364	+	dom.body.replaceChildren(diffs);
	365	+	const oldQuery = doc.querySelector;
	366	+	doc.querySelector = query.one;
	367	+	const previous = globalThis.sessionStorage;
	368	+	const writes = [];
	369	+	globalThis.sessionStorage = { setItem: (...args) => writes.push(args) };
	370	+	try {
	371	+	window.ermite.layout('unified');
	372	+	window.ermite.layout('split');
	373	+	assert.equal(diffs.dataset.diff, 'split');
	374	+	assert.deepEqual(writes, []);
	375	+	diffs.dataset.mobile = 'false';
	376	+	window.ermite.layout('unified');
	377	+	assert.equal(diffs.dataset.diff, 'unified');
	378	+	assert.deepEqual(writes, [['diff', 'unified']]);
	379	+	} finally {
	380	+	globalThis.sessionStorage = previous;
	381	+	doc.querySelector = oldQuery;
	382	+	}
	383	+	});


@@ -358,3 +358,26 @@ test('activity moves a home row up only in newest activity order, preserving foc
358	assert.ok(fresh.hasAttribute('data-cursor'));	358		assert.ok(fresh.hasAttribute('data-cursor'));
359	}	359		}
360	});	360		});
		361	+
		362	+	test('mobile MR layout shortcuts preserve the saved preference until back on desktop', () => {
		363	+	const diffs = el('div', { id: 'diffs', attrs: { 'data-mr': '', 'data-diff': 'split', 'data-mobile': 'true' } });
		364	+	dom.body.replaceChildren(diffs);
		365	+	const oldQuery = doc.querySelector;
		366	+	doc.querySelector = query.one;
		367	+	const previous = globalThis.sessionStorage;
		368	+	const writes = [];
		369	+	globalThis.sessionStorage = { setItem: (...args) => writes.push(args) };
		370	+	try {
		371	+	window.ermite.layout('unified');
		372	+	window.ermite.layout('split');
		373	+	assert.equal(diffs.dataset.diff, 'split');
		374	+	assert.deepEqual(writes, []);
		375	+	diffs.dataset.mobile = 'false';
		376	+	window.ermite.layout('unified');
		377	+	assert.equal(diffs.dataset.diff, 'unified');
		378	+	assert.deepEqual(writes, [['diff', 'unified']]);
		379	+	} finally {
		380	+	globalThis.sessionStorage = previous;
		381	+	doc.querySelector = oldQuery;
		382	+	}
		383	+	});

M internal/adapters/web/jstest/live.test.mjs +43 -2


@@ -12,10 +12,11 @@ const live = src.slice(src.indexOf('window.ermiteLive = '));
12	12		function setup(t) {
13	13		t.mock.timers.enable({ apis: ['setTimeout'] });
14	14		const hint = { dataset: { state: 'connecting' } };
15		-	globalThis.window = {};
	15	+	const listeners = {};
	16	+	globalThis.window = { addEventListener: (name, fn) => { listeners[name] = fn; } };
16	17		globalThis.document = { querySelector: (sel) => (sel === '.hint-live' ? hint : null) };
17	18		new Function(live)();
18		-	return { live: globalThis.window.ermiteLive, hint };
	19	+	return { live: globalThis.window.ermiteLive, hint, listeners };
19	20		}
20	21
21	22		test('a drop shorter than the delay says nothing', (t) => {

@@ -38,3 +39,43 @@ test('a drop that lasts shows offline, once, until the stream is back', (t) => {
38	39		live.back();
39	40		assert.equal(hint.dataset.state, 'live');
40	41		});
	42	+
	43	+	test('stream teardown handles the reader cancellation that hx-sse leaves uncaught', async (t) => {
	44	+	const { live, listeners } = setup(t);
	45	+	assert.equal(listeners.unhandledrejection, undefined, 'no global rejection filter');
	46	+	const abort = Object.assign(new Error('signal is aborted without reason'), { name: 'AbortError' });
	47	+	let cancelled = 0;
	48	+	const connection = { reader: { cancel: () => { cancelled++; return Promise.reject(abort); } } };
	49	+	listeners['htmx:sse:after:connection']({ target: { matches: () => true }, detail: { connection } });
	50	+	const escaped = [];
	51	+	const onRejection = (reason) => escaped.push(reason);
	52	+	process.on('unhandledRejection', onRejection);
	53	+	try {
	54	+	// remove stands for hx-sse's cleanup: r.reader?.cancel?.(), result ignored.
	55	+	await live.teardown(() => { connection.reader?.cancel?.(); });
	56	+	await new Promise((resolve) => setImmediate(resolve));
	57	+	await new Promise((resolve) => setImmediate(resolve));
	58	+	} finally {
	59	+	process.off('unhandledRejection', onRejection);
	60	+	}
	61	+	assert.equal(cancelled, 1, 'the real reader is still cancelled');
	62	+	assert.deepEqual(escaped, [], 'no AbortError escapes the teardown');
	63	+	});
	64	+
	65	+	test('replacement stream URL carries the last connection id, including id-only events', (t) => {
	66	+	const { live, listeners } = setup(t);
	67	+	const connection = { lastEventId: 'boot-7' };
	68	+	listeners['htmx:sse:after:connection']({ target: { matches: () => true }, detail: { connection } });
	69	+	connection.lastEventId = 'boot-8'; // hx-sse updates this even for id-only events.
	70	+	const saved = globalThis.location;
	71	+	globalThis.location = { href: 'https://forge.test/demo/merge-requests/1' };
	72	+	const element = { url: '/-/events?topic=repo%3Ademo&head=new', getAttribute() { return this.url; },
	73	+	setAttribute(name, value) { assert.equal(name, 'hx-sse:connect'); this.url = value; } };
	74	+	try {
	75	+	live.resumeStream(element);
	76	+	const url = new URL(element.url, location.href);
	77	+	assert.equal(url.searchParams.get('after'), 'boot-8');
	78	+	assert.equal(url.searchParams.get('head'), 'new');
	79	+	assert.equal(url.searchParams.get('topic'), 'repo:demo');
	80	+	} finally { globalThis.location = saved; }
	81	+	});


@@ -12,10 +12,11 @@ const live = src.slice(src.indexOf('window.ermiteLive = '));
12		function setup(t) {	12		function setup(t) {
13		t.mock.timers.enable({ apis: ['setTimeout'] });	13		t.mock.timers.enable({ apis: ['setTimeout'] });
14		const hint = { dataset: { state: 'connecting' } };	14		const hint = { dataset: { state: 'connecting' } };
15	-	globalThis.window = {};	15	+	const listeners = {};
			16	+	globalThis.window = { addEventListener: (name, fn) => { listeners[name] = fn; } };
16		globalThis.document = { querySelector: (sel) => (sel === '.hint-live' ? hint : null) };	17		globalThis.document = { querySelector: (sel) => (sel === '.hint-live' ? hint : null) };
17		new Function(live)();	18		new Function(live)();
18	-	return { live: globalThis.window.ermiteLive, hint };	19	+	return { live: globalThis.window.ermiteLive, hint, listeners };
19		}	20		}
20			21
21		test('a drop shorter than the delay says nothing', (t) => {	22		test('a drop shorter than the delay says nothing', (t) => {

@@ -38,3 +39,43 @@ test('a drop that lasts shows offline, once, until the stream is back', (t) => {
38		live.back();	39		live.back();
39		assert.equal(hint.dataset.state, 'live');	40		assert.equal(hint.dataset.state, 'live');
40		});	41		});
			42	+
			43	+	test('stream teardown handles the reader cancellation that hx-sse leaves uncaught', async (t) => {
			44	+	const { live, listeners } = setup(t);
			45	+	assert.equal(listeners.unhandledrejection, undefined, 'no global rejection filter');
			46	+	const abort = Object.assign(new Error('signal is aborted without reason'), { name: 'AbortError' });
			47	+	let cancelled = 0;
			48	+	const connection = { reader: { cancel: () => { cancelled++; return Promise.reject(abort); } } };
			49	+	listeners['htmx:sse:after:connection']({ target: { matches: () => true }, detail: { connection } });
			50	+	const escaped = [];
			51	+	const onRejection = (reason) => escaped.push(reason);
			52	+	process.on('unhandledRejection', onRejection);
			53	+	try {
			54	+	// remove stands for hx-sse's cleanup: r.reader?.cancel?.(), result ignored.
			55	+	await live.teardown(() => { connection.reader?.cancel?.(); });
			56	+	await new Promise((resolve) => setImmediate(resolve));
			57	+	await new Promise((resolve) => setImmediate(resolve));
			58	+	} finally {
			59	+	process.off('unhandledRejection', onRejection);
			60	+	}
			61	+	assert.equal(cancelled, 1, 'the real reader is still cancelled');
			62	+	assert.deepEqual(escaped, [], 'no AbortError escapes the teardown');
			63	+	});
			64	+
			65	+	test('replacement stream URL carries the last connection id, including id-only events', (t) => {
			66	+	const { live, listeners } = setup(t);
			67	+	const connection = { lastEventId: 'boot-7' };
			68	+	listeners['htmx:sse:after:connection']({ target: { matches: () => true }, detail: { connection } });
			69	+	connection.lastEventId = 'boot-8'; // hx-sse updates this even for id-only events.
			70	+	const saved = globalThis.location;
			71	+	globalThis.location = { href: 'https://forge.test/demo/merge-requests/1' };
			72	+	const element = { url: '/-/events?topic=repo%3Ademo&head=new', getAttribute() { return this.url; },
			73	+	setAttribute(name, value) { assert.equal(name, 'hx-sse:connect'); this.url = value; } };
			74	+	try {
			75	+	live.resumeStream(element);
			76	+	const url = new URL(element.url, location.href);
			77	+	assert.equal(url.searchParams.get('after'), 'boot-8');
			78	+	assert.equal(url.searchParams.get('head'), 'new');
			79	+	assert.equal(url.searchParams.get('topic'), 'repo:demo');
			80	+	} finally { globalThis.location = saved; }
			81	+	});

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


@@ -92,3 +92,433 @@ for (const dataset of [{diff:'split'}, {view:'split'}]) test(`reveal selects the
92	92		globalThis.requestAnimationFrame=savedRAF;
93	93		}
94	94		});
	95	+
	96	+	function footerHarness(extra = {}) {
	97	+	const saved = Object.fromEntries(['document', 'location', 'addEventListener', 'history', 'MutationObserver'].map((k) => [k, globalThis[k]]));
	98	+	const node = (id) => ({ id, attrs: {}, events: {}, hidden: false,
	99	+	setAttribute(k, v) { this.attrs[k] = v; }, getAttribute(k) { return this.attrs[k] ?? null; },
	100	+	addEventListener(k, v) { this.events[k] = v; }, focus() { this.focused = true; },
	101	+	scrollIntoView() { this.scrolled = (this.scrolled ?? 0) + 1; } });
	102	+	const tabs = [node('mr-tab-commits'), node('mr-tab-checks')];
	103	+	const panels = [node('mr-commits'), node('mr-checks-panel')];
	104	+	const footer = node('footer'); footer.querySelectorAll = () => panels;
	105	+	const nav = node('tabs'); nav.querySelectorAll = () => tabs;
	106	+	const listeners = {}, replaced = [];
	107	+	globalThis.document = { querySelector: (s) => s === '.mr-footer' ? footer : s === '[data-mr-tabs]' ? nav : s === '#mr-ck' ? extra.summary ?? null : null,
	108	+	querySelectorAll: (s) => s === '[data-mr-tabs] a' ? tabs : [], addEventListener(k, v) { listeners[k] = v; } };
	109	+	globalThis.location = { hash: '', pathname: '/demo/merge-requests/1', search: '?x=1' };
	110	+	globalThis.addEventListener = (k, v) => { listeners[k] = v; };
	111	+	globalThis.history = { replaceState: (...args) => replaced.push(args) };
	112	+	const restore = () => { for (const [k, v] of Object.entries(saved)) { if (v === undefined) delete globalThis[k]; else globalThis[k] = v; } };
	113	+	const state = () => panels.map((p) => !p.hidden);
	114	+	return { tabs, panels, footer, listeners, replaced, restore, state };
	115	+	}
	116	+
	117	+	test('footer tabs: closed by default, toggle, switch, arrows, hash', () => {
	118	+	const h = footerHarness();
	119	+	try {
	120	+	window.ermiteMR.panels();
	121	+	assert.deepEqual(h.state(), [false, false], 'initially closed');
	122	+	assert.equal(h.tabs[0].attrs['aria-expanded'], 'false');
	123	+	assert.deepEqual(h.replaced, [], 'initial state leaves the URL alone');
	124	+	h.tabs[1].events.click({ preventDefault() {} });
	125	+	assert.deepEqual(h.state(), [false, true]);
	126	+	assert.equal(h.tabs[1].attrs['aria-expanded'], 'true');
	127	+	assert.deepEqual(h.replaced, [[null, '', '#mr-checks-panel']]);
	128	+	location.hash = '#mr-checks-panel';
	129	+	h.tabs[1].events.click({ preventDefault() {} });
	130	+	assert.deepEqual(h.state(), [false, false], 'a second click closes');
	131	+	assert.deepEqual(h.replaced.at(-1), [null, '', '/demo/merge-requests/1?x=1'], 'closing clears the fragment');
	132	+	location.hash = '';
	133	+	h.tabs[1].events.click({ preventDefault() {} });
	134	+	h.tabs[0].events.click({ preventDefault() {} });
	135	+	assert.deepEqual(h.state(), [true, false], 'the other tab switches');
	136	+	h.tabs[0].events.keydown({ key: 'ArrowRight', preventDefault() {} });
	137	+	assert.equal(h.tabs[1].focused, true, 'arrows move focus only');
	138	+	assert.deepEqual(h.state(), [true, false]);
	139	+	location.hash = '#mr-checks'; h.replaced.length = 0; h.listeners.hashchange();
	140	+	assert.deepEqual(h.state(), [false, true], 'hash opens checks');
	141	+	assert.deepEqual(h.replaced, [], 'hash navigation does not rewrite the URL');
	142	+	location.hash = '#mr-commits'; h.listeners.hashchange();
	143	+	assert.deepEqual(h.state(), [true, false]);
	144	+	assert.equal(C.tabIndex('Home', 1, 2), 0);
	145	+	assert.equal(C.tabIndex('End', 0, 2), 1);
	146	+	assert.equal(C.tabIndex('ArrowLeft', 0, 2), 1);
	147	+	assert.equal(C.tabIndex('Escape', 0, 2), null);
	148	+	} finally { h.restore(); }
	149	+	});
	150	+
	151	+	test('footer: #mr-ck syncs the checks label; its click opens Checks without toggling', () => {
	152	+	const text0 = { v: '' }; let writes = 0;
	153	+	const label = { get textContent() { return text0.v; }, set textContent(v) { writes++; text0.v = v; } };
	154	+	const summary = { title: '1/2 failed', textContent: ' 1/2 ', parentElement: {} };
	155	+	const h = footerHarness({ summary });
	156	+	let observed = null, callback = null;
	157	+	globalThis.MutationObserver = class { constructor(fn) { callback = fn; } observe(target, opts) { observed = [target, opts]; } };
	158	+	const nav = document.querySelector('[data-mr-tabs]');
	159	+	nav.querySelector = (s) => s === '[data-checks-label]' ? label : null;
	160	+	try {
	161	+	window.ermiteMR.panels();
	162	+	assert.equal(label.textContent, '1/2 failed', 'initial label sync');
	163	+	assert.equal(observed[0], summary.parentElement);
	164	+	assert.deepEqual(observed[1], { childList: true }, 'only #mr-ck replacements wake the observer');
	165	+	const before = writes; callback(); callback();
	166	+	assert.equal(writes, before, 'an unchanged label is not written');
	167	+	summary.title = ''; callback();
	168	+	assert.equal(label.textContent, '1/2');
	169	+	summary.textContent = ' '; callback();
	170	+	assert.equal(label.textContent, 'no checks');
	171	+	const click = { target: { closest: (s) => s === '#mr-ck' ? summary : null } };
	172	+	h.listeners.click(click);
	173	+	assert.deepEqual(h.state(), [false, true]);
	174	+	h.listeners.click(click);
	175	+	assert.deepEqual(h.state(), [false, true], 'a second badge click keeps it open');
	176	+	} finally { h.restore(); }
	177	+	});
	178	+
	179	+	test('footer: panels(index) restores the open panel without touching the URL', () => {
	180	+	const h = footerHarness();
	181	+	try {
	182	+	location.hash = '#mr-commits';
	183	+	window.ermiteMR.panels(1);
	184	+	assert.deepEqual(h.state(), [false, true], 'a restore ignores the fragment');
	185	+	assert.equal(h.tabs[1].attrs['aria-expanded'], 'true');
	186	+	assert.deepEqual(h.replaced, []);
	187	+	assert.equal(h.panels[0].scrolled, undefined, 'a restore does not scroll');
	188	+	assert.equal(h.panels[1].scrolled, undefined);
	189	+	location.hash = '';
	190	+	window.ermiteMR.panels(-1);
	191	+	assert.deepEqual(h.state(), [false, false]);
	192	+	} finally { h.restore(); }
	193	+	});
	194	+
	195	+	test('footer: scripts take over the panels; a fragment opens and scrolls to its panel', () => {
	196	+	const h = footerHarness();
	197	+	try {
	198	+	location.hash = '#mr-checks';
	199	+	window.ermiteMR.panels();
	200	+	assert.equal(h.footer.attrs['data-panels'], '', 'the CSS fallback of the fragment stops');
	201	+	assert.deepEqual(h.state(), [false, true]);
	202	+	assert.equal(h.panels[1].scrolled, 1, 'the panel of the fragment is brought in');
	203	+	location.hash = '#mr-commits'; h.listeners.hashchange();
	204	+	assert.deepEqual(h.state(), [true, false]);
	205	+	assert.equal(h.panels[0].scrolled, 1);
	206	+	} finally { h.restore(); }
	207	+	});
	208	+
	209	+	test('touch range: first tap anchors, second tap opens the sorted range', () => {
	210	+	const base = 'https://forge.test/demo/merge-requests/1';
	211	+	const first = base + '?on=new:24:a.go#f1';
	212	+	const last = base + '?on=new:10:a.go#f1';
	213	+	assert.deepEqual(C.touchRange(null, first, base), { start: first, url: null });
	214	+	const result = C.touchRange(first, last, base);
	215	+	assert.equal(result.start, null);
	216	+	assert.equal(new URL(result.url).searchParams.get('on'), 'new:10-24:a.go');
	217	+	assert.deepEqual(C.touchRange(first, first, base), { start: null, url: first });
	218	+	});
	219	+
	220	+	test('touch range: a different file, side or request becomes a new anchor', () => {
	221	+	const base = 'https://forge.test/demo/merge-requests/1';
	222	+	const first = base + '?on=new:24:a.go#f1';
	223	+	for (const next of [first.replace('new:', 'old:'), first.replace('a.go', 'b.go'), first.replace('/1?', '/2?')]) {
	224	+	assert.deepEqual(C.touchRange(first, next, base), { start: next, url: null });
	225	+	}
	226	+	});
	227	+
	228	+	test('mobile unified fallback only redirects single-layout split pages and preserves query/hash', () => {
	229	+	const href = 'https://forge.test/demo/merge-requests/1?view=split&from=25&on=new:3:a.go#f26';
	230	+	assert.equal(C.mobileURL(href, 'split', false), null);
	231	+	assert.equal(C.mobileURL(href, undefined, true), null, 'both layouts are switched by CSS');
	232	+	assert.equal(C.mobileURL(href, 'unified', true), null, 'no redirect loop');
	233	+	const url = new URL(C.mobileURL(href, 'split', true));
	234	+	assert.equal(url.searchParams.get('view'), 'unified');
	235	+	assert.equal(url.searchParams.get('from'), '25');
	236	+	assert.equal(url.searchParams.get('on'), 'new:3:a.go');
	237	+	assert.equal(url.hash, '#f26');
	238	+	});
	239	+
	240	+	test('touch control: lazy links enable toolbar; ordinary taps pass through; ranges navigate and cancel', async () => {
	241	+	const saved = Object.fromEntries(['document', 'location', 'addEventListener', 'localStorage', 'sessionStorage', 'fetch', 'matchMedia'].map((k) => [k, globalThis[k]]));
	242	+	const make = () => ({
	243	+	attrs: {}, events: {}, children: [], textContent: '',
	244	+	setAttribute(k, v) { this.attrs[k] = v; },
	245	+	removeAttribute(k) { delete this.attrs[k]; },
	246	+	addEventListener(k, fn) { this.events[k] = fn; },
	247	+	append(...nodes) { this.children.push(...nodes); },
	248	+	prepend(node) { this.children.unshift(node); },
	249	+	querySelector() { return null; }, querySelectorAll() { return []; },
	250	+	});
	251	+	const diffs = make();
	252	+	diffs.dataset = { diff: 'split' };
	253	+	const base = 'https://forge.test/demo/merge-requests/1';
	254	+	const line = (n) => Object.assign(make(), { href: `${base}?on=new:${n}:a.go#f1`, textContent: String(n) });
	255	+	const a = line(20), b = line(10);
	256	+	let loaded = false;
	257	+	diffs.querySelector = () => loaded ? a : null;
	258	+	let assigned = null;
	259	+	globalThis.document = {
	260	+	querySelector: (sel) => sel === '#diffs[data-mr]' \|\| sel === '#diffs' ? diffs : null,
	261	+	querySelectorAll: () => [], createElement: (tag) => tag === 'template' ? { content: { querySelectorAll: () => [] } } : make(),
	262	+	};
	263	+	globalThis.location = { href: base, pathname: '/demo/merge-requests/1', hash: '', assign(url) { assigned = url; } };
	264	+	globalThis.addEventListener = () => {};
	265	+	const changes = {};
	266	+	const medias = {};
	267	+	globalThis.matchMedia = (q) => medias[q] ??= { matches: true, addEventListener(type, fn) { changes[q] = fn; } };
	268	+	const media = globalThis.matchMedia('(max-width: 720px)');
	269	+	const touchQuery = '(pointer: coarse), (hover: none)';
	270	+	const resize = () => changes['(max-width: 720px)']();
	271	+	globalThis.fetch = async () => { loaded = true; return { ok: true, status: 200, text: async () => '' }; };
	272	+	globalThis.localStorage = globalThis.sessionStorage = { getItem: () => null };
	273	+	const click = (link, modifiers = {}) => {
	274	+	const e = { target: { closest: () => link }, prevented: false, stopped: false,
	275	+	preventDefault() { this.prevented = true; }, stopPropagation() { this.stopped = true; }, ...modifiers };
	276	+	diffs.events.click(e);
	277	+	return e;
	278	+	};
	279	+	try {
	280	+	window.ermiteMR.start();
	281	+	const bar = diffs.children[0];
	282	+	const [button, status] = bar.children;
	283	+	assert.equal(bar.hidden, true, 'no commentable links in the initial window');
	284	+	assert.equal(typeof diffs.events.click, 'function', 'delegation installed before lazy load');
	285	+	await window.ermiteMR.load({ dataset: { src: '/files?from=25' } });
	286	+	assert.equal(bar.hidden, false, 'lazy window refresh reveals range control');
	287	+	assert.equal(diffs.dataset.mobile, 'true');
	288	+	assert.equal(diffs.dataset.diff, 'split', 'preferred layout is retained');
	289	+	media.matches = false;
	290	+	resize();
	291	+	assert.equal(diffs.dataset.mobile, 'false', 'desktop menu returns to preferred layout');
	292	+	assert.equal(diffs.dataset.diff, 'split');
	293	+	assert.equal(click(a).prevented, false, 'normal single-line navigation is untouched');
	294	+	button.events.click();
	295	+	assert.equal(button.attrs['aria-pressed'], 'true');
	296	+	assert.equal(click(a, { shiftKey: true }).prevented, false, 'desktop range selection is untouched');
	297	+	const event = click(a);
	298	+	assert.equal(event.prevented, true);
	299	+	assert.equal(event.stopped, true);
	300	+	assert.ok('data-range-start' in a.attrs);
	301	+	assert.match(status.textContent, /20/);
	302	+	click(b);
	303	+	assert.equal(new URL(assigned).searchParams.get('on'), 'new:10-20:a.go');
	304	+	assert.equal('data-range-start' in a.attrs, false);
	305	+	click(a);
	306	+	button.events.click();
	307	+	assert.equal(button.attrs['aria-pressed'], 'false');
	308	+	assert.equal(status.textContent, '');
	309	+	assert.equal('data-range-start' in a.attrs, false);
	310	+	assert.equal(click(b).prevented, false);
	311	+	// The touch media query stops matching: range mode is switched off.
	312	+	button.events.click();
	313	+	click(a);
	314	+	assert.equal(button.attrs['aria-pressed'], 'true');
	315	+	assert.ok('data-range-start' in a.attrs);
	316	+	medias[touchQuery].matches = false;
	317	+	changes[touchQuery]();
	318	+	assert.equal(button.attrs['aria-pressed'], 'false');
	319	+	assert.equal(status.textContent, '');
	320	+	assert.equal('data-range-start' in a.attrs, false);
	321	+	assert.equal(click(b).prevented, false, 'clicks pass through once touch stops matching');
	322	+	} finally {
	323	+	for (const [k, v] of Object.entries(saved)) {
	324	+	if (v === undefined) delete globalThis[k]; else globalThis[k] = v;
	325	+	}
	326	+	}
	327	+	});
	328	+
	329	+	// Deterministic timers: no sleeps, and each test restores every mocked global.
	330	+	function clock() {
	331	+	const saved = { setTimeout: globalThis.setTimeout, clearTimeout: globalThis.clearTimeout };
	332	+	const tasks = new Map(); let n = 0, now = 0;
	333	+	globalThis.setTimeout = (fn, delay = 0) => { tasks.set(++n, { fn, at: now + delay }); return n; };
	334	+	globalThis.clearTimeout = (id) => tasks.delete(id);
	335	+	return { async tick(ms = 300) { now += ms; const batch = [...tasks].filter(([, t]) => t.at <= now); for (const [id] of batch) tasks.delete(id); for (const [, t] of batch) await t.fn(); },
	336	+	size: () => tasks.size, restore() { Object.assign(globalThis, saved); } };
	337	+	}
	338	+
	339	+	test('head refresh defers a real textarea draft, resumes after emptying and blurring', async () => {
	340	+	const saved = globalThis.document, c = clock();
	341	+	const text = { value: 'unsent', defaultValue: '' };
	342	+	let fetched = 0, applied = 0; const notices = [];
	343	+	globalThis.document = { activeElement: text, querySelectorAll: () => [text] };
	344	+	const r = window.ermiteMR.refresher({ blocked: window.ermiteMR.hasDraft,
	345	+	fetchPage: async () => { fetched++; return 'page'; }, apply: () => applied++,
	346	+	notice: (v) => notices.push(v), failed: () => assert.fail('unexpected fallback') });
	347	+	try {
	348	+	r.request(); await c.tick();
	349	+	assert.equal(fetched, 0); assert.deepEqual(notices, [true]);
	350	+	text.value = ''; r.resume(); await c.tick();
	351	+	assert.equal(fetched, 0, 'focus still protects an empty draft');
	352	+	document.activeElement = null; r.resume(); await c.tick();
	353	+	assert.equal(fetched, 1); assert.equal(applied, 1); assert.equal(r.pending(), false);
	354	+	} finally { globalThis.document = saved; c.restore(); }
	355	+	});
	356	+
	357	+	test('head refresh debounces bursts, serializes requests, and reruns after an in-flight push', async () => {
	358	+	const c = clock(); let fetched = 0, applied = 0, resolve;
	359	+	const r = window.ermiteMR.refresher({ blocked: () => false,
	360	+	fetchPage: () => { fetched++; return new Promise((r) => { resolve = r; }); },
	361	+	apply: () => applied++, notice() {}, failed: () => assert.fail('unexpected failure') });
	362	+	try {
	363	+	r.request(); r.request(); r.request(); assert.equal(c.size(), 1);
	364	+	await c.tick(299); assert.equal(fetched, 0);
	365	+	await c.tick(0); assert.equal(fetched, 0);
	366	+	const first = c.tick(1); assert.equal(fetched, 1);
	367	+	r.request(); await c.tick(); assert.equal(fetched, 1, 'one fetch in flight');
	368	+	resolve('one'); await first; assert.equal(applied, 1); assert.equal(c.size(), 1);
	369	+	const second = c.tick(); assert.equal(fetched, 2); resolve('two'); await second;
	370	+	assert.equal(applied, 2); assert.equal(c.size(), 0);
	371	+	} finally { c.restore(); }
	372	+	});
	373	+
	374	+	test('typing during fetch defers even manual refresh until the draft ends', { timeout: 2000 }, async () => {
	375	+	const c = clock(); let blocked = false, applied = 0, resolve, fetched = 0; const notices = [];
	376	+	const r = window.ermiteMR.refresher({ blocked: () => blocked,
	377	+	fetchPage: () => { fetched++; return new Promise((r) => { resolve = r; }); }, apply: () => { applied++; },
	378	+	notice: (v) => notices.push(v), failed: () => assert.fail('unexpected failure') });
	379	+	try {
	380	+	r.request(); const first = c.tick(); blocked = true; resolve('page'); await first;
	381	+	assert.equal(applied, 0); assert.deepEqual(notices, [true]);
	382	+	r.request(true); const manual = c.tick();
	383	+	assert.equal(fetched, 1, 'manual refresh must not start a fetch during a draft');
	384	+	await manual; assert.equal(applied, 0);
	385	+	blocked = false; r.resume(); const second = c.tick(); resolve('new page'); await second;
	386	+	assert.equal(applied, 1); assert.equal(notices.at(-1), false);
	387	+	} finally { c.restore(); }
	388	+	});
	389	+
	390	+	test('fetch failures and non-MR responses take the fallback, never apply', async () => {
	391	+	const saved = { fetch: globalThis.fetch, location: globalThis.location, DOMParser: globalThis.DOMParser };
	392	+	const c = clock(); let fallback = 0;
	393	+	globalThis.location = { href: 'https://forge.test/demo/merge-requests/1?view=split&from=25' };
	394	+	const r = window.ermiteMR.refresher({ blocked: () => false, fetchPage: window.ermiteMR.fetchPage,
	395	+	apply: () => assert.fail('must not swap'), notice() {}, failed: () => fallback++ });
	396	+	try {
	397	+	for (const result of ['network', { ok: false }, { ok: true, redirected: true }, { ok: true, text: async () => '<html>login</html>' }]) {
	398	+	globalThis.fetch = async (url, opts) => {
	399	+	assert.equal(url, location.href); assert.equal(opts.credentials, 'same-origin');
	400	+	if (result === 'network') throw new Error('offline'); return result;
	401	+	};
	402	+	globalThis.DOMParser = class { parseFromString() { return { querySelector: () => null }; } };
	403	+	r.request(); await c.tick();
	404	+	}
	405	+	assert.equal(fallback, 4);
	406	+	} finally {
	407	+	for (const [k,v] of Object.entries(saved)) { if (v === undefined) delete globalThis[k]; else globalThis[k] = v; }
	408	+	c.restore();
	409	+	}
	410	+	});
	411	+
	412	+	test('viewport probe finds a stable path/side/line and restores its offset without line scans', () => {
	413	+	const names = ['document', 'location', 'innerHeight', 'innerWidth', 'scrollY', 'scrollBy', 'scrollTo', 'CSS', 'matchMedia'];
	414	+	const saved = Object.fromEntries(names.map((k) => [k, globalThis[k]]));
	415	+	const rect = (top, bottom = top + 20) => ({ top, bottom, left: 0, width: 900 });
	416	+	let lineTop = 160, headerTop = -200, found = true; const calls = [];
	417	+	const header = { getBoundingClientRect: () => rect(headerTop) };
	418	+	const row = { getBoundingClientRect: () => rect(lineTop), querySelector: () => link };
	419	+	const link = { href: 'https://forge.test/demo/merge-requests/1?on=new:42:a.go#f2', closest: () => row, getAttribute: () => link.href };
	420	+	const file = { getBoundingClientRect: () => rect(headerTop), 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 };
	421	+	const hit = { closest: (s) => s === 'tr' ? row : file };
	422	+	const diffs = { dataset: { diff: 'unified' }, getBoundingClientRect: () => rect(120), contains: () => true };
	423	+	globalThis.document = {
	424	+	querySelector: (s) => s === '#diffs' ? diffs : s === '.hdr' ? { getBoundingClientRect: () => rect(0, 100) } : null,
	425	+	querySelectorAll: (s) => { assert.equal(s, '#diffs details.dfile', 'only files, never every line'); return found === 'gone' ? [] : [file]; },
	426	+	elementFromPoint: () => hit, documentElement: { scrollHeight: 10000 },
	427	+	};
	428	+	Object.assign(globalThis, { location: { href: link.href }, innerHeight: 800, innerWidth: 1200, scrollY: 2500,
	429	+	scrollBy: (arg) => calls.push(['by', arg]), scrollTo: (arg) => calls.push(['to', arg]), CSS: { escape: (s) => s }, matchMedia: () => ({ matches: false }) });
	430	+	try {
	431	+	const a = window.ermiteMR.scrollAnchor();
	432	+	assert.equal(a.file, 'a.go'); assert.equal(a.on, 'new:42:a.go'); assert.equal(a.offset, 160);
	433	+	file.id = 'f3'; lineTop = 260; window.ermiteMR.restoreAnchor(a);
	434	+	assert.deepEqual(calls.pop(), ['by', { top: 100, behavior: 'instant' }]);
	435	+	found = false; headerTop = -100; window.ermiteMR.restoreAnchor(a);
	436	+	assert.deepEqual(calls.pop(), ['by', { top: 100, behavior: 'instant' }]);
	437	+	found = 'gone'; window.ermiteMR.restoreAnchor({ ...a, y: 20000 });
	438	+	assert.deepEqual(calls.pop(), ['to', { top: 9200, behavior: 'instant' }]);
	439	+	} finally { for (const [k,v] of Object.entries(saved)) { if (v === undefined) delete globalThis[k]; else globalThis[k] = v; } }
	440	+	});
	441	+
	442	+	test('empty edited default and focused cform controls protect drafts', () => {
	443	+	const saved = document;
	444	+	try {
	445	+	globalThis.document = { querySelectorAll: () => [{ value: '', defaultValue: 'existing' }], activeElement: null };
	446	+	assert.equal(window.ermiteMR.hasDraft(), true);
	447	+	document.querySelectorAll = () => [];
	448	+	document.activeElement = { closest: (s) => s === '.cform' ? {} : null };
	449	+	assert.equal(window.ermiteMR.hasDraft(), true);
	450	+	} finally { globalThis.document = saved; }
	451	+	});
	452	+
	453	+	test('failure during a draft keeps pending and resumes after the draft ends', async () => {
	454	+	const c = clock(); let blocked = false, reject, applied = 0, count = 0;
	455	+	const r = window.ermiteMR.refresher({ blocked: () => blocked,
	456	+	fetchPage: () => ++count === 1 ? new Promise((_, no) => { reject = no; }) : Promise.resolve('page'),
	457	+	apply: () => applied++, notice() {}, failed: () => assert.fail('draft must defer fallback') });
	458	+	try {
	459	+	r.request(); const first = c.tick(); blocked = true; reject(new Error('offline')); await first;
	460	+	assert.equal(r.pending(), true); assert.equal(applied, 0);
	461	+	blocked = false; r.resume(); await c.tick(); assert.equal(applied, 1);
	462	+	} finally { c.restore(); }
	463	+	});
	464	+
	465	+	test('anchor restoration retains the server encoding of tilde and star paths', () => {
	466	+	const saved = { document, CSS: globalThis.CSS, scrollBy: globalThis.scrollBy };
	467	+	try {
	468	+	globalThis.CSS = { escape: (s) => s };
	469	+	globalThis.scrollBy = () => {};
	470	+	for (const path of ['a~.go', 'a*.go']) {
	471	+	const encoded = path.replace('*', '%2A');
	472	+	const row = { getBoundingClientRect: () => ({ top: 5 }) };
	473	+	const file = { id: 'f9', dataset: { file: path }, querySelector: (s) => {
	474	+	if (s === '.dt.uni') return file;
	475	+	assert.equal(s, 'a[href$="on=new:12:' + encoded + '#f9"]');
	476	+	return { closest: () => row };
	477	+	} };
	478	+	globalThis.document = { querySelectorAll: () => [file], querySelector: () => ({ dataset: { diff: 'unified' } }) };
	479	+	window.ermiteMR.restoreAnchor({ file: path, suffix: 'new:12:' + encoded, on: 'new:12:' + path, offset: 5 });
	480	+	}
	481	+	} finally { Object.assign(globalThis, saved); }
	482	+	});
	483	+
	484	+	for (const control of [
	485	+	{ type: 'radio', checked: true, defaultChecked: false },
	486	+	{ type: 'checkbox', checked: false, defaultChecked: true },
	487	+	{ type: 'number', name: 'start_line', value: '10', defaultValue: '12' },
	488	+	{ tagName: 'SELECT', options: [{ selected: true, defaultSelected: false }] },
	489	+	]) test(`changed ${control.name \|\| control.type \|\| control.tagName} remains a draft after blur`, () => {
	490	+	const saved = document;
	491	+	try {
	492	+	globalThis.document = { activeElement: null, querySelectorAll(sel) {
	493	+	assert.equal(sel, ':is(form.cform, .cmt form, form.d-acts) :is(textarea, input, select)');
	494	+	return [control];
	495	+	} };
	496	+	assert.equal(window.ermiteMR.hasDraft(), true);
	497	+	} finally { globalThis.document = saved; }
	498	+	});
	499	+
	500	+	test('intercepted Cancel resets the entire comment form', () => {
	501	+	const saved = Object.fromEntries(['document', 'location', 'addEventListener', 'matchMedia'].map(k => [k, globalThis[k]]));
	502	+	const c = clock(), handlers = {};
	503	+	const diffs = { dataset: { view: 'split' }, querySelector() { return null; }, querySelectorAll() { return []; } };
	504	+	const radio = { type: 'radio', checked: true, defaultChecked: false };
	505	+	const line = { type: 'number', value: '2', defaultValue: '4' };
	506	+	let reset = 0, prevented = false;
	507	+	const form = { reset() { reset++; radio.checked = radio.defaultChecked; line.value = line.defaultValue; }, contains() { return false; } };
	508	+	const cancel = { closest: () => form };
	509	+	globalThis.document = { activeElement: null,
	510	+	querySelector: s => ['#diffs', '#diffs[data-mr]'].includes(s) ? diffs : null,
	511	+	querySelectorAll: s => s.includes('form.cform') ? [radio, line] : [],
	512	+	addEventListener: (type, fn) => { handlers[type] = fn; } };
	513	+	globalThis.location = { pathname: '/demo/merge-requests/1', hash: '', href: 'https://forge.test/demo/merge-requests/1', replace() {} };
	514	+	globalThis.addEventListener = () => {};
	515	+	globalThis.matchMedia = () => ({ matches: true, addEventListener() {} });
	516	+	try {
	517	+	window.ermiteMR.start();
	518	+	window.ermiteMR.headChanged();
	519	+	handlers.click({ target: { closest: () => cancel }, preventDefault() { prevented = true; } });
	520	+	assert.equal(prevented, true);
	521	+	assert.equal(reset, 1);
	522	+	assert.equal(window.ermiteMR.hasDraft(), false);
	523	+	} finally { Object.assign(globalThis, saved); c.restore(); }
	524	+	});


@@ -92,3 +92,433 @@ for (const dataset of [{diff:'split'}, {view:'split'}]) test(`reveal selects the
92	globalThis.requestAnimationFrame=savedRAF;	92		globalThis.requestAnimationFrame=savedRAF;
93	}	93		}
94	});	94		});
		95	+
		96	+	function footerHarness(extra = {}) {
		97	+	const saved = Object.fromEntries(['document', 'location', 'addEventListener', 'history', 'MutationObserver'].map((k) => [k, globalThis[k]]));
		98	+	const node = (id) => ({ id, attrs: {}, events: {}, hidden: false,
		99	+	setAttribute(k, v) { this.attrs[k] = v; }, getAttribute(k) { return this.attrs[k] ?? null; },
		100	+	addEventListener(k, v) { this.events[k] = v; }, focus() { this.focused = true; },
		101	+	scrollIntoView() { this.scrolled = (this.scrolled ?? 0) + 1; } });
		102	+	const tabs = [node('mr-tab-commits'), node('mr-tab-checks')];
		103	+	const panels = [node('mr-commits'), node('mr-checks-panel')];
		104	+	const footer = node('footer'); footer.querySelectorAll = () => panels;
		105	+	const nav = node('tabs'); nav.querySelectorAll = () => tabs;
		106	+	const listeners = {}, replaced = [];
		107	+	globalThis.document = { querySelector: (s) => s === '.mr-footer' ? footer : s === '[data-mr-tabs]' ? nav : s === '#mr-ck' ? extra.summary ?? null : null,
		108	+	querySelectorAll: (s) => s === '[data-mr-tabs] a' ? tabs : [], addEventListener(k, v) { listeners[k] = v; } };
		109	+	globalThis.location = { hash: '', pathname: '/demo/merge-requests/1', search: '?x=1' };
		110	+	globalThis.addEventListener = (k, v) => { listeners[k] = v; };
		111	+	globalThis.history = { replaceState: (...args) => replaced.push(args) };
		112	+	const restore = () => { for (const [k, v] of Object.entries(saved)) { if (v === undefined) delete globalThis[k]; else globalThis[k] = v; } };
		113	+	const state = () => panels.map((p) => !p.hidden);
		114	+	return { tabs, panels, footer, listeners, replaced, restore, state };
		115	+	}
		116	+
		117	+	test('footer tabs: closed by default, toggle, switch, arrows, hash', () => {
		118	+	const h = footerHarness();
		119	+	try {
		120	+	window.ermiteMR.panels();
		121	+	assert.deepEqual(h.state(), [false, false], 'initially closed');
		122	+	assert.equal(h.tabs[0].attrs['aria-expanded'], 'false');
		123	+	assert.deepEqual(h.replaced, [], 'initial state leaves the URL alone');
		124	+	h.tabs[1].events.click({ preventDefault() {} });
		125	+	assert.deepEqual(h.state(), [false, true]);
		126	+	assert.equal(h.tabs[1].attrs['aria-expanded'], 'true');
		127	+	assert.deepEqual(h.replaced, [[null, '', '#mr-checks-panel']]);
		128	+	location.hash = '#mr-checks-panel';
		129	+	h.tabs[1].events.click({ preventDefault() {} });
		130	+	assert.deepEqual(h.state(), [false, false], 'a second click closes');
		131	+	assert.deepEqual(h.replaced.at(-1), [null, '', '/demo/merge-requests/1?x=1'], 'closing clears the fragment');
		132	+	location.hash = '';
		133	+	h.tabs[1].events.click({ preventDefault() {} });
		134	+	h.tabs[0].events.click({ preventDefault() {} });
		135	+	assert.deepEqual(h.state(), [true, false], 'the other tab switches');
		136	+	h.tabs[0].events.keydown({ key: 'ArrowRight', preventDefault() {} });
		137	+	assert.equal(h.tabs[1].focused, true, 'arrows move focus only');
		138	+	assert.deepEqual(h.state(), [true, false]);
		139	+	location.hash = '#mr-checks'; h.replaced.length = 0; h.listeners.hashchange();
		140	+	assert.deepEqual(h.state(), [false, true], 'hash opens checks');
		141	+	assert.deepEqual(h.replaced, [], 'hash navigation does not rewrite the URL');
		142	+	location.hash = '#mr-commits'; h.listeners.hashchange();
		143	+	assert.deepEqual(h.state(), [true, false]);
		144	+	assert.equal(C.tabIndex('Home', 1, 2), 0);
		145	+	assert.equal(C.tabIndex('End', 0, 2), 1);
		146	+	assert.equal(C.tabIndex('ArrowLeft', 0, 2), 1);
		147	+	assert.equal(C.tabIndex('Escape', 0, 2), null);
		148	+	} finally { h.restore(); }
		149	+	});
		150	+
		151	+	test('footer: #mr-ck syncs the checks label; its click opens Checks without toggling', () => {
		152	+	const text0 = { v: '' }; let writes = 0;
		153	+	const label = { get textContent() { return text0.v; }, set textContent(v) { writes++; text0.v = v; } };
		154	+	const summary = { title: '1/2 failed', textContent: ' 1/2 ', parentElement: {} };
		155	+	const h = footerHarness({ summary });
		156	+	let observed = null, callback = null;
		157	+	globalThis.MutationObserver = class { constructor(fn) { callback = fn; } observe(target, opts) { observed = [target, opts]; } };
		158	+	const nav = document.querySelector('[data-mr-tabs]');
		159	+	nav.querySelector = (s) => s === '[data-checks-label]' ? label : null;
		160	+	try {
		161	+	window.ermiteMR.panels();
		162	+	assert.equal(label.textContent, '1/2 failed', 'initial label sync');
		163	+	assert.equal(observed[0], summary.parentElement);
		164	+	assert.deepEqual(observed[1], { childList: true }, 'only #mr-ck replacements wake the observer');
		165	+	const before = writes; callback(); callback();
		166	+	assert.equal(writes, before, 'an unchanged label is not written');
		167	+	summary.title = ''; callback();
		168	+	assert.equal(label.textContent, '1/2');
		169	+	summary.textContent = ' '; callback();
		170	+	assert.equal(label.textContent, 'no checks');
		171	+	const click = { target: { closest: (s) => s === '#mr-ck' ? summary : null } };
		172	+	h.listeners.click(click);
		173	+	assert.deepEqual(h.state(), [false, true]);
		174	+	h.listeners.click(click);
		175	+	assert.deepEqual(h.state(), [false, true], 'a second badge click keeps it open');
		176	+	} finally { h.restore(); }
		177	+	});
		178	+
		179	+	test('footer: panels(index) restores the open panel without touching the URL', () => {
		180	+	const h = footerHarness();
		181	+	try {
		182	+	location.hash = '#mr-commits';
		183	+	window.ermiteMR.panels(1);
		184	+	assert.deepEqual(h.state(), [false, true], 'a restore ignores the fragment');
		185	+	assert.equal(h.tabs[1].attrs['aria-expanded'], 'true');
		186	+	assert.deepEqual(h.replaced, []);
		187	+	assert.equal(h.panels[0].scrolled, undefined, 'a restore does not scroll');
		188	+	assert.equal(h.panels[1].scrolled, undefined);
		189	+	location.hash = '';
		190	+	window.ermiteMR.panels(-1);
		191	+	assert.deepEqual(h.state(), [false, false]);
		192	+	} finally { h.restore(); }
		193	+	});
		194	+
		195	+	test('footer: scripts take over the panels; a fragment opens and scrolls to its panel', () => {
		196	+	const h = footerHarness();
		197	+	try {
		198	+	location.hash = '#mr-checks';
		199	+	window.ermiteMR.panels();
		200	+	assert.equal(h.footer.attrs['data-panels'], '', 'the CSS fallback of the fragment stops');
		201	+	assert.deepEqual(h.state(), [false, true]);
		202	+	assert.equal(h.panels[1].scrolled, 1, 'the panel of the fragment is brought in');
		203	+	location.hash = '#mr-commits'; h.listeners.hashchange();
		204	+	assert.deepEqual(h.state(), [true, false]);
		205	+	assert.equal(h.panels[0].scrolled, 1);
		206	+	} finally { h.restore(); }
		207	+	});
		208	+
		209	+	test('touch range: first tap anchors, second tap opens the sorted range', () => {
		210	+	const base = 'https://forge.test/demo/merge-requests/1';
		211	+	const first = base + '?on=new:24:a.go#f1';
		212	+	const last = base + '?on=new:10:a.go#f1';
		213	+	assert.deepEqual(C.touchRange(null, first, base), { start: first, url: null });
		214	+	const result = C.touchRange(first, last, base);
		215	+	assert.equal(result.start, null);
		216	+	assert.equal(new URL(result.url).searchParams.get('on'), 'new:10-24:a.go');
		217	+	assert.deepEqual(C.touchRange(first, first, base), { start: null, url: first });
		218	+	});
		219	+
		220	+	test('touch range: a different file, side or request becomes a new anchor', () => {
		221	+	const base = 'https://forge.test/demo/merge-requests/1';
		222	+	const first = base + '?on=new:24:a.go#f1';
		223	+	for (const next of [first.replace('new:', 'old:'), first.replace('a.go', 'b.go'), first.replace('/1?', '/2?')]) {
		224	+	assert.deepEqual(C.touchRange(first, next, base), { start: next, url: null });
		225	+	}
		226	+	});
		227	+
		228	+	test('mobile unified fallback only redirects single-layout split pages and preserves query/hash', () => {
		229	+	const href = 'https://forge.test/demo/merge-requests/1?view=split&from=25&on=new:3:a.go#f26';
		230	+	assert.equal(C.mobileURL(href, 'split', false), null);
		231	+	assert.equal(C.mobileURL(href, undefined, true), null, 'both layouts are switched by CSS');
		232	+	assert.equal(C.mobileURL(href, 'unified', true), null, 'no redirect loop');
		233	+	const url = new URL(C.mobileURL(href, 'split', true));
		234	+	assert.equal(url.searchParams.get('view'), 'unified');
		235	+	assert.equal(url.searchParams.get('from'), '25');
		236	+	assert.equal(url.searchParams.get('on'), 'new:3:a.go');
		237	+	assert.equal(url.hash, '#f26');
		238	+	});
		239	+
		240	+	test('touch control: lazy links enable toolbar; ordinary taps pass through; ranges navigate and cancel', async () => {
		241	+	const saved = Object.fromEntries(['document', 'location', 'addEventListener', 'localStorage', 'sessionStorage', 'fetch', 'matchMedia'].map((k) => [k, globalThis[k]]));
		242	+	const make = () => ({
		243	+	attrs: {}, events: {}, children: [], textContent: '',
		244	+	setAttribute(k, v) { this.attrs[k] = v; },
		245	+	removeAttribute(k) { delete this.attrs[k]; },
		246	+	addEventListener(k, fn) { this.events[k] = fn; },
		247	+	append(...nodes) { this.children.push(...nodes); },
		248	+	prepend(node) { this.children.unshift(node); },
		249	+	querySelector() { return null; }, querySelectorAll() { return []; },
		250	+	});
		251	+	const diffs = make();
		252	+	diffs.dataset = { diff: 'split' };
		253	+	const base = 'https://forge.test/demo/merge-requests/1';
		254	+	const line = (n) => Object.assign(make(), { href: `${base}?on=new:${n}:a.go#f1`, textContent: String(n) });
		255	+	const a = line(20), b = line(10);
		256	+	let loaded = false;
		257	+	diffs.querySelector = () => loaded ? a : null;
		258	+	let assigned = null;
		259	+	globalThis.document = {
		260	+	querySelector: (sel) => sel === '#diffs[data-mr]' \|\| sel === '#diffs' ? diffs : null,
		261	+	querySelectorAll: () => [], createElement: (tag) => tag === 'template' ? { content: { querySelectorAll: () => [] } } : make(),
		262	+	};
		263	+	globalThis.location = { href: base, pathname: '/demo/merge-requests/1', hash: '', assign(url) { assigned = url; } };
		264	+	globalThis.addEventListener = () => {};
		265	+	const changes = {};
		266	+	const medias = {};
		267	+	globalThis.matchMedia = (q) => medias[q] ??= { matches: true, addEventListener(type, fn) { changes[q] = fn; } };
		268	+	const media = globalThis.matchMedia('(max-width: 720px)');
		269	+	const touchQuery = '(pointer: coarse), (hover: none)';
		270	+	const resize = () => changes['(max-width: 720px)']();
		271	+	globalThis.fetch = async () => { loaded = true; return { ok: true, status: 200, text: async () => '' }; };
		272	+	globalThis.localStorage = globalThis.sessionStorage = { getItem: () => null };
		273	+	const click = (link, modifiers = {}) => {
		274	+	const e = { target: { closest: () => link }, prevented: false, stopped: false,
		275	+	preventDefault() { this.prevented = true; }, stopPropagation() { this.stopped = true; }, ...modifiers };
		276	+	diffs.events.click(e);
		277	+	return e;
		278	+	};
		279	+	try {
		280	+	window.ermiteMR.start();
		281	+	const bar = diffs.children[0];
		282	+	const [button, status] = bar.children;
		283	+	assert.equal(bar.hidden, true, 'no commentable links in the initial window');
		284	+	assert.equal(typeof diffs.events.click, 'function', 'delegation installed before lazy load');
		285	+	await window.ermiteMR.load({ dataset: { src: '/files?from=25' } });
		286	+	assert.equal(bar.hidden, false, 'lazy window refresh reveals range control');
		287	+	assert.equal(diffs.dataset.mobile, 'true');
		288	+	assert.equal(diffs.dataset.diff, 'split', 'preferred layout is retained');
		289	+	media.matches = false;
		290	+	resize();
		291	+	assert.equal(diffs.dataset.mobile, 'false', 'desktop menu returns to preferred layout');
		292	+	assert.equal(diffs.dataset.diff, 'split');
		293	+	assert.equal(click(a).prevented, false, 'normal single-line navigation is untouched');
		294	+	button.events.click();
		295	+	assert.equal(button.attrs['aria-pressed'], 'true');
		296	+	assert.equal(click(a, { shiftKey: true }).prevented, false, 'desktop range selection is untouched');
		297	+	const event = click(a);
		298	+	assert.equal(event.prevented, true);
		299	+	assert.equal(event.stopped, true);
		300	+	assert.ok('data-range-start' in a.attrs);
		301	+	assert.match(status.textContent, /20/);
		302	+	click(b);
		303	+	assert.equal(new URL(assigned).searchParams.get('on'), 'new:10-20:a.go');
		304	+	assert.equal('data-range-start' in a.attrs, false);
		305	+	click(a);
		306	+	button.events.click();
		307	+	assert.equal(button.attrs['aria-pressed'], 'false');
		308	+	assert.equal(status.textContent, '');
		309	+	assert.equal('data-range-start' in a.attrs, false);
		310	+	assert.equal(click(b).prevented, false);
		311	+	// The touch media query stops matching: range mode is switched off.
		312	+	button.events.click();
		313	+	click(a);
		314	+	assert.equal(button.attrs['aria-pressed'], 'true');
		315	+	assert.ok('data-range-start' in a.attrs);
		316	+	medias[touchQuery].matches = false;
		317	+	changes[touchQuery]();
		318	+	assert.equal(button.attrs['aria-pressed'], 'false');
		319	+	assert.equal(status.textContent, '');
		320	+	assert.equal('data-range-start' in a.attrs, false);
		321	+	assert.equal(click(b).prevented, false, 'clicks pass through once touch stops matching');
		322	+	} finally {
		323	+	for (const [k, v] of Object.entries(saved)) {
		324	+	if (v === undefined) delete globalThis[k]; else globalThis[k] = v;
		325	+	}
		326	+	}
		327	+	});
		328	+
		329	+	// Deterministic timers: no sleeps, and each test restores every mocked global.
		330	+	function clock() {
		331	+	const saved = { setTimeout: globalThis.setTimeout, clearTimeout: globalThis.clearTimeout };
		332	+	const tasks = new Map(); let n = 0, now = 0;
		333	+	globalThis.setTimeout = (fn, delay = 0) => { tasks.set(++n, { fn, at: now + delay }); return n; };
		334	+	globalThis.clearTimeout = (id) => tasks.delete(id);
		335	+	return { async tick(ms = 300) { now += ms; const batch = [...tasks].filter(([, t]) => t.at <= now); for (const [id] of batch) tasks.delete(id); for (const [, t] of batch) await t.fn(); },
		336	+	size: () => tasks.size, restore() { Object.assign(globalThis, saved); } };
		337	+	}
		338	+
		339	+	test('head refresh defers a real textarea draft, resumes after emptying and blurring', async () => {
		340	+	const saved = globalThis.document, c = clock();
		341	+	const text = { value: 'unsent', defaultValue: '' };
		342	+	let fetched = 0, applied = 0; const notices = [];
		343	+	globalThis.document = { activeElement: text, querySelectorAll: () => [text] };
		344	+	const r = window.ermiteMR.refresher({ blocked: window.ermiteMR.hasDraft,
		345	+	fetchPage: async () => { fetched++; return 'page'; }, apply: () => applied++,
		346	+	notice: (v) => notices.push(v), failed: () => assert.fail('unexpected fallback') });
		347	+	try {
		348	+	r.request(); await c.tick();
		349	+	assert.equal(fetched, 0); assert.deepEqual(notices, [true]);
		350	+	text.value = ''; r.resume(); await c.tick();
		351	+	assert.equal(fetched, 0, 'focus still protects an empty draft');
		352	+	document.activeElement = null; r.resume(); await c.tick();
		353	+	assert.equal(fetched, 1); assert.equal(applied, 1); assert.equal(r.pending(), false);
		354	+	} finally { globalThis.document = saved; c.restore(); }
		355	+	});
		356	+
		357	+	test('head refresh debounces bursts, serializes requests, and reruns after an in-flight push', async () => {
		358	+	const c = clock(); let fetched = 0, applied = 0, resolve;
		359	+	const r = window.ermiteMR.refresher({ blocked: () => false,
		360	+	fetchPage: () => { fetched++; return new Promise((r) => { resolve = r; }); },
		361	+	apply: () => applied++, notice() {}, failed: () => assert.fail('unexpected failure') });
		362	+	try {
		363	+	r.request(); r.request(); r.request(); assert.equal(c.size(), 1);
		364	+	await c.tick(299); assert.equal(fetched, 0);
		365	+	await c.tick(0); assert.equal(fetched, 0);
		366	+	const first = c.tick(1); assert.equal(fetched, 1);
		367	+	r.request(); await c.tick(); assert.equal(fetched, 1, 'one fetch in flight');
		368	+	resolve('one'); await first; assert.equal(applied, 1); assert.equal(c.size(), 1);
		369	+	const second = c.tick(); assert.equal(fetched, 2); resolve('two'); await second;
		370	+	assert.equal(applied, 2); assert.equal(c.size(), 0);
		371	+	} finally { c.restore(); }
		372	+	});
		373	+
		374	+	test('typing during fetch defers even manual refresh until the draft ends', { timeout: 2000 }, async () => {
		375	+	const c = clock(); let blocked = false, applied = 0, resolve, fetched = 0; const notices = [];
		376	+	const r = window.ermiteMR.refresher({ blocked: () => blocked,
		377	+	fetchPage: () => { fetched++; return new Promise((r) => { resolve = r; }); }, apply: () => { applied++; },
		378	+	notice: (v) => notices.push(v), failed: () => assert.fail('unexpected failure') });
		379	+	try {
		380	+	r.request(); const first = c.tick(); blocked = true; resolve('page'); await first;
		381	+	assert.equal(applied, 0); assert.deepEqual(notices, [true]);
		382	+	r.request(true); const manual = c.tick();
		383	+	assert.equal(fetched, 1, 'manual refresh must not start a fetch during a draft');
		384	+	await manual; assert.equal(applied, 0);
		385	+	blocked = false; r.resume(); const second = c.tick(); resolve('new page'); await second;
		386	+	assert.equal(applied, 1); assert.equal(notices.at(-1), false);
		387	+	} finally { c.restore(); }
		388	+	});
		389	+
		390	+	test('fetch failures and non-MR responses take the fallback, never apply', async () => {
		391	+	const saved = { fetch: globalThis.fetch, location: globalThis.location, DOMParser: globalThis.DOMParser };
		392	+	const c = clock(); let fallback = 0;
		393	+	globalThis.location = { href: 'https://forge.test/demo/merge-requests/1?view=split&from=25' };
		394	+	const r = window.ermiteMR.refresher({ blocked: () => false, fetchPage: window.ermiteMR.fetchPage,
		395	+	apply: () => assert.fail('must not swap'), notice() {}, failed: () => fallback++ });
		396	+	try {
		397	+	for (const result of ['network', { ok: false }, { ok: true, redirected: true }, { ok: true, text: async () => '<html>login</html>' }]) {
		398	+	globalThis.fetch = async (url, opts) => {
		399	+	assert.equal(url, location.href); assert.equal(opts.credentials, 'same-origin');
		400	+	if (result === 'network') throw new Error('offline'); return result;
		401	+	};
		402	+	globalThis.DOMParser = class { parseFromString() { return { querySelector: () => null }; } };
		403	+	r.request(); await c.tick();
		404	+	}
		405	+	assert.equal(fallback, 4);
		406	+	} finally {
		407	+	for (const [k,v] of Object.entries(saved)) { if (v === undefined) delete globalThis[k]; else globalThis[k] = v; }
		408	+	c.restore();
		409	+	}
		410	+	});
		411	+
		412	+	test('viewport probe finds a stable path/side/line and restores its offset without line scans', () => {
		413	+	const names = ['document', 'location', 'innerHeight', 'innerWidth', 'scrollY', 'scrollBy', 'scrollTo', 'CSS', 'matchMedia'];
		414	+	const saved = Object.fromEntries(names.map((k) => [k, globalThis[k]]));
		415	+	const rect = (top, bottom = top + 20) => ({ top, bottom, left: 0, width: 900 });
		416	+	let lineTop = 160, headerTop = -200, found = true; const calls = [];
		417	+	const header = { getBoundingClientRect: () => rect(headerTop) };
		418	+	const row = { getBoundingClientRect: () => rect(lineTop), querySelector: () => link };
		419	+	const link = { href: 'https://forge.test/demo/merge-requests/1?on=new:42:a.go#f2', closest: () => row, getAttribute: () => link.href };
		420	+	const file = { getBoundingClientRect: () => rect(headerTop), 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 };
		421	+	const hit = { closest: (s) => s === 'tr' ? row : file };
		422	+	const diffs = { dataset: { diff: 'unified' }, getBoundingClientRect: () => rect(120), contains: () => true };
		423	+	globalThis.document = {
		424	+	querySelector: (s) => s === '#diffs' ? diffs : s === '.hdr' ? { getBoundingClientRect: () => rect(0, 100) } : null,
		425	+	querySelectorAll: (s) => { assert.equal(s, '#diffs details.dfile', 'only files, never every line'); return found === 'gone' ? [] : [file]; },
		426	+	elementFromPoint: () => hit, documentElement: { scrollHeight: 10000 },
		427	+	};
		428	+	Object.assign(globalThis, { location: { href: link.href }, innerHeight: 800, innerWidth: 1200, scrollY: 2500,
		429	+	scrollBy: (arg) => calls.push(['by', arg]), scrollTo: (arg) => calls.push(['to', arg]), CSS: { escape: (s) => s }, matchMedia: () => ({ matches: false }) });
		430	+	try {
		431	+	const a = window.ermiteMR.scrollAnchor();
		432	+	assert.equal(a.file, 'a.go'); assert.equal(a.on, 'new:42:a.go'); assert.equal(a.offset, 160);
		433	+	file.id = 'f3'; lineTop = 260; window.ermiteMR.restoreAnchor(a);
		434	+	assert.deepEqual(calls.pop(), ['by', { top: 100, behavior: 'instant' }]);
		435	+	found = false; headerTop = -100; window.ermiteMR.restoreAnchor(a);
		436	+	assert.deepEqual(calls.pop(), ['by', { top: 100, behavior: 'instant' }]);
		437	+	found = 'gone'; window.ermiteMR.restoreAnchor({ ...a, y: 20000 });
		438	+	assert.deepEqual(calls.pop(), ['to', { top: 9200, behavior: 'instant' }]);
		439	+	} finally { for (const [k,v] of Object.entries(saved)) { if (v === undefined) delete globalThis[k]; else globalThis[k] = v; } }
		440	+	});
		441	+
		442	+	test('empty edited default and focused cform controls protect drafts', () => {
		443	+	const saved = document;
		444	+	try {
		445	+	globalThis.document = { querySelectorAll: () => [{ value: '', defaultValue: 'existing' }], activeElement: null };
		446	+	assert.equal(window.ermiteMR.hasDraft(), true);
		447	+	document.querySelectorAll = () => [];
		448	+	document.activeElement = { closest: (s) => s === '.cform' ? {} : null };
		449	+	assert.equal(window.ermiteMR.hasDraft(), true);
		450	+	} finally { globalThis.document = saved; }
		451	+	});
		452	+
		453	+	test('failure during a draft keeps pending and resumes after the draft ends', async () => {
		454	+	const c = clock(); let blocked = false, reject, applied = 0, count = 0;
		455	+	const r = window.ermiteMR.refresher({ blocked: () => blocked,
		456	+	fetchPage: () => ++count === 1 ? new Promise((_, no) => { reject = no; }) : Promise.resolve('page'),
		457	+	apply: () => applied++, notice() {}, failed: () => assert.fail('draft must defer fallback') });
		458	+	try {
		459	+	r.request(); const first = c.tick(); blocked = true; reject(new Error('offline')); await first;
		460	+	assert.equal(r.pending(), true); assert.equal(applied, 0);
		461	+	blocked = false; r.resume(); await c.tick(); assert.equal(applied, 1);
		462	+	} finally { c.restore(); }
		463	+	});
		464	+
		465	+	test('anchor restoration retains the server encoding of tilde and star paths', () => {
		466	+	const saved = { document, CSS: globalThis.CSS, scrollBy: globalThis.scrollBy };
		467	+	try {
		468	+	globalThis.CSS = { escape: (s) => s };
		469	+	globalThis.scrollBy = () => {};
		470	+	for (const path of ['a~.go', 'a*.go']) {
		471	+	const encoded = path.replace('*', '%2A');
		472	+	const row = { getBoundingClientRect: () => ({ top: 5 }) };
		473	+	const file = { id: 'f9', dataset: { file: path }, querySelector: (s) => {
		474	+	if (s === '.dt.uni') return file;
		475	+	assert.equal(s, 'a[href$="on=new:12:' + encoded + '#f9"]');
		476	+	return { closest: () => row };
		477	+	} };
		478	+	globalThis.document = { querySelectorAll: () => [file], querySelector: () => ({ dataset: { diff: 'unified' } }) };
		479	+	window.ermiteMR.restoreAnchor({ file: path, suffix: 'new:12:' + encoded, on: 'new:12:' + path, offset: 5 });
		480	+	}
		481	+	} finally { Object.assign(globalThis, saved); }
		482	+	});
		483	+
		484	+	for (const control of [
		485	+	{ type: 'radio', checked: true, defaultChecked: false },
		486	+	{ type: 'checkbox', checked: false, defaultChecked: true },
		487	+	{ type: 'number', name: 'start_line', value: '10', defaultValue: '12' },
		488	+	{ tagName: 'SELECT', options: [{ selected: true, defaultSelected: false }] },
		489	+	]) test(`changed ${control.name \|\| control.type \|\| control.tagName} remains a draft after blur`, () => {
		490	+	const saved = document;
		491	+	try {
		492	+	globalThis.document = { activeElement: null, querySelectorAll(sel) {
		493	+	assert.equal(sel, ':is(form.cform, .cmt form, form.d-acts) :is(textarea, input, select)');
		494	+	return [control];
		495	+	} };
		496	+	assert.equal(window.ermiteMR.hasDraft(), true);
		497	+	} finally { globalThis.document = saved; }
		498	+	});
		499	+
		500	+	test('intercepted Cancel resets the entire comment form', () => {
		501	+	const saved = Object.fromEntries(['document', 'location', 'addEventListener', 'matchMedia'].map(k => [k, globalThis[k]]));
		502	+	const c = clock(), handlers = {};
		503	+	const diffs = { dataset: { view: 'split' }, querySelector() { return null; }, querySelectorAll() { return []; } };
		504	+	const radio = { type: 'radio', checked: true, defaultChecked: false };
		505	+	const line = { type: 'number', value: '2', defaultValue: '4' };
		506	+	let reset = 0, prevented = false;
		507	+	const form = { reset() { reset++; radio.checked = radio.defaultChecked; line.value = line.defaultValue; }, contains() { return false; } };
		508	+	const cancel = { closest: () => form };
		509	+	globalThis.document = { activeElement: null,
		510	+	querySelector: s => ['#diffs', '#diffs[data-mr]'].includes(s) ? diffs : null,
		511	+	querySelectorAll: s => s.includes('form.cform') ? [radio, line] : [],
		512	+	addEventListener: (type, fn) => { handlers[type] = fn; } };
		513	+	globalThis.location = { pathname: '/demo/merge-requests/1', hash: '', href: 'https://forge.test/demo/merge-requests/1', replace() {} };
		514	+	globalThis.addEventListener = () => {};
		515	+	globalThis.matchMedia = () => ({ matches: true, addEventListener() {} });
		516	+	try {
		517	+	window.ermiteMR.start();
		518	+	window.ermiteMR.headChanged();
		519	+	handlers.click({ target: { closest: () => cancel }, preventDefault() { prevented = true; } });
		520	+	assert.equal(prevented, true);
		521	+	assert.equal(reset, 1);
		522	+	assert.equal(window.ermiteMR.hasDraft(), false);
		523	+	} finally { Object.assign(globalThis, saved); c.restore(); }
		524	+	});

M internal/adapters/web/mr.go +3 -0


@@ -291,6 +291,7 @@ type MRPage struct {
291	291
292	292		Commits []MRCommit
293	293		CommitsNote string
	294	+	CommitCount string
294	295		Modes []string
295	296		ChecksBlock bool
296	297		// Checks are the CI checks of the head of the request, ChecksSum their

@@ -734,7 +735,9 @@ func (s Server) mrReadPresentation(p MRPage, name string, n int64, res ports.M
734	735		})
735	736		}
736	737		lastRead := res.LastReadID.String()
	738	+	p.CommitCount = itoa(len(p.Commits))
737	739		if res.CommitsTruncated {
	740	+	p.CommitCount += "+"
738	741		p.CommitsNote = "the branch has more commits than the " + itoa(len(p.Commits)) + " listed."
739	742		}
740	743


@@ -291,6 +291,7 @@ type MRPage struct {
291		291
292	Commits []MRCommit	292		Commits []MRCommit
293	CommitsNote string	293		CommitsNote string
		294	+	CommitCount string
294	Modes []string	295		Modes []string
295	ChecksBlock bool	296		ChecksBlock bool
296	// Checks are the CI checks of the head of the request, ChecksSum their	297		// Checks are the CI checks of the head of the request, ChecksSum their

@@ -734,7 +735,9 @@ func (s Server) mrReadPresentation(p MRPage, name string, n int64, res ports.M
734	})	735		})
735	}	736		}
736	lastRead := res.LastReadID.String()	737		lastRead := res.LastReadID.String()
		738	+	p.CommitCount = itoa(len(p.Commits))
737	if res.CommitsTruncated {	739		if res.CommitsTruncated {
		740	+	p.CommitCount += "+"
738	p.CommitsNote = "the branch has more commits than the " + itoa(len(p.Commits)) + " listed."	741		p.CommitsNote = "the branch has more commits than the " + itoa(len(p.Commits)) + " listed."
739	}	742		}
740		743

M internal/adapters/web/mr.templ +141 -112


@@ -13,6 +13,7 @@ templ MRList(l Layout, p MRListPage) {
13	13		@Shell(l, mrListRail(p)) {
14	14		if p.Live {
15	15		@LiveSlot("mr-notice")
	16	+	<div id="mr-refresh-status" role="status" aria-live="polite"></div>
16	17		}
17	18		<div class="filter">
18	19		<label for="mr-filter" class="sr">filter</label>

@@ -108,8 +109,9 @@ templ mrListRail(p MRListPage) {
108	109		}
109	110
110	111		// MergeRequest is a merge request: its facts, its description, the diff with
111		-	// the notes under their lines, the general comments; and in the rail the merge
112		-	// form, the checks, the settings, the commits and the files.
	112	+	// the notes under their lines, the general comments. The merge and More menus
	113	+	// sit in the toolbar, the commits and checks in the card footer, and the rail
	114	+	// holds the files and verdicts.
113	115		templ MergeRequest(l Layout, p MRPage) {
114	116		@Shell(l, mrRail(p)) {
115	117		<section class="mr-card">

@@ -147,6 +149,7 @@ templ MergeRequest(l Layout, p MRPage) {
147	149		@templ.Raw(string(p.Desc))
148	150		</article>
149	151		}
	152	+	@mrFooter(p)
150	153		</section>
151	154		if p.Deleting != "" {
152	155		<p class="note" role="status">merged. the branch { p.Deleting } is being deleted.</p>

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

@@ -206,6 +214,7 @@ templ MergeRequest(l Layout, p MRPage) {
206	214		<p class="note">no changed files.</p>
207	215		}
208	216		</div>
	217	+	<div id="mr-comments">
209	218		<h2 class="rule-h" id="comments"><span>Comments</span><span class="count">{ itoa(p.NUnresolved) } open / { itoa(p.NComments) }</span></h2>
210	219		for _, c := range p.Loose {
211	220		@commentView(c, "")

@@ -219,6 +228,7 @@ templ MergeRequest(l Layout, p MRPage) {
219	228		if p.GeneralForm != nil {
220	229		@commentForm(*p.GeneralForm, "")
221	230		}
	231	+	</div>
222	232		}
223	233		}
224	234

@@ -366,6 +376,62 @@ templ commentForm(f CommentForm, suffix string) {
366	376		</form>
367	377		}
368	378
	379	+	templ mrFooter(p MRPage) {
	380	+	<footer class="mr-footer">
	381	+	<nav data-mr-tabs aria-label="Branch details">
	382	+	<a id="mr-tab-commits" href="#mr-commits">Commits <span class="count">{ p.CommitCount }</span></a>
	383	+	<a id="mr-tab-checks" href="#mr-checks">
	384	+	{ "Checks " }
	385	+	<span data-checks-label>
	386	+	if p.ChecksSum.Total > 0 {
	387	+	{ p.ChecksSum.Title }
	388	+	} else {
	389	+	no checks
	390	+	}
	391	+	</span>
	392	+	</a>
	393	+	</nav>
	394	+	<div id="mr-commits" data-mr-panel role="region" aria-labelledby="mr-tab-commits">
	395	+	<table class="mr-commits">
	396	+	<thead><tr><th>Commit</th><th>Subject</th><th>Author</th><th>Date</th><th>Signature</th><th>Status</th></tr></thead>
	397	+	<tbody>
	398	+	for _, c := range p.Commits {
	399	+	<tr data-new?={ c.New }>
	400	+	<td><a href={ templ.SafeURL(c.Href) }>{ c.Short }</a></td>
	401	+	<td>{ c.Subject }</td>
	402	+	<td>{ c.Author }</td>
	403	+	<td>
	404	+	if c.WhenAt != "" {
	405	+	<time datetime={ c.WhenAt }>{ c.When }</time>
	406	+	}
	407	+	</td>
	408	+	<td>
	409	+	if c.Sig != nil {
	410	+	@signaturePill(c.Sig)
	411	+	}
	412	+	</td>
	413	+	<td>
	414	+	if c.New {
	415	+	<span>new</span>
	416	+	}
	417	+	</td>
	418	+	</tr>
	419	+	}
	420	+	</tbody>
	421	+	</table>
	422	+	if len(p.Commits) == 0 {
	423	+	<p class="dim">no commit to merge.</p>
	424	+	}
	425	+	if p.CommitsNote != "" {
	426	+	<p class="note">{ p.CommitsNote }</p>
	427	+	}
	428	+	</div>
	429	+	<div id="mr-checks-panel" data-mr-panel role="region" aria-labelledby="mr-tab-checks">
	430	+	@MRChecks(p.Checks)
	431	+	</div>
	432	+	</footer>
	433	+	}
	434	+
369	435		templ mrRail(p MRPage) {
370	436		<section aria-labelledby="r-files" class="r-files">
371	437		<h2 id="r-files">

@@ -391,51 +457,6 @@ templ mrRail(p MRPage) {
391	457		</ul>
392	458		</section>
393	459		}
394		-	@MRChecks(p.Checks)
395		-	<section aria-labelledby="r-commits">
396		-	<h2 id="r-commits">Commits <span class="count">{ itoa(len(p.Commits)) }</span></h2>
397		-	<ul class="pcommits">
398		-	for _, c := range p.Commits {
399		-	<li data-new?={ c.New }>
400		-	<a href={ templ.SafeURL(c.Href) }>{ c.Short }</a>
401		-	<span class="s">{ c.Subject }</span>
402		-	if c.Sig != nil {
403		-	@signaturePill(c.Sig)
404		-	}
405		-	<span class="mute">
406		-	{ c.Author }
407		-	if c.WhenAt != "" {
408		-	{ " · " }<time datetime={ c.WhenAt }>{ c.When }</time>
409		-	}
410		-	if c.New {
411		-	{ " · new" }
412		-	}
413		-	</span>
414		-	</li>
415		-	}
416		-	</ul>
417		-	if len(p.Commits) == 0 {
418		-	<p class="dim">no commit to merge.</p>
419		-	}
420		-	if p.CommitsNote != "" {
421		-	<p class="note">{ p.CommitsNote }</p>
422		-	}
423		-	</section>
424		-	<section aria-labelledby="r-settings">
425		-	<h2 id="r-settings">Settings</h2>
426		-	<dl class="kv">
427		-	<dt>modes</dt>
428		-	<dd>{ strings.Join(p.Modes, ", ") }</dd>
429		-	<dt>checks</dt>
430		-	<dd>
431		-	if p.ChecksBlock {
432		-	failing ones block the merge
433		-	} else {
434		-	do not block the merge
435		-	}
436		-	</dd>
437		-	</dl>
438		-	</section>
439	460		}
440	461
441	462		// mrBar is the bar above the diff, which follows the review: the totals, the

@@ -450,8 +471,8 @@ templ mrBar(p MRPage) {
450	471		@MRChecksSum(p.ChecksSum)
451	472		if p.Box != nil {
452	473		@mergeMenu(p)
453		-	@moreMenu(p)
454	474		}
	475	+	@moreMenu(p)
455	476		</div>
456	477		}
457	478

@@ -474,18 +495,9 @@ templ mergeMenu(p MRPage) {
474	495		<kbd aria-hidden="true">M</kbd>
475	496		</summary>
476	497		<div class="menu-pop" role="group" aria-label="Merge">
477		-	<dl class="kv">
478		-	<dt>head</dt>
479		-	<dd>
480		-	if p.Box.HeadGone {
481		-	gone: the source branch was deleted
482		-	} else {
483		-	{ p.HeadShort }
484		-	}
485		-	</dd>
486		-	<dt>into</dt>
487		-	<dd>{ p.Target }</dd>
488		-	</dl>
	498	+	if p.Box.HeadGone {
	499	+	<p class="dim">the source branch was deleted</p>
	500	+	}
489	501		if p.Box.Error != "" {
490	502		<p class="d-err" role="alert">{ p.Box.Error }</p>
491	503		}

@@ -519,15 +531,6 @@ templ mergeMenu(p MRPage) {
519	531		</label>
520	532		}
521	533		</fieldset>
522		-	if p.Box.Signed {
523		-	<p class="d-note" id="mr-signing">
524		-	squash and merge commits are signed with ermite's own key (generated on first start).
525		-	if p.Box.Fingerprint != "" {
526		-	fingerprint <code>{ p.Box.Fingerprint }</code>
527		-	}
528		-	<code>ermite signing-key show</code> prints it.
529		-	</p>
530		-	}
531	534		if p.Box.CanDeleteBranch {
532	535		<label class="d-check"><input type="checkbox" name="delete_branch" value="1"/> delete { p.Source } after the merge <kbd aria-hidden="true">D</kbd></label>
533	536		}

@@ -589,26 +592,52 @@ templ MRMergeabilityFragment(v MergeabilityView) {
589	592		@mrMergeabilitySlot(v)
590	593		}
591	594
592		-	// moreMenu is what else the owner does with an open request: mark the head
593		-	// read, close it, merge it from a terminal.
	595	+	// moreMenu shows read-only settings to every viewer, and keeps owner actions
	596	+	// behind the same merge-box permission as before.
594	597		templ moreMenu(p MRPage) {
595	598		<details class="menu omenu">
596	599		<summary class="btn icon" aria-label="More actions" title="more actions">⋯</summary>
597	600		<div class="menu-pop" role="group" aria-label="More actions">
598		-	if p.Box.CanMarkRead {
599		-	<form method="post" action={ templ.SafeURL(p.Box.ReadAction) }>
600		-	<input type="hidden" name="head_id" value={ p.Box.Head }/>
601		-	<button type="submit" title="the next visit can show only what changed after this head" class="btn" aria-keyshortcuts="Shift+R" data-read>Mark read <kbd aria-hidden="true">R</kbd></button>
	601	+	<section class="merge-settings">
	602	+	<h2>Merge settings</h2>
	603	+	<dl class="kv">
	604	+	<dt>modes</dt>
	605	+	<dd>{ strings.Join(p.Modes, ", ") }</dd>
	606	+	<dt>checks</dt>
	607	+	<dd>
	608	+	if p.ChecksBlock {
	609	+	failing ones block the merge
	610	+	} else {
	611	+	do not block the merge
	612	+	}
	613	+	</dd>
	614	+	</dl>
	615	+	</section>
	616	+	if p.Box != nil {
	617	+	if p.Box.Signed {
	618	+	<p class="d-note" id="mr-signing">
	619	+	squash and merge commits are signed with ermite's own key (generated on first start).
	620	+	if p.Box.Fingerprint != "" {
	621	+	fingerprint <code>{ p.Box.Fingerprint }</code>
	622	+	}
	623	+	<code>ermite signing-key show</code> prints it.
	624	+	</p>
	625	+	}
	626	+	if p.Box.CanMarkRead {
	627	+	<form method="post" action={ templ.SafeURL(p.Box.ReadAction) }>
	628	+	<input type="hidden" name="head_id" value={ p.Box.Head }/>
	629	+	<button type="submit" title="the next visit can show only what changed after this head" class="btn" aria-keyshortcuts="Shift+R" data-read>Mark read <kbd aria-hidden="true">R</kbd></button>
	630	+	</form>
	631	+	}
	632	+	<form method="post" action={ templ.SafeURL(p.Box.CloseAction) }>
	633	+	<button type="submit" title="close without merging; the branch is kept" class="btn danger">Close</button>
602	634		</form>
603		-	}
604		-	<form method="post" action={ templ.SafeURL(p.Box.CloseAction) }>
605		-	<button type="submit" title="close without merging; the branch is kept" class="btn danger">Close</button>
606		-	</form>
607		-	if !p.Box.HeadGone && p.Box.ReadyAction == "" {
608		-	<details class="d-or">
609		-	<summary class="mute">or from a terminal</summary>
610		-	@CloneBlock(p.Box.CLI)
611		-	</details>
	635	+	if !p.Box.HeadGone && p.Box.ReadyAction == "" {
	636	+	<details class="d-or">
	637	+	<summary class="mute">or from a terminal</summary>
	638	+	@CloneBlock(p.Box.CLI)
	639	+	</details>
	640	+	}
612	641		}
613	642		</div>
614	643		</details>

 	@Shell(l, mrListRail(p)) {
 		if p.Live {
 			@LiveSlot("mr-notice")
+		<div id="mr-refresh-status" role="status" aria-live="polite"></div>
 		}
 		<div class="filter">
 			<label for="mr-filter" class="sr">filter</label>
 }
 // MergeRequest is a merge request: its facts, its description, the diff with
-// the notes under their lines, the general comments; and in the rail the merge
+// the notes under their lines, the general comments. The merge and More menus
-// form, the checks, the settings, the commits and the files.
+// sit in the toolbar, the commits and checks in the card footer, and the rail
+// holds the files and verdicts.
 templ MergeRequest(l Layout, p MRPage) {
 	@Shell(l, mrRail(p)) {
 		<section class="mr-card">
 					@templ.Raw(string(p.Desc))
 				</article>
 			}
+			@mrFooter(p)
 		</section>
 		if p.Deleting != "" {
 			<p class="note" role="status">merged. the branch { p.Deleting } is being deleted.</p>
 			<p class="d-err" role="alert">{ p.MergeError }</p>
 		}
 		@LiveSlot("mr-notice")
-		if p.Since != nil {
+		<div id="mr-refresh-status" role="status" aria-live="polite"></div>
-			<nav class="since" aria-label="Diff range">
+		<div id="mr-range" hidden?={ p.Since == nil && p.SinceNote == "" }>
-				<a
+			if p.Since != nil {
-					href={ templ.SafeURL(p.Since.AllHref) }
+				<nav class="since" aria-label="Diff range">
-					if !p.Since.Current {
+					<a
-						aria-current="page"
+						href={ templ.SafeURL(p.Since.AllHref) }
-					}
+						if !p.Since.Current {
-				>all changes <span class="mute">vs { p.Target }</span></a>
+							aria-current="page"
-				<a
+						}
-					href={ templ.SafeURL(p.Since.SinceHref) }
+					>all changes <span class="mute">vs { p.Target }</span></a>
-					if p.Since.Current {
+					<a
-						aria-current="page"
+						href={ templ.SafeURL(p.Since.SinceHref) }
-					}
+						if p.Since.Current {
-				>since your last read <span class="mute">{ p.Since.ReadShort } → { p.Since.HeadShort }</span></a>
+							aria-current="page"
-			</nav>
+						}
-		}
+					>since your last read <span class="mute">{ p.Since.ReadShort } → { p.Since.HeadShort }</span></a>
-		if p.SinceNote != "" {
+				</nav>
-			<p class="notice">{ p.SinceNote }</p>
+			}
-		}
+			if p.SinceNote != "" {
+				<p class="notice">{ p.SinceNote }</p>
+			}
+		</div>
 		@mrBar(p)
-		if p.Invisible {
+		<div id="mr-diff-notices" hidden?={ !p.Invisible && p.Note == "" }>
-			<p class="notice">
+			if p.Invisible {
-				this diff holds invisible characters (direction controls, zero-width characters). They are shown as
+				<p class="notice">
-				<span class="inv">&lt;U+XXXX&gt;</span> markers, never applied.
+					this diff holds invisible characters (direction controls, zero-width characters). They are shown as
-			</p>
+					<span class="inv">&lt;U+XXXX&gt;</span> markers, never applied.
-		}
+				</p>
-		if p.Note != "" {
+			}
-			<p class="notice">{ p.Note }</p>
+			if p.Note != "" {
-		}
+				<p class="notice">{ p.Note }</p>
+			}
+		</div>
 		<div
 			id="diffs"
 			data-mr
 				<p class="note">no changed files.</p>
 			}
 		</div>
+		<div id="mr-comments">
 		<h2 class="rule-h" id="comments"><span>Comments</span><span class="count">{ itoa(p.NUnresolved) } open / { itoa(p.NComments) }</span></h2>
 		for _, c := range p.Loose {
 			@commentView(c, "")
 		if p.GeneralForm != nil {
 			@commentForm(*p.GeneralForm, "")
 		}
+		</div>
 	}
 }
 	</form>
 }
+templ mrFooter(p MRPage) {
+	<footer class="mr-footer">
+		<nav data-mr-tabs aria-label="Branch details">
+			<a id="mr-tab-commits" href="#mr-commits">Commits <span class="count">{ p.CommitCount }</span></a>
+			<a id="mr-tab-checks" href="#mr-checks">
+				{ "Checks " }
+				<span data-checks-label>
+					if p.ChecksSum.Total > 0 {
+						{ p.ChecksSum.Title }
+					} else {
+						no checks
+					}
+				</span>
+			</a>
+		</nav>
+		<div id="mr-commits" data-mr-panel role="region" aria-labelledby="mr-tab-commits">
+			<table class="mr-commits">
+				<thead><tr><th>Commit</th><th>Subject</th><th>Author</th><th>Date</th><th>Signature</th><th>Status</th></tr></thead>
+				<tbody>
+					for _, c := range p.Commits {
+						<tr data-new?={ c.New }>
+							<td><a href={ templ.SafeURL(c.Href) }>{ c.Short }</a></td>
+							<td>{ c.Subject }</td>
+							<td>{ c.Author }</td>
+							<td>
+								if c.WhenAt != "" {
+									<time datetime={ c.WhenAt }>{ c.When }</time>
+								}
+							</td>
+							<td>
+								if c.Sig != nil {
+									@signaturePill(c.Sig)
+								}
+							</td>
+							<td>
+								if c.New {
+									<span>new</span>
+								}
+							</td>
+						</tr>
+					}
+				</tbody>
+			</table>
+			if len(p.Commits) == 0 {
+				<p class="dim">no commit to merge.</p>
+			}
+			if p.CommitsNote != "" {
+				<p class="note">{ p.CommitsNote }</p>
+			}
+		</div>
+		<div id="mr-checks-panel" data-mr-panel role="region" aria-labelledby="mr-tab-checks">
+			@MRChecks(p.Checks)
+		</div>
+	</footer>
+}
 templ mrRail(p MRPage) {
 	<section aria-labelledby="r-files" class="r-files">
 		<h2 id="r-files">
 			</ul>
 		</section>
 	}
-	@MRChecks(p.Checks)
-	<section aria-labelledby="r-commits">
-		<h2 id="r-commits">Commits <span class="count">{ itoa(len(p.Commits)) }</span></h2>
-		<ul class="pcommits">
-			for _, c := range p.Commits {
-				<li data-new?={ c.New }>
-					<a href={ templ.SafeURL(c.Href) }>{ c.Short }</a>
-					<span class="s">{ c.Subject }</span>
-					if c.Sig != nil {
-						@signaturePill(c.Sig)
-					}
-					<span class="mute">
-						{ c.Author }
-						if c.WhenAt != "" {
-							{ " · " }<time datetime={ c.WhenAt }>{ c.When }</time>
-						}
-						if c.New {
-							{ " · new" }
-						}
-					</span>
-				</li>
-			}
-		</ul>
-		if len(p.Commits) == 0 {
-			<p class="dim">no commit to merge.</p>
-		}
-		if p.CommitsNote != "" {
-			<p class="note">{ p.CommitsNote }</p>
-		}
-	</section>
-	<section aria-labelledby="r-settings">
-		<h2 id="r-settings">Settings</h2>
-		<dl class="kv">
-			<dt>modes</dt>
-			<dd>{ strings.Join(p.Modes, ", ") }</dd>
-			<dt>checks</dt>
-			<dd>
-				if p.ChecksBlock {
-					failing ones block the merge
-				} else {
-					do not block the merge
-				}
-			</dd>
-		</dl>
-	</section>
 }
 // mrBar is the bar above the diff, which follows the review: the totals, the
 		@MRChecksSum(p.ChecksSum)
 		if p.Box != nil {
 			@mergeMenu(p)
-			@moreMenu(p)
 		}
+		@moreMenu(p)
 	</div>
 }
 			<kbd aria-hidden="true">M</kbd>
 		</summary>
 		<div class="menu-pop" role="group" aria-label="Merge">
-			<dl class="kv">
+			if p.Box.HeadGone {
-				<dt>head</dt>
+				<p class="dim">the source branch was deleted</p>
-				<dd>
+			}
-					if p.Box.HeadGone {
-						gone: the source branch was deleted
-					} else {
-						{ p.HeadShort }
-					}
-				</dd>
-				<dt>into</dt>
-				<dd>{ p.Target }</dd>
-			</dl>
 			if p.Box.Error != "" {
 				<p class="d-err" role="alert">{ p.Box.Error }</p>
 			}
 							</label>
 						}
 					</fieldset>
-					if p.Box.Signed {
-						<p class="d-note" id="mr-signing">
-							squash and merge commits are signed with ermite's own key (generated on first start).
-							if p.Box.Fingerprint != "" {
-								fingerprint <code>{ p.Box.Fingerprint }</code>
-							}
-							<code>ermite signing-key show</code> prints it.
-						</p>
-					}
 					if p.Box.CanDeleteBranch {
 						<label class="d-check"><input type="checkbox" name="delete_branch" value="1"/> delete { p.Source } after the merge <kbd aria-hidden="true">D</kbd></label>
 					}
 	@mrMergeabilitySlot(v)
 }
-// moreMenu is what else the owner does with an open request: mark the head
+// moreMenu shows read-only settings to every viewer, and keeps owner actions
-// read, close it, merge it from a terminal.
+// behind the same merge-box permission as before.
 templ moreMenu(p MRPage) {
 	<details class="menu omenu">
 		<summary class="btn icon" aria-label="More actions" title="more actions">⋯</summary>
 		<div class="menu-pop" role="group" aria-label="More actions">
-			if p.Box.CanMarkRead {
+			<section class="merge-settings">
-				<form method="post" action={ templ.SafeURL(p.Box.ReadAction) }>
+				<h2>Merge settings</h2>
-					<input type="hidden" name="head_id" value={ p.Box.Head }/>
+				<dl class="kv">
-					<button type="submit" title="the next visit can show only what changed after this head" class="btn" aria-keyshortcuts="Shift+R" data-read>Mark read <kbd aria-hidden="true">R</kbd></button>
+					<dt>modes</dt>
+					<dd>{ strings.Join(p.Modes, ", ") }</dd>
+					<dt>checks</dt>
+					<dd>
+						if p.ChecksBlock {
+							failing ones block the merge
+						} else {
+							do not block the merge
+						}
+					</dd>
+				</dl>
+			</section>
+			if p.Box != nil {
+				if p.Box.Signed {
+					<p class="d-note" id="mr-signing">
+						squash and merge commits are signed with ermite's own key (generated on first start).
+						if p.Box.Fingerprint != "" {
+							fingerprint <code>{ p.Box.Fingerprint }</code>
+						}
+						<code>ermite signing-key show</code> prints it.
+					</p>
+				}
+				if p.Box.CanMarkRead {
+					<form method="post" action={ templ.SafeURL(p.Box.ReadAction) }>
+						<input type="hidden" name="head_id" value={ p.Box.Head }/>
+						<button type="submit" title="the next visit can show only what changed after this head" class="btn" aria-keyshortcuts="Shift+R" data-read>Mark read <kbd aria-hidden="true">R</kbd></button>
+					</form>
+				}
+				<form method="post" action={ templ.SafeURL(p.Box.CloseAction) }>
+					<button type="submit" title="close without merging; the branch is kept" class="btn danger">Close</button>
 				</form>
-			}
+				if !p.Box.HeadGone && p.Box.ReadyAction == "" {
-			<form method="post" action={ templ.SafeURL(p.Box.CloseAction) }>
+					<details class="d-or">
-				<button type="submit" title="close without merging; the branch is kept" class="btn danger">Close</button>
+						<summary class="mute">or from a terminal</summary>
-			</form>
+						@CloneBlock(p.Box.CLI)
-			if !p.Box.HeadGone && p.Box.ReadyAction == "" {
+					</details>
-				<details class="d-or">
+				}
-					<summary class="mute">or from a terminal</summary>
-					@CloneBlock(p.Box.CLI)
-				</details>
 			}
 		</div>
 	</details>

M internal/adapters/web/mr_templ.go +938 -894 generated file: collapsed

load diff

M internal/adapters/web/mr_test.go +67 -0


@@ -4,6 +4,7 @@ package web
4	4
5	5		import (
6	6		"context"
	7	+	"time"
7	8		"testing"
8	9
9	10		"github.com/stretchr/testify/assert"

@@ -128,3 +129,69 @@ func TestMergeabilityLiveEvents(t *testing.T) {
128	129		require.NoError(t, err)
129	130		assert.Empty(t, fs)
130	131		}
	132	+
	133	+	func TestMRPanelsAndMenus(t *testing.T) {
	134	+	p := MRPage{CommitCount: "500+", CommitsNote: "more commits", Modes: []string{"squash", "merge"}, ChecksBlock: true,
	135	+	ChecksSum: ChecksSummary{Total: 2, Label: "1/2", Title: "1/2 failed"}, Box: &MergeBox{Signed: true, Fingerprint: "fingerprint", HeadGone: true}}
	136	+	footer := renderToString(t, mrFooter(p))
	137	+	assert.Contains(t, footer, `<footer class="mr-footer"><nav data-mr-tabs`)
	138	+	assert.NotContains(t, footer, `<details`)
	139	+	assert.NotContains(t, footer, `<summary`)
	140	+	// No hidden attribute: the CSS shows the panel of the URL fragment until
	141	+	// mr.js takes over, so the tabs work as anchors without scripts.
	142	+	assert.Contains(t, footer, `id="mr-commits" data-mr-panel role="region"`)
	143	+	assert.Contains(t, footer, `id="mr-checks-panel" data-mr-panel role="region"`)
	144	+	assert.NotContains(t, footer, `data-mr-panel hidden`)
	145	+	css, err := staticFS.ReadFile("static/css/60-mr.css")
	146	+	require.NoError(t, err)
	147	+	assert.Contains(t, string(css), `&:not([data-panels]) [data-mr-panel]:not(:target, :has(:target)) { display: none; }`)
	148	+	assert.Contains(t, footer, `data-mr-tabs`)
	149	+	assert.Contains(t, footer, `id="mr-commits"`)
	150	+	assert.Contains(t, footer, `id="mr-checks"`)
	151	+	assert.Contains(t, footer, `<table class="mr-commits">`)
	152	+	assert.Contains(t, footer, "500+")
	153	+	assert.Contains(t, footer, "more commits")
	154	+	assert.Contains(t, footer, "1/2 failed")
	155	+	rail := renderToString(t, mrRail(p))
	156	+	assert.Contains(t, rail, "g f")
	157	+	for _, text := range []string{"Checks", "Commits", "Settings", "mr-checks"} {
	158	+	assert.NotContains(t, rail, text)
	159	+	}
	160	+	more := renderToString(t, moreMenu(p))
	161	+	for _, text := range []string{"Merge settings", "squash, merge", "failing ones block", `id="mr-signing"`, "fingerprint", "ermite signing-key show"} {
	162	+	assert.Contains(t, more, text)
	163	+	}
	164	+	merge := renderToString(t, mergeMenu(p))
	165	+	assert.NotContains(t, merge, `<dl`)
	166	+	assert.NotContains(t, merge, `mr-signing`)
	167	+	assert.Contains(t, merge, "the source branch was deleted")
	168	+	bar := renderToString(t, mrBar(MRPage{}))
	169	+	assert.Contains(t, bar, `id="mr-ck"`)
	170	+	assert.Contains(t, bar, `href="#mr-checks"`)
	171	+	assert.Contains(t, bar, "Merge settings")
	172	+	assert.NotContains(t, bar, ">Close</button>")
	173	+	}
	174	+
	175	+	func TestMRReadPresentationCommitCount(t *testing.T) {
	176	+	commits := func(n int) []domain.Commit { return make([]domain.Commit, n) }
	177	+	for _, tc := range []struct {
	178	+	name string
	179	+	commits []domain.Commit
	180	+	truncated bool
	181	+	count string
	182	+	note string
	183	+	}{
	184	+	{"empty", nil, false, "0", ""},
	185	+	{"complete", commits(2), false, "2", ""},
	186	+	{"truncated", commits(3), true, "3+", "the branch has more commits than the 3 listed."},
	187	+	} {
	188	+	t.Run(tc.name, func(t *testing.T) {
	189	+	s := &Server{cfg: Config{Now: time.Now}}
	190	+	p := &MRPage{}
	191	+	s.mrReadPresentation(p, "demo", 1, ports.MergeRequestDetail{Commits: tc.commits, CommitsTruncated: tc.truncated}, false, false)
	192	+	assert.Equal(t, tc.count, p.CommitCount)
	193	+	assert.Equal(t, tc.note, p.CommitsNote)
	194	+	assert.Len(t, p.Commits, len(tc.commits))
	195	+	})
	196	+	}
	197	+	}


@@ -4,6 +4,7 @@ package web
4		4
5	import (	5		import (
6	"context"	6		"context"
		7	+	"time"
7	"testing"	8		"testing"
8		9
9	"github.com/stretchr/testify/assert"	10		"github.com/stretchr/testify/assert"

@@ -128,3 +129,69 @@ func TestMergeabilityLiveEvents(t *testing.T) {
128	require.NoError(t, err)	129		require.NoError(t, err)
129	assert.Empty(t, fs)	130		assert.Empty(t, fs)
130	}	131		}
		132	+
		133	+	func TestMRPanelsAndMenus(t *testing.T) {
		134	+	p := MRPage{CommitCount: "500+", CommitsNote: "more commits", Modes: []string{"squash", "merge"}, ChecksBlock: true,
		135	+	ChecksSum: ChecksSummary{Total: 2, Label: "1/2", Title: "1/2 failed"}, Box: &MergeBox{Signed: true, Fingerprint: "fingerprint", HeadGone: true}}
		136	+	footer := renderToString(t, mrFooter(p))
		137	+	assert.Contains(t, footer, `<footer class="mr-footer"><nav data-mr-tabs`)
		138	+	assert.NotContains(t, footer, `<details`)
		139	+	assert.NotContains(t, footer, `<summary`)
		140	+	// No hidden attribute: the CSS shows the panel of the URL fragment until
		141	+	// mr.js takes over, so the tabs work as anchors without scripts.
		142	+	assert.Contains(t, footer, `id="mr-commits" data-mr-panel role="region"`)
		143	+	assert.Contains(t, footer, `id="mr-checks-panel" data-mr-panel role="region"`)
		144	+	assert.NotContains(t, footer, `data-mr-panel hidden`)
		145	+	css, err := staticFS.ReadFile("static/css/60-mr.css")
		146	+	require.NoError(t, err)
		147	+	assert.Contains(t, string(css), `&:not([data-panels]) [data-mr-panel]:not(:target, :has(:target)) { display: none; }`)
		148	+	assert.Contains(t, footer, `data-mr-tabs`)
		149	+	assert.Contains(t, footer, `id="mr-commits"`)
		150	+	assert.Contains(t, footer, `id="mr-checks"`)
		151	+	assert.Contains(t, footer, `<table class="mr-commits">`)
		152	+	assert.Contains(t, footer, "500+")
		153	+	assert.Contains(t, footer, "more commits")
		154	+	assert.Contains(t, footer, "1/2 failed")
		155	+	rail := renderToString(t, mrRail(p))
		156	+	assert.Contains(t, rail, "g f")
		157	+	for _, text := range []string{"Checks", "Commits", "Settings", "mr-checks"} {
		158	+	assert.NotContains(t, rail, text)
		159	+	}
		160	+	more := renderToString(t, moreMenu(p))
		161	+	for _, text := range []string{"Merge settings", "squash, merge", "failing ones block", `id="mr-signing"`, "fingerprint", "ermite signing-key show"} {
		162	+	assert.Contains(t, more, text)
		163	+	}
		164	+	merge := renderToString(t, mergeMenu(p))
		165	+	assert.NotContains(t, merge, `<dl`)
		166	+	assert.NotContains(t, merge, `mr-signing`)
		167	+	assert.Contains(t, merge, "the source branch was deleted")
		168	+	bar := renderToString(t, mrBar(MRPage{}))
		169	+	assert.Contains(t, bar, `id="mr-ck"`)
		170	+	assert.Contains(t, bar, `href="#mr-checks"`)
		171	+	assert.Contains(t, bar, "Merge settings")
		172	+	assert.NotContains(t, bar, ">Close</button>")
		173	+	}
		174	+
		175	+	func TestMRReadPresentationCommitCount(t *testing.T) {
		176	+	commits := func(n int) []domain.Commit { return make([]domain.Commit, n) }
		177	+	for _, tc := range []struct {
		178	+	name string
		179	+	commits []domain.Commit
		180	+	truncated bool
		181	+	count string
		182	+	note string
		183	+	}{
		184	+	{"empty", nil, false, "0", ""},
		185	+	{"complete", commits(2), false, "2", ""},
		186	+	{"truncated", commits(3), true, "3+", "the branch has more commits than the 3 listed."},
		187	+	} {
		188	+	t.Run(tc.name, func(t *testing.T) {
		189	+	s := &Server{cfg: Config{Now: time.Now}}
		190	+	p := &MRPage{}
		191	+	s.mrReadPresentation(p, "demo", 1, ports.MergeRequestDetail{Commits: tc.commits, CommitsTruncated: tc.truncated}, false, false)
		192	+	assert.Equal(t, tc.count, p.CommitCount)
		193	+	assert.Equal(t, tc.note, p.CommitsNote)
		194	+	assert.Len(t, p.Commits, len(tc.commits))
		195	+	})
		196	+	}
		197	+	}

M internal/adapters/web/signature_test.go +1 -1


@@ -145,7 +145,7 @@ func TestCommitPageShowsTheSignature(t *testing.T) {
145	145		func TestMergeRequestCommitsShowTheSignatureBadge(t *testing.T) {
146	146		t.Parallel()
147	147		signed := signatureBadge(verification(domain.FormatGPG, domain.StatusVerified, gpgFP, ""), false)
148		-	got := renderToString(t, mrRail(MRPage{Commits: []MRCommit{
	148	+	got := renderToString(t, mrFooter(MRPage{Commits: []MRCommit{
149	149		{Short: "aaaaaaa", Href: "/r/commit/a", Subject: "signed", Sig: signed},
150	150		{Short: "bbbbbbb", Href: "/r/commit/b", Subject: "unsigned"},
151	151		}}))


@@ -145,7 +145,7 @@ func TestCommitPageShowsTheSignature(t *testing.T) {
145		func TestMergeRequestCommitsShowTheSignatureBadge(t *testing.T) {	145		func TestMergeRequestCommitsShowTheSignatureBadge(t *testing.T) {
146		t.Parallel()	146		t.Parallel()
147		signed := signatureBadge(verification(domain.FormatGPG, domain.StatusVerified, gpgFP, ""), false)	147		signed := signatureBadge(verification(domain.FormatGPG, domain.StatusVerified, gpgFP, ""), false)
148	-	got := renderToString(t, mrRail(MRPage{Commits: []MRCommit{	148	+	got := renderToString(t, mrFooter(MRPage{Commits: []MRCommit{
149		{Short: "aaaaaaa", Href: "/r/commit/a", Subject: "signed", Sig: signed},	149		{Short: "aaaaaaa", Href: "/r/commit/a", Subject: "signed", Sig: signed},
150		{Short: "bbbbbbb", Href: "/r/commit/b", Subject: "unsigned"},	150		{Short: "bbbbbbb", Href: "/r/commit/b", Subject: "unsigned"},
151		}}))	151		}}))

M internal/adapters/web/static/css/60-mr.css +34 -2


@@ -8,6 +8,38 @@
8	8		& > .mr-desc.prose { border: 0; border-top: 1px solid var(--border); border-radius: 0; }
9	9		}
10	10
	11	+	.mr-footer {
	12	+	border-top: 1px solid var(--border); padding: var(--s2) var(--s4);
	13	+	/* the shade of the card header; the card's overflow clips the corners */
	14	+	background: var(--bg-raised);
	15	+	font-size: var(--fs-s);
	16	+	/* the tabs are buttons: a thin border, the count in a darker badge;
	17	+	the open one in the teal accent */
	18	+	& nav { display: flex; flex-wrap: wrap; gap: var(--s2); }
	19	+	& [data-mr-tabs] a {
	20	+	display: inline-flex; align-items: center; gap: var(--s1);
	21	+	padding: 2px var(--s2); border: 1px solid var(--border-strong); border-radius: var(--r-s);
	22	+	color: var(--ink-dim); text-decoration: none; cursor: pointer;
	23	+	}
	24	+	& [data-checks-label] { color: var(--ink-dim); font-size: var(--fs-xs); }
	25	+	& [data-mr-tabs] .count { margin-left: 0; color: var(--ink-hi); background: var(--bg-canvas); box-shadow: inset 0 0 0 1px var(--border); }
	26	+	& [data-mr-tabs] a:hover { background: var(--bg-strong); color: var(--ink-hi); }
	27	+	& [data-mr-tabs] a[aria-expanded="true"] { border-color: var(--teal); color: var(--teal); background: var(--bg-surface); }
	28	+	& [data-mr-panel] { padding-block-start: var(--s2); overflow-x: auto; }
	29	+	& [hidden] { display: none; }
	30	+	/* Until mr.js drives the panels (data-panels, then [hidden]), only the
	31	+	panel of the URL fragment shows: the tabs work as anchors without
	32	+	scripts, and no panel flashes open before the script runs. */
	33	+	&:not([data-panels]) [data-mr-panel]:not(:target, :has(:target)) { display: none; }
	34	+	& section h2 { font-size: var(--fs-s); color: var(--ink-dim); }
	35	+	& table { width: 100%; border-collapse: collapse; }
	36	+	& th, & td { text-align: left; padding: var(--s2); border-bottom: 1px solid var(--border); }
	37	+	& th { color: var(--ink-dim); font-weight: 500; }
	38	+	& tbody tr:last-child > :is(td, th) { border-bottom: 0; }
	39	+	}
	40	+	.merge-settings { font-size: var(--fs-s); color: var(--ink-dim); }
	41	+	.merge-settings h2 { font-size: var(--fs-s); }
	42	+
11	43		.mr-state[data-state="open"]::before { content: "● "; color: var(--teal); }
12	44		.mr-state[data-state="merged"]::before { content: "✓ "; color: var(--teal); }
13	45		.mr-state[data-state="closed"]::before { content: "✗ "; color: var(--red); }

@@ -112,11 +144,11 @@
112	144		& .d-or > summary:hover { color: var(--ink-hi); }
113	145		& .d-or[open] > .clone { margin-top: var(--s2); }
114	146		& .clone code { white-space: pre-wrap; overflow-wrap: anywhere; }
	147	+	& #mr-signing code { overflow-wrap: anywhere; }
115	148		}
116	149
117	150		/* the rail of a merge request follows the review: it sticks under the
118		-	header, one screen high, and scrolls on its own to its checks, commits
119		-	and settings. The list of files keeps its own scroll, under a height, so
	151	+	header, one screen high, and scrolls on its own to its verdicts. The list of files keeps its own scroll, under a height, so
120	152		that the blocks below it stay in reach. Only on a two-column layout. */
121	153		@media (min-width: 1081px) {
122	154		.rail:has(.r-files) {


@@ -8,6 +8,38 @@
8		& > .mr-desc.prose { border: 0; border-top: 1px solid var(--border); border-radius: 0; }	8		& > .mr-desc.prose { border: 0; border-top: 1px solid var(--border); border-radius: 0; }
9		}	9		}
10			10
			11	+	.mr-footer {
			12	+	border-top: 1px solid var(--border); padding: var(--s2) var(--s4);
			13	+	/* the shade of the card header; the card's overflow clips the corners */
			14	+	background: var(--bg-raised);
			15	+	font-size: var(--fs-s);
			16	+	/* the tabs are buttons: a thin border, the count in a darker badge;
			17	+	the open one in the teal accent */
			18	+	& nav { display: flex; flex-wrap: wrap; gap: var(--s2); }
			19	+	& [data-mr-tabs] a {
			20	+	display: inline-flex; align-items: center; gap: var(--s1);
			21	+	padding: 2px var(--s2); border: 1px solid var(--border-strong); border-radius: var(--r-s);
			22	+	color: var(--ink-dim); text-decoration: none; cursor: pointer;
			23	+	}
			24	+	& [data-checks-label] { color: var(--ink-dim); font-size: var(--fs-xs); }
			25	+	& [data-mr-tabs] .count { margin-left: 0; color: var(--ink-hi); background: var(--bg-canvas); box-shadow: inset 0 0 0 1px var(--border); }
			26	+	& [data-mr-tabs] a:hover { background: var(--bg-strong); color: var(--ink-hi); }
			27	+	& [data-mr-tabs] a[aria-expanded="true"] { border-color: var(--teal); color: var(--teal); background: var(--bg-surface); }
			28	+	& [data-mr-panel] { padding-block-start: var(--s2); overflow-x: auto; }
			29	+	& [hidden] { display: none; }
			30	+	/* Until mr.js drives the panels (data-panels, then [hidden]), only the
			31	+	panel of the URL fragment shows: the tabs work as anchors without
			32	+	scripts, and no panel flashes open before the script runs. */
			33	+	&:not([data-panels]) [data-mr-panel]:not(:target, :has(:target)) { display: none; }
			34	+	& section h2 { font-size: var(--fs-s); color: var(--ink-dim); }
			35	+	& table { width: 100%; border-collapse: collapse; }
			36	+	& th, & td { text-align: left; padding: var(--s2); border-bottom: 1px solid var(--border); }
			37	+	& th { color: var(--ink-dim); font-weight: 500; }
			38	+	& tbody tr:last-child > :is(td, th) { border-bottom: 0; }
			39	+	}
			40	+	.merge-settings { font-size: var(--fs-s); color: var(--ink-dim); }
			41	+	.merge-settings h2 { font-size: var(--fs-s); }
			42	+
11		.mr-state[data-state="open"]::before { content: "● "; color: var(--teal); }	43		.mr-state[data-state="open"]::before { content: "● "; color: var(--teal); }
12		.mr-state[data-state="merged"]::before { content: "✓ "; color: var(--teal); }	44		.mr-state[data-state="merged"]::before { content: "✓ "; color: var(--teal); }
13		.mr-state[data-state="closed"]::before { content: "✗ "; color: var(--red); }	45		.mr-state[data-state="closed"]::before { content: "✗ "; color: var(--red); }

@@ -112,11 +144,11 @@
112		& .d-or > summary:hover { color: var(--ink-hi); }	144		& .d-or > summary:hover { color: var(--ink-hi); }
113		& .d-or[open] > .clone { margin-top: var(--s2); }	145		& .d-or[open] > .clone { margin-top: var(--s2); }
114		& .clone code { white-space: pre-wrap; overflow-wrap: anywhere; }	146		& .clone code { white-space: pre-wrap; overflow-wrap: anywhere; }
			147	+	& #mr-signing code { overflow-wrap: anywhere; }
115		}	148		}
116			149
117		/* the rail of a merge request follows the review: it sticks under the	150		/* the rail of a merge request follows the review: it sticks under the
118	-	header, one screen high, and scrolls on its own to its checks, commits	151	+	header, one screen high, and scrolls on its own to its verdicts. The list of files keeps its own scroll, under a height, so
119	-	and settings. The list of files keeps its own scroll, under a height, so
120		that the blocks below it stay in reach. Only on a two-column layout. */	152		that the blocks below it stay in reach. Only on a two-column layout. */
121		@media (min-width: 1081px) {	153		@media (min-width: 1081px) {
122		.rail:has(.r-files) {	154		.rail:has(.r-files) {

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		}

A internal/adapters/web/static/css/85-mobile.css +53 -0

@@ -0,0 +1,53 @@
	1	+	@layer components {
	2	+	.mr-touch-range { display: none; }
	3	+
	4	+	/* MR only: retain the shell's desktop layout and other pages' spacing. */
	5	+	@media (max-width: 720px) {
	6	+	body:has(#diffs[data-mr]) {
	7	+	--pad: 0px;
	8	+	--hdr-h: 97px;
	9	+	overflow-x: clip;
	10	+	}
	11	+	body:has(#diffs[data-mr]) .work { padding-inline: 0; margin-inline: 0; gap: var(--s3); }
	12	+	body:has(#diffs[data-mr]) main { min-width: 0; padding-inline: 0; }
	13	+	body:has(#diffs[data-mr]) :is(.card, .mr-card, .mr-desc, .dfile, .dscroll, .code, .rail section) {
	14	+	margin-inline: 0; border-inline: 0; border-radius: 0; min-width: 0; max-width: 100%;
	15	+	}
	16	+	body:has(#diffs[data-mr]) :is(.mr-h, .mr-desc.prose, .card-h, .mr-footer) { padding-inline: 4px; }
	17	+	body:has(#diffs[data-mr]) .mr-footer :is(th, td) { padding-inline: var(--s1); }
	18	+	body:has(#diffs[data-mr]) .mr-desc.prose > pre { margin-inline: -4px; padding-inline: 0; max-width: calc(100% + 8px); }
	19	+	#diffs[data-mr] .dfile > summary { padding-inline: 0; border-inline: 0; border-radius: 0; }
	20	+	#diffs[data-mr] :is(.dscroll, .code) { overflow-x: auto; overscroll-behavior-x: contain; padding-inline: 0; }
	21	+	#diffs[data-mr] .dt .ln { width: calc(var(--lnw) + .5ch); min-width: calc(var(--lnw) + .5ch); padding-inline: .25ch; }
	22	+	#diffs[data-mr] .dt .m { width: 1ch; }
	23	+	#diffs[data-mr][data-diff] .uni { display: table; }
	24	+	#diffs[data-mr][data-diff] .spl { display: none; }
	25	+	#diffs[data-mr] .fnote td { padding-inline: 0; }
	26	+	#diffs[data-mr] :is(.cform, .cmt) { width: min(65ch, calc(100vw - 5rem)); max-width: calc(100vw - 5rem); overflow-wrap: anywhere; }
	27	+	body:has(#diffs[data-mr]) :is(input, textarea, select) { font-size: 16px; }
	28	+	body:has(#diffs[data-mr]) .f-btns { flex-wrap: wrap; }
	29	+	body:has(#diffs[data-mr]) .menu .menu-pop {
	30	+	position: fixed; inset: auto 0 0; width: auto; max-width: 100%;
	31	+	max-height: 75dvh; overflow-y: auto; border-radius: var(--r) var(--r) 0 0;
	32	+	padding-bottom: max(var(--s4), env(safe-area-inset-bottom));
	33	+	}
	34	+	body:has(#diffs[data-mr]) .mr-bar { position: static; }
	35	+	/* A wrapping toolbar has no reliable fixed sticky height. */
	36	+	body:has(#diffs[data-mr]) { --bar-h: 0px; }
	37	+	}
	38	+
	39	+	@media (pointer: coarse), (hover: none) {
	40	+	.mr-touch-range { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
	41	+	/* Real, disjoint cells: never expand invisible targets into other lines
	42	+	or into the neighbouring old/new gutter. */
	43	+	#diffs[data-mr] .dt { line-height: max(var(--lh-code), 40px); }
	44	+	#diffs[data-mr] .dt .ln { width: max(calc(var(--lnw) + .5ch), 40px); min-width: 40px; padding: 0; }
	45	+	#diffs[data-mr] .spl .c-ln { width: max(calc(var(--lnw) + .5ch), 40px); }
	46	+	#diffs[data-mr] .ln a { display: block; width: 100%; min-height: 40px; text-align: center; text-decoration: underline; }
	47	+	.mr-touch-range[hidden] { display: none; }
	48	+	#diffs[data-mr] .ln a[data-range-start] { outline: 2px solid var(--focus); background: var(--sel); }
	49	+	body:has(#diffs[data-mr]) :is(.cform .btn, .menu .btn, .mr-touch-range .btn, .c-act button) { min-height: 40px; height: auto; padding-block: var(--s2); }
	50	+	#diffs[data-mr] .cform { scroll-margin-block: calc(var(--hdr-h) + 12px); }
	51	+	.mr-footer [data-mr-tabs] a { display: inline-flex; align-items: center; min-height: 40px; }
	52	+	}
	53	+	}

@@ -0,0 +1,53 @@
	1	+	@layer components {
	2	+	.mr-touch-range { display: none; }
	3	+
	4	+	/* MR only: retain the shell's desktop layout and other pages' spacing. */
	5	+	@media (max-width: 720px) {
	6	+	body:has(#diffs[data-mr]) {
	7	+	--pad: 0px;
	8	+	--hdr-h: 97px;
	9	+	overflow-x: clip;
	10	+	}
	11	+	body:has(#diffs[data-mr]) .work { padding-inline: 0; margin-inline: 0; gap: var(--s3); }
	12	+	body:has(#diffs[data-mr]) main { min-width: 0; padding-inline: 0; }
	13	+	body:has(#diffs[data-mr]) :is(.card, .mr-card, .mr-desc, .dfile, .dscroll, .code, .rail section) {
	14	+	margin-inline: 0; border-inline: 0; border-radius: 0; min-width: 0; max-width: 100%;
	15	+	}
	16	+	body:has(#diffs[data-mr]) :is(.mr-h, .mr-desc.prose, .card-h, .mr-footer) { padding-inline: 4px; }
	17	+	body:has(#diffs[data-mr]) .mr-footer :is(th, td) { padding-inline: var(--s1); }
	18	+	body:has(#diffs[data-mr]) .mr-desc.prose > pre { margin-inline: -4px; padding-inline: 0; max-width: calc(100% + 8px); }
	19	+	#diffs[data-mr] .dfile > summary { padding-inline: 0; border-inline: 0; border-radius: 0; }
	20	+	#diffs[data-mr] :is(.dscroll, .code) { overflow-x: auto; overscroll-behavior-x: contain; padding-inline: 0; }
	21	+	#diffs[data-mr] .dt .ln { width: calc(var(--lnw) + .5ch); min-width: calc(var(--lnw) + .5ch); padding-inline: .25ch; }
	22	+	#diffs[data-mr] .dt .m { width: 1ch; }
	23	+	#diffs[data-mr][data-diff] .uni { display: table; }
	24	+	#diffs[data-mr][data-diff] .spl { display: none; }
	25	+	#diffs[data-mr] .fnote td { padding-inline: 0; }
	26	+	#diffs[data-mr] :is(.cform, .cmt) { width: min(65ch, calc(100vw - 5rem)); max-width: calc(100vw - 5rem); overflow-wrap: anywhere; }
	27	+	body:has(#diffs[data-mr]) :is(input, textarea, select) { font-size: 16px; }
	28	+	body:has(#diffs[data-mr]) .f-btns { flex-wrap: wrap; }
	29	+	body:has(#diffs[data-mr]) .menu .menu-pop {
	30	+	position: fixed; inset: auto 0 0; width: auto; max-width: 100%;
	31	+	max-height: 75dvh; overflow-y: auto; border-radius: var(--r) var(--r) 0 0;
	32	+	padding-bottom: max(var(--s4), env(safe-area-inset-bottom));
	33	+	}
	34	+	body:has(#diffs[data-mr]) .mr-bar { position: static; }
	35	+	/* A wrapping toolbar has no reliable fixed sticky height. */
	36	+	body:has(#diffs[data-mr]) { --bar-h: 0px; }
	37	+	}
	38	+
	39	+	@media (pointer: coarse), (hover: none) {
	40	+	.mr-touch-range { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
	41	+	/* Real, disjoint cells: never expand invisible targets into other lines
	42	+	or into the neighbouring old/new gutter. */
	43	+	#diffs[data-mr] .dt { line-height: max(var(--lh-code), 40px); }
	44	+	#diffs[data-mr] .dt .ln { width: max(calc(var(--lnw) + .5ch), 40px); min-width: 40px; padding: 0; }
	45	+	#diffs[data-mr] .spl .c-ln { width: max(calc(var(--lnw) + .5ch), 40px); }
	46	+	#diffs[data-mr] .ln a { display: block; width: 100%; min-height: 40px; text-align: center; text-decoration: underline; }
	47	+	.mr-touch-range[hidden] { display: none; }
	48	+	#diffs[data-mr] .ln a[data-range-start] { outline: 2px solid var(--focus); background: var(--sel); }
	49	+	body:has(#diffs[data-mr]) :is(.cform .btn, .menu .btn, .mr-touch-range .btn, .c-act button) { min-height: 40px; height: auto; padding-block: var(--s2); }
	50	+	#diffs[data-mr] .cform { scroll-margin-block: calc(var(--hdr-h) + 12px); }
	51	+	.mr-footer [data-mr-tabs] a { display: inline-flex; align-items: center; min-height: 40px; }
	52	+	}
	53	+	}

M internal/adapters/web/static/js/ermite.js +36 -2


@@ -183,6 +183,7 @@
183	183		layout(mode) {
184	184		const el = $('[data-diff]');
185	185		if (!el) return;
	186	+	if (el.hasAttribute('data-mr') && el.dataset.mobile === 'true') return;
186	187		el.dataset.diff = mode;
187	188		try { sessionStorage.setItem('diff', mode); } catch { /* storage refused: the layout holds for this page */ }
188	189		for (const d of $$('[data-file]')) if ($('.dt', d)) d.open = true;

@@ -730,13 +731,21 @@
730	731		mark();
731	732		}, { rootMargin: '0px 0px -67% 0px' });
732	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	+	};
733	742		// A window of files of a merge request came in (mr.js): its files replace
734	743		// placeholders, which the observer and the list knew by element.
735	744		ermite.watchFile = (f, old) => {
736	745		if (old) { io.unobserve(old); inBand.delete(old); }
737	746		files = $$('.dfile');
738	747		for (const x of [...inBand]) if (!x.isConnected) inBand.delete(x);
739		-	if (current && !current.isConnected) current = document.getElementById(current.id);
	748	+	if (current && !current.isConnected) current = null;
740	749		io.observe(f);
741	750		};
742	751		}

@@ -844,6 +853,10 @@
844	853		// reloads the page. A stream the server refuses on reconnection (the
845	854		// repository is gone, the session ended) makes the page reload.
846	855		window.ermiteLive = (() => {
	856	+	let connection = null;
	857	+	window.addEventListener?.('htmx:sse:after:connection', (event) => {
	858	+	if (event.target.matches?.('.hint-live')) connection = event.detail.connection;
	859	+	});
847	860		let reloading = false;
848	861		let stopped = false;
849	862		// A stream that drops and comes back within LOST_AFTER (a proxy or the

@@ -898,6 +911,24 @@ window.ermiteLive = (() => {
898	911		// fitIn lays out the one-line chip lists of a fragment now in the page.
899	912		const fitIn = (el) => { for (const ul of el.querySelectorAll('[data-fit]')) window.ermiteFit?.fit(ul); };
900	913		return {
	914	+	// teardown runs remove, which deletes the stream element. hx-sse has no
	915	+	// public close API: its cleanup aborts the fetch, then calls
	916	+	// connection.reader.cancel() without catching the AbortError it rejects
	917	+	// with. Wrapping that one reader handles exactly this rejection, with no
	918	+	// timing window and no global filter.
	919	+	async teardown(remove) {
	920	+	const reader = connection?.reader;
	921	+	if (reader) connection.reader = { cancel: () => reader.cancel().catch(() => {}) };
	922	+	return remove();
	923	+	},
	924	+	resumeStream(element) {
	925	+	// The public connection includes id-only messages as well as named ones.
	926	+	const id = connection?.lastEventId;
	927	+	if (!id) return;
	928	+	const url = new URL(element.getAttribute('hx-sse:connect'), location.href);
	929	+	url.searchParams.set('after', id);
	930	+	element.setAttribute('hx-sse:connect', url.pathname + url.search);
	931	+	},
901	932		// lost is htmx:sse:close and htmx:sse:error: "live updates paused" shows
902	933		// only if the stream is still down LOST_AFTER later.
903	934		lost() {

@@ -956,7 +987,10 @@ window.ermiteLive = (() => {
956	987		reload() {
957	988		if (reloading) return;
958	989		reloading = true;
959		-	setTimeout(() => location.reload(), 300);
	990	+	setTimeout(() => {
	991	+	reloading = false;
	992	+	if (window.ermiteLive.canReload?.() !== false) location.reload();
	993	+	}, 300);
960	994		},
961	995		// error handles htmx:sse:error (detail.status is the status of a refused
962	996		// reconnection). hx-sse retries for ever; a 404 or a 401 will not change by

     layout(mode) {
       const el = $('[data-diff]');
       if (!el) return;
+      if (el.hasAttribute('data-mr') && el.dataset.mobile === 'true') return;
       el.dataset.diff = mode;
       try { sessionStorage.setItem('diff', mode); } catch { /* storage refused: the layout holds for this page */ }
       for (const d of $$('[data-file]')) if ($('.dt', d)) d.open = true;
       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);
     };
   }
 // reloads the page. A stream the server refuses on reconnection (the
 // repository is gone, the session ended) makes the page reload.
 window.ermiteLive = (() => {
+  let connection = null;
+  window.addEventListener?.('htmx:sse:after:connection', (event) => {
+    if (event.target.matches?.('.hint-live')) connection = event.detail.connection;
+  });
   let reloading = false;
   let stopped = false;
   // A stream that drops and comes back within LOST_AFTER (a proxy or the
   // fitIn lays out the one-line chip lists of a fragment now in the page.
   const fitIn = (el) => { for (const ul of el.querySelectorAll('[data-fit]')) window.ermiteFit?.fit(ul); };
   return {
+    // teardown runs remove, which deletes the stream element. hx-sse has no
+    // public close API: its cleanup aborts the fetch, then calls
+    // connection.reader.cancel() without catching the AbortError it rejects
+    // with. Wrapping that one reader handles exactly this rejection, with no
+    // timing window and no global filter.
+    async teardown(remove) {
+      const reader = connection?.reader;
+      if (reader) connection.reader = { cancel: () => reader.cancel().catch(() => {}) };
+      return remove();
+    },
+    resumeStream(element) {
+      // The public connection includes id-only messages as well as named ones.
+      const id = connection?.lastEventId;
+      if (!id) return;
+      const url = new URL(element.getAttribute('hx-sse:connect'), location.href);
+      url.searchParams.set('after', id);
+      element.setAttribute('hx-sse:connect', url.pathname + url.search);
+    },
     // lost is htmx:sse:close and htmx:sse:error: "live updates paused" shows
     // only if the stream is still down LOST_AFTER later.
     lost() {
     reload() {
       if (reloading) return;
       reloading = true;
-      setTimeout(() => location.reload(), 300);
+      setTimeout(() => {
+        reloading = false;
+        if (window.ermiteLive.canReload?.() !== false) location.reload();
+      }, 300);
     },
     // error handles htmx:sse:error (detail.status is the status of a refused
     // reconnection). hx-sse retries for ever; a 404 or a 401 will not change by

M internal/adapters/web/static/js/mr.js +408 -2


@@ -27,6 +27,20 @@ window.ermiteMR = (() => {
27	27		b.searchParams.set('on', `${y[1]}:${nums[0]}-${nums[1]}:${y[3]}`);
28	28		return b.href;
29	29		},
	30	+	// Range mode is explicit: ordinary taps still open single-line forms.
	31	+	touchRange(previous, current, base) {
	32	+	if (!previous) return { start: current, url: null };
	33	+	const url = core.rangeURL(previous, current, base);
	34	+	if (url) return { start: null, url };
	35	+	if (previous === current) return { start: null, url: current };
	36	+	return { start: current, url: null }; // another file/side starts afresh
	37	+	},
	38	+	mobileURL(href, view, narrow) {
	39	+	if (!narrow \|\| view !== 'split') return null;
	40	+	const url = new URL(href);
	41	+	url.searchParams.set('view', 'unified');
	42	+	return url.href;
	43	+	},
30	44		quote(button) {
31	45		const thread = button.closest('.cmt').closest('[data-thread]');
32	46		const details = thread?.querySelector(':scope > details[data-reply]');

@@ -49,6 +63,13 @@ window.ermiteMR = (() => {
49	63		if (/^[1-9]$/.test(key) && Number(key) <= modes) return { mode: Number(key) - 1 };
50	64		return null;
51	65		},
	66	+	tabIndex(key, index, count) {
	67	+	if (key === 'Home') return 0;
	68	+	if (key === 'End') return count - 1;
	69	+	if (key === 'ArrowRight') return (index + 1) % count;
	70	+	if (key === 'ArrowLeft') return (index + count - 1) % count;
	71	+	return null;
	72	+	},
52	73		// step moves an index within [0, n).
53	74		step(i, d, n) {
54	75		if (n === 0) return -1;

@@ -60,13 +81,16 @@ window.ermiteMR = (() => {
60	81		const $ = (sel, root = document) => root.querySelector(sel);
61	82		const $$ = (sel, root = document) => [...root.querySelectorAll(sel)];
62	83		const loading = new Map(); // src -> promise of the swap
	84	+	let refreshTouchComments = () => {};
63	85		let moved = false;
64	86		let lazyIO = null; // the observer of the placeholders (watch)
	87	+	let diffGeneration = 0;
65	88		let revealGen = 0; // the last reveal wins the scroll
66	89
67	90		// load fetches the window of a placeholder and swaps its files in. The
68	91		// promise resolves once they are in the page (or the page said to reload).
69	92		function load(ph) {
	93	+	const generation = diffGeneration;
70	94		const src = ph?.dataset.src;
71	95		if (!src \|\| moved) return Promise.resolve();
72	96		if (loading.has(src)) return loading.get(src);

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

@@ -108,6 +134,7 @@ window.ermiteMR = (() => {
108	134		window.htmx?.process(f);
109	135		window.ermite?.watchFile?.(f, old);
110	136		}
	137	+	refreshTouchComments();
111	138		}
112	139
113	140		// stale: the diff changed under the page. The placeholders say so; no file

@@ -130,7 +157,7 @@ window.ermiteMR = (() => {
130	157		// A page with both layouts says which shows in data-diff; a large diff
131	158		// rendered in one layout only says it in data-view.
132	159		const diffs = $('#diffs')?.dataset;
133		-	if (/^c\d+$/.test(id) && (diffs?.diff \|\| diffs?.view) === 'split') {
	160	+	if (/^c\d+$/.test(id) && !window.matchMedia?.('(max-width: 720px)').matches && (diffs?.diff \|\| diffs?.view) === 'split') {
134	161		const split = document.getElementById(id + '-s');
135	162		if (split) return split;
136	163		}

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

@@ -285,8 +313,386 @@ window.ermiteMR = (() => {
285	313		reveal(id);
286	314		}
287	315
	316	+	// Enhance the ordinary anchor navigation only when scripts are available.
	317	+	let disposePanels = () => {};
	318	+	// The tabs are disclosure buttons (aria-expanded + aria-controls), not a
	319	+	// tablist: a tablist always has a selected tab, and here every panel can be
	320	+	// folded. State: the index of the open panel, or -1 for none.
	321	+	function panels(initial = -1) {
	322	+	disposePanels();
	323	+	const footer = $('.mr-footer'), nav = $('[data-mr-tabs]');
	324	+	if (!footer \|\| !nav) return;
	325	+	const tabs = $$('a', nav), panels = $$('[data-mr-panel]', footer);
	326	+	const ids = new Set(['#mr-commits', '#mr-checks', '#mr-checks-panel']);
	327	+	let current = -1;
	328	+	// show applies the state; fromUser also keeps the URL fragment in step.
	329	+	function show(index, fromUser = false) {
	330	+	current = index;
	331	+	tabs.forEach((tab, i) => {
	332	+	tab.setAttribute('aria-controls', panels[i].id);
	333	+	tab.setAttribute('aria-expanded', String(i === index));
	334	+	panels[i].hidden = i !== index;
	335	+	});
	336	+	if (!fromUser) return;
	337	+	if (index >= 0) {
	338	+	if (location.hash !== '#' + panels[index].id) history.replaceState(null, '', '#' + panels[index].id);
	339	+	} else if (ids.has(location.hash)) {
	340	+	history.replaceState(null, '', location.pathname + location.search);
	341	+	}
	342	+	}
	343	+	const toggle = (i) => show(i === current ? -1 : i, true);
	344	+	tabs.forEach((tab, i) => {
	345	+	tab.addEventListener('click', (e) => { e.preventDefault(); toggle(i); });
	346	+	tab.addEventListener('keydown', (e) => {
	347	+	const next = core.tabIndex(e.key, i, tabs.length);
	348	+	if (next === null) return;
	349	+	e.preventDefault(); tabs[next].focus();
	350	+	});
	351	+	});
	352	+	// hash opens the panel of the URL fragment. Its target was hidden when the
	353	+	// browser scrolled, so the panel is brought in; never on a refresh, which
	354	+	// keeps the scroll.
	355	+	function hash() {
	356	+	const h = location.hash;
	357	+	const index = h === '#mr-checks' \|\| h === '#mr-checks-panel' ? 1 : h === '#mr-commits' ? 0 : -1;
	358	+	if (index >= 0) { show(index); panels[index].scrollIntoView?.({ block: 'nearest' }); }
	359	+	}
	360	+	// The checks badge always opens Checks; it never folds it.
	361	+	const checksClick = (e) => {
	362	+	if (e.target.closest?.('#mr-ck')) show(1);
	363	+	};
	364	+	document.addEventListener('click', checksClick);
	365	+	let observer;
	366	+	const summary = $('#mr-ck');
	367	+	if (summary) {
	368	+	// The live stream replaces #mr-ck as a whole: watch only the children of
	369	+	// its parent, and write the label only when it changes. hx-live rewrites
	370	+	// other text in the same bar on every mutation of the document; a write
	371	+	// here on each of them would wake hx-live again, a loop that never yields.
	372	+	const sync = () => {
	373	+	const label = $('[data-checks-label]', nav);
	374	+	const text = $('#mr-ck')?.title \|\| $('#mr-ck')?.textContent.trim() \|\| 'no checks';
	375	+	if (label && label.textContent !== text) label.textContent = text;
	376	+	};
	377	+	observer = new MutationObserver(sync);
	378	+	observer.observe(summary.parentElement, { childList: true });
	379	+	sync();
	380	+	}
	381	+	show(initial);
	382	+	footer.setAttribute('data-panels', '');
	383	+	if (initial < 0) hash();
	384	+	addEventListener('hashchange', hash);
	385	+	disposePanels = () => {
	386	+	document.removeEventListener?.('click', checksClick);
	387	+	window.removeEventListener?.('hashchange', hash);
	388	+	observer?.disconnect?.();
	389	+	};
	390	+	}
	391	+
	392	+	let disposeTouch = () => {};
	393	+	function touchComments(scroll = true) {
	394	+	disposeTouch();
	395	+	const diffs = $('#diffs');
	396	+	const bar = document.createElement('div');
	397	+	bar.className = 'mr-touch-range';
	398	+	const button = document.createElement('button');
	399	+	button.type = 'button';
	400	+	button.className = 'btn';
	401	+	button.textContent = 'Select line range';
	402	+	button.setAttribute('aria-pressed', 'false');
	403	+	const status = document.createElement('span');
	404	+	status.setAttribute('role', 'status');
	405	+	bar.append(button, status);
	406	+	diffs.prepend(bar);
	407	+	refreshTouchComments = () => { bar.hidden = !$('.ln a[href*="on="]', diffs); };
	408	+	refreshTouchComments();
	409	+	const touch = window.matchMedia?.('(pointer: coarse), (hover: none)');
	410	+	let enabled = false, start = null, marker = null;
	411	+	const clear = () => { marker?.removeAttribute('data-range-start'); marker = null; start = null; };
	412	+	button.addEventListener('click', () => {
	413	+	enabled = !enabled;
	414	+	clear();
	415	+	button.setAttribute('aria-pressed', String(enabled));
	416	+	status.textContent = enabled ? 'Tap the first line number, then the last. Tap the same line for one line.' : '';
	417	+	});
	418	+	diffs.addEventListener('click', (e) => {
	419	+	const link = e.target.closest?.('.ln a[href*="on="]');
	420	+	if (!touch?.matches \|\| !enabled \|\| !link \|\| e.shiftKey \|\| e.ctrlKey \|\| e.metaKey \|\| e.altKey) return;
	421	+	e.preventDefault();
	422	+	e.stopPropagation(); // do not alter the desktop shift-click anchor
	423	+	const next = core.touchRange(start, link.href, location.href);
	424	+	clear();
	425	+	if (next.url) { location.assign(next.url); return; }
	426	+	start = next.start;
	427	+	marker = link;
	428	+	marker.setAttribute('data-range-start', '');
	429	+	status.textContent = `Range starts at line ${link.textContent.trim()}. Tap the last line number (same file and side).`;
	430	+	});
	431	+	const changed = () => {
	432	+	if (touch.matches) return;
	433	+	enabled = false;
	434	+	clear();
	435	+	button.setAttribute('aria-pressed', 'false');
	436	+	status.textContent = '';
	437	+	};
	438	+	touch?.addEventListener('change', changed);
	439	+	disposeTouch = () => { touch?.removeEventListener?.('change', changed); bar.remove?.(); };
	440	+	// The server opens the line form. Scroll after layout without stealing
	441	+	// focus or forcing a mobile keyboard to appear.
	442	+	if (scroll && new URL(location.href).searchParams.has('on')) requestAnimationFrame(() => {
	443	+	const form = $$('.fnote .cform', diffs).find((f) => f.getClientRects().length);
	444	+	form?.scrollIntoView({ block: 'center' });
	445	+	});
	446	+	}
	447	+
	448	+	// A refresh scheduler has one request in flight, a trailing debounce, and
	449	+	// a dirty bit for pushes received during that request. Drafts are checked
	450	+	// again after the fetch: typing while the network is slow is safe too.
	451	+	function refresher({ blocked, fetchPage, apply, notice, failed, delay = 300 }) {
	452	+	let timer, busy = false, pending = false;
	453	+	const schedule = () => { clearTimeout(timer); timer = setTimeout(run, delay); };
	454	+	async function run() {
	455	+	if (busy \|\| !pending) return;
	456	+	if (blocked()) { notice(true); return; }
	457	+	busy = true;
	458	+	pending = false;
	459	+	try {
	460	+	const page = await fetchPage();
	461	+	if (blocked()) { pending = true; notice(true); return; }
	462	+	if (await apply(page) === false) { pending = true; notice(true); }
	463	+	else notice(false);
	464	+	} catch { if (blocked()) { pending = true; notice(true); } else failed(); }
	465	+	finally {
	466	+	busy = false;
	467	+	if (pending && !blocked()) schedule();
	468	+	}
	469	+	}
	470	+	return {
	471	+	request() { pending = true; schedule(); },
	472	+	resume() { if (pending) schedule(); },
	473	+	pending() { return pending \|\| busy; },
	474	+	};
	475	+	}
	476	+
	477	+	function hasDraft() {
	478	+	// Only form controls, never diff rows. Inline edits live in .cmt forms; the
	479	+	// merge form (d-acts) holds a chosen mode and the delete-branch box.
	480	+	return $$(':is(form.cform, .cmt form, form.d-acts) :is(textarea, input, select)').some((t) => {
	481	+	if (['hidden', 'submit', 'button', 'reset', 'image'].includes(t.type)) return false;
	482	+	if (document.activeElement === t) return true;
	483	+	if (t.type === 'radio' \|\| t.type === 'checkbox') return t.checked !== t.defaultChecked;
	484	+	if (t.tagName === 'SELECT') return [...t.options].some((o) => o.selected !== o.defaultSelected);
	485	+	return t.value !== t.defaultValue;
	486	+	}) \|\|
	487	+	!!document.activeElement?.closest?.('.cform');
	488	+	}
	489	+
	490	+	// Path + side + line is stable when files are inserted before this one;
	491	+	// fN is only a positional anchor. Hidden unified/split rows are ignored.
	492	+	function scrollAnchor() {
	493	+	const top = Math.max(0, $('.hdr')?.getBoundingClientRect().bottom \|\| 0,
	494	+	$('.mr-bar')?.getBoundingClientRect().bottom \|\| 0);
	495	+	const diffs = $('#diffs');
	496	+	const bounds = diffs.getBoundingClientRect();
	497	+	const x = Math.max(1, Math.min(innerWidth - 1, bounds.left + Math.min(100, bounds.width / 2)));
	498	+	// A bounded number of probes, independent of the number of diff lines.
	499	+	let y = top + 2, fallback;
	500	+	for (let probe = 0; probe < 6 && y < innerHeight; probe++) {
	501	+	const hit = document.elementFromPoint(x, y);
	502	+	const file = hit?.closest('details.dfile');
	503	+	if (!file \|\| !diffs.contains(file)) { y += 32; continue; }
	504	+	const row = hit.closest('tr');
	505	+	const link = row && $('.ln a[href*="on="]', row);
	506	+	const header = $(':scope > summary', file);
	507	+	const headerOffset = file.getBoundingClientRect().top;
	508	+	fallback = { file: file.dataset.file, offset: headerOffset, headerOffset, y: scrollY };
	509	+	if (link) return { ...fallback,
	510	+	on: new URL(link.href, location.href).searchParams.get('on'),
	511	+	suffix: link.getAttribute('href').split('on=')[1].split('#')[0],
	512	+	offset: row.getBoundingClientRect().top };
	513	+	if (file.open && header) y = Math.max(y + 24, header.getBoundingClientRect().bottom + 2);
	514	+	else return fallback;
	515	+	}
	516	+	if (fallback) return fallback;
	517	+	return { y: scrollY };
	518	+	}
	519	+
	520	+	function restoreAnchor(anchor) {
	521	+	const file = $$('#diffs details.dfile').find((f) => f.dataset.file === anchor.file);
	522	+	let el, offset = anchor.offset;
	523	+	if (file && anchor.on) {
	524	+	const suffix = anchor.suffix && 'on=' + anchor.suffix + '#' + file.id;
	525	+	const layout = $('#diffs').dataset.diff \|\| $('#diffs').dataset.view;
	526	+	const table = $(layout === 'split' && !window.matchMedia?.('(max-width: 720px)').matches ? '.dt.spl' : '.dt.uni', file) \|\| file;
	527	+	if (suffix) el = $('a[href$="' + CSS.escape(suffix) + '"]', table)?.closest('tr');
	528	+	}
	529	+	if (!el && file) { el = file; offset = anchor.headerOffset ?? anchor.offset; }
	530	+	if (el) window.scrollBy({ top: el.getBoundingClientRect().top - offset, behavior: 'instant' });
	531	+	else window.scrollTo({ top: Math.max(0, Math.min(anchor.y, document.documentElement.scrollHeight - innerHeight)), behavior: 'instant' });
	532	+	}
	533	+
	534	+	async function fetchPage(url = location.href, mobileRetry = false) {
	535	+	const res = await fetch(url, { credentials: 'same-origin', headers: { Accept: 'text/html' } });
	536	+	if (!res.ok \|\| res.redirected) throw new Error('MR refresh refused');
	537	+	const page = new DOMParser().parseFromString(await res.text(), 'text/html');
	538	+	if (!$('#diffs[data-mr]', page) \|\| !$('.mr-bar', page) \|\| !$('.hint-live', page)) throw new Error('not an MR page');
	539	+	const unified = core.mobileURL(url, $('#diffs', page).dataset.view,
	540	+	!!window.matchMedia?.('(max-width: 720px)').matches);
	541	+	if (unified && !mobileRetry) return fetchPage(unified, true);
	542	+	return page;
	543	+	}
	544	+
	545	+	// htmx 4's public delete swap invokes recursive before:cleanup (including
	546	+	// hx-sse's abort/reader.cancel and hx-live's binding disposal). Only an empty
	547	+	// string is parsed; the fetched nodes themselves are adopted, never serialized.
	548	+	async function replaceRegion(old, fresh) {
	549	+	if (!old \|\| !fresh) throw new Error('missing MR refresh region');
	550	+	for (const el of $$('[autofocus]', fresh)) el.removeAttribute('autofocus');
	551	+	const marker = document.createComment('MR region');
	552	+	old.before(marker);
	553	+	const remove = () => window.htmx.swap({ sourceElement: old, target: old, text: '',
	554	+	swap: 'delete settle:0 transition:false', push: false, replace: false });
	555	+	if (old.matches('.hint-live')) {
	556	+	window.ermiteLive.resumeStream(fresh);
	557	+	await window.ermiteLive.teardown(remove);
	558	+	} else await remove();
	559	+	const node = document.adoptNode(fresh);
	560	+	marker.replaceWith(node);
	561	+	window.htmx.process(node);
	562	+	}
	563	+
	564	+	async function refreshPage(page) {
	565	+	const regions = ['.mr-footer', '#mr-range', '.mr-bar', '#mr-diff-notices', '#diffs', '#mr-comments', '.rail', '.hint-live'];
	566	+	for (const sel of regions) if (!$(sel) \|\| !$(sel, page)) throw new Error('missing MR region');
	567	+	let anchor = scrollAnchor();
	568	+	const nextDiffs = $('#diffs', page);
	569	+	const mobile = !!window.matchMedia?.('(max-width: 720px)').matches;
	570	+	const chosen = mobile ? 'unified' : ($('#diffs').dataset.diff \|\| $('#diffs').dataset.view);
	571	+	if (nextDiffs.dataset.diff) nextDiffs.dataset.diff = chosen;
	572	+	// A one-layout response must use its own contract, never the old page's.
	573	+	if (mobile && nextDiffs.dataset.view === 'split') throw new Error('mobile needs unified');
	574	+	const anchorFile = $$('#diffs details.dfile', page).find((f) => f.dataset.file === anchor.file);
	575	+	const placeholder = anchorFile && $('.dlazy[data-src]', anchorFile);
	576	+	if (placeholder) {
	577	+	const d = nextDiffs.dataset;
	578	+	const url = placeholder.dataset.src + '&view=' + encodeURIComponent(d.diff \|\| d.view \|\| 'unified') + '&layouts=' + (d.diff ? 'both' : 'one');
	579	+	const res = await fetch(url, { credentials: 'same-origin', headers: { Accept: 'text/html' } });
	580	+	if (!res.ok \|\| res.redirected) throw new Error('anchor window changed');
	581	+	let windowPage = new DOMParser().parseFromString(await res.text(), 'text/html');
	582	+	if (hasDraft()) return false;
	583	+	anchor = scrollAnchor();
	584	+	const windowFiles = $$('details.dfile', windowPage);
	585	+	// If the reader moved outside this window, discard it; lazy loading will
	586	+	// fetch the new position rather than committing an unrelated window.
	587	+	if (windowFiles.some((f) => f.dataset.file === anchor.file)) {
	588	+	const byID = new Map($$('#diffs details.dfile', page).map((f) => [f.id, f]));
	589	+	for (const f of windowFiles) byID.get(f.id)?.replaceWith(f);
	590	+	}
	591	+	windowPage = null;
	592	+	}
	593	+	if (hasDraft()) return false;
	594	+	const files = new Map($$('#diffs details.dfile').map((f) => [f.dataset.file, f.open]));
	595	+	const folded = $('.r-files')?.hasAttribute('data-folded');
	596	+	const railY = $('.rail')?.scrollTop, filesY = $('.r-files .files')?.scrollTop;
	597	+	const openPanel = $$('[data-mr-tabs] a').findIndex((t) => t.getAttribute('aria-expanded') === 'true');
	598	+	const active = document.activeElement;
	599	+	const focus = active && { file: active.closest?.('.files a')?.getAttribute('title'), region: regions.find((sel) => $(sel)?.contains(active)), menu: active.closest?.('details.menu')?.id, id: active.id, tag: active.tagName, name: active.getAttribute('name'), href: active.getAttribute('href') };
	600	+	for (const f of $$('#diffs details.dfile', page)) if (files.has(f.dataset.file)) f.open = files.get(f.dataset.file);
	601	+	++diffGeneration; ++revealGen; moved = false; loading.clear(); lazyIO?.disconnect();
	602	+	$('#diffs', page).dataset.mrStarted = 'true';
	603	+	// The fresh footer comes in with the panels as they are, so that an open
	604	+	// panel does not fold and open again while the other regions swap.
	605	+	const freshFooter = $('.mr-footer', page);
	606	+	if (freshFooter) {
	607	+	freshFooter.setAttribute('data-panels', '');
	608	+	$$('[data-mr-panel]', freshFooter).forEach((p, i) => { p.hidden = i !== openPanel; });
	609	+	}
	610	+	for (const sel of regions) {
	611	+	const fresh = $(sel, page);
	612	+	await replaceRegion($(sel), fresh);
	613	+	}
	614	+	for (const key of ['ref', 'sha', 'paths', 'blob']) {
	615	+	if (page.body.dataset[key] !== undefined) document.body.dataset[key] = page.body.dataset[key];
	616	+	}
	617	+	const oldSHA = $('.hdr .ref .sha'), newSHA = $('.hdr .ref .sha', page);
	618	+	if (oldSHA && newSHA) oldSHA.textContent = newSHA.textContent;
	619	+	page = null;
	620	+	panels(openPanel);
	621	+	foldFiles(!!folded);
	622	+	if ($('.rail')) $('.rail').scrollTop = railY;
	623	+	if ($('.r-files .files')) $('.r-files .files').scrollTop = filesY;
	624	+	touchComments(false);
	625	+	$('#diffs').dataset.mobile = String(!!window.matchMedia?.('(max-width: 720px)').matches);
	626	+	window.ermite?.refreshFiles?.();
	627	+	watch();
	628	+	if (focus && active !== document.body) {
	629	+	const region = focus.region ? $(focus.region) : document;
	630	+	const menu = focus.menu && document.getElementById(focus.menu);
	631	+	if (menu) menu.open = true;
	632	+	const el = focus.file ? $('a[title="' + CSS.escape(focus.file) + '"]', region) :
	633	+	focus.id ? document.getElementById(focus.id) :
	634	+	focus.href ? $('a[href="' + CSS.escape(focus.href) + '"]', region) :
	635	+	focus.name ? $('[name="' + CSS.escape(focus.name) + '"]', region) :
	636	+	menu?.querySelector(':scope > summary');
	637	+	el?.focus({ preventScroll: true });
	638	+	}
	639	+	restoreAnchor(anchor);
	640	+	}
	641	+
	642	+	function refreshNotice(deferred) {
	643	+	const slot = $('#mr-refresh-status');
	644	+	if (!slot) return;
	645	+	slot.replaceChildren();
	646	+	if (!deferred) {
	647	+	const text = document.createElement('span'); text.className = 'sr'; text.textContent = 'branch updated'; slot.append(text);
	648	+	return;
	649	+	}
	650	+	slot.append('branch updated — refreshing after your comment. ');
	651	+
	652	+	}
	653	+	const headRefresh = refresher({ blocked: hasDraft, fetchPage, apply: refreshPage, notice: refreshNotice,
	654	+	failed: () => window.ermiteLive?.reload() });
	655	+	function headChanged() { if ($('#diffs[data-mr]')) headRefresh.request(); }
	656	+
288	657		function start() {
289	658		if (!$('#diffs[data-mr]')) return;
	659	+	if (window.ermiteLive) window.ermiteLive.canReload = () => {
	660	+	if (!hasDraft()) return true;
	661	+	headRefresh.request(); refreshNotice(true); return false;
	662	+	};
	663	+	// Global delegation is installed once; replacement regions have their own
	664	+	// disposable panel/touch hooks below.
	665	+	if ($('#diffs').dataset.mrStarted) return;
	666	+	$('#diffs').dataset.mrStarted = 'true';
	667	+	for (const type of ['input', 'focusout', 'reset', 'submit']) document.addEventListener?.(type, () => headRefresh.resume());
	668	+	document.addEventListener?.('click', (e) => {
	669	+	const cancel = e.target.closest?.('.cform .f-btns a');
	670	+	if (!cancel \|\| !headRefresh.pending() \|\| e.ctrlKey \|\| e.metaKey \|\| e.shiftKey \|\| e.altKey) return;
	671	+	e.preventDefault();
	672	+	const form = cancel.closest('.cform');
	673	+	form.reset();
	674	+	if (form.contains(document.activeElement)) document.activeElement.blur();
	675	+	headRefresh.resume();
	676	+	});
	677	+	panels();
	678	+	// Large diffs may contain only the split table. Ask the existing server
	679	+	// route for unified rather than writing the saved session preference.
	680	+	const narrow = window.matchMedia?.('(max-width: 720px)');
	681	+	const unify = () => {
	682	+	$('#diffs').dataset.mobile = String(!!narrow?.matches);
	683	+	const url = core.mobileURL(location.href, $('#diffs')?.dataset.view, narrow?.matches);
	684	+	if (url) { location.replace(url); return true; }
	685	+	return false;
	686	+	};
	687	+	if (unify()) return;
	688	+	narrow?.addEventListener('change', unify);
	689	+	addEventListener('click', (e) => {
	690	+	if (narrow?.matches && e.target.closest?.('.vbtn[data-view="split"]')) {
	691	+	e.preventDefault();
	692	+	e.stopImmediatePropagation();
	693	+	}
	694	+	}, true);
	695	+	touchComments();
290	696		let folded = false;
291	697		try { folded = localStorage.getItem('mr-files-folded') === '1'; } catch { /* no storage: open */ }
292	698		if (folded) foldFiles(true);

@@ -316,7 +722,7 @@ window.ermiteMR = (() => {
316	722		});
317	723		}
318	724
319		-	return { core, start, load, reveal, openMerge, menuKey, markRead, focusFiles, stepFiles, leaveFiles, foldFiles, openFile };
	725	+	return { core, refresher, hasDraft, fetchPage, scrollAnchor, restoreAnchor, headChanged, panels, start, load, reveal, openMerge, menuKey, markRead, focusFiles, stepFiles, leaveFiles, foldFiles, openFile };
320	726		})();
321	727
322	728		if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', () => window.ermiteMR.start());


@@ -27,6 +27,20 @@ window.ermiteMR = (() => {
27		b.searchParams.set('on', `${y[1]}:${nums[0]}-${nums[1]}:${y[3]}`);	27		b.searchParams.set('on', `${y[1]}:${nums[0]}-${nums[1]}:${y[3]}`);
28		return b.href;	28		return b.href;
29		},	29		},
			30	+	// Range mode is explicit: ordinary taps still open single-line forms.
			31	+	touchRange(previous, current, base) {
			32	+	if (!previous) return { start: current, url: null };
			33	+	const url = core.rangeURL(previous, current, base);
			34	+	if (url) return { start: null, url };
			35	+	if (previous === current) return { start: null, url: current };
			36	+	return { start: current, url: null }; // another file/side starts afresh
			37	+	},
			38	+	mobileURL(href, view, narrow) {
			39	+	if (!narrow \|\| view !== 'split') return null;
			40	+	const url = new URL(href);
			41	+	url.searchParams.set('view', 'unified');
			42	+	return url.href;
			43	+	},
30		quote(button) {	44		quote(button) {
31		const thread = button.closest('.cmt').closest('[data-thread]');	45		const thread = button.closest('.cmt').closest('[data-thread]');
32		const details = thread?.querySelector(':scope > details[data-reply]');	46		const details = thread?.querySelector(':scope > details[data-reply]');

@@ -49,6 +63,13 @@ window.ermiteMR = (() => {
49		if (/^[1-9]$/.test(key) && Number(key) <= modes) return { mode: Number(key) - 1 };	63		if (/^[1-9]$/.test(key) && Number(key) <= modes) return { mode: Number(key) - 1 };
50		return null;	64		return null;
51		},	65		},
			66	+	tabIndex(key, index, count) {
			67	+	if (key === 'Home') return 0;
			68	+	if (key === 'End') return count - 1;
			69	+	if (key === 'ArrowRight') return (index + 1) % count;
			70	+	if (key === 'ArrowLeft') return (index + count - 1) % count;
			71	+	return null;
			72	+	},
52		// step moves an index within [0, n).	73		// step moves an index within [0, n).
53		step(i, d, n) {	74		step(i, d, n) {
54		if (n === 0) return -1;	75		if (n === 0) return -1;

@@ -60,13 +81,16 @@ window.ermiteMR = (() => {
60		const $ = (sel, root = document) => root.querySelector(sel);	81		const $ = (sel, root = document) => root.querySelector(sel);
61		const $$ = (sel, root = document) => [...root.querySelectorAll(sel)];	82		const $$ = (sel, root = document) => [...root.querySelectorAll(sel)];
62		const loading = new Map(); // src -> promise of the swap	83		const loading = new Map(); // src -> promise of the swap
			84	+	let refreshTouchComments = () => {};
63		let moved = false;	85		let moved = false;
64		let lazyIO = null; // the observer of the placeholders (watch)	86		let lazyIO = null; // the observer of the placeholders (watch)
			87	+	let diffGeneration = 0;
65		let revealGen = 0; // the last reveal wins the scroll	88		let revealGen = 0; // the last reveal wins the scroll
66			89
67		// 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
68		// 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).
69		function load(ph) {	92		function load(ph) {
			93	+	const generation = diffGeneration;
70		const src = ph?.dataset.src;	94		const src = ph?.dataset.src;
71		if (!src \|\| moved) return Promise.resolve();	95		if (!src \|\| moved) return Promise.resolve();
72		if (loading.has(src)) return loading.get(src);	96		if (loading.has(src)) return loading.get(src);

@@ -80,12 +104,14 @@ window.ermiteMR = (() => {
80		const p = fetch(url, { headers: { Accept: 'text/html' }, credentials: 'same-origin' })	104		const p = fetch(url, { headers: { Accept: 'text/html' }, credentials: 'same-origin' })
81		.then(async (res) => {	105		.then(async (res) => {
82		const html = await res.text();	106		const html = await res.text();
			107	+	if (generation !== diffGeneration) return;
83		if (res.status === 409) return stale(html);	108		if (res.status === 409) return stale(html);
84		if (!res.ok) throw new Error('loading files: ' + res.status);	109		if (!res.ok) throw new Error('loading files: ' + res.status);
85		// 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.
86		if (!moved) swap(html);	111		if (!moved) swap(html);
87		})	112		})
88		.catch((err) => {	113		.catch((err) => {
			114	+	if (generation !== diffGeneration) return;
89		loading.delete(src);	115		loading.delete(src);
90		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');
91		window.ermite?.flash?.(err.message, 4000);	117		window.ermite?.flash?.(err.message, 4000);

@@ -108,6 +134,7 @@ window.ermiteMR = (() => {
108		window.htmx?.process(f);	134		window.htmx?.process(f);
109		window.ermite?.watchFile?.(f, old);	135		window.ermite?.watchFile?.(f, old);
110		}	136		}
			137	+	refreshTouchComments();
111		}	138		}
112			139
113		// stale: the diff changed under the page. The placeholders say so; no file	140		// stale: the diff changed under the page. The placeholders say so; no file

@@ -130,7 +157,7 @@ window.ermiteMR = (() => {
130		// A page with both layouts says which shows in data-diff; a large diff	157		// A page with both layouts says which shows in data-diff; a large diff
131		// rendered in one layout only says it in data-view.	158		// rendered in one layout only says it in data-view.
132		const diffs = $('#diffs')?.dataset;	159		const diffs = $('#diffs')?.dataset;
133	-	if (/^c\d+$/.test(id) && (diffs?.diff \|\| diffs?.view) === 'split') {	160	+	if (/^c\d+$/.test(id) && !window.matchMedia?.('(max-width: 720px)').matches && (diffs?.diff \|\| diffs?.view) === 'split') {
134		const split = document.getElementById(id + '-s');	161		const split = document.getElementById(id + '-s');
135		if (split) return split;	162		if (split) return split;
136		}	163		}

@@ -172,6 +199,7 @@ window.ermiteMR = (() => {
172		// 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
173		// view).	200		// view).
174		function watch() {	201		function watch() {
			202	+	lazyIO?.disconnect();
175		if (!('IntersectionObserver' in window)) {	203		if (!('IntersectionObserver' in window)) {
176		for (const p of $$('.dlazy[data-src]')) load(p);	204		for (const p of $$('.dlazy[data-src]')) load(p);
177		return;	205		return;

@@ -285,8 +313,386 @@ window.ermiteMR = (() => {
285		reveal(id);	313		reveal(id);
286		}	314		}
287			315
			316	+	// Enhance the ordinary anchor navigation only when scripts are available.
			317	+	let disposePanels = () => {};
			318	+	// The tabs are disclosure buttons (aria-expanded + aria-controls), not a
			319	+	// tablist: a tablist always has a selected tab, and here every panel can be
			320	+	// folded. State: the index of the open panel, or -1 for none.
			321	+	function panels(initial = -1) {
			322	+	disposePanels();
			323	+	const footer = $('.mr-footer'), nav = $('[data-mr-tabs]');
			324	+	if (!footer \|\| !nav) return;
			325	+	const tabs = $$('a', nav), panels = $$('[data-mr-panel]', footer);
			326	+	const ids = new Set(['#mr-commits', '#mr-checks', '#mr-checks-panel']);
			327	+	let current = -1;
			328	+	// show applies the state; fromUser also keeps the URL fragment in step.
			329	+	function show(index, fromUser = false) {
			330	+	current = index;
			331	+	tabs.forEach((tab, i) => {
			332	+	tab.setAttribute('aria-controls', panels[i].id);
			333	+	tab.setAttribute('aria-expanded', String(i === index));
			334	+	panels[i].hidden = i !== index;
			335	+	});
			336	+	if (!fromUser) return;
			337	+	if (index >= 0) {
			338	+	if (location.hash !== '#' + panels[index].id) history.replaceState(null, '', '#' + panels[index].id);
			339	+	} else if (ids.has(location.hash)) {
			340	+	history.replaceState(null, '', location.pathname + location.search);
			341	+	}
			342	+	}
			343	+	const toggle = (i) => show(i === current ? -1 : i, true);
			344	+	tabs.forEach((tab, i) => {
			345	+	tab.addEventListener('click', (e) => { e.preventDefault(); toggle(i); });
			346	+	tab.addEventListener('keydown', (e) => {
			347	+	const next = core.tabIndex(e.key, i, tabs.length);
			348	+	if (next === null) return;
			349	+	e.preventDefault(); tabs[next].focus();
			350	+	});
			351	+	});
			352	+	// hash opens the panel of the URL fragment. Its target was hidden when the
			353	+	// browser scrolled, so the panel is brought in; never on a refresh, which
			354	+	// keeps the scroll.
			355	+	function hash() {
			356	+	const h = location.hash;
			357	+	const index = h === '#mr-checks' \|\| h === '#mr-checks-panel' ? 1 : h === '#mr-commits' ? 0 : -1;
			358	+	if (index >= 0) { show(index); panels[index].scrollIntoView?.({ block: 'nearest' }); }
			359	+	}
			360	+	// The checks badge always opens Checks; it never folds it.
			361	+	const checksClick = (e) => {
			362	+	if (e.target.closest?.('#mr-ck')) show(1);
			363	+	};
			364	+	document.addEventListener('click', checksClick);
			365	+	let observer;
			366	+	const summary = $('#mr-ck');
			367	+	if (summary) {
			368	+	// The live stream replaces #mr-ck as a whole: watch only the children of
			369	+	// its parent, and write the label only when it changes. hx-live rewrites
			370	+	// other text in the same bar on every mutation of the document; a write
			371	+	// here on each of them would wake hx-live again, a loop that never yields.
			372	+	const sync = () => {
			373	+	const label = $('[data-checks-label]', nav);
			374	+	const text = $('#mr-ck')?.title \|\| $('#mr-ck')?.textContent.trim() \|\| 'no checks';
			375	+	if (label && label.textContent !== text) label.textContent = text;
			376	+	};
			377	+	observer = new MutationObserver(sync);
			378	+	observer.observe(summary.parentElement, { childList: true });
			379	+	sync();
			380	+	}
			381	+	show(initial);
			382	+	footer.setAttribute('data-panels', '');
			383	+	if (initial < 0) hash();
			384	+	addEventListener('hashchange', hash);
			385	+	disposePanels = () => {
			386	+	document.removeEventListener?.('click', checksClick);
			387	+	window.removeEventListener?.('hashchange', hash);
			388	+	observer?.disconnect?.();
			389	+	};
			390	+	}
			391	+
			392	+	let disposeTouch = () => {};
			393	+	function touchComments(scroll = true) {
			394	+	disposeTouch();
			395	+	const diffs = $('#diffs');
			396	+	const bar = document.createElement('div');
			397	+	bar.className = 'mr-touch-range';
			398	+	const button = document.createElement('button');
			399	+	button.type = 'button';
			400	+	button.className = 'btn';
			401	+	button.textContent = 'Select line range';
			402	+	button.setAttribute('aria-pressed', 'false');
			403	+	const status = document.createElement('span');
			404	+	status.setAttribute('role', 'status');
			405	+	bar.append(button, status);
			406	+	diffs.prepend(bar);
			407	+	refreshTouchComments = () => { bar.hidden = !$('.ln a[href*="on="]', diffs); };
			408	+	refreshTouchComments();
			409	+	const touch = window.matchMedia?.('(pointer: coarse), (hover: none)');
			410	+	let enabled = false, start = null, marker = null;
			411	+	const clear = () => { marker?.removeAttribute('data-range-start'); marker = null; start = null; };
			412	+	button.addEventListener('click', () => {
			413	+	enabled = !enabled;
			414	+	clear();
			415	+	button.setAttribute('aria-pressed', String(enabled));
			416	+	status.textContent = enabled ? 'Tap the first line number, then the last. Tap the same line for one line.' : '';
			417	+	});
			418	+	diffs.addEventListener('click', (e) => {
			419	+	const link = e.target.closest?.('.ln a[href*="on="]');
			420	+	if (!touch?.matches \|\| !enabled \|\| !link \|\| e.shiftKey \|\| e.ctrlKey \|\| e.metaKey \|\| e.altKey) return;
			421	+	e.preventDefault();
			422	+	e.stopPropagation(); // do not alter the desktop shift-click anchor
			423	+	const next = core.touchRange(start, link.href, location.href);
			424	+	clear();
			425	+	if (next.url) { location.assign(next.url); return; }
			426	+	start = next.start;
			427	+	marker = link;
			428	+	marker.setAttribute('data-range-start', '');
			429	+	status.textContent = `Range starts at line ${link.textContent.trim()}. Tap the last line number (same file and side).`;
			430	+	});
			431	+	const changed = () => {
			432	+	if (touch.matches) return;
			433	+	enabled = false;
			434	+	clear();
			435	+	button.setAttribute('aria-pressed', 'false');
			436	+	status.textContent = '';
			437	+	};
			438	+	touch?.addEventListener('change', changed);
			439	+	disposeTouch = () => { touch?.removeEventListener?.('change', changed); bar.remove?.(); };
			440	+	// The server opens the line form. Scroll after layout without stealing
			441	+	// focus or forcing a mobile keyboard to appear.
			442	+	if (scroll && new URL(location.href).searchParams.has('on')) requestAnimationFrame(() => {
			443	+	const form = $$('.fnote .cform', diffs).find((f) => f.getClientRects().length);
			444	+	form?.scrollIntoView({ block: 'center' });
			445	+	});
			446	+	}
			447	+
			448	+	// A refresh scheduler has one request in flight, a trailing debounce, and
			449	+	// a dirty bit for pushes received during that request. Drafts are checked
			450	+	// again after the fetch: typing while the network is slow is safe too.
			451	+	function refresher({ blocked, fetchPage, apply, notice, failed, delay = 300 }) {
			452	+	let timer, busy = false, pending = false;
			453	+	const schedule = () => { clearTimeout(timer); timer = setTimeout(run, delay); };
			454	+	async function run() {
			455	+	if (busy \|\| !pending) return;
			456	+	if (blocked()) { notice(true); return; }
			457	+	busy = true;
			458	+	pending = false;
			459	+	try {
			460	+	const page = await fetchPage();
			461	+	if (blocked()) { pending = true; notice(true); return; }
			462	+	if (await apply(page) === false) { pending = true; notice(true); }
			463	+	else notice(false);
			464	+	} catch { if (blocked()) { pending = true; notice(true); } else failed(); }
			465	+	finally {
			466	+	busy = false;
			467	+	if (pending && !blocked()) schedule();
			468	+	}
			469	+	}
			470	+	return {
			471	+	request() { pending = true; schedule(); },
			472	+	resume() { if (pending) schedule(); },
			473	+	pending() { return pending \|\| busy; },
			474	+	};
			475	+	}
			476	+
			477	+	function hasDraft() {
			478	+	// Only form controls, never diff rows. Inline edits live in .cmt forms; the
			479	+	// merge form (d-acts) holds a chosen mode and the delete-branch box.
			480	+	return $$(':is(form.cform, .cmt form, form.d-acts) :is(textarea, input, select)').some((t) => {
			481	+	if (['hidden', 'submit', 'button', 'reset', 'image'].includes(t.type)) return false;
			482	+	if (document.activeElement === t) return true;
			483	+	if (t.type === 'radio' \|\| t.type === 'checkbox') return t.checked !== t.defaultChecked;
			484	+	if (t.tagName === 'SELECT') return [...t.options].some((o) => o.selected !== o.defaultSelected);
			485	+	return t.value !== t.defaultValue;
			486	+	}) \|\|
			487	+	!!document.activeElement?.closest?.('.cform');
			488	+	}
			489	+
			490	+	// Path + side + line is stable when files are inserted before this one;
			491	+	// fN is only a positional anchor. Hidden unified/split rows are ignored.
			492	+	function scrollAnchor() {
			493	+	const top = Math.max(0, $('.hdr')?.getBoundingClientRect().bottom \|\| 0,
			494	+	$('.mr-bar')?.getBoundingClientRect().bottom \|\| 0);
			495	+	const diffs = $('#diffs');
			496	+	const bounds = diffs.getBoundingClientRect();
			497	+	const x = Math.max(1, Math.min(innerWidth - 1, bounds.left + Math.min(100, bounds.width / 2)));
			498	+	// A bounded number of probes, independent of the number of diff lines.
			499	+	let y = top + 2, fallback;
			500	+	for (let probe = 0; probe < 6 && y < innerHeight; probe++) {
			501	+	const hit = document.elementFromPoint(x, y);
			502	+	const file = hit?.closest('details.dfile');
			503	+	if (!file \|\| !diffs.contains(file)) { y += 32; continue; }
			504	+	const row = hit.closest('tr');
			505	+	const link = row && $('.ln a[href*="on="]', row);
			506	+	const header = $(':scope > summary', file);
			507	+	const headerOffset = file.getBoundingClientRect().top;
			508	+	fallback = { file: file.dataset.file, offset: headerOffset, headerOffset, y: scrollY };
			509	+	if (link) return { ...fallback,
			510	+	on: new URL(link.href, location.href).searchParams.get('on'),
			511	+	suffix: link.getAttribute('href').split('on=')[1].split('#')[0],
			512	+	offset: row.getBoundingClientRect().top };
			513	+	if (file.open && header) y = Math.max(y + 24, header.getBoundingClientRect().bottom + 2);
			514	+	else return fallback;
			515	+	}
			516	+	if (fallback) return fallback;
			517	+	return { y: scrollY };
			518	+	}
			519	+
			520	+	function restoreAnchor(anchor) {
			521	+	const file = $$('#diffs details.dfile').find((f) => f.dataset.file === anchor.file);
			522	+	let el, offset = anchor.offset;
			523	+	if (file && anchor.on) {
			524	+	const suffix = anchor.suffix && 'on=' + anchor.suffix + '#' + file.id;
			525	+	const layout = $('#diffs').dataset.diff \|\| $('#diffs').dataset.view;
			526	+	const table = $(layout === 'split' && !window.matchMedia?.('(max-width: 720px)').matches ? '.dt.spl' : '.dt.uni', file) \|\| file;
			527	+	if (suffix) el = $('a[href$="' + CSS.escape(suffix) + '"]', table)?.closest('tr');
			528	+	}
			529	+	if (!el && file) { el = file; offset = anchor.headerOffset ?? anchor.offset; }
			530	+	if (el) window.scrollBy({ top: el.getBoundingClientRect().top - offset, behavior: 'instant' });
			531	+	else window.scrollTo({ top: Math.max(0, Math.min(anchor.y, document.documentElement.scrollHeight - innerHeight)), behavior: 'instant' });
			532	+	}
			533	+
			534	+	async function fetchPage(url = location.href, mobileRetry = false) {
			535	+	const res = await fetch(url, { credentials: 'same-origin', headers: { Accept: 'text/html' } });
			536	+	if (!res.ok \|\| res.redirected) throw new Error('MR refresh refused');
			537	+	const page = new DOMParser().parseFromString(await res.text(), 'text/html');
			538	+	if (!$('#diffs[data-mr]', page) \|\| !$('.mr-bar', page) \|\| !$('.hint-live', page)) throw new Error('not an MR page');
			539	+	const unified = core.mobileURL(url, $('#diffs', page).dataset.view,
			540	+	!!window.matchMedia?.('(max-width: 720px)').matches);
			541	+	if (unified && !mobileRetry) return fetchPage(unified, true);
			542	+	return page;
			543	+	}
			544	+
			545	+	// htmx 4's public delete swap invokes recursive before:cleanup (including
			546	+	// hx-sse's abort/reader.cancel and hx-live's binding disposal). Only an empty
			547	+	// string is parsed; the fetched nodes themselves are adopted, never serialized.
			548	+	async function replaceRegion(old, fresh) {
			549	+	if (!old \|\| !fresh) throw new Error('missing MR refresh region');
			550	+	for (const el of $$('[autofocus]', fresh)) el.removeAttribute('autofocus');
			551	+	const marker = document.createComment('MR region');
			552	+	old.before(marker);
			553	+	const remove = () => window.htmx.swap({ sourceElement: old, target: old, text: '',
			554	+	swap: 'delete settle:0 transition:false', push: false, replace: false });
			555	+	if (old.matches('.hint-live')) {
			556	+	window.ermiteLive.resumeStream(fresh);
			557	+	await window.ermiteLive.teardown(remove);
			558	+	} else await remove();
			559	+	const node = document.adoptNode(fresh);
			560	+	marker.replaceWith(node);
			561	+	window.htmx.process(node);
			562	+	}
			563	+
			564	+	async function refreshPage(page) {
			565	+	const regions = ['.mr-footer', '#mr-range', '.mr-bar', '#mr-diff-notices', '#diffs', '#mr-comments', '.rail', '.hint-live'];
			566	+	for (const sel of regions) if (!$(sel) \|\| !$(sel, page)) throw new Error('missing MR region');
			567	+	let anchor = scrollAnchor();
			568	+	const nextDiffs = $('#diffs', page);
			569	+	const mobile = !!window.matchMedia?.('(max-width: 720px)').matches;
			570	+	const chosen = mobile ? 'unified' : ($('#diffs').dataset.diff \|\| $('#diffs').dataset.view);
			571	+	if (nextDiffs.dataset.diff) nextDiffs.dataset.diff = chosen;
			572	+	// A one-layout response must use its own contract, never the old page's.
			573	+	if (mobile && nextDiffs.dataset.view === 'split') throw new Error('mobile needs unified');
			574	+	const anchorFile = $$('#diffs details.dfile', page).find((f) => f.dataset.file === anchor.file);
			575	+	const placeholder = anchorFile && $('.dlazy[data-src]', anchorFile);
			576	+	if (placeholder) {
			577	+	const d = nextDiffs.dataset;
			578	+	const url = placeholder.dataset.src + '&view=' + encodeURIComponent(d.diff \|\| d.view \|\| 'unified') + '&layouts=' + (d.diff ? 'both' : 'one');
			579	+	const res = await fetch(url, { credentials: 'same-origin', headers: { Accept: 'text/html' } });
			580	+	if (!res.ok \|\| res.redirected) throw new Error('anchor window changed');
			581	+	let windowPage = new DOMParser().parseFromString(await res.text(), 'text/html');
			582	+	if (hasDraft()) return false;
			583	+	anchor = scrollAnchor();
			584	+	const windowFiles = $$('details.dfile', windowPage);
			585	+	// If the reader moved outside this window, discard it; lazy loading will
			586	+	// fetch the new position rather than committing an unrelated window.
			587	+	if (windowFiles.some((f) => f.dataset.file === anchor.file)) {
			588	+	const byID = new Map($$('#diffs details.dfile', page).map((f) => [f.id, f]));
			589	+	for (const f of windowFiles) byID.get(f.id)?.replaceWith(f);
			590	+	}
			591	+	windowPage = null;
			592	+	}
			593	+	if (hasDraft()) return false;
			594	+	const files = new Map($$('#diffs details.dfile').map((f) => [f.dataset.file, f.open]));
			595	+	const folded = $('.r-files')?.hasAttribute('data-folded');
			596	+	const railY = $('.rail')?.scrollTop, filesY = $('.r-files .files')?.scrollTop;
			597	+	const openPanel = $$('[data-mr-tabs] a').findIndex((t) => t.getAttribute('aria-expanded') === 'true');
			598	+	const active = document.activeElement;
			599	+	const focus = active && { file: active.closest?.('.files a')?.getAttribute('title'), region: regions.find((sel) => $(sel)?.contains(active)), menu: active.closest?.('details.menu')?.id, id: active.id, tag: active.tagName, name: active.getAttribute('name'), href: active.getAttribute('href') };
			600	+	for (const f of $$('#diffs details.dfile', page)) if (files.has(f.dataset.file)) f.open = files.get(f.dataset.file);
			601	+	++diffGeneration; ++revealGen; moved = false; loading.clear(); lazyIO?.disconnect();
			602	+	$('#diffs', page).dataset.mrStarted = 'true';
			603	+	// The fresh footer comes in with the panels as they are, so that an open
			604	+	// panel does not fold and open again while the other regions swap.
			605	+	const freshFooter = $('.mr-footer', page);
			606	+	if (freshFooter) {
			607	+	freshFooter.setAttribute('data-panels', '');
			608	+	$$('[data-mr-panel]', freshFooter).forEach((p, i) => { p.hidden = i !== openPanel; });
			609	+	}
			610	+	for (const sel of regions) {
			611	+	const fresh = $(sel, page);
			612	+	await replaceRegion($(sel), fresh);
			613	+	}
			614	+	for (const key of ['ref', 'sha', 'paths', 'blob']) {
			615	+	if (page.body.dataset[key] !== undefined) document.body.dataset[key] = page.body.dataset[key];
			616	+	}
			617	+	const oldSHA = $('.hdr .ref .sha'), newSHA = $('.hdr .ref .sha', page);
			618	+	if (oldSHA && newSHA) oldSHA.textContent = newSHA.textContent;
			619	+	page = null;
			620	+	panels(openPanel);
			621	+	foldFiles(!!folded);
			622	+	if ($('.rail')) $('.rail').scrollTop = railY;
			623	+	if ($('.r-files .files')) $('.r-files .files').scrollTop = filesY;
			624	+	touchComments(false);
			625	+	$('#diffs').dataset.mobile = String(!!window.matchMedia?.('(max-width: 720px)').matches);
			626	+	window.ermite?.refreshFiles?.();
			627	+	watch();
			628	+	if (focus && active !== document.body) {
			629	+	const region = focus.region ? $(focus.region) : document;
			630	+	const menu = focus.menu && document.getElementById(focus.menu);
			631	+	if (menu) menu.open = true;
			632	+	const el = focus.file ? $('a[title="' + CSS.escape(focus.file) + '"]', region) :
			633	+	focus.id ? document.getElementById(focus.id) :
			634	+	focus.href ? $('a[href="' + CSS.escape(focus.href) + '"]', region) :
			635	+	focus.name ? $('[name="' + CSS.escape(focus.name) + '"]', region) :
			636	+	menu?.querySelector(':scope > summary');
			637	+	el?.focus({ preventScroll: true });
			638	+	}
			639	+	restoreAnchor(anchor);
			640	+	}
			641	+
			642	+	function refreshNotice(deferred) {
			643	+	const slot = $('#mr-refresh-status');
			644	+	if (!slot) return;
			645	+	slot.replaceChildren();
			646	+	if (!deferred) {
			647	+	const text = document.createElement('span'); text.className = 'sr'; text.textContent = 'branch updated'; slot.append(text);
			648	+	return;
			649	+	}
			650	+	slot.append('branch updated — refreshing after your comment. ');
			651	+
			652	+	}
			653	+	const headRefresh = refresher({ blocked: hasDraft, fetchPage, apply: refreshPage, notice: refreshNotice,
			654	+	failed: () => window.ermiteLive?.reload() });
			655	+	function headChanged() { if ($('#diffs[data-mr]')) headRefresh.request(); }
			656	+
288		function start() {	657		function start() {
289		if (!$('#diffs[data-mr]')) return;	658		if (!$('#diffs[data-mr]')) return;
			659	+	if (window.ermiteLive) window.ermiteLive.canReload = () => {
			660	+	if (!hasDraft()) return true;
			661	+	headRefresh.request(); refreshNotice(true); return false;
			662	+	};
			663	+	// Global delegation is installed once; replacement regions have their own
			664	+	// disposable panel/touch hooks below.
			665	+	if ($('#diffs').dataset.mrStarted) return;
			666	+	$('#diffs').dataset.mrStarted = 'true';
			667	+	for (const type of ['input', 'focusout', 'reset', 'submit']) document.addEventListener?.(type, () => headRefresh.resume());
			668	+	document.addEventListener?.('click', (e) => {
			669	+	const cancel = e.target.closest?.('.cform .f-btns a');
			670	+	if (!cancel \|\| !headRefresh.pending() \|\| e.ctrlKey \|\| e.metaKey \|\| e.shiftKey \|\| e.altKey) return;
			671	+	e.preventDefault();
			672	+	const form = cancel.closest('.cform');
			673	+	form.reset();
			674	+	if (form.contains(document.activeElement)) document.activeElement.blur();
			675	+	headRefresh.resume();
			676	+	});
			677	+	panels();
			678	+	// Large diffs may contain only the split table. Ask the existing server
			679	+	// route for unified rather than writing the saved session preference.
			680	+	const narrow = window.matchMedia?.('(max-width: 720px)');
			681	+	const unify = () => {
			682	+	$('#diffs').dataset.mobile = String(!!narrow?.matches);
			683	+	const url = core.mobileURL(location.href, $('#diffs')?.dataset.view, narrow?.matches);
			684	+	if (url) { location.replace(url); return true; }
			685	+	return false;
			686	+	};
			687	+	if (unify()) return;
			688	+	narrow?.addEventListener('change', unify);
			689	+	addEventListener('click', (e) => {
			690	+	if (narrow?.matches && e.target.closest?.('.vbtn[data-view="split"]')) {
			691	+	e.preventDefault();
			692	+	e.stopImmediatePropagation();
			693	+	}
			694	+	}, true);
			695	+	touchComments();
290		let folded = false;	696		let folded = false;
291		try { folded = localStorage.getItem('mr-files-folded') === '1'; } catch { /* no storage: open */ }	697		try { folded = localStorage.getItem('mr-files-folded') === '1'; } catch { /* no storage: open */ }
292		if (folded) foldFiles(true);	698		if (folded) foldFiles(true);

@@ -316,7 +722,7 @@ window.ermiteMR = (() => {
316		});	722		});
317		}	723		}
318			724
319	-	return { core, start, load, reveal, openMerge, menuKey, markRead, focusFiles, stepFiles, leaveFiles, foldFiles, openFile };	725	+	return { core, refresher, hasDraft, fetchPage, scrollAnchor, restoreAnchor, headChanged, panels, start, load, reveal, openMerge, menuKey, markRead, focusFiles, stepFiles, leaveFiles, foldFiles, openFile };
320		})();	726		})();
321			727
322		if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', () => window.ermiteMR.start());	728		if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', () => window.ermiteMR.start());

M internal/app/testdata/web/commit-big.html +3 -3


@@ -127,12 +127,12 @@
127	127		</span>
128	128		<details class="menu vmenu">
129	129		<summary class="btn" aria-label="Diff view">
130		-	<span hx-live="this.textContent = q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">Unified</span>
	130	+	<span hx-live="this.textContent = q('#diffs').attr['data-mobile'] !== 'true' && q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">Unified</span>
131	131		</summary>
132	132		<div class="menu-pop" role="group" aria-label="Diff view">
133		-	<a href="/diffs/commit/SHA40?view=unified" class="btn vbtn" data-view="unified" aria-keyshortcuts="u" aria-current="true" data-fire="unified" :aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false">Unified<kbd aria-hidden="true">u</kbd>
	133	+	<a href="/diffs/commit/SHA40?view=unified" class="btn vbtn" data-view="unified" aria-keyshortcuts="u" aria-current="true" data-fire="unified" :aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false">Unified<kbd aria-hidden="true">u</kbd>
134	134		</a>
135		-	<a href="/diffs/commit/SHA40?view=split" class="btn vbtn" data-view="split" aria-keyshortcuts="d" data-fire="split" :aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false">Split<kbd aria-hidden="true">d</kbd>
	135	+	<a href="/diffs/commit/SHA40?view=split" class="btn vbtn" data-view="split" aria-keyshortcuts="d" :aria-disabled="q('#diffs').attr['data-mobile'] === 'true' ? 'true' : false" :title="q('#diffs').attr['data-mobile'] === 'true' ? 'Split view requires a wider screen' : 'Split view'" data-fire="split" :aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false">Split<kbd aria-hidden="true">d</kbd>
136	136		</a>
137	137		<button type="button" aria-keyshortcuts="x" data-js data-fire="collapse" class="btn">
138	138		<span hx-live="this.textContent = q('[data-file][open]').count \|\| !q('[data-file]').count ? 'Collapse all' : 'Expand all'">Collapse all</span>


@@ -127,12 +127,12 @@
127		</span>	127		</span>
128		<details class="menu vmenu">	128		<details class="menu vmenu">
129		<summary class="btn" aria-label="Diff view">	129		<summary class="btn" aria-label="Diff view">
130	-	<span hx-live="this.textContent = q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">Unified</span>	130	+	<span hx-live="this.textContent = q('#diffs').attr['data-mobile'] !== 'true' && q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">Unified</span>
131		</summary>	131		</summary>
132		<div class="menu-pop" role="group" aria-label="Diff view">	132		<div class="menu-pop" role="group" aria-label="Diff view">
133	-	<a href="/diffs/commit/SHA40?view=unified" class="btn vbtn" data-view="unified" aria-keyshortcuts="u" aria-current="true" data-fire="unified" :aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false">Unified<kbd aria-hidden="true">u</kbd>	133	+	<a href="/diffs/commit/SHA40?view=unified" class="btn vbtn" data-view="unified" aria-keyshortcuts="u" aria-current="true" data-fire="unified" :aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false">Unified<kbd aria-hidden="true">u</kbd>
134		</a>	134		</a>
135	-	<a href="/diffs/commit/SHA40?view=split" class="btn vbtn" data-view="split" aria-keyshortcuts="d" data-fire="split" :aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false">Split<kbd aria-hidden="true">d</kbd>	135	+	<a href="/diffs/commit/SHA40?view=split" class="btn vbtn" data-view="split" aria-keyshortcuts="d" :aria-disabled="q('#diffs').attr['data-mobile'] === 'true' ? 'true' : false" :title="q('#diffs').attr['data-mobile'] === 'true' ? 'Split view requires a wider screen' : 'Split view'" data-fire="split" :aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false">Split<kbd aria-hidden="true">d</kbd>
136		</a>	136		</a>
137		<button type="button" aria-keyshortcuts="x" data-js data-fire="collapse" class="btn">	137		<button type="button" aria-keyshortcuts="x" data-js data-fire="collapse" class="btn">
138		<span hx-live="this.textContent = q('[data-file][open]').count \|\| !q('[data-file]').count ? 'Collapse all' : 'Expand all'">Collapse all</span>	138		<span hx-live="this.textContent = q('[data-file][open]').count \|\| !q('[data-file]').count ? 'Collapse all' : 'Expand all'">Collapse all</span>

M internal/app/testdata/web/commit-binary.html +3 -3


@@ -123,12 +123,12 @@
123	123		</span>
124	124		<details class="menu vmenu">
125	125		<summary class="btn" aria-label="Diff view">
126		-	<span hx-live="this.textContent = q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">Unified</span>
	126	+	<span hx-live="this.textContent = q('#diffs').attr['data-mobile'] !== 'true' && q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">Unified</span>
127	127		</summary>
128	128		<div class="menu-pop" role="group" aria-label="Diff view">
129		-	<a href="/diffs/commit/SHA40?view=unified" class="btn vbtn" data-view="unified" aria-keyshortcuts="u" aria-current="true" data-fire="unified" :aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false">Unified<kbd aria-hidden="true">u</kbd>
	129	+	<a href="/diffs/commit/SHA40?view=unified" class="btn vbtn" data-view="unified" aria-keyshortcuts="u" aria-current="true" data-fire="unified" :aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false">Unified<kbd aria-hidden="true">u</kbd>
130	130		</a>
131		-	<a href="/diffs/commit/SHA40?view=split" class="btn vbtn" data-view="split" aria-keyshortcuts="d" data-fire="split" :aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false">Split<kbd aria-hidden="true">d</kbd>
	131	+	<a href="/diffs/commit/SHA40?view=split" class="btn vbtn" data-view="split" aria-keyshortcuts="d" :aria-disabled="q('#diffs').attr['data-mobile'] === 'true' ? 'true' : false" :title="q('#diffs').attr['data-mobile'] === 'true' ? 'Split view requires a wider screen' : 'Split view'" data-fire="split" :aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false">Split<kbd aria-hidden="true">d</kbd>
132	132		</a>
133	133		<button type="button" aria-keyshortcuts="x" data-js data-fire="collapse" class="btn">
134	134		<span hx-live="this.textContent = q('[data-file][open]').count \|\| !q('[data-file]').count ? 'Collapse all' : 'Expand all'">Collapse all</span>


@@ -123,12 +123,12 @@
123		</span>	123		</span>
124		<details class="menu vmenu">	124		<details class="menu vmenu">
125		<summary class="btn" aria-label="Diff view">	125		<summary class="btn" aria-label="Diff view">
126	-	<span hx-live="this.textContent = q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">Unified</span>	126	+	<span hx-live="this.textContent = q('#diffs').attr['data-mobile'] !== 'true' && q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">Unified</span>
127		</summary>	127		</summary>
128		<div class="menu-pop" role="group" aria-label="Diff view">	128		<div class="menu-pop" role="group" aria-label="Diff view">
129	-	<a href="/diffs/commit/SHA40?view=unified" class="btn vbtn" data-view="unified" aria-keyshortcuts="u" aria-current="true" data-fire="unified" :aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false">Unified<kbd aria-hidden="true">u</kbd>	129	+	<a href="/diffs/commit/SHA40?view=unified" class="btn vbtn" data-view="unified" aria-keyshortcuts="u" aria-current="true" data-fire="unified" :aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false">Unified<kbd aria-hidden="true">u</kbd>
130		</a>	130		</a>
131	-	<a href="/diffs/commit/SHA40?view=split" class="btn vbtn" data-view="split" aria-keyshortcuts="d" data-fire="split" :aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false">Split<kbd aria-hidden="true">d</kbd>	131	+	<a href="/diffs/commit/SHA40?view=split" class="btn vbtn" data-view="split" aria-keyshortcuts="d" :aria-disabled="q('#diffs').attr['data-mobile'] === 'true' ? 'true' : false" :title="q('#diffs').attr['data-mobile'] === 'true' ? 'Split view requires a wider screen' : 'Split view'" data-fire="split" :aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false">Split<kbd aria-hidden="true">d</kbd>
132		</a>	132		</a>
133		<button type="button" aria-keyshortcuts="x" data-js data-fire="collapse" class="btn">	133		<button type="button" aria-keyshortcuts="x" data-js data-fire="collapse" class="btn">
134		<span hx-live="this.textContent = q('[data-file][open]').count \|\| !q('[data-file]').count ? 'Collapse all' : 'Expand all'">Collapse all</span>	134		<span hx-live="this.textContent = q('[data-file][open]').count \|\| !q('[data-file]').count ? 'Collapse all' : 'Expand all'">Collapse all</span>

M internal/app/testdata/web/commit-merge.html +3 -3


@@ -122,12 +122,12 @@
122	122		</span>
123	123		<details class="menu vmenu">
124	124		<summary class="btn" aria-label="Diff view">
125		-	<span hx-live="this.textContent = q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">Unified</span>
	125	+	<span hx-live="this.textContent = q('#diffs').attr['data-mobile'] !== 'true' && q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">Unified</span>
126	126		</summary>
127	127		<div class="menu-pop" role="group" aria-label="Diff view">
128		-	<a href="/diffs/commit/SHA40?view=unified" class="btn vbtn" data-view="unified" aria-keyshortcuts="u" aria-current="true" data-fire="unified" :aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false">Unified<kbd aria-hidden="true">u</kbd>
	128	+	<a href="/diffs/commit/SHA40?view=unified" class="btn vbtn" data-view="unified" aria-keyshortcuts="u" aria-current="true" data-fire="unified" :aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false">Unified<kbd aria-hidden="true">u</kbd>
129	129		</a>
130		-	<a href="/diffs/commit/SHA40?view=split" class="btn vbtn" data-view="split" aria-keyshortcuts="d" data-fire="split" :aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false">Split<kbd aria-hidden="true">d</kbd>
	130	+	<a href="/diffs/commit/SHA40?view=split" class="btn vbtn" data-view="split" aria-keyshortcuts="d" :aria-disabled="q('#diffs').attr['data-mobile'] === 'true' ? 'true' : false" :title="q('#diffs').attr['data-mobile'] === 'true' ? 'Split view requires a wider screen' : 'Split view'" data-fire="split" :aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false">Split<kbd aria-hidden="true">d</kbd>
131	131		</a>
132	132		<button type="button" aria-keyshortcuts="x" data-js data-fire="collapse" class="btn">
133	133		<span hx-live="this.textContent = q('[data-file][open]').count \|\| !q('[data-file]').count ? 'Collapse all' : 'Expand all'">Collapse all</span>


@@ -122,12 +122,12 @@
122		</span>	122		</span>
123		<details class="menu vmenu">	123		<details class="menu vmenu">
124		<summary class="btn" aria-label="Diff view">	124		<summary class="btn" aria-label="Diff view">
125	-	<span hx-live="this.textContent = q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">Unified</span>	125	+	<span hx-live="this.textContent = q('#diffs').attr['data-mobile'] !== 'true' && q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">Unified</span>
126		</summary>	126		</summary>
127		<div class="menu-pop" role="group" aria-label="Diff view">	127		<div class="menu-pop" role="group" aria-label="Diff view">
128	-	<a href="/diffs/commit/SHA40?view=unified" class="btn vbtn" data-view="unified" aria-keyshortcuts="u" aria-current="true" data-fire="unified" :aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false">Unified<kbd aria-hidden="true">u</kbd>	128	+	<a href="/diffs/commit/SHA40?view=unified" class="btn vbtn" data-view="unified" aria-keyshortcuts="u" aria-current="true" data-fire="unified" :aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false">Unified<kbd aria-hidden="true">u</kbd>
129		</a>	129		</a>
130	-	<a href="/diffs/commit/SHA40?view=split" class="btn vbtn" data-view="split" aria-keyshortcuts="d" data-fire="split" :aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false">Split<kbd aria-hidden="true">d</kbd>	130	+	<a href="/diffs/commit/SHA40?view=split" class="btn vbtn" data-view="split" aria-keyshortcuts="d" :aria-disabled="q('#diffs').attr['data-mobile'] === 'true' ? 'true' : false" :title="q('#diffs').attr['data-mobile'] === 'true' ? 'Split view requires a wider screen' : 'Split view'" data-fire="split" :aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false">Split<kbd aria-hidden="true">d</kbd>
131		</a>	131		</a>
132		<button type="button" aria-keyshortcuts="x" data-js data-fire="collapse" class="btn">	132		<button type="button" aria-keyshortcuts="x" data-js data-fire="collapse" class="btn">
133		<span hx-live="this.textContent = q('[data-file][open]').count \|\| !q('[data-file]').count ? 'Collapse all' : 'Expand all'">Collapse all</span>	133		<span hx-live="this.textContent = q('[data-file][open]').count \|\| !q('[data-file]').count ? 'Collapse all' : 'Expand all'">Collapse all</span>

M internal/app/testdata/web/commit-modify-split.html +3 -3


@@ -129,12 +129,12 @@ And <b>html</b> & "quotes".</pre>
129	129		</span>
130	130		<details class="menu vmenu">
131	131		<summary class="btn" aria-label="Diff view">
132		-	<span hx-live="this.textContent = q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">Split</span>
	132	+	<span hx-live="this.textContent = q('#diffs').attr['data-mobile'] !== 'true' && q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">Split</span>
133	133		</summary>
134	134		<div class="menu-pop" role="group" aria-label="Diff view">
135		-	<a href="/diffs/commit/SHA40?view=unified" class="btn vbtn" data-view="unified" aria-keyshortcuts="u" data-fire="unified" :aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false">Unified<kbd aria-hidden="true">u</kbd>
	135	+	<a href="/diffs/commit/SHA40?view=unified" class="btn vbtn" data-view="unified" aria-keyshortcuts="u" data-fire="unified" :aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false">Unified<kbd aria-hidden="true">u</kbd>
136	136		</a>
137		-	<a href="/diffs/commit/SHA40?view=split" class="btn vbtn" data-view="split" aria-keyshortcuts="d" aria-current="true" data-fire="split" :aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false">Split<kbd aria-hidden="true">d</kbd>
	137	+	<a href="/diffs/commit/SHA40?view=split" class="btn vbtn" data-view="split" aria-keyshortcuts="d" :aria-disabled="q('#diffs').attr['data-mobile'] === 'true' ? 'true' : false" :title="q('#diffs').attr['data-mobile'] === 'true' ? 'Split view requires a wider screen' : 'Split view'" aria-current="true" data-fire="split" :aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false">Split<kbd aria-hidden="true">d</kbd>
138	138		</a>
139	139		<button type="button" aria-keyshortcuts="x" data-js data-fire="collapse" class="btn">
140	140		<span hx-live="this.textContent = q('[data-file][open]').count \|\| !q('[data-file]').count ? 'Collapse all' : 'Expand all'">Collapse all</span>


@@ -129,12 +129,12 @@ And <b>html</b> & "quotes".</pre>
129		</span>	129		</span>
130		<details class="menu vmenu">	130		<details class="menu vmenu">
131		<summary class="btn" aria-label="Diff view">	131		<summary class="btn" aria-label="Diff view">
132	-	<span hx-live="this.textContent = q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">Split</span>	132	+	<span hx-live="this.textContent = q('#diffs').attr['data-mobile'] !== 'true' && q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">Split</span>
133		</summary>	133		</summary>
134		<div class="menu-pop" role="group" aria-label="Diff view">	134		<div class="menu-pop" role="group" aria-label="Diff view">
135	-	<a href="/diffs/commit/SHA40?view=unified" class="btn vbtn" data-view="unified" aria-keyshortcuts="u" data-fire="unified" :aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false">Unified<kbd aria-hidden="true">u</kbd>	135	+	<a href="/diffs/commit/SHA40?view=unified" class="btn vbtn" data-view="unified" aria-keyshortcuts="u" data-fire="unified" :aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false">Unified<kbd aria-hidden="true">u</kbd>
136		</a>	136		</a>
137	-	<a href="/diffs/commit/SHA40?view=split" class="btn vbtn" data-view="split" aria-keyshortcuts="d" aria-current="true" data-fire="split" :aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false">Split<kbd aria-hidden="true">d</kbd>	137	+	<a href="/diffs/commit/SHA40?view=split" class="btn vbtn" data-view="split" aria-keyshortcuts="d" :aria-disabled="q('#diffs').attr['data-mobile'] === 'true' ? 'true' : false" :title="q('#diffs').attr['data-mobile'] === 'true' ? 'Split view requires a wider screen' : 'Split view'" aria-current="true" data-fire="split" :aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false">Split<kbd aria-hidden="true">d</kbd>
138		</a>	138		</a>
139		<button type="button" aria-keyshortcuts="x" data-js data-fire="collapse" class="btn">	139		<button type="button" aria-keyshortcuts="x" data-js data-fire="collapse" class="btn">
140		<span hx-live="this.textContent = q('[data-file][open]').count \|\| !q('[data-file]').count ? 'Collapse all' : 'Expand all'">Collapse all</span>	140		<span hx-live="this.textContent = q('[data-file][open]').count \|\| !q('[data-file]').count ? 'Collapse all' : 'Expand all'">Collapse all</span>

M internal/app/testdata/web/commit-modify.html +3 -3


@@ -129,12 +129,12 @@ And <b>html</b> & "quotes".</pre>
129	129		</span>
130	130		<details class="menu vmenu">
131	131		<summary class="btn" aria-label="Diff view">
132		-	<span hx-live="this.textContent = q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">Unified</span>
	132	+	<span hx-live="this.textContent = q('#diffs').attr['data-mobile'] !== 'true' && q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">Unified</span>
133	133		</summary>
134	134		<div class="menu-pop" role="group" aria-label="Diff view">
135		-	<a href="/diffs/commit/SHA40?view=unified" class="btn vbtn" data-view="unified" aria-keyshortcuts="u" aria-current="true" data-fire="unified" :aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false">Unified<kbd aria-hidden="true">u</kbd>
	135	+	<a href="/diffs/commit/SHA40?view=unified" class="btn vbtn" data-view="unified" aria-keyshortcuts="u" aria-current="true" data-fire="unified" :aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false">Unified<kbd aria-hidden="true">u</kbd>
136	136		</a>
137		-	<a href="/diffs/commit/SHA40?view=split" class="btn vbtn" data-view="split" aria-keyshortcuts="d" data-fire="split" :aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false">Split<kbd aria-hidden="true">d</kbd>
	137	+	<a href="/diffs/commit/SHA40?view=split" class="btn vbtn" data-view="split" aria-keyshortcuts="d" :aria-disabled="q('#diffs').attr['data-mobile'] === 'true' ? 'true' : false" :title="q('#diffs').attr['data-mobile'] === 'true' ? 'Split view requires a wider screen' : 'Split view'" data-fire="split" :aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false">Split<kbd aria-hidden="true">d</kbd>
138	138		</a>
139	139		<button type="button" aria-keyshortcuts="x" data-js data-fire="collapse" class="btn">
140	140		<span hx-live="this.textContent = q('[data-file][open]').count \|\| !q('[data-file]').count ? 'Collapse all' : 'Expand all'">Collapse all</span>


@@ -129,12 +129,12 @@ And <b>html</b> & "quotes".</pre>
129		</span>	129		</span>
130		<details class="menu vmenu">	130		<details class="menu vmenu">
131		<summary class="btn" aria-label="Diff view">	131		<summary class="btn" aria-label="Diff view">
132	-	<span hx-live="this.textContent = q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">Unified</span>	132	+	<span hx-live="this.textContent = q('#diffs').attr['data-mobile'] !== 'true' && q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">Unified</span>
133		</summary>	133		</summary>
134		<div class="menu-pop" role="group" aria-label="Diff view">	134		<div class="menu-pop" role="group" aria-label="Diff view">
135	-	<a href="/diffs/commit/SHA40?view=unified" class="btn vbtn" data-view="unified" aria-keyshortcuts="u" aria-current="true" data-fire="unified" :aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false">Unified<kbd aria-hidden="true">u</kbd>	135	+	<a href="/diffs/commit/SHA40?view=unified" class="btn vbtn" data-view="unified" aria-keyshortcuts="u" aria-current="true" data-fire="unified" :aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false">Unified<kbd aria-hidden="true">u</kbd>
136		</a>	136		</a>
137	-	<a href="/diffs/commit/SHA40?view=split" class="btn vbtn" data-view="split" aria-keyshortcuts="d" data-fire="split" :aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false">Split<kbd aria-hidden="true">d</kbd>	137	+	<a href="/diffs/commit/SHA40?view=split" class="btn vbtn" data-view="split" aria-keyshortcuts="d" :aria-disabled="q('#diffs').attr['data-mobile'] === 'true' ? 'true' : false" :title="q('#diffs').attr['data-mobile'] === 'true' ? 'Split view requires a wider screen' : 'Split view'" data-fire="split" :aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false">Split<kbd aria-hidden="true">d</kbd>
138		</a>	138		</a>
139		<button type="button" aria-keyshortcuts="x" data-js data-fire="collapse" class="btn">	139		<button type="button" aria-keyshortcuts="x" data-js data-fire="collapse" class="btn">
140		<span hx-live="this.textContent = q('[data-file][open]').count \|\| !q('[data-file]').count ? 'Collapse all' : 'Expand all'">Collapse all</span>	140		<span hx-live="this.textContent = q('[data-file][open]').count \|\| !q('[data-file]').count ? 'Collapse all' : 'Expand all'">Collapse all</span>

M internal/app/testdata/web/commit-rename.html +3 -3


@@ -123,12 +123,12 @@
123	123		</span>
124	124		<details class="menu vmenu">
125	125		<summary class="btn" aria-label="Diff view">
126		-	<span hx-live="this.textContent = q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">Unified</span>
	126	+	<span hx-live="this.textContent = q('#diffs').attr['data-mobile'] !== 'true' && q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">Unified</span>
127	127		</summary>
128	128		<div class="menu-pop" role="group" aria-label="Diff view">
129		-	<a href="/diffs/commit/SHA40?view=unified" class="btn vbtn" data-view="unified" aria-keyshortcuts="u" aria-current="true" data-fire="unified" :aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false">Unified<kbd aria-hidden="true">u</kbd>
	129	+	<a href="/diffs/commit/SHA40?view=unified" class="btn vbtn" data-view="unified" aria-keyshortcuts="u" aria-current="true" data-fire="unified" :aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false">Unified<kbd aria-hidden="true">u</kbd>
130	130		</a>
131		-	<a href="/diffs/commit/SHA40?view=split" class="btn vbtn" data-view="split" aria-keyshortcuts="d" data-fire="split" :aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false">Split<kbd aria-hidden="true">d</kbd>
	131	+	<a href="/diffs/commit/SHA40?view=split" class="btn vbtn" data-view="split" aria-keyshortcuts="d" :aria-disabled="q('#diffs').attr['data-mobile'] === 'true' ? 'true' : false" :title="q('#diffs').attr['data-mobile'] === 'true' ? 'Split view requires a wider screen' : 'Split view'" data-fire="split" :aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false">Split<kbd aria-hidden="true">d</kbd>
132	132		</a>
133	133		<button type="button" aria-keyshortcuts="x" data-js data-fire="collapse" class="btn">
134	134		<span hx-live="this.textContent = q('[data-file][open]').count \|\| !q('[data-file]').count ? 'Collapse all' : 'Expand all'">Collapse all</span>


@@ -123,12 +123,12 @@
123		</span>	123		</span>
124		<details class="menu vmenu">	124		<details class="menu vmenu">
125		<summary class="btn" aria-label="Diff view">	125		<summary class="btn" aria-label="Diff view">
126	-	<span hx-live="this.textContent = q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">Unified</span>	126	+	<span hx-live="this.textContent = q('#diffs').attr['data-mobile'] !== 'true' && q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">Unified</span>
127		</summary>	127		</summary>
128		<div class="menu-pop" role="group" aria-label="Diff view">	128		<div class="menu-pop" role="group" aria-label="Diff view">
129	-	<a href="/diffs/commit/SHA40?view=unified" class="btn vbtn" data-view="unified" aria-keyshortcuts="u" aria-current="true" data-fire="unified" :aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false">Unified<kbd aria-hidden="true">u</kbd>	129	+	<a href="/diffs/commit/SHA40?view=unified" class="btn vbtn" data-view="unified" aria-keyshortcuts="u" aria-current="true" data-fire="unified" :aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false">Unified<kbd aria-hidden="true">u</kbd>
130		</a>	130		</a>
131	-	<a href="/diffs/commit/SHA40?view=split" class="btn vbtn" data-view="split" aria-keyshortcuts="d" data-fire="split" :aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false">Split<kbd aria-hidden="true">d</kbd>	131	+	<a href="/diffs/commit/SHA40?view=split" class="btn vbtn" data-view="split" aria-keyshortcuts="d" :aria-disabled="q('#diffs').attr['data-mobile'] === 'true' ? 'true' : false" :title="q('#diffs').attr['data-mobile'] === 'true' ? 'Split view requires a wider screen' : 'Split view'" data-fire="split" :aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false">Split<kbd aria-hidden="true">d</kbd>
132		</a>	132		</a>
133		<button type="button" aria-keyshortcuts="x" data-js data-fire="collapse" class="btn">	133		<button type="button" aria-keyshortcuts="x" data-js data-fire="collapse" class="btn">
134		<span hx-live="this.textContent = q('[data-file][open]').count \|\| !q('[data-file]').count ? 'Collapse all' : 'Expand all'">Collapse all</span>	134		<span hx-live="this.textContent = q('[data-file][open]').count \|\| !q('[data-file]').count ? 'Collapse all' : 'Expand all'">Collapse all</span>

M internal/app/testdata/web/commit-root.html +3 -3


@@ -121,12 +121,12 @@
121	121		</span>
122	122		<details class="menu vmenu">
123	123		<summary class="btn" aria-label="Diff view">
124		-	<span hx-live="this.textContent = q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">Unified</span>
	124	+	<span hx-live="this.textContent = q('#diffs').attr['data-mobile'] !== 'true' && q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">Unified</span>
125	125		</summary>
126	126		<div class="menu-pop" role="group" aria-label="Diff view">
127		-	<a href="/diffs/commit/SHA40?view=unified" class="btn vbtn" data-view="unified" aria-keyshortcuts="u" aria-current="true" data-fire="unified" :aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false">Unified<kbd aria-hidden="true">u</kbd>
	127	+	<a href="/diffs/commit/SHA40?view=unified" class="btn vbtn" data-view="unified" aria-keyshortcuts="u" aria-current="true" data-fire="unified" :aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false">Unified<kbd aria-hidden="true">u</kbd>
128	128		</a>
129		-	<a href="/diffs/commit/SHA40?view=split" class="btn vbtn" data-view="split" aria-keyshortcuts="d" data-fire="split" :aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false">Split<kbd aria-hidden="true">d</kbd>
	129	+	<a href="/diffs/commit/SHA40?view=split" class="btn vbtn" data-view="split" aria-keyshortcuts="d" :aria-disabled="q('#diffs').attr['data-mobile'] === 'true' ? 'true' : false" :title="q('#diffs').attr['data-mobile'] === 'true' ? 'Split view requires a wider screen' : 'Split view'" data-fire="split" :aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false">Split<kbd aria-hidden="true">d</kbd>
130	130		</a>
131	131		<button type="button" aria-keyshortcuts="x" data-js data-fire="collapse" class="btn">
132	132		<span hx-live="this.textContent = q('[data-file][open]').count \|\| !q('[data-file]').count ? 'Collapse all' : 'Expand all'">Collapse all</span>


@@ -121,12 +121,12 @@
121		</span>	121		</span>
122		<details class="menu vmenu">	122		<details class="menu vmenu">
123		<summary class="btn" aria-label="Diff view">	123		<summary class="btn" aria-label="Diff view">
124	-	<span hx-live="this.textContent = q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">Unified</span>	124	+	<span hx-live="this.textContent = q('#diffs').attr['data-mobile'] !== 'true' && q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">Unified</span>
125		</summary>	125		</summary>
126		<div class="menu-pop" role="group" aria-label="Diff view">	126		<div class="menu-pop" role="group" aria-label="Diff view">
127	-	<a href="/diffs/commit/SHA40?view=unified" class="btn vbtn" data-view="unified" aria-keyshortcuts="u" aria-current="true" data-fire="unified" :aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false">Unified<kbd aria-hidden="true">u</kbd>	127	+	<a href="/diffs/commit/SHA40?view=unified" class="btn vbtn" data-view="unified" aria-keyshortcuts="u" aria-current="true" data-fire="unified" :aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false">Unified<kbd aria-hidden="true">u</kbd>
128		</a>	128		</a>
129	-	<a href="/diffs/commit/SHA40?view=split" class="btn vbtn" data-view="split" aria-keyshortcuts="d" data-fire="split" :aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false">Split<kbd aria-hidden="true">d</kbd>	129	+	<a href="/diffs/commit/SHA40?view=split" class="btn vbtn" data-view="split" aria-keyshortcuts="d" :aria-disabled="q('#diffs').attr['data-mobile'] === 'true' ? 'true' : false" :title="q('#diffs').attr['data-mobile'] === 'true' ? 'Split view requires a wider screen' : 'Split view'" data-fire="split" :aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false">Split<kbd aria-hidden="true">d</kbd>
130		</a>	130		</a>
131		<button type="button" aria-keyshortcuts="x" data-js data-fire="collapse" class="btn">	131		<button type="button" aria-keyshortcuts="x" data-js data-fire="collapse" class="btn">
132		<span hx-live="this.textContent = q('[data-file][open]').count \|\| !q('[data-file]').count ? 'Collapse all' : 'Expand all'">Collapse all</span>	132		<span hx-live="this.textContent = q('[data-file][open]').count \|\| !q('[data-file]').count ? 'Collapse all' : 'Expand all'">Collapse all</span>

M internal/app/testdata/web/commit-trojan.html +3 -3


@@ -124,12 +124,12 @@
124	124		</span>
125	125		<details class="menu vmenu">
126	126		<summary class="btn" aria-label="Diff view">
127		-	<span hx-live="this.textContent = q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">Unified</span>
	127	+	<span hx-live="this.textContent = q('#diffs').attr['data-mobile'] !== 'true' && q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">Unified</span>
128	128		</summary>
129	129		<div class="menu-pop" role="group" aria-label="Diff view">
130		-	<a href="/diffs/commit/SHA40?view=unified" class="btn vbtn" data-view="unified" aria-keyshortcuts="u" aria-current="true" data-fire="unified" :aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false">Unified<kbd aria-hidden="true">u</kbd>
	130	+	<a href="/diffs/commit/SHA40?view=unified" class="btn vbtn" data-view="unified" aria-keyshortcuts="u" aria-current="true" data-fire="unified" :aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false">Unified<kbd aria-hidden="true">u</kbd>
131	131		</a>
132		-	<a href="/diffs/commit/SHA40?view=split" class="btn vbtn" data-view="split" aria-keyshortcuts="d" data-fire="split" :aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false">Split<kbd aria-hidden="true">d</kbd>
	132	+	<a href="/diffs/commit/SHA40?view=split" class="btn vbtn" data-view="split" aria-keyshortcuts="d" :aria-disabled="q('#diffs').attr['data-mobile'] === 'true' ? 'true' : false" :title="q('#diffs').attr['data-mobile'] === 'true' ? 'Split view requires a wider screen' : 'Split view'" data-fire="split" :aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false">Split<kbd aria-hidden="true">d</kbd>
133	133		</a>
134	134		<button type="button" aria-keyshortcuts="x" data-js data-fire="collapse" class="btn">
135	135		<span hx-live="this.textContent = q('[data-file][open]').count \|\| !q('[data-file]').count ? 'Collapse all' : 'Expand all'">Collapse all</span>


@@ -124,12 +124,12 @@
124		</span>	124		</span>
125		<details class="menu vmenu">	125		<details class="menu vmenu">
126		<summary class="btn" aria-label="Diff view">	126		<summary class="btn" aria-label="Diff view">
127	-	<span hx-live="this.textContent = q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">Unified</span>	127	+	<span hx-live="this.textContent = q('#diffs').attr['data-mobile'] !== 'true' && q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">Unified</span>
128		</summary>	128		</summary>
129		<div class="menu-pop" role="group" aria-label="Diff view">	129		<div class="menu-pop" role="group" aria-label="Diff view">
130	-	<a href="/diffs/commit/SHA40?view=unified" class="btn vbtn" data-view="unified" aria-keyshortcuts="u" aria-current="true" data-fire="unified" :aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false">Unified<kbd aria-hidden="true">u</kbd>	130	+	<a href="/diffs/commit/SHA40?view=unified" class="btn vbtn" data-view="unified" aria-keyshortcuts="u" aria-current="true" data-fire="unified" :aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false">Unified<kbd aria-hidden="true">u</kbd>
131		</a>	131		</a>
132	-	<a href="/diffs/commit/SHA40?view=split" class="btn vbtn" data-view="split" aria-keyshortcuts="d" data-fire="split" :aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false">Split<kbd aria-hidden="true">d</kbd>	132	+	<a href="/diffs/commit/SHA40?view=split" class="btn vbtn" data-view="split" aria-keyshortcuts="d" :aria-disabled="q('#diffs').attr['data-mobile'] === 'true' ? 'true' : false" :title="q('#diffs').attr['data-mobile'] === 'true' ? 'Split view requires a wider screen' : 'Split view'" data-fire="split" :aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false">Split<kbd aria-hidden="true">d</kbd>
133		</a>	133		</a>
134		<button type="button" aria-keyshortcuts="x" data-js data-fire="collapse" class="btn">	134		<button type="button" aria-keyshortcuts="x" data-js data-fire="collapse" class="btn">
135		<span hx-live="this.textContent = q('[data-file][open]').count \|\| !q('[data-file]').count ? 'Collapse all' : 'Expand all'">Collapse all</span>	135		<span hx-live="this.textContent = q('[data-file][open]').count \|\| !q('[data-file]').count ? 'Collapse all' : 'Expand all'">Collapse all</span>

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_events_test.go +12 -5


@@ -245,12 +245,19 @@ func TestWebEventsResumeAndGap(t *testing.T) {
245	245		}
246	246		s.cancel()
247	247
248		-	r := h.sse("topic=home", ids[0])
249		-	for _, want := range ids[1:] {
250		-	ev := r.next(t, watchWait)
251		-	assert.Equal(t, want, ev.id)
252		-	assert.Equal(t, "home-list", ev.name)
	248	+	// A replacement stream resumes via the URL; reconnect headers still win.
	249	+	for _, r := range []*sseStream{
	250	+	h.sse("topic=home&after="+ids[0], ""),
	251	+	h.sse("topic=home&after=invalid", ids[0]),
	252	+	} {
	253	+	for _, want := range ids[1:] {
	254	+	ev := r.next(t, watchWait)
	255	+	assert.Equal(t, want, ev.id)
	256	+	assert.Equal(t, "home-list", ev.name)
	257	+	}
	258	+	r.cancel()
253	259		}
	260	+	r := h.sse("topic=home", ids[2])
254	261		h.writeFile(wt, "live.txt", []byte("x\n"))
255	262		h.mustGit(wt, "push", "-q", h.urlAuth(adminToken, "/pub.git"), "main")
256	263		live := r.next(t, watchWait)

 	}
 	s.cancel()
-	r := h.sse("topic=home", ids[0])
+	// A replacement stream resumes via the URL; reconnect headers still win.
-	for _, want := range ids[1:] {
+	for _, r := range []*sseStream{
-		ev := r.next(t, watchWait)
+		h.sse("topic=home&after="+ids[0], ""),
-		assert.Equal(t, want, ev.id)
+		h.sse("topic=home&after=invalid", ids[0]),
-		assert.Equal(t, "home-list", ev.name)
+	} {
+		for _, want := range ids[1:] {
+			ev := r.next(t, watchWait)
+			assert.Equal(t, want, ev.id)
+			assert.Equal(t, "home-list", ev.name)
+		}
+		r.cancel()
 	}
+	r := h.sse("topic=home", ids[2])
 	h.writeFile(wt, "live.txt", []byte("x\n"))
 	h.mustGit(wt, "push", "-q", h.urlAuth(adminToken, "/pub.git"), "main")
 	live := r.next(t, watchWait)

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


@@ -335,7 +335,7 @@ func TestWebMergeRequestReviewAndFastForward(t *testing.T) {
335	335		all := b.get(base, as(token))
336	336		assert.Contains(t, all.body, `href="/proj/merge-requests/1/since"`)
337	337		assert.Contains(t, all.body, "since your last read")
338		-	assert.Contains(t, all.body, "<li data-new>", "the commit pushed since is marked")
	338	+	assert.Contains(t, all.body, "<tr data-new>", "the commit pushed since is marked")
339	339		assert.Contains(t, all.body, "data-read>Mark read")
340	340		assert.Contains(t, all.body, "outdated", "the notes were written on the earlier head")
341	341		since := b.get(base+"/since", as(token))

@@ -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")

 	all := b.get(base, as(token))
 	assert.Contains(t, all.body, `href="/proj/merge-requests/1/since"`)
 	assert.Contains(t, all.body, "since your last read")
-	assert.Contains(t, all.body, "<li data-new>", "the commit pushed since is marked")
+	assert.Contains(t, all.body, "<tr data-new>", "the commit pushed since is marked")
 	assert.Contains(t, all.body, "data-read>Mark read")
 	assert.Contains(t, all.body, "outdated", "the notes were written on the earlier head")
 	since := b.get(base+"/since", as(token))
 	r.writeFile(r.wt, "more.txt", []byte("more\n"))
 	r.mustGit(r.wt, "push", "-q", r.url, "feat/search")
-	ev = nextNamed(t, one, "mr-notice")
+	ev = nextNamed(t, one, "mr-head")
-	assert.Contains(t, ev.data, "the branch changed")
+	assert.Equal(t, `<div id="mr-head"></div>`, ev.data)
+	assert.NotContains(t, ev.data, "the branch changed")
 	r.cli(t, adminToken, "mr", "close", "proj", "1").ok(t)
 	assert.Contains(t, nextNamed(t, one, "mr-notice").data, "was closed")