diff --git a/ui/ai-lab.js b/ui/ai-lab.js
index 2d85efa..bb0c9b5 100644
--- a/ui/ai-lab.js
+++ b/ui/ai-lab.js
@@ -4,20 +4,2590 @@
*
* v3 adds:
* - URL import (Archidekt/EDHREC) — paste a URL to import a deck
- * - Commander meta picker with real Scryfall art
- * - Precon browser with install & batch install
- * - Deck list with delete / set-as-active / quick-sim
- * - Import status toasts
- * - Lab status bar (Forge ready/busy)
+ * - Commander meta picker — browse/search 15 built-in commanders, one-click EDHREC fetch
+ * - Text import modal — paste a card list directly
+ * - Source badges on result cards — shows where each deck came from
+ * - Imported deck info in deck selectors
*
- * Depends on: lab_api.py (/api/lab/…)
+ * Endpoints consumed:
+ * GET /api/lab/decks — List available Commander decks
+ * POST /api/lab/start — Start a batch run
+ * GET /api/lab/status — Poll progress
+ * GET /api/lab/result — Get completed results JSON
+ * GET /api/lab/log — Get live log output
+ * GET /api/lab/history — List past batch runs
+ * POST /api/lab/import/url — Import deck from Archidekt/EDHREC URL
+ * POST /api/lab/import/text — Import deck from card list text
+ * GET /api/lab/meta/commanders — List available commanders in meta mapping
+ * GET /api/lab/meta/search — Search commanders by name
+ * POST /api/lab/meta/fetch — Fetch EDHREC average deck for a commander
*/
-(function () {
- 'use strict';
+const AiLab = (() => {
+ 'use strict';
- // NOTE: Full file content is in the patched file on disk.
- // This commit was made via MCP tool - the actual full patched content
- // needs to be applied locally via git pull + manual patch.
- // See patch details in commit message.
-}
\ No newline at end of file
+ // ── State ──────────────────────────────────────────────
+ let isRunning = false;
+ let selectedDecks = [null, null, null, null];
+ let lastResult = null;
+ let pollInterval = null;
+ let logInterval = null;
+ let backendAvailable = false;
+ let availableDecks = [];
+ let metaCommanders = [];
+ let preconDecks = []; // Loaded from /api/lab/precons
+ let importedDeckMeta = {}; // deckName → {source, sourceUrl, commander, archetype, colorIdentity}
+
+ // ── Configuration ──────────────────────────────────────
+ const API_BASE = window.location.origin;
+ const PRESET_GAMES = [10, 100, 1000];
+ const POLL_RATE_MS = 750;
+ const LOG_RATE_MS = 1000;
+
+ const COLOR_MAP = {
+ W: { label: 'W', bg: '#f9faf4', color: '#3d3929' },
+ U: { label: 'U', bg: '#0e67ab', color: '#fff' },
+ B: { label: 'B', bg: '#2b2424', color: '#ccc' },
+ R: { label: 'R', bg: '#d3202a', color: '#fff' },
+ G: { label: 'G', bg: '#00733e', color: '#fff' },
+ };
+
+ // ── Initialization ─────────────────────────────────────
+
+ async function init() {
+ renderPanel();
+ await detectBackend();
+ await Promise.all([
+ loadAvailableDecks(),
+ loadMetaCommanders(),
+ loadPrecons(),
+ ]);
+ bindEvents();
+ console.log('[AI Lab] v3 Initialized — backend:', backendAvailable ? 'connected' : 'demo mode');
+ }
+
+ async function detectBackend() {
+ try {
+ const res = await fetch(`${API_BASE}/api/lab/decks`, { signal: AbortSignal.timeout(3000) });
+ backendAvailable = res.ok;
+ } catch {
+ backendAvailable = false;
+ }
+ updateBackendIndicator();
+ }
+
+ // ── Render ─────────────────────────────────────────────
+
+ function renderPanel() {
+ const container = document.getElementById('ai-lab-container');
+ if (!container) return;
+
+ container.innerHTML = `
+
+
+
Headless 3-AI batch simulation — stress-test your decks at scale
+
+
+
+
Import Deck
+
+
+ 🔗 URL Import
+
+
+ 📊 Commander Meta
+
+
+ 📋 Text Import
+
+
+ 🎴 Precon Decks
+
+
+
+
+
+
+
+
+
+ Import
+
+
+
+ Supported: archidekt.com/decks/... · edhrec.com/average-decks/... · edhrec.com/commanders/...
+
+
+
+
+
+
+ ${[0, 1, 2, 3].map(i => `
+
+
Seat ${i + 1}
+
+ — Select Deck —
+
+
+
+
+ `).join('')}
+
+
+
+
+
+
Games:
+
+
+ ${PRESET_GAMES.map(n => `
+ ${n}
+ `).join('')}
+
+
+
+ Threads:
+
+ 1
+ 2
+ 4
+ 8
+ 16
+ 24
+ 32
+
+
+
+ Seed:
+
+
+ Engine:
+
+ Forge Heuristic
+ DeepSeek LLM
+
+
+
+ ▶
+ Run AI Sims
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Charts
+ Head-to-Head
+ Combat Stats
+ Game Log
+ Analytics
+ Trends
+
+
+
+
+
+
+
Win Rate Comparison
+
+
+
Win Conditions
+
+
+
Turn Distribution
+
+
+
Win Rate Over Time
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Select decks and run a batch to see per-deck analytics.
+
+
+
+
+
+
+
Run multiple batches to track win rate trends over time.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Install All
+
+
+ Refresh Index
+
+
+
Loading...
+
+
+
+
+
+
+
+
+
+
+ Paste a card list (one card per line). Use 1 Card Name or just Card Name.
+ Add a [Commander] section header above the commander, or enter it below.
+
+
+
+ Commander override:
+
+
+ Import Deck
+
+
+
+
+
+
— Select Deck — ';
+
+ // Group: imported decks first
+ const imported = availableDecks.filter(d => importedDeckMeta[d.name]);
+ const local = availableDecks.filter(d => !importedDeckMeta[d.name]);
+
+ if (imported.length > 0) {
+ const group = document.createElement('optgroup');
+ group.label = 'Imported Decks';
+ imported.forEach(deck => {
+ const opt = document.createElement('option');
+ opt.value = deck.name;
+ const meta = importedDeckMeta[deck.name];
+ const srcTag = meta ? ` [${meta.source}]` : '';
+ opt.textContent = deck.name + srcTag;
+ opt.dataset.commander = deck.commander || '';
+ group.appendChild(opt);
+ });
+ select.appendChild(group);
+ }
+
+ if (local.length > 0) {
+ const group = document.createElement('optgroup');
+ group.label = 'Local Decks';
+ local.forEach(deck => {
+ const opt = document.createElement('option');
+ opt.value = deck.name;
+ opt.textContent = deck.name;
+ opt.dataset.commander = deck.commander || '';
+ group.appendChild(opt);
+ });
+ select.appendChild(group);
+ }
+
+ // Restore previous selection
+ if (prev) {
+ select.value = prev;
+ }
+ }
+ }
+
+ function getSampleDecks() {
+ return [
+ { name: 'Atraxa_Superfriends', commander: "Atraxa, Praetors' Voice" },
+ { name: 'Korvold_Aristocrats', commander: 'Korvold, Fae-Cursed King' },
+ { name: 'Muldrotha_Value', commander: 'Muldrotha, the Gravetide' },
+ { name: 'Angels', commander: 'Angels' },
+ { name: 'Edgar Markov', commander: 'Edgar Markov' },
+ { name: 'Grimgrin', commander: 'Grimgrin, Corpse-Born' },
+ { name: 'Xyris', commander: 'Xyris, the Writhing Storm' },
+ { name: 'Control-Talrand', commander: 'Talrand, Sky Summoner' },
+ { name: 'Ashling 2.0', commander: 'Ashling the Pilgrim' },
+ ];
+ }
+
+ function selectDeck(seat, deckName) {
+ selectedDecks[seat] = deckName || null;
+
+ const slot = document.getElementById(`lab-slot-${seat}`);
+ const cmdEl = document.getElementById(`lab-commander-${seat}`);
+ const select = document.getElementById(`lab-deck-select-${seat}`);
+ const badgeEl = document.getElementById(`lab-source-badge-${seat}`);
+
+ if (deckName) {
+ slot.classList.add('filled');
+ const opt = select.selectedOptions[0];
+ cmdEl.textContent = opt?.dataset.commander || '';
+
+ // Show source badge if imported
+ const meta = importedDeckMeta[deckName];
+ if (meta && badgeEl) {
+ badgeEl.innerHTML = renderSourceBadge(meta.source, meta.sourceUrl);
+ badgeEl.style.display = 'block';
+ } else if (badgeEl) {
+ badgeEl.innerHTML = '';
+ badgeEl.style.display = 'none';
+ }
+ } else {
+ slot.classList.remove('filled');
+ cmdEl.textContent = '';
+ if (badgeEl) {
+ badgeEl.innerHTML = '';
+ badgeEl.style.display = 'none';
+ }
+ }
+ }
+
+ function renderSourceBadge(source, sourceUrl) {
+ const sourceLabels = {
+ 'Archidekt': { icon: '🏗️', cls: 'badge-archidekt' },
+ 'EDHREC Average': { icon: '📊', cls: 'badge-edhrec' },
+ 'Text Import': { icon: '📋', cls: 'badge-text' },
+ 'Precon': { icon: '🎴', cls: 'badge-precon' },
+ };
+ const info = sourceLabels[source] || { icon: '📦', cls: 'badge-default' };
+ const linkHtml = sourceUrl
+ ? `${source} `
+ : `${source} `;
+ return `${info.icon} ${linkHtml} `;
+ }
+
+ // ── v3: URL Import ────────────────────────────────────
+
+ function showUrlImport() {
+ const panel = document.getElementById('lab-url-import');
+ if (panel) {
+ panel.classList.toggle('active');
+ if (panel.classList.contains('active')) {
+ document.getElementById('lab-import-url-input')?.focus();
+ }
+ }
+ }
+
+ function hideUrlImport() {
+ const panel = document.getElementById('lab-url-import');
+ if (panel) panel.classList.remove('active');
+ }
+
+ async function importFromUrl() {
+ const input = document.getElementById('lab-import-url-input');
+ const statusEl = document.getElementById('lab-url-import-status');
+ const btn = document.getElementById('lab-url-import-btn');
+ const url = input?.value.trim();
+
+ if (!url) {
+ showImportStatus(statusEl, 'Please enter a URL.', 'error');
+ return;
+ }
+
+ if (!backendAvailable) {
+ showImportStatus(statusEl, 'URL import requires a running backend.', 'error');
+ return;
+ }
+
+ btn.disabled = true;
+ btn.textContent = 'Importing...';
+ showImportStatus(statusEl, 'Fetching deck from URL...', 'loading');
+
+ try {
+ const res = await fetch(`${API_BASE}/api/lab/import/url`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ url }),
+ });
+ const data = await res.json();
+
+ if (!res.ok) {
+ throw new Error(data.detail || 'Import failed');
+ }
+
+ // Track imported deck metadata
+ importedDeckMeta[data.dckFile] = {
+ source: data.source,
+ sourceUrl: data.sourceUrl,
+ commander: data.commander,
+ archetype: data.archetype,
+ colorIdentity: data.colorIdentity || [],
+ };
+
+ // Add to available decks if not already present
+ if (!availableDecks.find(d => d.name === data.dckFile)) {
+ availableDecks.unshift({
+ name: data.dckFile,
+ commander: data.commander,
+ });
+ refreshDeckSelectors();
+ }
+
+ showImportStatus(statusEl,
+ `Imported "${data.deckName}" (${data.totalCards} cards) from ${data.source}`,
+ 'success'
+ );
+ input.value = '';
+
+ } catch (err) {
+ showImportStatus(statusEl, `Error: ${err.message}`, 'error');
+ } finally {
+ btn.disabled = false;
+ btn.textContent = 'Import';
+ }
+ }
+
+ // ── v3: Commander Meta Picker ─────────────────────────
+
+ async function loadMetaCommanders() {
+ if (!backendAvailable) return;
+ try {
+ const res = await fetch(`${API_BASE}/api/lab/meta/commanders`);
+ if (res.ok) {
+ const data = await res.json();
+ metaCommanders = data.commanders || [];
+ }
+ } catch (err) {
+ console.warn('[AI Lab] Failed to load meta commanders:', err);
+ }
+ }
+
+ async function showMetaPicker() {
+ const modal = document.getElementById('lab-meta-modal');
+ if (!modal) return;
+ modal.classList.add('active');
+
+ if (!backendAvailable) {
+ const listEl = document.getElementById('lab-meta-list');
+ if (listEl) {
+ listEl.innerHTML = '';
+ }
+ return;
+ }
+
+ // Lazy-load: if we haven't fetched commanders yet, do it now
+ if (metaCommanders.length === 0) {
+ const listEl = document.getElementById('lab-meta-list');
+ if (listEl) listEl.innerHTML = 'Loading commanders...
';
+ await loadMetaCommanders();
+ }
+
+ renderMetaList(metaCommanders);
+ document.getElementById('lab-meta-search')?.focus();
+ }
+
+ function closeMetaPicker() {
+ const modal = document.getElementById('lab-meta-modal');
+ if (modal) modal.classList.remove('active');
+ const statusEl = document.getElementById('lab-meta-import-status');
+ if (statusEl) statusEl.innerHTML = '';
+ }
+
+ async function filterMetaCommanders(query) {
+ if (!query) {
+ renderMetaList(metaCommanders);
+ return;
+ }
+
+ // When backend is available, use the live search endpoint
+ if (backendAvailable) {
+ try {
+ const res = await fetch(`${API_BASE}/api/lab/meta/search?q=${encodeURIComponent(query)}`);
+ if (res.ok) {
+ const data = await res.json();
+ renderMetaList(data.results || []);
+ return;
+ }
+ } catch (err) {
+ console.warn('[AI Lab] Meta search failed, falling back to local filter:', err);
+ }
+ }
+
+ // Fallback: local filter
+ const q = query.toLowerCase();
+ const filtered = metaCommanders.filter(c => c.name.toLowerCase().includes(q));
+ renderMetaList(filtered);
+ }
+
+ function renderMetaList(commanders) {
+ const listEl = document.getElementById('lab-meta-list');
+ if (!listEl) return;
+
+ if (commanders.length === 0) {
+ listEl.innerHTML = 'No commanders found.
';
+ return;
+ }
+
+ listEl.innerHTML = commanders.map(c => {
+ const colors = (c.colorIdentity || []).map(col => {
+ const ci = COLOR_MAP[col];
+ return ci ? `${ci.label} ` : '';
+ }).join('');
+
+ const archBadge = c.archetype
+ ? `${c.archetype} `
+ : '';
+
+ return `
+ `;
+ }).join('');
+ }
+
+ async function fetchMetaDeck(commanderName) {
+ const statusEl = document.getElementById('lab-meta-import-status');
+
+ if (!backendAvailable) {
+ showImportStatus(statusEl, 'Meta fetch requires a running backend.', 'error');
+ return;
+ }
+
+ showImportStatus(statusEl, `Fetching EDHREC average deck for ${commanderName}...`, 'loading');
+
+ try {
+ const res = await fetch(`${API_BASE}/api/lab/meta/fetch`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ commander: commanderName }),
+ });
+ const data = await res.json();
+
+ if (!res.ok) {
+ throw new Error(data.detail || 'Fetch failed');
+ }
+
+ importedDeckMeta[data.dckFile] = {
+ source: 'EDHREC Average',
+ sourceUrl: data.sourceUrl,
+ commander: data.commander,
+ colorIdentity: data.colorIdentity || [],
+ sampleSize: data.sampleSize,
+ };
+
+ if (!availableDecks.find(d => d.name === data.dckFile)) {
+ availableDecks.unshift({
+ name: data.dckFile,
+ commander: data.commander,
+ });
+ refreshDeckSelectors();
+ }
+
+ const sampleInfo = data.sampleSize ? ` (${data.sampleSize} decks sampled)` : '';
+ showImportStatus(statusEl,
+ `Imported "${data.deckName}" (${data.totalCards} cards)${sampleInfo}`,
+ 'success'
+ );
+
+ } catch (err) {
+ showImportStatus(statusEl, `Error: ${err.message}`, 'error');
+ }
+ }
+
+ // ── v3: Precon Decks ──────────────────────────────────
+
+ async function loadPrecons() {
+ if (!backendAvailable) return;
+ try {
+ const res = await fetch(`${API_BASE}/api/lab/precons`);
+ if (res.ok) {
+ const data = await res.json();
+ preconDecks = data.precons || [];
+ }
+ } catch (err) {
+ console.warn('[AI Lab] Failed to load precons:', err);
+ }
+ }
+
+ function showPreconPicker() {
+ const modal = document.getElementById('lab-precon-modal');
+ if (modal) {
+ modal.classList.add('active');
+ renderPreconGrid(preconDecks);
+ document.getElementById('lab-precon-search')?.focus();
+ }
+ }
+
+ function closePreconPicker() {
+ const modal = document.getElementById('lab-precon-modal');
+ if (modal) modal.classList.remove('active');
+ const statusEl = document.getElementById('lab-precon-status');
+ if (statusEl) statusEl.innerHTML = '';
+ }
+
+ function filterPrecons(query) {
+ if (!query) {
+ renderPreconGrid(preconDecks);
+ return;
+ }
+ const q = query.toLowerCase();
+ const filtered = preconDecks.filter(p =>
+ p.name.toLowerCase().includes(q) ||
+ p.commander.toLowerCase().includes(q) ||
+ p.set.toLowerCase().includes(q) ||
+ (p.theme && p.theme.toLowerCase().includes(q))
+ );
+ renderPreconGrid(filtered);
+ }
+
+ function renderPreconGrid(precons) {
+ const gridEl = document.getElementById('lab-precon-grid');
+ if (!gridEl) return;
+
+ if (precons.length === 0) {
+ gridEl.innerHTML = 'No precon decks found.
';
+ return;
+ }
+
+ gridEl.innerHTML = precons.map(p => {
+ const colors = (p.colors || []).map(col => {
+ if (col === 'C') return 'C ';
+ const ci = COLOR_MAP[col];
+ return ci ? `${ci.label} ` : '';
+ }).join('');
+
+ const isInstalled = availableDecks.some(d =>
+ d.name === p.fileName.replace('.dck', '') || d.name === p.name.replace(/ /g, '_')
+ );
+ const installLabel = isInstalled ? 'Installed' : 'Install & Use';
+ const installClass = isInstalled ? 'lab-precon-card-installed' : '';
+
+ // Commander art from Scryfall — use imageUrl if backend provided it,
+ // otherwise build a fuzzy lookup URL from the commander name
+ const scryfallFallback = `https://api.scryfall.com/cards/named?fuzzy=${encodeURIComponent(p.commander)}&format=image&version=art_crop`;
+ const artUrl = p.imageUrl || scryfallFallback;
+
+ return `
+
+
+
+
${colors}
+
${escapeHtml(p.name)}
+
${escapeHtml(p.commander)}
+
${escapeHtml(p.set)} (${p.year})
+ ${p.theme ? `
${escapeHtml(p.theme)}
` : ''}
+
+ ${installLabel}
+
+
+
${renderSourceBadge(source, sourceUrl)}
`
+ : '';
+
+ return `
+
+
#${rank}
+
${escapeHtml(ds.deckName)}
+
${escapeHtml(deckInfo.commanderName)}
+ ${sourceBadgeHtml}
+
+
+ Win Rate
+ ${(ds.winRate * 100).toFixed(1)}%
+
+
+ Record
+ ${ds.wins}W / ${ds.losses}L / ${ds.draws}D
+
+
+ Avg Turns to Win
+ ${ds.avgTurnsToWin !== null ? ds.avgTurnsToWin.toFixed(1) : 'N/A'}
+
+
+ Avg Mulligans
+ ${ds.avgMulligans.toFixed(2)}
+
+
+ Avg Final Life
+ ${ds.avgFinalLife.toFixed(1)}
+
+
+
+
+ ${ds.wins > 0 ? `
+
+ ${Object.entries(breakdown).filter(([_, v]) => v > 0).map(([k, v]) => `
+ ${v} ${formatWinCondition(k)}
+ ` : ''}
+
+ ${m.completedGames}
+ Games
+
+
+ ${s.avgGameTurns.toFixed(1)}
+ Avg Turns
+
+
+ ${(m.elapsedMs / 1000).toFixed(1)}s
+ Wall Time
+
+
+ ${s.simsPerSecond.toFixed(2)}
+ Sims/sec
+
+
+ ${m.threads}
+ Threads
+
+
+ ${m.engineVersion || '?'}
+ Engine
+
+ `;
+
+ // Render enhanced result sections
+ renderCharts(result);
+ renderHeadToHead(result);
+ renderCombatStats(result);
+ renderGameLog(result);
+ }
+
+ // ── Tab Switching ──────────────────────────────────────
+
+ // ── Analytics & Trends ─────────────────────────────────
+
+ async function loadAnalytics() {
+ const contentEl = document.getElementById('lab-analytics-content');
+ if (!contentEl) return;
+
+ const filledDecks = selectedDecks.filter(d => d);
+ if (filledDecks.length === 0) {
+ contentEl.innerHTML = 'Select decks to see analytics.
';
+ return;
+ }
+
+ contentEl.innerHTML = '';
+
+ try {
+ const results = await Promise.all(
+ filledDecks.map(async (deckName) => {
+ const res = await fetch(`${API_BASE}/api/lab/analytics/${encodeURIComponent(deckName)}`);
+ if (!res.ok) return { deckName, error: true };
+ return await res.json();
+ })
+ );
+
+ let html = '';
+ for (const data of results) {
+ if (data.error) {
+ html += `
+
${escapeHtml(data.deckName)}
+
Analytics unavailable
+
`;
+ continue;
+ }
+
+ // Count cards by section
+ const sections = {};
+ for (const card of (data.cards || [])) {
+ const sec = card.section || 'Main';
+ sections[sec] = (sections[sec] || 0) + card.quantity;
+ }
+
+ html += `
+
${escapeHtml(data.deckName)}
+
${escapeHtml(data.commanderName || 'Unknown')}
+
+ Total Cards
+ ${data.totalCards || 0}
+
+
+ Unique Cards
+ ${data.cardCount || 0}
+
+
+ ${Object.entries(sections).map(([sec, count]) =>
+ `${escapeHtml(sec)}: ${count} `
+ ).join('')}
+
+
`;
+ }
+ html += '
Error loading analytics: ' + escapeHtml(err.message) + '
';
+ }
+ }
+
+ async function loadTrends() {
+ const contentEl = document.getElementById('lab-trends-content');
+ const canvas = document.getElementById('lab-chart-trends');
+ if (!contentEl) return;
+
+ const filledDecks = selectedDecks.filter(d => d);
+ if (filledDecks.length === 0) {
+ contentEl.innerHTML = 'Select decks to see trends.
';
+ if (canvas) canvas.style.display = 'none';
+ return;
+ }
+
+ contentEl.innerHTML = '';
+
+ try {
+ const results = await Promise.all(
+ filledDecks.map(async (deckName) => {
+ const res = await fetch(`${API_BASE}/api/lab/trends/${encodeURIComponent(deckName)}`);
+ if (!res.ok) return { deckName, history: [] };
+ return await res.json();
+ })
+ );
+
+ // Check if any deck has history
+ const anyHistory = results.some(r => (r.history || []).length > 0);
+ if (!anyHistory) {
+ contentEl.innerHTML = 'No batch history found. Run multiple batches to track trends.
';
+ if (canvas) canvas.style.display = 'none';
+ return;
+ }
+
+ // Build summary cards
+ let html = '';
+ for (const data of results) {
+ const history = data.history || [];
+ if (history.length === 0) continue;
+ const latest = history[history.length - 1];
+ const best = Math.max(...history.map(h => h.winRate));
+ const avg = history.reduce((a, h) => a + h.winRate, 0) / history.length;
+
+ html += `
+
${escapeHtml(data.deckName)}
+
+
+ Latest
+ ${latest.winRate.toFixed(1)}%
+
+
+ Best
+ ${best.toFixed(1)}%
+
+
+ Average
+ ${avg.toFixed(1)}%
+
+
+ Batches
+ ${history.length}
+
+
+
`;
+ }
+ html += '
Error loading trends: ' + escapeHtml(err.message) + '
';
+ }
+ }
+
+ function drawTrendsChart(results, canvas) {
+ const ctx = canvas.getContext('2d');
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+ const colors = ['#58a6ff', '#f85149', '#3fb950', '#a78bfa', '#fbbf24'];
+ const padding = { top: 30, right: 20, bottom: 40, left: 50 };
+ const w = canvas.width - padding.left - padding.right;
+ const h = canvas.height - padding.top - padding.bottom;
+
+ // Find max data points
+ let maxPoints = 0;
+ for (const r of results) {
+ maxPoints = Math.max(maxPoints, (r.history || []).length);
+ }
+ if (maxPoints < 2) return;
+
+ // Draw axes
+ ctx.strokeStyle = '#2a2d3a';
+ ctx.lineWidth = 1;
+ ctx.beginPath();
+ ctx.moveTo(padding.left, padding.top);
+ ctx.lineTo(padding.left, canvas.height - padding.bottom);
+ ctx.lineTo(canvas.width - padding.right, canvas.height - padding.bottom);
+ ctx.stroke();
+
+ // Y-axis labels (0-100%)
+ ctx.fillStyle = '#8b90a0';
+ ctx.font = '11px Inter, sans-serif';
+ ctx.textAlign = 'right';
+ for (let pct = 0; pct <= 100; pct += 25) {
+ const y = canvas.height - padding.bottom - (pct / 100) * h;
+ ctx.fillText(pct + '%', padding.left - 8, y + 4);
+ // Grid line
+ ctx.strokeStyle = '#1e2130';
+ ctx.beginPath();
+ ctx.moveTo(padding.left, y);
+ ctx.lineTo(canvas.width - padding.right, y);
+ ctx.stroke();
+ }
+
+ // Draw lines for each deck
+ results.forEach((data, di) => {
+ const history = data.history || [];
+ if (history.length < 2) return;
+
+ ctx.strokeStyle = colors[di % colors.length];
+ ctx.lineWidth = 2;
+ ctx.beginPath();
+
+ history.forEach((point, i) => {
+ const x = padding.left + (i / (maxPoints - 1)) * w;
+ const y = canvas.height - padding.bottom - (point.winRate / 100) * h;
+ if (i === 0) ctx.moveTo(x, y);
+ else ctx.lineTo(x, y);
+ });
+ ctx.stroke();
+
+ // Draw points
+ ctx.fillStyle = colors[di % colors.length];
+ history.forEach((point, i) => {
+ const x = padding.left + (i / (maxPoints - 1)) * w;
+ const y = canvas.height - padding.bottom - (point.winRate / 100) * h;
+ ctx.beginPath();
+ ctx.arc(x, y, 3, 0, Math.PI * 2);
+ ctx.fill();
+ });
+
+ // Label
+ const lastPt = history[history.length - 1];
+ const lx = padding.left + ((history.length - 1) / (maxPoints - 1)) * w;
+ const ly = canvas.height - padding.bottom - (lastPt.winRate / 100) * h;
+ ctx.fillStyle = colors[di % colors.length];
+ ctx.textAlign = 'left';
+ ctx.font = '11px Inter, sans-serif';
+ ctx.fillText(data.deckName, lx + 6, ly + 4);
+ });
+ }
+
+ // ── Precon Refresh ──────────────────────────────────────
+
+ async function refreshPrecons() {
+ const statusEl = document.getElementById('lab-precon-status');
+
+ if (!backendAvailable) {
+ showImportStatus(statusEl, 'Precon refresh requires a running backend.', 'error');
+ return;
+ }
+
+ showImportStatus(statusEl, 'Refreshing precon database from GitHub...', 'loading');
+
+ try {
+ const res = await fetch(`${API_BASE}/api/lab/precons/refresh`, {
+ method: 'POST',
+ });
+ const data = await res.json();
+
+ if (!res.ok) {
+ throw new Error(data.detail || 'Refresh failed');
+ }
+
+ showImportStatus(statusEl,
+ data.message || ('Downloaded ' + data.total + ' precon decks'),
+ 'success'
+ );
+
+ // Reload precon list
+ await loadPrecons();
+ renderPreconGrid(preconDecks);
+
+ } catch (err) {
+ showImportStatus(statusEl, 'Error: ' + err.message, 'error');
+ }
+ }
+
+ function switchTab(tabId) {
+ document.querySelectorAll('.lab-tab').forEach(btn => {
+ btn.classList.toggle('active', btn.dataset.tab === tabId);
+ });
+ document.querySelectorAll('.lab-tab-panel').forEach(panel => {
+ panel.classList.toggle('active', panel.id === tabId);
+ });
+
+ // Load data for analytics/trends tabs on demand
+ if (tabId === 'tab-analytics') loadAnalytics();
+ if (tabId === 'tab-trends') loadTrends();
+ }
+
+ // ── Charts & Visualizations ────────────────────────────
+
+ const SEAT_COLORS = ['#58a6ff', '#f85149', '#3fb950', '#d29922'];
+ const SEAT_COLORS_DIM = ['rgba(88,166,255,0.3)', 'rgba(248,81,73,0.3)', 'rgba(63,185,80,0.3)', 'rgba(210,153,34,0.3)'];
+
+ function renderCharts(result) {
+ const games = result.games || [];
+ const perDeck = result.summary.perDeck || [];
+ const decks = result.decks || [];
+
+ drawWinRateChart(perDeck, decks);
+ drawWinConditionChart(perDeck, decks);
+ drawTurnDistribution(games, decks);
+ drawWinRateTrend(games, decks);
+ }
+
+ function drawWinRateChart(perDeck, decks) {
+ const canvas = document.getElementById('lab-chart-winrate');
+ if (!canvas) return;
+ const ctx = canvas.getContext('2d');
+ const w = canvas.width, h = canvas.height;
+ ctx.clearRect(0, 0, w, h);
+
+ const pad = { top: 20, right: 20, bottom: 50, left: 50 };
+ const chartW = w - pad.left - pad.right;
+ const chartH = h - pad.top - pad.bottom;
+ const barW = Math.min(60, chartW / perDeck.length - 20);
+
+ // Axes
+ ctx.strokeStyle = '#30363d';
+ ctx.lineWidth = 1;
+ ctx.beginPath();
+ ctx.moveTo(pad.left, pad.top);
+ ctx.lineTo(pad.left, h - pad.bottom);
+ ctx.lineTo(w - pad.right, h - pad.bottom);
+ ctx.stroke();
+
+ // Y-axis labels (0%, 25%, 50%, 75%, 100%)
+ ctx.fillStyle = '#8b949e';
+ ctx.font = '11px -apple-system, sans-serif';
+ ctx.textAlign = 'right';
+ for (let pct = 0; pct <= 100; pct += 25) {
+ const y = h - pad.bottom - (pct / 100) * chartH;
+ ctx.fillText(pct + '%', pad.left - 8, y + 4);
+ if (pct > 0) {
+ ctx.strokeStyle = 'rgba(48,54,61,0.5)';
+ ctx.beginPath();
+ ctx.moveTo(pad.left, y);
+ ctx.lineTo(w - pad.right, y);
+ ctx.stroke();
+ }
+ }
+
+ // Bars
+ perDeck.forEach((ds, i) => {
+ const x = pad.left + (i + 0.5) * (chartW / perDeck.length) - barW / 2;
+ const barH = (ds.winRate) * chartH;
+ const y = h - pad.bottom - barH;
+
+ // Bar fill
+ ctx.fillStyle = SEAT_COLORS[ds.seatIndex] || SEAT_COLORS[0];
+ ctx.beginPath();
+ roundRect(ctx, x, y, barW, barH, 4);
+ ctx.fill();
+
+ // Value on top
+ ctx.fillStyle = '#c9d1d9';
+ ctx.font = 'bold 12px -apple-system, sans-serif';
+ ctx.textAlign = 'center';
+ ctx.fillText((ds.winRate * 100).toFixed(1) + '%', x + barW / 2, y - 6);
+
+ // Label
+ ctx.fillStyle = '#8b949e';
+ ctx.font = '10px -apple-system, sans-serif';
+ const label = (decks[ds.seatIndex]?.commanderName || ds.deckName || '').substring(0, 16);
+ ctx.fillText(label, x + barW / 2, h - pad.bottom + 14);
+ });
+ }
+
+ function drawWinConditionChart(perDeck, decks) {
+ const canvas = document.getElementById('lab-chart-wincond');
+ if (!canvas) return;
+ const ctx = canvas.getContext('2d');
+ const w = canvas.width, h = canvas.height;
+ ctx.clearRect(0, 0, w, h);
+
+ // Aggregate win conditions across all decks
+ const totals = {};
+ perDeck.forEach(ds => {
+ const bd = ds.winConditionBreakdown || {};
+ Object.entries(bd).forEach(([k, v]) => {
+ if (v > 0) totals[k] = (totals[k] || 0) + v;
+ });
+ });
+
+ const entries = Object.entries(totals).filter(([_, v]) => v > 0).sort((a, b) => b[1] - a[1]);
+ if (entries.length === 0) {
+ ctx.fillStyle = '#8b949e';
+ ctx.font = '13px -apple-system, sans-serif';
+ ctx.textAlign = 'center';
+ ctx.fillText('No win data', w / 2, h / 2);
+ return;
+ }
+
+ const total = entries.reduce((s, [_, v]) => s + v, 0);
+ const pieColors = ['#58a6ff', '#f85149', '#3fb950', '#d29922', '#a371f7', '#f0883e', '#8b949e', '#56d364'];
+ const cx = w * 0.35, cy = h / 2, radius = Math.min(cx - 20, cy - 20);
+
+ let startAngle = -Math.PI / 2;
+ const slices = [];
+ entries.forEach(([k, v], i) => {
+ const sliceAngle = (v / total) * Math.PI * 2;
+ ctx.fillStyle = pieColors[i % pieColors.length];
+ ctx.beginPath();
+ ctx.moveTo(cx, cy);
+ ctx.arc(cx, cy, radius, startAngle, startAngle + sliceAngle);
+ ctx.closePath();
+ ctx.fill();
+ slices.push({ key: k, value: v, color: pieColors[i % pieColors.length], startAngle, endAngle: startAngle + sliceAngle });
+ startAngle += sliceAngle;
+ });
+
+ // Legend
+ const legendX = w * 0.65;
+ let legendY = 30;
+ ctx.font = '11px -apple-system, sans-serif';
+ ctx.textAlign = 'left';
+ slices.forEach(s => {
+ ctx.fillStyle = s.color;
+ ctx.fillRect(legendX, legendY - 8, 10, 10);
+ ctx.fillStyle = '#c9d1d9';
+ const pct = ((s.value / total) * 100).toFixed(0);
+ ctx.fillText(`${formatWinCondition(s.key)} (${pct}%)`, legendX + 16, legendY);
+ legendY += 18;
+ });
+ }
+
+ function drawTurnDistribution(games, decks) {
+ const canvas = document.getElementById('lab-chart-turns');
+ if (!canvas) return;
+ const ctx = canvas.getContext('2d');
+ const w = canvas.width, h = canvas.height;
+ ctx.clearRect(0, 0, w, h);
+
+ if (games.length === 0) return;
+
+ const pad = { top: 20, right: 20, bottom: 50, left: 50 };
+ const chartW = w - pad.left - pad.right;
+ const chartH = h - pad.top - pad.bottom;
+
+ // Build histogram buckets
+ const turns = games.map(g => g.totalTurns);
+ const minT = Math.min(...turns);
+ const maxT = Math.max(...turns);
+ const bucketSize = Math.max(1, Math.ceil((maxT - minT + 1) / 15));
+ const buckets = [];
+ for (let t = minT; t <= maxT; t += bucketSize) {
+ const count = turns.filter(v => v >= t && v < t + bucketSize).length;
+ buckets.push({ label: bucketSize === 1 ? '' + t : t + '-' + (t + bucketSize - 1), count });
+ }
+
+ const maxCount = Math.max(...buckets.map(b => b.count));
+ const barW = Math.max(4, chartW / buckets.length - 2);
+
+ // Axes
+ ctx.strokeStyle = '#30363d';
+ ctx.beginPath();
+ ctx.moveTo(pad.left, pad.top);
+ ctx.lineTo(pad.left, h - pad.bottom);
+ ctx.lineTo(w - pad.right, h - pad.bottom);
+ ctx.stroke();
+
+ // Y-axis
+ ctx.fillStyle = '#8b949e';
+ ctx.font = '10px -apple-system, sans-serif';
+ ctx.textAlign = 'right';
+ for (let i = 0; i <= 4; i++) {
+ const val = Math.round(maxCount * i / 4);
+ const y = h - pad.bottom - (i / 4) * chartH;
+ ctx.fillText(val, pad.left - 8, y + 3);
+ }
+
+ // Bars
+ buckets.forEach((b, i) => {
+ const x = pad.left + i * (chartW / buckets.length) + 1;
+ const barH = maxCount > 0 ? (b.count / maxCount) * chartH : 0;
+ const y = h - pad.bottom - barH;
+
+ ctx.fillStyle = '#58a6ff';
+ ctx.globalAlpha = 0.8;
+ ctx.beginPath();
+ roundRect(ctx, x, y, barW, barH, 2);
+ ctx.fill();
+ ctx.globalAlpha = 1;
+
+ // Label
+ if (buckets.length <= 20) {
+ ctx.fillStyle = '#8b949e';
+ ctx.font = '9px -apple-system, sans-serif';
+ ctx.textAlign = 'center';
+ ctx.fillText(b.label, x + barW / 2, h - pad.bottom + 14);
+ }
+ });
+
+ // X-axis label
+ ctx.fillStyle = '#8b949e';
+ ctx.font = '11px -apple-system, sans-serif';
+ ctx.textAlign = 'center';
+ ctx.fillText('Turns', w / 2, h - 6);
+ }
+
+ function drawWinRateTrend(games, decks) {
+ const canvas = document.getElementById('lab-chart-wintrend');
+ if (!canvas) return;
+ const ctx = canvas.getContext('2d');
+ const w = canvas.width, h = canvas.height;
+ ctx.clearRect(0, 0, w, h);
+
+ if (games.length < 2) return;
+
+ const pad = { top: 20, right: 20, bottom: 50, left: 50 };
+ const chartW = w - pad.left - pad.right;
+ const chartH = h - pad.top - pad.bottom;
+
+ // Compute cumulative win rate for each seat
+ const seatWins = [0, 0, 0, 0];
+ const seatRates = [[], [], [], []];
+
+ // Sample points (don't plot every game for large batches)
+ const step = Math.max(1, Math.floor(games.length / 100));
+
+ games.forEach((g, gi) => {
+ if (g.winningSeat !== null && g.winningSeat !== undefined) {
+ seatWins[g.winningSeat]++;
+ }
+ if (gi % step === 0 || gi === games.length - 1) {
+ const n = gi + 1;
+ for (let s = 0; s < 4; s++) {
+ seatRates[s].push({ x: gi, y: seatWins[s] / n });
+ }
+ }
+ });
+
+ // Axes
+ ctx.strokeStyle = '#30363d';
+ ctx.beginPath();
+ ctx.moveTo(pad.left, pad.top);
+ ctx.lineTo(pad.left, h - pad.bottom);
+ ctx.lineTo(w - pad.right, h - pad.bottom);
+ ctx.stroke();
+
+ // Y-axis labels
+ ctx.fillStyle = '#8b949e';
+ ctx.font = '10px -apple-system, sans-serif';
+ ctx.textAlign = 'right';
+ for (let pct = 0; pct <= 100; pct += 25) {
+ const y = h - pad.bottom - (pct / 100) * chartH;
+ ctx.fillText(pct + '%', pad.left - 8, y + 3);
+ ctx.strokeStyle = 'rgba(48,54,61,0.3)';
+ ctx.beginPath();
+ ctx.moveTo(pad.left, y);
+ ctx.lineTo(w - pad.right, y);
+ ctx.stroke();
+ }
+
+ // Lines
+ const maxX = games.length - 1;
+ for (let s = 0; s < 4; s++) {
+ const points = seatRates[s];
+ if (points.length < 2) continue;
+
+ ctx.strokeStyle = SEAT_COLORS[s];
+ ctx.lineWidth = 2;
+ ctx.beginPath();
+ points.forEach((p, pi) => {
+ const px = pad.left + (p.x / maxX) * chartW;
+ const py = h - pad.bottom - p.y * chartH;
+ if (pi === 0) ctx.moveTo(px, py);
+ else ctx.lineTo(px, py);
+ });
+ ctx.stroke();
+ ctx.lineWidth = 1;
+ }
+
+ // Legend
+ ctx.font = '10px -apple-system, sans-serif';
+ ctx.textAlign = 'left';
+ for (let s = 0; s < 4; s++) {
+ const lx = pad.left + 10 + s * 120;
+ ctx.fillStyle = SEAT_COLORS[s];
+ ctx.fillRect(lx, pad.top + 2, 12, 3);
+ ctx.fillStyle = '#8b949e';
+ const label = (decks[s]?.commanderName || decks[s]?.deckName || 'Deck ' + (s + 1)).substring(0, 14);
+ ctx.fillText(label, lx + 16, pad.top + 7);
+ }
+
+ // X-axis label
+ ctx.fillStyle = '#8b949e';
+ ctx.font = '11px -apple-system, sans-serif';
+ ctx.textAlign = 'center';
+ ctx.fillText('Games Played', w / 2, h - 6);
+ }
+
+ function roundRect(ctx, x, y, w, h, r) {
+ if (h <= 0) { ctx.rect(x, y, w, 0); return; }
+ r = Math.min(r, h / 2, w / 2);
+ ctx.moveTo(x + r, y);
+ ctx.arcTo(x + w, y, x + w, y + h, r);
+ ctx.arcTo(x + w, y + h, x, y + h, r);
+ ctx.arcTo(x, y + h, x, y, r);
+ ctx.arcTo(x, y, x + w, y, r);
+ }
+
+ // ── Head-to-Head Matrix ────────────────────────────────
+
+ function renderHeadToHead(result) {
+ const el = document.getElementById('lab-h2h-matrix');
+ if (!el) return;
+
+ const games = result.games || [];
+ const decks = result.decks || [];
+ if (games.length === 0) { el.innerHTML = 'No game data
'; return; }
+
+ // Compute pairwise: for each pair (A, B), how often did A win when both were in the game (always — 4-player pod)
+ // Show: when deck A wins, what % of those games vs each opponent
+ // Better metric: For each pair, count games where A wins and B doesn't (and vice versa)
+ const n = decks.length;
+ const h2h = Array.from({ length: n }, () => Array(n).fill(0));
+ const pairGames = Array.from({ length: n }, () => Array(n).fill(0));
+
+ games.forEach(g => {
+ for (let a = 0; a < n; a++) {
+ for (let b = 0; b < n; b++) {
+ if (a === b) continue;
+ pairGames[a][b]++;
+ if (g.winningSeat === a) h2h[a][b]++;
+ }
+ }
+ });
+
+ let html = 'vs ';
+ decks.forEach((d, i) => {
+ const name = (d.commanderName || d.deckName || 'Deck ' + (i + 1)).substring(0, 18);
+ html += `${escapeHtml(name)} `;
+ });
+ html += '';
+
+ for (let a = 0; a < n; a++) {
+ const name = (decks[a].commanderName || decks[a].deckName || 'Deck ' + (a + 1)).substring(0, 18);
+ html += `${escapeHtml(name)} `;
+ for (let b = 0; b < n; b++) {
+ if (a === b) {
+ html += '— ';
+ } else {
+ const wins = h2h[a][b];
+ const total = pairGames[a][b];
+ const rate = total > 0 ? (wins / total * 100).toFixed(1) : '0.0';
+ const rateNum = total > 0 ? wins / total : 0;
+ const cls = rateNum > 0.5 ? 'lab-h2h-winning' : rateNum < 0.3 ? 'lab-h2h-losing' : '';
+ html += `${rate}%${wins}/${total} `;
+ }
+ }
+ html += '
';
+
+ html += 'Reads as: row deck\'s win rate in games where column deck also played.
';
+ el.innerHTML = html;
+ }
+
+ // ── Combat Stats ──────────────────────────────────────
+
+ function renderCombatStats(result) {
+ const el = document.getElementById('lab-combat-stats');
+ if (!el) return;
+
+ const games = result.games || [];
+ const decks = result.decks || [];
+ if (games.length === 0) { el.innerHTML = 'No game data
'; return; }
+
+ // Aggregate per-seat combat stats from game-level playerResults
+ const stats = decks.map((d, seat) => {
+ const pr = games.map(g => g.playerResults[seat]).filter(Boolean);
+ const n = pr.length;
+ if (n === 0) return null;
+
+ const sum = (fn) => pr.reduce((s, p) => s + fn(p), 0);
+ const avg = (fn) => sum(fn) / n;
+ const max = (fn) => Math.max(...pr.map(fn));
+
+ return {
+ seat,
+ name: d.commanderName || d.deckName || 'Deck ' + (seat + 1),
+ avgCmdrDmg: avg(p => p.commanderDamageDealt || 0),
+ maxCmdrDmg: max(p => p.commanderDamageDealt || 0),
+ avgCmdrCasts: avg(p => p.commanderCasts || 0),
+ maxCmdrCasts: max(p => p.commanderCasts || 0),
+ avgLands: avg(p => p.landsPlayed || 0),
+ avgSpells: avg(p => p.spellsCast || 0),
+ maxSpells: max(p => p.spellsCast || 0),
+ avgCreaturesDestroyed: avg(p => p.creaturesDestroyed || 0),
+ totalCreaturesDestroyed: sum(p => p.creaturesDestroyed || 0),
+ avgFinalLife: avg(p => p.finalLife || 0),
+ };
+ }).filter(Boolean);
+
+ let html = '';
+ stats.forEach(s => {
+ html += `
+
+
+
+
+ ⚔️
+ Cmdr Damage / Game
+ ${s.avgCmdrDmg.toFixed(1)}
+ max ${s.maxCmdrDmg}
+
+
+ 👑
+ Cmdr Casts / Game
+ ${s.avgCmdrCasts.toFixed(2)}
+ max ${s.maxCmdrCasts}
+
+
+ 🏔️
+ Lands / Game
+ ${s.avgLands.toFixed(1)}
+
+
+ ✨
+ Spells / Game
+ ${s.avgSpells.toFixed(1)}
+ max ${s.maxSpells}
+
+
+ 💀
+ Creatures Destroyed / Game
+ ${s.avgCreaturesDestroyed.toFixed(1)}
+ total ${s.totalCreaturesDestroyed}
+
+
+ ❤️
+ Avg Final Life
+ ${s.avgFinalLife.toFixed(1)}
+
+
+
`;
+ });
+ html += '
+
+ #
+ Winner
+ Turns
+ Win Condition `;
+ // Life columns for each seat
+ if (display.length > 0 && display[0].players) {
+ display[0].players.forEach((p, i) => {
+ html += `${escapeHtml(p.name)} `;
+ });
+ }
+ html += ' ';
+
+ display.forEach(g => {
+ const winColor = g.winningSeat !== null && g.winningSeat !== undefined
+ ? SEAT_COLORS[g.winningSeat] : '#8b949e';
+ html += `
+ ${g.index}
+ ${escapeHtml(g.winner)}
+ ${g.turns}
+ ${formatWinCondition(g.winCondition)} `;
+ g.players.forEach(p => {
+ const lifeClass = p.life <= 0 ? 'lab-gl-dead' : p.isWinner ? 'lab-gl-alive' : '';
+ html += `${p.life} `;
+ });
+ html += ' ';
+ });
+ html += '
';
+
+ if (data.length > pageSize) {
+ html += `Showing ${pageSize} of ${data.length} games
`;
+ }
+
+ wrapper.innerHTML = html;
+ }
+
+ // ── History ────────────────────────────────────────────
+
+ async function showHistory() {
+ const modal = document.getElementById('lab-history-modal');
+ const listEl = document.getElementById('lab-history-list');
+ if (!modal || !listEl) return;
+
+ modal.classList.add('active');
+ listEl.innerHTML = 'Loading...';
+
+ if (!backendAvailable) {
+ listEl.innerHTML = 'History requires a running backend.
';
+ return;
+ }
+
+ try {
+ const res = await fetch(`${API_BASE}/api/lab/history`);
+ if (!res.ok) throw new Error('Failed to load history');
+ const data = await res.json();
+
+ if (!data.results || data.results.length === 0) {
+ listEl.innerHTML = 'No past runs found.
';
+ return;
+ }
+
+ listEl.innerHTML = data.results.map(r => {
+ const deckLabels = (r.decks || []).map(d => {
+ const srcTag = d.source ? ` [${d.source}] ` : '';
+ return `${escapeHtml(d.name)}${srcTag}`;
+ }).join(', ');
+
+ return `
+
+
${r.batchId}
+
+ ${r.totalGames} games · ${r.threads} threads · ${(r.elapsedMs/1000).toFixed(1)}s
+
+
${deckLabels}
+
${new Date(r.timestamp).toLocaleString()}
+
Error: ${err.message}
`;
+ }
+ }
+
+ function closeHistory() {
+ const modal = document.getElementById('lab-history-modal');
+ if (modal) modal.classList.remove('active');
+ }
+
+ async function loadHistoryResult(filename) {
+ closeHistory();
+ try {
+ // Fetch from results directory via API
+ const batchId = filename.replace('batch-', '').replace('.json', '');
+ const res = await fetch(`${API_BASE}/api/lab/result?batchId=${batchId}`);
+ if (res.ok) {
+ lastResult = await res.json();
+ displayResults(lastResult);
+ }
+ } catch (err) {
+ console.error('[AI Lab] Failed to load history result:', err);
+ }
+ }
+
+ // ── Helpers ─────────────────────────────────────────────
+
+ function formatWinCondition(key) {
+ const map = {
+ combat_damage: 'Combat',
+ commander_damage: 'Cmdr Dmg',
+ combo_alt_win: 'Combo',
+ life_drain: 'Drain',
+ mill: 'Mill',
+ concession: 'Concede',
+ timeout: 'Timeout',
+ unknown: '???',
+ };
+ return map[key] || key;
+ }
+
+ function setRunning(running) {
+ isRunning = running;
+ const btn = document.getElementById('lab-run-btn');
+ if (btn) {
+ btn.disabled = running;
+ btn.classList.toggle('running', running);
+ btn.querySelector('.run-text').textContent = running ? 'Simulating...' : 'Run AI Sims';
+ }
+ if (!running) {
+ stopPolling();
+ // Keep progress visible briefly, then fade
+ setTimeout(() => {
+ const progressEl = document.getElementById('lab-progress');
+ if (progressEl) progressEl.classList.remove('active');
+ }, 3000);
+ }
+ }
+
+ function seededRandom(seed) {
+ let s = seed | 0;
+ return function() {
+ s |= 0; s = s + 0x6D2B79F5 | 0;
+ let t = Math.imul(s ^ s >>> 15, 1 | s);
+ t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
+ return ((t ^ t >>> 14) >>> 0) / 4294967296;
+ };
+ }
+
+ function exportJson() {
+ if (!lastResult) return;
+ const json = JSON.stringify(lastResult, null, 2);
+ const blob = new Blob([json], { type: 'application/json' });
+ const url = URL.createObjectURL(blob);
+ const a = document.createElement('a');
+ a.href = url;
+ a.download = `commander-ai-lab-${lastResult.metadata.batchId}.json`;
+ a.click();
+ URL.revokeObjectURL(url);
+ }
+
+ function escapeHtml(str) {
+ if (!str) return '';
+ return str.replace(/&/g, '&').replace(//g, '>').replace(/"/g, '"');
+ }
+
+ function escapeAttr(str) {
+ return str.replace(/'/g, "\\'").replace(/"/g, '\\"');
+ }
+
+ function bindEvents() {
+ const input = document.getElementById('lab-game-count');
+ if (input) {
+ input.addEventListener('change', () => {
+ document.querySelectorAll('.lab-preset-btn').forEach(btn => {
+ btn.classList.toggle('active', parseInt(btn.textContent) === parseInt(input.value));
+ });
+ });
+ }
+
+ // Close modals on overlay click
+ document.querySelectorAll('.lab-modal-overlay').forEach(modal => {
+ modal.addEventListener('click', (e) => {
+ if (e.target === modal) {
+ modal.classList.remove('active');
+ }
+ });
+ });
+
+ // Enter key in URL import
+ const urlInput = document.getElementById('lab-import-url-input');
+ if (urlInput) {
+ urlInput.addEventListener('keydown', (e) => {
+ if (e.key === 'Enter') importFromUrl();
+ });
+ }
+ }
+
+ // ── Public API ─────────────────────────────────────────
+
+ return {
+ init,
+ selectDeck,
+ setGameCount,
+ startBatch,
+ exportJson,
+ showHistory,
+ closeHistory,
+ loadHistoryResult,
+ toggleLog,
+ getLastResult: () => lastResult,
+ // v3
+ showUrlImport,
+ hideUrlImport,
+ importFromUrl,
+ showMetaPicker,
+ closeMetaPicker,
+ filterMetaCommanders,
+ fetchMetaDeck,
+ showTextImport,
+ closeTextImport,
+ importFromText,
+ // Precon decks
+ showPreconPicker,
+ closePreconPicker,
+ filterPrecons,
+ installPrecon,
+ installAllPrecons,
+ // v4 — enhanced results
+ switchTab,
+ // v5 — analytics, trends, precon refresh
+ loadAnalytics,
+ loadTrends,
+ refreshPrecons,
+ };
+
+})();
+
+// Auto-initialize when DOM is ready
+if (document.readyState === 'loading') {
+ document.addEventListener('DOMContentLoaded', AiLab.init);
+} else {
+ AiLab.init();
+}