@deeeed/metamask-harness 0.34.4 → 0.35.0

package/site/assets/style.css

@@ -110,8 +110,10 @@ main { padding-bottom: 6rem; }
 .topbar-inner {
   display: flex;
   align-items: center;
-  gap: 1.5rem;
-  height: 60px;
+  flex-wrap: wrap;
+  gap: 0.5rem 1.5rem;
+  min-height: 60px;
+  padding: 0.5rem 0;
 }
 
 .brand {
@@ -125,31 +127,24 @@ main { padding-bottom: 6rem; }
 }
 .brand:hover { text-decoration: none; }
 
-/* Brand-adjacent mark: a geometric diamond, not a product logo. */
-.brand-mark {
-  width: 20px;
-  height: 20px;
-  flex: none;
-  border-radius: 5px;
-  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 3px 12px rgba(246, 133, 27, 0.22);
-}
+.brand-mark { width: 22px; height: 22px; flex: none; display: block; }
 
 .brand-name { font-family: var(--mono); font-size: 0.95rem; }
 
+/* Six items fit a laptop on one line; below that they wrap onto a second row
+   rather than scrolling a label out of sight. */
 .nav {
   display: flex;
   gap: 0.3rem;
   margin-left: auto;
   min-width: 0;
-  overflow-x: auto;
-  flex-wrap: nowrap;
-  scrollbar-width: thin;
+  flex-wrap: wrap;
+  justify-content: flex-end;
 }
 
 .nav a {
   flex: none;
+  white-space: nowrap;
   color: var(--text-dim);
   font-size: 0.885rem;
   font-weight: 500;
@@ -272,16 +267,7 @@ main { padding-bottom: 6rem; }
   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-mark { display: block; width: 52px; height: 52px; margin: 0 auto 1.6rem; }
 
 .lobby h1 {
   font-size: clamp(2rem, 4.6vw, 2.85rem);
@@ -352,17 +338,19 @@ main { padding-bottom: 6rem; }
 .qs-title {
   display: flex;
   align-items: center;
-  gap: 0.65rem;
   font-size: 1.16rem;
   font-weight: 640;
   margin: 0 0 0.35rem;
 }
 
+/* The margin rather than a flex gap: the badge stays separated from the title
+   even when the flex layout does not apply. */
 .qs-num {
   flex: none;
-  width: 1.6rem;
-  height: 1.6rem;
-  display: grid;
+  width: 1.7rem;
+  height: 1.7rem;
+  margin-right: 0.75rem;
+  display: inline-grid;
   place-items: center;
   border-radius: 50%;
   background: var(--accent-soft);
@@ -370,6 +358,7 @@ main { padding-bottom: 6rem; }
   color: var(--accent);
   font-family: var(--mono);
   font-size: 0.8rem;
+  line-height: 1;
 }
 
 .qs-why { color: var(--text-dim); font-size: 0.95rem; margin-bottom: 0.9rem; }
@@ -960,6 +949,76 @@ tr[hidden], .filter-hidden { display: none !important; }
 .verdict.pass { color: var(--pass); }
 .verdict.fail { color: var(--fail); }
 
+/* ---------- dependency map ----------
+   A column of nodes with the edge label between them, so the direction reads
+   top to bottom without a diagram library. */
+
+.map { margin: 1.5rem 0 2.5rem; }
+
+.node {
+  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-raised) 100%);
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  padding: 1.25rem 1.4rem;
+}
+.node:hover { border-color: var(--accent-line); }
+
+/* The one you install. */
+.node-key { border-color: var(--accent-line); }
+
+.node-tag {
+  display: block;
+  font-family: var(--mono);
+  font-size: 0.72rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--text-faint);
+  margin-bottom: 0.35rem;
+}
+
+.node-name { font-size: 1.12rem; font-weight: 640; margin: 0 0 0.4rem; }
+.node-what { font-size: 0.94rem; color: var(--text-dim); margin-bottom: 0.7rem; }
+
+.node-list {
+  list-style: none;
+  margin: 0 0 0.8rem;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem 0.5rem;
+  font-size: 0.86rem;
+}
+.node-list li { color: var(--text-dim); }
+
+.node-url {
+  display: block;
+  font-family: var(--mono);
+  font-size: 0.8rem;
+  word-break: break-all;
+  margin-bottom: 0.15rem;
+}
+
+.node .badge { margin: 0.55rem 0.4rem 0 0; display: inline-block; }
+.node-more { display: block; font-size: 0.88rem; margin-top: 0.6rem; }
+
+/* Edge labels carry the verb; the arrow alone would not say what flows. */
+.map-edge {
+  margin: 0.7rem 0;
+  text-align: center;
+  font-family: var(--mono);
+  font-size: 0.8rem;
+  color: var(--text-faint);
+}
+
+.map-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
+.map-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
+
+@media (max-width: 780px) {
+  .map-split { grid-template-columns: 1fr; }
+  .map-split .map-edge:last-child { margin-top: 0; }
+  .map-row { grid-template-columns: 1fr; }
+}
+
 /* ---------- misc ---------- */
 
 .btn-row { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.8rem; }

