@evomap/evolver 1.89.20 → 2.0.0-beta.0

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

@@ -1,285 +0,0 @@
-'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

@@ -1,330 +0,0 @@
-'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);
-  }
-}
-`;