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>

688

<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>

689

</div>

690

691

<strong>⚡ Merge conflict (shared-state.mid)</strong> — shared-state.mid had both-sides changes in

692

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

693

<em>✓ melodic auto-merged from left</em> · <em>✓ harmonic auto-merged from right</em> —

694

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

</div>

</div>

</div>

<h2>How Muse Works</h2>

702

703

Muse is a version control system for <strong>state</strong> — any multidimensional

704

state that can be snapshotted, diffed, and merged. The core engine provides

705

the DAG, content-addressed storage, branching, merging, time-travel, and

706

conflict resolution. A domain plugin implements <strong>6 methods</strong> and

707

gets everything else for free.

708

709

Music is the reference implementation. Genomics sequences, scientific simulation

710

frames, 3D spatial fields, and financial time-series are all the same pattern.

</p>

</div>

</div>

</div>

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

720

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

</footer>

</div>

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

735

const DATA = {{DATA_JSON}};

736

737

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

738

const ROW_H = 62;

739

const COL_W = 90;

740

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

741

const R_NODE = 11;

742

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

743

const PLAY_INTERVAL_MS = 1200;

744

745

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

const DIM_COLORS = {

melodic: '#bc8cff',

rhythmic: '#3fb950',

harmonic: '#58a6ff',

dynamic: '#f9a825',

structural: '#ef5350',

752

};

753

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

754

755

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

756

function getDims(commit) {

757

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

758

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

759

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

760

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

761

return ['rhythmic','structural'];

762

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

763

return ['harmonic','structural'];

764

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

765

return ['melodic','rhythmic'];

766

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

767

return ['melodic','dynamic'];

768

if (m.includes('syncopated'))

769

return ['rhythmic','dynamic'];

770

if (m.includes('descending'))

771

return ['melodic','harmonic'];

772

if (m.includes('ascending'))

773

return ['melodic'];

774

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

775

return ['rhythmic','dynamic'];

776

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

777

return ['melodic','structural'];

778

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

779

return ['harmonic','structural'];

780

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

781

return ['structural'];

782

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

783

return ['melodic'];

784

if (m.includes('revert'))

return ['melodic'];

return [];

}

function getConflicts(commit) {

790

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

791

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

return [];

}

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

796

const DIM_DATA = {};

797

const DIM_CONFLICTS = {};

798

function _initDimMaps() {

799

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

800

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

801

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

802

});

803

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

804

DATA.events.forEach(ev => {

805

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

806

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

807

if (full) {

808

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

809

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

}

}

});

}

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

817

let currentStep = -1;

818

let isPlaying = false;

819

let playTimer = null;

820

821

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

822

function escHtml(s) {

return String(s)

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

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

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

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

}

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

831

function topoSort(commits) {

832

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

833

const visited = new Set();

834

const result = [];

835

function visit(id) {

836

if (visited.has(id)) return;

837

visited.add(id);

838

const c = map.get(id);

839

if (!c) return;

840

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

841

result.push(c);

842

}

843

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

844

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

845

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

return result;

}

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

850

function computeLayout(commits) {

851

const sorted = topoSort(commits);

852

const branchCols = {};

853

let nextCol = 0;

854

// Assign columns in BRANCH_ORDER first, then any extras

855

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

856

commits.forEach(c => {

857

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

858

});

859

const numCols = nextCol;

860

const positions = new Map();

861

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

862

positions.set(c.id, {

863

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

864

y: PAD.top + i * ROW_H,

865

row: i,

866

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

867

});

868

});

869

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

870

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

871

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

872

}

873

874

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

875

function drawDAG() {

876

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

877

if (!commits.length) return;

878

879

const layout = computeLayout(commits);

880

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

881

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

882

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

883

884

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

885

.attr('width', svgW)

886

.attr('height', svgH);

887

888

// ---- Edges ----

889

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

890

sorted.forEach(commit => {

891

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

892

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

893

const ppos = positions.get(pid);

894

if (!pos || !ppos) return;

895

const color = pIdx === 0

896

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

897

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

898

899

let pathStr;

900

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

901

// Same column → straight line

902

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

903

} else {

904

// Different columns → S-curve bezier

905

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

906

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)

911

.attr('stroke-width', 1.8)

912

.attr('fill', 'none')

913

.attr('opacity', 0.45)

914

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

});

});

