benchforge 0.1.9 → 0.2.4

package/src/viewer/components/SummaryPanel.tsx

@@ -0,0 +1,332 @@
+import { useEffect, useMemo, useRef, useState } from "preact/hooks";
+import { useLazyPlot } from "./LazyPlot.ts";
+import type { GitVersion } from "../../report/GitUtils.ts";
+import type { DifferenceCI } from "../../stats/StatisticalUtils.ts";
+import { formatRelativeTime } from "../DateFormat.ts";
+import { formatCount, formatDecimalBytes } from "../LineData.ts";
+import type {
+  BenchmarkEntry,
+  BenchmarkGroup,
+  BootstrapCIData,
+  ReportData,
+  ViewerEntry,
+  ViewerRow,
+  ViewerSection,
+} from "../ReportData.ts";
+import { formatPct } from "../plots/PlotTypes.ts";
+import { activeTabId, provider, reportData } from "../State.ts";
+
+const skipArgs = new Set(["_", "$0", "view", "file"]);
+
+/** Main summary view: fetches report data, shows CLI args header and collapsible benchmark groups. */
+export function SummaryPanel() {
+  const dataProvider = provider.value!;
+  const data = reportData.value;
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    dataProvider.fetchReportData()
+      .then(result => (reportData.value = result as ReportData))
+      .catch(err => {
+        console.error("Report load failed:", err);
+        setError(String(err));
+      });
+  }, [dataProvider]);
+
+  if (error)
+    return <div class="empty-state"><p>Failed to load report data: {error}</p></div>;
+  if (!data)
+    return <div class="empty-state"><p>Loading report&hellip;</p></div>;
+
+  return (
+    <>
+      <ReportHeader metadata={data.metadata} />
+      {data.groups.map((group, i) => (
+        <CollapsibleGroup key={i} group={group} />
+      ))}
+    </>
+  );
+}
+
+declare const __BENCHFORGE_GIT_HASH__: string;
+declare const __BENCHFORGE_GIT_DIRTY__: boolean;
+declare const __BENCHFORGE_BUILD_DATE__: string;
+
+/** Fallback for dev/unbundled builds where compile-time globals are absent. */
+function safeGlobal<T>(v: T, fallback: T): T {
+  return typeof v !== "undefined" ? v : fallback;
+}
+
+/** Assemble "benchforge <hash> <relative-date>" from compile-time globals. */
+function benchforgeLabel(): string {
+  const hash = safeGlobal(__BENCHFORGE_GIT_HASH__, "dev");
+  const dirty = safeGlobal(__BENCHFORGE_GIT_DIRTY__, false);
+  const date = safeGlobal(__BENCHFORGE_BUILD_DATE__, "");
+  const label = `benchforge ${hash}${dirty ? "*" : ""}`;
+  return date ? `${label} ${formatRelativeTime(date)}` : label;
+}
+
+function ReportHeader({ metadata }: { metadata: ReportData["metadata"] }) {
+  const { cliArgs, cliDefaults, currentVersion, baselineVersion } = metadata;
+  const versions = [
+    currentVersion && `Current: ${formatVersion(currentVersion)}`,
+    baselineVersion && `Baseline: ${formatVersion(baselineVersion)}`,
+  ].filter(Boolean);
+
+  return (
+    <div class="report-header">
+      <div class="cli-args">{formatCliArgs(cliArgs, cliDefaults)}</div>
+      <div class="header-right">
+        <div class="metadata">{new Date().toLocaleString()}</div>
+        <div class="metadata benchforge-version">{benchforgeLabel()}</div>
+        {versions.length > 0 && (
+          <div class="version-info">{versions.join(" | ")}</div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/** Expandable benchmark group with comparison badge and section panels. */
+function CollapsibleGroup({ group }: { group: BenchmarkGroup }) {
+  const [open, setOpen] = useState(true);
+  const current = group.benchmarks?.[0];
+  if (!current) return <div class="error">No benchmark data for this group</div>;
+
+  const ci = current.comparisonCI;
+  return (
+    <div class="benchmark-group">
+      <div class="group-header" onClick={() => setOpen(o => !o)}>
+        <span class="group-toggle">{open ? "\u25be" : "\u25b8"}</span>
+        <h2>{group.name}</h2>
+        {ci && <ComparisonBadge ci={ci} />}
+        {group.warnings && (
+          <span class="batch-warnings">
+            {group.warnings.map(w => <span class="batch-warning">{w}</span>)}
+          </span>
+        )}
+      </div>
+      {open && <GroupContent current={current} />}
+    </div>
+  );
+}
+
+function GroupContent({ current }: { current: BenchmarkEntry }) {
+  const ref = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (ref.current) alignRunColumns(ref.current);
+  });
+  return (
+    <div class="panel-grid" ref={ref}>
+      {current.sections?.map((s, i) => <SectionPanel key={i} section={s} />)}
+      <HeapPanel entry={current} />
+      <CoveragePanel entry={current} />
+    </div>
+  );
+}
+
+function SectionPanel({ section }: { section: ViewerSection }) {
+  if (!section.rows.length) return null;
+  const range = useMemo(() => sectionEstimateRange(section), [section]);
+  const titleEl = section.tabLink
+    ? <a class="panel-title-link" onClick={() => (activeTabId.value = section.tabLink!)}>{section.title}</a>
+    : <span>{section.title}</span>;
+
+  return (
+    <div class="section-panel">
+      <div class="panel-header">{titleEl}</div>
+      <div class="panel-body">
+        {section.rows.map((row, i) => <StatRow key={i} row={row} estimateRange={range} />)}
+      </div>
+    </div>
+  );
+}
+
+/** Set CSS vars so run-name and run-value columns align across all sections. */
+function alignRunColumns(panel: HTMLElement): void {
+  const maxW = (sel: string) =>
+    Math.max(0, ...[...panel.querySelectorAll<HTMLElement>(sel)].map(el => el.scrollWidth));
+  const maxName = maxW(".run-name");
+  const maxValue = maxW(".run-value");
+  if (maxName) panel.style.setProperty("--run-name-width", `${maxName}px`);
+  if (maxValue) panel.style.setProperty("--run-value-width", `${maxValue}px`);
+}
+
+function StatRow({ row, estimateRange }: { row: ViewerRow; estimateRange?: [number, number] }) {
+  if (row.shared) {
+    return (
+      <div class="stat-row">
+        <div class="row-header">
+          <span class="row-label">{row.label}</span>
+        </div>
+        <div class="run-entry">
+          <span class="run-name" />
+          <span class="run-value">{row.entries[0]?.value}</span>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div class={`stat-row${row.primary ? " primary-row" : ""}`}>
+      <div class="row-header">
+        <span class="row-label">{row.label}</span>
+        {row.comparisonCI && <ComparisonBadge ci={row.comparisonCI} compact />}
+      </div>
+      {row.entries.map((entry, i) => (
+        <RunEntry key={i} entry={entry} estimateRange={estimateRange} />
+      ))}
+    </div>
+  );
+}
+
+/** Proportional horizontal offset range for aligning bootstrap CI plots. */
+const maxCIShift = 80;
+
+function RunEntry({ entry, estimateRange }: { entry: ViewerEntry; estimateRange?: [number, number] }) {
+  const ci = entry.bootstrapCI;
+  const [lo, hi] = estimateRange ?? [0, 0];
+  const shift = ci && hi > lo ? ((ci.estimate - lo) / (hi - lo)) * maxCIShift : undefined;
+  return (
+    <div class="run-entry">
+      <span class="run-name">{entry.runName}</span>
+      {ci
+        ? <BootstrapCIMount ci={ci} label={entry.value} shift={shift} />
+        : <span class="run-value">{entry.value}</span>}
+    </div>
+  );
+}
+
+function SharedStat({ label, value }: { label: string; value: string }) {
+  return (
+    <div class="stat-row shared-row">
+      <span class="row-label">{label}</span>
+      <span class="row-value">{value}</span>
+    </div>
+  );
+}
+
+function HeapPanel({ entry }: { entry: BenchmarkEntry }) {
+  const { heapSummary: heap, allocationSamples: allocSamples } = entry;
+  if (!heap && !allocSamples?.length) return null;
+
+  return (
+    <div class="section-panel">
+      <div class="panel-header">
+        <a class="panel-title-link" onClick={() => (activeTabId.value = "flamechart")}>
+          heap allocation
+        </a>
+      </div>
+      <div class="panel-body">
+        {heap && (
+          <>
+            <SharedStat label="total bytes" value={formatDecimalBytes(heap.totalBytes)} />
+            <SharedStat label="user bytes" value={formatDecimalBytes(heap.userBytes)} />
+          </>
+        )}
+        {allocSamples && allocSamples.length > 0 && (
+          <SharedStat label="alloc samples" value={allocSamples.length.toLocaleString()} />
+        )}
+      </div>
+    </div>
+  );
+}
+
+function CoveragePanel({ entry }: { entry: BenchmarkEntry }) {
+  const cov = entry.coverageSummary;
+  if (!cov) return null;
+
+  return (
+    <div class="section-panel">
+      <div class="panel-header">
+        <span>calls</span>
+      </div>
+      <div class="panel-body">
+        <SharedStat label="functions tracked" value={cov.functionCount.toLocaleString()} />
+        <SharedStat label="total calls" value={formatCount(cov.totalCalls)} />
+      </div>
+    </div>
+  );
+}
+
+const directionLabels: Record<string, string> = {
+  faster: "Faster", slower: "Slower", uncertain: "Inconclusive", equivalent: "Equivalent",
+};
+
+function ComparisonBadge({ ci, compact }: { ci: DifferenceCI; compact?: boolean }) {
+  return (
+    <span class="comparison-badge">
+      <span class={`badge badge-${ci.direction}`}>
+        {compact ? formatPct(ci.percent) : directionLabels[ci.direction]}
+      </span>
+      {ci.histogram && <CIPlotMount ci={ci} compact={compact} />}
+    </span>
+  );
+}
+
+/** Lazy-imports CIPlot and renders a confidence interval chart inline. */
+function CIPlotMount({ ci, compact }: { ci: DifferenceCI; compact?: boolean }) {
+  const ref = useLazyPlot(async () => {
+    const { createCIPlot } = await import("../plots/CIPlot.ts");
+    const equivMargin = (reportData.value?.metadata.cliArgs?.["equiv-margin"] as number) || undefined;
+    const opts = compact ? { width: 200, height: 70, title: "", equivMargin } : { equivMargin };
+    return createCIPlot(ci, opts);
+  }, [ci, compact], "CI plot");
+  return <div class="ci-plot-container" ref={ref} />;
+}
+
+/** Lazy-imports CIPlot and renders a bootstrap distribution sparkline inline. */
+function BootstrapCIMount({ ci, label, shift }: {
+  ci: BootstrapCIData; label?: string; shift?: number;
+}) {
+  const ref = useLazyPlot(async () => {
+    const { createDistributionPlot } = await import("../plots/CIPlot.ts");
+    const opts = {
+      width: 240, height: 80, title: "", direction: "uncertain" as const,
+      ciLabels: ci.ciLabels, includeZero: false, smooth: true, pointLabel: label,
+      ciLevel: ci.ciLevel, ciReliable: ci.ciReliable,
+    };
+    return createDistributionPlot(ci.histogram, ci.ci, ci.estimate, opts);
+  }, [ci, label], "Bootstrap CI plot");
+  const style = shift != null ? { marginLeft: `${Math.round(shift)}px` } : undefined;
+  return <div class="ci-plot-inline" style={style} ref={ref} />;
+}
+
+/** Compute min/max bootstrap estimates across a section for proportional positioning */
+function sectionEstimateRange(section: ViewerSection): [number, number] | undefined {
+  const estimates = section.rows
+    .flatMap(row => row.entries)
+    .map(e => e.bootstrapCI?.estimate)
+    .filter((v): v is number => v != null);
+  if (estimates.length < 2) return undefined;
+  const min = Math.min(...estimates), max = Math.max(...estimates);
+  return max > min ? [min, max] : undefined;
+}
+
+/** Format CLI args for display, filtering out defaults, internal keys, and camelCase aliases. */
+function formatCliArgs(
+  args?: Record<string, unknown>,
+  defaults?: Record<string, unknown>,
+): string {
+  if (!args) return "benchforge";
+  const isDisplayable = (key: string, value: unknown): boolean => {
+    if (skipArgs.has(key) || value === undefined || value === false) return false;
+    if (defaults?.[key] === value) return false;
+    // skip camelCase aliases (yargs generates both kebab-case and camelCase)
+    if (!key.includes("-") && key !== key.toLowerCase()) return false;
+    if (key === "convergence" && !args.adaptive) return false;
+    return true;
+  };
+  const flags = Object.entries(args)
+    .filter(([key, value]) => isDisplayable(key, value))
+    .map(([key, value]) => (value === true ? `--${key}` : `--${key} ${value}`));
+  return ["benchforge", ...flags].join(" ");
+}
+
+/** Format a git version as "hash (relative-date)", with dirty marker. */
+function formatVersion(v: GitVersion): string {
+  if (!v || v.hash === "unknown") return "unknown";
+  const hash = v.dirty ? v.hash + "*" : v.hash;
+  if (!v.date) return hash;
+  return `${hash} (${formatRelativeTime(v.date)})`;
+}

package/src/viewer/components/TabBar.tsx

@@ -0,0 +1,131 @@
+import { useState } from "preact/hooks";
+import type { DataProvider } from "../Providers.ts";
+import {
+  activeTabId,
+  defaultTabId,
+  provider,
+  reportData,
+  samplesLoaded,
+  sourceTabs,
+} from "../State.ts";
+import { hasSufficientSamples } from "./SamplesPanel.tsx";
+import { ThemeToggle } from "./ThemeToggle.tsx";
+
+/** Top navigation bar with fixed tabs, dynamic source tabs, theme toggle, and archive download. */
+export function TabBar() {
+  const dataProvider = provider.value!;
+  const { config } = dataProvider;
+  const data = reportData.value;
+  const samplesEnabled = !!data && hasSufficientSamples(data);
+
+  return (
+    <div class="tab-bar">
+      <TabButton tabId="summary" disabled={!config.hasReport}>
+        Summary
+      </TabButton>
+      <TabButton tabId="samples" disabled={!samplesEnabled} onActivate={() => (samplesLoaded.value = true)}>
+        Iterations
+      </TabButton>
+      <TabButton tabId="flamechart" disabled={!config.hasProfile}>
+        Allocation
+      </TabButton>
+      <TabButton tabId="time-flamechart" disabled={!config.hasTimeProfile}>
+        Timing
+      </TabButton>
+
+      {sourceTabs.value.map(st => (
+        <SourceTabBtn key={st.id} tabId={st.id} file={st.file} line={st.line} />
+      ))}
+
+      <div class="tab-spacer" />
+      <ThemeToggle />
+      <ArchiveButton provider={dataProvider} />
+    </div>
+  );
+}
+
+/** Fixed tab button that sets the active tab on click. */
+function TabButton({ tabId, disabled, onActivate, children }: {
+  tabId: string; disabled: boolean; onActivate?: () => void; children: preact.ComponentChildren;
+}) {
+  const active = activeTabId.value === tabId;
+  return (
+    <button
+      class={`tab${active ? " active" : ""}`}
+      data-tab={tabId}
+      id={`tab-${tabId}`}
+      disabled={disabled}
+      onClick={() => {
+        activeTabId.value = tabId;
+        onActivate?.();
+      }}
+    >
+      {children}
+    </button>
+  );
+}
+
+/** Source-file tab with close button; clicking the close span removes the tab instead of activating it. */
+function SourceTabBtn({ tabId, file, line }: { tabId: string; file: string; line: number }) {
+  const active = activeTabId.value === tabId;
+  const shortName = file.split("/").pop() || file;
+  const label = line ? `${shortName}:${line}` : shortName;
+
+  return (
+    <button
+      class={`tab${active ? " active" : ""}`}
+      data-tab={tabId}
+      onClick={(e: MouseEvent) => {
+        if ((e.target as HTMLElement).closest(".tab-close")) {
+          closeSourceTab(tabId);
+          return;
+        }
+        activeTabId.value = tabId;
+      }}
+    >
+      {label}{" "}
+      <span class="tab-close" title="Close">
+        &times;
+      </span>
+    </button>
+  );
+}
+
+/** Remove a source tab and fall back to the best available fixed tab. */
+function closeSourceTab(tabId: string): void {
+  sourceTabs.value = sourceTabs.value.filter(t => t.id !== tabId);
+  if (activeTabId.value === tabId) activeTabId.value = defaultTabId();
+}
+
+/** Download button that bundles all report data into a `.benchforge` archive. */
+function ArchiveButton({ provider: dataProvider }: { provider: DataProvider }) {
+  const [archiving, setArchiving] = useState(false);
+
+  async function downloadArchive(): Promise<void> {
+    setArchiving(true);
+    try {
+      const { blob, filename } = await dataProvider.createArchive();
+      const url = URL.createObjectURL(blob);
+      const link = Object.assign(document.createElement("a"), { href: url, download: filename });
+      document.body.appendChild(link);
+      link.click();
+      link.remove();
+      URL.revokeObjectURL(url);
+    } catch (err) {
+      console.error("Archive failed:", err);
+    } finally {
+      setArchiving(false);
+    }
+  }
+
+  return (
+    <button
+      class="tab archive-btn"
+      data-action="archive"
+      disabled={archiving}
+      onClick={downloadArchive}
+    >
+      {archiving ? "Archiving\u2026" : "Archive \u2193"}
+    </button>
+  );
+}

package/src/viewer/components/TabContent.tsx

@@ -0,0 +1,46 @@
+import type { ViewerConfig } from "../Providers.ts";
+import { activeTabId, provider, sourceTabs } from "../State.ts";
+import { SamplesPanel } from "./SamplesPanel.tsx";
+import { SourcePanel } from "./SourcePanel.tsx";
+import { SummaryPanel } from "./SummaryPanel.tsx";
+
+/** Renders all tab panels, showing only the active one via CSS class toggling. */
+export function TabContent() {
+  const dataProvider = provider.value!;
+  const { config } = dataProvider;
+  const tabId = activeTabId.value;
+  const panelClass = (id: string) => `report-panel${tabId === id ? " active" : ""}`;
+
+  return (
+    <div class="tab-content">
+      <div id="summary-panel" class={panelClass("summary")}>
+        {config.hasReport && <SummaryPanel />}
+      </div>
+      <div id="samples-panel" class={panelClass("samples")}>
+        <SamplesPanel />
+      </div>
+      <iframe
+        id="speedscope-iframe"
+        src={iframeSrc(dataProvider.profileUrl("alloc"), config)}
+        style={{ display: tabId === "flamechart" ? "block" : "none" }}
+      />
+      <iframe
+        id="time-speedscope-iframe"
+        src={iframeSrc(dataProvider.profileUrl("time"), config)}
+        style={{ display: tabId === "time-flamechart" ? "block" : "none" }}
+      />
+      {sourceTabs.value.map(st => (
+        <SourcePanel key={st.id} tab={st} />
+      ))}
+    </div>
+  );
+}
+
+/** Build a Speedscope iframe hash-URL with optional editor URI. */
+function iframeSrc(url: string | null, config: ViewerConfig): string {
+  if (!url) return "";
+  const parts = ["profileURL=" + encodeURIComponent(url)];
+  if (config.editorUri)
+    parts.push("editorUri=" + encodeURIComponent(config.editorUri));
+  return "speedscope/#" + parts.join("&");
+}

package/src/viewer/components/ThemeToggle.tsx

@@ -0,0 +1,50 @@
+import { themePreference } from "../State.ts";
+import { setTheme } from "../Theme.ts";
+
+/** Light/dark mode buttons. Clicking the active mode reverts to system default. */
+export function ThemeToggle(): preact.JSX.Element {
+  const pref = themePreference.value;
+
+  return (
+    <div class="theme-toggle">
+      <button
+        class={`theme-btn${pref === "light" ? " active" : ""}`}
+        title="Light mode"
+        onClick={() => setTheme(pref === "light" ? "system" : "light")}
+      >
+        <Sun />
+      </button>
+      <button
+        class={`theme-btn${pref === "dark" ? " active" : ""}`}
+        title="Dark mode"
+        onClick={() => setTheme(pref === "dark" ? "system" : "dark")}
+      >
+        <Moon />
+      </button>
+    </div>
+  );
+}
+
+function Sun() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <circle cx="12" cy="12" r="5" />
+      <line x1="12" y1="1" x2="12" y2="3" />
+      <line x1="12" y1="21" x2="12" y2="23" />
+      <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+      <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+      <line x1="1" y1="12" x2="3" y2="12" />
+      <line x1="21" y1="12" x2="23" y2="12" />
+      <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+      <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+    </svg>
+  );
+}
+
+function Moon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+    </svg>
+  );
+}

package/src/viewer/index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Benchforge Viewer</title>
+    <script>
+    var m = document.cookie.match(/(?:^|; )theme=(light|dark)/);
+    if (m) document.documentElement.dataset.theme = m[1];
+    </script>
+    <link rel="stylesheet" href="./shell.css">
+    <link rel="stylesheet" href="./report.css">
+  </head>
+
+  <body>
+    <div id="app"></div>
+
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>

package/src/viewer/main.tsx

@@ -0,0 +1,4 @@
+import { render } from "preact";
+import { App } from "./components/App.tsx";
+
+render(<App />, document.getElementById("app")!);