From d4d7193b86f508de0e76f23d082fe4d52717a918 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Jacob=20Read=20IV=20=E2=80=94=20Creator=20of=20?=
 =?UTF-8?q?=C4=80ML=E2=84=A2?= <aruintelligence@gmail.com>
Date: Mon, 12 Oct 2026 20:34:38 -0700
Subject: [PATCH] Visualize the homepage action boundary trace

---
 docs/home-hero.js | 11 +++++++++++
 docs/index.html   |  6 ++++--
 index.html        |  6 ++++--
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/docs/home-hero.js b/docs/home-hero.js
index 447e0732..e920c54b 100644
--- a/docs/home-hero.js
+++ b/docs/home-hero.js
@@ -15,6 +15,14 @@ function selectButton(selector, key, value) {
     button.setAttribute("aria-pressed", String(button.dataset[key] === value)));
 }
 
+function showTrace(result) {
+  $("action-trace").dataset.result = result;
+  $("trace-decision").textContent = result === "blocked" ? "Blocked" :
+    result === "approval" ? "Needs approval" : result === "pending" ? "Calculating" : "Unavailable";
+  $("trace-dispatch").textContent = result === "blocked" ? "Stopped before tool" :
+    result === "approval" ? "Awaits real host" : "Not connected";
+}
+
 async function showAction() {
   const turn = ++actionGeneration;
   $("action-recipient").textContent = recipient === "team" ? "team@example.test" : "outsider@example.test";
@@ -22,6 +30,7 @@ async function showAction() {
   selectButton("[data-action-destination]", "actionDestination", recipient);
   $("action-verdict").classList.remove("allow", "approval");
   $("action-verdict").querySelector("strong").textContent = "CALCULATING";
+  showTrace("pending");
   $("hero-digest").textContent = "Calculating canonical proposal…";
   $("hero-vector").textContent = "Project vector self-check pending.";
   $("action-count").textContent = "No tool callback is connected to this page.";
@@ -37,6 +46,7 @@ async function showAction() {
     $("action-verdict").classList.toggle("approval", matches && approval);
     $("action-verdict").querySelector("strong").textContent = !matches ? "RECHECK" :
       approval ? "APPROVAL REQUIRED" : result.decision === "deny" ? "BLOCKED" : "RECHECK";
+    showTrace(!matches ? "unavailable" : approval ? "approval" : result.decision === "deny" ? "blocked" : "unavailable");
     $("action-count").textContent = !matches ? "Project vector mismatch. Inspect the source before relying on this preview." :
       approval ? "The route matches. A real host must approve the exact proposal before dispatch." :
       "No exact rule matches this destination; zero tool callbacks.";
@@ -49,6 +59,7 @@ async function showAction() {
   } catch {
     if (turn !== actionGeneration) return;
     $("action-verdict").querySelector("strong").textContent = "UNAVAILABLE";
+    showTrace("unavailable");
     $("action-count").textContent = "The browser could not calculate the action plan here.";
     $("hero-digest").textContent = "Unavailable";
     $("hero-vector").textContent = "No project vector self-check completed.";
diff --git a/docs/index.html b/docs/index.html
index be626d16..2175cf9b 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -33,7 +33,8 @@
     @media(max-width:800px){.navlinks .ghost{display:none}.compare,.lab,.principles,.paths,.continuity-steps,.challenge-feature,.atlas-list{grid-template-columns:1fr}.section-head{align-items:start;flex-direction:column}.hero h1{font-size:clamp(3.2rem,12vw,5rem)}.console-foot,.scope-teaser{align-items:flex-start;flex-direction:column}}
     @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.element{transition:none}}
     .boundary-switch{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:9px;background:#06111e;border-bottom:1px solid var(--line)}.boundary-switch button{padding:11px 8px;border:1px solid transparent;border-radius:11px;background:transparent;color:#a9bfce;font:800 .77rem ui-sans-serif,system-ui;cursor:pointer}.boundary-switch button[aria-pressed=true]{border-color:rgba(125,249,255,.43);background:rgba(125,249,255,.12);color:var(--cyan)}.boundary-switch button:focus-visible{outline:3px solid var(--gold);outline-offset:1px}.console-body[hidden]{display:none}.action-target{padding:15px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.035)}.action-target span{display:block;color:var(--muted);font-size:.76rem}.action-target strong{display:block;margin-top:5px;color:var(--red);font:700 clamp(.91rem,1.3vw,1.03rem) ui-monospace,monospace;overflow-wrap:anywhere}.action-target.approved strong{color:var(--green)}.action-rule{margin:15px 0;color:#a9c8ce;font:12px/1.5 ui-monospace,monospace}.action-rule b{color:var(--gold);font-weight:700}.verdict.approval{border-color:rgba(242,206,114,.45);background:rgba(242,206,114,.1)}.verdict.approval strong{color:var(--gold);font-size:clamp(1rem,1.9vw,1.35rem)}.action-count{margin:8px 2px 0;color:var(--muted);font-size:.77rem}.action-case button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}.home-evidence{margin-top:12px;padding:12px 14px;border:1px solid rgba(125,249,255,.24);border-radius:11px;background:rgba(0,0,0,.2)}.home-evidence span{display:block;color:var(--cyan);font:800 .65rem ui-monospace,monospace;letter-spacing:.13em}.home-evidence code{display:block;margin:7px 0;color:#d8f5f7;font:11px/1.45 ui-monospace,monospace;overflow-wrap:anywhere}.home-evidence small{color:var(--muted);font-size:.72rem}.gate-slot{min-height:66px;display:grid;place-items:center;margin-top:12px;border:1px dashed rgba(125,249,255,.3);border-radius:11px;color:var(--muted);font-size:.77rem;text-align:center;padding:11px}.gate-slot aml-gate[hidden],#hero-gate-placeholder[hidden]{display:none}.gate-slot aml-gate button{padding:11px 16px;background:var(--cyan);color:#06111e;border:0;border-radius:9px;font:800 .82rem ui-sans-serif,system-ui}.gate-event{margin:7px 0 0;color:#a9c8ce;font:11px ui-monospace,monospace}
-    @media(max-width:520px){.boundary-switch button{font-size:.7rem}.verdict.approval strong{font-size:1rem}.console-body{padding:17px}}
+    .action-trace{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin:13px 0 3px}.trace-step{position:relative;min-width:0;padding:10px 7px;border:1px solid rgba(125,249,255,.25);border-radius:10px;background:linear-gradient(160deg,rgba(125,249,255,.1),rgba(125,249,255,.025))}.trace-step:not(:last-child)::after{content:"→";position:absolute;z-index:1;right:-9px;top:50%;transform:translateY(-50%);color:var(--cyan);font-weight:900}.trace-step span{display:block;color:#91adb9;font:800 .57rem ui-monospace,monospace;letter-spacing:.08em}.trace-step b{display:block;margin-top:4px;color:#e7fbff;font:800 .7rem/1.25 ui-sans-serif,system-ui;overflow-wrap:anywhere}.trace-step[data-stage=decision]{border-color:rgba(255,102,136,.53);background:rgba(255,102,136,.12)}.trace-step[data-stage=decision] b{color:#ff9bb0}.action-trace[data-result=approval] .trace-step[data-stage=decision]{border-color:rgba(242,206,114,.5);background:rgba(242,206,114,.12)}.action-trace[data-result=approval] .trace-step[data-stage=decision] b{color:var(--gold)}.action-trace[data-result=pending] .trace-step[data-stage=decision],.action-trace[data-result=unavailable] .trace-step[data-stage=decision]{border-color:var(--line);background:rgba(255,255,255,.035)}.action-trace[data-result=pending] .trace-step[data-stage=decision] b,.action-trace[data-result=unavailable] .trace-step[data-stage=decision] b{color:var(--muted)}.trace-step[data-stage=dispatch]{border-style:dashed;border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.025)}.trace-step[data-stage=dispatch] b{color:#b7c6d2}
+    @media(max-width:520px){.boundary-switch button{font-size:.7rem}.verdict.approval strong{font-size:1rem}.console-body{padding:17px}.action-trace{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.trace-step:nth-child(2)::after{content:"↙";right:auto;left:7px;top:auto;bottom:-13px}.trace-step:nth-child(3)::after{right:-11px}}
   </style>
 </head>
 <body>
@@ -60,6 +61,7 @@ <h1>AI proposes.<br><span class="gradient">The host decides.</span></h1>
           <div class="action-target" id="action-target"><span>Requested destination</span><strong id="action-recipient">outsider@example.test</strong></div>
           <div class="action-rule">HOST RULE <b>send_message → team@example.test only</b></div>
           <div id="action-verdict" class="verdict" role="status" aria-live="polite"><span>Project plan</span><strong>CALCULATING</strong></div>
+          <div class="action-trace" id="action-trace" data-result="pending" role="group" aria-label="Action preview path"><div class="trace-step"><span>01 / PROPOSAL</span><b>send_message</b></div><div class="trace-step"><span>02 / HOST RULE</span><b>Exact route</b></div><div class="trace-step" data-stage="decision"><span>03 / PLAN</span><b id="trace-decision">Calculating</b></div><div class="trace-step" data-stage="dispatch"><span>04 / DISPATCH</span><b id="trace-dispatch">Not connected</b></div></div>
           <p class="action-count" id="action-count">No tool callback is connected to this page.</p>
           <div class="home-evidence"><span>CANONICAL PROPOSAL / SHA-256</span><code id="hero-digest">Connecting to planner…</code><small id="hero-vector">Project vector self-check pending.</small></div>
           <div class="case-buttons action-case" role="group" aria-label="Choose a proposed destination"><button type="button" data-action-destination="outside" aria-pressed="true">Outside recipient</button><button type="button" data-action-destination="team" aria-pressed="false">Policy-matched address</button></div>
@@ -262,7 +264,7 @@ <h2>No magic. No false certainty.</h2>
       }
     });
   </script>
-  <script type="module" src="./home-hero.js?v=home-real-1"></script>
+  <script type="module" src="./home-hero.js?v=home-trace-1"></script>
 </body>
 </html>
 
diff --git a/index.html b/index.html
index be626d16..2175cf9b 100644
--- a/index.html
+++ b/index.html
@@ -33,7 +33,8 @@
     @media(max-width:800px){.navlinks .ghost{display:none}.compare,.lab,.principles,.paths,.continuity-steps,.challenge-feature,.atlas-list{grid-template-columns:1fr}.section-head{align-items:start;flex-direction:column}.hero h1{font-size:clamp(3.2rem,12vw,5rem)}.console-foot,.scope-teaser{align-items:flex-start;flex-direction:column}}
     @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.element{transition:none}}
     .boundary-switch{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:9px;background:#06111e;border-bottom:1px solid var(--line)}.boundary-switch button{padding:11px 8px;border:1px solid transparent;border-radius:11px;background:transparent;color:#a9bfce;font:800 .77rem ui-sans-serif,system-ui;cursor:pointer}.boundary-switch button[aria-pressed=true]{border-color:rgba(125,249,255,.43);background:rgba(125,249,255,.12);color:var(--cyan)}.boundary-switch button:focus-visible{outline:3px solid var(--gold);outline-offset:1px}.console-body[hidden]{display:none}.action-target{padding:15px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.035)}.action-target span{display:block;color:var(--muted);font-size:.76rem}.action-target strong{display:block;margin-top:5px;color:var(--red);font:700 clamp(.91rem,1.3vw,1.03rem) ui-monospace,monospace;overflow-wrap:anywhere}.action-target.approved strong{color:var(--green)}.action-rule{margin:15px 0;color:#a9c8ce;font:12px/1.5 ui-monospace,monospace}.action-rule b{color:var(--gold);font-weight:700}.verdict.approval{border-color:rgba(242,206,114,.45);background:rgba(242,206,114,.1)}.verdict.approval strong{color:var(--gold);font-size:clamp(1rem,1.9vw,1.35rem)}.action-count{margin:8px 2px 0;color:var(--muted);font-size:.77rem}.action-case button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}.home-evidence{margin-top:12px;padding:12px 14px;border:1px solid rgba(125,249,255,.24);border-radius:11px;background:rgba(0,0,0,.2)}.home-evidence span{display:block;color:var(--cyan);font:800 .65rem ui-monospace,monospace;letter-spacing:.13em}.home-evidence code{display:block;margin:7px 0;color:#d8f5f7;font:11px/1.45 ui-monospace,monospace;overflow-wrap:anywhere}.home-evidence small{color:var(--muted);font-size:.72rem}.gate-slot{min-height:66px;display:grid;place-items:center;margin-top:12px;border:1px dashed rgba(125,249,255,.3);border-radius:11px;color:var(--muted);font-size:.77rem;text-align:center;padding:11px}.gate-slot aml-gate[hidden],#hero-gate-placeholder[hidden]{display:none}.gate-slot aml-gate button{padding:11px 16px;background:var(--cyan);color:#06111e;border:0;border-radius:9px;font:800 .82rem ui-sans-serif,system-ui}.gate-event{margin:7px 0 0;color:#a9c8ce;font:11px ui-monospace,monospace}
-    @media(max-width:520px){.boundary-switch button{font-size:.7rem}.verdict.approval strong{font-size:1rem}.console-body{padding:17px}}
+    .action-trace{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin:13px 0 3px}.trace-step{position:relative;min-width:0;padding:10px 7px;border:1px solid rgba(125,249,255,.25);border-radius:10px;background:linear-gradient(160deg,rgba(125,249,255,.1),rgba(125,249,255,.025))}.trace-step:not(:last-child)::after{content:"→";position:absolute;z-index:1;right:-9px;top:50%;transform:translateY(-50%);color:var(--cyan);font-weight:900}.trace-step span{display:block;color:#91adb9;font:800 .57rem ui-monospace,monospace;letter-spacing:.08em}.trace-step b{display:block;margin-top:4px;color:#e7fbff;font:800 .7rem/1.25 ui-sans-serif,system-ui;overflow-wrap:anywhere}.trace-step[data-stage=decision]{border-color:rgba(255,102,136,.53);background:rgba(255,102,136,.12)}.trace-step[data-stage=decision] b{color:#ff9bb0}.action-trace[data-result=approval] .trace-step[data-stage=decision]{border-color:rgba(242,206,114,.5);background:rgba(242,206,114,.12)}.action-trace[data-result=approval] .trace-step[data-stage=decision] b{color:var(--gold)}.action-trace[data-result=pending] .trace-step[data-stage=decision],.action-trace[data-result=unavailable] .trace-step[data-stage=decision]{border-color:var(--line);background:rgba(255,255,255,.035)}.action-trace[data-result=pending] .trace-step[data-stage=decision] b,.action-trace[data-result=unavailable] .trace-step[data-stage=decision] b{color:var(--muted)}.trace-step[data-stage=dispatch]{border-style:dashed;border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.025)}.trace-step[data-stage=dispatch] b{color:#b7c6d2}
+    @media(max-width:520px){.boundary-switch button{font-size:.7rem}.verdict.approval strong{font-size:1rem}.console-body{padding:17px}.action-trace{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.trace-step:nth-child(2)::after{content:"↙";right:auto;left:7px;top:auto;bottom:-13px}.trace-step:nth-child(3)::after{right:-11px}}
   </style>
 </head>
 <body>
@@ -60,6 +61,7 @@ <h1>AI proposes.<br><span class="gradient">The host decides.</span></h1>
           <div class="action-target" id="action-target"><span>Requested destination</span><strong id="action-recipient">outsider@example.test</strong></div>
           <div class="action-rule">HOST RULE <b>send_message → team@example.test only</b></div>
           <div id="action-verdict" class="verdict" role="status" aria-live="polite"><span>Project plan</span><strong>CALCULATING</strong></div>
+          <div class="action-trace" id="action-trace" data-result="pending" role="group" aria-label="Action preview path"><div class="trace-step"><span>01 / PROPOSAL</span><b>send_message</b></div><div class="trace-step"><span>02 / HOST RULE</span><b>Exact route</b></div><div class="trace-step" data-stage="decision"><span>03 / PLAN</span><b id="trace-decision">Calculating</b></div><div class="trace-step" data-stage="dispatch"><span>04 / DISPATCH</span><b id="trace-dispatch">Not connected</b></div></div>
           <p class="action-count" id="action-count">No tool callback is connected to this page.</p>
           <div class="home-evidence"><span>CANONICAL PROPOSAL / SHA-256</span><code id="hero-digest">Connecting to planner…</code><small id="hero-vector">Project vector self-check pending.</small></div>
           <div class="case-buttons action-case" role="group" aria-label="Choose a proposed destination"><button type="button" data-action-destination="outside" aria-pressed="true">Outside recipient</button><button type="button" data-action-destination="team" aria-pressed="false">Policy-matched address</button></div>
@@ -262,7 +264,7 @@ <h2>No magic. No false certainty.</h2>
       }
     });
   </script>
-  <script type="module" src="./home-hero.js?v=home-real-1"></script>
+  <script type="module" src="./home-hero.js?v=home-trace-1"></script>
 </body>
 </html>