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>

683

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

684

</div>

685

686

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

687

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

688

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

689

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

</div>

</div>

</div>

<h2>How Muse Works</h2>

697

698

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

699

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

700

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

701

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

702

gets everything else for free.

703

704

Music is the reference implementation. Genomics sequences, scientific simulation

705

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>

715

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

</footer>

</div>

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

730

const DATA = {{DATA_JSON}};

731

732

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

733

const ROW_H = 62;

734

const COL_W = 90;

735

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

736

const R_NODE = 11;

737

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

738

const PLAY_INTERVAL_MS = 1200;

739

740

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

const DIM_COLORS = {

melodic: '#bc8cff',

rhythmic: '#3fb950',

harmonic: '#58a6ff',

dynamic: '#f9a825',

structural: '#ef5350',

747

};

748

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

749

750

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

751

function getDims(commit) {

752

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

753

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

754

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

755

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

756

return ['rhythmic','structural'];

757

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

758

return ['harmonic','structural'];

759

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

760

return ['melodic','rhythmic'];

761

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

762

return ['melodic','dynamic'];

763

if (m.includes('syncopated'))

764

return ['rhythmic','dynamic'];

765

if (m.includes('descending'))

766

return ['melodic','harmonic'];

767

if (m.includes('ascending'))

768

return ['melodic'];

769

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

770

return ['rhythmic','dynamic'];

771

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

772

return ['melodic','structural'];

773

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

774

return ['harmonic','structural'];

775

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

776

return ['structural'];

777

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

778

return ['melodic'];

779

if (m.includes('revert'))

return ['melodic'];

return [];

}

function getConflicts(commit) {

785

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

786

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

return [];

}

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

791

const DIM_DATA = {};

792

const DIM_CONFLICTS = {};

793

function _initDimMaps() {

794

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

795

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

796

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

797

});

798

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

799

DATA.events.forEach(ev => {

800

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

801

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

802

if (full) {

803

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

804

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

}

}

});

}

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

812

let currentStep = -1;

813

let isPlaying = false;

814

let playTimer = null;

815

816

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

817

function escHtml(s) {

return String(s)

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

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

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

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

}

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

826

function topoSort(commits) {

827

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

828

const visited = new Set();

829

const result = [];

830

function visit(id) {

831

if (visited.has(id)) return;

832

visited.add(id);

833

const c = map.get(id);

834

if (!c) return;

835

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

836

result.push(c);

837

}

838

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

839

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

840

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

return result;

}

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

845

function computeLayout(commits) {

846

const sorted = topoSort(commits);

847

const branchCols = {};

848

let nextCol = 0;

849

// Assign columns in BRANCH_ORDER first, then any extras

850

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

851

commits.forEach(c => {

852

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

853

});

854

const numCols = nextCol;

855

const positions = new Map();

856

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

857

positions.set(c.id, {

858

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

859

y: PAD.top + i * ROW_H,

860

row: i,

861

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

862

});

863

});

864

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

865

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

866

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

867

}

868

869

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

870

function drawDAG() {

871

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

872

if (!commits.length) return;

873

874

const layout = computeLayout(commits);

875

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

876

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

877

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

878

879

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

880

.attr('width', svgW)

881

.attr('height', svgH);

882

883

// ---- Edges ----

884

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

885

sorted.forEach(commit => {

886

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

887

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

888

const ppos = positions.get(pid);

889

if (!pos || !ppos) return;

890

const color = pIdx === 0

891

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

892

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

893

894

let pathStr;

895

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

896

// Same column → straight line

897

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

898

} else {

899

// Different columns → S-curve bezier

900

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

901

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)

906

.attr('stroke-width', 1.8)

907

.attr('fill', 'none')

908

.attr('opacity', 0.45)

909

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

});

});

// ---- Nodes ----

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

915

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

916

917

