Add a collapsed "Seen" section to the control board page (#1503)

Jason asked for a way to recall rows he marked Seen. The page now lists
them under a collapsed "Seen (N)" section between "Waiting on you" and
"By project", each with Unsee. Open/closed state survives the 10-second
refresh because only the section body is re-rendered. Page-only change
plus one static test. Tests: control-board 64/64, registry 69/69.
Review APPROVED, no findings.

Co-Authored-By: Claude Fable 5.1 <[email protected]>

packages/control-board/src/page.html

@@ -35,6 +35,11 @@
   .error-banner{margin:12px 0;padding:10px 14px;border-radius:var(--radius);border:1px solid var(--danger);
     background:color-mix(in srgb,var(--danger) 10%,var(--surface));color:var(--danger);font-size:.9rem}
   .empty{color:var(--muted);font-style:italic}
+  #seenDetails summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px}
+  #seenDetails summary::-webkit-details-marker{display:none}
+  #seenDetails summary::before{content:"\25B8";color:var(--muted);font-size:.9em}
+  #seenDetails[open] summary::before{content:"\25BE"}
+  #seenDetails summary h2{display:inline;margin:0}
   .table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface)}
   table{width:100%;border-collapse:collapse;font-size:.88rem}
   th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
@@ -84,6 +89,12 @@
     <h2 id="waiting-h">Waiting on you</h2>
     <div id="waitingBody"></div>
   </section>
+  <section aria-labelledby="seen-h">
+    <details id="seenDetails">
+      <summary><h2 id="seen-h">Seen</h2></summary>
+      <div id="seenBody"></div>
+    </details>
+  </section>
   <section aria-labelledby="projects-h">
     <h2 id="projects-h">By project</h2>
     <div id="projectsBody"></div>
@@ -102,6 +113,8 @@
   var pauseBtn = document.getElementById("pauseBtn");
   var errorBanner = document.getElementById("errorBanner");
   var waitingBody = document.getElementById("waitingBody");
+  var seenBody = document.getElementById("seenBody");
+  var seenHeading = document.getElementById("seen-h");
   var projectsBody = document.getElementById("projectsBody");
   var footer = document.getElementById("footer");
   var main = document.getElementById("main");
@@ -204,6 +217,27 @@
     return main + detail;
   }
 
+  // Rows you marked Seen, in one place, so they can be found and put back.
+  // Collapsed by default; the open/closed choice survives a refresh.
+  function renderSeen(data) {
+    var list = (data.sessions || []).filter(function (r) { return r.seen; });
+    list.sort(function (a, b) {
+      var aa = a.ageSeconds === null || a.ageSeconds === undefined ? Infinity : a.ageSeconds;
+      var bb = b.ageSeconds === null || b.ageSeconds === undefined ? Infinity : b.ageSeconds;
+      return aa - bb;
+    });
+    seenHeading.textContent = "Seen (" + list.length + ")";
+    if (list.length === 0) {
+      seenBody.innerHTML = '<p class="empty">Nothing is marked seen. Rows you mark come back here, and return to "Waiting on you" on their own when the agent writes again.</p>';
+      return;
+    }
+    var rows = list.map(function (r) { return buildRowPair(r, true); }).join("");
+    seenBody.innerHTML =
+      '<div class="table-wrap"><table><thead><tr>' +
+      "<th scope=\"col\">Project</th><th scope=\"col\">Agent</th><th scope=\"col\">State</th><th scope=\"col\">Age</th><th scope=\"col\">Last message</th>" +
+      "</tr></thead><tbody>" + rows + "</tbody></table></div>";
+  }
+
   function renderWaiting(data) {
     var list = (data.sessions || []).filter(function (r) { return r.waitingOnYou; });
     list.sort(function (a, b) {
@@ -273,6 +307,7 @@
   function renderAll() {
     rowIdx = 0;
     renderWaiting(lastData);
+    renderSeen(lastData);
     renderProjects(lastData);
     renderFooter(lastData);
   }