// ---- Nodes ----

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

920

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

921

922

sorted.forEach(commit => {

923

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

924

if (!pos) return;

925

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

926

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

927

928

const g = nodeG.append('g')

929

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

930

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

931

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

932

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

if (isMerge) {

g.append('circle')

.attr('r', R_NODE + 6)

937

.attr('fill', 'none')

938

.attr('stroke', color)

939

.attr('stroke-width', 1.5)

940

.attr('opacity', 0.35);

}

g.append('circle')

.attr('r', R_NODE)

.attr('fill', color)

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

947

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

// Short ID

g.append('text')

.attr('x', R_NODE + 7)

952

.attr('y', 0)

953

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

954

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

955

.text(commit.short);

956

957

// Message (truncated)

958

const maxLen = 38;

959

const msg = commit.message.length > maxLen

960

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

961

: commit.message;

962

g.append('text')

963

.attr('x', R_NODE + 7)

964

.attr('y', 13)

965

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

.text(msg);

// Dimension dots below node

970

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

971

if (dims.length > 0) {

972

const dotR = 4, dotSp = 11;

973

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

974

const dotsG = g.append('g')

975

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

976

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

977

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

978

const active = dims.includes(dim);

979

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

980

dotsG.append('circle')

981

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

982

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

983

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

984

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

985

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

});

}

// Hover tooltip

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

991

tooltip.classList.add('visible');

992

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

993

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

994

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

995

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

996

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

997

commit.files.length

998

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

999

: '(empty snapshot)';

1000

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

1001

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

1002

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

1003

if (tipDimEl) {

1004

tipDimEl.innerHTML = tipDims.length

1005

? tipDims.map(d => {

1006

const c = tipConf.includes(d);

1007

return `<span style="color:${DIM_COLORS[d]};margin-right:6px">● ${d}${c?' ⚡':''}</span>`;

}).join('')

: '';

}

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

1012

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

1013

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

1014

tooltip.classList.remove('visible');

});

});

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

1019

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

1020

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

1021

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

1022

item.className = 'legend-item';

1023

item.innerHTML =

1024

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

1025

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

1026

legend.appendChild(item);

});

}

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

1031

function buildEventLog() {

1032

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

1033

let lastAct = -1;

1034

1035

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

1036

if (ev.act !== lastAct) {

1037

lastAct = ev.act;

1038

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

1039

hdr.className = 'act-header';

1040

hdr.textContent = `Act ${ev.act} — ${ev.act_title}`;

1041

list.appendChild(hdr);

1042

}

1043

1044

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

1045

item.className = 'event-item';

1046

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

1047

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

1048

item.classList.add('failed');

1049

}

1050

1051

// Parse cmd into parts

1052

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

1053

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

1054

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

1055

1056

// Determine output class

1057

let outClass = '';

1058

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

1059

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

1060

1061

// Trim long output

1062

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

1063

1064

item.innerHTML =

1065

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

1066

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

1067

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

1068

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

1069

`</div>` +

1070

(outLines

1071

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

1072

: '') +

1073

(() => {

1074

if (!ev.commit_id) return '';

1075

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

1076

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

1077

if (!dims.length) return '';

1078

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

1079

const isc = conf.includes(d);

1080

const col = DIM_COLORS[d];

1081

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

1082

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

1083

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

1084

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

1085

})() +

1086

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

1087

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

1088

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

1089

`</div>`;

1090

1091

list.appendChild(item);

});

}

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

1097

function buildDimTimeline() {

1098

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

1099

if (!matrix) return;

1100

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

1101

1102

// Commit ID header row

1103

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

1104

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

1105

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

1106

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

1107

hrow.appendChild(sp);

1108

sorted.forEach(c => {

1109

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

1110

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

1111

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

1112

cell.title = c.message;

1113

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

1114

hrow.appendChild(cell);

1115

});

1116

matrix.appendChild(hrow);

1117

1118

// One row per dimension

1119

DIMS.forEach(dim => {

1120

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

1121

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

1122

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

1123

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

1124

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

1125

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

1126

dot.style.background = DIM_COLORS[dim];

1127

lbl.appendChild(dot);

1128

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

1129

row.appendChild(lbl);

1130

1131

sorted.forEach(c => {

1132

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

1133

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

1134

const active = dims.includes(dim);

1135

const isConf = conf.includes(dim);

1136

const col = DIM_COLORS[dim];

1137

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

1138

cell.className = 'dim-cell';

1139

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

1140

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

1141

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

1142

if (active) {

1143

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

1144

inner.style.color = col;

1145

inner.textContent = isConf ? '⚡' : '●';

1146

}

1147

cell.appendChild(inner);

1148

row.appendChild(cell);

1149

});

1150

matrix.appendChild(row);

});

}

