From 9c85ddfb701c5e40da5ff0d77b01f589a8438041 Mon Sep 17 00:00:00 2001
From: Nigel <nigel.eml@icloud.com>
Date: Wed, 23 Sep 2026 03:01:19 +0100
Subject: [PATCH 1/2] Say which view the dashboard is on, reach the machine's
 settings, and stop pushing views down

Four faults found by walking every view in a browser against a sandboxed
dashboard, measuring rather than looking.

Where notices go, the trigger token, the listen address and the office
art could not be changed from the dashboard at all. The fold holding
them and the Settings page were both id="settings"; getElementById
returns the first, so fillSettings unhid the page instead of the fold,
and the fold stayed hidden under the runs list from the day the Settings
page arrived (0324df9, 20 Sep). It is id="machine" now and moves onto
the Settings page, as "What this machine is set to", when that page is
first drawn; until then a rule keeps it out of sight in the runs pane.

Switching view changed nothing a screen reader would say. Focus stayed
on the button, the heading read "Runs on this machine" over the office,
the graph and the timeline, and the address never changed, so Back and a
bookmark could not reach a view. Each view now has its own heading; a
view somebody chose takes the focus at that heading (not one the page
opens on, nor one Back returns to); the address carries #office, #graph
and so on, the page opens on the view it names, and Back and Forward
move between them. The token stays in the query.

Starting a team, making one, scheduling one, clearing runs out and how
the roles have done sat above every view, so the office, the graph and
the timeline began 280 pixels down. They show on the list only.

A short view pushed the whole page down. The page is a grid at least a
window tall, and with nothing saying which row takes the spare height
the header row grew to 192 pixels over 69 of header on Waiting and
Settings. The content row takes it now.

Checked in Chrome at 1280 by 800: every view's heading, focus and
address; the ledger at 109 px on every view, Waiting included (224
before); the start form on the list alone; opening on #waiting; Back
from the graph to the list; the notice and listen controls visible on
Settings and absent from the list before and after visiting it.
---
 src/Loadout.Core/Teams/Daemon/dashboard.html  | 108 +++++++++++++++++-
 .../Integration/DashboardServerTests.cs       |  53 ++++++++-
 2 files changed, 155 insertions(+), 6 deletions(-)

diff --git a/src/Loadout.Core/Teams/Daemon/dashboard.html b/src/Loadout.Core/Teams/Daemon/dashboard.html
index f8f1926e..71be5c57 100644
--- a/src/Loadout.Core/Teams/Daemon/dashboard.html
+++ b/src/Loadout.Core/Teams/Daemon/dashboard.html
@@ -381,6 +381,16 @@
 
   .sheet-buttons { display: flex; gap: 0.6rem; flex-wrap: wrap; }
 
+  /* Starting a team, making one, scheduling one, clearing runs out and how the
+     roles have done are all about the list of runs. Above the office, the
+     graph or the timeline they pushed the view itself most of a screen down. */
+  .pane[data-view]:not([data-view="list"]) :is(#starting, #doing, #clearing, #roles) { display: none; }
+
+  /* What this machine is set to belongs on the Settings page, and is moved
+     there when that page is first drawn. Until then it waits in the runs pane,
+     where showing it would put machine settings under the list of runs. */
+  section.pane > #machine { display: none; }
+
   /* The questions are written with line breaks in them - a goal, then its
      criteria one to a line - and were laid out by the browser's own box. */
   .sheet .question { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
@@ -1531,6 +1541,11 @@
     display: grid;
     grid-template-columns: var(--rail) minmax(0, 1fr);
     grid-template-areas: "rail head" "rail main";
+
+    /* The spare height goes to the content. Unsaid, a short view - Waiting,
+       Settings - shared it out between the rows, and the header row grew to
+       192 pixels over 69 of header, pushing everything under it down. */
+    grid-template-rows: auto minmax(0, 1fr);
     align-items: start;
     min-height: 100vh;
   }
@@ -1623,6 +1638,7 @@
     [data-presentation="rich"] body {
       grid-template-columns: minmax(0, 1fr);
       grid-template-areas: "rail" "head" "main";
+      grid-template-rows: auto auto minmax(0, 1fr);
     }
 
     [data-presentation="rich"] #shell {
@@ -2487,7 +2503,7 @@ <h2 id="runs">Runs on this machine</h2>
       own form, which says so in its heading. And a failure comes back to the
       page.
     -->
-    <details class="start">
+    <details class="start" id="starting">
       <summary>Run a team</summary>
 
       <!--
@@ -2918,7 +2934,7 @@ <h2 id="planning-heading">Run a team on a schedule</h2>
       dashboard refuses the POST, and a pane of controls that are always refused
       is the fault this whole design keeps coming back to.
     -->
-    <details class="start" id="settings" hidden>
+    <details class="start" id="machine" hidden>
       <summary>What this machine is set to</summary>
 
       <div class="fields">
@@ -4873,7 +4889,31 @@ <h2 id="detail-heading">Run</h2>
     if (shown) { drawOpenScreens(shown); }
   }
 
