@evomap/evolver 1.90.0 → 2.0.0-beta.1

package/src/webui/client/clientJs/interactions.js

@@ -1,351 +0,0 @@
-'use strict';
-
-exports.interactionsJs = `
-const HUB_ACTIVITY_STATE = { layer: 'all', hideHeartbeats: true, events: [] };
-
-function buildHubActivityEvents(calls, atpProofs, atpOrders, lifecycleEvents) {
-  const events = [];
-  (lifecycleEvents || []).forEach((e) => events.push({
-    layer: 'lifecycle',
-    time: e.ts,
-    kind: e.kind,
-    outcome: e.outcome,
-    statusCode: e.status_code,
-    latencyMs: e.latency_ms,
-    error: e.error,
-    title: e.kind === 'fetch' && e.extra?.skill_id ? 'skill: ' + e.extra.skill_id : (e.node_id || '-'),
-  }));
-  (calls || []).forEach((c) => events.push({
-    layer: 'asset',
-    time: c.timestamp,
-    kind: c.action,
-    outcome: inferAssetOutcome(c.action),
-    title: c.asset_id || c.reason || '-',
-    meta: c.run_id ? 'run ' + c.run_id : null,
-    score: c.score,
-  }));
-  (atpProofs || []).forEach((p) => events.push({
-    layer: 'atp',
-    time: p.created_at || p.timestamp,
-    kind: 'proof_' + (p.status || 'pending'),
-    outcome: p.status === 'verified' || p.status === 'accepted' ? 'ok' : (p.status || 'pending'),
-    title: p.delivery_id || p.order_id || '-',
-    meta: (p.role || 'consumer') + (p.amount != null ? ' · ' + p.amount + ' credits' : ''),
-  }));
-  (atpOrders || []).forEach((o) => events.push({
-    layer: 'atp',
-    time: o.created_at || o.updated_at,
-    kind: 'order_' + (o.status || 'pending'),
-    outcome: o.status === 'completed' ? 'ok' : (o.status || 'pending'),
-    title: o.order_id || o.id || '-',
-    meta: (o.routing || '-') + (o.budget != null ? ' · ' + o.budget + ' credits' : ''),
-  }));
-  return events.sort((a, b) => new Date(b.time || 0) - new Date(a.time || 0));
-}
-
-function inferAssetOutcome(action) {
-  if (!action) return 'unknown';
-  if (action.endsWith('_hit') || action === 'asset_reuse' || action === 'asset_reference' || action === 'asset_publish') return 'ok';
-  if (action.endsWith('_miss') || action.endsWith('_skip')) return 'miss';
-  return action;
-}
-
-function summarizeHubActivity(events) {
-  const now = Date.now();
-  const last24h = events.filter((e) => Date.parse(e.time || 0) >= now - 24 * 60 * 60 * 1000);
-  const heartbeats = events.filter((e) => e.layer === 'lifecycle' && e.kind === 'heartbeat');
-  const heartbeatOk = heartbeats.filter((e) => e.outcome === 'ok' || e.outcome === 'recovered');
-  const heartbeatHealthPct = heartbeats.length === 0 ? null : Math.round((heartbeatOk.length / heartbeats.length) * 100);
-  const latencies = events.filter((e) => typeof e.latencyMs === 'number').map((e) => e.latencyMs);
-  const lastHelloOk = events.find((e) => e.layer === 'lifecycle' && e.kind === 'hello' && e.outcome === 'ok')?.time;
-  const lastHeartbeatOk = events.find((e) => e.layer === 'lifecycle' && e.kind === 'heartbeat' && (e.outcome === 'ok' || e.outcome === 'recovered'))?.time;
-  const assetEvents = events.filter((e) => e.layer === 'asset');
-  const assetHits = assetEvents.filter((e) => e.outcome === 'ok').length;
-  const assetHitRate = assetEvents.length === 0 ? null : Math.round((assetHits / assetEvents.length) * 100);
-
-  return {
-    total: events.length,
-    last24h: last24h.length,
-    heartbeatHealthPct,
-    assetHitRate,
-    lastHelloOk,
-    lastHeartbeatOk,
-    latencyP50: percentile(latencies, 50),
-    latencyP95: percentile(latencies, 95),
-  };
-}
-
-function percentile(values, p) {
-  if (!values.length) return null;
-  const sorted = values.slice().sort((a, b) => a - b);
-  return sorted[Math.min(sorted.length - 1, Math.floor((sorted.length * p) / 100))];
-}
-
-function renderHubActivity(events, hasProxy) {
-  HUB_ACTIVITY_STATE.events = events;
-  HUB_ACTIVITY_STATE.hasProxy = !!hasProxy;
-  renderHubActivitySummary(summarizeHubActivity(events));
-  bindHubActivityFilters();
-  renderHubActivityTable();
-}
-
-function renderHubActivitySummary(s) {
-  const healthCls = s.heartbeatHealthPct == null ? '' : s.heartbeatHealthPct >= 95 ? 'success' : s.heartbeatHealthPct >= 70 ? 'pending' : 'failed';
-  const hitCls = s.assetHitRate == null ? '' : s.assetHitRate >= 50 ? 'success' : s.assetHitRate >= 20 ? 'pending' : 'failed';
-  $('hub-activity-summary').innerHTML =
-    statBox(t('interactions.stat.heartbeatHealth'), s.heartbeatHealthPct == null ? '—' : s.heartbeatHealthPct + '%', healthCls) +
-    statBox(t('interactions.stat.assetHitRate'), s.assetHitRate == null ? '—' : s.assetHitRate + '%', hitCls) +
-    statBox(t('interactions.stat.events24h'), String(s.last24h ?? 0)) +
-    statBox(t('interactions.stat.latency'), s.latencyP50 == null ? '—' : (s.latencyP50 + ' / ' + (s.latencyP95 ?? '—') + ' ms')) +
-    statBox(t('interactions.stat.lastHelloOk'), formatTime(s.lastHelloOk)) +
-    statBox(t('interactions.stat.lastHeartbeatOk'), formatTime(s.lastHeartbeatOk));
-}
-
-function bindHubActivityFilters() {
-  const bar = $('hub-activity-filters');
-  if (!bar) return;
-  bar.style.display = HUB_ACTIVITY_STATE.events.length ? 'flex' : 'none';
-  bar.querySelectorAll('[data-filter-layer]').forEach((btn) => {
-    if (btn._bound) return;
-    btn._bound = true;
-    btn.addEventListener('click', () => {
-      HUB_ACTIVITY_STATE.layer = btn.getAttribute('data-filter-layer');
-      bar.querySelectorAll('[data-filter-layer]').forEach((b) => b.classList.toggle('active', b === btn));
-      renderHubActivityTable();
-    });
-  });
-  const cb = $('hide-heartbeats');
-  if (cb && !cb._bound) {
-    cb._bound = true;
-    cb.checked = HUB_ACTIVITY_STATE.hideHeartbeats;
-    cb.addEventListener('change', () => {
-      HUB_ACTIVITY_STATE.hideHeartbeats = cb.checked;
-      renderHubActivityTable();
-    });
-  }
-}
-
-function renderHubActivityTable() {
-  const filtered = HUB_ACTIVITY_STATE.events.filter((e) => {
-    if (HUB_ACTIVITY_STATE.layer !== 'all' && e.layer !== HUB_ACTIVITY_STATE.layer) return false;
-    if (HUB_ACTIVITY_STATE.hideHeartbeats && e.layer === 'lifecycle' && e.kind === 'heartbeat' && (e.outcome === 'ok' || e.outcome === 'recovered')) return false;
-    return true;
-  }).slice(0, 150);
-
-  if (!filtered.length) {
-    $('hub-activity').innerHTML = HUB_ACTIVITY_STATE.events.length
-      ? '<p class="muted">' + esc(t('interactions.empty.filtered')) + '</p>'
-      : hubEmptyHint(HUB_ACTIVITY_STATE.hasProxy);
-    return;
-  }
-
-  const rows = filtered.map((e) => {
-    const ok = e.outcome === 'ok' || e.outcome === 'recovered';
-    const fail = e.outcome && (String(e.outcome).startsWith('fail') || String(e.outcome).startsWith('auth_failed') || String(e.outcome).startsWith('http_'));
-    const cls = ok ? 'ok' : fail ? 'fail' : 'neutral';
-    return '<tr class="' + cls + '">' +
-      '<td>' + esc(formatTime(e.time)) + '</td>' +
-      '<td><span class="pill ' + esc(e.layer) + '">' + esc(tAction(e.layer)) + '</span></td>' +
-      '<td><span class="pill ' + esc(e.kind || '-') + '">' + esc(tAction(e.kind) || '-') + '</span></td>' +
-      '<td><span class="status-indicator ' + (ok ? 'success' : fail ? 'failed' : 'unknown') + '"></span>' + esc(tStatus(e.outcome) || '-') + '</td>' +
-      // statusCode / latencyMs are SHOULD-be-numeric but the producer
-      // is the proxy daemon, which has historically leaked string
-      // shapes ("timeout", "n/a"). Bugbot caught the asymmetry: every
-      // other column on this row is esc()'d. Defensive escape here
-      // matches the rest of the renderer instead of trusting the
-      // proxy to never inject HTML chars.
-      '<td>' + esc(e.statusCode ?? '—') + '</td>' +
-      '<td>' + esc(e.latencyMs == null ? '—' : e.latencyMs + ' ms') + '</td>' +
-      '<td class="lifecycle-error">' + esc(e.title || '') + (e.meta ? ' <span class="muted small">' + esc(e.meta) + '</span>' : '') + (e.error ? ' <span class="status-failed">' + esc(e.error) + '</span>' : '') + '</td>' +
-      '</tr>';
-  }).join('');
-
-  $('hub-activity').innerHTML = '<table class="data-table lifecycle-table">' +
-    '<thead><tr>' +
-      '<th>' + esc(t('interactions.col.time')) + '</th>' +
-      '<th>' + esc(t('interactions.col.layer')) + '</th>' +
-      '<th>' + esc(t('interactions.col.kind')) + '</th>' +
-      '<th>' + esc(t('interactions.col.outcome')) + '</th>' +
-      '<th>' + esc(t('interactions.col.status')) + '</th>' +
-      '<th>' + esc(t('interactions.col.latency')) + '</th>' +
-      '<th>' + esc(t('interactions.col.detail')) + '</th>' +
-    '</tr></thead>' +
-    '<tbody>' + rows + '</tbody></table>';
-}
-
-function hubEmptyHint(hasProxy) {
-  if (hasProxy) {
-    return '<p class="muted">' + esc(t('interactions.empty.proxyRunning')) + '</p>';
-  }
-  return '<p class="muted">' + t('interactions.empty.noProxy') + '</p>';
-}
-
-function renderAgentStream(mailbox, sessions, dms) {
-  const items = [];
-  (mailbox || []).forEach((m) => items.push({
-    kind: 'mailbox',
-    time: m.timestamp,
-    action: 'mb_' + (m.direction || 'msg'),
-    title: m.summary || m.type || '-',
-    meta: (m.type || '-') + ' · ' + (m.status || '-'),
-    detail: m,
-  }));
-  (sessions || []).forEach((s) => items.push({
-    kind: 'session',
-    time: s.created_at || s.updated_at,
-    action: 'session_' + (s.status || 'active'),
-    title: s.session_id || s.id || '-',
-    meta: 'with ' + (s.peer || s.peer_node_id || '-'),
-    detail: s,
-  }));
-  (dms || []).forEach((d) => items.push({
-    kind: 'dm',
-    time: d.created_at,
-    action: 'dm_' + (d.direction || 'msg'),
-    title: d.title || d.message_id || '-',
-    meta: (d.from || '-') + ' → ' + (d.to || '-'),
-    detail: d,
-  }));
-
-  if (!items.length) {
-    $('agent-stream').innerHTML = '<p class="muted">' + esc(t('interactions.empty.noAgent')) + '</p>';
-    return;
-  }
-  items.sort((a, b) => new Date(b.time || 0) - new Date(a.time || 0));
-  $('agent-stream').innerHTML = '<ul class="stream-list">' + items.slice(0, 60).map(streamItem).join('') + '</ul>';
-}
-
-function streamItem(item) {
-  return '<li class="stream-item">' +
-    '<div class="stream-head">' +
-      '<span class="pill ' + esc(item.action) + '">' + esc(item.action) + '</span>' +
-      '<span class="muted small">' + esc(formatTime(item.time)) + '</span>' +
-    '</div>' +
-    '<div class="stream-title">' + esc(item.title) + '</div>' +
-    '<div class="muted small">' + esc(item.meta) + '</div>' +
-    '</li>';
-}
-
-function renderInteractionCharts(calls, atpProofs, mailbox) {
-  const textColor = chartTextColor();
-  const isDark = isDarkMode();
-
-  const actionCounts = {};
-  (calls || []).forEach((c) => { actionCounts[c.action] = (actionCounts[c.action] || 0) + 1; });
-  ensureChart('hubActionChart')?.setOption({
-    tooltip: { trigger: 'item' },
-    series: [{
-      type: 'pie', radius: ['40%', '70%'],
-      itemStyle: { borderRadius: 4, borderColor: isDark ? '#181b1f' : '#fff', borderWidth: 2 },
-      label: { show: false },
-      labelLine: { show: false },
-      data: Object.keys(actionCounts).length
-        ? Object.entries(actionCounts).map(([name, value]) => ({ name, value }))
-        : [{ name: 'no calls', value: 1, itemStyle: { color: '#444' } }],
-    }],
-  });
-
-  const dayBuckets = bucketByDay([...(calls || []), ...(atpProofs || []), ...(mailbox || [])], 30);
-  ensureChart('activityChart')?.setOption({
-    tooltip: { trigger: 'axis' },
-    grid: { left: '3%', right: '4%', bottom: '8%', containLabel: true },
-    xAxis: { type: 'category', data: dayBuckets.labels, axisLabel: { color: textColor, fontSize: 10 } },
-    yAxis: { type: 'value', axisLabel: { color: textColor }, splitLine: { lineStyle: { color: isDark ? '#2c3235' : '#e4e7eb' } } },
-    series: [{
-      type: 'line', data: dayBuckets.values, smooth: true, areaStyle: { opacity: 0.18, color: '#3274d9' },
-      lineStyle: { color: '#3274d9', width: 2 }, itemStyle: { color: '#3274d9' },
-    }],
-  });
-
-  const typeCounts = {};
-  (mailbox || []).forEach((m) => { typeCounts[m.type || 'unknown'] = (typeCounts[m.type || 'unknown'] || 0) + 1; });
-  ensureChart('mailboxChart')?.setOption({
-    tooltip: { trigger: 'axis' },
-    grid: { left: '3%', right: '4%', bottom: '5%', containLabel: true },
-    xAxis: { type: 'value', axisLabel: { color: textColor }, splitLine: { lineStyle: { color: isDark ? '#2c3235' : '#e4e7eb' } } },
-    yAxis: { type: 'category', data: Object.keys(typeCounts).length ? Object.keys(typeCounts) : ['no messages'], axisLabel: { color: textColor } },
-    series: [{
-      type: 'bar',
-      data: Object.keys(typeCounts).length ? Object.values(typeCounts) : [0],
-      itemStyle: { color: '#28a745', borderRadius: [0, 4, 4, 0] },
-    }],
-  });
-}
-
-function bucketByDay(items, days) {
-  const today = new Date(); today.setHours(0,0,0,0);
-  const labels = [], counts = new Array(days).fill(0);
-  for (let i = days - 1; i >= 0; i--) {
-    const d = new Date(today); d.setDate(d.getDate() - i);
-    labels.push((d.getMonth()+1) + '/' + d.getDate());
-  }
-  items.forEach((it) => {
-    const t = new Date(it.timestamp || it.time || it.created_at || 0);
-    if (isNaN(t.getTime())) return;
-    t.setHours(0,0,0,0);
-    const diff = Math.round((today - t) / 86400000);
-    if (diff >= 0 && diff < days) counts[days - 1 - diff]++;
-  });
-  return { labels, values: counts };
-}
-
-function renderProxySnapshots(snapshots) {
-  if (!snapshots || !Object.keys(snapshots).length) {
-    $('proxy-snapshots').innerHTML = '<p class="muted snapshot-empty">' + t('interactions.empty.proxyNotRunning') + '</p>';
-    return;
-  }
-  $('proxy-snapshots').innerHTML = Object.entries(snapshots).map(([key, snap]) => {
-    const ok = snap?.ok;
-    const dot = '<span class="status-indicator ' + (ok ? 'status-success' : 'status-failed') + '"></span>';
-    const detail = ok && snap.body
-      ? (Array.isArray(snap.body) ? snap.body.length + ' ' + t('interactions.snapshot.items') : Object.keys(snap.body).length + ' ' + t('interactions.snapshot.fields'))
-      : (snap?.error || t('interactions.snapshot.unavailable'));
-    return '<div class="snapshot-card"><div>' + dot + '<strong>' + esc(key) + '</strong></div>' +
-      '<div class="muted small">' + esc(detail) + '</div></div>';
-  }).join('');
-}
-
-async function loadInteractions() {
-  $('hub-activity').innerHTML = '<p class="muted">' + esc(t('common.loading')) + '</p>';
-  $('agent-stream').innerHTML = '<p class="muted">' + esc(t('common.loading')) + '</p>';
-  try {
-    // Lifecycle is optional: not every build ships /webui/lifecycle (the
-    // observer-side module is only present when the proxy daemon is wired
-    // in). Treat a missing/erroring lifecycle endpoint as "no data" so the
-    // rest of the Hub Activity panel still renders instead of failing the
-    // whole tab with "Failed: Not found".
-    const [callsResult, interactions, lifecycle] = await Promise.all([
-      api('/webui/assets/calls?limit=500'),
-      api('/webui/interactions?last=200'),
-      api('/webui/lifecycle?last=500').catch(() => ({ events: [] })),
-    ]);
-    const calls = callsResult.data || [];
-    const proofs = interactions.proxySnapshots?.atpProofs?.body?.proofs || interactions.proxySnapshots?.atpProofs?.body || [];
-    const orders = interactions.proxySnapshots?.atpProofs?.body?.orders || [];
-    const sessions = interactions.proxySnapshots?.sessions?.body?.sessions || interactions.proxySnapshots?.sessions?.body || [];
-    const dms = interactions.proxySnapshots?.dms?.body?.dms || interactions.proxySnapshots?.dms?.body || [];
-    const mailbox = interactions.mailbox?.data || [];
-    const lifecycleEvents = lifecycle?.events || [];
-
-    const unified = buildHubActivityEvents(
-      calls,
-      Array.isArray(proofs) ? proofs : [],
-      Array.isArray(orders) ? orders : [],
-      lifecycleEvents,
-    );
-    renderHubActivity(unified, interactions.proxy?.running);
-    renderAgentStream(mailbox, Array.isArray(sessions) ? sessions : [], Array.isArray(dms) ? dms : []);
-    renderInteractionCharts(calls, Array.isArray(proofs) ? proofs : [], mailbox);
-    renderProxySnapshots(interactions.proxySnapshots);
-  } catch (err) {
-    $('hub-activity').innerHTML = '<p class="status-failed">' + esc(t('common.failedPrefix')) + esc(err.message) + '</p>';
-  }
-}
-
-function statBox(label, value, cls) {
-  return '<div class="stat-box ' + (cls || '') + '">' +
-    '<div class="stat-label">' + esc(label) + '</div>' +
-    '<div class="stat-value">' + esc(value) + '</div>' +
-    '</div>';
-}
-`;

