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>

679

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

680

</div>

681

682

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

683

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

684

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

685

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

</div>

</div>

</div>

<h2>How Muse Works</h2>

693

694

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

695

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

696

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

697

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

698

gets everything else for free.

699

700

Music is the reference implementation. Genomics sequences, scientific simulation

701

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>

711

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

</footer>

</div>

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

726

const DATA = {{DATA_JSON}};

727

728

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

729

const ROW_H = 62;

730

const COL_W = 90;

731

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

732

const R_NODE = 11;

733

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

734

const PLAY_INTERVAL_MS = 1200;

735

736

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

const DIM_COLORS = {

melodic: '#bc8cff',

rhythmic: '#3fb950',

harmonic: '#58a6ff',

dynamic: '#f9a825',

structural: '#ef5350',

743

};

744

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

745

746

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

747

function getDims(commit) {

748

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

749

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

750

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

751

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

752

return ['rhythmic','structural'];

753

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

754

return ['harmonic','structural'];

755

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

756

return ['melodic','rhythmic'];

757

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

758

return ['melodic','dynamic'];

759

if (m.includes('syncopated'))

760

return ['rhythmic','dynamic'];

761

if (m.includes('descending'))

762

return ['melodic','harmonic'];

763

if (m.includes('ascending'))

764

return ['melodic'];

765

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

766

return ['rhythmic','dynamic'];

767

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

768

return ['melodic','structural'];

769

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

770

return ['harmonic','structural'];

771

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

772

return ['structural'];

773

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

774

return ['melodic'];

775

if (m.includes('revert'))

return ['melodic'];

return [];

}

function getConflicts(commit) {

781

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

782

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

return [];

}

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

787

const DIM_DATA = {};

788

const DIM_CONFLICTS = {};

789

function _initDimMaps() {

790

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

791

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

792

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

793

});

794

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

795

DATA.events.forEach(ev => {

796

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

797

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

798

if (full) {

799

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

800

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

}

}

});

}

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

808

let currentStep = -1;

809

let isPlaying = false;

810

let playTimer = null;

811

812

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

813

function escHtml(s) {

return String(s)

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

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

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

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

}

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

822

function topoSort(commits) {

823

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

824

const visited = new Set();

825

const result = [];

826

function visit(id) {

827

if (visited.has(id)) return;

828

visited.add(id);

829

const c = map.get(id);

830

if (!c) return;

831

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

832

result.push(c);

833

}

834

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

835

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

836

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

return result;

}

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

841

function computeLayout(commits) {

842

const sorted = topoSort(commits);

843

const branchCols = {};

844

let nextCol = 0;

845

// Assign columns in BRANCH_ORDER first, then any extras

846

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

847

commits.forEach(c => {

848

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

849

});

850

const numCols = nextCol;

851

const positions = new Map();

852

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

853

positions.set(c.id, {

854

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

855

y: PAD.top + i * ROW_H,

856

row: i,

857

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

858

});

859

});

860

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

861

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

862

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

863

}

864

865

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

866

function drawDAG() {

867

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

868

if (!commits.length) return;

869

870

const layout = computeLayout(commits);

871

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

872

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

873

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

874

875

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

876

.attr('width', svgW)

877

.attr('height', svgH);

878

879

// ---- Edges ----

880

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

881

sorted.forEach(commit => {

882

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

883

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

884

const ppos = positions.get(pid);

885

if (!pos || !ppos) return;

886

const color = pIdx === 0

887

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

888

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

889

890

let pathStr;

891

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

892

// Same column → straight line

893

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

894

} else {

895

// Different columns → S-curve bezier

896

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

897

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)

902

.attr('stroke-width', 1.8)

903

.attr('fill', 'none')

904

.attr('opacity', 0.45)

905

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

});

});

// ---- Nodes ----

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

911

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

912

913

sorted.forEach(commit => {

914

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

915

if (!pos) return;

916

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

917

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

918

919

const g = nodeG.append('g')

920

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

921

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

922

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

923

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

if (isMerge) {

g.append('circle')

.attr('r', R_NODE + 6)

928

.attr('fill', 'none')

929

.attr('stroke', color)

930

.attr('stroke-width', 1.5)

931

.attr('opacity', 0.35);

}

g.append('circle')

.attr('r', R_NODE)

.attr('fill', color)

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

938

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

// Short ID

g.append('text')

.attr('x', R_NODE + 7)

943

.attr('y', 0)

944

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

945

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

946

.text(commit.short);

947

948

// Message (truncated)

949

const maxLen = 38;

950

const msg = commit.message.length > maxLen

951

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

952

: commit.message;

953

g.append('text')

954

.attr('x', R_NODE + 7)

955

.attr('y', 13)

956

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

.text(msg);

// Dimension dots below node

961

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

962

if (dims.length > 0) {

963

const dotR = 4, dotSp = 11;

964

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

965

const dotsG = g.append('g')

966

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

967

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

968

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

969

const active = dims.includes(dim);

970

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

971

dotsG.append('circle')

972

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

973

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

974

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

975

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

976

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

});

}

// Hover tooltip

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

982

tooltip.classList.add('visible');

983

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

984

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

985

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

986

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

987

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

988

commit.files.length

989

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

990

: '(empty snapshot)';

991

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

992

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

993

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

994

if (tipDimEl) {

995

tipDimEl.innerHTML = tipDims.length

996

? tipDims.map(d => {

997

const c = tipConf.includes(d);

998

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

}).join('')

: '';

}

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

1003

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

1004

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

1005

tooltip.classList.remove('visible');

});

});

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

1010

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

1011

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

1012

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

1013

item.className = 'legend-item';

1014

item.innerHTML =

1015

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

1016

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

1017

legend.appendChild(item);

});

}

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

1022

