@svelte-vitals/vite 0.15.0 → 0.16.0

package/README.md

@@ -2,9 +2,12 @@
 
 [![npm](https://img.shields.io/npm/v/@svelte-vitals/vite)](https://www.npmjs.com/package/@svelte-vitals/vite)
 
-Vite/SvelteKit plugin for [svelte-vitals](https://github.com/oekazuma/svelte-vitals). It piggybacks on `vite build`, parses the **prerendered HTML's `<head>`**, and runs the same SEO rules as the CLI — library-agnostic, because it inspects the real output. Fails the build when findings reach `failOn`.
+Vite/SvelteKit plugin for [svelte-vitals](https://github.com/oekazuma/svelte-vitals). Two things in one package:
 
-> **ESM-only** (Node 18+). Ships ES modules only; `require()` is unsupported by design.
+- **Build-time gate** — piggybacks on `vite build`, parses the **prerendered HTML's `<head>`**, and runs the same rule engine as the CLI (SEO, Performance, Correctness, Security, Architecture) — library-agnostic, because it inspects the real output. Fails the build when findings reach `failOn`.
+- **Live dev dashboard** — on by default during `vite dev`: a searchable, filterable code-health dashboard at `/__svelte-vitals/`, covering the whole project from startup via static analysis, refined to real rendered values as you browse.
+
+> **ESM-only** (Node 22.13+). Ships ES modules only; `require()` is unsupported by design.
 
 ## Usage
 
@@ -18,15 +21,22 @@ export default {
 };
 ```
 
+`vite dev` prints the dashboard's URL next to its own `Local:`/`Network:` lines. Add the `svelteVitalsHandle` hook (from `@svelte-vitals/vite/hooks`) to `src/hooks.server.ts` for per-route `measured` accuracy as you browse — the dashboard works without it too, from whole-project static analysis alone.
+
 ## Options
 
 - `failOn` — minimum severity that fails the build (default `critical`).
 - `report` — `'console' | 'json' | false` (default `console`).
 - `outFile` — write the JSON report to a path.
 - `rules` / `metaComponents` / `treatDynamicAs` — same as the CLI/core config.
+- `weights` — per-category weight overrides for the combined Health score.
 - `prerenderDir` — override the prerendered-pages directory.
+- `cwd` — project root (defaults to the Vite config root).
+- `ui` — serve the live dev dashboard (default `true`); pass `false` to keep only the build-time gate.
+
+Only **prerendered** routes are analyzed at build time; for SSR/dynamic routes use the `svelte-vitals` CLI, or browse them in the live dashboard during `vite dev`.
 
-Only **prerendered** routes are analyzed; for SSR/dynamic routes use the `svelte-vitals` CLI.
+See [Live dashboard](https://oekazuma.github.io/svelte-vitals/guides/dev-dashboard/) and [Plugin mode](https://oekazuma.github.io/svelte-vitals/guides/plugin-mode/) for the full picture.
 
 ## License
 

package/dist/index.js

@@ -294,6 +294,16 @@ body{background:var(--ground);color:var(--ink);font-family:var(--sans);line-heig
 .tok-pn{color:#8da0bd}
 .dv-f-link{display:inline-block;margin-top:12px;font-size:13px;font-weight:600;color:var(--accent);text-decoration:none}
 .dv-f-link:hover{text-decoration:underline}
+.dv-ai-prompt{margin-top:12px;border:1px solid var(--line);border-radius:8px;overflow:hidden}
+.dv-ai-prompt>summary{cursor:pointer;list-style:none;padding:8px 12px;font-size:12px;font-weight:600;color:var(--muted);display:flex;align-items:center;gap:6px;user-select:none}
+.dv-ai-prompt>summary::-webkit-details-marker{display:none}
+.dv-ai-prompt>summary::before{content:"\u25B8";display:inline-block;transition:transform .15s ease}
+.dv-ai-prompt[open]>summary::before{transform:rotate(90deg)}
+.dv-ai-prompt-body{padding:0 12px 12px;display:flex;flex-direction:column;gap:8px}
+.dv-ai-prompt-pre{margin:0;padding:10px 12px;background:var(--code-bg);color:var(--code-ink);border-radius:8px;font-family:var(--mono);font-size:12px;line-height:1.6;white-space:pre-wrap;word-break:break-word;max-height:280px;overflow-y:auto}
+.dv-ai-copy-btn{align-self:flex-start;font:inherit;font-size:12px;font-weight:600;cursor:pointer;background:var(--panel);border:1px solid var(--line-strong);color:var(--ink);padding:5px 12px;border-radius:999px}
+.dv-ai-copy-btn:hover{border-color:var(--faint)}
+.dv-ai-copy-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
 .dv-empty{color:var(--muted);font-size:13px}
 @media (max-width:640px){.dv-app{grid-template-columns:1fr;grid-template-areas:"top" "main"}.dv-menu-toggle{display:inline-flex}.dv-sidebar{position:fixed;inset:0 20% 0 0;transform:translateX(-100%);transition:transform .2s ease;z-index:10}.dv-sidebar.open{transform:translateX(0)}}
 @media (prefers-reduced-motion:reduce){*{transition:none!important}}
@@ -406,6 +416,76 @@ var DASHBOARD_SCRIPT = `
     return pre;
   }
 
+  // Plain-text, copy-pasteable prompt for a single finding \u2014 same ingredients as the
+  // agent reporter's per-finding block (rule id, location, recommendation, fix, docs),
+  // reshaped for a standalone request rather than a whole-project remediation doc.
+  function buildAiPrompt(issue, route) {
+    var lines = ['Fix this svelte-vitals finding:', ''];
+    lines.push('- Rule: ' + issue.id + ' \u2014 ' + issue.title + ' (' + issue.severity + ')');
+    if (route) lines.push('- Route: ' + route);
+    if (issue.location) {
+      lines.push('- Location: ' + issue.location + (issue.line !== undefined ? ':' + issue.line : ''));
+    }
+    if (issue.recommendation) lines.push('- Recommendation: ' + issue.recommendation);
+    if (issue.fix) {
+      lines.push('- Fix: ' + issue.fix.description);
+      if (issue.fix.snippet) {
+        lines.push('', '\`\`\`' + (issue.fix.lang || 'svelte'), issue.fix.snippet, '\`\`\`');
+      }
+    }
+    if (issue.docsUrl) lines.push('- Docs: ' + issue.docsUrl);
+    lines.push(
+      '',
+      'After fixing, re-run \`svelte-vitals --diff\` (or revisit this route) to confirm ' +
+        issue.id +
+        ' passes' +
+        (route ? ' for ' + route : '') +
+        '.'
+    );
+    return lines.join('\\n');
+  }
+
+  function copyToClipboard(text, btn) {
+    var original = 'Copy';
+    function reset(label) {
+      btn.textContent = label;
+      setTimeout(function () { btn.textContent = original; }, 1500);
+    }
+    function done() { reset('Copied!'); }
+    function fail() { reset('Copy failed'); }
+    function fallbackCopy() {
+      var ta = document.createElement('textarea');
+      ta.value = text;
+      ta.setAttribute('readonly', '');
+      ta.style.position = 'fixed';
+      ta.style.opacity = '0';
+      document.body.appendChild(ta);
+      ta.select();
+      var ok = false;
+      try { ok = document.execCommand('copy'); } catch (e) {}
+      document.body.removeChild(ta);
+      return ok;
+    }
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+      navigator.clipboard.writeText(text).then(done, function () { fallbackCopy() ? done() : fail(); });
+    } else {
+      fallbackCopy() ? done() : fail();
+    }
+  }
+
+  function renderAiPrompt(issue, route) {
+    var text = buildAiPrompt(issue, route);
+    var btn = h('button', { type: 'button', class: 'dv-ai-copy-btn', text: 'Copy' }, []);
+    btn.addEventListener('click', function () { copyToClipboard(text, btn); });
+    return h('details', { class: 'dv-ai-prompt' }, [
+      h('summary', { text: 'AI Prompt' }, []),
+      h('div', { class: 'dv-ai-prompt-body' }, [
+        h('pre', { class: 'dv-ai-prompt-pre', text: text }, []),
+        btn
+      ])
+    ]);
+  }
+
   var state = {
     snapshot: null,
     selected: 'overview',
@@ -593,7 +673,7 @@ var DASHBOARD_SCRIPT = `
 
   var SEVERITY_ORDER = { critical: 0, warning: 1, info: 2 };
 
-  function renderFinding(issue, route) {
+  function renderFinding(issue, route, promptRoute) {
     var kids = [
       h('div', { class: 'dv-f-head' }, [
         h('span', { class: 'dv-ruleid', text: issue.id }, []),
@@ -616,6 +696,7 @@ var DASHBOARD_SCRIPT = `
     if (issue.docsUrl) {
       kids.push(h('a', { class: 'dv-f-link', href: issue.docsUrl, text: 'Learn more' }, []));
     }
+    kids.push(renderAiPrompt(issue, promptRoute !== undefined ? promptRoute : route));
     return h('article', { class: 'dv-finding dv-finding-' + issue.severity }, kids);
   }
 
@@ -690,7 +771,7 @@ var DASHBOARD_SCRIPT = `
     var chips = renderFilterChips(state.snapshot.report.categories);
     var findings = route.issues.filter(passesFilter);
     var body = findings.length
-      ? findings.map(function (issue) { return renderFinding(issue); })
+      ? findings.map(function (issue) { return renderFinding(issue, undefined, route.route); })
       : [h('p', { class: 'dv-empty', text: 'No issues match the current filter.' }, [])];
     return h('div', { class: 'dv-route-detail' }, [header, chips].concat(body));
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svelte-vitals/vite",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "description": "Vite/SvelteKit plugin for svelte-vitals — analyzes prerendered HTML during vite build.",
   "type": "module",
   "license": "MIT",
@@ -42,8 +42,8 @@
     "esm-env": "^1.2.2",
     "node-html-parser": "^9.0.0",
     "tinyglobby": "^0.2.17",
-    "@svelte-vitals/core": "0.24.0",
-    "svelte-vitals": "0.25.0"
+    "svelte-vitals": "0.27.0",
+    "@svelte-vitals/core": "0.24.0"
   },
   "peerDependencies": {
     "@sveltejs/kit": "^2.69.2",