@deeeed/metamask-harness 0.34.3 → 0.34.4

package/CHANGELOG.md

@@ -2,6 +2,17 @@
 
 ## Unreleased
 
+## 0.34.4 - 2026-08-12
+
+### Changed
+
+- Split the site quick start into one-time setup and task-focused workflow tabs.
+
+### Fixed
+
+- Update the transitive `tar` dependency from 7.5.19 to 7.5.22.
+- Update transitive `js-yaml`, `nanoid`, and `postcss` dependencies.
+
 ## 0.34.3 - 2026-08-12
 
 ### Added

package/dist/adapters/mobile/source-freshness.js

@@ -21,20 +21,28 @@ const ENV_INPUTS = [".js.env", ".env", ".env.local"];
 const BASELINE_FILE = "mobile-source-baseline.json";
 function mobileSourceFingerprint(target) {
   const hash = createHash("sha256");
-  hash.update(git(target, ["rev-parse", "HEAD"]));
-  hash.update(git(target, ["diff", "--no-ext-diff", "--binary", "HEAD", "--", ...SOURCE_PATHS]));
-  const untracked = git(target, [
-    "ls-files",
-    "--others",
-    "--exclude-standard",
-    "-z",
-    "--",
-    ...SOURCE_PATHS
-  ]).toString("utf8").split("\0").filter(Boolean).sort();
-  for (const relative of untracked) {
-    hash.update(`untracked\0${relative}\0`);
-    hash.update(fs.readFileSync(path.join(target, relative)));
-    hash.update("\0");
+  const head = tryGit(target, ["rev-parse", "HEAD"]);
+  if (head === null) {
+    hash.update("non-git\0");
+    for (const relative of SOURCE_PATHS) {
+      hashPath(hash, target, relative);
+    }
+  } else {
+    hash.update(head);
+    hash.update(git(target, ["diff", "--no-ext-diff", "--binary", "HEAD", "--", ...SOURCE_PATHS]));
+    const untracked = git(target, [
+      "ls-files",
+      "--others",
+      "--exclude-standard",
+      "-z",
+      "--",
+      ...SOURCE_PATHS
+    ]).toString("utf8").split("\0").filter(Boolean).sort();
+    for (const relative of untracked) {
+      hash.update(`untracked\0${relative}\0`);
+      hash.update(fs.readFileSync(path.join(target, relative)));
+      hash.update("\0");
+    }
   }
   for (const relative of ENV_INPUTS) {
     const absolute = path.join(target, relative);
@@ -84,6 +92,35 @@ function git(target, args) {
     stdio: ["ignore", "pipe", "ignore"]
   });
 }
+function tryGit(target, args) {
+  try {
+    return git(target, args);
+  } catch {
+    return null;
+  }
+}
+function hashPath(hash, root, relative) {
+  const absolute = path.join(root, relative);
+  if (!fs.existsSync(absolute)) {
+    hash.update(`absent\0${relative}\0`);
+    return;
+  }
+  const stat = fs.lstatSync(absolute);
+  if (stat.isDirectory()) {
+    hash.update(`directory\0${relative}\0`);
+    for (const child of fs.readdirSync(absolute).sort()) {
+      hashPath(hash, root, path.join(relative, child));
+    }
+    return;
+  }
+  if (stat.isSymbolicLink()) {
+    hash.update(`symlink\0${relative}\0${fs.readlinkSync(absolute)}\0`);
+    return;
+  }
+  hash.update(`file\0${relative}\0`);
+  hash.update(fs.readFileSync(absolute));
+  hash.update("\0");
+}
 function readBaseline(target) {
   try {
     const parsed = JSON.parse(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deeeed/metamask-harness",
-  "version": "0.34.3",
+  "version": "0.34.4",
   "type": "module",
   "bin": {
     "mm-harness": "bin/mm-harness"

package/scripts/site-contrast.mjs

@@ -146,6 +146,7 @@ const REVEAL = String.raw`
     const d = document.getElementById(l.getAttribute('aria-controls'));
     if (d) d.hidden = false;
   });
+  document.querySelectorAll('[role="tabpanel"][hidden]').forEach((p) => { p.hidden = false; });
   return true;
 })()
 `;
@@ -331,6 +332,9 @@ async function auditPage(browserEndpoint, url) {
 async function checkBehavior(browserEndpoint, port, pages) {
   const base = `http://127.0.0.1:${port}/`;
   await withPage(browserEndpoint, `${base}index.html`, async (page) => {
+    // Step 1 is the hero call to action; it was a collapsible before, so accept
+    // either shape. Step 2 is a tabbed set of prompts, one per kind of work —
+    // every one of them has to survive a copy, including the hidden panels.
     const copied = await page.evaluate(String.raw`
       (async () => {
         Object.defineProperty(navigator, 'clipboard', {
@@ -342,22 +346,38 @@ async function checkBehavior(browserEndpoint, port, pages) {
             },
           },
         });
-        // The onboarding prompt is the hero call to action; it was a collapsible
-        // before, so accept either shape.
-        const button = document.querySelector('.cmd-hero .copy, .prompt .copy');
-        if (!button) throw new Error('copy button was not initialized');
-        button.click();
-        await new Promise((resolve) => setTimeout(resolve, 25));
-        return window.__siteCopied;
+        async function grab(button) {
+          if (!button) throw new Error('copy button was not initialized');
+          window.__siteCopied = null;
+          button.click();
+          await new Promise((resolve) => setTimeout(resolve, 25));
+          return window.__siteCopied;
+        }
+        const out = { setup: await grab(document.querySelector('.cmd-hero .copy, .prompt .copy')), work: [] };
+        for (const tab of document.querySelectorAll('[role="tab"]')) {
+          tab.click();
+          const panel = document.getElementById(tab.getAttribute('aria-controls'));
+          if (!panel || panel.hidden) throw new Error('tab ' + tab.id + ' did not reveal its panel');
+          out.work.push(await grab(panel.querySelector('.cmd .copy')));
+        }
+        return out;
       })()
     `);
-    // Both halves of the onboarding have to survive a copy: set up the harness
-    // and the skills, then drive real work through one.
-    const expected = ['npm i -g @deeeed/metamask-harness@latest', 'yarn skills', '/mms-recipe-cook'];
-    const missing = expected.filter((line) => !copied?.includes(line));
+    // Setting up installs the harness and the skills; the work prompts invoke
+    // them by their exact installed names.
+    const expected = [
+      ['npm i -g @deeeed/metamask-harness@latest', copied.setup],
+      ['yarn skills', copied.setup],
+      ['/mms-recipe-pr-qa-review', copied.work.join('\n')],
+      ['/mms-recipe-cook', copied.work.join('\n')],
+    ];
+    const missing = expected.filter(([line, text]) => !text?.includes(line)).map(([line]) => line);
     if (missing.length) {
       throw new Error(`copy prompt omitted ${missing.map((m) => `"${m}"`).join(', ')}`);
     }
+    if (copied.work.length < 3) {
+      throw new Error(`expected three work prompts, copied ${copied.work.length}`);
+    }
 
     // The landing page is the lobby: one prompt, one way onward, nothing else.
     const lobby = await page.evaluate(String.raw`

package/site/assets/progress.mjs

@@ -1,6 +1,6 @@
 /*
  * Shared behaviour for the getting-started site: checklist progress, copy
- * buttons, platform filters, and the layer diagram. No dependencies, no
+ * buttons, platform filters, tabs, and the layer diagram. No dependencies, no
  * network, no tracking. Progress lives in localStorage under
  * `mmh.progress.<page>`, where <page> comes from body[data-progress-page].
  * Pages that share a namespace share their state (the How it works walkthrough and the V1
@@ -235,6 +235,50 @@
     select('all');
   }
 
+  /* ---------- tabs ---------- */
+
+  /*
+   * One tablist per group, roving tabindex: only the selected tab is in the
+   * tab order, arrows move between them. Panels stay in the DOM so their
+   * commands remain copyable the moment a tab is shown.
+   */
+  function initTabs() {
+    [].slice.call(document.querySelectorAll('[role="tablist"]')).forEach(function (list) {
+      var tabs = [].slice.call(list.querySelectorAll('[role="tab"]'));
+      if (!tabs.length) return;
+
+      function select(tab, focus) {
+        tabs.forEach(function (other) {
+          var on = other === tab;
+          other.setAttribute('aria-selected', String(on));
+          other.tabIndex = on ? 0 : -1;
+          var panel = document.getElementById(other.getAttribute('aria-controls'));
+          if (panel) panel.hidden = !on;
+        });
+        if (focus) tab.focus();
+      }
+
+      tabs.forEach(function (tab, i) {
+        tab.addEventListener('click', function () { select(tab, false); });
+        tab.addEventListener('keydown', function (e) {
+          var next = null;
+          if (e.key === 'ArrowRight') next = tabs[(i + 1) % tabs.length];
+          if (e.key === 'ArrowLeft') next = tabs[(i - 1 + tabs.length) % tabs.length];
+          if (e.key === 'Home') next = tabs[0];
+          if (e.key === 'End') next = tabs[tabs.length - 1];
+          if (!next) return;
+          e.preventDefault();
+          select(next, true);
+        });
+      });
+
+      var current = tabs.filter(function (t) {
+        return t.getAttribute('aria-selected') === 'true';
+      })[0];
+      select(current || tabs[0], false);
+    });
+  }
+
   /* ---------- layer diagram ---------- */
 
   function initLayers() {
@@ -261,6 +305,7 @@
     initCopy();
     initCellCopy();
     initFilters();
+    initTabs();
     initLayers();
   }
 

package/site/assets/style.css

@@ -341,6 +341,74 @@ main { padding-bottom: 6rem; }
   border-color: var(--pass);
 }
 
+/* ---------- quick start (lobby) ----------
+   Two steps: set up once, then pick the work. Left-aligned inside the centred
+   lobby, because everything in here is read line by line. */
+
+.qs { text-align: left; margin-top: 1.8rem; }
+
+.qs-step + .qs-step { margin-top: 2.6rem; }
+
+.qs-title {
+  display: flex;
+  align-items: center;
+  gap: 0.65rem;
+  font-size: 1.16rem;
+  font-weight: 640;
+  margin: 0 0 0.35rem;
+}
+
+.qs-num {
+  flex: none;
+  width: 1.6rem;
+  height: 1.6rem;
+  display: grid;
+  place-items: center;
+  border-radius: 50%;
+  background: var(--accent-soft);
+  border: 1px solid var(--accent-line);
+  color: var(--accent);
+  font-family: var(--mono);
+  font-size: 0.8rem;
+}
+
+.qs-why { color: var(--text-dim); font-size: 0.95rem; margin-bottom: 0.9rem; }
+
+/* ---------- tabs ---------- */
+
+.tablist {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+  margin-bottom: 0.9rem;
+}
+
+.tab {
+  font: 560 0.9rem var(--sans);
+  color: var(--text-dim);
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: 99px;
+  padding: 0.4rem 1rem;
+  cursor: pointer;
+  transition: all 0.16s var(--ease);
+}
+.tab:hover { color: var(--text); border-color: var(--accent-line); }
+.tab[aria-selected="true"] {
+  color: var(--accent);
+  background: var(--accent-soft);
+  border-color: var(--accent-line);
+}
+
+.qs-panel[hidden] { display: none; }
+.qs-panel:focus-visible { outline-offset: 4px; }
+
+.qs-panel-why { color: var(--text-dim); font-size: 0.92rem; margin-bottom: 0.5rem; }
+
+/* These prompts are the call to action too, so their copy control never hides. */
+.qs-panel .cmd .copy { opacity: 1; }
+.qs-panel .cmd pre { white-space: pre-wrap; word-break: break-word; font-size: 0.82rem; }
+
 .lobby-cta { display: flex; justify-content: center; gap: 0.7rem; flex-wrap: wrap; margin-top: 1.6rem; }
 
 .lobby-fine {

package/site/index.html

@@ -21,14 +21,20 @@
       self-checked in the same context, then kept as a regression guard.
     </p>
     <p class="lobby-sub">
-      Set up, then work a real ticket. Paste this into your agent:
+      Set up once, then work a real ticket.
     </p>
 
-    <div class="cmd cmd-hero" id="prompt"><pre><code>Task: set me up with the MetaMask skills + recipe workflow, then use it on real
-work. Follow these steps in order. When a command fails, its message names the
-exact next command — run that instead of improvising.
+    <section class="qs">
 
-PART 1 — SET UP
+      <div class="qs-step">
+        <h2 class="qs-title"><span class="qs-num" aria-hidden="true">1</span>Set up</h2>
+        <p class="qs-why">
+          One time per machine. Paste this into your agent inside a MetaMask checkout.
+        </p>
+
+        <div class="cmd cmd-hero" id="prompt"><pre><code>Task: set me up for recipe-backed work on MetaMask. Follow these steps in order.
+When a command fails, its message names the exact next command — run that
+instead of improvising.
 
 1. Install the harness: `npm i -g @deeeed/metamask-harness@latest`, then
    `mm-harness --version` to confirm it resolved.
@@ -74,35 +80,89 @@ PART 1 — SET UP
    metamask-extension, metamask-mobile, and core. Use `--maturity experimental`
    when listing: the default only prints stable skills, so the recipe skills
    below do not appear without it.
-8. Add the skill that drives recipe-backed work:
-     `yarn skills --include agentic/recipe-cook --save`
-   It installs as `mms-recipe-cook`. It comes from the `Consensys/skills` clone
-   in step 7 and is marked experimental, which is why the explicit `--include`
+8. Add the skills that drive recipe-backed work:
+     `yarn skills --include agentic/recipe-cook,agentic/recipe-quality,agentic/recipe-pr-qa-review --save`
+   They install as `mms-recipe-cook`, `mms-recipe-quality`, and
+   `mms-recipe-pr-qa-review`. They come from the `Consensys/skills` clone in
+   step 7 and are marked experimental, which is why the explicit `--include`
    is required. If `yarn metamask-skills describe agentic/recipe-cook` cannot
    find it, check `CONSENSYS_SKILLS_DIR` points at that clone, then stop and
    tell me. Do not substitute a different skill.
+9. Run `mm-harness actions`. That list is the ONLY set of capabilities you may
+   use, now and in every later session — never invent an action or a flag. Then
+   stop and tell me setup is done.
+
+Not optional, from here on: evidence comes only from executed actions — never
+fabricate a result or edit state to manufacture one. If the harness reports a
+capability as unsupported, stop and tell me rather than working around it. If a
+step fails twice after following its error's instructions, stop and show me the
+exact error.</code></pre></div>
+      </div>
+
+      <div class="qs-step">
+        <h2 class="qs-title"><span class="qs-num" aria-hidden="true">2</span>Do real work</h2>
+        <p class="qs-why">
+          Pick what you are doing. Each one runs the skill that owns that flow, and leaves a
+          rerunnable recipe behind as the proof.
+        </p>
+
+        <div class="tabs">
+          <div class="tablist" role="tablist" aria-label="Choose what to do">
+            <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>
+          </div>
+
+          <div class="qs-panel" role="tabpanel" id="panel-review" aria-labelledby="tab-review" tabindex="0">
+            <p class="qs-panel-why">
+              <code>mms-recipe-pr-qa-review</code> — read-only. It freezes the acceptance criteria
+              before it touches the runtime, validates each one on a real build, and returns a report.
+              It never edits product code and never posts to GitHub. The PR must be in the same
+              product as your checkout.
+            </p>
+            <div class="cmd"><pre><code>/mms-recipe-pr-qa-review https://github.com/MetaMask/metamask-mobile/pull/&lt;number&gt;
+
+Extract the acceptance criteria from the PR yourself and freeze them before any
+runtime work. Validate each one against the running build, then give me the
+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>
+            <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
+              branch. No product edits until the bug is proven to reproduce.
+            </p>
+            <div class="cmd"><pre><code>/mms-recipe-cook
+
+Fix this in the checkout I started you in — treat it as fix-bug:
+&lt;paste the ticket, or the broken behaviour and how to reproduce it&gt;
+
+Reproduce it on the real build first and keep that failing run as the baseline.
+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>
+            <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
+              ask it to package the PR.
+            </p>
+            <div class="cmd"><pre><code>/mms-recipe-cook
+
+Build this in the checkout I started you in — treat it as dev:
+&lt;paste the ticket, or the change you want&gt;
+
+Plan the proof before you edit anything, implement it, then prove it with a
+recipe that drives the real build. Show me the recipe status, the per-node
+results, and the artifact paths.</code></pre></div>
+          </div>
+        </div>
+      </div>
 
-PART 2 — DO REAL WORK
-
-9. Discover before acting: run `mm-harness actions`. That list is the ONLY set
-   of capabilities you may use, now and in every later session. Never invent an
-   action or a flag. If you need something not listed, stop and tell me.
-10. Ask me for a ticket or a bug to work on. Then run `/mms-recipe-cook` and
-   follow it. It classifies the task as dev, fix-bug, or review-pr, lists the
-   compatible checklist templates, and stops for my choice — do not choose for
-   me, and do not create a second task if one is already materialized.
-11. Work the checklist it gives you. The recipe it runs is the proof: it drives
-   the real build, asserts, and writes the evidence. Show me the status from
-   summary.json, the per-node results from trace.json, and the artifact paths.
-12. Re-run that recipe without starting a new session and confirm it still
-   passes. Checking your own work in the context you did it in is the point;
-   replay it after every change you make from here on.
-
-Not optional: evidence comes only from executed actions — never fabricate a
-result or edit state to manufacture one. If the harness reports a capability as
-unsupported, stop and tell me rather than working around it. If a step fails
-twice after following its error's instructions, stop and show me the exact
-error.</code></pre></div>
+    </section>
 
     <div class="lobby-cta">
       <a class="btn btn-primary" href="how-it-works.html">How it works →</a>