function highlightDimColumn(shortId) {

1155

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

1156

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

1157

if (!shortId) return;

1158

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

1159

if (lbl) {

1160

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

1161

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

1162

}

1163

DIMS.forEach(dim => {

1164

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

1165

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

});

}

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

1170

function revealStep(stepIdx) {

1171

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

1172

1173

const ev = DATA.events[stepIdx];

1174

1175

// Reveal all events up to this step

1176

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

1177

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

1178

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

1179

}

1180

1181

// Mark current as active (remove previous)

1182

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

1183

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

1184

if (cur) {

1185

cur.classList.add('active');

1186

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

1187

}

1188

1189

// Highlight commit node

1190

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

1191

if (ev.commit_id) {

1192

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

1193

if (node) {

1194

node.classList.add('highlighted');

1195

// Scroll DAG to show the node

1196

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

1197

if (transform) {

1198

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

1199

if (m) {

1200

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

1201

const y = parseFloat(m[2]);

1202

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

}

}

}

}

// Highlight dimension matrix column

1209

highlightDimColumn(ev.commit_id || null);

1210

1211

// Update counter and step button states

1212

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

1213

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

1214

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

1215

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

1216

1217

currentStep = stepIdx;

1218

}

1219

1220

function playTour() {

1221

if (isPlaying) return;

1222

isPlaying = true;

1223

document.getElementById('btn-play').textContent = '⏸ Pause';

1224

1225

function advance() {

1226

if (!isPlaying) return;

1227

const next = currentStep + 1;

1228

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

1229

pauseTour();

1230

document.getElementById('btn-play').textContent = '✓ Done';

return;

}

revealStep(next);

playTimer = setTimeout(advance, PLAY_INTERVAL_MS);

}

advance();

}

function pauseTour() {

1240

isPlaying = false;

1241

clearTimeout(playTimer);

1242

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

1243

highlightDimColumn(null);

1244

}

1245

1246

function resetTour() {

1247

pauseTour();

1248

currentStep = -1;

1249

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

1250

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

1251

});

1252

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

1253

el.classList.remove('highlighted');

1254

});

1255

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

1256

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

1257

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

1258

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

1259

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

1260

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

1261

highlightDimColumn(null);

1262

}

1263

1264

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

1265

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

_initDimMaps();

drawDAG();

buildEventLog();

buildDimTimeline();

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

1272

1273

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

1274

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

1275

});

1276

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

1277

pauseTour();

1278

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

1279

});

1280

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

1281

pauseTour();

1282

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

1283

});

1284

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

1285

1286

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

1287

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

1288

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

1289

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

1290

e.preventDefault();

1291

pauseTour();

1292

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

1293

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

1294

e.preventDefault();

1295

pauseTour();

1296

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

1297

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

1298

e.preventDefault();

1299

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

}

});

});

</script>

</body>

</html>

"""

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

1310

# Main render function

1311

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

1312

1313

1314

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

1315

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

1316

print(" Rendering HTML visualization...")

1317

d3_script = _fetch_d3()

1318

1319

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

1320

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

1321

1322

# Format generated_at nicely

1323

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

1324

try:

1325

from datetime import datetime, timezone

1326

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

1327

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

1328

except Exception:

1329

gen_str = gen_raw[:19]

1330

1331

html = _HTML_TEMPLATE

1332

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

1333

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

1334

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

1335

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

1336

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

1337

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

1338

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

1339

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

1340

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

1341

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

1342

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

1343

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

1344

1345

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

1346

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

1347

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

1348

1349

1350

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

1351

# Stand-alone entry point

1352

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

1353

1354

if __name__ == "__main__":

1355

import argparse

1356

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

1357

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

1358

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

1359

args = parser.parse_args()

1360

1361

json_path = pathlib.Path(args.json_file)

1362

if not json_path.exists():

1363

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

1364

sys.exit(1)

1365

1366

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

1367

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

1368

render(data, out_path)

1369

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