docs: show the whole stack top to bottom on the homepage

docs/.vitepress/theme/DecisionTrace.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts">
 import { computed, ref } from "vue";
-import knowledge from "../../snippets/home/site-safety/output/what-we-knew.json";
-import receipt from "../../snippets/home/site-safety/output/which-rules.json";
+import audit from "../../snippets/home/site-safety/output/audit.json";
 
 const corrected = ref(false);
 const trained = computed(() =>
-  corrected.value ? knowledge.knownToday : knowledge.knownAtDecision,
+  corrected.value ? audit.trainedAsKnownNow : audit.trainedAsKnownThen,
 );
 </script>
 
@@ -29,11 +28,11 @@ const trained = computed(() =>
         </div>
         <div>
           <dt>actor</dt>
-          <dd>{{ receipt.actor }}</dd>
+          <dd>{{ audit.actor }}</dd>
         </div>
         <div>
           <dt>governedBy</dt>
-          <dd class="decision-trace__violet">{{ receipt.governedBy }}</dd>
+          <dd class="decision-trace__violet">{{ audit.governedBy }}</dd>
         </div>
       </dl>
       <div class="decision-trace__divider"><span>One date. Two views of the evidence.</span></div>

docs/.vitepress/theme/StackMap.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import stack from "../../snippets/home/site-safety/output/stack.json";
+
+// Each layer's width is its share of the lines the homepage shows from app.ts.
+const layers = [
+  { id: "model", label: "Model", lines: stack.model },
+  { id: "which-rules", label: "Rules", lines: stack.release },
+  { id: "record-a-command", label: "Command", lines: stack.command },
+  { id: "what-did-we-know", label: "Audit", lines: stack.ask },
+  { id: "what-happens-next", label: "Open work", lines: stack.derive },
+  { id: "runtime", label: "Storage + HTTP", lines: stack.run },
+];
+</script>
+
+<template>
+  <figure class="stack-map">
+    <figcaption>
+      <code>app.ts</code> · <strong>{{ stack.total }} lines</strong> from schema to REST API
+    </figcaption>
+    <ol>
+      <li v-for="(layer, index) in layers" :key="layer.id" :style="{ flexGrow: layer.lines }">
+        <a :href="`#${layer.id}`">
+          <span class="stack-map__step">0{{ index + 1 }}</span>
+          <span class="stack-map__label">{{ layer.label }}</span>
+          <span class="stack-map__lines">{{ layer.lines }} lines</span>
+        </a>
+      </li>
+    </ol>
+  </figure>
+</template>

docs/.vitepress/theme/home.css

@@ -476,6 +476,88 @@
   padding-top: 48px;
   border-top: 1px solid var(--vp-c-divider);
 }
