@evomap/evolver 1.80.6 → 1.80.8

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

@@ -0,0 +1,285 @@
+'use strict';
+
+exports.personalityJs = `
+function renderPersonality(personality, memoryGraph) {
+  const current = personality.current || {};
+  const traits = ['rigor', 'creativity', 'risk_tolerance', 'caution', 'curiosity', 'persistence'];
+  const indicators = traits.filter((t) => current[t] !== undefined).map((name) => ({ name, max: 1 }));
+  const values = indicators.map((ind) => Number(current[ind.name]) || 0);
+
+  const textColor = chartTextColor();
+  if (indicators.length) {
+    ensureChart('personalityChart')?.setOption({
+      tooltip: {},
+      radar: {
+        indicator: indicators,
+        axisName: { color: textColor },
+        splitLine: { lineStyle: { color: isDarkMode() ? '#2c3235' : '#e4e7eb' } },
+        splitArea: { areaStyle: { color: ['rgba(50, 116, 217, 0.04)', 'rgba(50, 116, 217, 0.08)'] } },
+      },
+      series: [{
+        type: 'radar',
+        data: [{ value: values, name: 'current', areaStyle: { color: 'rgba(50, 116, 217, 0.4)' }, lineStyle: { color: '#3274d9' } }],
+      }],
+    });
+  } else {
+    $('personalityChart').innerHTML = '<p class="muted" style="padding:40px;text-align:center">' + esc(t('personality.empty.chart')) + '</p>';
+  }
+
+  $('personality-detail').innerHTML = current && Object.keys(current).length
+    ? kv(Object.entries(current).slice(0, 12))
+    : '<p class="muted">' + esc(t('personality.empty.detail')) + '</p>';
+
+  renderMemoryGraph(memoryGraph);
+}
+
+const MEMORY_GRAPH_KIND_COLORS = {
+  signal: '#3274d9',
+  hypothesis: '#17a2b8',
+  attempt: '#ffc107',
+  outcome: '#28a745',
+  reflection: '#6f42c1',
+};
+
+function memoryGraphCategories() {
+  return [
+    { name: t('personality.cat.event') },
+    { name: t('personality.cat.gene') },
+    { name: t('personality.cat.signal') },
+    { name: t('personality.cat.outcome') },
+    { name: t('personality.cat.mutation') },
+  ];
+}
+
+function shortenGeneId(geneId) {
+  if (!geneId) return '';
+  return String(geneId).replace(/^gene_gep_/, '').replace(/^gene_/, '').slice(0, 18);
+}
+
+function shortTime(ts) {
+  if (!ts) return '';
+  const d = new Date(ts);
+  if (isNaN(d.getTime())) return '';
+  return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
+}
+
+function buildMemoryGraphData(items) {
+  const nodes = new Map();
+  const links = [];
+
+  const upsert = (id, init) => {
+    if (!id) return null;
+    if (!nodes.has(id)) {
+      nodes.set(id, { id, refCount: 1, ...init });
+    } else {
+      const existing = nodes.get(id);
+      existing.refCount += 1;
+      existing.symbolSize = Math.min(48, (existing.symbolSize || 20) + 1.5);
+    }
+    return nodes.get(id);
+  };
+
+  items.forEach((evt) => {
+    try {
+      addEventNode(evt, upsert, links);
+    } catch (_) { /* skip malformed entry */ }
+  });
+
+  return { nodes: Array.from(nodes.values()), links };
+}
+
+function addEventNode(evt, upsert, links) {
+  const kind = evt.kind || 'event';
+  const eventId = 'evt_' + (evt.id || Math.random().toString(36).slice(2, 8));
+  const outcomeStatus = evt.outcome && (evt.outcome.status || evt.outcome.predicted_outcome?.status);
+  const score = evt.outcome && (evt.outcome.score ?? evt.outcome.predicted_outcome?.score);
+
+  const eventColor = kind === 'outcome' && outcomeStatus
+    ? (outcomeStatus === 'success' ? '#28a745' : outcomeStatus === 'failed' ? '#dc3545' : '#ffc107')
+    : (MEMORY_GRAPH_KIND_COLORS[kind] || '#3274d9');
+
+  const tsLabel = shortTime(evt.ts);
+  const eventLabel = tsLabel ? kind + ' · ' + tsLabel : kind;
+
+  upsert(eventId, {
+    name: eventLabel,
+    symbolSize: kind === 'outcome' ? 30 : 24,
+    itemStyle: { color: eventColor, borderColor: 'rgba(255,255,255,0.5)', borderWidth: 1 },
+    category: 0,
+    nodeKind: 'event',
+    info: { kind, ts: evt.ts, eventId: evt.id, outcomeStatus, score, geneId: evt.gene?.id, mutationCategory: evt.mutation?.category, signals: extractSignals(evt) },
+  });
+
+  linkGene(evt, eventId, upsert, links);
+  linkSignals(evt, eventId, upsert, links);
+  linkOutcome(evt, eventId, upsert, links, outcomeStatus, score);
+  linkMutation(evt, eventId, upsert, links);
+}
+
+function extractSignals(evt) {
+  if (evt.signal && Array.isArray(evt.signal.signals)) return evt.signal.signals;
+  if (Array.isArray(evt.signals)) return evt.signals;
+  return [];
+}
+
+function linkGene(evt, eventId, upsert, links) {
+  const geneId = evt.gene && (evt.gene.id || evt.gene);
+  if (typeof geneId !== 'string') return;
+  const nodeId = 'g_' + geneId;
+  upsert(nodeId, {
+    name: shortenGeneId(geneId),
+    symbolSize: 26,
+    itemStyle: { color: '#28a745' },
+    category: 1,
+    nodeKind: 'gene',
+    info: { geneId, category: evt.gene?.category },
+  });
+  links.push({ source: eventId, target: nodeId });
+}
+
+function linkSignals(evt, eventId, upsert, links) {
+  const signals = extractSignals(evt);
+  signals.slice(0, 4).forEach((sig) => {
+    const nodeId = 's_' + sig;
+    upsert(nodeId, {
+      name: sig,
+      symbolSize: 20,
+      itemStyle: { color: '#ffc107' },
+      category: 2,
+      nodeKind: 'signal',
+      info: { signal: sig },
+    });
+    links.push({ source: nodeId, target: eventId, lineStyle: { type: 'dashed' } });
+  });
+}
+
+function linkOutcome(evt, eventId, upsert, links, outcomeStatus, score) {
+  if (typeof outcomeStatus !== 'string') return;
+  const nodeId = 'o_' + outcomeStatus;
+  const color = outcomeStatus === 'success' ? '#28a745' : outcomeStatus === 'failed' ? '#dc3545' : '#ffc107';
+  upsert(nodeId, {
+    name: outcomeStatus,
+    symbolSize: 24,
+    itemStyle: { color },
+    category: 3,
+    nodeKind: 'outcome',
+    info: { status: outcomeStatus, lastScore: score },
+  });
+  links.push({ source: eventId, target: nodeId });
+}
+
+function linkMutation(evt, eventId, upsert, links) {
+  const category = evt.mutation && evt.mutation.category;
+  if (typeof category !== 'string') return;
+  const nodeId = 'm_' + category;
+  upsert(nodeId, {
+    name: category,
+    symbolSize: 22,
+    itemStyle: { color: '#dc3545' },
+    category: 4,
+    nodeKind: 'mutation',
+    info: { category },
+  });
+  links.push({ source: eventId, target: nodeId, lineStyle: { type: 'dotted' } });
+}
+
+function memoryGraphTooltip(params) {
+  if (params.dataType === 'edge') return '';
+  const d = params.data || {};
+  const info = d.info || {};
+  const refRow = d.refCount > 1 ? mgRow(t('personality.tooltip.referenced'), d.refCount + ' ' + t('personality.tooltip.referencedTimes')) : '';
+  const title = '<div style="font-weight:600;margin-bottom:6px">' + esc(d.nodeKind || 'node') + ' · ' + esc(d.name) + '</div>';
+
+  if (d.nodeKind === 'event') {
+    return title + mgTooltipBody([
+      [t('personality.tooltip.kind'), info.kind],
+      [t('personality.tooltip.time'), formatTime(info.ts)],
+      [t('personality.tooltip.eventId'), info.eventId],
+      [t('personality.tooltip.gene'), info.geneId ? shortenGeneId(info.geneId) : null],
+      [t('personality.tooltip.signals'), info.signals?.length ? info.signals.join(', ') : null],
+      [t('personality.tooltip.outcome'), info.outcomeStatus ? tStatus(info.outcomeStatus) : null],
+      [t('personality.tooltip.score'), info.score != null ? info.score : null],
+      [t('personality.tooltip.mutation'), info.mutationCategory],
+    ]) + refRow;
+  }
+  if (d.nodeKind === 'gene') return title + mgTooltipBody([[t('personality.tooltip.geneId'), info.geneId], [t('personality.tooltip.category'), info.category]]) + refRow;
+  if (d.nodeKind === 'signal') return title + mgTooltipBody([[t('personality.tooltip.signal'), info.signal]]) + refRow;
+  if (d.nodeKind === 'outcome') return title + mgTooltipBody([[t('personality.tooltip.status'), tStatus(info.status)], [t('personality.tooltip.lastScore'), info.lastScore]]) + refRow;
+  if (d.nodeKind === 'mutation') return title + mgTooltipBody([[t('personality.tooltip.category'), info.category]]) + refRow;
+  return title + refRow;
+}
+
+function mgTooltipBody(rows) {
+  const filtered = rows.filter(([, v]) => v != null && v !== '');
+  if (!filtered.length) return '';
+  return '<div style="font-size:12px;line-height:1.5">' +
+    filtered.map(([k, v]) => mgRow(k, v)).join('') +
+    '</div>';
+}
+
+function mgRow(label, value) {
+  return '<div><span style="color:#8e99a4">' + esc(label) + ':</span> ' + esc(value) + '</div>';
+}
+
+function renderMemoryGraph(graph) {
+  const isDark = isDarkMode();
+  const textColor = chartTextColor();
+  if (!graph.exists || !graph.items.length) {
+    $('memory-graph-chart').innerHTML = '<p class="muted" style="padding:40px;text-align:center">' + esc(t('personality.empty.graph')) + '</p>';
+    return;
+  }
+
+  const { nodes, links } = buildMemoryGraphData(graph.items.slice(0, 100));
+  const categories = memoryGraphCategories();
+
+  ensureChart('memory-graph-chart')?.setOption({
+    tooltip: {
+      trigger: 'item',
+      enterable: true,
+      backgroundColor: isDark ? 'rgba(24,27,31,0.95)' : 'rgba(255,255,255,0.98)',
+      borderColor: isDark ? '#2c3235' : '#e4e7eb',
+      textStyle: { color: textColor, fontSize: 12 },
+      extraCssText: 'max-width: 320px; box-shadow: 0 4px 12px rgba(0,0,0,0.15);',
+      formatter: memoryGraphTooltip,
+    },
+    legend: { data: categories.map((c) => c.name), top: 0, textStyle: { color: textColor } },
+    series: [{
+      type: 'graph',
+      layout: 'force',
+      data: nodes,
+      links,
+      categories,
+      roam: true,
+      draggable: true,
+      cursor: 'grab',
+      label: {
+        show: true,
+        fontSize: 10,
+        color: textColor,
+        position: 'right',
+        formatter: (p) => (p.data?.refCount > 1 ? p.data.name + ' ×' + p.data.refCount : p.data?.name || ''),
+      },
+      emphasis: {
+        focus: 'adjacency',
+        scale: 1.1,
+        label: { show: true, fontWeight: 'bold' },
+        lineStyle: { width: 3 },
+      },
+      lineStyle: { color: isDark ? '#3a4045' : '#d8dde2', width: 1, curveness: 0.1, opacity: 0.7 },
+      force: { repulsion: 180, edgeLength: [60, 120], gravity: 0.06, friction: 0.6 },
+    }],
+  });
+}
+
+async function loadPersonality() {
+  try {
+    const [personality, graph] = await Promise.all([
+      api('/webui/personality'),
+      api('/webui/memory-graph?limit=100'),
+    ]);
+    renderPersonality(personality, graph);
+  } catch (err) {
+    console.error(err);
+  }
+}
+`;

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

