plexus-peers 0.2.0

package/lib/run-analysis.js

@@ -0,0 +1,181 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const { execSync } = require('child_process');
+
+const { color } = require('./ansi');
+const { formatBytes } = require('./format');
+const { createFsContext, buildGraph } = require('./graph');
+const { resolveConflicts } = require('./fix');
+const { getBundleSize, createRegistryContext, registryFetchConcurrency } = require('./npm');
+const { renderHtml } = require('./render-html');
+const { printGraph, printSummary } = require('./terminal');
+
+function openHtmlReport(outPath) {
+  const opts = { stdio: 'ignore' };
+  try {
+    if (process.platform === 'darwin') execSync(`open "${outPath}"`, opts);
+    else if (process.platform === 'win32') execSync(`cmd /c start "" "${outPath}"`, opts);
+    else execSync(`xdg-open "${outPath}"`, opts);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * @param {object} opts
+ * @param {string} opts.rootDir - directory containing package.json + node_modules
+ * @param {object} opts.flags
+ */
+async function runFilesystemAnalysis(opts) {
+  const rootDir = path.resolve(opts.rootDir);
+  const {
+    conflictsOnly = false,
+    html: htmlMode = false,
+    fix: fixMode = false,
+    bundleSize: bundleSizeMode = false,
+    focusPkg = null,
+    outFile,
+  } = opts.flags ?? {};
+
+  const rootPkg = JSON.parse(fs.readFileSync(path.join(rootDir, 'package.json'), 'utf8'));
+  const directDeps = {
+    ...(rootPkg.dependencies ?? {}),
+    ...(rootPkg.devDependencies ?? {}),
+  };
+
+  if (focusPkg && !directDeps[focusPkg]) {
+    console.log(color(`Package "${focusPkg}" not found in dependencies.`, 'red'));
+    process.exitCode = 1;
+    return;
+  }
+
+  const ctx = createFsContext(rootDir);
+  const graph = buildGraph(directDeps, ctx);
+
+  const resolutions = fixMode
+    ? resolveConflicts(graph, directDeps, ctx.getInstalledVersion).resolutions
+    : {};
+
+  if (fixMode && !htmlMode) {
+    if (Object.keys(resolutions).length === 0) {
+      console.log(color('\n✓ No conflicts to resolve.', 'green'));
+    } else {
+      console.log(color('\n── Resolution Plan ──────────────────────────────────', 'bold'));
+      for (const [pkg, r] of Object.entries(resolutions)) {
+        console.log(
+          `\n  ${color(pkg, 'cyan')} ${color(r.current, 'gray')} → ${color(`^${r.latest}`, 'green')}`,
+        );
+        if (r.fixes.length)
+          console.log(`    fixes:    ${r.fixes.map(f => color(f, 'green')).join(', ')}`);
+        if (r.stillConflicts.length)
+          console.log(`    still ✗:  ${r.stillConflicts.map(f => color(f, 'red')).join(', ')}`);
+        if (r.cascades.length) {
+          console.log(color(`    cascades (${r.cascades.length}):`, 'yellow'));
+          for (const c of r.cascades)
+            console.log(
+              `      ⚠ ${color(c.peerName, 'cyan')} needs ${color(c.peerRange, 'gray')}, have v${c.installedVer}`,
+            );
+        }
+      }
+      console.log(color('\n── Suggested package.json changes ───────────────────', 'bold'));
+      for (const [pkg, r] of Object.entries(resolutions)) {
+        console.log(
+          `  "${color(pkg, 'cyan')}": "${color(r.current, 'gray')}" → "${color(`^${r.latest}`, 'green')}"`,
+        );
+      }
+    }
+    return;
+  }
+
+  if (htmlMode) {
+    let bundleSizes = {};
+    if (bundleSizeMode) {
+      const directKeys = Object.keys(directDeps);
+      console.log(color(`\nQuerying bundlephobia for ${directKeys.length} packages…`, 'gray'));
+      for (const pkg of directKeys) {
+        const ver = ctx.getInstalledVersion(pkg);
+        if (!ver) continue;
+        process.stdout.write(`  ${color(pkg, 'cyan')} … `);
+        const result = await getBundleSize(pkg, ver);
+        if (result) {
+          bundleSizes[pkg] = result;
+          console.log(`${formatBytes(result.size)} (gzip: ${formatBytes(result.gzip)})`);
+        } else {
+          console.log(color('n/a', 'gray'));
+        }
+      }
+    }
+
+    const html = renderHtml(graph, directDeps, rootPkg, resolutions, bundleSizes, {
+      source: 'filesystem',
+    });
+    const outPath = outFile ? path.resolve(outFile) : path.join(rootDir, 'dep-graph.html');
+    fs.writeFileSync(outPath, html, 'utf8');
+    console.log(color(`✓ Report written to ${outPath}`, 'green'));
+    if (!openHtmlReport(outPath)) {
+      console.log(color('  Open the HTML file in your browser to view it.', 'gray'));
+    }
+    return;
+  }
+
+  console.log(
+    color('★ Plexus', 'bold', 'cyan') + color(' — peer dependency analysis', 'gray'),
+  );
+  console.log(
+    color(`  Project: ${rootPkg.name ?? '(unnamed)'} v${rootPkg.version ?? '?'}`, 'gray'),
+  );
+  if (focusPkg) console.log(color(`  Focused on: ${focusPkg}`, 'yellow'));
+  if (conflictsOnly) console.log(color('  Showing conflicts only', 'yellow'));
+
+  const conflicts = printGraph(graph, directDeps, { conflictsOnly, focusPkg });
+  printSummary(conflicts, directDeps, graph);
+}
+
+async function runRegistryAnalysis(rootPkg, flags = {}) {
+  const directDeps = {
+    ...(rootPkg.dependencies ?? {}),
+    ...(rootPkg.devDependencies ?? {}),
+  };
+  const maxDirect = Math.max(1, Number(process.env.PLEXUS_MAX_DIRECT_DEPS || 250) || 250);
+  const directCount = Object.keys(directDeps).length;
+  if (directCount > maxDirect) {
+    const err = new Error(`Too many direct dependencies (${directCount}; max ${maxDirect}).`);
+    err.statusCode = 400;
+    throw err;
+  }
+  const ctx = await createRegistryContext(directDeps);
+  const graph = buildGraph(directDeps, ctx);
+  const fixMode = flags.fix === true;
+  const resolutions = fixMode
+    ? resolveConflicts(graph, directDeps, ctx.getInstalledVersion, { silent: true }).resolutions
+    : {};
+  let bundleSizes = {};
+  if (flags.bundleSize) {
+    const names = Object.keys(directDeps);
+    const limit = registryFetchConcurrency();
+    for (let i = 0; i < names.length; i += limit) {
+      const batch = names.slice(i, i + limit);
+      await Promise.all(
+        batch.map(async pkg => {
+          const ver = ctx.getInstalledVersion(pkg);
+          if (!ver) return;
+          const result = await getBundleSize(pkg, ver);
+          if (result) bundleSizes[pkg] = result;
+        }),
+      );
+    }
+  }
+  const html = renderHtml(graph, directDeps, rootPkg, resolutions, bundleSizes, {
+    source: 'registry',
+  });
+  return { graph, directDeps, resolutions, bundleSizes, html };
+}
+
+module.exports = {
+  openHtmlReport,
+  runFilesystemAnalysis,
+  runRegistryAnalysis,
+};

package/lib/server.js

@@ -0,0 +1,77 @@
+'use strict';
+
+const path = require('path');
+const express = require('express');
+const { runRegistryAnalysis } = require('./engine');
+
+/** Comma-separated origins, e.g. https://you.github.io — required for GH Pages → Render API. */
+function allowedOrigins() {
+  const raw = process.env.PLEXUS_ALLOWED_ORIGINS;
+  if (!raw) return [];
+  return raw.split(',').map(s => s.trim()).filter(Boolean);
+}
+
+function corsForPages(req, res, next) {
+  const list = allowedOrigins();
+  if (list.length === 0) return next();
+  const origin = req.headers.origin;
+  if (origin && list.includes(origin)) {
+    res.setHeader('Access-Control-Allow-Origin', origin);
+    res.setHeader('Vary', 'Origin');
+  }
+  res.setHeader('Access-Control-Allow-Methods', 'POST, OPTIONS');
+  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
+  if (req.method === 'OPTIONS') {
+    return res.sendStatus(204);
+  }
+  next();
+}
+
+function createApp() {
+  const app = express();
+  app.use(corsForPages);
+  app.use(express.json({ limit: '3mb' }));
+
+  const publicDir = path.join(__dirname, '..', 'public');
+  app.use(express.static(publicDir));
+
+  app.post('/api/analyze', async (req, res) => {
+    try {
+      const body = req.body;
+      const raw = body.packageJson ?? body;
+      if (!raw || typeof raw !== 'object' || Array.isArray(raw)) {
+        return res.status(400).type('json').send({ error: 'Send JSON: { "packageJson": { ... } } or raw package.json fields' });
+      }
+      const pkg = { ...raw };
+      delete pkg.private;
+      delete pkg.main;
+      const flags = {
+        fix: body.fix === true,
+        bundleSize: body.bundleSize === true,
+      };
+      const result = await runRegistryAnalysis(pkg, flags);
+      res.type('html').send(result.html);
+    } catch (e) {
+      console.error(e);
+      const status =
+        typeof e.statusCode === 'number' && e.statusCode >= 400 && e.statusCode < 600
+          ? e.statusCode
+          : 500;
+      res.status(status).type('json').send({ error: String(e.message || e) });
+    }
+  });
+
+  return app;
+}
+
+function startServer(opts = {}) {
+  const port = Number(process.env.PORT || opts.port || 3847) || 3847;
+  const host = process.env.HOST || '0.0.0.0';
+  const app = createApp();
+  app.listen(port, host, () => {
+    const openHost = host === '0.0.0.0' ? '127.0.0.1' : host;
+    console.log(`Plexus web: http://${openHost}:${port}`);
+  });
+}
+
+module.exports = { createApp, startServer };

package/lib/terminal.js

@@ -0,0 +1,91 @@
+'use strict';
+
+const { color } = require('./ansi');
+
+function printGraph(graph, directDeps, options = {}) {
+  const { conflictsOnly = false, focusPkg = null } = options;
+  const allConflicts = [];
+
+  const entries = focusPkg
+    ? Object.entries(graph).filter(
+        ([name]) => name === focusPkg || graph[focusPkg]?.peerDeps?.some(p => p.name === name),
+      )
+    : Object.entries(graph);
+
+  const directSet = new Set(Object.keys(directDeps));
+
+  for (const [pkgName, info] of entries.sort(([a], [b]) => a.localeCompare(b))) {
+    if (conflictsOnly && info.peerDeps.every(p => p.ok)) continue;
+
+    const isDirect = directSet.has(pkgName);
+    const versionStr = info.missing
+      ? color('NOT INSTALLED', 'red', 'bold')
+      : color(`v${info.version}`, 'gray');
+
+    const tag = isDirect ? color(' [direct]', 'blue') : '';
+    console.log(`\n${color(pkgName, 'bold', 'cyan')}${tag} ${versionStr}`);
+
+    if (info.requiredBy.length > 0) {
+      console.log(
+        `  ${color('←', 'gray')} required as peer by: ${info.requiredBy.map(r => color(r, 'magenta')).join(', ')}`,
+      );
+    }
+
+    if (info.peerDeps.length === 0) {
+      if (!conflictsOnly) console.log(`  ${color('no peer dependencies', 'gray')}`);
+      continue;
+    }
+
+    console.log(`  ${color('peer dependencies:', 'bold')}`);
+    for (const { name, range, installed, ok } of info.peerDeps) {
+      const status = ok
+        ? color('✓', 'green')
+        : installed
+          ? color('✗', 'red', 'bold')
+          : color('?', 'yellow');
+
+      const installedStr = installed
+        ? ok
+          ? color(`(installed: v${installed})`, 'gray')
+          : color(`(installed: v${installed} — MISMATCH)`, 'red')
+        : color('(not installed)', 'yellow');
+
+      console.log(`    ${status} ${color(name, 'cyan')} ${color(range, 'gray')} ${installedStr}`);
+
+      if (!ok) {
+        allConflicts.push({ pkg: pkgName, peer: name, required: range, installed });
+      }
+    }
+  }
+
+  return allConflicts;
+}
+
+function printSummary(conflicts, directDeps, graph) {
+  console.log(`\n${'─'.repeat(60)}`);
+  console.log(color('SUMMARY', 'bold'));
+  console.log('─'.repeat(60));
+
+  const total = Object.keys(graph).length;
+  const directCount = Object.keys(directDeps).length;
+  console.log(
+    `  Direct deps: ${color(directCount, 'cyan')}  |  Total in graph: ${color(total, 'cyan')}`,
+  );
+
+  if (conflicts.length === 0) {
+    console.log(color('\n  ✓ No peer dependency conflicts detected!', 'green', 'bold'));
+  } else {
+    console.log(
+      color(`\n  ✗ ${conflicts.length} peer dependency conflict(s) found:`, 'red', 'bold'),
+    );
+    for (const { pkg, peer, required, installed } of conflicts) {
+      const installedStr = installed ? `v${installed}` : 'not installed';
+      console.log(
+        `    • ${color(pkg, 'cyan')} requires ${color(peer, 'cyan')} ${color(required, 'gray')} — got ${color(installedStr, 'red')}`,
+      );
+    }
+    console.log(color('\n  Run `npm outdated` or `yarn upgrade-interactive` to update.', 'yellow'));
+  }
+}
+
+module.exports = { printGraph, printSummary };

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "plexus-peers",
+  "version": "0.2.0",
+  "description": "Plexus — CLI and mini web UI for peer dependency analysis and BundlePhobia-style size hints",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/arnaudmanaranche/plexus.git"
+  },
+  "bin": {
+    "plexus-peers": "bin/plexus.js"
+  },
+  "main": "lib/engine.js",
+  "files": [
+    "bin",
+    "lib",
+    "public"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "start": "node bin/plexus.js serve",
+    "plexus": "node bin/plexus.js",
+    "plexus-peers": "node bin/plexus.js"
+  },
+  "dependencies": {
+    "express": "^4.21.2",
+    "semver": "^7.7.1"
+  }
+}

