seisin 0.2.0 → 0.4.0

package/src/walls.js

@@ -36,6 +36,7 @@
 import { openSync, readSync, closeSync, statSync } from "node:fs";
 import { read } from "./log.js";
 import { explain } from "./owners.js";
+import { STALE_RUNS, RUN_GAP_MS, runsAfter } from "./requests.js";
 
 /** A wall is something you hit more than once. Once is information; twice is a pattern. */
 export const MIN_HITS = 2;
@@ -48,8 +49,12 @@ export const MIN_HITS = 2;
  * different repositories are two walls, and merging them hides which one was
  * hit.
  */
-export function walls(config, role, { file, min = MIN_HITS, since = null, limit = 6 } = {}) {
-  const denied = read(file, { role, verdict: "denied", ...(since ? { since } : {}) });
+export function walls(config, role, { file, entries = null, min = MIN_HITS, since = null, limit = 6, fresh = false } = {}) {
+  // `entries`: the log already read, for a caller asking about every role at
+  // once (the console asks for 32 on a real policy) — one read instead of 32.
+  const denied = entries
+    ? entries.filter((e) => e.role === role && e.verdict === "denied" && (!since || e.at >= since))
+    : read(file, { role, verdict: "denied", ...(since ? { since } : {}) });
 
   const byKey = new Map();
   for (const e of denied) {
@@ -69,8 +74,16 @@ export function walls(config, role, { file, min = MIN_HITS, since = null, limit
     if (verdict.allowed) continue;
     out.push({ ...w, reason: verdict.reason, owners: verdict.owners });
   }
-  out.sort((a, b) => b.times - a.times || a.target.localeCompare(b.target));
-  return limit > 0 ? out.slice(0, limit) : out;
+  // A wall the role stopped hitting — it ran STALE_RUNS times since, refused
+  // elsewhere but not here — is still true and no longer worth saying. Same
+  // rule as an old request. `fresh` drops them; otherwise they are marked.
+  for (const w of out) {
+    const n = runsAfter(denied, Date.parse(w.lastAt), RUN_GAP_MS);
+    if (n >= STALE_RUNS) w.stale = { runs: n };
+  }
+  const kept = fresh ? out.filter((w) => !w.stale) : out;
+  kept.sort((a, b) => b.times - a.times || a.target.localeCompare(b.target));
+  return limit > 0 ? kept.slice(0, limit) : kept;
 }
 
 /**
@@ -160,7 +173,8 @@ export function render(list) {
   ];
   for (const w of list) {
     lines.push(`  ${w.times}× ${w.action} ${w.target}`);
-    lines.push(`      ${w.reason}`);
+    // The reason for an owned path starts with the path again; the owner is the news.
+    lines.push(`      ${w.owners?.length ? `belongs to ${w.owners.join(", ")}` : w.reason}`);
   }
   const n = wasted(list);
   // Said to the agent, not about it. One that can see what retrying cost has a

package/ui/favicon.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="8" fill="#12161c"/><g clip-path="url(#p)"><clipPath id="p"><rect x="6" y="6" width="20" height="20" rx="4"/></clipPath><rect x="6" y="6" width="9" height="11" fill="#3fb950"/></g><rect x="6" y="6" width="20" height="20" rx="4" fill="none" stroke="#e6edf3" stroke-width="2.6"/><path d="M15 6v11M6 17h20" stroke="#e6edf3" stroke-width="2.6" stroke-linecap="square"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="7" fill="#1f2328"/><path d="M16 5.5C8 5.5 8 16 16 16S24 26.5 16 26.5H26.5V5.5Z" fill="#2da44e"/><path d="M16 5.5C8 5.5 8 16 16 16S24 26.5 16 26.5" fill="none" stroke="#fff" stroke-width="2.8" stroke-linecap="round"/></svg>

package/ui/index.html

@@ -4,12 +4,12 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>seisin console</title>
-<!-- A plot map, which is what the word means: seisin is the legal term for possession
-     of a freehold estate in LAND. The square is the repo, the lines divide it into
-     parcels, and one parcel is claimed. Two strokes and one fill so the divisions
-     survive at 16px, where a favicon actually lives. Also in ui/favicon.svg for anyone
-     who wants the file; inline here so the console needs no second route to serve it. -->
-<link rel="icon" href="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Crect%20width%3D%2232%22%20height%3D%2232%22%20rx%3D%228%22%20fill%3D%22%2312161c%22%2F%3E%3Cg%20clip-path%3D%22url%28%23p%29%22%3E%3CclipPath%20id%3D%22p%22%3E%3Crect%20x%3D%226%22%20y%3D%226%22%20width%3D%2220%22%20height%3D%2220%22%20rx%3D%224%22%2F%3E%3C%2FclipPath%3E%3Crect%20x%3D%226%22%20y%3D%226%22%20width%3D%229%22%20height%3D%2211%22%20fill%3D%22%233fb950%22%2F%3E%3C%2Fg%3E%3Crect%20x%3D%226%22%20y%3D%226%22%20width%3D%2220%22%20height%3D%2220%22%20rx%3D%224%22%20fill%3D%22none%22%20stroke%3D%22%23e6edf3%22%20stroke-width%3D%222.6%22%2F%3E%3Cpath%20d%3D%22M15%206v11M6%2017h20%22%20stroke%3D%22%23e6edf3%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22square%22%2F%3E%3C%2Fsvg%3E">
+<!-- A boundary, which is what the word is about: seisin is the legal term for who
+     actually holds a piece of LAND. The S is a property line splitting one plot between
+     two holders, and the filled side is held. One stroke and one fill so it survives at
+     16px, where a favicon actually lives. Also in ui/favicon.svg for anyone who wants
+     the file; inline here so the console needs no second route to serve it. -->
+<link rel="icon" href="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Crect%20width%3D%2232%22%20height%3D%2232%22%20rx%3D%227%22%20fill%3D%22%231f2328%22%2F%3E%3Cpath%20d%3D%22M16%205.5C8%205.5%208%2016%2016%2016S24%2026.5%2016%2026.5H26.5V5.5Z%22%20fill%3D%22%232da44e%22%2F%3E%3Cpath%20d%3D%22M16%205.5C8%205.5%208%2016%2016%2016S24%2026.5%2016%2026.5%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222.8%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E">
 <meta name="description" content="Which folders each agent writes, which keys it may read, and whose a path is when the answer is no.">
 <meta name="color-scheme" content="light dark">
 <style>
@@ -60,6 +60,8 @@ body{margin:0;background:var(--bg);color:var(--fg);
 .brand{padding:15px 14px 13px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
 .brand b{font-size:15px;font-weight:600;letter-spacing:-.01em}
 .brand small{font-size:11px;color:var(--mid);display:block;margin-top:1px}
+.brand .id{display:flex;align-items:center;gap:10px}
+.brand .mark{width:28px;height:28px;flex:none}
 .theme{display:flex;gap:2px;background:var(--hover);border-radius:6px;padding:2px}
 .theme button{flex:1;border:0;background:none;color:var(--mid);padding:4px 0;border-radius:4px;
   cursor:pointer;font:inherit;font-size:12px}
@@ -87,6 +89,15 @@ button.btn.warn{border-color:var(--amber);color:var(--amber)}
 button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
 
 .cards{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
+/* Time window: quick presets plus a free "from". Filters what comes from the log. */
+.range{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--mid)}
+.range .seg{display:flex;gap:2px;background:var(--hover);border-radius:6px;padding:2px}
+.range .seg button{border:0;background:none;color:var(--mid);padding:4px 10px;border-radius:4px;
+  cursor:pointer;font:inherit;font-size:12px}
+.range .seg button.on{background:var(--panel);color:var(--fg);box-shadow:0 1px 2px #0002}
+.range input{font:inherit;font-size:12px;padding:4px 8px;border:1px solid var(--line2);
+  border-radius:6px;background:var(--bg);color:var(--fg)}
+.range input.on{border-color:var(--fg)}
 .card{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--line2);
   border-radius:8px;padding:14px 16px;min-height:96px;display:flex;flex-direction:column}
 .card.g{border-left-color:var(--green)} .card.a{border-left-color:var(--amber)} .card.b{border-left-color:var(--blue)}
@@ -145,6 +156,9 @@ button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid var(
   justify-content:space-between;gap:12px}
 .box>header h2{font-size:13px;font-weight:600;margin:0}
 .box>header .note{font-size:11px;color:var(--dim)}
+.box>header .bulk{margin-left:auto;display:flex;gap:6px;align-items:center}
+.box>header .bulk[hidden]{display:none}
+.box>header .bulk input{font-size:12px;padding:4px 6px;min-width:180px}
 
 .scrollx{overflow-x:auto}
 table{width:100%;border-collapse:collapse;font-size:13px;min-width:720px}
@@ -255,8 +269,11 @@ button.btn:active,button.tag:active,button.add:active,button.sw:active{transform
 
 @media (max-width:980px){.two{grid-template-columns:1fr}}
 @media (max-width:720px){
-  .frame{grid-template-columns:1fr}
-  .side{border-right:0;border-bottom:1px solid var(--line)}
+  /* minmax(0,1fr), not 1fr: a bare 1fr never shrinks below its widest child's
+     min-content, and the nav's unwrapped links made the whole page 793px wide on a
+     375px phone. The tabs scroll inside .list instead. */
+  .frame{grid-template-columns:minmax(0,1fr)}
+  .side{border-right:0;border-bottom:1px solid var(--line);min-width:0}
   .side .list{display:flex;overflow-x:auto;padding:6px 8px}
   .side .cap{display:none}
   .side a{border-left:0;border-bottom:2px solid transparent;white-space:nowrap}
@@ -268,6 +285,7 @@ button.btn:active,button.tag:active,button.add:active,button.sw:active{transform
   /* Requests. A queue nobody opens is not human-in-the-loop, so it looks like
      something waiting rather than another table of facts. */
   .req{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border-top:1px solid var(--line)}
+  .req.stale .who{opacity:.6}
   .req:first-child{border-top:0}
   .req .who{flex:1;min-width:0}
   .req .who b{font-weight:600}
@@ -286,7 +304,7 @@ button.btn:active,button.tag:active,button.add:active,button.sw:active{transform
 
   <nav class="side">
     <div class="brand">
-      <div><b>seisin</b><small id="source">folders and keys, per agent</small></div>
+      <div class="id"><svg class="mark" viewBox="0 0 32 32" aria-hidden="true"><rect width="32" height="32" rx="7" fill="var(--fg)"/><path d="M16 5.5C8 5.5 8 16 16 16S24 26.5 16 26.5H26.5V5.5Z" fill="var(--green)"/><path d="M16 5.5C8 5.5 8 16 16 16S24 26.5 16 26.5" fill="none" stroke="var(--bg)" stroke-width="2.8" stroke-linecap="round"/></svg><div><b>seisin</b><small id="source">folders and keys, per agent</small></div></div>
       <div class="theme" role="group" aria-label="Theme">
         <button type="button" id="t-light">light</button>
         <button type="button" id="t-dark">dark</button>
@@ -330,6 +348,19 @@ button.btn:active,button.tag:active,button.add:active,button.sw:active{transform
          Each one is a link to the screen that explains it. A number you cannot
          act on is decoration; a number that takes you to the thing it counts
          is the top of a path. -->
+    <div class="range" id="range" hidden>
+      <span>Window</span>
+      <div class="seg" role="group" aria-label="Time window">
+        <button type="button" data-r="1h">1h</button>
+        <button type="button" data-r="4h">4h</button>
+        <button type="button" data-r="24h">24h</button>
+        <button type="button" data-r="7d">7d</button>
+        <button type="button" data-r="30d">30d</button>
+        <button type="button" data-r="all">All</button>
+      </div>
+      <label>from <input type="datetime-local" id="range-from" aria-label="From"></label>
+    </div>
+
     <div class="cards" id="kpis">
       <a class="card kpi" href="#requests" id="k-wait">
         <h2>waiting on you</h2><div class="n" id="c-wait">0</div><div class="s" id="c-wait-s">nothing to decide</div></a>
@@ -387,6 +418,10 @@ button.btn:active,button.tag:active,button.add:active,button.sw:active{transform
         <header>
           <h2>Pending decisions</h2>
           <span class="note">granting edits seisin.toml · here or in the terminal, never through MCP</span>
+          <span class="bulk" id="bulk" hidden>
+            <input id="why-all" placeholder="why, for all of them" aria-label="reason for declining all">
+            <button class="btn warn" id="decline-all" type="button">Decline all</button>
+          </span>
         </header>
         <div id="reqs"></div>
       </div>
@@ -456,7 +491,7 @@ button.btn:active,button.tag:active,button.add:active,button.sw:active{transform
     <div class="foot">
       <b id="foot-mode">Console preview.</b> <span id="foot-text">Opened as a file, this page edits a policy in memory and shows what
       would be generated. Copy the <b>seisin.toml</b> above to keep a change.</span><br>
-      The JSON matches <b>@anthropic-ai/sandbox-runtime 0.0.76</b>, whose schema the test suite exercises against the real binary.
+      The JSON matches <b>@anthropic-ai/sandbox-runtime 0.0.77</b>, whose schema the test suite exercises against the real binary.
     </div>
   </main>
 </div>
@@ -668,14 +703,15 @@ button.btn:active,button.tag:active,button.add:active,button.sw:active{transform
     }
     L.push("{");
     L.push('  <span class="k">"network"</span>: {');
-    L.push('    "allowedDomains": ["github.com"],');
+    var lp=(r.localPorts||[]).map(function(n){return '"localhost:'+Number(n)+'"';});
+    L.push('    "allowedDomains": ["github.com"'+(lp.length?', <span class="g">'+lp.join(', ')+'</span>':'')+']'+(lp.length?',  <span class="c">// local_ports, through the proxy</span>':','));
     L.push('    "deniedDomains": [], "allowUnixSockets": [],');
-    L.push('    "allowLocalBinding": false');
+    L.push('    "allowLocalBinding": '+(r.localBinding?'<span class="d">true</span>  <span class="c">// can reach every localhost port (macOS)</span>':'false'));
     L.push("  },");
     L.push('  <span class="k">"filesystem"</span>: {');
     // KEYDIR comes from seisin.toml, which is a file the console may be
     // pointed at without having written it. Unescaped it was HTML injection
-    // into a page that carries SEISIN_TOKEN — and that token approves grants.
+    // into a page that holds the run's token — and that token approves grants.
     L.push('    <span class="d">"denyRead"</span>: ["'+esc(KEYDIR)+'"],');
     if(r.keys.length){
       L.push('    <span class="g">"allowRead"</span>: [');
@@ -690,8 +726,13 @@ button.btn:active,button.tag:active,button.add:active,button.sw:active{transform
     });
     else L.push('      <span class="c">// no territory</span>');
     L.push("    ],");
-    L.push('    "denyWrite": []');
-    L.push("  }");
+    if((r.neverWrites||[]).length){
+      L.push('    <span class="d">"denyWrite"</span>: [  <span class="c">// never_writes</span>');
+      r.neverWrites.forEach(function(p,i){ L.push('      "'+esc(p.replace(/\/\*\*$/,""))+'"'+(i<r.neverWrites.length-1?",":"")); });
+      L.push("    ]");
+    } else L.push('    "denyWrite": []');
+    L.push("  }"+(r.trustd?",":""));
+    if(r.trustd) L.push('  <span class="d">"enableWeakerNetworkIsolation"</span>: true  <span class="c">// trustd = true</span>');
     L.push("}");
     document.getElementById("cfg").innerHTML=L.join("\n");
   }
@@ -851,7 +892,7 @@ button.btn:active,button.tag:active,button.add:active,button.sw:active{transform
               "somebody claims them.";
     document.getElementById("ca-lede").innerHTML = lede;
     var win = document.getElementById("dn-window");
-    if (win) win.textContent = f.total.toLocaleString() + " denials \u00b7 " +
+    if (win) win.textContent = rangeLabel() + " \u00b7 " + f.total.toLocaleString() + " denials \u00b7 " +
       (f.distinct || f.causes.length).toLocaleString() + " distinct paths";
 
     var max = top.times || 1;
@@ -978,7 +1019,8 @@ button.btn:active,button.tag:active,button.add:active,button.sw:active{transform
     set("k-open", off ? "alarm" : "calm", off,
         off ? (off === 1 ? "role nothing is enforcing" : "roles nothing is enforcing") : "every role confined");
     set("k-ref", f.total ? "live" : "calm", f.total.toLocaleString(),
-        f.total ? (f.distinct || f.causes.length).toLocaleString() + " distinct paths" : "nothing was denied");
+        (f.total ? (f.distinct || f.causes.length).toLocaleString() + " distinct paths" : "nothing was denied") +
+        (RANGE === "all" ? "" : " \u00b7 " + rangeLabel()));
     // The shape, not the size: one name at 74% is a tooling problem, the same
     // volume spread thin is a territory question, so the caption carries the name.
     set("k-conc", fam && fam.share >= 0.4 ? "live" : "calm",
@@ -1014,11 +1056,13 @@ button.btn:active,button.tag:active,button.add:active,button.sw:active{transform
     host.innerHTML = REQS.map(function(r, i){
       var owners = (r.owners && r.owners.length) ? " — belongs to <b>" + esc(r.owners.join(", ")) + "</b>" : "";
       var times = r.times > 1 ? ' · <span class="asked">asked ' + r.times + "×</span>" : "";
-      return '<div class="req">' +
+      // Marked, not moved: Approve and Decline post this row's number.
+      var stale = r.stale ? ' · not asked again in ' + Number(r.stale.runs) + ' runs since — likely no longer needed' : "";
+      return '<div class="req' + (r.stale ? ' stale' : '') + '">' +
         '<div class="who">' +
           "<div><b>" + esc(r.role) + "</b> wants to " + esc(r.action) +
             ' <span class="path">' + esc(r.grant) + "</span>" + owners + "</div>" +
-          '<div class="sub">first asked over ' + esc(r.target) + times + "</div>" +
+          '<div class="sub">first asked over ' + esc(r.target) + times + stale + "</div>" +
         "</div>" +
         '<div class="act">' +
           '<input id="why-' + i + '" placeholder="why — this outlives you" aria-label="reason">' +
@@ -1031,6 +1075,48 @@ button.btn:active,button.tag:active,button.add:active,button.sw:active{transform
     host.querySelectorAll("button[data-n]").forEach(function(b){
       b.addEventListener("click", function(){ act(b); });
     });
+    drawBulk();
+  }
+
+  /**
+   * Decline every request on screen — two clicks, no dialog.
+   *
+   * There is no "approve all" on purpose: a grant is read one at a time. The
+   * keys sent are the ones drawn now, so a request that arrives in between is
+   * not refused unseen.
+   */
+  function drawBulk(){
+    var bulk = document.getElementById("bulk");
+    var btn = document.getElementById("decline-all");
+    bulk.hidden = REQS.length < 2;
+    btn.disabled = false;
+    btn.dataset.armed = "";
+    btn.textContent = "Decline all (" + REQS.length + ")";
+    btn.onclick = async function(){
+      if (!btn.dataset.armed) {
+        btn.dataset.armed = "1";
+        btn.textContent = "Click again to decline " + REQS.length;
+        setTimeout(function(){ if (btn.dataset.armed) { btn.dataset.armed = ""; btn.textContent = "Decline all (" + REQS.length + ")"; } }, 4000);
+        return;
+      }
+      btn.disabled = true;
+      try {
+        var r = await fetch("/api/decline-all", {
+          method: "POST",
+          headers: { "content-type": "application/json", "x-seisin-token": TOKEN },
+          body: JSON.stringify({ keys: REQS.map(function(q){ return q.key; }),
+                                 reason: (document.getElementById("why-all") || {}).value || "declined in bulk from the console" })
+        });
+        var out = await r.json();
+        if (!r.ok) { var err = new Error(out.error || "refused"); err.status = r.status; throw err; }
+        await reload();
+      } catch (e) {
+        btn.disabled = false;
+        btn.textContent = "Decline all (" + REQS.length + ")";
+        var note = document.querySelector("#requests .note");
+        if (note) { note.textContent = whyFailed(e, e.status); note.style.color = "var(--amber)"; }
+      }
+    };
   }
 
   /**
@@ -1047,18 +1133,18 @@ button.btn:active,button.tag:active,button.add:active,button.sw:active{transform
     try {
       var r = await fetch("/api/decide", {
         method: "POST",
-        headers: { "content-type": "application/json", "x-seisin-token": window.SEISIN_TOKEN || "" },
+        headers: { "content-type": "application/json", "x-seisin-token": TOKEN },
         body: JSON.stringify({ number: n, decision: btn.dataset.d, reason: why })
       });
       var out = await r.json();
-      if (!r.ok) throw new Error(out.error || "denied");
+      if (!r.ok) { var err = new Error(out.error || "denied"); err.status = r.status; throw err; }
       // Re-read rather than patch: the grant rewrote seisin.toml, so the
       // territory on screen is stale too, not just the queue.
       await reload();
     } catch (e) {
       row.querySelectorAll("button,input").forEach(function(el){ el.disabled = false; });
       var s = row.querySelector(".sub");
-      s.innerHTML = '<span style="color:var(--amber)">' + esc(e.message) + "</span>";
+      s.innerHTML = '<span style="color:var(--amber)">' + esc(whyFailed(e, e.status)) + "</span>";
     }
   }
 
@@ -1085,16 +1171,112 @@ function draw(){
    * you can look at before installing anything. What it must never do is show
    * example data while looking live, so the label says which one you are in.
    */
+  /**
+   * This run's token, from the link `seisin ui` opened.
+   *
+   * It arrives in the fragment (#t=…), which the browser never sends to any
+   * server, and it is moved into this tab's storage and wiped from the address
+   * bar and the history entry at once. The server no longer puts it in the
+   * page: anything that could GET "/" used to walk away with it.
+   */
+  var TOKEN = (function(){
+    var m = /(?:^#|&)t=([a-f0-9]+)/.exec(location.hash || "");
+    try {
+      if (m) { sessionStorage.setItem("seisin-token", m[1]); }
+      var t = m ? m[1] : (sessionStorage.getItem("seisin-token") || "");
+      if (m) history.replaceState(null, "", location.pathname + location.search);
+      return t;
+    } catch (_) { return m ? m[1] : ""; }
+  })();
+
+  /**
+   * What to tell a person when a request to this server fails.
+   *
+   * "Failed to fetch" was all the browser said when the console had been
+   * restarted under an open tab — the server was gone, or back with a new
+   * token that this tab does not hold. Both have the same fix, and it is not
+   * obvious from either message.
+   */
+  function whyFailed(e, status){
+    if (status === 403)
+      return "this tab's link is stale — the console restarted. Open the new link `seisin ui` printed.";
+    if (e && /network|fetch/i.test(String(e.message || e)))
+      return "the console did not answer. If `seisin ui` restarted, open the new link it printed.";
+    return (e && e.message) || "failed";
+  }
+
+  /* ── time window ──────────────────────────────────────────────────────── */
+  // "1h" … "30d", "all", or "from:<ISO>". Remembered per browser, as a convenience.
+  var RANGE = "all";
+  try { RANGE = localStorage.getItem("seisin.range") || "all"; } catch (_) {}
+  var SPANS = { "1h": 36e5, "4h": 4 * 36e5, "24h": 24 * 36e5, "7d": 7 * 864e5, "30d": 30 * 864e5 };
+
+  // Worked out on every request, so "last 4h" keeps moving while the page is open.
+  function sinceIso(){
+    if (SPANS[RANGE]) return new Date(Date.now() - SPANS[RANGE]).toISOString();
+    if (RANGE.indexOf("from:") === 0) return RANGE.slice(5);
+    return null;
+  }
+  function stateUrl(){
+    var s = sinceIso();
+    return "/api/state" + (s ? "?since=" + encodeURIComponent(s) : "");
+  }
+  function rangeLabel(){
+    if (SPANS[RANGE]) return "last " + RANGE;
+    if (RANGE.indexOf("from:") === 0) return "since " + new Date(RANGE.slice(5)).toLocaleString();
+    return "all time";
+  }
+  function drawRange(){
+    document.querySelectorAll("#range .seg button").forEach(function(b){
+      b.classList.toggle("on", b.dataset.r === RANGE);
+    });
+    var from = document.getElementById("range-from");
+    from.classList.toggle("on", RANGE.indexOf("from:") === 0);
+    if (RANGE.indexOf("from:") !== 0) from.value = "";
+  }
+  function setRange(r){
+    RANGE = r;
+    try { localStorage.setItem("seisin.range", r); } catch (_) {}
+    drawRange();
+    reload().catch(function(){ /* server went away: keep what is on screen */ });
+  }
+  document.querySelectorAll("#range .seg button").forEach(function(b){
+    b.addEventListener("click", function(){ setRange(b.dataset.r); });
+  });
+  document.getElementById("range-from").addEventListener("change", function(e){
+    var t = Date.parse(e.target.value);   // datetime-local is local time, which Date.parse reads as such
+    setRange(isNaN(t) ? "all" : "from:" + new Date(t).toISOString());
+  });
+
   async function boot(){
-    let s = null;
+    let s = null, stale = false;
     try {
-      const r = await fetch("/api/state", { cache: "no-store" });
+      const r = await fetch(stateUrl(), { cache: "no-store", headers: { "x-seisin-token": TOKEN } });
       if (r.ok) s = await r.json();
+      // A live server that refuses this tab's token: `seisin ui` was restarted
+      // and minted a new one. Falling back to the example here showed a policy
+      // that is not the reader's, one F5 after a restart, with nothing saying why.
+      stale = r.status === 403;
     } catch (_) { /* opened as a file: stay in demo */ }
 
     const label = document.getElementById("source");
+    if (stale) {
+      label.textContent = "link from an earlier run";
+      label.style.color = "var(--amber)";
+      document.querySelector("main").innerHTML =
+        '<div class="box" style="padding:22px 24px;max-width:640px">' +
+        '<h2 style="margin:0 0 8px;font-size:17px">This tab has the link from an earlier run</h2>' +
+        '<p style="margin:0 0 8px">`seisin ui` was restarted, and every run gets a new token. ' +
+        'Open the new link it printed in the terminal (it starts with ' +
+        '<code>http://127.0.0.1:' + location.port + '/#t=</code>).</p>' +
+        '<p style="margin:0;color:var(--mid)">Nothing here is shown until then, so this page never ' +
+        'passes the example policy off as yours.</p></div>';
+      return;
+    }
     if (!s || s.error) {
-      label.textContent = "example policy — not your repo";
+      label.textContent = location.protocol.startsWith("http") && !TOKEN
+        ? "no token — open the link `seisin ui` printed · showing an example"
+        : "example policy — not your repo";
       label.style.color = "var(--amber)";
       draw();
       return;
@@ -1107,7 +1289,13 @@ function draw(){
       writes: r.writes.slice(),
       keys: r.keys.map(k => k.replace(/\.[^.]+$/, "")),
       sandbox: true,
-      blocks: r.blocks
+      blocks: r.blocks,
+      // The three role keys that change the profile, drawn from what the
+      // server says rather than typed into this page (review of 2026-09-22, #5).
+      neverWrites: r.neverWrites || [],
+      localBinding: !!r.localBinding,
+      localPorts: (r.localPorts || []).slice(),
+      trustd: !!r.trustd
     }));
     LOG = fromServer(s.log);
     REQS = s.requests || [];
@@ -1131,6 +1319,8 @@ function draw(){
     // everything" against a real repo is not a preview. `dataset.live` is what `show()`
     // reads, so the router never brings it back when you return to Roles.
     document.getElementById("kill").dataset.live = "1";
+    document.getElementById("range").hidden = false;
+    drawRange();
     document.getElementById("kill").hidden = true;
     document.getElementById("toml-note").textContent = "the file on disk, as it stands";
     document.getElementById("foot-mode").textContent = "Live.";
@@ -1227,7 +1417,7 @@ function route(){ return (location.hash || "#requests").slice(1); }
 
   async function refreshLog(){
     try {
-      const r = await fetch("/api/state", { cache: "no-store" });
+      const r = await fetch(stateUrl(), { cache: "no-store", headers: { "x-seisin-token": TOKEN } });
       if (!r.ok) return;
       const s = await r.json();
       if (s.error) return;
@@ -1250,7 +1440,7 @@ function route(){ return (location.hash || "#requests").slice(1); }
 
   /** Everything again, after a decision rewrote the policy on disk. */
   async function reload(){
-    const r = await fetch("/api/state", { cache: "no-store" });
+    const r = await fetch(stateUrl(), { cache: "no-store", headers: { "x-seisin-token": TOKEN } });
     const s = await r.json();
     if (s.error) return;
     KEYDIR = (s.keyDirs && s.keyDirs[0]) || ".secrets";
@@ -1262,8 +1452,11 @@ function route(){ return (location.hash || "#requests").slice(1); }
     }));
     LOG = fromServer(s.log);
     REQS = s.requests || [];
+    CAUSES = s.causes || null;
+    WALLS = s.walls || {};
     ONDISK = s.toml || null;
     draw();
+    drawKpis();
   }
 
   boot();