@@ -0,0 +1,330 @@
+'use strict';
+
+exports.pipelinesJs = `
+function renderRuns(result) {
+  const runs = result.data || [];
+  const tbody = document.querySelector('#runsTable tbody');
+  if (!runs.length) {
+    tbody.innerHTML = '<tr><td colspan="5" style="text-align:center;color:var(--text-muted)">' + esc(t('pipelines.runs.empty')) + '</td></tr>';
+    renderScoreTrend([]);
+    return;
+  }
+  tbody.innerHTML = runs.map((run) =>
+    '<tr data-run="' + esc(run.runId) + '">' +
+    '<td><strong>' + esc(run.runId) + '</strong></td>' +
+    '<td><span class="status-indicator ' + getStatusClass(run.status) + '"></span>' + esc(tStatus(run.status)) + '</td>' +
+    '<td>' + esc(run.selectedGeneId || '-') + '</td>' +
+    '<td>' + scoreBar(run.score) + '</td>' +
+    '<td>' + esc(formatTime(run.updatedAt)) + '</td>' +
+    '</tr>'
+  ).join('');
+  document.querySelectorAll('#runsTable tbody tr[data-run]').forEach((tr) => {
+    tr.addEventListener('click', () => loadRun(tr.getAttribute('data-run')));
+  });
+  renderScoreTrend(runs);
+}
+
+function validationDimensionLabel(d) {
+  // Validation dimensions ride on stable enum tokens ('stable_no_error',
+  // 'heuristic_delta', etc). Look up a localized label; fall back to the
+  // raw token so unknown dimensions still render.
+  const key = 'pipelines.dim.' + d;
+  return I18N_DICT[key] ? t(key) : d;
+}
+
+function renderValidationBlock(validation, runStatus) {
+  if (!validation) {
+    const hint = runStatus === 'review_pending'
+      ? t('pipelines.detail.validation.hint.reviewPending')
+      : runStatus === 'running' || runStatus === 'pending'
+        ? t('pipelines.detail.validation.hint.running')
+        : t('pipelines.detail.validation.hint.none');
+    return '<div class="detail-block"><h4>' + esc(t('pipelines.detail.validation.title')) + '</h4><p class="muted small">' + esc(hint) + '</p></div>';
+  }
+  const score = typeof validation.score === 'number' ? validation.score : null;
+  const statusCls = validation.status === 'success' ? 'success' : validation.status === 'failed' ? 'failed' : 'unknown';
+  const scoreColor = score === null ? '#888' : score >= 0.7 ? '#28a745' : score >= 0.5 ? '#ffc107' : '#dc3545';
+  const dims = (validation.dimensions || []).map((d) =>
+    '<span class="pill validation-dim">' + esc(validationDimensionLabel(d)) + '</span>'
+  ).join('') || '<span class="muted small">' + esc(t('pipelines.detail.validation.noDimensions')) + '</span>';
+
+  let html = '<div class="detail-block validation-block"><h4>' + esc(t('pipelines.detail.validation.title')) + '</h4>';
+  html += '<div class="validation-summary">' +
+    '<div class="validation-status"><span class="status-indicator ' + statusCls + '"></span>' +
+      '<strong>' + esc(tStatus(validation.status || 'unknown')) + '</strong>' +
+    '</div>';
+  if (score !== null) {
+    html += '<div class="validation-score-wrap">' +
+      '<div class="validation-score-label">' + esc(t('pipelines.detail.validation.score')) + '</div>' +
+      '<div class="score-bar score-bar-lg">' +
+        '<div class="score-bar-fill" style="width:' + (score * 100).toFixed(0) + '%;background:' + scoreColor + '"></div>' +
+        '<span class="score-bar-text">' + (score * 100).toFixed(1) + '%</span>' +
+      '</div></div>';
+  }
+  html += '</div>';
+  html += '<div class="validation-dims"><span class="muted small">' + esc(t('pipelines.detail.validation.dimensions')) + '</span> ' + dims + '</div>';
+  if (validation.observedSignals && validation.observedSignals.length) {
+    html += '<div class="validation-observed"><span class="muted small">' + esc(t('pipelines.detail.validation.observed')) + '</span> ' +
+      pillList(validation.observedSignals, 'signal') + '</div>';
+  }
+  if (validation.predictive) {
+    const entries = Object.entries(validation.predictive).slice(0, 6);
+    html += '<details class="validation-predictive"><summary>' + esc(t('pipelines.detail.validation.predictive')) + '</summary>' + kv(entries) + '</details>';
+  }
+  if (validation.timestamp) {
+    html += '<p class="muted small" style="margin-top:8px">' + esc(t('pipelines.detail.validation.validatedAt')) + esc(formatTime(validation.timestamp)) + '</p>';
+  }
+  html += '</div>';
+  return html;
+}
+
+function scoreBar(score) {
+  if (typeof score !== 'number') return '<span class="muted small">—</span>';
+  const pct = Math.round(score * 100);
+  const color = score >= 0.7 ? '#28a745' : score >= 0.5 ? '#ffc107' : '#dc3545';
+  return '<div class="score-bar" title="' + score.toFixed(3) + '">' +
+    '<div class="score-bar-fill" style="width:' + pct + '%;background:' + color + '"></div>' +
+    '<span class="score-bar-text">' + pct + '%</span></div>';
+}
+
+function renderScoreTrend(runs) {
+  const el = document.getElementById('scoreTrendChart');
+  if (!el) return;
+  const scored = runs.filter((r) => typeof r.score === 'number')
+    .sort((a, b) => new Date(a.finishedAt || a.updatedAt) - new Date(b.finishedAt || b.updatedAt));
+  if (!scored.length) {
+    // Dispose any prior chart bound to this element so the empty-state
+    // innerHTML write doesn't collide with ECharts owning the canvas.
+    // Otherwise the next non-empty render would reuse a dead instance
+    // and ECharts would warn about re-initializing an active container.
+    if (state.charts['scoreTrendChart']) {
+      state.charts['scoreTrendChart'].dispose();
+      delete state.charts['scoreTrendChart'];
+    }
+    el.innerHTML = '<p class="muted small" style="padding:24px 0;text-align:center">' + esc(t('pipelines.chart.scoreTrend.empty')) + '</p>';
+    return;
+  }
+  // Transitioning from empty-state to chart: the empty <p> left in the
+  // container has to go before ensureChart's first init, otherwise
+  // ECharts measures the <p> as its viewport.
+  if (!state.charts['scoreTrendChart']) el.innerHTML = '';
+  // Use ensureChart so the instance is tracked in state.charts and gets
+  // resized on window resize / disposed on theme + locale toggle, same
+  // as every other chart on the page.
+  const chart = ensureChart('scoreTrendChart');
+  const textColor = chartTextColor();
+  chart.setOption({
+    grid: { left: 50, right: 20, top: 20, bottom: 30 },
+    tooltip: {
+      trigger: 'axis',
+      // ECharts renders the formatter return value as HTML, so every
+      // dynamic field that originates from a run record must be esc()'d
+      // (run IDs and gene IDs are user/agent-supplied strings that have
+      // historically contained '/' and other HTML-meaningful chars).
+      formatter: (params) => {
+        const p = params[0];
+        const r = scored[p.dataIndex];
+        return '<strong>' + esc(r.runId) + '</strong><br/>' +
+          esc(t('pipelines.col.gene')) + ': ' + esc(r.selectedGeneId || '-') + '<br/>' +
+          esc(t('pipelines.col.score')) + ': <strong>' + esc((r.score || 0).toFixed(3)) + '</strong><br/>' +
+          esc(formatTime(r.finishedAt || r.updatedAt));
+      },
+    },
+    xAxis: {
+      type: 'category',
+      data: scored.map((r) => r.runId.slice(-8)),
+      axisLabel: { color: textColor, fontSize: 10 },
+    },
+    yAxis: {
+      type: 'value',
+      min: 0, max: 1,
+      axisLabel: { color: textColor, formatter: (v) => (v * 100).toFixed(0) + '%' },
+      splitLine: { lineStyle: { color: isDarkMode() ? '#2a3038' : '#e9ecef' } },
+    },
+    series: [{
+      type: 'line',
+      smooth: true,
+      data: scored.map((r) => r.score),
+      areaStyle: { opacity: 0.2 },
+      lineStyle: { width: 2, color: '#3274d9' },
+      itemStyle: { color: '#3274d9' },
+      markLine: {
+        silent: true,
+        symbol: 'none',
+        lineStyle: { type: 'dashed', color: '#28a745' },
+        data: [{ yAxis: 0.7, label: { formatter: t('pipelines.chart.scoreTrend.passLine'), color: '#28a745' } }],
+      },
+    }],
+  });
+}
+
+function renderRunDetail(run) {
+  const phases = run.phases || [];
+  const detail = run.detail || {};
+
+  let html = '<div class="run-header">' +
+    '<h3>' + esc(run.runId) + '</h3>' +
+    '<div class="run-meta">' +
+    '<span>' + esc(t('pipelines.col.status')) + ': <span class="status-indicator ' + getStatusClass(run.status) + '"></span><strong>' + esc(tStatus(run.status)) + '</strong></span>' +
+    '<span>' + esc(t('pipelines.col.gene')) + ': <strong>' + esc(run.selectedGeneId || '-') + '</strong></span>' +
+    '<span>' + esc(t('pipelines.col.updated')) + ': <strong>' + esc(formatTime(run.updatedAt)) + '</strong></span>' +
+    '</div></div>';
+
+  html += '<div class="run-body">';
+
+  html += '<div><h4>' + esc(t('pipelines.timeline')) + '</h4><ul class="timeline">';
+  html += phases.map((phase) => {
+    const cls = phase.status === 'success' ? 'success' :
+                phase.status === 'failed' ? 'failed' :
+                phase.status === 'running' || phase.status === 'pending' ? 'running' :
+                phase.status === 'blocked' ? 'blocked' : '';
+    return '<li class="' + cls + '">' +
+      '<div class="timeline-title">' + esc(phase.phase) + ' <span class="muted small">' + esc(tStatus(phase.status)) + '</span></div>' +
+      '<p class="timeline-desc">' + esc(phase.summary) + '</p>' +
+      '</li>';
+  }).join('');
+  html += '</ul></div>';
+
+  html += '<div><h4>' + esc(t('pipelines.runGraph')) + '</h4><div id="runGraph" class="chart-container" style="height: 360px;"></div></div>';
+
+  html += '</div>';
+
+  if (detail) {
+    html += '<div class="run-detail-grid">';
+    html += '<div class="detail-block"><h4>' + esc(t('pipelines.detail.triggerSignals')) + '</h4>' +
+      '<p class="muted small" style="margin:-4px 0 8px 0">' + esc(t('pipelines.detail.triggerSignals.desc')) + '</p>' +
+      pillList(detail.signals, 'signal') + '</div>';
+    if (detail.selector) {
+      html += '<div class="detail-block"><h4>' + esc(t('pipelines.detail.selector')) + '</h4>' +
+        kv([
+          [t('pipelines.detail.selector.selected'), detail.selector.selected],
+          [t('pipelines.detail.selector.path'), detail.selector.selectionPath || detail.selector.selection_path],
+          [t('pipelines.detail.selector.memoryUsed'), detail.selector.memoryUsed || detail.selector.memory_used],
+        ]) +
+        '<ul class="reason-list">' + (detail.selector.reason || []).map(r => '<li>' + esc(r) + '</li>').join('') + '</ul>' +
+        '</div>';
+    }
+    if (detail.mutation) {
+      html += '<div class="detail-block"><h4>' + esc(t('pipelines.detail.mutation')) + '</h4>' + kv([
+        [t('pipelines.detail.mutation.id'), detail.mutation.id],
+        [t('pipelines.detail.mutation.category'), detail.mutation.category],
+        [t('pipelines.detail.mutation.targetType'), detail.mutation.targetType],
+        [t('pipelines.detail.mutation.strategySteps'), detail.mutation.strategySteps],
+        [t('pipelines.detail.mutation.triggerSignals'), (detail.mutation.triggerSignals || []).join(', ') || '-'],
+      ]) + '</div>';
+    }
+    html += renderValidationBlock(detail.validation, run.status);
+    if (detail.blastRadius) {
+      html += '<div class="detail-block"><h4>' + esc(t('pipelines.detail.blastRadius')) + '</h4>' + kv([
+        [t('pipelines.detail.blastRadius.files'), detail.blastRadius.files],
+        [t('pipelines.detail.blastRadius.lines'), detail.blastRadius.lines],
+        [t('pipelines.detail.blastRadius.risk'), detail.blastRadius.risk_level || detail.blastRadius.risk],
+      ]) + '</div>';
+    }
+    if (detail.personalityState) {
+      html += '<div class="detail-block"><h4>' + esc(t('pipelines.detail.personalityState')) + '</h4>' + kv(
+        Object.entries(detail.personalityState).slice(0, 8)
+      ) + '</div>';
+    }
+    if (detail.initialUserPrompt) {
+      html += '<div class="detail-block"><h4>' + esc(t('pipelines.detail.initialUserPrompt')) + '</h4><pre class="snippet">' + esc(detail.initialUserPrompt) + '</pre></div>';
+    }
+    html += '</div>';
+  }
+
+  $('run-detail').innerHTML = html;
+
+  setTimeout(() => renderRunGraph(run, detail), 0);
+}
+
+function renderRunGraph(run, detail) {
+  const chartEl = document.getElementById('runGraph');
+  if (!chartEl) return;
+  // <div id="run-detail"> is rewritten on every loadRun call (see
+  // renderRunDetail), which detaches the previous #runGraph DOM. A
+  // cached ECharts instance from the previous run is bound to that
+  // detached element and would silently render to nothing on
+  // setOption. Dispose the stale instance before re-initializing
+  // against the fresh #runGraph so disposeAllCharts() on theme
+  // toggle and the window-resize handler keep working.
+  if (state.charts['runGraph']) {
+    state.charts['runGraph'].dispose();
+    delete state.charts['runGraph'];
+  }
+  const chart = ensureChart('runGraph');
+  const textColor = chartTextColor();
+  const isDark = isDarkMode();
+
+  const labelRun = t('personality.cat.run');
+  const labelGene = t('personality.cat.gene');
+  const labelEvent = t('personality.cat.event');
+  const nodes = [{ id: 'Run', name: labelRun + '\\n' + run.runId.slice(-8), symbolSize: 56, itemStyle: { color: '#3274d9' }, category: 0 }];
+  const edges = [];
+  const categories = [
+    { name: labelRun },
+    { name: labelGene },
+    { name: t('personality.cat.signal') },
+    { name: labelEvent },
+    { name: t('personality.cat.asset') },
+  ];
+
+  if (run.selectedGeneId) {
+    nodes.push({ id: 'Gene', name: labelGene + '\\n' + run.selectedGeneId.replace('gene_gep_', ''), symbolSize: 44, itemStyle: { color: '#28a745' }, category: 1 });
+    edges.push({ source: 'Run', target: 'Gene' });
+  }
+  (detail.signals || []).slice(0, 6).forEach((sig, i) => {
+    const id = 'Sig' + i;
+    nodes.push({ id, name: sig, symbolSize: 30, itemStyle: { color: '#ffc107' }, category: 2 });
+    edges.push({ source: id, target: 'Run' });
+    if (run.selectedGeneId) edges.push({ source: id, target: 'Gene', lineStyle: { type: 'dashed' } });
+  });
+  (run.evidence || []).slice(0, 5).forEach((ev, i) => {
+    const id = 'Ev' + i;
+    nodes.push({ id, name: labelEvent + '\\n' + (ev.id || '').slice(-6), symbolSize: 28, itemStyle: { color: '#dc3545' }, category: 3 });
+    edges.push({ source: 'Run', target: id });
+  });
+  (run.assets || []).slice(0, 5).forEach((a, i) => {
+    const id = 'Ast' + i;
+    nodes.push({ id, name: a.action || 'asset', symbolSize: 26, itemStyle: { color: '#6f42c1' }, category: 4 });
+    edges.push({ source: 'Run', target: id });
+  });
+
+  chart.setOption({
+    tooltip: {},
+    legend: { data: categories.map(c => c.name), bottom: 0, textStyle: { color: textColor } },
+    series: [{
+      type: 'graph',
+      layout: 'force',
+      data: nodes,
+      links: edges,
+      categories,
+      roam: true,
+      draggable: true,
+      cursor: 'grab',
+      label: { show: true, color: textColor, fontSize: 10 },
+      lineStyle: { color: isDark ? '#5c6975' : '#cdd3da', width: 1.5, curveness: 0.15 },
+      force: { repulsion: 220, edgeLength: 90 },
+    }],
+  });
+}
+
+async function loadRun(runId) {
+  state.selectedRunId = runId;
+  $('run-detail').innerHTML = '<p class="muted">' + esc(t('pipelines.runs.loadingTrace')) + '</p>';
+  try {
+    const run = await api('/webui/runs/' + encodeURIComponent(runId));
+    renderRunDetail(run);
+  } catch (err) {
+    $('run-detail').innerHTML = '<p class="status-failed">' + esc(t('pipelines.runs.failedToLoad')) + esc(err.message) + '</p>';
+  }
+}
+
+async function loadPipelines() {
+  try {
+    const runs = await api('/webui/runs?limit=50');
+    renderRuns(runs);
+  } catch (err) {
+    console.error(err);
+  }
+}
+`;