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>

920

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

921

</div>

922

923

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

924

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

925

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

926

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

</div>

</div>

</div>

<h2>How Muse Works</h2>

934

935

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

936

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

937

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

938

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

939

gets everything else for free.

940

941

Music is the reference implementation. Genomics sequences, scientific simulation

942

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

</p>

</div>

</div>

</div>

<h2>Domain Plugin Registry</h2>

953

954

Every domain registered with Muse appears here. Each plugin implements the

955

<strong>six-method MuseDomainPlugin protocol</strong> and gets the full VCS — branching,

956

merging, conflict resolution, time-travel, and diff — for free.

957

Scaffold a new domain with a single command.

</p>

</div>

</div>

<h2>CRDT Primitives</h2>

966

967

Plugins that implement <strong>CRDTPlugin</strong> get four convergent data structures

968

that merge without coordination. Any two replicas always converge to the same state —

969

no central authority required.

</p>

</div>

</div>

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

977

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

</footer>

</div>

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

992

const DATA = {{DATA_JSON}};

993

994

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

995

const ROW_H = 62;

996

const COL_W = 90;

997

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

998

const R_NODE = 11;

999

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

1000

const PLAY_INTERVAL_MS = 1200;

1001

1002

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

const DIM_COLORS = {

melodic: '#bc8cff',

rhythmic: '#3fb950',

harmonic: '#58a6ff',

dynamic: '#f9a825',

structural: '#ef5350',

1009

};

1010

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

1011

1012

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

1013

function getDims(commit) {

1014

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

1015

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

1016

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

1017

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

1018

return ['rhythmic','structural'];

1019

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

1020

return ['harmonic','structural'];

1021

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

1022

return ['melodic','rhythmic'];

1023

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

1024

return ['melodic','dynamic'];

1025

if (m.includes('syncopated'))

1026

return ['rhythmic','dynamic'];

1027

if (m.includes('descending'))

1028

return ['melodic','harmonic'];

1029

if (m.includes('ascending'))

1030

return ['melodic'];

1031

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

1032

return ['rhythmic','dynamic'];

1033

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

1034

return ['melodic','structural'];

1035

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

1036

return ['harmonic','structural'];

1037

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

1038

return ['structural'];

1039

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

1040

return ['melodic'];

1041

if (m.includes('revert'))

return ['melodic'];

return [];

}

function getConflicts(commit) {

1047

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

1048

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

return [];

}

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

1053

const DIM_DATA = {};

1054

const DIM_CONFLICTS = {};

1055

function _initDimMaps() {

1056

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

1057

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

1058

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

1059

});

1060

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

1061

DATA.events.forEach(ev => {

1062

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

1063

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

1064

if (full) {

1065

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

1066

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

}

}

});

}

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

1074

let currentStep = -1;

1075

let isPlaying = false;

1076

let playTimer = null;

1077

1078

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

1079

function escHtml(s) {

return String(s)

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

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

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

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

}

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

1088

function topoSort(commits) {

1089

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

1090

const visited = new Set();

1091

const result = [];

1092

function visit(id) {

1093

if (visited.has(id)) return;

1094

visited.add(id);

1095

const c = map.get(id);

1096

if (!c) return;

1097

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

1098

result.push(c);

1099

}

1100

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

1101

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

1102

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

return result;

}

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

1107

function computeLayout(commits) {

1108

const sorted = topoSort(commits);

1109

const branchCols = {};

1110

let nextCol = 0;

1111

// Assign columns in BRANCH_ORDER first, then any extras

1112

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

1113

commits.forEach(c => {

1114

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

1115

});

1116

const numCols = nextCol;

1117

const positions = new Map();

1118

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

1119

positions.set(c.id, {

1120

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

1121

y: PAD.top + i * ROW_H,

1122

row: i,

1123

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

1124

});

1125

});

1126

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

1127

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

1128

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

1129

}

1130

1131

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

1132