function buildEventLog() {

1023

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

1024

let lastAct = -1;

1025

1026

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

1027

if (ev.act !== lastAct) {

1028

lastAct = ev.act;

1029

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

1030

hdr.className = 'act-header';

1031

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

1032

list.appendChild(hdr);

1033

}

1034

1035

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

1036

item.className = 'event-item';

1037

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

1038

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

1039

item.classList.add('failed');

1040

}

1041

1042

// Parse cmd into parts

1043

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

1044

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

1045

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

1046

1047

// Determine output class

1048

let outClass = '';

1049

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

1050

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

1051

1052

// Trim long output

1053

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

1054

1055

item.innerHTML =

1056

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

1057

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

1058

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

1059

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

1060

`</div>` +

1061

(outLines

1062

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

1063

: '') +

1064

(() => {

1065

if (!ev.commit_id) return '';

1066

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

1067

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

1068

if (!dims.length) return '';

1069

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

1070

const isc = conf.includes(d);

1071

const col = DIM_COLORS[d];

1072

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

1073

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

1074

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

1075

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

1076

})() +

1077

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

1078

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

1079

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

1080

`</div>`;

1081

1082

list.appendChild(item);

});

}

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

1088

function buildDimTimeline() {

1089

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

1090

if (!matrix) return;

1091

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

1092

1093

// Commit ID header row

1094

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

1095

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

1096

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

1097

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

1098

hrow.appendChild(sp);

1099

sorted.forEach(c => {

1100

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

1101

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

1102

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

1103

cell.title = c.message;

1104

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

1105

hrow.appendChild(cell);

1106

});

1107

matrix.appendChild(hrow);

1108

1109

// One row per dimension

1110

DIMS.forEach(dim => {

1111

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

1112

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

1113

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

1114

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

1115

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

1116

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

1117

dot.style.background = DIM_COLORS[dim];

1118

lbl.appendChild(dot);

1119

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

1120

row.appendChild(lbl);

1121

1122

sorted.forEach(c => {

1123

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

1124

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

1125

const active = dims.includes(dim);

1126

const isConf = conf.includes(dim);

1127

const col = DIM_COLORS[dim];

1128

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

1129

cell.className = 'dim-cell';

1130

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

1131

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

1132

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

1133

if (active) {

1134

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

1135

inner.style.color = col;

1136

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

1137

}

1138

cell.appendChild(inner);

1139

row.appendChild(cell);

1140

});

1141

matrix.appendChild(row);

});

}

function highlightDimColumn(shortId) {

1146

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

1147

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

1148

if (!shortId) return;

1149

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

1150

if (lbl) {

1151

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

1152

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

1153

}

1154

DIMS.forEach(dim => {

1155

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

1156

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

});

}

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

1161

function revealStep(stepIdx) {

1162

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

1163

1164

const ev = DATA.events[stepIdx];

1165

1166

// Reveal all events up to this step

1167

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

1168

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

1169

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

1170

}

1171

1172

// Mark current as active (remove previous)

1173

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

1174

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

1175

if (cur) {

1176

cur.classList.add('active');

1177

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

1178

}

1179

1180

// Highlight commit node

1181

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

1182

if (ev.commit_id) {

1183

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

1184

if (node) {

1185

node.classList.add('highlighted');

1186

// Scroll DAG to show the node

1187

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

1188

if (transform) {

1189

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

1190

if (m) {

1191

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

1192

const y = parseFloat(m[2]);

1193

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

}

}

}

}

// Highlight dimension matrix column

1200

highlightDimColumn(ev.commit_id || null);

1201

1202

// Update counter

1203

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

1204

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

1205

1206

currentStep = stepIdx;

1207

}

1208

1209

function playTour() {

1210

if (isPlaying) return;

1211

isPlaying = true;

1212

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

1213

1214

function advance() {

1215

if (!isPlaying) return;

1216

const next = currentStep + 1;

1217

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

1218

pauseTour();

1219

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

return;

}

revealStep(next);

playTimer = setTimeout(advance, PLAY_INTERVAL_MS);

}

advance();

}

function pauseTour() {

1229

isPlaying = false;

1230

clearTimeout(playTimer);

1231

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

1232

highlightDimColumn(null);

1233

}

1234

1235

function resetTour() {

1236

pauseTour();

1237

currentStep = -1;

1238

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

1239

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

1240

});

1241

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

1242

el.classList.remove('highlighted');

1243

});

1244

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

1245

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

1246

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

1247

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

1248

}

1249

1250

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

1251

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

_initDimMaps();

drawDAG();

buildEventLog();

buildDimTimeline();

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

1258

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

1259

});

1260

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

});

</script>

</body>

</html>

"""

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

1269

# Main render function

1270

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

1271

1272

1273

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

1274

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

1275

print(" Rendering HTML visualization...")

1276

d3_script = _fetch_d3()

1277

1278

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

1279

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

1280

1281

# Format generated_at nicely

1282

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

1283

try:

1284

from datetime import datetime, timezone

1285

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

1286

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

1287

except Exception:

1288

gen_str = gen_raw[:19]

1289

1290

html = _HTML_TEMPLATE

1291

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

1292

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

1293

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

1294

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

1295

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

1296

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

1297

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

1298

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

1299

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

1300

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

1301

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

1302

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

1303

1304

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

1305

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

1306

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

1307

1308

1309

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

1310

# Stand-alone entry point

1311

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

1312

1313

if __name__ == "__main__":

1314

import argparse

1315

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

1316

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

1317

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

1318

args = parser.parse_args()

1319

1320

json_path = pathlib.Path(args.json_file)

1321

if not json_path.exists():

1322

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

1323

sys.exit(1)

1324

1325

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

1326

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

1327

render(data, out_path)

1328

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