@progen-labs/spectra 0.4.0 → 0.5.0

package/server/test-signin.js

@@ -0,0 +1,179 @@
+// Signing in: the option handling, the authenticator codes, and every kind of
+// login, end to end in Chrome against fixtures/login-demo (skipped without Chrome).
+import assert from 'node:assert/strict';
+import fs from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+import { after, before, describe, test } from 'node:test';
+import puppeteer from 'puppeteer-core';
+import { normalizeSignIn, resolveSignIn, signInFromOptions, totp, validateSignInConfig, waitForManualSignIn } from './signin.js';
+import { DEMO, startLoginDemo } from '../fixtures/login-demo/server.mjs';
+
+// a throwaway Chrome profile, set before the recorder reads it: never the real one
+const profile = fs.mkdtempSync(path.join(os.tmpdir(), 'spectra-signin-'));
+process.env.PERF_CHROME_PROFILE_DIR = profile;
+const { PerfSession } = await import('./recorder.js');
+const { findChrome } = await import('./chrome.js');
+
+test('totp makes the RFC 6238 codes', () => {
+  // RFC 6238 appendix B, SHA-1: the secret is "12345678901234567890"
+  const secret = 'GEZDGNBVGY3TQOJQGEZDGNBVGY3TQOJQ';
+  assert.equal(totp(secret, 59_000, { digits: 8 }), '94287082');
+  assert.equal(totp(secret, 1_111_111_109_000, { digits: 8 }), '07081804');
+  assert.equal(totp(secret, 2_000_000_000_000, { digits: 8 }), '69279037');
+  assert.match(totp('jbsw y3dp ehpk 3pxp'), /^\d{6}$/); // spaces and lower case are fine
+});
+
+test('normalizeSignIn guesses the method and drops what cannot work', () => {
+  assert.deepEqual(normalizeSignIn('http://x/login?r={url}'), { method: 'link', url: 'http://x/login?r={url}' });
+  assert.equal(normalizeSignIn(''), null);
+  assert.equal(normalizeSignIn({}), null);
+  assert.equal(normalizeSignIn({ username: 'a', password: 'b' }).method, 'form');
+  assert.equal(normalizeSignIn({ cookies: 'a=1' }).method, 'token');
+  assert.equal(normalizeSignIn({ url: 'http://x/sso' }).method, 'link');
+  assert.equal(normalizeSignIn({ method: 'manual' }).method, 'manual');
+  assert.equal(normalizeSignIn({ method: 'form' }), null); // nothing to type
+  assert.equal(normalizeSignIn({ method: 'http', password: 'b' }), null); // a prompt needs a username
+  assert.equal(normalizeSignIn({ method: 'token' }), null);
+  assert.equal(normalizeSignIn({ method: 'nope', username: 'a' }).method, 'form');
+  // a password is used as given; other values are trimmed
+  assert.equal(normalizeSignIn({ username: ' a ', password: ' b ' }).password, ' b ');
+  assert.equal(normalizeSignIn({ username: ' a ', password: ' b ' }).username, 'a');
+  assert.equal(normalizeSignIn({ method: 'manual', waitMs: 1000 }).waitMs, 1000);
+});
+
+test('resolveSignIn takes flags, then the config file, then the environment; secrets only from the environment', () => {
+  const env = {
+    SPECTRA_LOGIN_PASSWORD: 'pw',
+    SPECTRA_LOGIN_TOTP_SECRET: 'JBSW Y3DP',
+    SPECTRA_LOGIN_USER: 'env-user',
+  };
+  const s = resolveSignIn({ loginUser: 'flag-user' }, { url: 'http://x/login', username: 'config-user' }, env);
+  assert.equal(s.method, 'form');
+  assert.equal(s.username, 'flag-user');
+  assert.equal(s.password, 'pw');
+  assert.equal(s.totpSecret, 'JBSWY3DP');
+  assert.equal(s.url, 'http://x/login');
+  assert.equal(resolveSignIn({}, { username: 'config-user' }, env).username, 'config-user');
+  assert.equal(resolveSignIn({}, {}, env).username, 'env-user');
+  // a header from the environment, scoped by the recorder
+  const t = resolveSignIn({}, {}, { SPECTRA_LOGIN_HEADER: 'Authorization: Bearer abc:def' });
+  assert.equal(t.method, 'token');
+  assert.equal(t.headerName, 'Authorization');
+  assert.equal(t.headerValue, 'Bearer abc:def');
+  // nothing given: no sign-in
+  assert.equal(resolveSignIn({}, {}, {}), null);
+  // the old --sign-in template still works
+  assert.equal(resolveSignIn({ signIn: 'http://x/login/?r={url}' }, {}, {}).method, 'link');
+  // the CLI's option names
+  const opts = { login: 'http', 'login-user': 'u', 'login-wait': '30' };
+  const fromCli = signInFromOptions(name => opts[name], {}, { SPECTRA_LOGIN_PASSWORD: 'pw' });
+  assert.equal(fromCli.method, 'http');
+  assert.equal(fromCli.username, 'u');
+  assert.equal(fromCli.waitMs, 30_000);
+});
+
+test('validateSignInConfig keeps secrets out of spectra.config.json', () => {
+  assert.equal(validateSignInConfig(undefined), null);
+  assert.deepEqual(validateSignInConfig({ method: 'form', url: 'http://x/login', username: 'me' }), {
+    method: 'form',
+    url: 'http://x/login',
+    username: 'me',
+  });
+  assert.throws(() => validateSignInConfig({ password: 'x' }), /SPECTRA_LOGIN_PASSWORD/);
+  assert.throws(() => validateSignInConfig({ totpSecret: 'x' }), /SPECTRA_LOGIN_TOTP_SECRET/);
+  assert.throws(() => validateSignInConfig({ cookies: 'a=1' }), /SPECTRA_LOGIN_COOKIES/);
+  assert.throws(() => validateSignInConfig({ headerValue: 'x' }), /SPECTRA_LOGIN_HEADER/);
+  assert.throws(() => validateSignInConfig({ method: 'sso' }), /must be one of/);
+  assert.throws(() => validateSignInConfig({ user: 'x' }), /unknown keys: user/);
+  assert.throws(() => validateSignInConfig('http://x'), /must be an object/);
+  assert.throws(() => validateSignInConfig({ waitSeconds: -1 }), /positive/);
+});
+
+const chrome = findChrome();
+describe('signing in, in Chrome', { skip: !chrome && 'Chrome was not found (set CHROME_PATH)', concurrency: false }, () => {
+  let demo;
+  const creds = { username: DEMO.username, password: DEMO.password };
+
+  before(async () => {
+    demo = await startLoginDemo();
+  });
+  after(async () => {
+    await demo?.close();
+    fs.rmSync(profile, { recursive: true, force: true });
+  });
+
+  // a fresh Chrome per test, signed out: what one test stored is cleared after it
+  async function signIn(pagePath, how) {
+    const session = new PerfSession();
+    try {
+      await session.connect({ mode: 'launch', url: `${demo.url}${pagePath}`, headless: true, signIn: how });
+      const welcome = await session.page.$eval('#welcome', el => el.textContent).catch(() => null);
+      return { welcome, url: session.page.url(), status: await session.status() };
+    } finally {
+      await session.client?.send('Storage.clearDataForOrigin', { origin: demo.url, storageTypes: 'all' }).catch(() => {});
+      await session.client?.send('Network.clearBrowserCookies').catch(() => {});
+      await session.disconnect();
+    }
+  }
+  const signedIn = r => {
+    assert.equal(r.welcome, 'Welcome, signed in', `still not signed in, on ${r.url}`);
+  };
+
+  test('a classic login form, found where the app redirects to', async () => {
+    const r = await signIn('/app', creds);
+    signedIn(r);
+    assert.deepEqual(r.status.signIn, { method: 'form', signedIn: true });
+    assert.equal(JSON.stringify(r.status).includes(DEMO.password), false, 'the status never carries the password');
+  });
+  test('two steps: the username, Next, then the password', async () => signedIn(await signIn('/app', { ...creds, url: `${demo.url}/two-step` })));
+  test('a single-page app whose form renders late', async () => signedIn(await signIn('/app', { ...creds, url: `${demo.url}/spa` })));
+  test('a login form inside an iframe', async () => signedIn(await signIn('/app', { ...creds, url: `${demo.url}/iframe` })));
+  test("a login form inside a web component's shadow DOM", async () => signedIn(await signIn('/app', { ...creds, url: `${demo.url}/shadow` })));
+  test('a login behind a "Sign in" button that opens a modal', async () => signedIn(await signIn('/app', { ...creds, url: `${demo.url}/modal` })));
+  test('a password, then an authenticator code', async () =>
+    signedIn(await signIn('/app', { ...creds, totpSecret: DEMO.totpSecret, url: `${demo.url}/otp` })));
+  test('a password, then six one-digit code boxes', async () =>
+    signedIn(await signIn('/app', { ...creds, totpSecret: DEMO.totpSecret, url: `${demo.url}/otp-boxes` })));
+  test('an authenticator code without the secret says what is missing', async () =>
+    assert.rejects(signIn('/app', { ...creds, url: `${demo.url}/otp` }), /one-time code.*TOTP/));
+  test('the browser login prompt (HTTP Basic)', async () => signedIn(await signIn('/basic', { method: 'http', ...creds })));
+  test('a token header, sent to the app', async () =>
+    signedIn(await signIn('/header-app', { method: 'token', headerName: 'X-Demo-Token', headerValue: DEMO.token })));
+  test('a cookie', async () => signedIn(await signIn('/cookie-app', { method: 'token', cookies: `demo_token=${DEMO.token}` })));
+  test('a localStorage entry, there before the app loads', async () =>
+    signedIn(await signIn('/storage-app', { method: 'token', storage: `demo_token=${DEMO.token}` })));
+  test('a sign-in link', async () => signedIn(await signIn('/app', `${demo.url}/magic?next={url}`)));
+  test('a wrong password fails fast, and the error never contains it', async () => {
+    const started = Date.now();
+    await assert.rejects(signIn('/app', { username: DEMO.username, password: 'not-the-password' }), err => {
+      assert.match(err.message, /did not accept/);
+      assert.equal(err.message.includes('not-the-password'), false);
+      return true;
+    });
+    assert.ok(Date.now() - started < 20_000, 'no need to wait for the timeout');
+  });
+  test('a CAPTCHA is refused before anything is sent', async () =>
+    assert.rejects(signIn('/app', { ...creds, url: `${demo.url}/captcha` }), /CAPTCHA.*Sign in myself/));
+  test('signing in yourself needs a visible window', async () =>
+    assert.rejects(signIn('/app', { method: 'manual' }), /visible Chrome window/));
+
+  test('waiting for a person to sign in', async () => {
+    const browser = await puppeteer.launch({ executablePath: chrome, headless: true, userDataDir: fs.mkdtempSync(path.join(profile, 'm-')) });
+    try {
+      const page = await browser.newPage();
+      await page.goto(`${demo.url}/login?next=/app`);
+      const waiting = waitForManualSignIn(page, { timeoutMs: 20_000 });
+      // the "person": types the details in a moment
+      setTimeout(async () => {
+        await page.type('input[type=email]', DEMO.username);
+        await page.type('input[type=password]', DEMO.password);
+        await page.click('button[type=submit]');
+      }, 1500);
+      await waiting;
+      assert.equal(await page.$eval('#welcome', el => el.textContent), 'Welcome, signed in');
+    } finally {
+      await browser.close();
+    }
+  });
+});