package/site/cheatsheet.html

@@ -5,7 +5,8 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Cheatsheet — mm-harness</title>
 <meta name="description" content="Every mm-harness command worth knowing, filterable by platform, with copy buttons.">
-<link rel="stylesheet" href="assets/style.css">
+<link rel="icon" href="assets/metamask-fox.svg" type="image/svg+xml">
+<link rel="stylesheet" href="assets/style.css?v=4">
 </head>
 <body data-progress-page="cheatsheet">
 <a class="skip" href="#daily">Skip to the commands</a>
@@ -13,18 +14,16 @@
 <header class="topbar">
   <div class="wrap-wide topbar-inner">
     <a class="brand" href="index.html">
-      <span class="brand-mark" aria-hidden="true"></span>
+      <img class="brand-mark" src="assets/metamask-fox.svg" alt="" width="22" height="22">
       <span class="brand-name">recipes</span>
     </a>
     <nav class="nav" aria-label="Main">
       <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="perps.html">Team / Perps</a>
       <a href="cheatsheet.html" aria-current="page">Cheatsheet</a>
       <a href="architecture.html">Architecture</a>
       <a href="tutorials/index.html">Tutorials</a>
-      <a href="reviewers.html">For Reviewers</a>
     </nav>
   </div>
 </header>
@@ -303,6 +302,6 @@
   </div>
 </footer>
 
-<script type="module" src="assets/progress.mjs"></script>
+<script type="module" src="assets/progress.mjs?v=4"></script>
 </body>
 </html>

package/site/ecosystem.html

