@deeeed/metamask-harness 0.34.2 → 0.34.3

package/site/assets/style.css

@@ -37,7 +37,9 @@
 
 *, *::before, *::after { box-sizing: border-box; }
 
-html { scroll-behavior: smooth; scroll-padding-top: 92px; }
+/* Clears the sticky bar plus the progress rail (114px together), so an anchor
+   never parks its heading underneath them. */
+html { scroll-behavior: smooth; scroll-padding-top: 116px; }
 
 body {
   margin: 0;
@@ -158,6 +160,11 @@ main { padding-bottom: 6rem; }
 .nav a:hover { color: var(--text); background: var(--surface); text-decoration: none; }
 .nav a[aria-current="page"] { color: var(--accent); background: var(--accent-soft); }
 
+/* The way back to the setup prompt. It leads the nav and stays visible when the
+   rest of the bar scrolls, because it is the one link every page owes a reader. */
+.nav a.nav-cta { color: var(--accent); border: 1px solid var(--accent-line); }
+.nav a.nav-cta:hover { background: var(--accent-soft); color: var(--accent); }
+
 /* ---------- progress rail ---------- */
 
 .progress-rail {
@@ -248,6 +255,101 @@ main { padding-bottom: 6rem; }
   color: var(--text-faint);
 }
 
+/* ---------- lobby (front page) ----------
+   The entry page carries one idea and one call to action: no nav, no rail, no
+   checklist. Everything else in the site hangs off the single button below. */
+
+.lobby {
+  display: flex;
+  align-items: center;
+  min-height: 100vh;
+  padding: 3rem 0 4rem;
+}
+
+.lobby-inner {
+  width: min(760px, calc(100% - 3rem));
+  margin: 0 auto;
+  text-align: center;
+}
+
+.lobby-mark {
+  display: block;
+  width: 26px;
+  height: 26px;
+  margin: 0 auto 2rem;
+  border-radius: 7px;
+  background: linear-gradient(145deg, var(--accent) 0%, var(--accent-deep) 100%);
+  transform: rotate(45deg);
+  box-shadow: 0 0 0 1px rgba(246, 133, 27, 0.3), 0 4px 18px rgba(246, 133, 27, 0.25);
+}
+
+.lobby h1 {
+  font-size: clamp(2rem, 4.6vw, 2.85rem);
+  max-width: 24ch;
+  margin: 0 auto 0.7rem;
+  /* Break at the comma rather than orphaning the last word. */
+  text-wrap: balance;
+}
+
+.lobby-lede {
+  font-size: 1.11rem;
+  line-height: 1.62;
+  color: var(--text-dim);
+  max-width: 60ch;
+  margin: 0 auto 1.1rem;
+}
+
+.lobby-sub {
+  font-size: 0.95rem;
+  color: var(--text-faint);
+  max-width: 54ch;
+  margin: 0 auto 1.5rem;
+}
+
+/* Code is never centred, even when its surroundings are. */
+.lobby .cmd { text-align: left; }
+
+/* The prompt is meant to be copied, not read: keep it short enough that the
+   button under it stays in view, and say so with a fade at the cut. */
+/* Wider right gutter than the shared block: the copy control is bigger here. */
+.lobby .cmd-hero pre { max-height: 15rem; font-size: 0.8rem; padding-right: 5rem; }
+
+.lobby .cmd-hero::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 2.6rem;
+  pointer-events: none;
+  background: linear-gradient(to bottom, rgba(11, 12, 16, 0), #0b0c10);
+}
+
+/* Copying is the call to action here, so the control is a button, not a hint. */
+.lobby .cmd-hero .copy {
+  font-size: 0.78rem;
+  font-weight: 600;
+  padding: 0.38rem 0.85rem;
+  color: #17120b;
+  background: var(--accent);
+  border-color: var(--accent);
+}
+.lobby .cmd-hero .copy:hover { color: #17120b; background: #ff9630; border-color: #ff9630; }
+.lobby .cmd-hero .copy[data-copied="1"] {
+  color: #0a1a10;
+  background: var(--pass);
+  border-color: var(--pass);
+}
+
+.lobby-cta { display: flex; justify-content: center; gap: 0.7rem; flex-wrap: wrap; margin-top: 1.6rem; }
+
+.lobby-fine {
+  margin: 2.4rem auto 0;
+  max-width: 56ch;
+  font-size: 0.86rem;
+  color: var(--text-faint);
+}
+
 /* ---------- cards ---------- */
 
 .card {
@@ -639,6 +741,16 @@ tr[hidden], .filter-hidden { display: none !important; }
 
 .stack { display: flex; flex-direction: column; gap: 0.55rem; margin: 1.8rem 0; }
 
+/* Names which end of the diagram is the one you touch. */
+.stack-caption {
+  font-family: var(--mono);
+  font-size: 0.78rem;
+  letter-spacing: 0.04em;
+  color: var(--text-faint);
+  margin: 1.6rem 0 0.55rem;
+}
+.stack-caption + .stack { margin-top: 0; }
+
 .layer {
   width: 100%;
   text-align: left;

package/site/cheatsheet.html

@@ -14,11 +14,12 @@
   <div class="wrap-wide topbar-inner">
     <a class="brand" href="index.html">
       <span class="brand-mark" aria-hidden="true"></span>
-      <span class="brand-name">mm-harness</span>
+      <span class="brand-name">recipes</span>
     </a>
     <nav class="nav" aria-label="Main">
-      <a href="index.html">Start Here</a>
-      <a href="recipes.html">Recipes</a>
+      <a class="nav-cta" href="index.html#prompt">Quick start</a>
+      <a href="how-it-works.html">How it works</a>
+      <a href="recipes.html">Recipe anatomy</a>
       <a href="perps.html">Perps</a>
       <a href="cheatsheet.html" aria-current="page">Cheatsheet</a>
       <a href="architecture.html">Architecture</a>
@@ -30,17 +31,18 @@
 
 <main>
 <section class="wrap-wide hero" style="padding-bottom:1rem">
-  <span class="eyebrow">Reference</span>
+  <span class="eyebrow">Runner reference</span>
   <h1>Cheatsheet</h1>
   <p class="lede">
-    <code>mm-harness &lt;command&gt; [target] [flags]</code> — run it from inside any MetaMask checkout.
-    The product is auto-detected; the positional target forces it; everything else is a flag on the
-    same command. Filter by what you actually work on.
+    <code>mm-harness</code> is the runner; these are its commands.
+    <code>mm-harness &lt;command&gt; [target] [flags]</code>, from inside any MetaMask checkout. The
+    product is auto-detected; the positional target forces it; everything else is a flag on the same
+    command. Filter by what you actually work on.
   </p>
   <div class="hero-meta">
-    <span>mm-harness 0.33+</span>
+    <span>mm-harness 0.34+</span>
     <span>one bin, 21 commands</span>
-    <span>--json on everything</span>
+    <span>--json on most commands</span>
   </div>
 </section>
 
@@ -230,7 +232,7 @@
       <table>
         <thead><tr><th>Flag / concept</th><th>What it does</th></tr></thead>
         <tbody>
-          <tr data-platforms="all"><td><code>--json</code></td><td>Machine-readable output on every command. This is the agent contract.</td></tr>
+          <tr data-platforms="all"><td><code>--json</code></td><td>Machine-readable output on most commands. This is the agent contract.</td></tr>
           <tr data-platforms="all"><td><code>--json-stream</code></td><td>Line-flushed JSONL progress plus a terminal event, on <code>run</code> and <code>launch</code>.</td></tr>
           <tr data-platforms="all"><td><code>--heal off</code></td><td>Fail fast, preserve the repro. Nothing is repaired under you.</td></tr>
           <tr data-platforms="all"><td><code>--heal infra-only</code></td><td>Heal transport, never wallet state. Default for <code>run</code> and <code>call</code>.</td></tr>
@@ -296,8 +298,8 @@
 
 <footer class="footer">
   <div class="wrap-wide">
-    <p>Internal getting-started guide for the MetaMask agentic coding workflow. Not official MetaMask product documentation.</p>
-    <p>Verified against mm-harness 0.33+.</p>
+    <p>Internal getting-started guide for proving MetaMask changes with recipes. Not official MetaMask product documentation.</p>
+    <p>Sample output moves between releases; trust your terminal over this page.</p>
   </div>
 </footer>