sorted.forEach(commit => {

918

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

919

if (!pos) return;

920

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

921

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

922

923

const g = nodeG.append('g')

924

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

925

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

926

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

927

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

if (isMerge) {

g.append('circle')

.attr('r', R_NODE + 6)

932

.attr('fill', 'none')

933

.attr('stroke', color)

934

.attr('stroke-width', 1.5)

935

.attr('opacity', 0.35);

}

g.append('circle')

.attr('r', R_NODE)

.attr('fill', color)

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

942

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

// Short ID

g.append('text')

.attr('x', R_NODE + 7)

947

.attr('y', 0)

948

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

949

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

950

.text(commit.short);

951

952

// Message (truncated)

953

const maxLen = 38;

954

const msg = commit.message.length > maxLen

955

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

956

: commit.message;

957

g.append('text')

958

.attr('x', R_NODE + 7)

959

.attr('y', 13)

960

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

.text(msg);

// Dimension dots below node

965

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

966

if (dims.length > 0) {

967

const dotR = 4, dotSp = 11;

968

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

969

const dotsG = g.append('g')

970

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

971

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

972

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

973

const active = dims.includes(dim);

974

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

975

dotsG.append('circle')

976

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

977

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

978

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

979

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

980

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

});

}

// Hover tooltip

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

986

tooltip.classList.add('visible');

987

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

988

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

989

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

990

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

991

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

992

commit.files.length

993

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

994

: '(empty snapshot)';

995

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

996

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

997

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

998

if (tipDimEl) {

999

tipDimEl.innerHTML = tipDims.length

1000

? tipDims.map(d => {

1001

const c = tipConf.includes(d);

1002

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

}).join('')

: '';

}

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

1007

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

1008

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

1009

tooltip.classList.remove('visible');

});

});

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

1014

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

1015

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

1016

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

1017

item.className = 'legend-item';

1018

item.innerHTML =

1019

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

1020

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

1021

legend.appendChild(item);

});

}

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

1026

function buildEventLog() {

1027

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

1028

let lastAct = -1;

1029

1030

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

1031

if (ev.act !== lastAct) {

1032

lastAct = ev.act;

1033

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

1034

hdr.className = 'act-header';

1035

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

1036

list.appendChild(hdr);

1037

}

1038

1039

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

1040

item.className = 'event-item';

1041

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

1042

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

1043

item.classList.add('failed');

1044

}

1045

1046

// Parse cmd into parts

1047

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

1048

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

1049

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

1050

1051

// Determine output class

1052

let outClass = '';

1053

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

1054

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

1055

1056

// Trim long output

1057

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

1058

1059

item.innerHTML =

1060

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

1061

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

1062

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

1063

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

1064

`</div>` +

1065

(outLines

1066

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

1067

: '') +

1068

(() => {

1069

if (!ev.commit_id) return '';

1070

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

1071

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

1072

if (!dims.length) return '';

1073

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

1074

const isc = conf.includes(d);

1075

const col = DIM_COLORS[d];

1076

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

1077

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

1078

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

1079

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

1080

})() +

1081

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

1082

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

1083

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

1084

`</div>`;

1085

1086

list.appendChild(item);

});

}

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

1092

function buildDimTimeline() {

1093

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

1094

if (!matrix) return;

1095

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

1096

1097

// Commit ID header row

1098

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

1099

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

1100

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

1101

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

1102

hrow.appendChild(sp);

1103

sorted.forEach(c => {

1104

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

1105

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

1106

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

1107

cell.title = c.message;

1108

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

1109

hrow.appendChild(cell);

1110

});

1111

matrix.appendChild(hrow);

1112

1113

// One row per dimension

1114

DIMS.forEach(dim => {

1115

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

1116

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

1117

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

1118

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

1119

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

1120

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

1121

dot.style.background = DIM_COLORS[dim];

1122

lbl.appendChild(dot);

1123

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

1124

row.appendChild(lbl);

1125

1126

sorted.forEach(c => {

1127

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

1128

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

1129

const active = dims.includes(dim);

1130

const isConf = conf.includes(dim);

1131

const col = DIM_COLORS[dim];

1132

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

1133

cell.className = 'dim-cell';

1134

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

1135

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

1136

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

1137

if (active) {

1138

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

1139

inner.style.color = col;

1140

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

1141

}

1142

cell.appendChild(inner);

1143

row.appendChild(cell);

1144

});

1145

matrix.appendChild(row);

});

}

