Merge redesign/cuperos-unification: one brand, plain words, real motion

Executes the design critique end to end: README rewritten for lay readers
with the lab log split to docs/research/results-log.md, agent-process
ledgers moved out of the repo root, index tokens consolidated and demos
animated, the observatory re-homed inside CuperOS chrome with the
portfolio palette, a freshman translation layer that restates verdicts
instead of hiding them, and scenario-band micro-animations. Full pytest:
1039 passed. docs-stats gate: OK.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: Cuuper22

README.md

@@ -103,7 +103,7 @@ const traces = {
     note: "This path is why the project keeps economics attached to physics. A price can inherit assumptions from power, cooling, utilization, kernels, and lower physical boundaries.",
     meterLabel: "scenario-report resolves 4 of 4 targets",
     meterFoot: "status: ok, issue_count: 0",
-    meterWidth: "100%",
+    meterScale: "1",
     path: [
       ["econ.cost.per_token", "target", "What does one token cost?"],
       ["econ.run.power_cost", "equation", "Power has to be paid for."],
@@ -122,7 +122,7 @@ const traces = {
     note: "The trace view keeps the easy phrase, faster training, connected to the things that actually move it: tensors, kernels, collectives, memory, topology, and utilization.",
     meterLabel: "representative fixture: 6666666.66666667 tokens/s",
     meterFoot: "synthetic anchor, not vendor truth",
-    meterWidth: "82%",
+    meterScale: "0.82",
     path: [
       ["training.tokens_per_sec", "target", "How fast do tokens move?"],
       ["training.step_time", "equation", "Compute plus comms plus bubbles."],
@@ -141,7 +141,7 @@ const traces = {
     note: "This is the layer where non-experts can see why cooling and facility assumptions are part of model training, not an external footnote.",
     meterLabel: "representative fixture: econ.job.dc_power = 5200.0",
     meterFoot: "explicit fixture assignment path",
-    meterWidth: "68%",
+    meterScale: "0.68",
     path: [
       ["econ.job.dc_power", "target", "What power does the job imply?"],
       ["cluster.site.power_it", "equation", "GPU and infrastructure load."],
@@ -206,6 +206,7 @@ function renderLayer(key) {
   stack.replaceChildren(...layer.stack.map((item, index) => {
     const row = document.createElement("div");
     row.className = `dependency-row${index === layer.stack.length - 1 ? " active" : ""}`;
+    row.style.setProperty("--i", String(index));
     const label = document.createElement("span");
     label.textContent = item;
     const depth = document.createElement("span");
@@ -229,6 +230,7 @@ function renderTrace(key) {
   tracePath.replaceChildren(...trace.path.map(([labelText, role, detail], index) => {
     const node = document.createElement("div");
     node.className = `trace-node${index === trace.path.length - 1 ? " active" : ""}`;
+    node.style.setProperty("--i", String(index));
     const roleLabel = document.createElement("small");
     roleLabel.textContent = role;
     const label = document.createElement("b");
@@ -241,7 +243,7 @@ function renderTrace(key) {
   traceNote.textContent = trace.note;
   traceMeterLabel.textContent = trace.meterLabel;
   traceMeterFoot.textContent = trace.meterFoot;
-  traceMeter.style.setProperty("--meter-width", trace.meterWidth);
+  traceMeter.style.setProperty("--meter-scale", trace.meterScale);
   targetTabs.forEach((tab) => {
     tab.setAttribute("aria-selected", String(tab.dataset.target === key));
   });
@@ -281,3 +283,35 @@ if (clock) {
   updateClock();
   setInterval(updateClock, 1000);
 }
+
+// Scroll reveals. The hidden pre-reveal state only exists once html.js-anim
+// is set, so readers without JS, without IntersectionObserver, or with
+// reduced motion requested always get the fully visible page.
+(function initReveals() {
+  const motionOk = !window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  if (!("IntersectionObserver" in window) || !motionOk) {
+    return;
+  }
+  const targets = document.querySelectorAll(
+    ".primer-panel, .journey-strip, .section-window, .stat-grid .stat, " +
+    ".glossary-grid .glossary-term, .dialog-grid .dialog-body, .timeline-row"
+  );
+  if (!targets.length) {
+    return;
+  }
+  targets.forEach((el, index) => {
+    el.classList.add("reveal");
+    // Stagger siblings that arrive in the same viewport batch.
+    el.style.setProperty("--reveal-i", String(index % 4));
+  });
+  document.documentElement.classList.add("js-anim");
+  const observer = new IntersectionObserver((entries) => {
+    entries.forEach((entry) => {
+      if (entry.isIntersecting) {
+        entry.target.classList.add("in-view");
+        observer.unobserve(entry.target);
+      }
+    });
+  }, { rootMargin: "0px 0px -8% 0px", threshold: 0.05 });
+  targets.forEach((el) => observer.observe(el));
+})();

docs/app.js

@@ -229,6 +229,8 @@
       var shown = Math.min(parents.length, MAX_CHILDREN);
       for (var i = 0; i < shown; i++) {
         var childBtn = makeNodeButton(depth + 1, parents[i], false);
+        // Stagger slot for the cascade-in animation (capped in CSS).
+        childBtn.style.setProperty("--i", String(i));
         container.appendChild(childBtn);
       }
       if (parents.length > MAX_CHILDREN) {

docs/cone-browser.js

@@ -86,7 +86,7 @@
               <p class="file-path">gpu_stack/readme/frontdoor.txt</p>
               <h1 id="page-title">gpu_stack</h1>
               <p class="tagline">
-                A causal virtual datacenter that connects learning dynamics, execution, failures, facility power, economics, and evidence, then makes the same result understandable from freshman intuition through raw research trace.
+                A virtual AI datacenter you can interrogate. It predicts what a training run does to time, power, and money, says how sure it is, and can show you what every one of its numbers is made of.
               </p>
               <div class="action-row">
                 <a class="retro-btn primary" href="observatory.html"><span class="px-icon px-graph"></span> Open observatory</a>
@@ -161,6 +161,51 @@ <h2 id="primer-heading">Read it like a receipt, not a magic answer.</h2>
             <div class="stat"><b>884</b><span>equations with unit checks</span></div>
           </section>
 
+          <section class="journey-strip" id="journey" aria-label="One token's journey down the stack">
+            <div class="journey-head">
+              <p class="eyebrow">token_journey.exe</p>
+              <h2>Follow one token from math to money.</h2>
+              <p class="caption">Every station is a layer of the model. The lamp lights as the token passes through, and the trip always ends at an invoice.</p>
+            </div>
+            <div class="journey-track">
+              <div class="journey-station" style="--i:0;">
+                <span class="journey-lamp" aria-hidden="true"></span>
+                <b>Model math</b>
+                <span>attention, FFN, parameters</span>
+              </div>
+              <div class="journey-hop" style="--i:0;" aria-hidden="true"></div>
+              <div class="journey-station" style="--i:1;">
+                <span class="journey-lamp" aria-hidden="true"></span>
+                <b>Kernels</b>
+                <span>instructions, tiling, occupancy</span>
+              </div>
+              <div class="journey-hop" style="--i:1;" aria-hidden="true"></div>
+              <div class="journey-station" style="--i:2;">
+                <span class="journey-lamp" aria-hidden="true"></span>
+                <b>Memory</b>
+                <span>HBM traffic, caches, bandwidth</span>
+              </div>
+              <div class="journey-hop" style="--i:2;" aria-hidden="true"></div>
+              <div class="journey-station" style="--i:3;">
+                <span class="journey-lamp" aria-hidden="true"></span>
+                <b>Silicon</b>
+                <span>transistors, lithography, atoms</span>
+              </div>
+              <div class="journey-hop" style="--i:3;" aria-hidden="true"></div>
+              <div class="journey-station" style="--i:4;">
+                <span class="journey-lamp" aria-hidden="true"></span>
+                <b>Power</b>
+                <span>board, rack, cooling, PUE</span>
+              </div>
+              <div class="journey-hop" style="--i:4;" aria-hidden="true"></div>
+              <div class="journey-invoice">
+                <span class="journey-lamp" aria-hidden="true"></span>
+                <b>Invoice: ~$3 per million tokens</b>
+                <span>synthetic fixture value, not a market price</span>
+              </div>
+            </div>
+          </section>
+
           <section class="section-window" aria-labelledby="model-heading">
             <div class="section-copy">
               <p class="eyebrow">Symbolic causal backbone</p>

docs/index.html

@@ -4,17 +4,39 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="description" content="GPUSTACK causal observatory for evidence-preserving virtual datacenter experiments.">
-  <meta name="theme-color" content="#f3f0e7">
+  <meta name="theme-color" content="#0e7d84">
   <title>GPUSTACK Causal Observatory · E001</title>
+  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Crect width='16' height='16' fill='%23008080'/%3E%3Crect x='3' y='3' width='10' height='10' fill='%23808080' stroke='%231A1A1A'/%3E%3Crect x='5' y='5' width='6' height='6' fill='%23C0C0C0'/%3E%3C/svg%3E">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&amp;family=IBM+Plex+Sans:wght@400;500;600;700&amp;family=Pixelify+Sans:wght@500;600&amp;display=swap" rel="stylesheet">
-  <link rel="stylesheet" href="styles/90-observatory.css?v=20260712.12">
+  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&amp;family=IBM+Plex+Sans:wght@400;500;600;700&amp;family=Pixelify+Sans:wght@400;500;600;700&amp;display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="styles/00-foundation.css">
+  <link rel="stylesheet" href="styles/90-observatory.css?v=20260713.1">
+  <link rel="stylesheet" href="styles/60-taskbar.css">
+  <link rel="stylesheet" href="styles/70-pixel-icons.css">
+  <link rel="stylesheet" href="styles/95-observatory-cuperos.css?v=20260713.1">
   <script src="observatory.js?v=20260712.10" defer></script>
 </head>
 <body data-depth="freshman" data-data-state="loading">
   <a class="skip-link" href="#observatory-main">Skip to experiment</a>
 
+  <div class="obs-desktop">
+    <div class="desktop-logo">
+      <span class="logo-text">CuperOS</span>
+      <span class="logo-version">CAUSAL OBSERVATORY V0.27</span>
+    </div>
+
+    <div class="window obs-app-window" aria-label="Causal observatory window">
+      <div class="title-bar">
+        <div class="title-text"><span class="px-icon px-graph"></span> observatory.exe · E001</div>
+        <div class="window-controls" aria-hidden="true">
+          <span class="window-btn">_</span>
+          <span class="window-btn">□</span>
+          <span class="window-btn">x</span>
+        </div>
+      </div>
+      <div class="window-content obs-window-content">
+
   <header class="obs-header" aria-label="Observatory header">
     <a class="obs-identity" href="index.html" aria-label="GPUSTACK home">
       <span class="obs-wordmark">GPUSTACK</span>
@@ -66,6 +88,7 @@ <h1 id="experiment-question">Can one observable controller safely spend semantic
           <span>small-model learning + virtual datacenter</span>
         </div>
         <p class="plain-answer" id="plain-answer">Loading the held-out semantic-consistency result. No conclusion is shown until its evidence boundary is known.</p>
+        <p class="plain-words" id="plain-words"></p>
         <p class="artifact-state" id="artifact-state" role="status" aria-live="polite">Reading data/e001-semantic-consistency-v1.json…</p>
       </div>
     </section>
@@ -86,6 +109,7 @@ <h3 id="semantic-consistency-insight-title">Result loading</h3>
         </div>
         <div>
           <p id="semantic-consistency-plain-answer">The observatory will state whether adaptive switching preserved held-out learning and beat the frozen fixed comparator.</p>
+          <p class="plain-words" id="semantic-consistency-plain-words"></p>
           <strong id="semantic-consistency-boundary-short">Infrastructure remains modeled unless the artifact says otherwise.</strong>
         </div>
       </article>
@@ -413,6 +437,7 @@ <h2 id="learning-v1-title">Did adaptive recovery preserve learning efficiency?</
           <h3 id="learning-insight-title">The learning result is loading</h3>
         </div>
         <p id="learning-plain-answer">The observatory will state the measured answer once the persisted artifact is available.</p>
+        <p class="plain-words" id="learning-plain-words"></p>
       </article>
 
       <div class="learning-depth-copy" id="learning-depth-copy">
@@ -513,6 +538,7 @@ <h2 id="equal-work-v1-title">What survives when useful work is held equal?</h2>
           <h3 id="equal-work-insight-title">Equal-work result loading</h3>
         </div>
         <p id="equal-work-plain-answer">The observatory will state the result after loading the persisted LC3 artifact.</p>
+        <p class="plain-words" id="equal-work-plain-words"></p>
       </article>
 
       <div class="equal-work-depth-copy">
@@ -629,6 +655,7 @@ <h3 id="checkpoint-power-insight-title">Result loading</h3>
         </div>
         <div>
           <p id="checkpoint-power-plain-answer">The observatory will state the measurement boundary after loading the persisted artifact.</p>
+          <p class="plain-words" id="checkpoint-power-plain-words"></p>
           <strong id="checkpoint-power-decision">No policy claim is available yet.</strong>
         </div>
       </article>
@@ -776,6 +803,7 @@ <h3 id="checkpoint-energy-insight-title">Result loading</h3>
         </div>
         <div>
           <p id="checkpoint-energy-plain-answer">The observatory will state the mechanism after loading the persisted artifact.</p>
+          <p class="plain-words" id="checkpoint-energy-plain-words"></p>
           <strong id="checkpoint-energy-mechanism">Mechanism estimate loading.</strong>
         </div>
       </article>
@@ -1154,6 +1182,34 @@ <h3 id="decision-ledger-title">Policy decision ledger</h3>
     <span>All experiment times shown in seconds unless nanoseconds are selected in full trace.</span>
   </footer>
 
+      </div>
+    </div>
+  </div>
+
+  <footer class="taskbar" aria-label="CuperOS taskbar">
+    <div class="taskbar-left">
+      <a class="start-button" href="https://cuuper22.github.io/"><span class="px-icon px-start"></span> Start</a>
+      <a class="task-button" href="index.html"><span class="px-icon px-chip"></span> gpu_stack.exe</a>
+      <span class="task-button is-active"><span class="px-icon px-graph"></span> observatory.exe</span>
+    </div>
+    <div class="taskbar-clock" id="obs-clock">12:00 PM</div>
+  </footer>
+
   <div class="sr-status" id="sr-status" role="status" aria-live="polite"></div>
+
+  <script>
+    (function () {
+      var clock = document.getElementById("obs-clock");
+      if (!clock) { return; }
+      function tick() {
+        var now = new Date();
+        var h = now.getHours() % 12 || 12;
+        var m = String(now.getMinutes()).padStart(2, "0");
+        clock.textContent = h + ":" + m + " " + (now.getHours() >= 12 ? "PM" : "AM");
+      }
+      tick();
+      setInterval(tick, 1000);
+    })();
+  </script>
 </body>
 </html>