@automagik/genie-brain 0.260404.8

package/dist/bench-ui/js/common.js

@@ -0,0 +1,264 @@
+/**
+ * Brain Lab — Common Utilities
+ *
+ * Shared utility library for the Brain Lab dashboard.
+ * API wrapper, formatters, DOM helpers, toast notifications.
+ */
+
+// ─── API ──────────────────────────────────────────────────
+
+const API_BASE = "";
+
+/**
+ * Fetch JSON from the Brain Lab API.
+ * @param {string} method - HTTP method
+ * @param {string} path - API path (e.g., '/api/leaderboard')
+ * @param {object} [body] - Request body for POST/PATCH
+ * @returns {Promise<any>}
+ */
+async function api(method, path, body) {
+	const opts = {
+		method,
+		headers: { "Content-Type": "application/json" },
+	};
+	if (body) opts.body = JSON.stringify(body);
+
+	const res = await fetch(`${API_BASE}${path}`, opts);
+	if (!res.ok) {
+		const err = await res.json().catch(() => ({ error: res.statusText }));
+		throw new Error(err.error || `API error: ${res.status}`);
+	}
+	return res.json();
+}
+
+// ─── Formatters ───────────────────────────────────────────
+
+function formatNumber(n, decimals = 2) {
+	if (n == null || Number.isNaN(n)) return "—";
+	return Number(n).toFixed(decimals);
+}
+
+function formatPercent(n, decimals = 1) {
+	if (n == null || Number.isNaN(n)) return "—";
+	return `${Number(n).toFixed(decimals)}%`;
+}
+
+function formatDuration(ms) {
+	if (ms == null || Number.isNaN(ms)) return "—";
+	if (ms < 1000) return `${Math.round(ms)}ms`;
+	if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`;
+	return `${(ms / 60000).toFixed(1)}m`;
+}
+
+function formatCost(cents) {
+	if (cents == null || Number.isNaN(cents)) return "—";
+	if (cents >= 100) return `$${(cents / 100).toFixed(2)}`;
+	return `${Number(cents).toFixed(1)}c`;
+}
+
+function timeAgo(dateStr) {
+	if (!dateStr) return "—";
+	const date = new Date(dateStr);
+	const now = Date.now();
+	const diff = now - date.getTime();
+	const mins = Math.floor(diff / 60000);
+	if (mins < 1) return "just now";
+	if (mins < 60) return `${mins}m ago`;
+	const hours = Math.floor(mins / 60);
+	if (hours < 24) return `${hours}h ago`;
+	const days = Math.floor(hours / 24);
+	return `${days}d ago`;
+}
+
+// ─── Scoring Helpers ──────────────────────────────────────
+
+function getScoreClass(score) {
+	if (score >= 80) return "excellent";
+	if (score >= 60) return "good";
+	if (score >= 40) return "fair";
+	return "poor";
+}
+
+function getMetricClass(value, thresholds) {
+	const { excellent, good, fair } = thresholds || {
+		excellent: 0.8,
+		good: 0.6,
+		fair: 0.4,
+	};
+	if (value >= excellent) return "metric-excellent";
+	if (value >= good) return "metric-good";
+	if (value >= fair) return "metric-fair";
+	return "metric-poor";
+}
+
+function getMedalHtml(rank) {
+	if (rank === 1)
+		return '<span class="medal" title="1st Place">&#x1F947;</span>';
+	if (rank === 2)
+		return '<span class="medal" title="2nd Place">&#x1F948;</span>';
+	if (rank === 3)
+		return '<span class="medal" title="3rd Place">&#x1F949;</span>';
+	return `<span style="display:inline-block;min-width:24px;text-align:center;color:var(--text-muted)">${rank}</span>`;
+}
+
+function getScoreBarHtml(score, maxWidth = 80) {
+	const cls = getScoreClass(score);
+	const width = Math.max(4, (score / 100) * maxWidth);
+	return `<div class="score-bar">
+    <div class="score-bar-fill ${cls}" style="width:${width}px"></div>
+    <span class="score-value">${formatNumber(score, 1)}</span>
+  </div>`;
+}
+
+function getParetoHtml(isParetoOptimal) {
+	if (!isParetoOptimal) return "";
+	return '<span class="pareto-star" title="Pareto optimal — no other strategy dominates in all dimensions">&#9733;</span>';
+}
+
+// ─── DOM Helpers ──────────────────────────────────────────
+
+function $(selector, parent) {
+	return (parent || document).querySelector(selector);
+}
+
+function $$(selector, parent) {
+	return Array.from((parent || document).querySelectorAll(selector));
+}
+
+function createElement(tag, attrs, children) {
+	const el = document.createElement(tag);
+	if (attrs) {
+		for (const [k, v] of Object.entries(attrs)) {
+			if (k === "className") el.className = v;
+			else if (k === "textContent") el.textContent = v;
+			else if (k === "innerHTML") el.innerHTML = v;
+			else if (k.startsWith("on"))
+				el.addEventListener(k.slice(2).toLowerCase(), v);
+			else el.setAttribute(k, v);
+		}
+	}
+	if (children) {
+		for (const child of Array.isArray(children) ? children : [children]) {
+			if (typeof child === "string")
+				el.appendChild(document.createTextNode(child));
+			else if (child) el.appendChild(child);
+		}
+	}
+	return el;
+}
+
+function escapeHtml(str) {
+	if (!str) return "";
+	return String(str)
+		.replace(/&/g, "&amp;")
+		.replace(/</g, "&lt;")
+		.replace(/>/g, "&gt;")
+		.replace(/"/g, "&quot;");
+}
+
+// ─── URL State ────────────────────────────────────────────
+
+function getUrlParam(key) {
+	return new URLSearchParams(window.location.search).get(key);
+}
+
+function setUrlParams(params) {
+	const url = new URL(window.location);
+	for (const [k, v] of Object.entries(params)) {
+		if (v == null) url.searchParams.delete(k);
+		else url.searchParams.set(k, v);
+	}
+	window.history.replaceState({}, "", url);
+}
+
+// ─── Toast Notifications ──────────────────────────────────
+
+function showToast(message, type = "info", duration = 3000) {
+	let container = $(".toast-container");
+	if (!container) {
+		container = createElement("div", { className: "toast-container" });
+		document.body.appendChild(container);
+	}
+	const toast = createElement("div", {
+		className: `toast ${type}`,
+		textContent: message,
+	});
+	container.appendChild(toast);
+	setTimeout(() => {
+		toast.style.opacity = "0";
+		setTimeout(() => toast.remove(), 200);
+	}, duration);
+}
+
+// ─── Sorting ──────────────────────────────────────────────
+
+function sortData(data, column, direction) {
+	return [...data].sort((a, b) => {
+		const aVal = a[column];
+		const bVal = b[column];
+		if (aVal == null && bVal == null) return 0;
+		if (aVal == null) return 1;
+		if (bVal == null) return -1;
+		const cmp =
+			typeof aVal === "string" ? aVal.localeCompare(bVal) : aVal - bVal;
+		return direction === "asc" ? cmp : -cmp;
+	});
+}
+
+// ─── Chart Colors ─────────────────────────────────────────
+
+const CHART_COLORS = [
+	"#58a6ff",
+	"#3fb950",
+	"#d29922",
+	"#f85149",
+	"#a371f7",
+	"#79c0ff",
+	"#56d364",
+	"#e3b341",
+	"#ff7b72",
+	"#bc8cff",
+	"#39d2c0",
+	"#ff6eb4",
+	"#ffc857",
+	"#6cb4ee",
+	"#b392f0",
+];
+
+function getChartColor(index) {
+	return CHART_COLORS[index % CHART_COLORS.length];
+}
+
+function hexToRgba(hex, alpha = 1) {
+	const r = Number.parseInt(hex.slice(1, 3), 16);
+	const g = Number.parseInt(hex.slice(3, 5), 16);
+	const b = Number.parseInt(hex.slice(5, 7), 16);
+	return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+
+// ─── Export as globals ────────────────────────────────────
+
+window.BrainLab = {
+	api,
+	formatNumber,
+	formatPercent,
+	formatDuration,
+	formatCost,
+	timeAgo,
+	getScoreClass,
+	getMetricClass,
+	getMedalHtml,
+	getScoreBarHtml,
+	getParetoHtml,
+	$,
+	$$,
+	createElement,
+	escapeHtml,
+	getUrlParam,
+	setUrlParams,
+	showToast,
+	sortData,
+	CHART_COLORS,
+	getChartColor,
+	hexToRgba,
+};

package/dist/bench-ui/js/compare.js

@@ -0,0 +1,239 @@
+/**
+ * Brain Lab — Compare View
+ *
+ * Side-by-side multi-strategy comparison with MemScore triple display.
+ * Inspired by memorybench's compare page pattern.
+ */
+
+(() => {
+	const {
+		api,
+		formatNumber,
+		formatPercent,
+		formatDuration,
+		formatCost,
+		$,
+		$$,
+		escapeHtml,
+		showToast,
+		getChartColor,
+	} = window.BrainLab;
+
+	const selectedStrategies = new Set();
+	let leaderboardData = [];
+
+	// ─── Load ─────────────────────────────────────────────
+
+	async function loadCompare() {
+		const container = $("#compare-content");
+		if (!container) return;
+
+		try {
+			leaderboardData = window.BrainLabLeaderboard
+				? window.BrainLabLeaderboard.getData()
+				: await api("GET", "/api/leaderboard");
+
+			if (!leaderboardData || leaderboardData.length === 0) {
+				container.innerHTML = `
+          <div class="empty-state">
+            <div class="empty-state-icon">&#x2696;</div>
+            <div class="empty-state-title">Nothing to compare</div>
+            <div class="empty-state-text">Run benchmarks first to compare strategies.</div>
+          </div>`;
+				return;
+			}
+
+			renderSelector();
+		} catch (err) {
+			container.innerHTML = `<div class="empty-state"><div class="empty-state-icon">&#x26A0;</div><div class="empty-state-text">${escapeHtml(err.message)}</div></div>`;
+		}
+	}
+
+	// ─── Strategy Selector ────────────────────────────────
+
+	function renderSelector() {
+		const container = $("#compare-content");
+		if (!container) return;
+
+		let html = `
+      <div class="card">
+        <div class="card-header">
+          <div class="card-title">Select Strategies to Compare</div>
+          <div class="card-subtitle">Choose 2 or more strategies for side-by-side comparison</div>
+        </div>
+        <div style="display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px">`;
+
+		for (const d of leaderboardData) {
+			const checked = selectedStrategies.has(d.strategy) ? "checked" : "";
+			html += `
+        <label class="checkbox-label">
+          <input type="checkbox" value="${escapeHtml(d.strategy)}" ${checked} class="compare-check">
+          ${escapeHtml(d.strategy)}
+        </label>`;
+		}
+
+		html += `</div>
+        <button class="btn btn-primary" id="compare-btn" ${selectedStrategies.size < 2 ? "disabled" : ""}>
+          Compare Selected (${selectedStrategies.size})
+        </button>
+      </div>
+      <div id="compare-results"></div>`;
+
+		container.innerHTML = html;
+
+		// Bind checkbox changes
+		$$(".compare-check", container).forEach((cb) => {
+			cb.addEventListener("change", () => {
+				if (cb.checked) {
+					selectedStrategies.add(cb.value);
+				} else {
+					selectedStrategies.delete(cb.value);
+				}
+				const btn = $("#compare-btn");
+				if (btn) {
+					btn.textContent = `Compare Selected (${selectedStrategies.size})`;
+					btn.disabled = selectedStrategies.size < 2;
+				}
+			});
+		});
+
+		// Bind compare button
+		const btn = $("#compare-btn");
+		if (btn) {
+			btn.addEventListener("click", renderComparison);
+		}
+
+		// Auto-render if strategies already selected
+		if (selectedStrategies.size >= 2) {
+			renderComparison();
+		}
+	}
+
+	// ─── Comparison View ──────────────────────────────────
+
+	function renderComparison() {
+		const resultsDiv = $("#compare-results");
+		if (!resultsDiv) return;
+
+		const selected = leaderboardData.filter((d) =>
+			selectedStrategies.has(d.strategy),
+		);
+		if (selected.length < 2) {
+			showToast("Select at least 2 strategies", "error");
+			return;
+		}
+
+		// Find best values for delta highlighting
+		const best = {
+			brainScore: Math.max(...selected.map((d) => d.brainScore || 0)),
+			avgScore: Math.max(...selected.map((d) => d.avgScore || 0)),
+			mrr: Math.max(...selected.map((d) => d.mrr || 0)),
+			ndcg: Math.max(...selected.map((d) => d.ndcg || 0)),
+			f1AtK: Math.max(...selected.map((d) => d.f1AtK || 0)),
+			hitRatePct: Math.max(...selected.map((d) => d.hitRatePct || 0)),
+			avgLatencyMs: Math.min(
+				...selected.map((d) => d.avgLatencyMs || Number.POSITIVE_INFINITY),
+			),
+			totalCostCents: Math.min(
+				...selected.map((d) => d.totalCostCents || Number.POSITIVE_INFINITY),
+			),
+		};
+
+		let html = '<div class="compare-grid">';
+
+		for (let i = 0; i < selected.length; i++) {
+			const d = selected[i];
+			const isBest = d.brainScore === best.brainScore;
+
+			html += `
+        <div class="compare-card ${isBest ? "selected" : ""}">
+          <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px">
+            <h4>${escapeHtml(d.strategy)}</h4>
+            ${d.isParetoOptimal ? '<span class="pareto-star" title="Pareto optimal">&#9733;</span>' : ""}
+          </div>
+
+          <div class="compare-memscore">${escapeHtml(d.memScore || "—")}</div>
+
+          <table style="width:100%;margin-top:12px">
+            <tbody>
+              ${compareRow("BrainScore", d.brainScore, best.brainScore, formatNumber, true)}
+              ${compareRow("Quality", d.avgScore, best.avgScore, (v) => formatNumber(v, 3), true)}
+              ${compareRow("MRR", d.mrr, best.mrr, (v) => formatNumber(v, 3), true)}
+              ${compareRow("NDCG", d.ndcg, best.ndcg, (v) => formatNumber(v, 3), true)}
+              ${compareRow("F1@K", d.f1AtK, best.f1AtK, (v) => formatNumber(v, 3), true)}
+              ${compareRow("Hit Rate", d.hitRatePct, best.hitRatePct, (v) => formatPercent(v), true)}
+              ${compareRow("Avg Latency", d.avgLatencyMs, best.avgLatencyMs, (v) => formatDuration(v), false)}
+              ${compareRow("Total Cost", d.totalCostCents, best.totalCostCents, (v) => formatCost(v), false)}
+              <tr><td style="color:var(--text-muted)">Evaluations</td><td class="numeric">${d.totalEvaluations || 0}</td></tr>
+            </tbody>
+          </table>
+        </div>`;
+		}
+
+		html += "</div>";
+
+		// Comparison table
+		html += `
+      <div class="card" style="margin-top:16px">
+        <div class="card-header">
+          <div class="card-title">Metric Comparison Table</div>
+        </div>
+        <div class="table-wrapper">
+          <table>
+            <thead>
+              <tr>
+                <th>Metric</th>
+                ${selected.map((d) => `<th>${escapeHtml(d.strategy)}</th>`).join("")}
+              </tr>
+            </thead>
+            <tbody>
+              ${metricRow("BrainScore", selected, "brainScore", (v) => formatNumber(v, 1), true)}
+              ${metricRow("Quality", selected, "avgScore", (v) => formatNumber(v, 3), true)}
+              ${metricRow("MRR", selected, "mrr", (v) => formatNumber(v, 3), true)}
+              ${metricRow("NDCG", selected, "ndcg", (v) => formatNumber(v, 3), true)}
+              ${metricRow("F1@K", selected, "f1AtK", (v) => formatNumber(v, 3), true)}
+              ${metricRow("Hit Rate", selected, "hitRatePct", (v) => formatPercent(v), true)}
+              ${metricRow("Avg Latency", selected, "avgLatencyMs", (v) => formatDuration(v), false)}
+              ${metricRow("p95 Latency", selected, "p95LatencyMs", (v) => formatDuration(v), false)}
+              ${metricRow("Cost", selected, "totalCostCents", (v) => formatCost(v), false)}
+            </tbody>
+          </table>
+        </div>
+      </div>`;
+
+		resultsDiv.innerHTML = html;
+	}
+
+	// ─── Helpers ──────────────────────────────────────────
+
+	function compareRow(label, value, bestValue, formatter, higherIsBetter) {
+		const isBest = higherIsBetter ? value >= bestValue : value <= bestValue;
+		const cls = isBest ? "delta-positive" : "";
+		return `<tr>
+      <td style="color:var(--text-muted)">${label}</td>
+      <td class="numeric ${cls}">${formatter(value)}</td>
+    </tr>`;
+	}
+
+	function metricRow(label, entries, key, formatter, higherIsBetter) {
+		const values = entries.map((d) => d[key] || 0);
+		const bestVal = higherIsBetter ? Math.max(...values) : Math.min(...values);
+
+		const cells = entries
+			.map((d) => {
+				const val = d[key] || 0;
+				const isBest = val === bestVal;
+				return `<td class="numeric ${isBest ? "delta-positive" : ""}" style="${isBest ? "font-weight:600" : ""}">${formatter(val)}</td>`;
+			})
+			.join("");
+
+		return `<tr><td style="color:var(--text-muted)">${label}</td>${cells}</tr>`;
+	}
+
+	// ─── Public API ───────────────────────────────────────
+
+	window.BrainLabCompare = {
+		load: loadCompare,
+		getSelected: () => [...selectedStrategies],
+	};
+})();