function drawDAG() {

1133

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

1134

if (!commits.length) return;

1135

1136

const layout = computeLayout(commits);

1137

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

1138

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

1139

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

1140

1141

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

1142

.attr('width', svgW)

1143

.attr('height', svgH);

1144

1145

// ---- Edges ----

1146

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

1147

sorted.forEach(commit => {

1148

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

1149

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

1150

const ppos = positions.get(pid);

1151

if (!pos || !ppos) return;

1152

const color = pIdx === 0

1153

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

1154

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

1155

1156

let pathStr;

1157

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

1158

// Same column → straight line

1159

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

1160

} else {

1161

// Different columns → S-curve bezier

1162

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

1163

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)

1168

.attr('stroke-width', 1.8)

1169

.attr('fill', 'none')

1170

.attr('opacity', 0.45)

1171

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

});

});

// ---- Nodes ----

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

1177

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

1178

1179

sorted.forEach(commit => {

1180

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

1181

if (!pos) return;

1182

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

1183

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

1184

1185

const g = nodeG.append('g')

1186

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

1187

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

1188

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

1189

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

if (isMerge) {

g.append('circle')

.attr('r', R_NODE + 6)

1194

.attr('fill', 'none')

1195

.attr('stroke', color)

1196

.attr('stroke-width', 1.5)

1197

.attr('opacity', 0.35);

}

g.append('circle')

.attr('r', R_NODE)

.attr('fill', color)

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

1204

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

// Short ID

g.append('text')

.attr('x', R_NODE + 7)

1209

.attr('y', 0)

1210

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

1211

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

1212

.text(commit.short);

1213

1214

// Message (truncated)

1215

const maxLen = 38;

1216

const msg = commit.message.length > maxLen

1217

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

1218

: commit.message;

1219

g.append('text')

1220

.attr('x', R_NODE + 7)

1221

.attr('y', 13)

1222

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

.text(msg);

// Dimension dots below node

1227

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

1228

if (dims.length > 0) {

1229

const dotR = 4, dotSp = 11;

1230

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

1231

const dotsG = g.append('g')

1232

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

1233

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

1234

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

1235

const active = dims.includes(dim);

1236

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

1237

dotsG.append('circle')

1238

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

1239

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

1240

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

1241

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

1242

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

});

}

// Hover tooltip

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

1248

tooltip.classList.add('visible');

1249

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

1250

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

1251

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

1252

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

1253

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

1254

commit.files.length

1255

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

1256

: '(empty snapshot)';

1257

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

1258

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

1259

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

1260

if (tipDimEl) {

1261

tipDimEl.innerHTML = tipDims.length

1262

? tipDims.map(d => {

1263

const c = tipConf.includes(d);

1264

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

}).join('')

: '';

}

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

1269

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

1270

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

1271

tooltip.classList.remove('visible');

});

});

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

1276

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

1277

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

1278

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

1279

item.className = 'legend-item';

1280

item.innerHTML =

1281

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

1282

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

1283

legend.appendChild(item);

});

}

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

1288

const ACT_ICONS = {

1289

1:'🎵', 2:'🌿', 3:'⚡', 4:'🔀', 5:'⏪',

1290

6:'🔬', 7:'🗂️', 8:'⚙️', 9:'🔮'

1291

};

1292

const ACT_COLORS = {

1293

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

1294

6:'#26c6da', 7:'#58a6ff', 8:'#ef5350', 9:'#bc8cff'

1295

};

1296

const RICH_ACTS = new Set([6, 7, 8, 9]);

1297

const CRDT_ACT = 9;

1298

1299

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

1300

function buildActJumpBar() {

1301

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

1302

if (!bar) return;

1303

1304

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

1305

lbl.textContent = 'Jump:';

1306

bar.appendChild(lbl);

1307

1308

// Collect unique acts

1309

const acts = [];

1310

let last = -1;

1311

DATA.events.forEach(ev => {

1312

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

});

acts.forEach(a => {

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

1317

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

1318

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

1319

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

1320

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

1321

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

1322

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

1323

pauseTour();

1324

// Find first event index for this act

1325

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

1326

if (idx >= 0) {

1327

// Reveal up to this point

1328

revealStep(idx);

1329

// Scroll the act header into view

1330

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

1331

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

1332

}

1333

});

1334

bar.appendChild(btn);

});

