tools/render_html.py · cgcardona/muse

<div class="dim-legend-item" style="margin-left:8px"><span style="display:inline-block;width:22px;height:14px;border-radius:3px;border:2px solid #f85149;vertical-align:middle;margin-right:6px"></span> Conflict (required resolution)</div>

981

<div class="dim-legend-item"><span style="display:inline-block;width:22px;height:14px;border-radius:3px;background:var(--bg3);border:1px solid var(--border);vertical-align:middle;margin-right:6px"></span> Unchanged</div>

982

</div>

983

984

<strong><svg class="ico-inline ico-conflict" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg> Merge conflict (shared-state.mid)</strong> — shared-state.mid had both-sides changes in

985

<strong style="color:#ef5350">structural</strong> (manual resolution required).

986

<em><svg class="ico-inline ico-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg> melodic auto-merged from left</em> · <em><svg class="ico-inline ico-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg> harmonic auto-merged from right</em> —

987

only 1 of 5 dimensions conflicted. Git would have flagged the entire file as a conflict.

</div>

</div>

</div>

<span>Generated {{GENERATED_AT}} · {{ELAPSED}}s · {{OPS}} operations</span>

994

<span><a href="https://github.com/cgcardona/muse">github.com/cgcardona/muse</a></span>

</footer>

</div>

/* ===== Embedded tour data ===== */

1009

const DATA = {{DATA_JSON}};

1010

1011

/* ===== Constants ===== */

1012

const ROW_H = 62;

1013

const COL_W = 90;

1014

const PAD = { top: 30, left: 55, right: 160 };

1015

const R_NODE = 11;

1016

const BRANCH_ORDER = ['main','alpha','beta','gamma','conflict/left','conflict/right'];

1017

const PLAY_INTERVAL_MS = 1200;

1018

1019

/* ===== Dimension data ===== */

const DIM_COLORS = {

melodic: '#bc8cff',

rhythmic: '#3fb950',

harmonic: '#58a6ff',

dynamic: '#f9a825',

structural: '#ef5350',

1026

};

1027

const DIMS = ['melodic','rhythmic','harmonic','dynamic','structural'];

1028

1029

// Commit message → dimension mapping (stable across re-runs, independent of hash)

1030

function getDims(commit) {

1031

const m = (commit.message || '').toLowerCase();

1032

if (m.includes('root') || m.includes('initial state'))

1033

return ['melodic','rhythmic','harmonic','dynamic','structural'];

1034

if (m.includes('layer 1') || m.includes('rhythmic dimension'))

1035

return ['rhythmic','structural'];

1036

if (m.includes('layer 2') || m.includes('harmonic dimension'))

1037

return ['harmonic','structural'];

1038

if (m.includes('texture pattern a') || m.includes('sparse'))

1039

return ['melodic','rhythmic'];

1040

if (m.includes('texture pattern b') || m.includes('dense'))

1041

return ['melodic','dynamic'];

1042

if (m.includes('syncopated'))

1043

return ['rhythmic','dynamic'];

1044

if (m.includes('descending'))

1045

return ['melodic','harmonic'];

1046

if (m.includes('ascending'))

1047

return ['melodic'];

1048

if (m.includes("merge branch 'beta'"))

1049

return ['rhythmic','dynamic'];

1050

if (m.includes('left:') || m.includes('version a'))

1051

return ['melodic','structural'];

1052

if (m.includes('right:') || m.includes('version b'))

1053

return ['harmonic','structural'];

1054

if (m.includes('resolve') || m.includes('reconciled'))

1055

return ['structural'];

1056

if (m.includes('cherry-pick') || m.includes('cherry pick'))

1057

return ['melodic'];

1058

if (m.includes('revert'))

return ['melodic'];

return [];

}

function getConflicts(commit) {

1064

const m = (commit.message || '').toLowerCase();

1065

if (m.includes('resolve') && m.includes('reconciled')) return ['structural'];

return [];

}

// Build per-short-ID lookup tables once the DATA is available (populated at init)

