Compare commits

..
Author SHA1 Message Date
shcizo 96caf4a8a7 fix(master): keep the scroll position when toggling auto mode on the overview
The mode switch was a plain form POST answered with 303 to /, so the browser
navigated to a fresh page at the top. The form now also posts via htmx and
the handler returns the services fragment for htmx requests, so the list is
swapped in place; search and machine filter stay applied. A refused auto
answers 409 with HX-Redirect to the service page, since htmx does not swap
4xx responses. Without JS the form still posts and redirects as before.

#services gets overflow-anchor:none. htmx inserts the new list before
removing the old one, and Chrome anchored scrolling on the focused switch,
so on narrow screens the page jumped to the bottom after a click, and after
any SSE refresh while a switch had focus.

Claude-Session: https://claude.ai/code/session_01GAZsp3P7Qto6JnhipxWUJQ
2026-10-13 12:59:10 +02:00
4 changed files with 59 additions and 1 deletions
+14
View File
@@ -628,6 +628,10 @@ func (s *Server) setMode(w http.ResponseWriter, r *http.Request) {
}
var nu *model.NotUpdatableError
if err := s.jobs.AutoAllowed(svc); errors.As(err, &nu) {
if isHTMX(r) {
// htmx does not swap a 409; the service page shows the reason.
w.Header().Set("HX-Redirect", "/services/"+strconv.FormatInt(id, 10))
}
s.renderServiceError(w, r, id, http.StatusConflict, "Cannot enable auto: "+nu.Reason+".")
return
} else if err != nil {
@@ -641,6 +645,11 @@ func (s *Server) setMode(w http.ResponseWriter, r *http.Request) {
}
s.broker.Publish(events.Services)
if r.PostFormValue("return") == "overview" {
if isHTMX(r) {
// Swap the list in place instead of redirecting, so the page keeps its scroll position.
s.servicesFragment(w, r)
return
}
http.Redirect(w, r, "/", http.StatusSeeOther)
return
}
@@ -881,6 +890,11 @@ func (s *Server) fail(w http.ResponseWriter, err error) {
http.Error(w, "internal error", http.StatusInternalServerError)
}
// isHTMX reports whether r was sent by htmx rather than by a plain form submit.
func isHTMX(r *http.Request) bool {
return r.Header.Get("HX-Request") == "true"
}
// agentSnippet is the compose file shown once when an agent is added.
func agentSnippet(cfg Config, token string) string {
return fmt.Sprintf(`services:
+41
View File
@@ -707,6 +707,47 @@ func TestSetMode_ReturnToOverview(t *testing.T) {
assert.Equal(t, "auto", store.modeOf(1))
}
func postModeHTMX(t *testing.T, srv *httptest.Server, id string, form url.Values) (*http.Response, string) {
t.Helper()
form.Set("csrf_token", "csrf")
req, err := http.NewRequest(http.MethodPost, srv.URL+"/services/"+id+"/mode", strings.NewReader(form.Encode()))
require.NoError(t, err)
req.Header.Set("Content-Type", "application/x-www-form-urlencoded")
req.Header.Set("HX-Request", "true")
resp, err := noRedirectClient().Do(req)
require.NoError(t, err)
defer resp.Body.Close()
body, _ := io.ReadAll(resp.Body)
return resp, string(body)
}
func TestSetMode_HTMXFromOverviewReturnsServicesFragment(t *testing.T) {
srv, store, _, broker, _ := newTestEnv(t)
sub, cancel := broker.Subscribe()
defer cancel()
resp, body := postModeHTMX(t, srv, "1", url.Values{"mode": {"auto"}, "return": {"overview"}})
assert.Equal(t, http.StatusOK, resp.StatusCode, "no redirect, so the page keeps its scroll position")
assert.Empty(t, resp.Header.Get("Location"))
assert.NotContains(t, body, "<html")
assert.Contains(t, body, `id="machines" hx-swap-oob`)
assert.Contains(t, body, `action="/services/1/mode"`)
assert.Equal(t, "auto", store.modeOf(1))
assert.Equal(t, events.Services, <-sub)
}
func TestSetMode_HTMXRefusedRedirectsToService(t *testing.T) {
srv, store, _, _, jobs := newTestEnv(t)
jobs.autoErr = &model.NotUpdatableError{Reason: model.ReasonBuilt}
resp, _ := postModeHTMX(t, srv, "1", url.Values{"mode": {"auto"}, "return": {"overview"}})
assert.Equal(t, http.StatusConflict, resp.StatusCode)
assert.Equal(t, "/services/1", resp.Header.Get("HX-Redirect"), "htmx does not swap a 409, so send the user to the page that shows why")
assert.Equal(t, "manual", store.modeOf(1))
}
func TestSetMode_AutoRefusedShows409(t *testing.T) {
srv, store, _, _, jobs := newTestEnv(t)
jobs.autoErr = &model.NotUpdatableError{Reason: model.ReasonBuilt}
+3
View File
@@ -66,6 +66,9 @@ summary.btn::-webkit-details-marker{display:none}
.seg button{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:0;border-radius:5px;background:transparent;color:var(--mut);font:500 12.5px var(--sans);cursor:pointer}
.seg button:hover{color:var(--fg)}
.seg button[aria-pressed=true]{background:var(--hover);color:var(--fg);box-shadow:inset 0 0 0 1px var(--line2)}
/* htmx inserts the new list before removing the old one; scroll anchoring on the
focused switch would scroll by the list height and then land at the bottom. */
#services{overflow-anchor:none}
.grp{margin-top:28px}
.gh{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding-bottom:8px;border-bottom:2px solid var(--fg)}
.gh h2{margin:0;font:700 20px var(--sans);letter-spacing:-.015em}
+1 -1
View File
@@ -83,7 +83,7 @@
{{if .Self}}<span class="tag f-out">This agent</span>{{end}}
</div>
<div class="mode">
<form method="post" action="/services/{{.ID}}/mode">
<form method="post" action="/services/{{.ID}}/mode" hx-post="/services/{{.ID}}/mode" hx-target="#services" hx-swap="innerHTML">
<input type="hidden" name="csrf_token" value="{{$.CSRF}}">
<input type="hidden" name="return" value="overview">
{{if eq .UpdateMode "auto"}}<input type="hidden" name="mode" value="manual">