+.triplex-home__stack .triplex-home__example-description {
+  position: sticky;
+  top: calc(var(--vp-nav-height) + 24px);
+  align-self: start;
+}
+.triplex-home__journal {
+  margin-top: 48px;
+  padding-top: 40px;
+  border-top: 1px solid var(--vp-c-divider);
+}
+.triplex-home__journal + .triplex-home__example {
+  padding-top: 48px;
+  border-top: 1px solid var(--vp-c-divider);
+}
+.triplex-home__journal > p:last-child {
+  max-width: 780px;
+  margin: 18px 0 0;
+  font-size: 15px;
+}
+.triplex-home .triplex-home__journal > .triplex-home__output-label {
+  margin-top: 0;
+}
+.stack-map {
+  margin: 0 0 8px;
+}
+.stack-map figcaption {
+  margin-bottom: 12px;
+  font: 400 12px/1.6 var(--vp-font-family-mono);
+  color: var(--vp-c-text-2);
+}
+.stack-map figcaption strong {
+  color: var(--home-accent);
+  font-weight: 500;
+}
+.stack-map ol {
+  display: flex;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  border: 1.5px solid #263654;
+  border-radius: 9px;
+  box-shadow: 5px 5px 0 var(--home-brand);
+  overflow: hidden;
+  background: #0f1729;
+}
+.stack-map li {
+  flex-basis: 0;
+  min-width: 104px;
+  margin: 0;
+}
+.stack-map li + li {
+  margin-top: 0;
+  border-left: 1px solid #263654;
+}
+.stack-map a {
+  display: grid;
+  gap: 2px;
+  height: 100%;
+  padding: 14px 14px 12px;
+  color: #e8edf6;
+  text-decoration: none;
+  font-family: var(--vp-font-family-mono);
+  transition: background 0.15s;
+}
+.stack-map a:hover {
+  background: #1b2a4a;
+}
+.stack-map__step {
+  font-size: 10px;
+  color: #a7b5ff;
+}
+.stack-map__label {
+  overflow: hidden;
+  font-size: 13px;
+  font-weight: 500;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.stack-map__lines {
+  font-size: 11px;
+  color: #8fa0bd;
+}
 .triplex-home__example-description p {
   margin: 16px 0;
   font-size: 15px;
@@ -646,6 +728,24 @@
   .triplex-home__example-description {
     max-width: 780px;
   }
+  .triplex-home__stack .triplex-home__example-description {
+    position: static;
+  }
+  .stack-map ol {
+    flex-wrap: wrap;
+  }
+  .stack-map li {
+    flex: 1 1 30% !important;
+  }
+  .stack-map li + li {
+    border-left: 0;
+  }
+  .stack-map li {
+    border-bottom: 1px solid #263654;
+  }
+  .stack-map__label {
+    white-space: normal;
+  }
 }
 @media (max-width: 800px) {
   .triplex-index .VPHome > .vp-doc {

docs/.vitepress/theme/index.ts

@@ -10,6 +10,7 @@ import "./blueprint.css";
 import Playground from "./Playground.vue";
 import TriplexExplorer from "./TriplexExplorer.vue";
 import DecisionTrace from "./DecisionTrace.vue";
+import StackMap from "./StackMap.vue";
 
 export default {
   extends: DefaultTheme,
@@ -33,6 +34,7 @@ export default {
   }),
   enhanceApp({ app }) {
     app.component("DecisionTrace", DecisionTrace);
+    app.component("StackMap", StackMap);
     app.component("TriplexPlayground", Playground);
     app.component("TriplexExplorer", TriplexExplorer);
   },

docs/agents.md

@@ -66,7 +66,7 @@ Check these constraints with the people you work for before adopting it:
   and `ref`.
 - Set `entityType` on every assertion so type-level reads and constraints can find the entity.
 
-<<< @/snippets/home/site-safety/model.ts
+<<< @/snippets/home/site-safety/app.ts#model
 
 Read more in [Typed configuration](/configuration#ontology-dsl).
 
@@ -79,6 +79,8 @@ Read more in [Typed configuration](/configuration#ontology-dsl).
 - At command time, resolve the release you intend to enforce and keep its snapshot for the whole
   command.
 
+<<< @/snippets/home/site-safety/app.ts#release
+
 Read more in [Releases, refs, and rollback](/configuration-versioning).
 
 ## 3. Write each command as one transaction
@@ -101,11 +103,11 @@ Follow these rules for every write:
    `{ _tag: "TripleLive", id }` precondition so a concurrent change fails with a conflict instead
    of being lost.
 
-<<< @/snippets/home/site-safety/record.ts#place
+<<< @/snippets/home/site-safety/app.ts#command
 
 A retry with the same command ID returns the original receipt, and the journal gains no entry:
 
-<<< @/snippets/home/site-safety/retry.ts
+<<< @/snippets/home/site-safety/story.ts#retry
 
 Read more in [Operational primitives](/operational-primitives) and
 [Troubleshooting](/troubleshooting#what-should-happen-on-a-duplicate-command-id).
@@ -126,7 +128,7 @@ Read more in [Operational primitives](/operational-primitives) and
 - A `stale` or `unmaterialized` result doesn't mean there is no work. Rematerialize before
   treating an empty result as current.
 
-<<< @/snippets/home/site-safety/open-work.ts
+<<< @/snippets/home/site-safety/app.ts#derive
 
 The
 [compliance host example](https://github.com/bjacobso/triplex/tree/main/examples/compliance-host)
@@ -144,15 +146,15 @@ scheduler that reopens work at expiry. Read more in [Derivations](/derivations).
 - **What was retracted?** `history(entityId)` includes retracted assertions. `entity` and `match`
   show only facts visible at the basis you ask for.
 
-<<< @/snippets/home/site-safety/what-we-knew.ts
+<<< @/snippets/home/site-safety/app.ts#ask
 
 ## 6. Choose a runtime
 
 Construct one layer per database lifetime, at the application boundary. Building an in-memory
 layer again creates a new empty database, and building a SQL layer per request defeats connection
 sharing.
 
-<<< @/snippets/home/layers.ts
+<<< @/snippets/home/site-safety/app.ts#run
 
 On PostgreSQL, Triplex can join your application's own Effect SQL transaction, so your rows,
 Triplex facts, the journal, and an outbox row commit together. See