function highlightDimColumn(shortId) {

1150

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

1151

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

1152

if (!shortId) return;

1153

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

1154

if (lbl) {

1155

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

1156

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

1157

}

1158

DIMS.forEach(dim => {

1159

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

1160

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

});

}

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

1165

function revealStep(stepIdx) {

1166

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

1167

1168

const ev = DATA.events[stepIdx];

1169

1170

// Reveal all events up to this step

1171

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

1172

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

1173

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

1174

}

1175

1176

// Mark current as active (remove previous)

1177

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

1178

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

1179

if (cur) {

1180

cur.classList.add('active');

1181

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

1182

}

1183

1184

// Highlight commit node

1185

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

1186

if (ev.commit_id) {

1187

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

1188

if (node) {

1189

node.classList.add('highlighted');

1190

// Scroll DAG to show the node

1191

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

1192

if (transform) {

1193

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

1194

if (m) {

1195

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

1196

const y = parseFloat(m[2]);

1197

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

}

}

}

}

// Highlight dimension matrix column

1204

highlightDimColumn(ev.commit_id || null);

1205

1206

// Update counter and step button states

1207

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

1208

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

1209

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

1210

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

1211

1212

currentStep = stepIdx;

1213

}

1214

1215

function playTour() {

1216

if (isPlaying) return;

1217

isPlaying = true;

1218

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

1219

1220

function advance() {

1221

if (!isPlaying) return;

1222

const next = currentStep + 1;

1223

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

1224

pauseTour();

1225

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

return;

}

revealStep(next);

playTimer = setTimeout(advance, PLAY_INTERVAL_MS);

}

advance();

}

function pauseTour() {

1235

isPlaying = false;

1236

clearTimeout(playTimer);

1237

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

1238

highlightDimColumn(null);

1239

}

1240

1241

function resetTour() {

1242

pauseTour();

1243

currentStep = -1;

1244

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

1245

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

1246

});

1247

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

1248

el.classList.remove('highlighted');

1249

});

1250

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

1251

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

1252

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

1253

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

1254

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

1255

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

1256

highlightDimColumn(null);

1257

}

1258

1259

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

1260

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

_initDimMaps();

drawDAG();

buildEventLog();

buildDimTimeline();

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

1267

1268

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

1269

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

1270

});

1271

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

1272

pauseTour();

1273

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

1274

});

1275

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

1276

pauseTour();

1277

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

1278

});

1279

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

1280

1281

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

1282

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

1283

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

1284

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

1285

e.preventDefault();

1286

pauseTour();

1287

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

1288

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

1289

e.preventDefault();

1290

pauseTour();

1291

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

1292

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

1293

e.preventDefault();

1294

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

}

});

});

</script>

</body>

</html>

"""

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

1305

# Main render function

1306

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

1307

1308

1309

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

1310

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

1311

print(" Rendering HTML visualization...")

1312

d3_script = _fetch_d3()

1313

1314

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

1315

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

1316

1317

# Format generated_at nicely

1318

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

1319

try:

1320

from datetime import datetime, timezone

1321

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

1322

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

1323

except Exception:

1324

gen_str = gen_raw[:19]

1325

1326

html = _HTML_TEMPLATE

1327

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

1328

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

1329

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

1330

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

1331

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

1332

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

1333

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

1334

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

1335

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

1336

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

1337

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

1338

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

1339

1340

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

1341

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

1342

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

1343

1344

1345

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

1346

# Stand-alone entry point

1347

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

1348

1349

if __name__ == "__main__":

1350

import argparse

1351

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

1352

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

1353

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

1354

args = parser.parse_args()

1355

1356

json_path = pathlib.Path(args.json_file)

1357

if not json_path.exists():

1358

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

1359

sys.exit(1)

1360

1361

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

1362

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

1363

render(data, out_path)

1364

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