1070

const DIM_DATA = {};

1071

const DIM_CONFLICTS = {};

1072

function _initDimMaps() {

1073

DATA.dag.commits.forEach(c => {

1074

DIM_DATA[c.short] = getDims(c);

1075

DIM_CONFLICTS[c.short] = getConflicts(c);

1076

});

1077

// Also key by the short prefix used in events (some may be truncated)

1078

DATA.events.forEach(ev => {

1079

if (ev.commit_id && !DIM_DATA[ev.commit_id]) {

1080

const full = DATA.dag.commits.find(c => c.short.startsWith(ev.commit_id) || ev.commit_id.startsWith(c.short));

1081

if (full) {

1082

DIM_DATA[ev.commit_id] = getDims(full);

1083

DIM_CONFLICTS[ev.commit_id] = getConflicts(full);

}

}

});

}

/* ===== State ===== */

1091

let currentStep = -1;

1092

let isPlaying = false;

1093

let playTimer = null;

1094

1095

/* ===== Utilities ===== */

1096

function escHtml(s) {

return String(s)

.replace(/&/g,'&')

.replace(/</g,'<')

.replace(/>/g,'>')

.replace(/"/g,'"');

}

/* ===== Topological sort ===== */

1105

function topoSort(commits) {

1106

const map = new Map(commits.map(c => [c.id, c]));

1107

const visited = new Set();

1108

const result = [];

1109

function visit(id) {

1110

if (visited.has(id)) return;

1111

visited.add(id);

1112

const c = map.get(id);

1113

if (!c) return;

1114

(c.parents || []).forEach(pid => visit(pid));

1115

result.push(c);

1116

}

1117

commits.forEach(c => visit(c.id));

1118

// Oldest commit at row 0 (top of DAG); newest at the bottom so the DAG

1119

// scrolls down in sync with the operation log during playback.

return result;

}

/* ===== Layout ===== */

1124

function computeLayout(commits) {

1125

const sorted = topoSort(commits);

1126

const branchCols = {};

1127

let nextCol = 0;

1128

// Assign columns in BRANCH_ORDER first, then any extras

1129

BRANCH_ORDER.forEach(b => { branchCols[b] = nextCol++; });

1130

commits.forEach(c => {

1131

if (!(c.branch in branchCols)) branchCols[c.branch] = nextCol++;

1132

});

1133

const numCols = nextCol;

1134

const positions = new Map();

1135

sorted.forEach((c, i) => {

1136

positions.set(c.id, {

1137

x: PAD.left + (branchCols[c.branch] || 0) * COL_W,

1138

y: PAD.top + i * ROW_H,

1139

row: i,

1140

col: branchCols[c.branch] || 0,

1141

});

1142

});

1143

const svgW = PAD.left + numCols * COL_W + PAD.right;

1144

const svgH = PAD.top + sorted.length * ROW_H + PAD.top;

1145

return { sorted, positions, branchCols, svgW, svgH };

1146

}

1147

1148

/* ===== Draw DAG ===== */

1149

function drawDAG() {

1150

const { dag, dag: { commits, branches } } = DATA;

1151

if (!commits.length) return;

1152

1153

const layout = computeLayout(commits);

1154

const { sorted, positions, svgW, svgH } = layout;

1155

const branchColor = new Map(branches.map(b => [b.name, b.color]));

1156

const commitMap = new Map(commits.map(c => [c.id, c]));

1157

1158

const svg = d3.select('#dag-svg')

1159

.attr('width', svgW)

1160

.attr('height', svgH);

1161

1162

// ---- Edges ----

1163

const edgeG = svg.append('g').attr('class', 'edges');

1164

sorted.forEach(commit => {

1165

const pos = positions.get(commit.id);

1166

(commit.parents || []).forEach((pid, pIdx) => {

1167

const ppos = positions.get(pid);

1168

if (!pos || !ppos) return;

1169

const color = pIdx === 0

1170

? (branchColor.get(commit.branch) || '#555')

1171

: (branchColor.get(commitMap.get(pid)?.branch || '') || '#555');

1172

1173

let pathStr;

1174

if (Math.abs(pos.x - ppos.x) < 4) {

1175

// Same column → straight line

1176

pathStr = `M${pos.x},${pos.y} L${ppos.x},${ppos.y}`;

1177

} else {

1178

// Different columns → S-curve bezier

1179

const mid = (pos.y + ppos.y) / 2;

1180

pathStr = `M${pos.x},${pos.y} C${pos.x},${mid} ${ppos.x},${mid} ${ppos.x},${ppos.y}`;

}

edgeG.append('path')

.attr('d', pathStr)

.attr('stroke', color)

1185

.attr('stroke-width', 1.8)

1186

.attr('fill', 'none')

1187

.attr('opacity', 0.45)

1188

.attr('class', `edge-from-${commit.id.slice(0,8)}`);

});

});

// ---- Nodes ----

const nodeG = svg.append('g').attr('class', 'nodes');

1194

const tooltip = document.getElementById('tooltip');

1195

1196

sorted.forEach(commit => {

1197

const pos = positions.get(commit.id);

1198

if (!pos) return;

1199

const color = branchColor.get(commit.branch) || '#78909c';

1200

const isMerge = (commit.parents || []).length >= 2;

1201

1202

const g = nodeG.append('g')

1203

.attr('class', 'commit-node')

1204

.attr('data-id', commit.id)

1205

.attr('data-short', commit.short)

1206

.attr('transform', `translate(${pos.x},${pos.y})`);

if (isMerge) {

g.append('circle')

.attr('r', R_NODE + 6)

1211

.attr('fill', 'none')

1212

.attr('stroke', color)

1213

.attr('stroke-width', 1.5)

1214

.attr('opacity', 0.35);

}

g.append('circle')

.attr('r', R_NODE)

.attr('fill', color)

.attr('stroke', '#0d1117')

1221

.attr('stroke-width', 2);

// Short ID

g.append('text')

.attr('x', R_NODE + 7)

1226

.attr('y', 0)

1227

.attr('dy', '0.35em')

1228

.attr('class', 'commit-label')

1229

.text(commit.short);

1230

1231

// Message (truncated)

1232

const maxLen = 38;

1233

const msg = commit.message.length > maxLen

1234

? commit.message.slice(0, maxLen) + '…'

1235

: commit.message;

1236

g.append('text')

1237

.attr('x', R_NODE + 7)

1238

.attr('y', 13)

1239

.attr('class', 'commit-msg')

.text(msg);

// Dimension dots below node

1244

const dims = DIM_DATA[commit.short] || [];

1245

if (dims.length > 0) {

1246

const dotR = 4, dotSp = 11;

1247

const totalW = (DIMS.length - 1) * dotSp;

1248

const dotsG = g.append('g')

1249

.attr('class', 'dim-dots')

1250

.attr('transform', `translate(${-totalW/2},${R_NODE + 9})`);

1251

DIMS.forEach((dim, di) => {

1252

const active = dims.includes(dim);

1253

const isConf = (DIM_CONFLICTS[commit.short] || []).includes(dim);

1254

dotsG.append('circle')

1255

.attr('cx', di * dotSp).attr('cy', 0).attr('r', dotR)

1256

.attr('fill', active ? DIM_COLORS[dim] : '#21262d')

1257

.attr('stroke', isConf ? '#f85149' : (active ? DIM_COLORS[dim] : '#30363d'))

1258

.attr('stroke-width', isConf ? 1.5 : 0.8)

1259

.attr('opacity', active ? 1 : 0.35);

});

}

// Hover tooltip

g.on('mousemove', (event) => {

1265

tooltip.classList.add('visible');

1266

document.getElementById('tip-id').textContent = commit.id;

1267

document.getElementById('tip-msg').textContent = commit.message;

1268

document.getElementById('tip-branch').innerHTML =

1269

`<span style="color:${color}">⬤</span> ${commit.branch}`;

1270

document.getElementById('tip-files').textContent =

1271

commit.files.length

1272

? commit.files.join('\\n')

1273

: '(empty snapshot)';

1274

const tipDims = DIM_DATA[commit.short] || [];

1275

const tipConf = DIM_CONFLICTS[commit.short] || [];

1276

const tipDimEl = document.getElementById('tip-dims');

1277

if (tipDimEl) {

1278

tipDimEl.innerHTML = tipDims.length

1279

? tipDims.map(d => {

1280

const c = tipConf.includes(d);

1281

return `<span style="color:${DIM_COLORS[d]};margin-right:6px">${SVG.dot} ${d}${c?' '+SVG.zap:''}</span>`;

}).join('')

: '';

}

tooltip.style.left = (event.clientX + 12) + 'px';

1286

tooltip.style.top = (event.clientY - 10) + 'px';

1287

}).on('mouseleave', () => {

1288

tooltip.classList.remove('visible');

});

});

// ---- Branch legend ----

1293

const legend = document.getElementById('branch-legend');

1294

DATA.dag.branches.forEach(b => {

1295

const item = document.createElement('div');

1296

item.className = 'legend-item';

1297

item.innerHTML =

1298

`<span class="legend-dot" style="background:${b.color}"></span>` +

1299

`<span>${escHtml(b.name)}</span>`;

1300

legend.appendChild(item);

});

}

/* ===== SVG icon library ===== */

1305

const SVG = {

1306

music: `<svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>`,

1307

branch: `<svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><line x1="6" y1="3" x2="6" y2="15"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/></svg>`,

1308

merge: `<svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="18" r="3"/><circle cx="6" cy="6" r="3"/><path d="M6 21V9a9 9 0 0 0 9 9"/></svg>`,

1309

conflict: `<svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>`,

1310

revert: `<svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 .49-3.53"/></svg>`,

1311

check: `<svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>`,

1312

dot: `<svg class="ico" viewBox="0 0 24 24" fill="currentColor" stroke="none"><circle cx="12" cy="12" r="5"/></svg>`,

1313

zap: `<svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>`,

1314

pause: `<svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg>`,

1315

eye: `<svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>`,

1316

};

1317

1318

/* ===== Act metadata ===== */

1319

const ACT_ICONS = {

1320

1: SVG.music, 2: SVG.branch, 3: SVG.merge, 4: SVG.conflict, 5: SVG.revert,

1321

};

1322

const ACT_COLORS = {

1323

1:'#4f8ef7', 2:'#3fb950', 3:'#f85149', 4:'#ab47bc', 5:'#f9a825',

1324

};

1325

1326

/* ===== Act jump navigation ===== */

1327

function buildActJumpBar() {

1328

const bar = document.getElementById('act-jump-bar');

1329

if (!bar) return;

1330

1331

const lbl = document.createElement('span');

1332

lbl.textContent = 'Jump:';

1333

bar.appendChild(lbl);

1334

1335

// Collect unique acts

1336

const acts = [];

1337

let last = -1;

1338

DATA.events.forEach(ev => {

1339

if (ev.act !== last) { acts.push({ num: ev.act, title: ev.act_title }); last = ev.act; }

});

acts.forEach(a => {

const btn = document.createElement('button');

1344

btn.className = 'act-jump-btn';

1345

btn.title = `Jump to Act ${a.num}: ${a.title}`;

1346

const icon = ACT_ICONS[a.num] || '';

1347

btn.innerHTML = `${icon} ${a.num}`;

1348

if (a.num >= 6) btn.style.borderColor = ACT_COLORS[a.num] + '66';

1349

btn.addEventListener('click', () => {

1350

pauseTour();

1351

// Find first event index for this act

1352

const idx = DATA.events.findIndex(ev => ev.act === a.num);

1353

if (idx >= 0) {

1354

// Reveal up to this point

1355

revealStep(idx);

1356

// Scroll the act header into view

1357

const hdr = document.getElementById(`act-hdr-${a.num}`);

1358

if (hdr) hdr.scrollIntoView({ behavior: 'smooth', block: 'start' });

1359

}

1360

});

1361

bar.appendChild(btn);

});

// Reveal All button

const allBtn = document.createElement('button');

1366

allBtn.className = 'act-jump-btn reveal-all';

1367

allBtn.innerHTML = SVG.eye + ' Reveal All';

1368

allBtn.title = 'Reveal all 69 events at once';

1369

allBtn.addEventListener('click', () => {

1370

pauseTour();

1371

revealStep(DATA.events.length - 1);

1372

});

1373

bar.appendChild(allBtn);

1374

}

1375

1376

/* ===== Event log ===== */

1377

function buildEventLog() {

1378

const list = document.getElementById('event-list');

1379

let lastAct = -1;

1380

1381

DATA.events.forEach((ev, idx) => {

1382

if (ev.act !== lastAct) {

1383

lastAct = ev.act;

1384

1385

// Act header — always visible (no opacity fade)

1386

const hdr = document.createElement('div');

1387

hdr.className = 'act-header';

1388

hdr.id = `act-hdr-${ev.act}`;

1389

const icon = ACT_ICONS[ev.act] || '';

1390

const col = ACT_COLORS[ev.act] || 'var(--text-dim)';

1391

hdr.innerHTML =

1392

`<span style="color:${col};margin-right:6px">${icon}</span>` +

1393

`Act ${ev.act} <span style="opacity:0.6">—</span> ${ev.act_title}`;

1394

if (ev.act >= 6) {

1395

hdr.style.color = col;

1396

hdr.style.borderTop = `1px solid ${col}33`;

1397

}

1398

list.appendChild(hdr);

1399

}

1400

1401

const isCliCmd = ev.cmd.startsWith('muse ') || ev.cmd.startsWith('git ');

1402

1403

const item = document.createElement('div');

1404

item.className = 'event-item';

1405

item.id = `ev-${idx}`;

1406

1407

if (ev.exit_code !== 0 && ev.output.toLowerCase().includes('conflict')) {

1408

item.classList.add('failed');

}

// Parse cmd

const parts = ev.cmd.split(' ');

1413

const cmdName = parts.slice(0, 2).join(' ');

1414

const cmdArgs = parts.slice(2).join(' ');

// Output class

let outClass = '';

if (ev.output.toLowerCase().includes('conflict')) outClass = 'conflict';

1419

else if (ev.exit_code === 0 && ev.commit_id) outClass = 'success';

1420

1421

const outLines = ev.output.split('\\n').slice(0, 6).join('\\n');

1422

1423

const cmdLine =

1424

`<div class="event-cmd">` +

1425

`<span class="cmd-prefix">$ </span>` +

1426

`<span class="cmd-name">${escHtml(cmdName)}</span>` +

1427

(cmdArgs

1428

? ` <span class="cmd-args">${escHtml(cmdArgs.slice(0, 80))}${cmdArgs.length > 80 ? '…' : ''}</span>`

: '') +

`</div>`;

item.innerHTML =

cmdLine +

(outLines

? `<div class="event-output ${outClass}">${escHtml(outLines)}</div>`

1436

: '') +

1437

(() => {

1438

if (!ev.commit_id) return '';

1439

const dims = DIM_DATA[ev.commit_id] || [];

1440

const conf = DIM_CONFLICTS[ev.commit_id] || [];

1441

if (!dims.length) return '';

1442

return '<div class="dim-pills">' + dims.map(d => {

1443

const isc = conf.includes(d);

1444

const col = DIM_COLORS[d];

1445

const cls = isc ? 'dim-pill conflict-pill' : 'dim-pill';

1446

const sty = isc ? '' : `color:${col};border-color:${col};background:${col}22`;

1447

return `<span class="${cls}" style="${sty}">${isc ? SVG.zap+' ' : ''}${d}</span>`;

1448

}).join('') + '</div>';

1449

})() +

1450

`<div class="event-meta">` +

1451

(ev.commit_id ? `<span class="tag-commit">${escHtml(ev.commit_id)}</span>` : '') +

1452

`<span class="tag-time">${ev.duration_ms}ms</span>` +

1453

`</div>`;

1454

1455

list.appendChild(item);

});

}

/* ===== Dimension Timeline ===== */

1462

function buildDimTimeline() {

1463

const matrix = document.getElementById('dim-matrix');

1464

if (!matrix) return;

1465

const sorted = topoSort(DATA.dag.commits);

1466

1467

// Commit ID header row

1468

const hrow = document.createElement('div');

1469

hrow.className = 'dim-matrix-row';

1470

const sp = document.createElement('div');

1471

sp.className = 'dim-label-cell';

1472

hrow.appendChild(sp);

1473

sorted.forEach(c => {

1474

const cell = document.createElement('div');

1475

cell.className = 'dim-commit-cell';

1476

cell.id = `dim-col-label-${c.short}`;

1477

cell.title = c.message;

1478

cell.textContent = c.short.slice(0,6);

1479

hrow.appendChild(cell);

1480

});

1481

matrix.appendChild(hrow);

1482

1483

// One row per dimension

1484

DIMS.forEach(dim => {

1485

const row = document.createElement('div');

1486

row.className = 'dim-matrix-row';

1487

const lbl = document.createElement('div');

1488

lbl.className = 'dim-label-cell';

1489

const dot = document.createElement('span');

1490

dot.className = 'dim-label-dot';

1491

dot.style.background = DIM_COLORS[dim];

1492

lbl.appendChild(dot);

1493

lbl.appendChild(document.createTextNode(dim.charAt(0).toUpperCase() + dim.slice(1)));

1494

row.appendChild(lbl);

1495

1496

sorted.forEach(c => {

1497

const dims = DIM_DATA[c.short] || [];

1498

const conf = DIM_CONFLICTS[c.short] || [];

1499

const active = dims.includes(dim);

1500

const isConf = conf.includes(dim);

1501

const col = DIM_COLORS[dim];

1502

const cell = document.createElement('div');

1503

cell.className = 'dim-cell';

1504

const inner = document.createElement('div');

1505

inner.className = 'dim-cell-inner' + (active ? ' active' : '') + (isConf ? ' conflict-dim' : '');

1506

inner.id = `dim-cell-${dim}-${c.short}`;

1507

if (active) {

1508

inner.style.background = col + '33';

1509

inner.style.color = col;

1510

inner.innerHTML = isConf ? SVG.zap : SVG.dot;

1511

}

1512

cell.appendChild(inner);

1513

row.appendChild(cell);

1514

});

1515

matrix.appendChild(row);

});

}

function highlightDimColumn(shortId) {

1520

document.querySelectorAll('.dim-commit-cell.col-highlight, .dim-cell-inner.col-highlight')

1521

.forEach(el => el.classList.remove('col-highlight'));

1522

if (!shortId) return;

1523

const lbl = document.getElementById(`dim-col-label-${shortId}`);

1524

if (lbl) {

1525

lbl.classList.add('col-highlight');

1526

lbl.scrollIntoView({ behavior:'smooth', block:'nearest', inline:'center' });

1527

}

1528

DIMS.forEach(dim => {

1529

const cell = document.getElementById(`dim-cell-${dim}-${shortId}`);

1530

if (cell) cell.classList.add('col-highlight');

});

}

/* ===== Replay animation ===== */

1535

function revealStep(stepIdx) {

1536

if (stepIdx < 0 || stepIdx >= DATA.events.length) return;

1537

1538

const ev = DATA.events[stepIdx];

1539

1540

// Reveal all events up to this step

1541

for (let i = 0; i <= stepIdx; i++) {

1542

const el = document.getElementById(`ev-${i}`);

1543

if (el) el.classList.add('revealed');

1544

}

1545

1546

// Mark current as active (remove previous)

1547

document.querySelectorAll('.event-item.active').forEach(el => el.classList.remove('active'));

1548

const cur = document.getElementById(`ev-${stepIdx}`);

1549

if (cur) {

1550

cur.classList.add('active');

1551

cur.scrollIntoView({ behavior: 'smooth', block: 'nearest' });

1552

}

1553

1554

// Highlight commit node

1555

document.querySelectorAll('.commit-node.highlighted').forEach(el => el.classList.remove('highlighted'));

1556

if (ev.commit_id) {

1557

const node = document.querySelector(`.commit-node[data-short="${ev.commit_id}"]`);

1558

if (node) {

1559

node.classList.add('highlighted');

1560

// Scroll DAG to show the node

1561

const transform = node.getAttribute('transform');

1562

if (transform) {

1563

const m = transform.match(/translate\$([\\d.]+),([\\d.]+)\$/);

1564

if (m) {

1565

const scroll = document.getElementById('dag-scroll');

1566

const y = parseFloat(m[2]);

1567

scroll.scrollTo({ top: Math.max(0, y - 200), behavior: 'smooth' });

}

}

}

}

// Highlight dimension matrix column

1574

highlightDimColumn(ev.commit_id || null);

1575

1576

// Update counter and step button states

1577

document.getElementById('step-counter').textContent =

1578

`Step ${stepIdx + 1} / ${DATA.events.length}`;

1579

document.getElementById('btn-prev').disabled = (stepIdx === 0);

1580

document.getElementById('btn-next').disabled = (stepIdx === DATA.events.length - 1);

1581

1582

currentStep = stepIdx;

1583

}

1584

1585

function playTour() {

1586

if (isPlaying) return;

1587

isPlaying = true;

1588

document.getElementById('btn-play').innerHTML = SVG.pause + ' Pause';

1589

1590

function advance() {

1591

if (!isPlaying) return;

1592

const next = currentStep + 1;

1593

if (next >= DATA.events.length) {

1594

pauseTour();

1595

document.getElementById('btn-play').innerHTML = SVG.check + ' Done';

return;

}

revealStep(next);

playTimer = setTimeout(advance, PLAY_INTERVAL_MS);

}

advance();

}

function pauseTour() {

1605

isPlaying = false;

1606

clearTimeout(playTimer);

1607

document.getElementById('btn-play').textContent = '▶ Play Tour';

1608

highlightDimColumn(null);

1609

}

1610

1611

function resetTour() {

1612

pauseTour();

1613

currentStep = -1;

1614

document.querySelectorAll('.event-item').forEach(el => {

1615

el.classList.remove('revealed','active');

1616

});

1617

document.querySelectorAll('.commit-node.highlighted').forEach(el => {

1618

el.classList.remove('highlighted');

1619

});

1620

document.getElementById('step-counter').textContent = '';

1621

document.getElementById('log-scroll').scrollTop = 0;

1622

document.getElementById('dag-scroll').scrollTop = 0;

1623

document.getElementById('btn-play').textContent = '▶ Play Tour';

1624

document.getElementById('btn-prev').disabled = true;

1625

document.getElementById('btn-next').disabled = false;

1626

highlightDimColumn(null);

1627

}

1628

1629

/* ===== Init ===== */

1630

document.addEventListener('DOMContentLoaded', () => {

_initDimMaps();

drawDAG();

buildEventLog();

buildActJumpBar();

buildDimTimeline();

document.getElementById('btn-prev').disabled = true; // nothing to go back to yet

1638

1639

document.getElementById('btn-play').addEventListener('click', () => {

1640

if (isPlaying) pauseTour(); else playTour();

1641

});

1642

document.getElementById('btn-prev').addEventListener('click', () => {

1643

pauseTour();

1644

if (currentStep > 0) revealStep(currentStep - 1);

1645

});

1646

document.getElementById('btn-next').addEventListener('click', () => {

1647

pauseTour();

1648

if (currentStep < DATA.events.length - 1) revealStep(currentStep + 1);

1649

});

1650

document.getElementById('btn-reset').addEventListener('click', resetTour);

1651

1652

// Keyboard shortcuts: ← → for step, Space for play/pause

1653

document.addEventListener('keydown', (e) => {

1654

if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;

1655

if (e.key === 'ArrowLeft') {

1656

e.preventDefault();

1657

pauseTour();

1658

if (currentStep > 0) revealStep(currentStep - 1);

1659

} else if (e.key === 'ArrowRight') {

1660

e.preventDefault();

1661

pauseTour();

1662

if (currentStep < DATA.events.length - 1) revealStep(currentStep + 1);

1663

} else if (e.key === ' ') {

1664

e.preventDefault();

1665

if (isPlaying) pauseTour(); else playTour();

}

});

});

</script>

</body>

</html>

"""

# ---------------------------------------------------------------------------

1676

# Main render function

1677

# ---------------------------------------------------------------------------

1678

1679

1680

def render(tour: dict, output_path: pathlib.Path) -> None:

1681

"""Render the tour data into a self-contained HTML file."""

1682

print(" Rendering HTML visualization...")

1683

d3_script = _fetch_d3()

1684

1685

meta = tour.get("meta", {})

1686

stats = tour.get("stats", {})

1687

1688

# Format generated_at nicely

1689

gen_raw = meta.get("generated_at", "")

1690

try:

1691

from datetime import datetime, timezone

1692

dt = datetime.fromisoformat(gen_raw).astimezone(timezone.utc)

1693

gen_str = dt.strftime("%Y-%m-%d %H:%M UTC")

1694

except Exception:

1695

gen_str = gen_raw[:19]

1696

1697

html = _HTML_TEMPLATE

1698

html = html.replace("{{VERSION}}", str(meta.get("muse_version", "0.1.1")))

1699

html = html.replace("{{DOMAIN}}", str(meta.get("domain", "music")))

1700

html = html.replace("{{ELAPSED}}", str(meta.get("elapsed_s", "?")))

1701

html = html.replace("{{GENERATED_AT}}", gen_str)

1702

html = html.replace("{{COMMITS}}", str(stats.get("commits", 0)))

1703

html = html.replace("{{BRANCHES}}", str(stats.get("branches", 0)))

1704

html = html.replace("{{MERGES}}", str(stats.get("merges", 0)))

1705

html = html.replace("{{CONFLICTS}}", str(stats.get("conflicts_resolved", 0)))

1706

html = html.replace("{{OPS}}", str(stats.get("operations", 0)))

1707

html = html.replace("{{ARCH_HTML}}", _ARCH_HTML)

1708

html = html.replace("{{D3_SCRIPT}}", d3_script)

1709

html = html.replace("{{DATA_JSON}}", json.dumps(tour, separators=(",", ":")))

1710

1711

output_path.write_text(html, encoding="utf-8")

1712

size_kb = output_path.stat().st_size // 1024

1713

print(f" HTML written ({size_kb}KB) → {output_path}")

1714

1715

1716

# ---------------------------------------------------------------------------

1717

# Stand-alone entry point

1718

# ---------------------------------------------------------------------------

1719

1720

if __name__ == "__main__":

1721

import argparse

1722

parser = argparse.ArgumentParser(description="Render tour_de_force.json → HTML")

1723

parser.add_argument("json_file", help="Path to tour_de_force.json")

1724

parser.add_argument("--out", default=None, help="Output HTML path")

1725

args = parser.parse_args()

1726

1727

json_path = pathlib.Path(args.json_file)

1728

if not json_path.exists():

1729

print(f"❌ File not found: {json_path}", file=sys.stderr)

1730

sys.exit(1)

1731

1732

data = json.loads(json_path.read_text())

1733

out_path = pathlib.Path(args.out) if args.out else json_path.with_suffix(".html")

1734

render(data, out_path)

1735

print(f"Open: file://{out_path.resolve()}")