Merge pull request #1025 from finitecomputer/claude/admin-glance-tiles

The admin page opens on a glance: who joined, what runs, what's in trouble

Author: futurepaul

cell/shell/admin.css

@@ -20,3 +20,10 @@ dl { display: grid; grid-template-columns: max-content 1fr; gap: .2rem 1rem; }
 dt { opacity: .7; }
 code, .mono { font-family: ui-monospace, monospace; font-size: .9em; }
 .lapsed { color: #c33; }
+#tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .6rem; margin: .75rem 0; }
+.tile { border: 1px solid #8884; border-radius: .5rem; padding: .6rem .75rem; }
+.tile .label { opacity: .7; font-size: .85rem; }
+.tile .big { font-size: 1.8rem; font-weight: 600; line-height: 1.2; }
+.tile .small { opacity: .8; font-size: .85rem; }
+section h2 { font-size: 1rem; margin: 1rem 0 .25rem; }
+.quiet { opacity: .6; font-size: .85rem; }

cell/shell/admin.html

@@ -11,7 +11,8 @@
 <header>
   <h1>fragment admin</h1>
   <nav id="tabs">
-    <button data-tab="people" class="on">People</button>
+    <button data-tab="glance" class="on">Glance</button>
+    <button data-tab="people">People</button>
     <button data-tab="orgs">Orgs</button>
     <button data-tab="trials">Trials</button>
     <button data-tab="health">Health</button>
@@ -21,7 +22,16 @@ <h1>fragment admin</h1>
 </header>
 <p id="status" role="status"></p>
 <main>
-  <section id="people">
+  <section id="glance">
+    <div id="tiles"></div>
+    <p id="glance-logs"></p>
+    <h2 id="trouble-head" hidden>In trouble, the last 24 hours</h2>
+    <table id="trouble" hidden><thead><tr><th>Who</th><th>Computer</th><th>What</th><th>Lines</th></tr></thead><tbody id="trouble-rows"></tbody></table>
+    <h2>New people</h2>
+    <table><thead><tr><th>Email</th><th>Joined</th><th>Seat</th><th>First agent</th><th>Computer up</th></tr></thead><tbody id="new-rows"></tbody></table>
+    <p id="glance-at" class="quiet"></p>
+  </section>
+  <section id="people" hidden>
     <form id="search"><input name="q" placeholder="email starts with…" autocomplete="off"> <button>Search</button></form>
     <form id="comp"><input name="email" type="email" placeholder="email" required>
       <select name="kind"><option value="seat_always_on">always-on seat</option><option value="seat">seat that sleeps (comps only)</option></select>

cell/shell/admin.js

@@ -1,5 +1,6 @@
 // The operators' admin page (docs/billing.md, "The operator's admin";
-// decision 59): people, orgs, trial codes, billing's health and the log
+// decision 59): a glance at who joined and what runs, people, orgs, trial
+// codes, billing's health and the log
 // of what operators did, through `/api/admin/*` with the operator's own
 // platform session (`x-fragment-shell`, same-origin only). The page is
 // served to an operator's session alone (anyone else gets the 404 of a
@@ -203,6 +204,51 @@ async function trials() {
   say(`${v.codes.length} codes`);
 }
 
+// ---- the glance: who joined, from the registry; what runs, from the
+// deployment's logs (`GET /api/admin/glance`). Read afresh each minute
+// while it is shown, never cached (Paul, 2026-11-04).
+const GLANCE_EVERY_MS = 60_000;
+const TROUBLE = { wont_wake: "won't wake", saves_failing: "a save failed", disk_filling: "disk nearly full" };
+let glanceTimer = null;
+
+function tile(label, big, small) {
+  const t = el("div", undefined, "tile");
+  t.append(el("div", label, "label"), el("div", String(big), "big"), el("div", small, "small"));
+  return t;
+}
+
+// a person in the glance opens their page, as the People tab does
+function openFromGlance(npub) {
+  return guard(async () => {
+    await show("people");
+    await openPerson(npub);
+  });
+}
+
+async function glance() {
+  const midnight = new Date();
+  midnight.setHours(0, 0, 0, 0);
+  const [v, h] = await Promise.all([api("GET", `/api/admin/glance?dayStart=${midnight.getTime()}`), api("GET", "/api/admin/health")]);
+  const logs = v.logs;
+  const read = logs.state === "read";
+  $("tiles").replaceChildren(
+    tile("Signups today", v.signups.today, `${v.signups.hour} in the last hour · ${v.signups.week} this week · ${v.signups.total} in all`),
+    tile("Computers awake now", read ? logs.computersAwakeNow : "–", read ? `${logs.computersAwakeToday} today · ${logs.computersAwakeWeek} this week` : "from the logs"),
+    tile("Fragments awake now", read ? logs.fragmentsAwakeNow : "–", read ? `${logs.fragmentsAwakeToday} today` : "from the logs"),
+    tile("Seats paid", h.seatsPaid, `${h.seatsComped} comped · ${h.orgsPaying} orgs paying`),
+    tile("Signed in, last 24 hours", v.signedIn.day, `${v.signedIn.week} in the last 7 days`),
+  );
+  $("glance-logs").textContent =
+    logs.state === "notConfigured" ? "Computers and fragments come from the deployment's logs, which aren't configured here (observability_read)." : logs.state === "failed" ? `The logs couldn't be read: ${logs.why}` : "";
+  const trouble = read ? logs.trouble : [];
+  $("trouble-head").hidden = $("trouble").hidden = trouble.length === 0;
+  $("trouble-rows").replaceChildren(...trouble.map((t) => row([t.email || t.npub || "no one's", el("code", t.computer), TROUBLE[t.kind] || t.kind, String(t.lines)], t.npub ? openFromGlance(t.npub) : undefined)));
+  const up = (p) => (p.computerUp == null ? "–" : p.computerUp ? "yes" : "not yet");
+  $("new-rows").replaceChildren(...v.newPeople.map((p) => row([p.email || p.npub, when(p.joinedAt), seatText(p.seat) || "none", p.agentAt ? when(p.agentAt) : "none", up(p)], openFromGlance(p.npub))));
+  $("glance-at").textContent = `Updated ${new Date(v.at).toLocaleTimeString()}; again each minute.`;
+  say("");
+}
+
 // ---- health and the log
 async function health() {
   const v = await api("GET", "/api/admin/health");
@@ -236,12 +282,15 @@ async function log(more = false) {
 }
 
 // ---- tabs
-const load = { people: () => people(), orgs: () => orgs(), trials, health, log: () => log() };
+const load = { glance, people: () => people(), orgs: () => orgs(), trials, health, log: () => log() };
 
 function show(tab) {
   for (const b of document.querySelectorAll("#tabs button")) b.classList.toggle("on", b.dataset.tab === tab);
   for (const s of document.querySelectorAll("main > section")) s.hidden = s.id !== tab;
   history.replaceState(null, "", `/admin#${tab}`);
+  // the glance reads again each minute while it is shown, and the page is seen
+  clearInterval(glanceTimer);
+  glanceTimer = tab === "glance" ? setInterval(() => document.hidden || guard(glance)(), GLANCE_EVERY_MS) : null;
   return guard(load[tab])();
 }
 
@@ -276,5 +325,5 @@ document.addEventListener("DOMContentLoaded", guard(async () => {
   $("people-more").addEventListener("click", guard(() => people(true)));
   $("orgs-more").addEventListener("click", guard(() => orgs(true)));
   $("log-more").addEventListener("click", guard(() => log(true)));
-  await show(location.hash.slice(1) in load ? location.hash.slice(1) : "people");
+  await show(location.hash.slice(1) in load ? location.hash.slice(1) : "glance");
 }));

crates/e2e/src/lanes/admin.rs

@@ -233,10 +233,55 @@ pub fn admin_page(s: &mut Suite, api: &Api) -> Result<()> {
     let session = api.sign_in("operator@e2e.test")?;
     let _ = api.approve(&session, &s.operator);
     b.set_cookie(&format!("{}/", api.base), "fragment_session", &session)?;
+    // the glance first, its default tab: a person whose computer the logs
+    // say is awake and won't wake (lines planted in the fake, a local run's)
+    let glancer = api.person()?;
+    let glancer_id = api.identity(&glancer)?;
+    let glancer_email = Api::email_of(&glancer);
+    let now = std::time::SystemTime::now().duration_since(std::time::UNIX_EPOCH)?.as_millis() as i64;
+    if !s.hosted() {
+        let computer = fragment_core::computer::default_computer_of(&glancer_id);
+        let script = crate::OBSERVABILITY_SCRIPT;
+        s.observability.log(now - 30_000, json!({ "$workers.scriptName": script, "computer": computer, "phase": { "phase": "awake" } }));
+        s.observability.log(now - 20_000, json!({ "$workers.scriptName": script, "computer": computer, "phase": { "phase": "failed" } }));
+    }
     let page = b.open(&format!("{}/admin", api.base))?;
-    let listed = b.until(&page, "document.querySelectorAll('#people-rows tr').length > 0 && /people/.test(document.getElementById('status').textContent)", wait);
+    let tiles = b.until(&page, "document.querySelectorAll('#tiles .tile').length === 5 && /Updated/.test(document.getElementById('glance-at').textContent)", wait);
+    let shown = b.eval(&page, "[...document.querySelectorAll('#tiles .tile')].map(t => t.querySelector('.label').textContent + ': ' + t.querySelector('.big').textContent)")?;
     let me = b.eval(&page, "document.getElementById('me').textContent")?;
-    s.ok("an operator's session opens the admin's page: it lists people, and says who they are", listed && me == "operator@e2e.test", &me);
+    s.ok("an operator's session opens the admin's page on its glance: five tiles, and says who they are", tiles && me == "operator@e2e.test", &shown);
+    // the glance as an operator sees it, for review
+    let _ = b.screenshot(&page, &s.dir("admin-page").join("glance.png"));
+    if !s.hosted() {
+        let day = b.eval(&page, "(() => { const d = new Date(); d.setHours(0, 0, 0, 0); return d.getTime(); })()")?;
+        let read = api.signed(&s.operator, "GET", &format!("/api/admin/glance?dayStart={day}"), None)?;
+        let awake = read.body["logs"]["computersAwakeNow"].as_u64().unwrap_or(0);
+        let rows = b.until(
+            &page,
+            &format!(
+                "[...document.querySelectorAll('#trouble-rows tr')].some(r => r.textContent.includes({glancer_email:?}) && r.textContent.includes(\"won't wake\")) && [...document.querySelectorAll('#new-rows tr')].some(r => r.textContent.includes({glancer_email:?}) && r.textContent.endsWith('yes'))"
+            ),
+            wait,
+        );
+        let tile = |b: &mut crate::browser::Browser| b.eval(&page, "[...document.querySelectorAll('#tiles .tile')].find(t => t.querySelector('.label').textContent === 'Computers awake now').querySelector('.big').textContent");
+        let before = tile(&mut b)?;
+        s.ok(
+            "its tiles are the glance's numbers, its trouble names the person whose computer won't wake, and its new people say whose computer came up",
+            rows && before == json!(awake.to_string()),
+            json!({ "page": shown, "glance": read.body["logs"] }),
+        );
+        // no cache: a computer awake since, and the glance read again
+        s.observability.log(now, json!({ "$workers.scriptName": crate::OBSERVABILITY_SCRIPT, "computer": "computer:000000000000000000000a11", "phase": { "phase": "awake" } }));
+        b.click(&page, "#tabs button[data-tab=glance]")?;
+        let again = b.until(&page, &format!("[...document.querySelectorAll('#tiles .tile')].find(t => t.querySelector('.label').textContent === 'Computers awake now')?.querySelector('.big').textContent === '{}'", awake + 1), wait);
+        s.ok("read again, the glance asks afresh: a computer awake since counts", again, tile(&mut b)?);
+        b.eval(&page, &format!("[...document.querySelectorAll('#trouble-rows tr')].find(r => r.textContent.includes({glancer_email:?})).click()"))?;
+        let opened = b.until(&page, &format!("!document.getElementById('people').hidden && !document.getElementById('person').hidden && document.getElementById('person').textContent.includes({glancer_email:?})"), wait);
+        s.ok("a person in trouble opens their page", opened, b.eval(&page, "document.getElementById('person').textContent")?);
+    }
+    b.click(&page, "#tabs button[data-tab=people]")?;
+    let listed = b.until(&page, "document.querySelectorAll('#people-rows tr').length > 0 && /people/.test(document.getElementById('status').textContent)", wait);
+    s.ok("its People tab lists people", listed, b.eval(&page, "document.getElementById('status').textContent")?);
 
     let email = format!("admin-page-{}@e2e.test", &Keys::generate().pubkey_hex()[..10]);
     b.eval(&page, &format!("(() => {{ const f = document.getElementById('comp'); f.email.value = {email:?}; f.kind.value = 'seat_always_on'; f.requestSubmit(); }})()"))?;