Created log-viewer.html to view logs

[ajay-sreeram]

It was difficult to understand the logs, so vibe coded this simple log viewer with workflow view, message flow view and raw logs view.

[saqadri]

@ajay-sreeram whoa, this is an awesome idea and thanks for the contribution! Can you please add usage instructions (both to PR and to the README). That'll help me review this better as well.

Would like to test out a few cases before merging it in, but overall quite supportive of having this.

[graphite-app]

The function reinitializeResizableColumns() is referenced but not defined in the code, which will cause a JavaScript runtime error when executed. Either implement this function to handle column resizing functionality or remove this call to prevent errors. The column resizing UI elements (the .resizer class) are defined in CSS, suggesting this functionality was intended but not fully implemented.

Spotted by Diamond

Is this helpful? React 👍 or 👎 to let us know.

[graphite-app]

The toggleView button in the header appears to be unused - there's no event listener attached to it in the JavaScript code. This creates a confusing user experience since clicking the button won't perform any action. Consider either:

1. Removing this button since the view switching functionality is already handled by the showRawLogs, showWorkflow, and showMessageFlow buttons below, or
2. Adding an event listener to implement the toggle functionality, perhaps cycling through the three available views.

This would improve the UI consistency and prevent user confusion.

Spotted by Diamond

Is this helpful? React 👍 or 👎 to let us know.

[graphite-app]

The formatResult function directly inserts potentially untrusted content into the DOM without sanitizing HTML, creating a cross-site scripting (XSS) vulnerability. An attacker could craft log content containing malicious script tags that would execute when displayed.

Consider implementing HTML sanitization before inserting content:

function formatResult(result) {
    // First escape HTML special characters
    const escaped = result
        .replace(/&/g, '&')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#039;');
    
    // Then handle the special characters for display
    return escaped.replace(/\\n/g, '<br>').replace(/\\\\/g, '\\').replace(/\\\(/g, '(').replace(/\\\)/g, ')');
}

Alternatively, use a dedicated library like DOMPurify to handle sanitization more comprehensively.

Suggested change

	function formatResult(result) {
	// Replace \\ with \ and handle newlines for display
	return result.replace(/\\n/g, '<br>').replace(/\\\\/g, '\\').replace(/\\\(/g, '(').replace(/\\\)/g, ')');
	}
	function formatResult(result) {
	// First escape HTML special characters
	const escaped = result
	.replace(/&/g, '&amp;')
	.replace(/</g, '&lt;')
	.replace(/>/g, '&gt;')
	.replace(/"/g, '&quot;')
	.replace(/'/g, '&#039;');
	// Then handle the special characters for display
	return escaped.replace(/\\n/g, '<br>').replace(/\\\\/g, '\\').replace(/\\\(/g, '(').replace(/\\\)/g, ')');
	}

Spotted by Diamond

Is this helpful? React 👍 or 👎 to let us know.