package/public/index.html

@@ -0,0 +1,217 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <!-- Optional: override API host (e.g. custom GitHub Pages domain). Empty = rules in script below. -->
+  <meta name="plexus-api-base" content="">
+  <title>Plexus — package.json analysis</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script>
+    tailwind.config = {
+      theme: {
+        extend: {
+          colors: {
+            plexus: {
+              void: '#050505',
+              base: '#0a0a0a',
+              raised: '#111111',
+              subtle: '#171717',
+              code: '#1c1c1c',
+            },
+          },
+        },
+      },
+    };
+  </script>
+</head>
+<body class="relative box-border min-h-screen overflow-x-hidden bg-plexus-base text-zinc-300 font-sans antialiased">
+  <!-- Ambient background (low contrast, non-interactive) -->
+  <div class="pointer-events-none fixed inset-0 z-0 overflow-hidden" aria-hidden="true">
+    <div class="absolute left-1/2 top-0 h-[min(78vh,600px)] w-[min(92vw,820px)] -translate-x-1/2 -translate-y-1/3 rounded-full bg-gradient-to-b from-white/[0.055] via-zinc-500/[0.04] to-transparent blur-3xl"></div>
+    <div class="absolute -left-36 top-[28%] h-[min(28rem,50vw)] w-[min(28rem,50vw)] rounded-full bg-white/[0.028] blur-3xl sm:-left-24"></div>
+    <div class="absolute -right-28 bottom-[18%] h-[min(22rem,45vw)] w-[min(22rem,45vw)] rounded-full bg-zinc-400/[0.04] blur-3xl sm:-right-20"></div>
+    <div class="absolute inset-0 opacity-[0.4] [background-image:radial-gradient(rgba(255,255,255,0.042)_1px,transparent_1px)] [background-size:40px_40px]"></div>
+    <div class="absolute inset-0 bg-gradient-to-b from-plexus-void/25 via-transparent to-plexus-void/75"></div>
+  </div>
+
+  <main class="relative z-10 min-h-screen flex flex-col items-center justify-center px-5 sm:px-8 py-16 sm:py-20 md:py-28">
+    <div class="w-full max-w-4xl mx-auto text-center">
+      <!-- Version: keep in sync with package.json -->
+      <div class="relative z-[1] flex flex-wrap items-center justify-center gap-3 sm:gap-4 mb-3 md:mb-4">
+        <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-semibold tracking-tight text-white [text-shadow:0_1px_2px_rgba(0,0,0,0.85),0_0_40px_rgba(10,10,10,0.9)]">
+          Plexus
+        </h1>
+        <span class="inline-flex items-center rounded-lg border border-zinc-700/80 bg-plexus-code px-2.5 py-1 text-xs sm:text-sm font-mono font-medium text-zinc-400 tabular-nums shrink-0" translate="no">v0.2.0</span>
+      </div>
+      <p class="text-sm text-zinc-500 mb-5 md:mb-6">
+        <a href="https://github.com/arnaudmanaranche/plexus" target="_blank" rel="noopener noreferrer" class="text-zinc-400 hover:text-white underline-offset-4 hover:underline transition-colors">GitHub</a>
+      </p>
+      <p class="text-lg sm:text-xl md:text-2xl text-zinc-500 font-light leading-relaxed max-w-3xl mx-auto mb-14 md:mb-16">
+        Upload a
+        <code class="text-base sm:text-lg md:text-xl font-mono text-zinc-400 bg-plexus-code px-2 py-0.5 rounded-md">package.json</code>
+        — peer dependency report from the npm registry, no local
+        <code class="text-base sm:text-lg md:text-xl font-mono text-zinc-400 bg-plexus-code px-2 py-0.5 rounded-md">node_modules</code>.
+      </p>
+
+      <div class="relative z-[1] w-full max-w-2xl mx-auto rounded-2xl border border-zinc-800/90 bg-plexus-raised/92 backdrop-blur-md p-8 sm:p-10 md:p-12 text-left shadow-[0_24px_80px_rgba(0,0,0,0.45),0_0_0_1px_rgba(255,255,255,0.04)]">
+        <label class="block border-2 border-dashed border-zinc-800 rounded-xl py-14 sm:py-16 px-6 text-center cursor-pointer text-zinc-500 text-lg sm:text-xl transition-colors duration-200 hover:border-zinc-600 hover:text-zinc-300 hover:bg-plexus-subtle/50">
+          <input type="file" id="file" class="hidden" accept=".json,application/json">
+          <span id="fileLabel">Choose a package.json file</span>
+        </label>
+
+        <div class="mt-8 flex flex-col gap-4">
+          <label class="flex items-start gap-3 cursor-pointer text-zinc-500 text-base sm:text-lg select-none leading-snug">
+            <input type="checkbox" id="optFix" class="mt-1 size-4 shrink-0 rounded border-zinc-700 bg-plexus-subtle text-zinc-200 focus:ring-2 focus:ring-zinc-600 focus:ring-offset-0 focus:ring-offset-plexus-base accent-zinc-300">
+            <span>Include <code class="text-sm font-mono text-zinc-400 bg-plexus-code px-1.5 py-0.5 rounded">--fix</code> resolution plan (extra npm requests)</span>
+          </label>
+          <label class="flex items-start gap-3 cursor-pointer text-zinc-500 text-base sm:text-lg select-none leading-snug">
+            <input type="checkbox" id="optBundle" class="mt-1 size-4 shrink-0 rounded border-zinc-700 bg-plexus-subtle text-zinc-200 focus:ring-2 focus:ring-zinc-600 focus:ring-offset-0 focus:ring-offset-plexus-base accent-zinc-300">
+            <span>BundlePhobia sizes (slower)</span>
+          </label>
+        </div>
+
+        <button type="button" id="run" disabled
+          class="mt-10 w-full py-4 sm:py-5 rounded-xl bg-zinc-200 text-zinc-950 text-lg sm:text-xl font-semibold tracking-tight cursor-pointer transition-colors hover:bg-white disabled:opacity-40 disabled:hover:bg-zinc-200 disabled:cursor-not-allowed">
+          Generate report
+        </button>
+
+        <p class="mt-8 text-center text-sm sm:text-base text-zinc-600 leading-relaxed">
+          CLI:
+          <code class="font-mono text-zinc-500 bg-plexus-code px-2 py-0.5 rounded-md">npx plexus-peers --html</code>
+          from your project root for disk sizes and transitive peers via
+          <code class="font-mono text-zinc-500 bg-plexus-code px-2 py-0.5 rounded-md">node_modules</code>.
+        </p>
+      </div>
+    </div>
+  </main>
+
+  <div id="plexus-toast" class="fixed top-6 right-4 z-50 max-w-md w-[calc(100vw_-_2rem)] opacity-0 -translate-y-2 pointer-events-none transition-all duration-300 ease-out" role="alert" aria-live="assertive" aria-atomic="true">
+    <div class="pointer-events-auto flex w-full items-stretch gap-1 rounded-xl border border-red-900/80 bg-red-950/95 text-red-100 shadow-[0_8px_30px_rgba(0,0,0,0.45)] backdrop-blur-sm">
+      <p id="plexus-toast-msg" class="flex-1 px-4 py-3 text-left text-sm sm:text-base leading-snug"></p>
+      <button type="button" id="plexus-toast-close" class="shrink-0 rounded-r-xl px-3 text-lg leading-none text-red-300/90 transition-colors hover:bg-red-900/60 hover:text-white" aria-label="Dismiss error">×</button>
+    </div>
+  </div>
+
+  <script>
+    (function () {
+      var fileInput = document.getElementById('file');
+      var fileLabel = document.getElementById('fileLabel');
+      var runBtn = document.getElementById('run');
+      var toastEl = document.getElementById('plexus-toast');
+      var toastMsg = document.getElementById('plexus-toast-msg');
+      var toastClose = document.getElementById('plexus-toast-close');
+      var toastTimer = null;
+      var optFix = document.getElementById('optFix');
+      var optBundle = document.getElementById('optBundle');
+      var parsed = null;
+
+      function analyzeUrl() {
+        var meta = document.querySelector('meta[name="plexus-api-base"]');
+        if (meta && meta.content && meta.content.trim()) {
+          return meta.content.trim().replace(/\/$/, '') + '/api/analyze';
+        }
+        if (/\.github\.io$/i.test(location.hostname)) {
+          return 'https://plexus-4xdk.onrender.com/api/analyze';
+        }
+        return '/api/analyze';
+      }
+
+      function showToast(msg) {
+        toastMsg.textContent = msg;
+        toastEl.classList.remove('opacity-0', '-translate-y-2');
+        if (toastTimer) clearTimeout(toastTimer);
+        toastTimer = setTimeout(hideToast, 8000);
+      }
+      function hideToast() {
+        toastEl.classList.add('opacity-0', '-translate-y-2');
+        if (toastTimer) {
+          clearTimeout(toastTimer);
+          toastTimer = null;
+        }
+      }
+      toastClose.addEventListener('click', hideToast);
+
+      fileInput.addEventListener('change', function () {
+        hideToast();
+        parsed = null;
+        runBtn.disabled = true;
+        var f = fileInput.files && fileInput.files[0];
+        if (!f) {
+          fileLabel.textContent = 'Choose a package.json file';
+          return;
+        }
+        fileLabel.textContent = f.name;
+        var reader = new FileReader();
+        reader.onload = function () {
+          try {
+            parsed = JSON.parse(reader.result);
+            if (typeof parsed !== 'object' || parsed === null || Array.isArray(parsed)) {
+              throw new Error('JSON must be a package.json object.');
+            }
+            runBtn.disabled = false;
+          } catch (e) {
+            showToast(e.message || 'Invalid JSON.');
+          }
+        };
+        reader.readAsText(f, 'UTF-8');
+      });
+
+      runBtn.addEventListener('click', function () {
+        if (!parsed) return;
+        hideToast();
+        runBtn.disabled = true;
+        runBtn.textContent = 'Analyzing…';
+        var pkgForApi = Object.assign({}, parsed);
+        delete pkgForApi.private;
+        delete pkgForApi.main;
+        fetch(analyzeUrl(), {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            packageJson: pkgForApi,
+            fix: optFix.checked,
+            bundleSize: optBundle.checked,
+          }),
+        })
+          .then(function (res) {
+            if (!res.ok) {
+              var ct = res.headers.get('content-type') || '';
+              if (ct.indexOf('application/json') !== -1) {
+                return res.json().then(function (j) {
+                  throw new Error(j.error || res.statusText);
+                });
+              }
+              return res.text().then(function (t) {
+                throw new Error(t.slice(0, 200) || res.statusText);
+              });
+            }
+            return res.text();
+          })
+          .then(function (html) {
+            var w = window.open('', '_blank');
+            if (w) {
+              w.document.write(html);
+              w.document.close();
+            } else {
+              var blob = new Blob([html], { type: 'text/html' });
+              var url = URL.createObjectURL(blob);
+              window.location.href = url;
+            }
+          })
+          .catch(function (e) {
+            var m = e.message || String(e);
+            if (m === 'Failed to fetch' || m.indexOf('NetworkError') !== -1) {
+              m = 'Could not reach the analysis server. Check your connection and try again.';
+            }
+            showToast(m);
+          })
+          .finally(function () {
+            runBtn.disabled = false;
+            runBtn.textContent = 'Generate report';
+          });
+      });
+    })();
+  </script>
+</body>
+</html>