package/src/webui/client/clientJs/overview.js

@@ -1,152 +0,0 @@
-'use strict';
-
-exports.overviewJs = `
-function renderStatus(status) {
-  const lastRun = status.lastRun || {};
-  $('status').innerHTML = kv([
-    [t('overview.status.mode'), status.mode],
-    [t('overview.status.proxy'), status.proxy?.running ? t('common.running') : t('common.notRunning')],
-    [t('overview.status.heartbeat'), status.heartbeat?.phase || t('common.idle')],
-    [t('overview.status.lastRun'), lastRun.run_id || '-'],
-    [t('overview.status.lastActivity'), formatTime(lastRun.finished_at || lastRun.created_at)],
-  ]);
-}
-
-function renderSafety(safety) {
-  const warnings = safety.warnings?.length
-    ? '<ul style="margin-top:8px;padding-left:20px;color:var(--warning)">' + safety.warnings.map((w) => '<li>' + esc(w) + '</li>').join('') + '</ul>'
-    : '<p style="margin-top:8px;color:var(--success)">' + esc(t('overview.safety.noWarnings')) + '</p>';
-  $('safety').innerHTML = '<div style="margin-bottom:8px"><span class="status-indicator ' + (safety.safeMode ? 'status-success' : 'status-warning') + '"></span><strong>' + esc(safety.safeMode ? t('overview.safety.safeMode') : t('overview.safety.reviewRequired')) + '</strong></div>' + kv([
-    [t('overview.safety.autobuy'), safety.autobuyEnabled],
-    [t('overview.safety.autoPublish'), safety.autoPublishEnabled],
-    [t('overview.safety.validator'), safety.validatorEnabled],
-    [t('overview.safety.traceLevel'), safety.traceLevel],
-  ]) + warnings;
-}
-
-function renderInteractions(interactions) {
-  $('interactions').innerHTML = kv([
-    [t('overview.interactions.proxy'), interactions.proxy?.running ? interactions.proxy.url : t('common.notRunning')],
-    [t('overview.interactions.mailbox'), interactions.mailbox?.pagination?.totalItems || 0],
-    [t('overview.interactions.taskMetrics'), interactions.proxySnapshots?.taskMetrics?.ok ? t('common.available') : t('common.notAvailable')],
-    [t('overview.interactions.sessions'), interactions.proxySnapshots?.sessions?.ok ? t('common.available') : t('common.notAvailable')],
-  ]);
-}
-
-function renderOverviewCharts(assets) {
-  const isDark = isDarkMode();
-  const textColor = chartTextColor();
-  const palette = ['#3274d9', '#28a745', '#ffc107', '#dc3545', '#6f42c1', '#17a2b8'];
-
-  ensureChart('genesChart')?.setOption({
-    color: palette,
-    tooltip: { trigger: 'item' },
-    legend: { bottom: 0, textStyle: { color: textColor } },
-    series: [{
-      type: 'pie',
-      radius: ['45%', '72%'],
-      itemStyle: { borderRadius: 4, borderColor: isDark ? '#181b1f' : '#fff', borderWidth: 2 },
-      label: { show: false },
-      labelLine: { show: false },
-      data: Object.entries(assets.genesByCategory || {}).map(([name, value]) => ({ name, value })),
-    }],
-  });
-
-  const capsules = Object.entries(assets.capsulesByOutcome || {});
-  ensureChart('capsulesChart')?.setOption({
-    color: palette,
-    tooltip: { trigger: 'item' },
-    legend: { bottom: 0, textStyle: { color: textColor } },
-    series: [{
-      type: 'pie',
-      radius: ['45%', '72%'],
-      itemStyle: { borderRadius: 4, borderColor: isDark ? '#181b1f' : '#fff', borderWidth: 2 },
-      label: { show: false },
-      labelLine: { show: false },
-      data: capsules.length ? capsules.map(([name, value]) => ({ name, value })) : [{ name: 'no capsules yet', value: 1, itemStyle: { color: '#444' } }],
-    }],
-  });
-
-  const calls = Object.entries(assets.assetCallsByAction || {});
-  ensureChart('callsChart')?.setOption({
-    color: palette,
-    tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
-    grid: { left: '3%', right: '4%', bottom: '5%', containLabel: true },
-    xAxis: { type: 'value', splitLine: { lineStyle: { color: isDark ? '#2c3235' : '#e4e7eb' } }, axisLabel: { color: textColor } },
-    yAxis: { type: 'category', data: calls.length ? calls.map(d => d[0]) : ['no calls'], axisLabel: { color: textColor } },
-    series: [{
-      type: 'bar',
-      data: calls.length ? calls.map(d => d[1]) : [0],
-      itemStyle: { color: '#3274d9', borderRadius: [0, 4, 4, 0] },
-    }],
-  });
-}
-
-function renderLatestRun(runs) {
-  const list = runs.data || [];
-  if (!list.length) {
-    $('latest-run').innerHTML = '<p class="muted">' + esc(t('overview.run.empty')) + '</p>';
-    return;
-  }
-  const run = list[0];
-  // Build the <dl> manually: only the Status value contains real HTML
-  // (the status-indicator span); other values are plain text and go
-  // through esc(). Avoids the kv()+partial-replace dance that left
-  // &quot; / &gt; un-restored and broke the indicator render. Cursor
-  // Bugbot Medium-severity finding on PR #532 -- see test guard for
-  // 'kv-then-partial-replace antipattern' in test/webuiServer.test.js.
-  const rows = [
-    [t('overview.run.id'), esc(run.runId)],
-    [t('overview.run.status'), '<span class="status-indicator ' + getStatusClass(run.status) + '"></span>' + esc(tStatus(run.status))],
-    [t('overview.run.selectedGene'), esc(run.selectedGeneId || '-')],
-    [t('overview.run.validation'), esc(validationDisplay(run))],
-    [t('overview.run.updated'), esc(formatTime(run.updatedAt))],
-    [t('overview.run.requiresConfirmation'), run.requiresConfirmation ? t('common.yes') : t('common.no')],
-  ];
-  $('latest-run').innerHTML = '<dl>' +
-    rows.map(([k, v]) => '<dt>' + esc(k) + '</dt><dd>' + v + '</dd>').join('') +
-    '</dl>';
-}
-
-function validationDisplay(run) {
-  if (run.validationResult === 'pass') return t('overview.validation.pass');
-  if (run.validationResult === 'fail') return t('overview.validation.fail');
-  if (run.status === 'review_pending') return t('overview.validation.pendingReview');
-  if (run.status === 'running' || run.status === 'pending') return t('overview.validation.inProgress');
-  if (run.status === 'failed') return t('overview.validation.notRun');
-  return t('overview.validation.notRun');
-}
-
-function renderSkills(skills) {
-  if (!skills.exists || !skills.items.length) {
-    $('skills').innerHTML = '<p class="muted">' + esc(t('overview.skills.empty')) + '</p>' +
-      '<p class="muted small">' + t('overview.skills.hint') + '</p>';
-    return;
-  }
-  $('skills').innerHTML = '<ul class="skill-list">' + skills.items.map((skill) =>
-    '<li><strong>' + esc(skill.name) + '</strong>' +
-    (skill.description ? '<p>' + esc(skill.description) + '</p>' : '') +
-    '<small class="muted">' + skill.fileCount + ' ' + esc(t('overview.skills.files')) + ' · ' + esc(skill.docFile || t('overview.skills.noDoc')) + '</small></li>'
-  ).join('') + '</ul>';
-}
-
-async function loadOverview() {
-  try {
-    const [status, runs, assets, interactions, skills] = await Promise.all([
-      api('/webui/status'),
-      api('/webui/runs?limit=20'),
-      api('/webui/assets'),
-      api('/webui/interactions?limit=20'),
-      api('/webui/skills'),
-    ]);
-    renderStatus(status);
-    renderSafety(status.safety || {});
-    renderInteractions(interactions);
-    renderOverviewCharts(assets);
-    renderLatestRun(runs);
-    renderSkills(skills);
-  } catch (err) {
-    console.error(err);
-  }
-}
-`;