// Reveal All button

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

1339

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

1340

allBtn.textContent = '✦ Reveal All';

1341

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

1342

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

1343

pauseTour();

1344

revealStep(DATA.events.length - 1);

1345

});

1346

bar.appendChild(allBtn);

1347

}

1348

1349

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

1350

function buildEventLog() {

1351

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

1352

let lastAct = -1;

1353

1354

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

1355

if (ev.act !== lastAct) {

1356

lastAct = ev.act;

1357

1358

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

1359

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

1360

hdr.className = 'act-header';

1361

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

1362

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

1363

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

1364

hdr.innerHTML =

1365

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

1366

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

1367

if (ev.act >= 6) {

1368

hdr.style.color = col;

1369

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

1370

}

1371

list.appendChild(hdr);

1372

}

1373

1374

const isRich = RICH_ACTS.has(ev.act);

1375

const isCrdt = ev.act === CRDT_ACT;

1376

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

1377

1378

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

1379

item.className = 'event-item' + (isRich ? ' rich-act' : '');

1380

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

1381

1382

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

1383

item.classList.add('failed');

}

// Parse cmd

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

1388

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

1389

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

// Output class

let outClass = '';

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

1394

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

1395

1396

// Line limit: rich acts get 15 lines

1397

const lineLimit = isRich ? 15 : 6;

1398

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

1399

1400

// Build cmd line: CRDT/API events don't get the `$` shell prefix

1401

let cmdLine;

1402

if (isCrdt && !isCliCmd) {

1403

const accentCol = ACT_COLORS[CRDT_ACT];

1404

cmdLine =

1405

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

1406

`<span style="color:${accentCol};font-size:10px;margin-right:4px">API</span>` +

1407

`<span class="cmd-name" style="color:${accentCol}">${escHtml(ev.cmd)}</span>` +

`</div>`;

} else {

cmdLine =

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

1412

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

1413

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

1414

(cmdArgs

1415

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

1424

: '') +

1425

(() => {

1426

if (!ev.commit_id) return '';

1427

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

1428

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

1429

if (!dims.length) return '';

1430

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

1431

const isc = conf.includes(d);

1432

const col = DIM_COLORS[d];

1433

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

1434

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

1435

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

1436

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

1437

})() +

1438

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

1439

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

1440

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

1441

`</div>`;

1442

1443

list.appendChild(item);

});

}

/* ===== Domain Dashboard section ===== */

1448

function buildDomainSection() {

1449

const grid = document.getElementById('domain-grid');

1450

if (!grid) return;

1451

1452

// Extract domain data from the domains_json event (act 7, op domains_json)

1453

const domEv = DATA.events.find(e => e.op === 'domains_json');

1454

let domains = [];

1455

if (domEv) {

1456

try { domains = JSON.parse(domEv.output); } catch(_) {}

1457

}

1458

1459

const capClass = cap => {

1460

if (cap === 'CRDT') return 'cap-pill cap-crdt';

1461

if (cap === 'OT Merge') return 'cap-pill cap-ot';

1462

if (cap === 'Domain Schema')return 'cap-pill cap-schema';

1463

if (cap === 'Typed Deltas') return 'cap-pill cap-delta';

return 'cap-pill';

};

domains.forEach(d => {

1468

const isActive = d.active === 'true';

1469

const isScaffold = d.domain === 'scaffold';

1470

const dims = (d.schema && d.schema.dimensions) ? d.schema.dimensions : [];

1471

const desc = (d.schema && d.schema.description) ? d.schema.description : '';

1472

1473

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

1474

card.className = 'domain-card' +

1475

(isActive ? ' active-domain' : '') +

1476

(isScaffold ? ' scaffold-domain' : '');

1477

1478

const caps = (d.capabilities || [])

1479

.map(c => `<span class="${capClass(c)}">${escHtml(c)}</span>`).join('');

1480

1481

const dimList = dims.map(dim =>

1482

`<span style="color:var(--text-mute)">${escHtml(dim.name)}</span>`

1483

).join(' · ') || '—';

1484

1485

card.innerHTML =

1486

`<div class="domain-card-header">` +

1487

`<span class="domain-badge${isActive ? ' active' : ''}">${isActive ? '● active' : '○ registered'}</span>` +

1488

`<span class="domain-name">${escHtml(d.domain)}</span>` +

1489

(isActive ? '<span class="domain-active-dot"></span>' : '') +

1490

`</div>` +

1491

`<div class="domain-card-body">` +

1492

`<div class="domain-desc">${escHtml(desc.slice(0, 120))}${desc.length > 120 ? '…' : ''}</div>` +

1493

`<div class="domain-caps">${caps}</div>` +

1494

`<div class="domain-dims"><strong>Dimensions:</strong> ${dimList}</div>` +

1495

`</div>`;

1496

1497

grid.appendChild(card);

1498

});

1499

1500

// "Scaffold your own" card

1501

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

1502

newCard.className = 'domain-new-card';

1503

newCard.innerHTML =

1504

`<div class="domain-new-icon">＋</div>` +

1505

`<div class="domain-new-title">Scaffold a new domain</div>` +

1506

`<div class="domain-new-cmd">muse domains --new <name></div>` +

1507

`<div class="domain-new-link">` +

1508

`then implement 6 methods · ` +

1509

`<a href="docs/guide/plugin-authoring-guide.md">plugin authoring guide →</a>` +

1510

`</div>`;

1511

grid.appendChild(newCard);

1512

}