-  function showView(which) {
+  // What each view is called at the top of the pane. It read "Runs on this
+  // machine" over all of them, so switching view changed nothing a screen
+  // reader would say and nothing a glance would catch.
+  function headingFor(box) {
+    return {
+      office: "The office",
+      graph: "Who asked whom",
+      when: "When runs ran",
+      waiting: "Waiting to run",
+      terminal: "Terminal"
+    }[box] || "Runs on this machine";
+  }
+
+  // Which view the address names, or -1 for none of them.
+  function viewInAddress() {
+    var named = location.hash.replace(/^#/, "");
+
+    for (var i = 0; i < views.length; i++) {
+      if (views[i].box === named) { return i; }
+    }
+
+    return -1;
+  }
+
+  function showView(which, person) {
     if (board.on) {
       // Take the screens back off the board before showing one on its own.
       board.on = false;
@@ -4900,7 +4940,36 @@ <h2 id="detail-heading">Run</h2>
     // none of it belongs above a page of preferences.
     onlySettings(views[which].box === "settings");
 
+    var heading = document.getElementById("runs");
+
+    if (heading) {
+      heading.textContent = headingFor(views[which].box);
+      heading.parentElement.setAttribute("data-view", views[which].box);
+    }
+
     if (shown) { views[which].draw(shown); }
+
+    // Moved to when somebody chose it, and not when the page opens on it: a
+    // view that changes and leaves focus on the button it was chosen with is
+    // one a keyboard user has to go and find, and a screen reader says
+    // nothing about. Settings draws its heading above, so it exists by now.
+    if (person) {
+      var top = views[which].box === "settings"
+        ? document.getElementById("settings-heading")
+        : heading;
+
+      if (top) {
+        top.setAttribute("tabindex", "-1");
+        heading = top;
+        heading.focus();
+      }
+    }
+
+    // The address says which view this is, so Back goes to the last one and a
+    // bookmark opens this one. The token stays where it is, in the query.
+    if (person && location.hash !== "#" + views[which].box) {
+      history.pushState(null, "", "#" + views[which].box);
+    }
   }
 
   // The runs as they were last drawn, so switching view does not have to wait
@@ -4970,7 +5039,7 @@ <h2 id="detail-heading">Run</h2>
   (function () {
     views.forEach(function (one, i) {
       document.getElementById(one.button).addEventListener("click", function () {
-        showView(i);
+        showView(i, true);
       });
     });
 
@@ -4982,6 +5051,16 @@ <h2 id="detail-heading">Run</h2>
       railUp();
       plainly();
       askTheMachine();
+
+      // Opened on the view the address names, and moved by Back and Forward.
+      // Neither takes the focus: nobody chose them on this page.
+      var named = viewInAddress();
+
+      if (named > 0) { showView(named, false); }
+
+      window.addEventListener("popstate", function () {
+        showView(Math.max(0, viewInAddress()), false);
+      });
     }
 
     if (solo) {
@@ -6566,6 +6645,20 @@ <h2 id="detail-heading">Run</h2>
 
     if (prefs) { telling.appendChild(prefs); }
 
+    // ---- this machine ----
+    // Where notices go, what may start a run from outside, where this page
+    // listens and which office art it draws. It sat under the runs list, where
+    // nothing about it belonged, and is settings - of the machine rather than
+    // the screen, which is why it says so and types a command for each change.
+    // Moved rather than rebuilt, so its controls keep what they were wired to;
+    // fillSettings still decides whether it shows at all.
+    var machine = document.getElementById("machine");
+
+    if (machine) {
+      page.appendChild(machine);
+      machine.open = true;
+    }
+
     // ---- what is not here ----
     var elsewhere = group(page, "Everything else");
 
@@ -7773,7 +7866,12 @@ <h2 id="detail-heading">Run</h2>
   */
   function fillSettings() {
     return api("/api/settings").then(function (answer) {
-      var fold = document.getElementById("settings");
+      // Its own id. It was "settings", the same as the Settings page, and
+      // getElementById returns the first: this unhid the page rather than the
+      // fold, and where notices go, the trigger token, the listen address and
+      // the office art were out of reach from the dashboard from the day the
+      // Settings page arrived.
+      var fold = document.getElementById("machine");
 
       if (!fold) { return; }
 
diff --git a/tests/Loadout.Tests/Integration/DashboardServerTests.cs b/tests/Loadout.Tests/Integration/DashboardServerTests.cs
index 7d60e370..2f4c80e6 100644
--- a/tests/Loadout.Tests/Integration/DashboardServerTests.cs
+++ b/tests/Loadout.Tests/Integration/DashboardServerTests.cs
@@ -1213,6 +1213,57 @@ public async Task An_office_with_no_art_still_holds_its_desks()
         text.Should().NotContain(".desk .card");
     }
 
+    [Fact]
+    public async Task Every_id_on_the_page_is_used_once()
+    {
+        // The Settings page and the "What this machine is set to" fold were both
+        // id="settings". getElementById returns the first, so the code meant to
+        // show the fold unhid the page instead, and where notices go, the
+        // trigger token, the listen address and the office art could not be
+        // reached from the dashboard at all.
+        var text = await (await GetAsync("/")).Content.ReadAsStringAsync();
+
+        var ids = System.Text.RegularExpressions.Regex.Matches(text, "\\sid=\"([^\"]+)\"")
+            .Select(match => match.Groups[1].Value)
+            .GroupBy(id => id)
+            .Where(group => group.Count() > 1)
+            .Select(group => group.Key);
+
+        ids.Should().BeEmpty("an id names one element");
+
+        // And the machine's settings wait out of sight until the Settings page
+        // takes them, rather than appearing under the list of runs.
+        text.Should().Contain("section.pane > #machine { display: none; }");
+    }
+
+    [Fact]
+    public async Task A_view_says_what_it_is_and_takes_the_focus()
+    {
+        // Switching view left focus on the button and the heading reading
+        // "Runs on this machine" over the office, the graph and the timeline,
+        // so somebody on a screen reader was told nothing had changed.
+        var text = await (await GetAsync("/")).Content.ReadAsStringAsync();
+
+        text.Should().Contain("function headingFor(box)");
+        text.Should().Contain("heading.textContent = headingFor(views[which].box);");
+        text.Should().Contain("top.setAttribute(\"tabindex\", \"-1\");");
+
+        // And the address says which view it is, so Back and a bookmark work.
+        text.Should().Contain("history.pushState(null, \"\", \"#\" + views[which].box);");
+        text.Should().Contain("window.addEventListener(\"popstate\"");
+    }
+
+    [Fact]
+    public async Task A_short_view_does_not_push_the_page_down()
+    {
+        // The page is a grid at least a window tall. With nothing saying which
+        // row takes the spare height, a short view - Waiting, Settings - shared
+        // it out, and the header row grew to 192 pixels over 69 of header.
+        var text = await (await GetAsync("/")).Content.ReadAsStringAsync();
+
+        text.Should().Contain("grid-template-rows: auto minmax(0, 1fr);");
+    }
+
     [Fact]
     public async Task What_you_just_did_is_said_somewhere_the_refresh_does_not_overwrite()
     {
@@ -1697,7 +1748,7 @@ public async Task The_page_offers_a_way_to_start_one()
 
         // Folded away, because the page is for watching what is already going
         // and a form that is always open is one somebody fills in by accident.
-        text.Should().Contain("<details class=\"start\">");
+        text.Should().Contain("<details class=\"start\" id=\"starting\">");
 
         // "Run a team", not "Start a team". The old heading sat above a form
         // asking for a team name, what it was for and a project, and somebody

From 493601e62cfdcaaf49417304e890767115599ebf Mon Sep 17 00:00:00 2001
From: Nigel <nigel.eml@icloud.com>
Date: Wed, 23 Sep 2026 03:06:04 +0100
Subject: [PATCH 2/2] Say in the dashboard guide that each screen has an
 address

So a reader knows they can bookmark #office and that Back returns to the
screen they were on, and that choosing a screen moves the focus to its
heading, which is what a screen reader reads out.
---
 docs/guides/dashboard.md | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/docs/guides/dashboard.md b/docs/guides/dashboard.md
index 6d46ee3d..caaa25c9 100644
--- a/docs/guides/dashboard.md
+++ b/docs/guides/dashboard.md
@@ -90,6 +90,11 @@ runs in different ways; *Waiting* shows what hasn't become a run yet, and
 None of these screens can change anything. Every control lives in the detail
 pane, so answering a gate is built once rather than several times.
 
+Each screen has its own place in the address - `#office`, `#graph`, `#when`,
+`#waiting`, `#terminal` - so you can bookmark one, and Back takes you to the
+screen you were on before. Choosing a screen moves the keyboard focus to its
+heading, which is also what a screen reader reads out.
+
 ### 5. Open a run and answer a gate
 
 Select a run. It opens in the detail pane.