mirror of
https://github.com/samsonjs/vibetunnel.git
synced 2026-03-25 09:25:50 +00:00
471 lines
No EOL
14 KiB
HTML
471 lines
No EOL
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Server Console - VibeTunnel</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
:root {
|
|
--bg-primary: #1e1e1e;
|
|
--bg-secondary: #252526;
|
|
--bg-tertiary: #2d2d30;
|
|
--text-primary: #cccccc;
|
|
--text-secondary: #999999;
|
|
--text-tertiary: #666666;
|
|
--border-primary: #3e3e42;
|
|
--accent: #0e639c;
|
|
--success: #4ec9b0;
|
|
--warning: #ce9178;
|
|
--error: #f48771;
|
|
--info: #3794ff;
|
|
}
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
:root {
|
|
--bg-primary: #ffffff;
|
|
--bg-secondary: #f3f3f3;
|
|
--bg-tertiary: #f8f8f8;
|
|
--text-primary: #1e1e1e;
|
|
--text-secondary: #666666;
|
|
--text-tertiary: #999999;
|
|
--border-primary: #e5e5e5;
|
|
--accent: #0066cc;
|
|
--success: #007e00;
|
|
--warning: #cc7a00;
|
|
--error: #cc0000;
|
|
--info: #0066cc;
|
|
}
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', 'Consolas', 'Monaco', 'Courier New', monospace;
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.header {
|
|
background: var(--bg-secondary);
|
|
border-bottom: 1px solid var(--border-primary);
|
|
padding: 12px 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
user-select: none;
|
|
-webkit-app-region: drag;
|
|
}
|
|
|
|
.header h1 {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.header-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
-webkit-app-region: no-drag;
|
|
}
|
|
|
|
.btn {
|
|
background: var(--bg-tertiary);
|
|
border: 1px solid var(--border-primary);
|
|
color: var(--text-primary);
|
|
padding: 6px 12px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.btn:hover {
|
|
background: var(--accent);
|
|
color: white;
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
.btn:active {
|
|
transform: translateY(1px);
|
|
}
|
|
|
|
.console-container {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.controls {
|
|
background: var(--bg-secondary);
|
|
border-bottom: 1px solid var(--border-primary);
|
|
padding: 8px 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
}
|
|
|
|
.filter-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.filter-group label {
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.filter-buttons {
|
|
display: flex;
|
|
gap: 4px;
|
|
}
|
|
|
|
.filter-btn {
|
|
padding: 4px 8px;
|
|
border: 1px solid var(--border-primary);
|
|
background: var(--bg-tertiary);
|
|
color: var(--text-secondary);
|
|
font-size: 11px;
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.filter-btn.active {
|
|
background: var(--accent);
|
|
color: white;
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
.search-box {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
background: var(--bg-tertiary);
|
|
border: 1px solid var(--border-primary);
|
|
border-radius: 4px;
|
|
padding: 4px 8px;
|
|
}
|
|
|
|
.search-box input {
|
|
flex: 1;
|
|
background: none;
|
|
border: none;
|
|
color: var(--text-primary);
|
|
font-size: 12px;
|
|
outline: none;
|
|
font-family: inherit;
|
|
}
|
|
|
|
.console-output {
|
|
flex: 1;
|
|
background: #0e0e0e;
|
|
padding: 16px;
|
|
overflow-y: auto;
|
|
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
|
|
font-size: 12px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
.console-output {
|
|
background: #f8f8f8;
|
|
}
|
|
}
|
|
|
|
.log-entry {
|
|
display: flex;
|
|
gap: 12px;
|
|
padding: 2px 0;
|
|
border-radius: 2px;
|
|
transition: background-color 0.1s ease;
|
|
}
|
|
|
|
.log-entry:hover {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
.log-entry:hover {
|
|
background: rgba(0, 0, 0, 0.03);
|
|
}
|
|
}
|
|
|
|
.log-timestamp {
|
|
color: var(--text-tertiary);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.log-level {
|
|
font-weight: 600;
|
|
width: 50px;
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.log-level.error { color: var(--error); }
|
|
.log-level.warn { color: var(--warning); }
|
|
.log-level.info { color: var(--info); }
|
|
.log-level.debug { color: var(--text-secondary); }
|
|
|
|
.log-message {
|
|
flex: 1;
|
|
color: var(--text-primary);
|
|
word-wrap: break-word;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.status-bar {
|
|
background: var(--bg-secondary);
|
|
border-top: 1px solid var(--border-primary);
|
|
padding: 8px 16px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.status-indicator {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.status-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: var(--success);
|
|
animation: pulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
.status-dot.disconnected {
|
|
background: var(--error);
|
|
animation: none;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.5; }
|
|
}
|
|
|
|
.empty-state {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
color: var(--text-tertiary);
|
|
font-size: 14px;
|
|
gap: 8px;
|
|
}
|
|
|
|
.empty-state svg {
|
|
width: 48px;
|
|
height: 48px;
|
|
opacity: 0.3;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
<h1>Server Console</h1>
|
|
<div class="header-actions">
|
|
<button class="btn" onclick="clearLogs()">Clear</button>
|
|
<button class="btn" onclick="exportLogs()">Export</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="console-container">
|
|
<div class="controls">
|
|
<div class="filter-group">
|
|
<label>Level:</label>
|
|
<div class="filter-buttons">
|
|
<button class="filter-btn active" data-level="all" onclick="setFilter('all')">All</button>
|
|
<button class="filter-btn" data-level="error" onclick="setFilter('error')">Error</button>
|
|
<button class="filter-btn" data-level="warn" onclick="setFilter('warn')">Warn</button>
|
|
<button class="filter-btn" data-level="info" onclick="setFilter('info')">Info</button>
|
|
<button class="filter-btn" data-level="debug" onclick="setFilter('debug')">Debug</button>
|
|
</div>
|
|
</div>
|
|
<div class="search-box">
|
|
<input type="text" placeholder="Search logs..." id="searchInput" oninput="filterLogs()">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="console-output" id="console-output">
|
|
<div class="empty-state">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<rect x="4" y="4" width="16" height="16" rx="2" ry="2"/>
|
|
<line x1="9" y1="9" x2="15" y2="9"/>
|
|
<line x1="9" y1="13" x2="15" y2="13"/>
|
|
</svg>
|
|
<span>Waiting for server logs...</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="status-bar">
|
|
<div class="status-indicator">
|
|
<div class="status-dot" id="status-dot"></div>
|
|
<span id="status-text">Connected to server</span>
|
|
</div>
|
|
<div id="log-count">0 logs</div>
|
|
</div>
|
|
|
|
<script>
|
|
const { invoke } = window.__TAURI__.core;
|
|
const { listen } = window.__TAURI__.event;
|
|
|
|
let logs = [];
|
|
let currentFilter = 'all';
|
|
let isConnected = true;
|
|
|
|
// Initialize
|
|
async function init() {
|
|
// Load existing logs
|
|
try {
|
|
const existingLogs = await invoke('get_server_logs');
|
|
logs = existingLogs || [];
|
|
renderLogs();
|
|
} catch (error) {
|
|
console.error('Failed to load logs:', error);
|
|
}
|
|
|
|
// Listen for new logs
|
|
const unlisten = await listen('server-log', (event) => {
|
|
logs.push(event.payload);
|
|
renderLogs();
|
|
// Auto-scroll to bottom
|
|
const output = document.getElementById('console-output');
|
|
output.scrollTop = output.scrollHeight;
|
|
});
|
|
|
|
// Listen for server status changes
|
|
const unlistenStatus = await listen('server-status', (event) => {
|
|
updateServerStatus(event.payload.running);
|
|
});
|
|
}
|
|
|
|
function renderLogs() {
|
|
const output = document.getElementById('console-output');
|
|
const searchTerm = document.getElementById('searchInput').value.toLowerCase();
|
|
|
|
let filteredLogs = logs;
|
|
|
|
// Filter by level
|
|
if (currentFilter !== 'all') {
|
|
filteredLogs = filteredLogs.filter(log =>
|
|
log.level.toLowerCase() === currentFilter
|
|
);
|
|
}
|
|
|
|
// Filter by search term
|
|
if (searchTerm) {
|
|
filteredLogs = filteredLogs.filter(log =>
|
|
log.message.toLowerCase().includes(searchTerm)
|
|
);
|
|
}
|
|
|
|
if (filteredLogs.length === 0) {
|
|
output.innerHTML = `
|
|
<div class="empty-state">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<rect x="4" y="4" width="16" height="16" rx="2" ry="2"/>
|
|
<line x1="9" y1="9" x2="15" y2="9"/>
|
|
<line x1="9" y1="13" x2="15" y2="13"/>
|
|
</svg>
|
|
<span>No logs match your filters</span>
|
|
</div>
|
|
`;
|
|
} else {
|
|
output.innerHTML = filteredLogs.map(log => `
|
|
<div class="log-entry">
|
|
<span class="log-timestamp">${log.timestamp}</span>
|
|
<span class="log-level ${log.level.toLowerCase()}">${log.level}</span>
|
|
<span class="log-message">${escapeHtml(log.message)}</span>
|
|
</div>
|
|
`).join('');
|
|
}
|
|
|
|
// Update count
|
|
document.getElementById('log-count').textContent = `${filteredLogs.length} logs`;
|
|
}
|
|
|
|
function escapeHtml(text) {
|
|
const div = document.createElement('div');
|
|
div.textContent = text;
|
|
return div.innerHTML;
|
|
}
|
|
|
|
function setFilter(level) {
|
|
currentFilter = level;
|
|
|
|
// Update button states
|
|
document.querySelectorAll('.filter-btn').forEach(btn => {
|
|
btn.classList.toggle('active', btn.dataset.level === level);
|
|
});
|
|
|
|
renderLogs();
|
|
}
|
|
|
|
function filterLogs() {
|
|
renderLogs();
|
|
}
|
|
|
|
async function clearLogs() {
|
|
try {
|
|
await invoke('clear_server_logs');
|
|
logs = [];
|
|
renderLogs();
|
|
} catch (error) {
|
|
console.error('Failed to clear logs:', error);
|
|
}
|
|
}
|
|
|
|
async function exportLogs() {
|
|
const logText = logs.map(log =>
|
|
`[${log.timestamp}] [${log.level}] ${log.message}`
|
|
).join('\n');
|
|
|
|
// Create blob and download
|
|
const blob = new Blob([logText], { type: 'text/plain' });
|
|
const url = window.URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = `vibetunnel-logs-${new Date().toISOString()}.txt`;
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
document.body.removeChild(a);
|
|
window.URL.revokeObjectURL(url);
|
|
}
|
|
|
|
function updateServerStatus(running) {
|
|
isConnected = running;
|
|
const dot = document.getElementById('status-dot');
|
|
const text = document.getElementById('status-text');
|
|
|
|
if (running) {
|
|
dot.classList.remove('disconnected');
|
|
text.textContent = 'Connected to server';
|
|
} else {
|
|
dot.classList.add('disconnected');
|
|
text.textContent = 'Server not running';
|
|
}
|
|
}
|
|
|
|
// Initialize on load
|
|
init();
|
|
</script>
|
|
</body>
|
|
</html> |