feat: binlog-to-page correlation CLI and web UI

[ringo380]

Summary

• Add --correlate <tablespace> flag to inno binlog that maps row events to B+Tree leaf pages via PK lookup, with text/JSON/CSV output (Extend inno binlog with --correlate <tablespace> — annotate events with page numbers #179)
• Add correlation dropzone to web UI Binlog tab — drop a .ibd file to annotate events with clickable page numbers that navigate to the Pages tab (Web UI Binlog tab gains correlation view — click event → navigate to page #180)

Changes

CLI (--correlate)

• src/cli/app.rs — new correlate: Option<String> arg on Binlog variant
• src/cli/binlog.rs — execute_correlated() with CorrelatedBinlogAnalysis JSON struct, enriched text/CSV output with Page and PK columns
• src/main.rs — wire correlate through dispatch

Web UI (correlation view)

• web/src/components/binlog.js — dropzone for .ibd file, WASM correlate_binlog_events() call, enriched events table with Page/PK columns, clickable page navigation, clear button
• web/src/main.js — binlogCorrelationTs state, save/restore binlog context on page navigation, "Back to Binlog" banner
• web/src/utils/help.js — updated tab description with correlation tips

Test plan

• cargo clippy -- -D warnings passes
• cargo test passes (982 tests including 3 new correlation output tests)
• cargo check --target wasm32-unknown-unknown --no-default-features passes
• cd web && npm run build succeeds
• Manual: inno binlog -f <binlog> --correlate <table.ibd> shows Page/PK columns
• Manual: inno binlog -f <binlog> --correlate <table.ibd> --json includes correlated_events array
• Manual: web UI — drop binlog, drop .ibd on correlation zone, verify page column, click page number navigates to Pages tab, "Back to Binlog" restores state

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.
To continue using code reviews, you can upgrade your account or add credits to your account and enable them for code reviews in your settings.

[ringo380]

Code review

Found 3 issues:

1. Tailwind dynamic class bg-innodb-green/5 constructed via string interpolation will be purged by JIT (CLAUDE.md says "Never construct class names via string interpolation... Tailwind's JIT scanner does static analysis -- use literal full class strings or the classes will be purged from production CSS")

idb-utils/web/src/components/binlog.js

Lines 300 to 304 in b5733ee

	const ce = hasCorrelation ? correlatedMap.get(evt.offset) : null;
	return `
	<tr class="border-b border-gray-800/30 hover:bg-surface-2/50${ce ? ' bg-innodb-green/5' : ''}">
	<td class="py-1 pr-3 text-innodb-cyan">${evt.offset}</td>
	<td class="py-1 pr-3 text-gray-300">${esc(evt.event_type)}</td>

The correlated row highlight (bg-innodb-green/5) only appears inside a ternary interpolation -- Tailwind cannot detect it statically and will not generate the CSS rule. Fix by using two complete literal class strings.

2. savedBinlogState not reset in onFile() -- stale "Back to Binlog" banner appears after loading a new file

idb-utils/web/src/main.js

Lines 158 to 168 in b5733ee

	function onFile(name, data) {
	fileName = name;
	fileData = data;
	diffData = null;
	isRedoLog = false;
	isBinlog = false;
	decryptedData = null;
	encryptionInfo = null;
	auditFiles = null;
	binlogCorrelationTs = null;

All other module-level state variables are reset in onFile() (diffData, isRedoLog, isBinlog, decryptedData, encryptionInfo, auditFiles, binlogCorrelationTs), but savedBinlogState is not. If a user loads a new file while in the "viewing tablespace from binlog correlation" state, the banner persists with stale state. Fix: add savedBinlogState = null alongside the other resets.

3. restoreBinlogState() does not reset currentTab to the binlog tab index -- "Back to Binlog" renders the wrong tab

idb-utils/web/src/main.js

Lines 306 to 316 in b5733ee

	function restoreBinlogState() {
	if (!savedBinlogState) return;
	fileData = savedBinlogState.fileData;
	fileName = savedBinlogState.fileName;
	isBinlog = savedBinlogState.isBinlog;
	binlogCorrelationTs = savedBinlogState.binlogCorrelationTs;
	savedBinlogState = null;
	pageCount = 0;
	renderAnalyzer();
	}

After onBinlogPageClick() navigates to the Pages tab (changing currentTab), clicking "Back to Binlog" calls restoreBinlogState() which restores isBinlog = true but leaves currentTab pointing at the old Pages tab index. Since the binlog tab set has only 1 tab (index 0), getTabId(currentTab) returns undefined and renderTab() falls through the switch without rendering anything. Fix: add currentTab = 0 before renderAnalyzer() in restoreBinlogState.

🤖 Generated with Claude Code

_{- If this code review was useful, please react with 👍. Otherwise, react with 👎.}