@progen-labs/spectra 0.0.0-stage → 0.1.0

package/src/components/CulpritsHero.jsx

@@ -0,0 +1,109 @@
+import { useMemo, useState } from 'react';
+import { SEVERITY, topCulprits } from '../culprits.js';
+import { fmtMs } from '../format.js';
+import CodeRef from './CodeRef.jsx';
+import CulpritSphere from './CulpritSphere.jsx';
+
+const MAX_CULPRITS = 12;
+
+function Insight({ item, onOpenFile, onJump }) {
+  const sev = SEVERITY[item.severity];
+  return (
+    <div className={`insight sev-${item.severity}`} aria-live="polite">
+      <div className="insight-head">
+        <span className="badge-sev">
+          <span aria-hidden="true">{sev.icon}</span> {sev.label}
+        </span>
+        <b className="insight-name">{item.name}()</b>
+        <span className="insight-ms">{fmtMs(item.ms)}</span>
+      </div>
+      <CodeRef
+        file={item.file}
+        line={item.line}
+        lineKind={item.lineKind}
+        abs={item.abs}
+        onOpenFile={onOpenFile}
+      />
+      {item.categories.length > 0 && (
+        <p className="muted">
+          Appears in {item.findings.length} finding
+          {item.findings.length === 1 ? '' : 's'} · {item.categories.join(', ')}
+        </p>
+      )}
+      {item.lead && (
+        <p className="insight-fix">
+          <b>What to do:</b> {item.lead.fix}
+        </p>
+      )}
+      {item.lead && (
+        <button type="button" onClick={() => onJump(item.lead.id)}>
+          Show the finding
+        </button>
+      )}
+    </div>
+  );
+}
+
+/** Top culprits: the sphere, a ranked list for exact reading, and one insight card. */
+export default function CulpritsHero({
+  report,
+  hideVendor,
+  onOpenFile,
+  onJump,
+}) {
+  const items = useMemo(
+    () => topCulprits(report, hideVendor, MAX_CULPRITS),
+    [report, hideVendor],
+  );
+  const [hoverKey, setHoverKey] = useState(null);
+  const [pickedKey, setPickedKey] = useState(null);
+  if (!items.length) return null;
+  const shown =
+    items.find(i => i.key === hoverKey) ||
+    items.find(i => i.key === pickedKey) ||
+    items[0];
+  const maxMs = Math.max(1, ...items.map(i => i.ms));
+  return (
+    <section className="culprits-hero" aria-label="Top culprits">
+      <div className="hero-sphere">
+        <h2>
+          Top culprits <span className="muted">· drag to rotate</span>
+        </h2>
+        <CulpritSphere
+          items={items}
+          activeKey={hoverKey}
+          highlightKey={shown.key}
+          onActivate={setHoverKey}
+          onSelect={setPickedKey}
+        />
+      </div>
+      <div className="hero-detail">
+        <Insight item={shown} onOpenFile={onOpenFile} onJump={onJump} />
+        <ol className="rank-list">
+          {items.map((item, i) => (
+            <li key={item.key}>
+              <button
+                type="button"
+                className={`rank-row sev-${item.severity} ${
+                  shown.key === item.key ? 'active' : ''
+                }`}
+                onMouseEnter={() => setHoverKey(item.key)}
+                onMouseLeave={() => setHoverKey(null)}
+                onFocus={() => setHoverKey(item.key)}
+                onBlur={() => setHoverKey(null)}
+                onClick={() => setPickedKey(item.key)}
+              >
+                <span className="rank-n">{i + 1}</span>
+                <span className="rank-name">{item.name}()</span>
+                <span className="rank-bar">
+                  <span style={{ width: `${(item.ms / maxMs) * 100}%` }} />
+                </span>
+                <span className="rank-ms">{fmtMs(item.ms)}</span>
+              </button>
+            </li>
+          ))}
+        </ol>
+      </div>
+    </section>
+  );
+}

package/src/components/EvaluationPanel.jsx

