Дмитрий
238 lines
10 KiB
JavaScript
238 lines
10 KiB
JavaScript
import { parseEpisodes, filterEpisodes, attributeNodes, groupBySession, aggregate, inferConflicts } from './dashboard-core.js';
|
||
|
||
const AGD = window.AGD;
|
||
let episodes = [];
|
||
let skipped = 0;
|
||
let network = null;
|
||
|
||
// ── data loading ──────────────────────────────────────────────
|
||
async function loadEpisodes() {
|
||
const files = await fetch('/api/episodes').then((r) => r.json());
|
||
const all = [];
|
||
let skip = 0;
|
||
for (const f of files) {
|
||
const url = '/docs/observer/' + f;
|
||
const text = await fetch(url).then((r) => (r.ok ? r.text() : ''));
|
||
const r = parseEpisodes(text);
|
||
all.push(...r.episodes);
|
||
skip += r.skipped;
|
||
}
|
||
all.sort((a, b) => String(a.startedAt).localeCompare(String(b.startedAt)));
|
||
episodes = all;
|
||
skipped = skip;
|
||
document.getElementById('status').textContent =
|
||
`${episodes.length} эпизодов · ${skipped} пропущено`;
|
||
}
|
||
|
||
// ── graph banner ──────────────────────────────────────────────
|
||
function renderGraph() {
|
||
const nodes = new vis.DataSet(AGD.NODES);
|
||
const edges = new vis.DataSet(AGD.EDGES);
|
||
network = new vis.Network(
|
||
document.getElementById('network'),
|
||
{ nodes, edges },
|
||
{
|
||
groups: AGD.GROUPS,
|
||
nodes: { shape: 'dot', borderWidth: 2, font: { multi: 'html' } },
|
||
edges: { smooth: { type: 'continuous', roundness: 0.5 } },
|
||
physics: { enabled: false },
|
||
interaction: { hover: true, tooltipDelay: 400 },
|
||
}
|
||
);
|
||
network.once('afterDrawing', () => network.fit());
|
||
return { nodes, edges };
|
||
}
|
||
|
||
// ── view switching ────────────────────────────────────────────
|
||
const views = {};
|
||
let activeView = 'map';
|
||
|
||
views.map = function renderMapView() {
|
||
// Plain mode: clear any overlay coloring applied by other views.
|
||
window.__graph.nodes.update(AGD.NODES.map((n) => ({ id: n.id, color: undefined })));
|
||
// List the design-time conflict edges (dashed edges carry an emoji label).
|
||
const conflicts = AGD.EDGES.filter((e) => e.dashes === true);
|
||
const ul = document.getElementById('map-conflicts');
|
||
ul.innerHTML = '';
|
||
for (const c of conflicts) {
|
||
const li = document.createElement('li');
|
||
li.textContent = `${c.label || '•'} ${c.from} ↔ ${c.to}: ${c.title || ''}`;
|
||
ul.appendChild(li);
|
||
}
|
||
};
|
||
|
||
views.replay = function renderReplayView() {
|
||
const filter = {
|
||
classification: document.getElementById('f-classification').value || undefined,
|
||
outcome: document.getElementById('f-outcome').value || undefined,
|
||
withErrors: document.getElementById('f-errors').checked || undefined,
|
||
};
|
||
const list = filterEpisodes(episodes, filter);
|
||
const ul = document.getElementById('replay-episodes');
|
||
ul.innerHTML = '';
|
||
list.forEach((ep) => {
|
||
const li = document.createElement('li');
|
||
li.textContent = `${ep.startedAt} · ${ep.taskClassification || '—'} · ${ep.outcome}`
|
||
+ (ep.errorCount ? ` · ⚠${ep.errorCount}` : '');
|
||
li.addEventListener('click', () => selectEpisode(ep));
|
||
ul.appendChild(li);
|
||
});
|
||
};
|
||
|
||
function selectEpisode(ep) {
|
||
const attr = attributeNodes(ep);
|
||
window.__graph.nodes.update(
|
||
AGD.NODES.map((n) => ({
|
||
id: n.id,
|
||
color: attr.nodeIds.includes(n.id)
|
||
? { background: '#268bd2', border: '#93a1a1' }
|
||
: { background: '#2a2a3a', border: '#444' },
|
||
}))
|
||
);
|
||
const d = document.getElementById('replay-detail');
|
||
const prov = ep.decisionProvenance;
|
||
const provLine = prov && prov.kind === 'user_directed_method'
|
||
? `перенаправление: выбран ${prov.node || '?'}, автономно был бы ${prov.claude_would_have_chosen || '?'}`
|
||
: prov ? prov.kind : '—';
|
||
const env = ep.environment || {};
|
||
d.innerHTML = `
|
||
<h3>${ep.taskClassification || '—'} · ${ep.pathType || '—'} · ${ep.outcome}</h3>
|
||
<p>provenance: ${provLine}</p>
|
||
<p>hard-floor: ${ep.hardFloor.invoked ? (ep.hardFloor.rules || []).join(', ') : 'нет'}</p>
|
||
<p>окружение: economy=${env.economy_level ?? '—'} · ${env.model || '—'} · turn ${env.session_turn ?? '—'}${env.post_compaction ? ' · post-compaction' : ''}${env.parallel_session ? ' · parallel' : ''}</p>
|
||
<p>атрибутировано узлов: ${attr.attributed} из ${attr.signals} сигналов</p>
|
||
<h4>События</h4>
|
||
<ol>${ep.events.map((e) => `<li>${eventLine(e)}</li>`).join('')}</ol>`;
|
||
}
|
||
|
||
views.feed = function renderFeedView() {
|
||
const groups = groupBySession(episodes);
|
||
const root = document.getElementById('feed-stream');
|
||
root.innerHTML = groups.map((g) => `
|
||
<section class="feed-group">
|
||
<h4>сессия ${g.taskRef.slice(0, 8)} · ${g.episodes.length} ходов</h4>
|
||
${g.episodes.map(feedCard).join('')}
|
||
</section>`).join('');
|
||
};
|
||
|
||
views.aggregate = function renderAggregateView() {
|
||
const a = aggregate(episodes);
|
||
applyHeat(a.nodeHeat);
|
||
const dist = (obj) => Object.entries(obj).map(([k, v]) => `${k}: ${v}`).join(' · ') || '—';
|
||
const topNodes = Object.entries(a.nodeHeat).sort((x, y) => y[1] - x[1]).slice(0, 10);
|
||
document.getElementById('agg-tiles').innerHTML = `
|
||
<div class="tile"><h4>Эпизодов</h4><p>${a.count}</p></div>
|
||
<div class="tile"><h4>Ошибки / ретраи</h4><p>${a.totalErrors} / ${a.totalRetries}</p></div>
|
||
<div class="tile"><h4>Доля перенаправлений</h4><p>${(a.redirectRate * 100).toFixed(0)}%</p></div>
|
||
<div class="tile"><h4>path_type</h4><p>${dist(a.pathType)}</p></div>
|
||
<div class="tile"><h4>outcome</h4><p>${dist(a.outcome)}</p></div>
|
||
<div class="tile"><h4>классы задач</h4><p>${dist(a.classification)}</p></div>
|
||
<div class="tile"><h4>economy-уровни</h4><p>${dist(a.economy)}</p></div>
|
||
<div class="tile"><h4>Топ узлов</h4><p>${topNodes.map(([k, v]) => `${k}×${v}`).join(' · ') || '—'}</p></div>`;
|
||
const c = inferConflicts(episodes, AGD.EDGES);
|
||
const top = (obj) => Object.entries(obj).sort((x, y) => y[1] - x[1]).map(([k, v]) => `${k}×${v}`).join(' · ') || '—';
|
||
document.getElementById('agg-conflicts').innerHTML = `
|
||
<h4>Конфликты — три слоя</h4>
|
||
<p><b>Дизайн-конфликты (факт):</b> ${c.design.length} размеченных рёбер</p>
|
||
<p><b>Трение (инференс):</b> ${top(c.friction)}</p>
|
||
<p><b>Корреляция (эвристика):</b> ${c.correlation.length} ходов с ошибкой на паре конфликтующих узлов</p>`;
|
||
};
|
||
|
||
function applyHeat(nodeHeat) {
|
||
const max = Math.max(1, ...Object.values(nodeHeat));
|
||
window.__graph.nodes.update(
|
||
AGD.NODES.map((n) => {
|
||
const h = nodeHeat[n.id] || 0;
|
||
const t = h / max;
|
||
return {
|
||
id: n.id,
|
||
color: h
|
||
? { background: `rgba(38,139,210,${0.25 + 0.6 * t})`, border: '#93a1a1' }
|
||
: { background: '#2a2a3a', border: '#444' },
|
||
};
|
||
})
|
||
);
|
||
}
|
||
|
||
function feedCard(ep) {
|
||
const dur = ep.durationMs != null ? Math.round(ep.durationMs / 1000) + 's' : '—';
|
||
const redirect = ep.decisionProvenance && ep.decisionProvenance.kind === 'user_directed_method' ? ' ↪' : '';
|
||
return `<div class="feed-card">
|
||
${ep.startedAt} · ${ep.taskClassification || '—'} · ${ep.pathType || '—'} · ${ep.nodeChosen || '—'}
|
||
· ${dur}${ep.errorCount ? ' · ⚠' + ep.errorCount : ''}${ep.retryCount ? ' · ↻' + ep.retryCount : ''}${redirect}
|
||
</div>`;
|
||
}
|
||
|
||
function eventLine(e) {
|
||
switch (e.kind) {
|
||
case 'skill_invoked': return `skill: ${e.skill}`;
|
||
case 'error': return `error: ${e.message || ''}`;
|
||
case 'retry': return 'retry';
|
||
case 'interrupt': return 'interrupt';
|
||
case 'hook_fired': return `hooks (${Object.keys(e.counts || {}).length} типов, errors ${e.errors || 0})`;
|
||
case 'tool_summary': return `инструменты: ${Object.entries(e.counts || {}).map(([k, v]) => `${k}×${v}`).join(', ')}`;
|
||
case 'time_burn': return `time_burn: ${e.duration_ms} ms`;
|
||
case 'parse_gap': return `parse_gap: ${e.broken}/${e.total}`;
|
||
default: return e.kind;
|
||
}
|
||
}
|
||
|
||
function switchView(name) {
|
||
activeView = name;
|
||
for (const v of ['map', 'replay', 'feed', 'aggregate']) {
|
||
document.getElementById('view-' + v).style.display = v === name ? 'block' : 'none';
|
||
}
|
||
document.querySelectorAll('#tabbar button').forEach((b) => {
|
||
b.classList.toggle('active', b.dataset.view === name);
|
||
});
|
||
if (views[name]) views[name]();
|
||
if (name === 'feed') startPolling(); else stopPolling();
|
||
}
|
||
|
||
// ── boot ──────────────────────────────────────────────────────
|
||
async function boot() {
|
||
const gds = renderGraph();
|
||
window.__graph = { network, ...gds };
|
||
document.querySelectorAll('#tabbar button').forEach((b) => {
|
||
b.addEventListener('click', () => switchView(b.dataset.view));
|
||
});
|
||
['f-classification', 'f-outcome', 'f-errors'].forEach((id) => {
|
||
document.getElementById(id).addEventListener('change', () => {
|
||
if (activeView === 'replay') views.replay();
|
||
});
|
||
});
|
||
document.getElementById('feed-pause').addEventListener('click', () => {
|
||
if (pollTimer) stopPolling(); else startPolling();
|
||
});
|
||
await loadEpisodes();
|
||
switchView('map');
|
||
}
|
||
|
||
// ── live polling for the Лента view ───────────────────────────
|
||
const POLL_MS = 5000;
|
||
let pollTimer = null;
|
||
|
||
async function pollTick() {
|
||
const before = episodes.length;
|
||
await loadEpisodes();
|
||
if (episodes.length !== before && activeView === 'feed') views.feed();
|
||
}
|
||
|
||
function startPolling() {
|
||
if (pollTimer) return;
|
||
pollTimer = setInterval(pollTick, POLL_MS);
|
||
const el = document.getElementById('feed-poll-state');
|
||
if (el) el.textContent = `автоопрос каждые ${POLL_MS / 1000}s`;
|
||
}
|
||
|
||
function stopPolling() {
|
||
clearInterval(pollTimer);
|
||
pollTimer = null;
|
||
const el = document.getElementById('feed-poll-state');
|
||
if (el) el.textContent = 'опрос на паузе';
|
||
}
|
||
|
||
export function getEpisodes() { return episodes; }
|
||
export { views, switchView };
|
||
boot();
|