Phase 1: Improve log display formatting
Changes: - Added formatLogEntry() function to parse and format log entries - Replaced raw JSON display with readable formatted logs - Added specific formatting for command_sent and command_result logs - Show timestamp, status, duration, stdout/stderr in organized layout - Color-coded success (green) and failure (red) states - Added scrollable output sections with max-height - Syntax highlighting for command code blocks - Terminal-themed styling with green/amber colors Benefits: - Much easier to read execution logs - Clear visual distinction between sent/result logs - Professional terminal aesthetic maintained - Better UX for debugging command execution Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -574,6 +574,85 @@
|
||||
white-space: pre;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
/* Formatted Log Entry Styles */
|
||||
.log-entry {
|
||||
background: #000;
|
||||
border: 1px solid var(--terminal-green);
|
||||
border-left: 3px solid var(--terminal-green);
|
||||
padding: 12px;
|
||||
margin-bottom: 12px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.log-entry.success {
|
||||
border-left-color: var(--terminal-green);
|
||||
}
|
||||
|
||||
.log-entry.failed {
|
||||
border-left-color: #ff4444;
|
||||
}
|
||||
|
||||
.log-timestamp {
|
||||
color: var(--terminal-amber);
|
||||
font-size: 0.85em;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.log-title {
|
||||
color: var(--terminal-green);
|
||||
font-weight: bold;
|
||||
text-shadow: var(--glow-green);
|
||||
margin-bottom: 8px;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.log-entry.failed .log-title {
|
||||
color: #ff4444;
|
||||
text-shadow: 0 0 5px #ff4444;
|
||||
}
|
||||
|
||||
.log-details {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.log-field {
|
||||
margin: 6px 0;
|
||||
color: var(--terminal-green);
|
||||
}
|
||||
|
||||
.log-label {
|
||||
color: var(--terminal-amber);
|
||||
font-weight: bold;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.log-output {
|
||||
background: #0a0a0a;
|
||||
border: 1px solid #003300;
|
||||
padding: 10px;
|
||||
margin: 6px 0;
|
||||
color: var(--terminal-green);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.9em;
|
||||
overflow-x: auto;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.log-error {
|
||||
color: #ff6666;
|
||||
border-color: #330000;
|
||||
}
|
||||
|
||||
.log-entry code {
|
||||
background: #001a00;
|
||||
padding: 2px 6px;
|
||||
border: 1px solid #003300;
|
||||
color: var(--terminal-green);
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -914,7 +993,7 @@
|
||||
if (execution.logs && execution.logs.length > 0) {
|
||||
html += '<h3 style="margin-top: 20px; margin-bottom: 10px;">Execution Logs:</h3>';
|
||||
execution.logs.forEach(log => {
|
||||
html += `<div class="log-entry">${JSON.stringify(log, null, 2)}</div>`;
|
||||
html += formatLogEntry(log);
|
||||
});
|
||||
}
|
||||
|
||||
@@ -928,6 +1007,50 @@
|
||||
}
|
||||
}
|
||||
|
||||
function formatLogEntry(log) {
|
||||
const timestamp = new Date(log.timestamp).toLocaleTimeString();
|
||||
|
||||
// Format based on log action type
|
||||
if (log.action === 'command_sent') {
|
||||
return `
|
||||
<div class="log-entry log-command-sent">
|
||||
<div class="log-timestamp">[${timestamp}]</div>
|
||||
<div class="log-title">Command Sent</div>
|
||||
<div class="log-details">
|
||||
<div class="log-field"><span class="log-label">Command:</span> <code>${escapeHtml(log.command)}</code></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
if (log.action === 'command_result') {
|
||||
const statusIcon = log.success ? '✓' : '✗';
|
||||
const statusClass = log.success ? 'success' : 'failed';
|
||||
return `
|
||||
<div class="log-entry log-command-result ${statusClass}">
|
||||
<div class="log-timestamp">[${timestamp}]</div>
|
||||
<div class="log-title">${statusIcon} Command Result</div>
|
||||
<div class="log-details">
|
||||
<div class="log-field"><span class="log-label">Status:</span> ${log.success ? 'Success' : 'Failed'}</div>
|
||||
${log.duration ? `<div class="log-field"><span class="log-label">Duration:</span> ${log.duration}ms</div>` : ''}
|
||||
${log.stdout ? `<div class="log-field"><span class="log-label">Output:</span><pre class="log-output">${escapeHtml(log.stdout)}</pre></div>` : ''}
|
||||
${log.stderr ? `<div class="log-field"><span class="log-label">Errors:</span><pre class="log-output log-error">${escapeHtml(log.stderr)}</pre></div>` : ''}
|
||||
${log.error ? `<div class="log-field"><span class="log-label">Error:</span> ${escapeHtml(log.error)}</div>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// Fallback for unknown log types
|
||||
return `<div class="log-entry"><pre>${JSON.stringify(log, null, 2)}</pre></div>`;
|
||||
}
|
||||
|
||||
function escapeHtml(text) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
async function respondToPrompt(executionId, response) {
|
||||
try {
|
||||
const res = await fetch(`/api/executions/${executionId}/respond`, {
|
||||
|
||||
Reference in New Issue
Block a user