@@ -0,0 +1,160 @@
+import { useEffect, useState } from 'react';
+import { api } from '../api.js';
+import { fmtMs } from '../format.js';
+
+/**
+ * Golden-path evaluation view: lists the `spectra performance` runs, and for
+ * the selected one shows the performance matrix (baseline + each journey with
+ * its automation result and key metrics). Each row opens its full report.
+ */
+export default function EvaluationPanel({ evaluations, onOpenReport }) {
+  const [current, setCurrent] = useState(evaluations[0]?.id || '');
+  const [detail, setDetail] = useState(null);
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    if (!current) {
+      setDetail(null);
+      return;
+    }
+    let live = true;
+    setError('');
+    api
+      .evaluation(current)
+      .then(d => live && setDetail(d))
+      .catch(e => live && setError(e.message));
+    return () => {
+      live = false;
+    };
+  }, [current]);
+
+  if (!evaluations.length) {
+    return (
+      <div className="welcome">
+        <div>
+          <h2>No golden-path evaluations yet</h2>
+          <p className="welcome-lead">
+            Run <code>spectra performance</code> in your project. Spectra starts
+            your dev server, auto-discovers the actionable elements, drives a set
+            of golden-path journeys, and records each one. They’ll appear here as
+            a performance matrix — every path openable as a full report.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  const rows = detail ? [detail.baseline, ...detail.paths] : [];
+  const passed = detail ? detail.paths.filter(p => p.ok).length : 0;
+
+  return (
+    <div className="eval-panel">
+      <div className="eval-head">
+        <select
+          aria-label="Evaluation run"
+          value={current}
+          onChange={e => setCurrent(e.target.value)}
+        >
+          {evaluations.map(e => (
+            <option key={e.id} value={e.id}>
+              {new Date(e.createdAt).toLocaleString()} · {e.passed}/{e.pathCount}{' '}
+              passed
+            </option>
+          ))}
+        </select>
+        {detail && (
+          <span className="eval-summary">
+            <span className="pill">{detail.discovered} actionable elements</span>
+            <span className="pill">{detail.paths.length} golden paths</span>
+            <span className={`pill ${passed === detail.paths.length ? 'ok' : 'warn'}`}>
+              {passed}/{detail.paths.length} passed
+            </span>
+            {detail.skippedDestructive?.length > 0 && (
+              <span className="pill" title={detail.skippedDestructive.map(s => s.name).join(', ')}>
+                {detail.skippedDestructive.length} destructive skipped
+              </span>
+            )}
+          </span>
+        )}
+      </div>
+
+      {error && <div className="error" role="alert"><span>{error}</span></div>}
+
+      {detail && (
+        <>
+          <div className="eval-target" title={detail.url}>
+            {detail.target} — <span className="muted">{detail.url}</span>
+          </div>
+          <div className="eval-table-wrap">
+            <table className="eval-matrix">
+              <thead>
+                <tr>
+                  <th>#</th>
+                  <th>Golden path</th>
+                  <th>Result</th>
+                  <th className="num">TBT</th>
+                  <th className="num">LCP</th>
+                  <th className="num">Long tasks</th>
+                  <th className="num">Findings</th>
+                  <th>Top finding</th>
+                  <th />
+                </tr>
+              </thead>
+              <tbody>
+                {rows.map((r, i) => {
+                  const s = r.summary || {};
+                  const top = s.topFinding;
+                  return (
+                    <tr key={r.id || i} className={r.ok ? '' : 'row-fail'}>
+                      <td className="muted">{i === 0 ? '—' : i}</td>
+                      <td>
+                        <div className="eval-path-title">{r.title}</div>
+                        {!r.ok && r.error && (
+                          <div className="eval-path-error">{r.error}</div>
+                        )}
+                      </td>
+                      <td>
+                        <span className={`badge ${r.ok ? 'badge-pass' : 'badge-fail'}`}>
+                          {r.ok ? 'PASS' : 'FAIL'}
+                        </span>
+                      </td>
+                      <td className="num">{s.tbtMs == null ? '—' : fmtMs(s.tbtMs)}</td>
+                      <td className="num">{s.lcpMs == null ? '—' : fmtMs(s.lcpMs)}</td>
+                      <td className="num">{s.longTaskCount ?? '—'}</td>
+                      <td className="num">{s.findingCount ?? '—'}</td>
+                      <td>
+                        {top ? (
+                          <span className={`top-finding sev-${top.severity}`}>
+                            [{top.severity}] {top.title}
+                          </span>
+                        ) : (
+                          <span className="muted">—</span>
+                        )}
+                      </td>
+                      <td>
+                        {r.id && (
+                          <button
+                            type="button"
+                            className="link"
+                            onClick={() => onOpenReport(r.id)}
+                          >
+                            Open report →
+                          </button>
+                        )}
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </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
+            export and commit compare.
+          </p>
+        </>
+      )}
+    </div>
+  );
+}

package/src/components/FilePanel.jsx

@@ -0,0 +1,225 @@
+import { useEffect, useMemo, useState } from 'react';
+import { api } from '../api.js';
+import { fmtMs, fmtNumber } from '../format.js';
+import { highlightSource } from '../highlight.js';
+
+function Metric({ label, value, warn }) {
+  return (
+    <div className={`metric ${warn ? 'warn' : ''}`}>
+      <div className="metric-value">{value}</div>
+      <div className="metric-label">{label}</div>
+    </div>
+  );
+}
+
+function Source({ path, functions }) {
+  const [state, setState] = useState({ status: 'loading', file: null });
+  useEffect(() => {
+    let cancelled = false;
+    setState({ status: 'loading', file: null });
+    api
+      .source(path)
+      .then(file => !cancelled && setState({ status: 'ready', file }))
+      .catch(() => !cancelled && setState({ status: 'missing', file: null }));
+    return () => {
+      cancelled = true;
+    };
+  }, [path]);
+
+  // highlight.js escapes everything it emits and highlightSource escapes the
+  // fallback path, so the markup never contains raw file content.
+  const html = useMemo(
+    () => (state.file ? highlightSource(path, state.file.content) : ''),
+    [state.file, path],
+  );
+  const hot = useMemo(() => {
+    const map = new Map();
+    for (const fn of functions)
+      if (fn.line && fn.selfMs >= 0.5) map.set(fn.line, fn);
+    return map;
+  }, [functions]);
+
+  if (state.status === 'loading')
+    return <div className="empty">Loading source…</div>;
+  if (state.status === 'missing') {
+    return (
+      <div className="empty">
+        Source not found on disk for <code>{path}</code>. Bundled or generated
+        files have no source file.
+      </div>
+    );
+  }
+  const lineCount = state.file.content.split('\n').length;
+  return (
+    <div className="code-scroll">
+      <div className="gutter">
+        {Array.from({ length: lineCount }, (_, i) => {
+          const fn = hot.get(i + 1);
+          return (
+            <div
+              key={i + 1}
+              className={`gutter-line ${fn ? 'gutter-hot' : ''}`}
+              title={fn ? `${fn.name}: ${fmtMs(fn.selfMs)} self` : undefined}
+            >
+              {fn ? `${fmtMs(fn.selfMs)} ` : ''}
+              {i + 1}
+            </div>
+          );
+        })}
+      </div>
+      <pre className="code">
+        <code className="hljs" dangerouslySetInnerHTML={{ __html: html }} />
+      </pre>
+    </div>
+  );
+}
+
+export default function FilePanel({ report, path, onClose }) {
+  const [tab, setTab] = useState('functions');
+  const file = report.files.find(f => f.path === path);
+  const relatedFindings = report.findings.filter(f => f.file === path);
+  const maxSelf = Math.max(
+    ...(file?.functions.map(f => f.selfMs) || [0]),
+    0.001,
+  );
+  const canShowSource = !path.startsWith('bundle:') && !path.startsWith('(');
+
+  return (
+    <aside className="file-panel" aria-label="Selected file">
+      <div className="panel-head">
+        <h2 title={path}>{path}</h2>
+        <button type="button" onClick={onClose} aria-label="Close file panel">
+          ×
+        </button>
+      </div>
+      {file ? (
+        <div className="metrics">
+          <Metric label="CPU self" value={fmtMs(file.selfMs)} />
+          <Metric label="CPU inclusive" value={fmtMs(file.totalMs)} />
+          <Metric
+            label="Blocking"
+            value={fmtMs(file.blockMs)}
+            warn={file.blockMs > 0}
+          />
+          <Metric label="React renders" value={fmtNumber(file.renders)} />
+          <Metric
+            label="Wasted"
+            value={fmtNumber(file.wasted)}
+            warn={file.wasted > 0}
+          />
+          <Metric
+            label="Forced reflows"
+            value={fmtNumber(file.forcedCount)}
+            warn={file.forcedCount > 0}
+          />
+        </div>
+      ) : (
+        <p className="muted pad">
+          No profile samples were recorded for this file.
+        </p>
+      )}
+      {relatedFindings.length > 0 && (
+        <ul className="mini-findings">
+          {relatedFindings.map(f => (
+            <li key={f.id} className={`sev-${f.severity}`}>
+              {f.title}
+              <div className="muted">{f.fix}</div>
+            </li>
+          ))}
+        </ul>
+      )}
+      <div role="tablist" className="tabs">
+        {[
+          ['functions', 'Functions'],
+          ['components', 'Components'],
+          ['source', 'Source'],
+        ].map(([id, label]) => (
+          <button
+            key={id}
+            type="button"
+            role="tab"
+            aria-selected={tab === id}
+            onClick={() => setTab(id)}
+          >
+            {label}
+          </button>
+        ))}
+      </div>
+      <div className="panel-body">
+        {tab === 'functions' && (
+          <table className="data">
+            <thead>
+              <tr>
+                <th>Function</th>
+                <th>Self</th>
+                <th>Total</th>
+              </tr>
+            </thead>
+            <tbody>
+              {(file?.functions || []).map(fn => (
+                <tr key={`${fn.name}${fn.line}${fn.bundleLine}`}>
+                  <td className="mono">
+                    {fn.name}()
+                    <span className="muted">
+                      {' '}
+                      {fn.line
+                        ? `:${fn.lineKind === 'located' ? '≈' : ''}${fn.line}`
+                        : fn.bundleLine
+                          ? `(bundle line ${fn.bundleLine})`
+                          : ''}
+                    </span>
+                    <div className="bar">
+                      <span
+                        style={{ width: `${(fn.selfMs / maxSelf) * 100}%` }}
+                      />
+                    </div>
+                  </td>
+                  <td className="num">{fmtMs(fn.selfMs)}</td>
+                  <td className="num">{fmtMs(fn.totalMs)}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )}
+        {tab === 'components' &&
+          ((file?.components.length || 0) === 0 ? (
+            <p className="muted pad">
+              No React components from this file rendered.
+            </p>
+          ) : (
+            <table className="data">
+              <thead>
+                <tr>
+                  <th>Component</th>
+                  <th>Renders</th>
+                  <th>Wasted</th>
+                  <th>Self</th>
+                </tr>
+              </thead>
+              <tbody>
+                {file.components.map(c => (
+                  <tr key={`${c.name}${c.line}`}>
+                    <td className="mono">
+                      {c.name}
+                      {c.line ? <span className="muted">:{c.line}</span> : null}
+                    </td>
+                    <td className="num">{fmtNumber(c.renders)}</td>
+                    <td className={`num ${c.wasted ? 'warn' : ''}`}>
+                      {fmtNumber(c.wasted)}
+                    </td>
+                    <td className="num">{fmtMs(c.selfMs)}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          ))}
+        {tab === 'source' &&
+          (canShowSource ? (
+            <Source path={path} functions={file?.functions || []} />
+          ) : (
+            <div className="empty">This is a bundle, not a source file.</div>
+          ))}
+      </div>
+    </aside>
+  );
+}