@@ -0,0 +1,162 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Ecosystem — which repo is which</title>
+<meta name="description" content="A dependency map of the repositories and packages behind the recipe workflow: skills, mm-harness, the spec and engine, team recipe libraries, the product repos, and the learnings inbox.">
+<link rel="icon" href="assets/metamask-fox.svg" type="image/svg+xml">
+<link rel="stylesheet" href="assets/style.css?v=4">
+</head>
+<body>
+<a class="skip" href="#map">Skip to the map</a>
+
+<header class="topbar">
+  <div class="wrap topbar-inner">
+    <a class="brand" href="index.html">
+      <img class="brand-mark" src="assets/metamask-fox.svg" alt="" width="22" height="22">
+      <span class="brand-name">recipes</span>
+    </a>
+    <nav class="nav" aria-label="Main">
+      <a class="nav-cta" href="index.html#prompt">Quick start</a>
+      <a href="how-it-works.html">How it works</a>
+      <a href="perps.html">Team / Perps</a>
+      <a href="cheatsheet.html">Cheatsheet</a>
+      <a href="architecture.html">Architecture</a>
+      <a href="tutorials/index.html">Tutorials</a>
+    </nav>
+  </div>
+</header>
+
+<main>
+<section class="wrap hero" style="padding-bottom:0.5rem">
+  <span class="eyebrow">Repositories</span>
+  <h1>Which repo is which</h1>
+  <p class="lede">
+    Six things sit behind a recipe run, and it is not obvious from the outside which one you install,
+    which one you contribute to, and which one is just a dependency. This is the dependency map — not
+    a pitch.
+  </p>
+</section>
+
+<section class="wrap-wide">
+  <div class="map" id="map">
+
+    <article class="node">
+      <span class="node-tag">You invoke this</span>
+      <h2 class="node-name">Skills</h2>
+      <p class="node-what">
+        The workflows — <code>mms-recipe-cook</code>, <code>mms-recipe-pr-qa-review</code> and the rest.
+        They call <code>mm-harness</code>; they are not a dependency of it.
+      </p>
+      <a class="node-url" href="https://github.com/Consensys/skills">github.com/Consensys/skills</a>
+      <span class="badge">internal</span>
+    </article>
+
+    <p class="map-edge">calls ↓</p>
+
+    <article class="node node-key">
+      <span class="node-tag">The runner</span>
+      <h2 class="node-name">mm-harness</h2>
+      <p class="node-what">
+        Launch, typed actions, graph execution, artifacts. Installed from npm as
+        <code>@deeeed/metamask-harness</code>; the MetaMask-specific layer lives here.
+      </p>
+      <a class="node-url" href="https://github.com/MetaMask/experimental-metamask-harness">github.com/MetaMask/experimental-metamask-harness</a>
+      <span class="badge">private</span>
+      <span class="badge">npm @deeeed/metamask-harness</span>
+    </article>
+
+    <div class="map-split">
+      <p class="map-edge">depends on ↓</p>
+      <p class="map-edge">runs recipes from ↓</p>
+    </div>
+
+    <div class="map-row">
+      <article class="node">
+        <span class="node-tag">Spec &amp; engine</span>
+        <h2 class="node-name">farmslot packages</h2>
+        <p class="node-what">
+          The recipe protocol and the execution engine, as pinned by mm-harness.
+          <code>recipe-harness</code> depends on <code>protocol</code>.
+        </p>
+        <ul class="node-list">
+          <li><code>@farmslot/protocol</code> 0.18.0</li>
+          <li><code>@farmslot/recipe-harness</code> 0.14.0</li>
+          <li><code>@farmslot/agent-runtime</code> 0.7.0</li>
+          <li><code>@farmslot/handoff</code> 0.3.1</li>
+          <li><code>@farmslot/expo-recipe</code> 0.7.1</li>
+        </ul>
+        <span class="badge">npm</span>
+      </article>
+
+      <article class="node">
+        <span class="node-tag">Your customization</span>
+        <h2 class="node-name">Recipe libraries</h2>
+        <p class="node-what">
+          One per team, pointed at with <code>RECIPE_LIBRARY_PATH</code>, resolved ahead of the small
+          bundled MetaMask library. Perps is the worked example.
+        </p>
+        <a class="node-url" href="https://github.com/MetaMask/experimental-metamask-recipe-perps">github.com/MetaMask/experimental-metamask-recipe-perps</a>
+        <span class="badge">private</span>
+        <a class="node-more" href="perps.html">How to point at one →</a>
+      </article>
+    </div>
+
+    <p class="map-edge">drives ↓</p>
+
+    <article class="node">
+      <span class="node-tag">What gets proved</span>
+      <h2 class="node-name">Product repos</h2>
+      <p class="node-what">
+        The real builds a recipe drives. Each also installs the skills — every one of the three has a
+        <code>skills</code> script running <code>metamask-skills sync</code>.
+      </p>
+      <a class="node-url" href="https://github.com/MetaMask/metamask-extension">github.com/MetaMask/metamask-extension</a>
+      <a class="node-url" href="https://github.com/MetaMask/metamask-mobile">github.com/MetaMask/metamask-mobile</a>
+      <a class="node-url" href="https://github.com/MetaMask/core">github.com/MetaMask/core</a>
+      <span class="badge">public</span>
+    </article>
+
+    <p class="map-edge">promoted learnings, via <code>@farmslot/handoff</code> ↓</p>
+
+    <article class="node">
+      <span class="node-tag">Opt-in output</span>
+      <h2 class="node-name">Learnings inbox</h2>
+      <p class="node-what">
+        Scrubbed learning packages staged from finished runs, for later review. A terminal mark stages
+        locally; sharing centrally is a separate, explicit step.
+      </p>
+      <a class="node-url" href="https://github.com/MetaMask/experimental-distributed-learnings">github.com/MetaMask/experimental-distributed-learnings</a>
+      <span class="badge">private</span>
+    </article>
+
+  </div>
+</section>
+
+<section class="wrap">
+  <div class="note">
+    <span class="note-title">Standing disclosure</span>
+    <p>
+      The farmslot <strong>control plane</strong> is experimental and sole-maintained. What is adopted
+      here is the spec and the engine — the npm packages above — not the control plane. Weigh that
+      before depending on anything beyond them.
+    </p>
+  </div>
+
+  <div class="btn-row">
+    <a class="btn btn-primary" href="perps.html">Customize it for your team →</a>
+    <a class="btn btn-ghost" href="architecture.html">How the layers fit</a>
+  </div>
+</section>
+</main>
+
+<footer class="footer">
+  <div class="wrap">
+    <p>Internal getting-started guide for proving MetaMask changes with recipes. Not official MetaMask product documentation.</p>
+    <p>Versions are the ones mm-harness pins today; check <code>package.json</code> over this page.</p>
+  </div>
+</footer>
+<script type="module" src="assets/progress.mjs?v=4"></script>
+</body>
+</html>

