seisin 0.1.1 → 0.2.0

package/ui/index.html

@@ -86,7 +86,7 @@ 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))}
 .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,6 +94,51 @@ 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;
@@ -154,7 +199,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 +246,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);
@@ -248,8 +295,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 +319,32 @@ 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="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 +378,65 @@ 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>
         </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>
@@ -526,12 +641,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");
@@ -650,7 +760,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 +789,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 +798,200 @@ 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 = 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");
+    // 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,10 +1002,12 @@ 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;
     }
 
@@ -715,7 +1023,7 @@ button.btn:active,button.tag:active,button.add:active,button.sw:active{transform
         '<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("");
@@ -743,7 +1051,7 @@ button.btn:active,button.tag:active,button.add:active,button.sw:active{transform
         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) throw new Error(out.error || "denied");
       // Re-read rather than patch: the grant rewrote seisin.toml, so the
       // territory on screen is stale too, not just the queue.
       await reload();
@@ -754,7 +1062,19 @@ button.btn:active,button.tag:active,button.add:active,button.sw:active{transform
     }
   }
 
-  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.
@@ -791,6 +1111,8 @@ 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;
     // 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
@@ -830,7 +1152,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 +1166,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 +1186,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());
 
@@ -900,7 +1236,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.