1513

1514

/* ===== CRDT Primitives section ===== */

1515

function buildCRDTSection() {

1516

const grid = document.getElementById('crdt-grid');

1517

if (!grid) return;

1518

1519

const crdtEvents = DATA.events.filter(e => e.act === CRDT_ACT);

1520

1521

const meta = [

1522

{ type:'ORSet', sub:'Observed-Remove Set', color:'#bc8cff', icon:'∪' },

1523

{ type:'LWWRegister', sub:'Last-Write-Wins Register', color:'#58a6ff', icon:'✎' },

1524

{ type:'GCounter', sub:'Grow-Only Distributed Counter',color:'#3fb950', icon:'↑' },

1525

{ type:'VectorClock', sub:'Causal Ordering', color:'#f9a825', icon:'⊕' },

1526

];

1527

1528

crdtEvents.forEach((ev, i) => {

1529

const m = meta[i] || { type: ev.op, sub: '', color: '#bc8cff', icon: '◆' };

1530

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

1531

card.className = 'crdt-card';

1532

card.innerHTML =

1533

`<div class="crdt-card-header" style="background:${m.color}10;border-bottom-color:${m.color}30">` +

1534

`<span class="crdt-type-badge" style="color:${m.color};background:${m.color}15;border-color:${m.color}40">${m.icon} ${m.type}</span>` +

1535

`</div>` +

1536

`<div class="crdt-card-body">` +

1537

`<div style="font-size:12px;color:var(--text-mute);margin-bottom:10px;font-style:italic">${m.sub}</div>` +

1538

`<div class="crdt-output">${escHtml(ev.output)}</div>` +

1539

`</div>`;

1540

grid.appendChild(card);

});

}

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

1546

function buildDimTimeline() {

1547

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

1548

if (!matrix) return;

1549

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

1550

1551

// Commit ID header row

1552

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

1553

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

1554

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

1555

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

1556

hrow.appendChild(sp);

1557

sorted.forEach(c => {

1558

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

1559

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

1560

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

1561

cell.title = c.message;

1562

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

1563

hrow.appendChild(cell);

1564

});

1565

matrix.appendChild(hrow);

1566

1567

// One row per dimension

1568

DIMS.forEach(dim => {

1569

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

1570

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

1571

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

1572

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

1573

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

1574

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

1575

dot.style.background = DIM_COLORS[dim];

1576

lbl.appendChild(dot);

1577

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

1578

row.appendChild(lbl);

1579

1580

sorted.forEach(c => {

1581

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

1582

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

1583

const active = dims.includes(dim);

1584

const isConf = conf.includes(dim);

1585

const col = DIM_COLORS[dim];

1586

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

1587

cell.className = 'dim-cell';

1588

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

1589

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

1590

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

1591

if (active) {

1592

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

1593

inner.style.color = col;

1594

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

1595

}

1596

cell.appendChild(inner);

1597

row.appendChild(cell);

1598

});

1599

matrix.appendChild(row);

});

}