package/site/how-it-works.html

@@ -5,7 +5,8 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>How it works — proving a change with a recipe</title>
 <meta name="description" content="How a recipe proves a change on a real MetaMask build, checks itself before handoff, and stays behind as a regression guard. The full walkthrough, step by step.">
-<link rel="stylesheet" href="assets/style.css">
+<link rel="icon" href="assets/metamask-fox.svg" type="image/svg+xml">
+<link rel="stylesheet" href="assets/style.css?v=4">
 </head>
 <body data-progress-page="start">
 <a class="skip" href="#steps">Skip to the walkthrough</a>
@@ -13,18 +14,16 @@
 <header class="topbar">
   <div class="wrap topbar-inner">
     <a class="brand" href="index.html">
-      <span class="brand-mark" aria-hidden="true"></span>
+      <img class="brand-mark" src="assets/metamask-fox.svg" alt="" width="22" height="22">
       <span class="brand-name">recipes</span>
     </a>
     <nav class="nav" aria-label="Main">
       <a class="nav-cta" href="index.html#prompt">Quick start</a>
       <a href="how-it-works.html" aria-current="page">How it works</a>
-      <a href="recipes.html">Recipe anatomy</a>
-      <a href="perps.html">Perps</a>
+      <a href="perps.html">Team / Perps</a>
       <a href="cheatsheet.html">Cheatsheet</a>
       <a href="architecture.html">Architecture</a>
       <a href="tutorials/index.html">Tutorials</a>
-      <a href="reviewers.html">For Reviewers</a>
     </nav>
   </div>
 </header>
@@ -55,7 +54,7 @@
     <span>progress saves in this browser</span>
   </div>
   <p style="margin-top:.9rem;opacity:.7;font-size:.9rem;max-width:60ch">
-    A proposal for how agents can code at MetaMask — offered for teams to try, not an official standard.
+    A proposal for how agents can code at MetaMask — offered for teams to try.
   </p>
 </section>
 
@@ -663,9 +662,9 @@ artifacts (6):
   <h2>Next</h2>
   <div class="grid grid-3">
     <div class="card">
-      <h3>What a recipe is</h3>
+      <h3>Recipe anatomy</h3>
       <p>The graph, the intents, the assertions, and the test of whether yours is worth keeping.</p>
-      <p><a href="recipes.html">Recipes →</a></p>
+      <p><a href="recipes.html">Read the anatomy →</a></p>
     </div>
     <div class="card">
       <h3>Your team's library</h3>
@@ -688,6 +687,6 @@ artifacts (6):
   </div>
 </footer>
 
-<script type="module" src="assets/progress.mjs"></script>
+<script type="module" src="assets/progress.mjs?v=4"></script>
 </body>
 </html>

package/site/index.html

@@ -5,14 +5,15 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Recipes — build with proof, not hope</title>
 <meta name="description" content="A skill drives the change. The recipe proves it on a real MetaMask build as it is written, self-checked in the same context and kept as a regression guard.">
-<link rel="stylesheet" href="assets/style.css">
+<link rel="icon" href="assets/metamask-fox.svg" type="image/svg+xml">
+<link rel="stylesheet" href="assets/style.css?v=4">
 </head>
 <body>
 <a class="skip" href="#prompt">Skip to the prompt</a>
 
 <main class="lobby">
   <div class="lobby-inner">
