diff --git a/app/web/templates/index.html b/app/web/templates/index.html
index 65b98ad..ccc43fb 100644
--- a/app/web/templates/index.html
+++ b/app/web/templates/index.html
@@ -4,7 +4,7 @@
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width,initial-scale=1" />
   <title>embedding notebook — web1</title>
-  <link rel="stylesheet" href="/static/style.css?v=11" />
+  <link rel="stylesheet" href="/static/style.css?v=12" />
   <script src="https://unpkg.com/htmx.org@2.0.4"></script>
   <script type="importmap">
   {
@@ -32,9 +32,8 @@
   <div class="meta">
     <span class="dot {% if not deployment_id %}bad{% endif %}"></span>
     {% if deployment_id %}prefect · deployment {{ deployment_id[:8] }}{% else %}prefect · unreachable{% endif %}
-    <a href="/metrics" class="nav-link">metrics &rarr;</a>
-    <button type="button" class="theme-toggle" id="theme-toggle" aria-label="toggle theme">◐</button><br/>
-    <span style="color:var(--faint)">{{ prefect_api }}</span>
+    <a href="#metrics" class="nav-link">metrics &darr;</a>
+    <button type="button" class="theme-toggle" id="theme-toggle" aria-label="toggle theme">◐</button>
   </div>
 </header>
 
@@ -318,12 +317,94 @@
 
 </main>
 
+<details class="dataset-picker metrics-inline" id="metrics">
+  <summary>
+    <span class="picker-meta">
+      <span class="section-number">§ 5</span>
+      <span class="picker-title">stability metrics</span>
+      <span class="picker-selection">
+        <span class="lbl">view</span>
+        <code>frame-to-frame travel · vs-initial drift · kNN retention</code>
+      </span>
+    </span>
+    <span class="picker-toggle" aria-hidden="true"></span>
+  </summary>
+
+  <div class="picker-body">
+    <div class="filter-bar">
+      <div class="filter-group">
+        <span class="ctl-label">dataset</span>
+        <div class="chips" id="flt-dataset" aria-label="filter by dataset"></div>
+      </div>
+
+      <div class="filter-group">
+        <span class="ctl-label">algorithm</span>
+        <div class="chips" id="flt-algo" aria-label="filter by algorithm"></div>
+      </div>
+
+      <div class="filter-group stat-group">
+        <span class="ctl-label">travel stat</span>
+        <div class="segmented count-4" role="radiogroup" aria-label="travel stat">
+          <label><input type="radio" name="stat" value="mean" checked><span>mean</span></label>
+          <label><input type="radio" name="stat" value="median"><span>median</span></label>
+          <label><input type="radio" name="stat" value="p95"><span>p95</span></label>
+          <label><input type="radio" name="stat" value="max"><span>max</span></label>
+        </div>
+      </div>
+
+      <div class="filter-count">
+        <span id="match-count">0</span>&thinsp;/&thinsp;<span id="total-count">0</span> <span class="muted">runs</span>
+      </div>
+    </div>
+
+    <div class="plots">
+      <figure class="plot">
+        <figcaption>
+          <span class="plot-title">frame-to-frame travel</span>
+          <span class="plot-sub">‖&thinsp;y(t) − y(t−1)&thinsp;‖ &nbsp;·&nbsp; output 2-D space</span>
+        </figcaption>
+        <div id="plot-ff" class="plot-area"></div>
+      </figure>
+
+      <figure class="plot">
+        <figcaption>
+          <span class="plot-title">vs-initial travel</span>
+          <span class="plot-sub">‖&thinsp;y(t) − y(0)&thinsp;‖ &nbsp;·&nbsp; drift from first timestep</span>
+        </figcaption>
+        <div id="plot-vi" class="plot-area"></div>
+      </figure>
+
+      <figure class="plot">
+        <figcaption>
+          <span class="plot-title">kNN retention</span>
+          <span class="plot-sub">fraction of input-space k-NN preserved in 2-D (higher = more faithful)</span>
+        </figcaption>
+        <div id="plot-knn" class="plot-area"></div>
+      </figure>
+    </div>
+
+    <div class="legend" id="legend"></div>
+
+    <div id="empty" class="empty" hidden>
+      No metrics to show. Dispatch a run above — sidecar JSONs appear in <code>figs/</code> after the flow completes.
+    </div>
+  </div>
+</details>
+
 <footer class="colophon">
-  <span><span class="k">web</span> · scientific instrument · port 8001</span>
+  <span>&copy; 2026 Mind the Math LLC</span>
 </footer>
 
-<script src="/static/theme.js?v=7"></script>
-<script type="module" src="/static/dataset-picker.js?v=7"></script>
+<script src="/static/theme.js?v=11"></script>
+<script type="module" src="/static/dataset-picker.js?v=11"></script>
+<script type="module" src="/static/metrics.js?v=11"></script>
+<script>
+  // Anchor-links alone don't expand <details>; force it.
+  document.querySelector('a[href="#metrics"]')?.addEventListener('click', () => {
+    const d = document.getElementById('metrics');
+    if (d) d.open = true;
+  });
+</script>
 
 </body>
 </html>
diff --git a/app/web/templates/metrics.html b/app/web/templates/metrics.html
index 93f6864..9416695 100644
--- a/app/web/templates/metrics.html
+++ b/app/web/templates/metrics.html
@@ -22,8 +22,7 @@
   </div>
   <div class="meta">
     <a href="/" class="masthead-link">&larr; runs</a>
-    <button type="button" class="theme-toggle" id="theme-toggle" aria-label="toggle theme">◐</button><br/>
-    <span style="color:var(--faint)">{{ prefect_api }}</span>
+    <button type="button" class="theme-toggle" id="theme-toggle" aria-label="toggle theme">◐</button>
   </div>
 </header>
 
@@ -90,7 +89,7 @@
 </section>
 
 <footer class="colophon">
-  <span><span class="k">web</span> · metrics · port 8001</span>
+  <span>&copy; 2026 Mind the Math LLC</span>
 </footer>
 
 <script src="/static/theme.js?v=5"></script>