function highlightDimColumn(shortId) {

1604

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

1605

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

1606

if (!shortId) return;

1607

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

1608

if (lbl) {

1609

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

1610

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

1611

}

1612

DIMS.forEach(dim => {

1613

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

1614

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

});

}

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

1619

function revealStep(stepIdx) {

1620

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

1621

1622

const ev = DATA.events[stepIdx];

1623

1624

// Reveal all events up to this step

1625

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

1626

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

1627

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

1628

}

1629

1630

// Mark current as active (remove previous)

1631

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

1632

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

1633

if (cur) {

1634

cur.classList.add('active');

1635

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

1636

}

1637

1638

// Highlight commit node

1639

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

1640

if (ev.commit_id) {

1641

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

1642

if (node) {

1643

node.classList.add('highlighted');

1644

// Scroll DAG to show the node

1645

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

1646

if (transform) {

1647

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

1648

if (m) {

1649

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

1650

const y = parseFloat(m[2]);

1651

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

}

}

}

}

// Highlight dimension matrix column

1658

highlightDimColumn(ev.commit_id || null);

1659

1660

// Update counter and step button states

1661

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

1662

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

1663

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

1664

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

1665

1666

currentStep = stepIdx;

1667

}

1668

1669

function playTour() {

1670

if (isPlaying) return;

1671

isPlaying = true;

1672

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

1673

1674

function advance() {

1675

if (!isPlaying) return;

1676

const next = currentStep + 1;

1677

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

1678

pauseTour();

1679

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

return;

}

revealStep(next);

playTimer = setTimeout(advance, PLAY_INTERVAL_MS);

}

advance();

}

function pauseTour() {

1689

isPlaying = false;

1690

clearTimeout(playTimer);

1691

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

1692

highlightDimColumn(null);

1693

}

1694

1695

function resetTour() {

1696

pauseTour();

1697

currentStep = -1;

1698

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

1699

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

1700

});

1701

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

1702

el.classList.remove('highlighted');

1703

});

1704

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

1705

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

1706

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

1707

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

1708

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

1709

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

1710

highlightDimColumn(null);

1711

}

1712

1713

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

1714

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

_initDimMaps();

drawDAG();

buildEventLog();

buildActJumpBar();

buildDimTimeline();

buildDomainSection();

1721

buildCRDTSection();

1722

1723

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

1724

1725

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

1726

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

1727

});

1728

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

1729

pauseTour();

1730

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

1731

});

1732

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

1733

pauseTour();

1734

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

1735

});

1736

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

1737

1738

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

1739

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

1740

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

1741

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

1742

e.preventDefault();

1743

pauseTour();

1744

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

1745

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

1746

e.preventDefault();

1747

pauseTour();

1748

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

1749

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

1750

e.preventDefault();

1751

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

}

});

});

</script>

</body>

</html>

"""

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

1762

# Main render function

1763

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

1764

1765

1766

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

1767

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

1768

print(" Rendering HTML visualization...")

1769

d3_script = _fetch_d3()

1770

1771

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

1772

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

1773

1774

# Format generated_at nicely

1775

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

1776

try:

1777

from datetime import datetime, timezone

1778

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

1779

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

1780

except Exception:

1781

gen_str = gen_raw[:19]

1782

1783

html = _HTML_TEMPLATE

1784

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

1785

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

1786

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

1787

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

1788

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

1789

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

1790

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

1791

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

1792

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

1793

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

1794

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

1795

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

1796

1797

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

1798

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

1799

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

1800

1801

1802

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

1803

# Stand-alone entry point

1804

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

1805

1806

if __name__ == "__main__":

1807

import argparse

1808

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

1809

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

1810

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

1811

args = parser.parse_args()

1812

1813

json_path = pathlib.Path(args.json_file)

1814

if not json_path.exists():

1815

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

1816

sys.exit(1)

1817

1818

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

1819

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

1820

render(data, out_path)

1821

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