-    <span class="lobby-mark" aria-hidden="true"></span>
+    <img class="lobby-mark" src="assets/metamask-fox.svg" alt="" width="52" height="52">
     <span class="eyebrow">Proven as it's built</span>
 
     <h1>Build agentically, with confidence.</h1>
@@ -64,14 +65,18 @@ instead of improvising.
    `--preflight-mode` is an internal adapter flag, not a public launch flag.
 6. On Extension run `mm-harness fixtures set`. On Mobile include the same
    `--device &lt;UUID-or-serial&gt;` used for launch. Wait for it to succeed.
-7. Install the skills — they are how the work actually gets driven. The
-   installer reads from LOCAL CLONES, so clone the sources first and add both
-   exports to my shell rc:
+7. Install the skills — they are how the work actually gets driven. First
+   inspect `METAMASK_SKILLS_DIR` and `CONSENSYS_SKILLS_DIR`, then check the
+   expected local layout below. Reuse every valid existing clone. For each
+   missing source, show me the proposed path and ask before cloning:
      `git clone https://github.com/MetaMask/skills.git ~/dev/metamask/skills`
-     `export METAMASK_SKILLS_DIR=~/dev/metamask/skills`
-   Then the internal overlay, which needs access to the Consensys org:
      `git clone git@github.com:Consensys/skills.git ~/dev/Consensys/skills`
+   The internal overlay needs access to the Consensys org. Export the paths in
+   the current shell for setup:
+     `export METAMASK_SKILLS_DIR=~/dev/metamask/skills`
      `export CONSENSYS_SKILLS_DIR=~/dev/Consensys/skills`
+   Never edit `.zshrc`, `.bashrc`, or another shell startup file unless I
+   explicitly consent; ask separately if I want these exports persisted.
    If that clone fails, tell me — I may not have access, and the next step
    depends on it. Then, from inside the checkout:
      `yarn metamask-skills list --maturity experimental`   everything installable
@@ -107,7 +112,7 @@ exact error.</code></pre></div>
         </p>
 
         <div class="tabs">
-          <div class="tablist" role="tablist" aria-label="Choose what to do">
+          <div class="tablist" role="tablist" aria-label="Choose what to do" hidden>
             <button type="button" role="tab" id="tab-review" class="tab" aria-controls="panel-review" aria-selected="true" tabindex="0">Review a PR</button>
             <button type="button" role="tab" id="tab-fix" class="tab" aria-controls="panel-fix" aria-selected="false" tabindex="-1">Fix a bug</button>
             <button type="button" role="tab" id="tab-build" class="tab" aria-controls="panel-build" aria-selected="false" tabindex="-1">Build a feature</button>
@@ -128,7 +133,7 @@ per-AC verdict table, the overall verdict, and the artifact paths. Do not post
 anything on the PR.</code></pre></div>
           </div>
 
-          <div class="qs-panel" role="tabpanel" id="panel-fix" aria-labelledby="tab-fix" tabindex="0" hidden>
+          <div class="qs-panel" role="tabpanel" id="panel-fix" aria-labelledby="tab-fix" tabindex="0">
             <p class="qs-panel-why">
               <code>mms-recipe-cook</code>, classified as <code>fix-bug</code>. It lists the
               compatible checklist templates and stops for your pick, then works on a local task
@@ -144,7 +149,7 @@ Then fix it and re-run the same recipe until it passes. Show me the recipe
 status, the per-node results, and the artifact paths.</code></pre></div>
           </div>
 
-          <div class="qs-panel" role="tabpanel" id="panel-build" aria-labelledby="tab-build" tabindex="0" hidden>
+          <div class="qs-panel" role="tabpanel" id="panel-build" aria-labelledby="tab-build" tabindex="0">
             <p class="qs-panel-why">
               <code>mms-recipe-cook</code>, classified as <code>dev</code>. Same flow: it lists the
               compatible templates, stops for your pick, and keeps the diff uncommitted until you
@@ -169,11 +174,11 @@ results, and the artifact paths.</code></pre></div>
     </div>
 
     <p class="lobby-fine">
-      A proposal for how agents can code at MetaMask — offered for teams to try, not an official standard.
+      A proposal for how agents can code at MetaMask — offered for teams to try.
     </p>
   </div>
 </main>
 
-<script type="module" src="assets/progress.mjs"></script>
+<script type="module" src="assets/progress.mjs?v=4"></script>
 </body>
 </html>