seisin 0.1.1 → 0.3.0

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}
@@ -86,7 +88,16 @@ button.btn:hover{background:var(--hover)}
 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(168px,1fr))}
+.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)}
@@ -94,12 +105,60 @@ button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid var(
 .card .n{font-size:28px;font-weight:600;line-height:1;margin-top:12px;font-variant-numeric:tabular-nums;min-width:2.2ch}
 .card .s{font-size:11px;color:var(--mid);margin-top:5px;min-height:16px}
 .card.g .n{color:var(--green)} .card.a .n{color:var(--amber)} .card.b .n{color:var(--blue)}
+.card.kpi{text-decoration:none;color:inherit;transition:border-color .12s,transform .12s}
+.card.kpi:hover{border-color:var(--line2)}
+.card.kpi:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
+/* Only when it is not zero. An indicator that shouts at rest is one people
+   learn to ignore, and these two are the ones that mean "do something". */
+.card.kpi.live{border-left-color:var(--blue)} .card.kpi.live .n{color:var(--blue)}
+.card.kpi.alarm{border-left-color:var(--amber)} .card.kpi.alarm .n{color:var(--amber)}
+.card.kpi.calm .n{color:var(--dim)}
+/* Left border follows the state too. A card that is amber at zero has cried
+   wolf before you read the number. */
+.card.kpi{border-left-color:var(--line2)}
+
+/* The shape of the day. A hundred identical rows is not a reading, so each cause gets a
+   bar proportional to the others and the eye does the arithmetic. */
+.lede{font-size:14px;line-height:1.55;margin:0 0 16px;color:var(--fg)}
+.lede b{font-weight:600}
+.lede .q{color:var(--mid)}
+.lede code{font-family:var(--mono);color:var(--fg);font-size:13px}
+.pad{padding:16px}
+.bars{display:flex;flex-direction:column;gap:10px}
+.bar{display:grid;grid-template-columns:1fr 132px;gap:14px;align-items:baseline}
+.bar .lbl{min-width:0;font-size:12px}
+.bar .p{font-family:var(--mono);color:var(--fg);overflow-wrap:anywhere}
+.bar .who{color:var(--mid);font-size:11px;margin-top:2px}
+.bar .t{height:6px;border-radius:3px;background:var(--line);overflow:hidden;margin-top:6px}
+.bar .f{height:100%;border-radius:3px;background:var(--blue);display:block}
+.bar.cold .f{background:var(--line2)}
+.bar .num{text-align:right;font-variant-numeric:tabular-nums;font-size:12px;color:var(--fg)}
+.bar .num s{display:block;color:var(--mid);font-size:11px;text-decoration:none;margin-top:2px}
+.bar.cold .p,.bar.cold .num{color:var(--mid)}
+.fam{padding:14px 0;border-top:1px solid var(--line)}
+.fam:first-child{border-top:0;padding-top:0}
+.fam-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
+.fam-h code{font-family:var(--mono);font-size:13px;color:var(--fg);font-weight:600}
+.fam-h .num{font-variant-numeric:tabular-nums;font-size:13px;color:var(--fg);white-space:nowrap}
+.fam-h .num s{color:var(--mid);text-decoration:none;font-size:11px;margin-left:4px}
+.fam .t{height:5px;border-radius:3px;background:var(--line);overflow:hidden;margin:8px 0 6px}
+.fam .f{display:block;height:100%;border-radius:3px;background:var(--blue)}
+.fam .who{font-size:11px;color:var(--mid)}
+.places{margin:8px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px}
+.places li{display:flex;gap:12px;justify-content:space-between;align-items:baseline;
+  font-family:var(--mono);font-size:11px;color:var(--mid)}
+.places li span{overflow-wrap:anywhere}
+.places li em{font-family:inherit;font-style:normal;color:var(--dim)}
+.places li b{color:var(--fg);font-variant-numeric:tabular-nums;white-space:nowrap}
 
 .box{background:var(--panel);border:1px solid var(--line);border-radius:8px;overflow:hidden}
 .box>header{padding:10px 14px;border-bottom:1px solid var(--line);display:flex;align-items:baseline;
   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}
@@ -154,7 +213,7 @@ pre .c{color:var(--dim)} pre .k{color:var(--blue)} pre .d{color:var(--amber)} pr
 .ev .who em{font-style:normal;color:var(--blue);font-weight:600}
 .ev .when{font-size:11px;color:var(--dim);flex:0 0 auto;font-variant-numeric:tabular-nums}
 /* Which writer saw it. The hook reports an attempt and can be talked around; the kernel
-   reports a refusal and cannot. When the two disagree about a run the reader needs to know
+   reports a denial and cannot. When the two disagree about a run the reader needs to know
    which line carries more weight, so the one that does is the one that is marked — a small
    word in the margin, not a column. Lines without the field render exactly as before. */
 .ev .src{font:10px/1.6 var(--mono);color:var(--dim);flex:0 0 auto;padding:0 5px;
@@ -201,6 +260,8 @@ button.btn:active,button.tag:active,button.add:active,button.sw:active{transform
 /* What a view says when it has nothing to show. Not a shrug: the two reasons a log is empty
    need different answers, so it names them. */
 .blank{margin:0;padding:34px 16px;color:var(--fg);font-size:13px;line-height:1.7;text-align:center}
+.blank.quiet{padding:16px;font-size:12px;color:var(--mid)}
+.blank.quiet span{display:inline}
 .blank span{color:var(--mid);display:block;margin-top:6px;font-size:12px;
   max-width:58ch;margin-inline:auto;text-wrap:pretty}
 .blank code{font-family:var(--mono);font-size:11.5px;background:var(--hover);
@@ -208,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}
@@ -221,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}
@@ -239,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>
@@ -248,8 +313,10 @@ button.btn:active,button.tag:active,button.add:active,button.sw:active{transform
     </div>
     <div class="list">
       <div class="cap">Policy</div>
-      <a class="on" href="#policy" aria-current="page"><i>⚷</i>Roles<span class="pin" id="pin"></span></a>
-      <a href="#requests" id="nav-req"><i>⚖</i>Requests<span class="pin" id="req-pin"></span></a>
+      <a class="on" href="#requests" id="nav-req" aria-current="page"><i>⚖</i>Waiting on you<span class="pin" id="req-pin"></span></a>
+      <a href="#denied"><i>⊘</i>Denied<span class="pin" id="dn-pin"></span></a>
+      <a href="#walls"><i>▦</i>Walls<span class="pin" id="wl-pin"></span></a>
+      <a href="#policy"><i>⚷</i>Roles<span class="pin" id="pin"></span></a>
       <a href="#activity"><i>◷</i>Activity</a>
       <a href="#configfile"><i>⚙</i>Config file</a>
       <div class="cap">Docs</div>
@@ -270,15 +337,45 @@ button.btn:active,button.tag:active,button.add:active,button.sw:active{transform
       <button class="btn warn" id="kill" type="button">Unsandbox everything</button>
     </div>
 
-    <section data-view="roles">
-    <div class="cards">
-      <div class="card"><h2>roles</h2><div class="n" id="c-roles">0</div><div class="s">declared in seisin.toml</div></div>
-      <div class="card g"><h2>sandboxed</h2><div class="n" id="c-on">0</div><div class="s">enforced by the OS</div></div>
-      <div class="card a"><h2>unsandboxed</h2><div class="n" id="c-off">0</div><div class="s" id="c-off-s">nothing enforces these</div></div>
-      <div class="card"><h2>no keys</h2><div class="n" id="c-nokeys">0</div><div class="s">declare none</div></div>
-      <div class="card b"><h2>blocks today</h2><div class="n" id="c-blocks">0</div><div class="s">asked outside territory</div></div>
+    <!-- OUTSIDE the views, so the same five numbers are on every screen.
+         They used to live inside Roles, which meant the only live one —
+         denials — was invisible from the three other pages, and four of the
+         five were constants: 31 roles, 31 sandboxed, 0 unsandboxed, 31 with no
+         keys. A number that reads the same every day is not an indicator, it
+         is a caption, and putting it beside a live one teaches people to stop
+         reading the row.
+
+         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>
+      <a class="card kpi" href="#policy" id="k-open">
+        <h2>unsandboxed</h2><div class="n" id="c-off">0</div><div class="s" id="c-off-s">none are open</div></a>
+      <a class="card kpi" href="#denied" id="k-ref">
+        <h2>denied</h2><div class="n" id="c-blocks">0</div><div class="s" id="c-blocks-s">in this window</div></a>
+      <a class="card kpi" href="#causes" id="k-conc">
+        <h2>one cause</h2><div class="n" id="c-conc">—</div><div class="s" id="c-conc-s">of all denials</div></a>
+      <a class="card kpi" href="#walls" id="k-retry">
+        <h2>spent retrying</h2><div class="n" id="c-retry">0</div><div class="s" id="c-retry-s">calls on known walls</div></a>
+    </div>
+
+    <section data-view="roles">
+
     <div class="box">
       <header id="policy">
         <h2>Policy</h2>
@@ -312,16 +409,69 @@ button.btn:active,button.tag:active,button.add:active,button.sw:active{transform
     </div>
     </section>
 
+    <!-- One view per KPI. A number you can click is the top of a path; a number
+         you cannot is decoration, and the five up there all pointed at two
+         pages. Each of these is the detail of exactly one of them. -->
+
     <section data-view="requests" hidden>
       <div class="box" id="requests">
         <header>
-          <h2>Waiting on you</h2>
-          <span class="note">what an agent asked for and cannot have yet — approving happens here or in the terminal, never through MCP</span>
+          <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>
     </section>
 
+    <!-- KPI: denied. Grouped by WHAT was denied, never by who asked — per role
+         it is the same list a hundred times over. -->
+    <section data-view="denied" hidden>
+      <div class="box">
+        <header>
+          <h2>Denied, by path</h2>
+          <span class="note" id="dn-window"></span>
+        </header>
+        <div class="pad">
+          <p class="lede" id="ca-lede"></p>
+          <div class="bars" id="ca-bars"></div>
+        </div>
+      </div>
+    </section>
+
+    <!-- KPI: one cause. The same denials one level coarser — by the name at the
+         end of the path. This is the cut that says whether a day was a tooling
+         problem or a territory one, and by path alone it reads backwards. -->
+    <section data-view="causes" hidden>
+      <div class="box">
+        <header>
+          <h2>Denied, by name</h2>
+          <span class="note">the same denials, grouped one level coarser</span>
+        </header>
+        <div class="pad">
+          <p class="lede" id="fa-lede"></p>
+          <div id="fa-list"></div>
+        </div>
+      </div>
+    </section>
+
+    <!-- KPI: spent retrying. -->
+    <section data-view="walls" hidden>
+      <div class="box">
+        <header>
+          <h2>Walls</h2>
+          <span class="note">denied twice or more, and the policy still denies it</span>
+        </header>
+        <div class="pad">
+          <p class="lede" id="wl-lede"></p>
+          <div id="wl-list"></div>
+        </div>
+      </div>
+    </section>
+
     <section data-view="activity" hidden>
       <div class="box">
         <header><h2>Activity</h2><span class="note">every decision, with its owner</span></header>
@@ -341,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>
@@ -526,12 +676,7 @@ button.btn:active,button.tag:active,button.add:active,button.sw:active{transform
 
     var on=0,off=0,nok=0,bl=0;
     ROLES.forEach(function(r){r.sandbox?on++:off++; if(!r.keys.length)nok++; bl+=r.blocks;});
-    document.getElementById("c-roles").textContent=ROLES.length;
-    document.getElementById("c-on").textContent=on;
-    document.getElementById("c-off").textContent=off;
-    document.getElementById("c-off-s").textContent=off?"nothing enforces these":"none are open";
-    document.getElementById("c-nokeys").textContent=nok;
-    document.getElementById("c-blocks").textContent=bl;
+    drawKpis();
     var pin=document.getElementById("pin");
     if(off){pin.textContent=off;pin.hidden=false;}else{pin.hidden=true;}
     var k=document.getElementById("kill");
@@ -558,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>: [');
@@ -580,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");
   }
@@ -650,7 +801,7 @@ button.btn:active,button.tag:active,button.add:active,button.sw:active{transform
       // Only the kernel's own lines get the mark. A hook line and an older line look the
       // same as they always did — the absence is the default, not a third state.
       var src=e.source==="kernel"
-        ? '<span class="src" title="Recorded from the kernel: what the OS actually refused, '+
+        ? '<span class="src" title="Recorded from the kernel: what the OS actually denied, '+
           'whether or not the hook saw the attempt. This line cannot be talked around.">kernel</span>'
         : "";
       d.innerHTML="<b>"+label+'</b><span class="body"><span class="what">'+line+"</span>"+who+
@@ -679,6 +830,8 @@ button.btn:active,button.tag:active,button.add:active,button.sw:active{transform
 
   var REQS = [];
   var ONDISK = null;   // the file on disk, when there is one
+  var CAUSES = null;   // this window's denials, grouped by what was denied
+  var WALLS = {};      // per role, what it keeps being denied and still would be
 
   /**
    * The queue, as something a person acts on.
@@ -686,6 +839,201 @@ button.btn:active,button.tag:active,button.add:active,button.sw:active{transform
    * Hidden entirely when empty rather than shown as an empty table: the point
    * of this panel is to be noticed on the days it has something in it.
    */
+  /**
+   * The shape of the window, grouped by cause.
+   *
+   * The reading comes first and the bars second, because the number that
+   * matters is almost never "how many" — it is "how much of it is one thing".
+   * A day where three quarters of the denials are a single lock file is a
+   * day where nobody disputed any territory, and that sentence is the whole
+   * value of grouping. It is written out rather than left for the reader to
+   * infer from twelve bars.
+   */
+  function drawCauses(){
+    var f = CAUSES;
+    var lede = document.getElementById("ca-lede");
+    if (!f || !f.total) {
+      if (lede) lede.textContent = "Nothing was denied in this window.";
+      var bars = document.getElementById("ca-bars"); if (bars) bars.innerHTML = "";
+      return;
+    }
+    var top = f.causes[0];
+    var fam = (f.families || [])[0];
+    var famShare = fam ? Math.round(fam.share * 100) : 0;
+    var lede = "<b>" + f.total.toLocaleString() + "</b> denial" + (f.total === 1 ? "" : "s") +
+      " in this window, over <b>" + (f.distinct || f.causes.length).toLocaleString() +
+      "</b> distinct path" + ((f.distinct || f.causes.length) === 1 ? "" : "s") + ". ";
+    // The reading has to be taken at the level of the NAME, not the path, or it comes out
+    // backwards. Measured here: six of the top seven causes were the same lock file in six
+    // different repositories and no single path passed 17% \u2014 so "no cause dominates" was
+    // what the arithmetic said and the opposite of the truth. One KIND of thing at that scale
+    // is a tooling problem with a mechanical fix; the same volume spread across unrelated
+    // paths is a territory question and needs a person. They take opposite responses, which
+    // is why this sentence is written out instead of left to be inferred from twelve bars.
+    if (fam && famShare >= 40 && fam.paths > 1)
+      lede += "<span class=\"q\"><b>" + fam.times.toLocaleString() + "</b> of them \u2014 <b>" +
+              famShare + "%</b> \u2014 are the same name in " + fam.paths + " places: " +
+              "<code>" + esc(fam.name) + "</code>. One kind of thing at that scale is a " +
+              "tooling problem with a mechanical fix, not something to grant.</span>";
+    else if (fam && famShare >= 40)
+      lede += "<span class=\"q\"><b>" + famShare + "%</b> of it is a single path. That is " +
+              "usually mechanical rather than something to grant.</span>";
+    else
+      lede += "<span class=\"q\">No one kind of thing dominates, which is what a real boundary " +
+              "question looks like rather than a tooling one.</span>";
+    /* The half a grep cannot do, because it needs the policy: how many of these
+       are on paths nobody claims. Those are the ones no grant resolves until a
+       person decides who owns them — a decision, not a count. Added after a
+       field review pointed out that the percentage above was the console
+       reading the log back to somebody who had already read it. */
+    if (f.unowned)
+      lede += " <b>" + f.unowned + "</b> of the " + (f.distinct || f.causes.length).toLocaleString() +
+              " are on paths <b>no role owns</b> \u2014 a grant cannot settle those until " +
+              "somebody claims them.";
+    document.getElementById("ca-lede").innerHTML = lede;
+    var win = document.getElementById("dn-window");
+    if (win) win.textContent = rangeLabel() + " \u00b7 " + f.total.toLocaleString() + " denials \u00b7 " +
+      (f.distinct || f.causes.length).toLocaleString() + " distinct paths";
+
+    var max = top.times || 1;
+    document.getElementById("ca-bars").innerHTML = f.causes.map(function(c){
+      var w = Math.max(2, Math.round((c.times / max) * 100));
+      // A cause the policy no longer denies is history, not live. It is
+      // shown, greyed, rather than dropped: it explains a number somebody may
+      // remember from yesterday instead of silently changing it.
+      var cold = c.stillDeclined === 0;
+      var who = c.roles.length === 1 ? c.roles[0] : c.roles.length + " roles";
+      return '<div class="bar' + (cold ? ' cold' : '') + '">' +
+        '<div class="lbl"><div class="p">' + esc(c.action) + ' ' + esc(c.target) + '</div>' +
+        '<div class="who">' + esc(who) +
+          (c.owners && c.owners.length ? ' · owned by ' + esc(c.owners.join(", ")) : ' · owned by nobody') +
+          (cold ? ' · <b>granted since</b>' : '') + '</div>' +
+        '<div class="t"><span class="f" style="width:' + w + '%"></span></div></div>' +
+        '<div class="num">' + c.times.toLocaleString() +
+          '<s>' + (c.share * 100).toFixed(1) + '%</s></div>' +
+      '</div>';
+    }).join("");
+
+  }
+
+  /** Denied, by name — the cut that says what kind of day it was. */
+  function drawFamilies(){
+    var f = CAUSES; if (!f) return;
+    var fams = f.families || [];
+    var top = fams[0];
+    document.getElementById("fa-lede").innerHTML = !top ? "Nothing was denied in this window."
+      : "<b>" + Math.round(top.share * 100) + "%</b> of " + f.total.toLocaleString() +
+        " denials is <code>" + esc(top.name) + "</code>, across <b>" + top.paths + "</b> path" +
+        (top.paths === 1 ? "" : "s") + "." +
+        (top.share >= 0.4 && top.paths > 1
+          ? ' <span class="q">One name at that scale is usually mechanical. Fixing the tool ' +
+            'removes the denials; granting the paths only hides them.</span>'
+          : ' <span class="q">No single name dominates \u2014 these are separate questions, ' +
+            'not one problem.</span>');
+
+    document.getElementById("fa-list").innerHTML = fams.map(function(x){
+      var w = Math.max(2, Math.round((x.times / (top.times || 1)) * 100));
+      return '<div class="fam">' +
+        '<div class="fam-h"><code>' + esc(x.name) + '</code>' +
+          '<span class="num">' + x.times.toLocaleString() + ' <s>' + (x.share*100).toFixed(1) + '%</s></span></div>' +
+        '<div class="t"><span class="f" style="width:' + w + '%"></span></div>' +
+        '<div class="who">' + x.paths + ' path' + (x.paths===1?'':'s') + ' \u00b7 ' +
+          x.roles.length + ' role' + (x.roles.length===1?'':'s') + ': ' + esc(x.roles.join(", ")) + '</div>' +
+        '<ul class="places">' + x.where.map(function(p){
+          return '<li><span>' + esc(p.target) + '</span><b>' + p.times.toLocaleString() + '</b></li>';
+        }).join("") + '</ul></div>';
+    }).join("");
+  }
+
+  /** Walls — per role, what it keeps hitting and what that cost. */
+  function drawWalls(){
+    var rows = Object.keys(WALLS || {}).map(function(r){
+      var w = WALLS[r];
+      return { role: r, walls: w, spent: w.reduce(function(n,x){ return n + x.times - 1; }, 0) };
+    }).sort(function(a,b){ return b.spent - a.spent; });
+    var total = rows.reduce(function(n,x){ return n + x.spent; }, 0);
+
+    document.getElementById("wl-lede").innerHTML = !rows.length
+      ? "No role is repeating a denial it has already been given."
+      : "<b>" + total.toLocaleString() + "</b> call" + (total===1?"":"s") + " across <b>" +
+        rows.length + "</b> role" + (rows.length===1?"":"s") +
+        ' went into retrying something already denied. <span class="q">A denial is said once, ' +
+        'mid-turn. Nothing carries it forward, so it gets tried again.</span>';
+
+    document.getElementById("wl-list").innerHTML = rows.map(function(x){
+      return '<div class="fam">' +
+        '<div class="fam-h"><code>' + esc(x.role) + '</code>' +
+          '<span class="num">' + x.spent.toLocaleString() + ' <s>calls retried</s></span></div>' +
+        '<ul class="places">' + x.walls.map(function(w){
+          return '<li><span>' + esc(w.action) + ' ' + esc(w.target) + '<br>' +
+            '<em>' + esc(w.reason) + '</em></span><b>' + w.times + '\u00d7</b></li>';
+        }).join("") + '</ul></div>';
+    }).join("");
+  }
+
+  /** A count beside a nav item, or nothing. Zero is not news. */
+  function pill(id, n){
+    var el = document.getElementById(id);
+    if (!el) return;
+    el.textContent = n ? (n > 999 ? Math.round(n/1000) + "k" : String(n)) : "";
+    el.hidden = !n;
+  }
+
+  /**
+   * The five numbers, on every screen.
+   *
+   * Chosen by one rule: a KPI has to be something that can change and that you
+   * would do something about. The row this replaces failed both — four of its
+   * five read 31, 31, 0 and 31 every single day — and the one that moved was
+   * last and the same size as the rest.
+   *
+   * Emphasis is conditional, never constant. At zero they go quiet and say so
+   * in words, because "nothing to decide" is a state and an indicator that
+   * shouts at rest is one people stop seeing.
+   *
+   * Every value is read from the globals rather than passed in, so any refresh
+   * can call it — the queue refreshes on its own, and passing the role counts
+   * in once left the row stale on the number that moves most.
+   */
+  function drawKpis(){
+    var f = CAUSES || { total: 0, families: [], distinct: 0, causes: [] };
+    var waiting = REQS.length;
+    var retry = Object.keys(WALLS || {}).reduce(function(n, r){
+      return n + WALLS[r].reduce(function(m, w){ return m + w.times - 1; }, 0);
+    }, 0);
+    var fam = f.families && f.families[0];
+    var off = (ROLES || []).filter(function(r){ return !r.sandbox; }).length;
+
+    function set(id, cls, value, sub){
+      var el = document.getElementById(id);
+      if (!el) return;
+      el.classList.remove("live","alarm","calm");
+      if (cls) el.classList.add(cls);
+      el.querySelector(".n").textContent = value;
+      el.querySelector(".s").textContent = sub;
+    }
+
+    set("k-wait", waiting ? "live" : "calm", waiting,
+        waiting ? (waiting === 1 ? "decision" : "decisions") : "nothing to decide");
+    // The only number here that is an emergency, and it is almost always zero.
+    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") +
+        (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",
+        fam ? Math.round(fam.share * 100) + "%" : "\u2014",
+        fam ? "is " + fam.name : "of all denials");
+    // The only one that is money rather than state.
+    set("k-retry", retry ? "live" : "calm", retry.toLocaleString(),
+        retry ? "calls on walls already denied" : "nothing retried");
+
+    pill("dn-pin", f.total);
+    pill("wl-pin", Object.keys(WALLS || {}).length);
+  }
+
   function drawReqs(){
     var box = document.getElementById("requests");
     var pin = document.getElementById("req-pin");
@@ -696,26 +1044,30 @@ button.btn:active,button.tag:active,button.add:active,button.sw:active{transform
     // a page with a heading and nothing under it. It stays, and says what would fill it.
     box.hidden = false;
     if (!REQS.length) {
-      host.innerHTML = '<p class="blank">Nothing waiting on you.' +
-        '<span>An agent lands here when the policy denies it a path and it asks for the path ' +
-        'rather than working around it. Approving is the one action in this console that ' +
-        'writes to your policy \u2014 it edits <code>seisin.toml</code> in place, with your reason.</span></p>';
+      // Compact when this is the landing view. The tall empty state was right
+      // when Requests was a page of its own — a heading with nothing under it
+      // reads as broken. At the top of the front page it is 180px of nothing
+      // standing between you and the only content there is.
+      host.innerHTML = '<p class="blank quiet">No pending decisions. ' +
+        '<span>Agents land here when they ask for a path the policy denies them.</span></p>';
       return;
     }
 
     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">' +
           '<button class="btn" data-n="' + (i+1) + '" data-d="granted" type="button">Approve</button>' +
-          '<button class="btn warn" data-n="' + (i+1) + '" data-d="denied" type="button">Refuse</button>' +
+          '<button class="btn warn" data-n="' + (i+1) + '" data-d="denied" type="button">Decline</button>' +
         "</div>" +
       "</div>";
     }).join("");
@@ -723,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)"; }
+      }
+    };
   }
 
   /**
@@ -739,22 +1133,34 @@ 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 || "refused");
+      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>";
     }
   }
 
-  function draw(){drawRows();drawCfg();drawToml();drawLog();drawReqs();}
+  /**
+ * One view failing must not take the others down.
+ *
+ * Measured the hard way: `drawCauses` kept a reference to a box that had moved
+ * to its own page, threw on the first line, and every number on the screen —
+ * including the five that have nothing to do with it — rendered as zero. A
+ * console whose KPIs read zero because of a typo is worse than one that is
+ * down, because zero is a plausible answer.
+ */
+function draw(){
+  [drawRows, drawCfg, drawToml, drawLog, drawReqs, drawCauses, drawFamilies, drawWalls]
+    .forEach(function(f){ try { f(); } catch (e) { console.error("seisin: " + f.name + " failed", e); } });
+}
 
   /**
    * The page works two ways on purpose.
@@ -765,16 +1171,112 @@ button.btn:active,button.tag:active,button.add:active,button.sw:active{transform
    * 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;
@@ -787,10 +1289,18 @@ button.btn:active,button.tag:active,button.add:active,button.sw:active{transform
       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 || [];
+    CAUSES = s.causes || null;
+    WALLS = s.walls || {};
     ONDISK = s.toml || null;
     // The demo selection does not survive the live load. `sel` starts at "frontend", a role
     // from the example policy, and a real repo has no reason to have one. `drawCfg` then
@@ -809,6 +1319,8 @@ button.btn:active,button.tag:active,button.add:active,button.sw:active{transform
     // 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.";
@@ -830,7 +1342,13 @@ button.btn:active,button.tag:active,button.add:active,button.sw:active{transform
     policy:     {view:"roles",    title:"Roles",
                  sub:"Which folders each agent writes, which keys it may read, and whether it runs sandboxed."},
     requests:   {view:"requests", title:"Waiting on you",
-                 sub:"What an agent asked for and cannot have yet. Approving is the one action that writes to your policy."},
+                 sub:"Permissions an agent asked for and cannot have. Granting one edits your policy."},
+    denied:     {view:"denied",   title:"Denied",
+                 sub:"Every denial in the window, grouped by the path it was about."},
+    causes:     {view:"causes",   title:"Causes",
+                 sub:"The same denials by name, which is the cut that says what kind of day it was."},
+    walls:      {view:"walls",    title:"Walls",
+                 sub:"What each role keeps being denied, and what retrying it cost."},
     activity:   {view:"activity", title:"Activity",
                  sub:"Every decision the runtime made, newest last, each with the role that owns the path."},
     configfile: {view:"config",   title:"Config file",
@@ -838,7 +1356,7 @@ button.btn:active,button.tag:active,button.add:active,button.sw:active{transform
   };
 
   function show(route){
-    var v = VIEWS[route] || VIEWS.policy;
+    var v = VIEWS[route] || VIEWS.requests;
     document.querySelectorAll("main section[data-view]").forEach(function(s){
       s.hidden = s.getAttribute("data-view") !== v.view;
     });
@@ -858,7 +1376,15 @@ button.btn:active,button.tag:active,button.add:active,button.sw:active{transform
     window.scrollTo(0, 0);
   }
 
-  function route(){ return (location.hash || "#policy").slice(1); }
+  /**
+ * The landing view is what is waiting on you, not the policy table.
+ *
+ * It opened on Roles, which is reference: a wall of paths you consult when you
+ * have a question, rendered before anybody asked one. What a person opens this
+ * for is "does anything need me", and that has to be the first screen or it is
+ * a screen nobody reaches. Reference is looked up; decisions are shown.
+ */
+function route(){ return (location.hash || "#requests").slice(1); }
   window.addEventListener("hashchange", function(){ show(route()); });
   show(route());
 
@@ -891,7 +1417,7 @@ button.btn:active,button.tag:active,button.add:active,button.sw:active{transform
 
   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;
@@ -900,7 +1426,7 @@ button.btn:active,button.tag:active,button.add:active,button.sw:active{transform
       // the same way the log does: by polling. Re-rendered only when it changed,
       // so a reason someone is halfway through typing is not wiped every 2s.
       var fresh = JSON.stringify(s.requests || []);
-      if (fresh !== JSON.stringify(REQS)) { REQS = JSON.parse(fresh); drawReqs(); }
+      if (fresh !== JSON.stringify(REQS)) { REQS = JSON.parse(fresh); drawReqs(); drawKpis(); }
       // Only the counters that come from the log are refreshed. Whatever the
       // reader has been editing on screen stays put — a page that resets your
       // work every two seconds is worse than one that does not update.
@@ -914,7 +1440,7 @@ button.btn:active,button.tag:active,button.add:active,button.sw:active{transform
 
   /** 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";
@@ -926,8 +1452,11 @@ button.btn:active,button.tag:active,button.add:active,button.sw:active{transform
     }));
     LOG = fromServer(s.log);
     REQS = s.requests || [];
+    CAUSES = s.causes || null;
+    WALLS = s.walls || {};
     ONDISK = s.toml || null;
     draw();
+    drawKpis();
   }
 
   boot();