package/shared/compare.js

@@ -301,7 +301,7 @@ export const METRICS = [
   },
   {
     id: 'renders',
-    group: 'React',
+    group: 'Components',
     label: 'Component renders',
     unit: 'count',
     get: r => reactSum(r, 'renders'),
@@ -310,7 +310,7 @@ export const METRICS = [
   },
   {
     id: 'wasted',
-    group: 'React',
+    group: 'Components',
     label: 'Wasted renders',
     unit: 'count',
     get: r => reactSum(r, 'wasted'),
@@ -320,8 +320,8 @@ export const METRICS = [
   },
   {
     id: 'renderMs',
-    group: 'React',
-    label: 'React render time',
+    group: 'Components',
+    label: 'Component render time',
     unit: 'ms',
     get: r => reactOnly(r, x => x.commits.totalMs),
     minAbs: 25,
@@ -329,8 +329,8 @@ export const METRICS = [
   },
   {
     id: 'maxCommit',
-    group: 'React',
-    label: 'Slowest React commit',
+    group: 'Components',
+    label: 'Slowest component update',
     unit: 'ms',
     get: r => reactOnly(r, x => x.commits.maxMs),
     minAbs: 10,
@@ -509,7 +509,7 @@ const SUBS = {
     },
     {
       id: 'reactMs',
-      label: 'React render time',
+      label: 'Component render time',
       unit: 'ms',
       minAbs: 5,
       minRel: 0.2,
@@ -785,8 +785,8 @@ function comparability(before, after) {
     add(
       'warn',
       'react',
-      'React timings missing in some runs',
-      `${noReact.length} run(s) had no React data (production build, or the probe loaded after React). React metrics are skipped or partial.`,
+      'Component timings missing in some runs',
+      `${noReact.length} run(s) had no component data (a production build, or the probe loaded after the framework). Component metrics are skipped or partial.`,
     );
 
   const attributions = unique(all.map(r => r.meta.attribution));

package/shared/snapshot.js

@@ -11,7 +11,7 @@ export function validateReport(obj) {
     return {
       ok: false,
       reason:
-        'This is a raw Chrome trace (.trace.json). Comparison needs the profiler report: use “Snapshot for comparison” on the report instead — the trace lacks the React and source-file data.',
+        'This is a raw Chrome trace (.trace.json). Comparison needs the profiler report: use “Snapshot for comparison” on the report instead — the trace lacks the component and source-file data.',
     };
   }
   const ok =

package/src/App.jsx

@@ -101,7 +101,7 @@ function Welcome({ onCompare }) {
       <div>
         <h2>Find what makes the frontend slow</h2>
         <p className="welcome-lead">
-          Ranked culprits, heat trees, React re-renders, long tasks and network
+          Ranked culprits, heat trees, component re-renders, long tasks and network
           findings from a single recording.
         </p>
       </div>

package/src/components/CompareResults.jsx

@@ -399,7 +399,7 @@ function Findings({ findings }) {
 }
 
 const DETAIL_TABS = [
-  ['components', 'React components'],
+  ['components', 'Components'],
   ['files', 'Files'],
   ['functions', 'Functions'],
   ['findings', 'Problems'],

package/src/components/ControlBar.jsx

@@ -1,11 +1,11 @@
+import { frameworkName } from '../framework.js';
 import { useEffect, useState } from 'react';
 import { api } from '../api.js';
 import { ChevronIcon, PageLoadIcon, RecordIcon, StopIcon } from './Icons.jsx';
 import Popover from './Popover.jsx';
+import SignInPanel, { methodTitle, missing, toSignIn, useSignIn } from './SignIn.jsx';
 
 const URL_KEY = 'perf-profiler:url';
-const SIGNIN_KEY = 'perf-profiler:sign-in';
-const readSignIn = () => localStorage.getItem(SIGNIN_KEY) || '';
 
 function Elapsed({ startedAt }) {
   const [now, setNow] = useState(Date.now());
@@ -21,31 +21,26 @@ function Elapsed({ startedAt }) {
 
 function ProbePill({ probe }) {
   if (!probe) return null;
-  if (probe.react) {
+  // the probe names the framework it hooked: 'react', 'vue', 'angular', …
+  const name = frameworkName(probe.framework || (probe.react ? 'react' : ''));
+  if (probe.react || probe.detected) {
     return (
       <span
         className="pill ok"
-        title="React was detected; per-component render data will be recorded."
+        title={`${name || 'A component framework'} was detected; per-component render data will be recorded.`}
       >
-        ✓ React {probe.version}
-        {probe.timings ? '' : ' · no timings (production build)'}
-      </span>
-    );
-  }
-  // If a non-React framework was detected, show that instead of the reload hint
-  if (probe.framework && probe.framework.name) {
-    return (
-      <span className="pill ok" title={`Detected ${probe.framework.name}`}>
-        ✓ {probe.framework.name} {probe.framework.version || ''}
+        ✓ {name || 'Components'} {probe.version}
+        {probe.react && !probe.timings ? ' · no timings (production build)' : ''}
       </span>
     );
   }
+  // not a problem: any app is profiled down to its files and functions
   return (
     <span
-      className="pill warn"
-      title="The probe must load before React. Use Reload, or “Record page load”."
+      className="pill"
+      title="Files and functions are profiled for any app. If this one uses React, Vue or Angular, the probe must load before the framework does: use Reload, or “Record page load”."
     >
-      ! No React seen — reload
+      No component framework seen
     </span>
   );
 }
@@ -57,13 +52,15 @@ function Connect({ status, run, isCompact }) {
   const [headless, setHeadless] = useState(false);
   const [browserURL, setBrowserURL] = useState('http://127.0.0.1:9222');
   const [busy, setBusy] = useState(false);
-  const [signIn, setSignIn] = useState(readSignIn);
+  const [signIn, updateSignIn] = useSignIn();
   const [isAdvancedOpen, setIsAdvancedOpen] = useState(false);
+  const gap = missing(signIn);
+  // signing in yourself needs the window
+  const manual = signIn.enabled && signIn.method === 'manual';
   const go = async options => {
     if (options.url) localStorage.setItem(URL_KEY, options.url);
-    localStorage.setItem(SIGNIN_KEY, signIn);
     setBusy(true);
-    await run(() => api.connect(options));
+    await run(() => api.connect({ ...options, signIn: toSignIn(signIn) }));
     setBusy(false);
   };
   return (
@@ -72,8 +69,8 @@ function Connect({ status, run, isCompact }) {
         <div className="connect-head">
           <h2>Connect to a browser</h2>
           <p className="muted">
-            Launch a fresh Chrome window, sign in, and open the page you want to
-            profile.
+            Spectra opens a fresh Chrome window on the page you want to profile,
+            signing in first when your app needs it.
           </p>
         </div>
       )}
@@ -90,10 +87,11 @@ function Connect({ status, run, isCompact }) {
         <button
           type="button"
           className="primary"
-          disabled={busy}
-          onClick={() => go({ mode: 'launch', url, headless, signIn })}
+          disabled={busy || Boolean(gap)}
+          title={gap || undefined}
+          onClick={() => go({ mode: 'launch', url, headless: headless && !manual })}
         >
-          {busy ? 'Starting Chrome…' : 'Launch Chrome'}
+          {busy ? (signIn.enabled ? 'Opening and signing in…' : 'Starting Chrome…') : 'Launch Chrome'}
         </button>
         <button
           type="button"
@@ -104,35 +102,23 @@ function Connect({ status, run, isCompact }) {
           Advanced <ChevronIcon isUp={isAdvancedOpen} />
         </button>
       </div>
+      <SignInPanel value={signIn} update={updateSignIn} />
       {isAdvancedOpen && (
         <div className="advanced">
           <div className="advanced-section">
-            <div className="advanced-row">
-              <label
-                className="field"
-                title="Used automatically when the page fails to load or lands on a login screen. {url} is replaced with the page above. Do not put tokens in it."
-              >
-                Sign-in URL <span className="muted">(optional)</span>
-                <input
-                  value={signIn}
-                  onChange={e => setSignIn(e.target.value)}
-                  placeholder="http://localhost:3000/login/?redirect={url}"
-                />
-              </label>
-              <label className="switch">
-                <input
-                  type="checkbox"
-                  role="switch"
-                  checked={headless}
-                  onChange={e => setHeadless(e.target.checked)}
-                />
-                Headless
-              </label>
-            </div>
-            <span className="muted">
-              The Chrome window starts signed out every time, so give it your
-              app’s login URL once; {'{url}'} is where the page to profile goes.
-            </span>
+            <label
+              className="switch"
+              title={manual ? 'Signing in yourself needs the Chrome window.' : undefined}
+            >
+              <input
+                type="checkbox"
+                role="switch"
+                checked={headless && !manual}
+                disabled={manual}
+                onChange={e => setHeadless(e.target.checked)}
+              />
+              Headless <span className="muted">(no Chrome window)</span>
+            </label>
           </div>
           <div className="advanced-section">
             <div className="advanced-row">
@@ -145,14 +131,15 @@ function Connect({ status, run, isCompact }) {
               </label>
               <button
                 type="button"
-                disabled={busy}
+                disabled={busy || Boolean(gap)}
                 onClick={() => go({ mode: 'attach', browserURL })}
               >
                 Attach
               </button>
             </div>
             <span className="muted">
-              Start it with <code>--remote-debugging-port=9222</code>
+              Start it with <code>--remote-debugging-port=9222</code>. A Chrome
+              you already use is usually signed in already.
             </span>
           </div>
         </div>
@@ -161,6 +148,27 @@ function Connect({ status, run, isCompact }) {
   );
 }
 
+function SignInProgress({ method, signingIn }) {
+  return (
+    <div className="rec-strip">
+      <span className="rec">
+        <i className="spin" />{' '}
+        {!signingIn
+          ? 'Opening the page…'
+          : method === 'manual'
+            ? 'Waiting for you to sign in'
+            : `Signing in (${methodTitle(method).toLowerCase()})…`}
+      </span>
+      {signingIn && method === 'manual' && (
+        <span className="muted">
+          Sign in in the Chrome window, any way your app asks: codes, passkeys,
+          CAPTCHAs. Spectra carries on by itself once you are in.
+        </span>
+      )}
+    </div>
+  );
+}
+
 function RecordingOptions({ throttle, setThrottle, saveTrace, setSaveTrace }) {
   return (
     <Popover label="Options" align="left">
@@ -274,15 +282,18 @@ export default function ControlBar({ status, run, isCompact }) {
       ? status.navigation
       : null;
   const idle = status.state === 'idle';
+  const signingIn = status.state === 'signing-in';
+  const opening = status.state === 'connecting';
   return (
     <section className="session" aria-label="Browser session">
       {failed && (
         <div className="error" role="alert">
           <span>
             The page answered <b>HTTP {failed.status}</b> ({failed.url}). You
-            are probably not signed in. Press Go to retry (the saved Sign-in URL
-            is applied automatically), or sign in by hand in the Chrome window.
-            If no Sign-in URL was saved, close Chrome and launch again with one.
+            are probably not signed in.{' '}
+            {status.signIn
+              ? 'Press Go to sign in again, or sign in by hand in the Chrome window.'
+              : 'Sign in by hand in the Chrome window, or close Chrome and launch again with “My app needs a sign-in” turned on.'}
           </span>
         </div>
       )}
@@ -306,20 +317,28 @@ export default function ControlBar({ status, run, isCompact }) {
           disabled={!idle}
           onChange={e => setAddress(e.target.value)}
           onKeyDown={e =>
-            e.key === 'Enter' && run(() => api.navigate(address, readSignIn()))
+            e.key === 'Enter' && run(() => api.navigate(address))
           }
         />
         <button
           type="button"
           disabled={!idle}
-          onClick={() => run(() => api.navigate(address, readSignIn()))}
+          onClick={() => run(() => api.navigate(address))}
         >
           Go
         </button>
         <button type="button" disabled={!idle} onClick={() => run(api.reload)}>
           Reload
         </button>
-            <ProbePill probe={status.probe} />
+        {status.signIn?.signedIn && (
+          <span
+            className="pill ok"
+            title={`Signed in with: ${methodTitle(status.signIn.method)}. Spectra signs in again if the session ends.`}
+          >
+            ✓ Signed in
+          </span>
+        )}
+        <ProbePill probe={status.probe} />
         <button
           type="button"
           className="ghost destructive"
@@ -329,7 +348,11 @@ export default function ControlBar({ status, run, isCompact }) {
         </button>
       </div>
       <div className="session-row">
-        <RecordRow status={status} run={run} />
+        {signingIn || opening ? (
+          <SignInProgress method={status.signIn?.method} signingIn={signingIn} />
+        ) : (
+          <RecordRow status={status} run={run} />
+        )}
       </div>
     </section>
   );

package/src/components/EvaluationPanel.jsx

@@ -150,7 +150,7 @@ export default function EvaluationPanel({ evaluations, onOpenReport }) {
           </div>
           <p className="muted eval-foot">
             Automation: {passed}/{detail.paths.length} golden paths passed. Open any
-            row for its full report — culprits, React re-renders, long tasks, PDF
+            row for its full report — culprits, component re-renders, long tasks, PDF
             export and commit compare.
           </p>
         </>

package/src/components/FilePanel.jsx

@@ -101,7 +101,7 @@ export default function FilePanel({ report, path, onClose }) {
             value={fmtMs(file.blockMs)}
             warn={file.blockMs > 0}
           />
-          <Metric label="React renders" value={fmtNumber(file.renders)} />
+          <Metric label="Component renders" value={fmtNumber(file.renders)} />
           <Metric
             label="Wasted"
             value={fmtNumber(file.wasted)}
@@ -184,7 +184,7 @@ export default function FilePanel({ report, path, onClose }) {
         {tab === 'components' &&
           ((file?.components.length || 0) === 0 ? (
             <p className="muted pad">
-              No React components from this file rendered.
+              No components from this file rendered.
             </p>
           ) : (
             <table className="data">