@progen-labs/spectra 0.4.1 → 0.5.0

package/src/components/PageMap.jsx

@@ -1,3 +1,4 @@
+import { reportFramework } from '../framework.js';
 import { useMemo, useState } from 'react';
 import { fmtMs, fmtNumber } from '../format.js';
 
@@ -34,7 +35,7 @@ function buildPins(report, hideVendor) {
   return pool
     .sort((a, b) => b.c.selfMs + b.c.wastedMs - (a.c.selfMs + a.c.wastedMs))
     .slice(0, MAX_PINS)
-    .map((p, i) => ({ ...p, key: `${p.c.id}`, n: i + 1 }));
+    .map((p, i) => ({ ...p, fw: report.react?.framework || 'react', key: `${p.c.id}`, n: i + 1 }));
 }
 
 function severityOf(c, maxSelf) {
@@ -48,6 +49,14 @@ function topReason(c) {
   return n ? `${n}× ${REASON_LABELS[key]}` : null;
 }
 
+// what to do about renders that changed nothing, in the framework's own terms
+function wastedFix(fw) {
+  if (fw === 'vue') return <>pass stable props (no new objects or functions inline), or use <code>v-memo</code> for parts that rarely change.</>;
+  if (fw === 'angular') return <>use <code>ChangeDetectionStrategy.OnPush</code> and pass new references only when data changes.</>;
+  if (fw === 'react' || fw === 'next') return <>wrap in <code>React.memo</code> or stop the parent re-rendering.</>;
+  return <>stop the parent re-rendering it when nothing changed.</>;
+}
+
 function Details({ pin }) {
   const { c } = pin;
   const reason = topReason(c);
@@ -88,8 +97,7 @@ function Details({ pin }) {
       )}
       {!unstable && c.wasted > 0 && (
         <p className="pin-fix">
-          Fix: {fmtNumber(c.wasted)} renders changed nothing — wrap in{' '}
-          <code>React.memo</code> or stop the parent re-rendering.
+          Fix: {fmtNumber(c.wasted)} renders changed nothing — {wastedFix(pin.fw)}
         </p>
       )}
       {pin.count > 1 && (
@@ -237,8 +245,9 @@ function Callouts({ pins, pageView, active, onActivate, onOpenFile, maxSelf }) {
 
 /**
  * Screenshot of the page at the moment recording stopped, with the slowest
- * React components outlined where they sit on screen. Hover or focus a pin for
- * the file, render counts and a fix; click it to open the source.
+ * components (React, Vue or Angular) outlined where they sit on screen. Hover
+ * or focus a pin for the file, render counts and a fix; click it to open the
+ * source. Pages without component data still show the screenshot.
  */
 export default function PageMap({ report, hideVendor, onOpenFile }) {
   const { pageView } = report;
@@ -265,30 +274,23 @@ export default function PageMap({ report, hideVendor, onOpenFile }) {
       <div className="empty">
         <b>No page map for this report</b>
         <span>
-          It needs a development build of a React app and a recording made with
-          this version of the profiler. Older reports and production builds have
-          none.
-        </span>
-      </div>
-    );
-  if (!pins.length)
-    return (
-      <div className="empty">
-        <b>No slow components are visible on screen</b>
-        <span>
-          Nothing that rendered during the recording is currently on screen (or
-          everything is hidden by “Hide node_modules”).
+          Recordings from Spectra 0.5 on include a screenshot of every page.
+          This one was made with an earlier version, or the screenshot failed.
         </span>
       </div>
     );
 
+  const fw = reportFramework(report);
   return (
-    <div className="page-map">
+    <div className={`page-map${pins.length ? '' : ' no-pins'}`}>
       <div className="page-stage">
         <p className="muted page-caption">
-          Screenshot taken when the recording stopped. Numbers in the margins
-          point to the components that spent the most time rendering and are on
-          screen now; hover a number for details.
+          Screenshot taken when the recording stopped.{' '}
+          {pins.length
+            ? 'Numbers in the margins point to the components that spent the most time rendering and are on screen now; hover a number for details.'
+            : fw
+              ? `None of the ${fw} components that did measurable work are on screen now${hideVendor ? ', or they are hidden by “Hide node_modules”' : ''}.`
+              : 'No React, Vue or Angular components were seen, so there is nothing to pin; the Culprits and File tree tabs show where the time went.'}
         </p>
         <Callouts
           pins={pins}
@@ -299,6 +301,7 @@ export default function PageMap({ report, hideVendor, onOpenFile }) {
           onOpenFile={onOpenFile}
         />
       </div>
+      {pins.length > 0 && (
       <aside className="page-list" aria-label="Components on this page">
         <h2>Hot spots on this page</h2>
         <ol>
@@ -324,6 +327,7 @@ export default function PageMap({ report, hideVendor, onOpenFile }) {
           ))}
         </ol>
       </aside>
+      )}
     </div>
   );
 }

package/src/components/ReactPanel.jsx

@@ -1,3 +1,4 @@
+import { frameworkName } from '../framework.js';
 import { useMemo, useState } from 'react';
 import { fmtMs, fmtNumber, splitPath } from '../format.js';
 
@@ -101,10 +102,7 @@ export default function ReactPanel({ report, hideVendor, onOpenFile }) {
       );
   }, [react.components, sort, hideVendor]);
 
-  const fwLabel =
-    { vue: 'Vue', svelte: 'Svelte', angular: 'Angular', next: 'React' }[
-      react.framework
-    ] || 'React';
+  const fwLabel = frameworkName(react.framework) || 'React';
   if (!react.detected) {
     return (
       <div className="empty">

package/src/components/SignIn.jsx

@@ -0,0 +1,291 @@
+// "My app needs a sign-in": how Spectra's Chrome signs in to the app before
+// profiling it. Every kind of web login has a method (server/signin.js does
+// the work). The page URL, the method, the login page, the username and the
+// selectors are remembered in this browser; passwords, codes, tokens and
+// cookies never are: they live in this tab's memory only, until it reloads.
+import { useState } from 'react';
+import { ChevronIcon } from './Icons.jsx';
+
+const KEY = 'perf-profiler:sign-in-v2';
+const OLD_KEY = 'perf-profiler:sign-in'; // a sign-in URL template, before 0.5
+
+export const SIGN_IN_METHODS = [
+  {
+    id: 'form',
+    title: 'Login form',
+    hint: 'A username and password typed into your app’s login page. One step or two, any identity provider, optional authenticator codes.',
+  },
+  {
+    id: 'manual',
+    title: 'I’ll sign in myself',
+    hint: 'Chrome opens on the login page and waits for you. For SMS or email codes, passkeys, push approvals or CAPTCHAs.',
+  },
+  {
+    id: 'http',
+    title: 'Browser prompt',
+    hint: 'The browser’s own username and password box (HTTP Basic or Digest), common on staging servers.',
+  },
+  {
+    id: 'token',
+    title: 'Token or cookie',
+    hint: 'A header, cookies or localStorage entries your app already accepts, set before it loads.',
+  },
+  {
+    id: 'link',
+    title: 'Sign-in link',
+    hint: 'A URL that signs in by itself, such as a dev-only auto-login.',
+  },
+];
+export const methodTitle = id => SIGN_IN_METHODS.find(m => m.id === id)?.title || 'Sign-in';
+
+const PLAIN = ['enabled', 'method', 'url', 'username', 'waitMinutes', 'headerName', 'startSelector', 'usernameSelector', 'passwordSelector', 'submitSelector', 'codeSelector'];
+const SECRET = ['password', 'totpSecret', 'headerValue', 'cookies', 'storage'];
+const EMPTY = { enabled: false, method: 'form', url: '', username: '', waitMinutes: 5, headerName: '', startSelector: '', usernameSelector: '', passwordSelector: '', submitSelector: '', codeSelector: '' };
+
+// secrets for this tab only: they survive closing and relaunching Chrome, not a reload
+let secrets = { password: '', totpSecret: '', headerValue: '', cookies: '', storage: '' };
+
+function load() {
+  try {
+    const saved = JSON.parse(localStorage.getItem(KEY) || 'null');
+    if (saved) return { ...EMPTY, ...saved };
+    const old = localStorage.getItem(OLD_KEY);
+    if (old) return { ...EMPTY, enabled: true, method: 'link', url: old };
+  } catch {
+    // storage blocked: start empty
+  }
+  return { ...EMPTY };
+}
+function save(value) {
+  try {
+    localStorage.setItem(KEY, JSON.stringify(Object.fromEntries(PLAIN.map(k => [k, value[k]]))));
+    localStorage.removeItem(OLD_KEY);
+  } catch {
+    // storage blocked: nothing is remembered
+  }
+}
+
+/** What is missing before this sign-in can work, or '' when it is ready. */
+export function missing(v) {
+  if (!v.enabled) return '';
+  if (v.method === 'form' && !v.username && !v.password) return 'Add the username and password.';
+  if (v.method === 'http' && !v.username) return 'Add the username and password.';
+  if (v.method === 'link' && !v.url) return 'Add the sign-in link.';
+  if (v.method === 'token' && !(v.headerValue || v.cookies || v.storage)) return 'Add a header, a cookie or a storage entry.';
+  return '';
+}
+
+/** The sign-in to send to the server: null when it is off. */
+export function toSignIn(v) {
+  if (!v.enabled) return null;
+  return {
+    method: v.method,
+    url: v.url,
+    username: v.username,
+    password: v.password,
+    totpSecret: v.totpSecret,
+    startSelector: v.startSelector,
+    usernameSelector: v.usernameSelector,
+    passwordSelector: v.passwordSelector,
+    submitSelector: v.submitSelector,
+    codeSelector: v.codeSelector,
+    headerName: v.headerName,
+    headerValue: v.headerValue,
+    cookies: v.cookies,
+    storage: v.storage,
+    waitMs: Math.max(1, Number(v.waitMinutes) || 5) * 60_000,
+  };
+}
+
+/** The sign-in form's state: [value, update(patch)]. */
+export function useSignIn() {
+  const [value, setValue] = useState(() => ({ ...load(), ...secrets }));
+  const update = patch =>
+    setValue(v => {
+      const next = { ...v, ...patch };
+      secrets = Object.fromEntries(SECRET.map(k => [k, next[k]]));
+      save(next);
+      return next;
+    });
+  return [value, update];
+}
+
+function Text({ label, hint, value, onChange, type = 'text', placeholder, secret, wide }) {
+  return (
+    <label className={`field${wide ? ' wide' : ''}`} title={hint}>
+      <span>
+        {label}
+        {secret && (
+          <span className="secret-tag" title="Kept in this tab’s memory only: never saved, logged or put in a report.">
+            not saved
+          </span>
+        )}
+      </span>
+      <input
+        type={type}
+        value={value}
+        placeholder={placeholder}
+        onChange={e => onChange(e.target.value)}
+        autoComplete={secret ? 'off' : undefined}
+        spellCheck={false}
+      />
+    </label>
+  );
+}
+
+function Selectors({ value, update }) {
+  const [open, setOpen] = useState(Boolean(value.usernameSelector || value.passwordSelector || value.submitSelector || value.startSelector || value.codeSelector || value.totpSecret));
+  const set = k => v => update({ [k]: v });
+  return (
+    <div className="signin-more">
+      <button type="button" className="ghost small" aria-expanded={open} onClick={() => setOpen(o => !o)}>
+        One-time codes and fields <ChevronIcon isUp={open} />
+      </button>
+      {open && (
+        <div className="signin-grid">
+          <Text
+            label="Authenticator secret"
+            hint="For apps that ask for a 6-digit code from an authenticator app: the base32 secret behind the QR code (Spectra makes the codes, RFC 6238). Codes sent by SMS or email need “I’ll sign in myself”."
+            value={value.totpSecret}
+            onChange={set('totpSecret')}
+            type="password"
+            placeholder="JBSWY3DPEHPK3PXP"
+            secret
+            wide
+          />
+          <p className="muted wide">
+            Spectra finds the fields by itself, in iframes and web components too. When it can’t, point at them with
+            CSS selectors:
+          </p>
+          <Text label="Button that opens the form" value={value.startSelector} onChange={set('startSelector')} placeholder="#open-login" />
+          <Text label="Username field" value={value.usernameSelector} onChange={set('usernameSelector')} placeholder="input[name=email]" />
+          <Text label="Password field" value={value.passwordSelector} onChange={set('passwordSelector')} placeholder="input[name=password]" />
+          <Text label="Submit button" value={value.submitSelector} onChange={set('submitSelector')} placeholder="button[type=submit]" />
+          <Text label="Code field" value={value.codeSelector} onChange={set('codeSelector')} placeholder="input[name=otp]" />
+        </div>
+      )}
+    </div>
+  );
+}
+
+function Fields({ value, update }) {
+  const set = k => v => update({ [k]: v });
+  const loginPage = (
+    <Text
+      label="Login page (optional)"
+      hint="Where to sign in. Leave it empty to sign in wherever the app sends a signed-out visitor. {url} in it becomes the page to return to."
+      value={value.url}
+      onChange={set('url')}
+      type="url"
+      placeholder="https://app.example.com/login"
+      wide
+    />
+  );
+  const user = <Text label="Username or email" value={value.username} onChange={set('username')} placeholder="me@example.com" />;
+  const password = <Text label="Password" value={value.password} onChange={set('password')} type="password" secret />;
+  switch (value.method) {
+    case 'form':
+      return (
+        <>
+          <div className="signin-grid">
+            {loginPage}
+            {user}
+            {password}
+          </div>
+          <Selectors value={value} update={update} />
+        </>
+      );
+    case 'manual':
+      return (
+        <div className="signin-grid">
+          {loginPage}
+          <Text label="Wait up to (minutes)" value={value.waitMinutes} onChange={set('waitMinutes')} type="number" />
+        </div>
+      );
+    case 'http':
+      return (
+        <div className="signin-grid">
+          {user}
+          {password}
+        </div>
+      );
+    case 'token':
+      return (
+        <div className="signin-grid">
+          <Text label="Header name" value={value.headerName} onChange={set('headerName')} placeholder="Authorization" />
+          <Text
+            label="Header value"
+            hint="Sent only with requests to the page’s own origin, never to third parties."
+            value={value.headerValue}
+            onChange={set('headerValue')}
+            type="password"
+            placeholder="Bearer eyJ…"
+            secret
+          />
+          <Text label="Cookies" value={value.cookies} onChange={set('cookies')} type="password" placeholder="session=abc123; theme=dark" secret />
+          <Text
+            label="localStorage entries"
+            value={value.storage}
+            onChange={set('storage')}
+            type="password"
+            placeholder="auth_token=abc123"
+            secret
+          />
+        </div>
+      );
+    default:
+      return (
+        <div className="signin-grid">
+          <Text
+            label="Sign-in link"
+            hint="Opened when the page asks for a login. {url} becomes the page to return to. Do not put tokens in it: it is remembered."
+            value={value.url}
+            onChange={set('url')}
+            placeholder="http://localhost:3000/dev-login?redirect={url}"
+            wide
+          />
+        </div>
+      );
+  }
+}
+
+export default function SignInPanel({ value, update }) {
+  const method = SIGN_IN_METHODS.find(m => m.id === value.method) || SIGN_IN_METHODS[0];
+  const gap = missing(value);
+  return (
+    <div className={`signin${value.enabled ? ' on' : ''}`}>
+      <label className="switch">
+        <input type="checkbox" role="switch" checked={value.enabled} onChange={e => update({ enabled: e.target.checked })} />
+        <span>
+          <b>My app needs a sign-in</b>
+          <span className="muted"> · Chrome starts signed out, so Spectra signs in before it profiles</span>
+        </span>
+      </label>
+      {value.enabled && (
+        <div className="signin-body">
+          <div className="signin-methods" role="radiogroup" aria-label="How the app signs in">
+            {SIGN_IN_METHODS.map(m => (
+              <button
+                key={m.id}
+                type="button"
+                role="radio"
+                aria-checked={m.id === method.id}
+                className={`signin-method${m.id === method.id ? ' selected' : ''}`}
+                onClick={() => update({ method: m.id })}
+              >
+                {m.title}
+              </button>
+            ))}
+          </div>
+          <p className="muted signin-hint">{method.hint}</p>
+          <Fields value={value} update={update} />
+          <p className="signin-note">
+            {gap ? <b>{gap} </b> : null}
+            Passwords, codes, tokens and cookies stay in this tab’s memory and in Spectra’s: never saved to disk, logged
+            or put in a report. Use a test account where you can.
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/Vitals.jsx

@@ -28,7 +28,7 @@ const RATINGS = [
   },
   {
     key: 'wasted',
-    label: 'Wasted React renders',
+    label: 'Wasted renders',
     get: r =>
       r.react.detected
           ? (r.react && r.react.components ? r.react.components.reduce((s, c) => s + c.wasted, 0) : 0)

package/src/framework.js

@@ -0,0 +1,12 @@
+// What to call the component framework a page or report uses. Spectra is not
+// tied to React: Vue and Angular get the same component-level data, and any
+// other app still gets files and functions, so labels name the framework that
+// was actually seen, or stay neutral ("components").
+export const FRAMEWORK_NAMES = { react: 'React', next: 'Next.js', vue: 'Vue', angular: 'Angular', svelte: 'Svelte' };
+
+/** A framework id ('react', 'vue', …) as a display name; '' when unknown. */
+export const frameworkName = id => FRAMEWORK_NAMES[id] || '';
+
+/** The framework a report's component data came from, as a display name ('' when none). */
+export const reportFramework = report =>
+  report?.react?.detected ? frameworkName(report.react.framework || 'react') || 'React' : '';

package/src/heat.js

@@ -15,9 +15,9 @@ export const FILE_METRICS = [
   },
   {
     id: 'reactMs',
-    label: 'React render time',
+    label: 'Component render time',
     unit: 'ms',
-    hint: 'Time React spent rendering components defined in this file (self time).',
+    hint: 'Time spent rendering components defined in this file (self time), in React, Vue or Angular.',
   },
   {
     id: 'wasted',
@@ -27,7 +27,7 @@ export const FILE_METRICS = [
   },
   {
     id: 'renders',
-    label: 'React renders',
+    label: 'Component renders',
     unit: '',
     hint: 'How many times components in this file rendered.',
   },

package/src/styles.css

@@ -550,6 +550,93 @@ label.switch {
   flex: 1;
   min-width: 16rem;
 }
+
+/* ---- sign-in ---- */
+.signin {
+  display: grid;
+  gap: 0.6rem;
+  padding: 0.6rem 0.7rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--surface-2);
+}
+.signin.on {
+  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
+}
+.signin > .switch {
+  align-items: flex-start;
+}
+.signin > .switch b {
+  color: var(--text);
+  font-weight: 600;
+}
+.signin-body {
+  display: grid;
+  gap: 0.55rem;
+}
+.signin-methods {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+}
+.signin-method {
+  min-height: 1.8rem;
+  padding: 0.2rem 0.75rem;
+  border-radius: 999px;
+  color: var(--text-2);
+}
+.signin-method.selected,
+.signin-method.selected:hover {
+  background: var(--accent-soft);
+  border-color: var(--accent);
+  color: var(--accent);
+  font-weight: 600;
+}
+.signin-hint {
+  margin: 0;
+}
+.signin-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
+  gap: 0.5rem 0.6rem;
+  align-items: end;
+}
+.signin-grid .wide {
+  grid-column: 1 / -1;
+}
+.signin-grid p {
+  margin: 0.2rem 0 0;
+}
+.signin-more {
+  display: grid;
+  gap: 0.5rem;
+  justify-items: start;
+}
+.signin-more > .signin-grid {
+  width: 100%;
+}
+button.small {
+  min-height: 1.6rem;
+  padding: 0.1rem 0.5rem;
+  font-size: 0.75rem;
+}
+.secret-tag {
+  margin-left: 0.4rem;
+  padding: 0 0.4rem;
+  border-radius: 999px;
+  border: 1px solid var(--border);
+  font-size: 0.65rem;
+  color: var(--text-muted);
+  vertical-align: 1px;
+}
+.signin-note {
+  margin: 0;
+  font-size: 0.72rem;
+  color: var(--text-muted);
+}
+.signin-note b {
+  color: var(--warn, var(--text));
+}
 .pill {
   display: inline-flex;
   align-items: center;
@@ -1699,6 +1786,10 @@ svg.change-bar rect {
   padding: 1rem 1.2rem;
   align-items: start;
 }
+/* a page without components to pin: the screenshot takes the whole width */
+.page-map.no-pins {
+  grid-template-columns: minmax(0, 1fr);
+}
 .page-caption {
   margin: 0 0 0.6rem;
 }