|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Manus AI Terminal</title> |
|
|
<style> |
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; |
|
|
background: #0d1117; |
|
|
color: #c9d1d9; |
|
|
height: 100vh; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.terminal-container { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
height: 100vh; |
|
|
background: linear-gradient(135deg, #0d1117 0%, #161b22 100%); |
|
|
border: 1px solid #30363d; |
|
|
} |
|
|
|
|
|
.terminal-header { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: space-between; |
|
|
padding: 12px 16px; |
|
|
background: #161b22; |
|
|
border-bottom: 1px solid #30363d; |
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); |
|
|
} |
|
|
|
|
|
.terminal-title { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 8px; |
|
|
font-size: 14px; |
|
|
font-weight: 600; |
|
|
color: #f0f6fc; |
|
|
} |
|
|
|
|
|
.terminal-icon { |
|
|
width: 16px; |
|
|
height: 16px; |
|
|
background: #238636; |
|
|
border-radius: 50%; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.terminal-icon::after { |
|
|
content: '>'; |
|
|
position: absolute; |
|
|
top: 50%; |
|
|
left: 50%; |
|
|
transform: translate(-50%, -50%); |
|
|
font-size: 10px; |
|
|
color: white; |
|
|
font-weight: bold; |
|
|
} |
|
|
|
|
|
.terminal-controls { |
|
|
display: flex; |
|
|
gap: 8px; |
|
|
} |
|
|
|
|
|
.control-btn { |
|
|
width: 12px; |
|
|
height: 12px; |
|
|
border-radius: 50%; |
|
|
border: none; |
|
|
cursor: pointer; |
|
|
transition: opacity 0.2s; |
|
|
} |
|
|
|
|
|
.control-btn:hover { |
|
|
opacity: 0.8; |
|
|
} |
|
|
|
|
|
.close { background: #ff5f56; } |
|
|
.minimize { background: #ffbd2e; } |
|
|
.maximize { background: #27ca3f; } |
|
|
|
|
|
.terminal-body { |
|
|
flex: 1; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.terminal-output { |
|
|
flex: 1; |
|
|
padding: 16px; |
|
|
overflow-y: auto; |
|
|
font-size: 13px; |
|
|
line-height: 1.4; |
|
|
background: #0d1117; |
|
|
scrollbar-width: thin; |
|
|
scrollbar-color: #30363d #0d1117; |
|
|
} |
|
|
|
|
|
.terminal-output::-webkit-scrollbar { |
|
|
width: 8px; |
|
|
} |
|
|
|
|
|
.terminal-output::-webkit-scrollbar-track { |
|
|
background: #0d1117; |
|
|
} |
|
|
|
|
|
.terminal-output::-webkit-scrollbar-thumb { |
|
|
background: #30363d; |
|
|
border-radius: 4px; |
|
|
} |
|
|
|
|
|
.terminal-output::-webkit-scrollbar-thumb:hover { |
|
|
background: #484f58; |
|
|
} |
|
|
|
|
|
.terminal-line { |
|
|
margin-bottom: 2px; |
|
|
white-space: pre-wrap; |
|
|
word-wrap: break-word; |
|
|
} |
|
|
|
|
|
.command-line { |
|
|
color: #58a6ff; |
|
|
font-weight: 600; |
|
|
} |
|
|
|
|
|
.output-line { |
|
|
color: #c9d1d9; |
|
|
} |
|
|
|
|
|
.error-line { |
|
|
color: #f85149; |
|
|
} |
|
|
|
|
|
.success-line { |
|
|
color: #56d364; |
|
|
} |
|
|
|
|
|
.system-line { |
|
|
color: #ffa657; |
|
|
font-style: italic; |
|
|
} |
|
|
|
|
|
.timestamp { |
|
|
color: #7d8590; |
|
|
font-size: 11px; |
|
|
margin-right: 8px; |
|
|
} |
|
|
|
|
|
.terminal-input { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
padding: 12px 16px; |
|
|
background: #161b22; |
|
|
border-top: 1px solid #30363d; |
|
|
} |
|
|
|
|
|
.prompt { |
|
|
color: #58a6ff; |
|
|
margin-right: 8px; |
|
|
font-weight: 600; |
|
|
} |
|
|
|
|
|
.input-field { |
|
|
flex: 1; |
|
|
background: transparent; |
|
|
border: none; |
|
|
color: #c9d1d9; |
|
|
font-family: inherit; |
|
|
font-size: 13px; |
|
|
outline: none; |
|
|
} |
|
|
|
|
|
.input-field::placeholder { |
|
|
color: #7d8590; |
|
|
} |
|
|
|
|
|
.status-indicator { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 8px; |
|
|
margin-left: 12px; |
|
|
} |
|
|
|
|
|
.status-dot { |
|
|
width: 8px; |
|
|
height: 8px; |
|
|
border-radius: 50%; |
|
|
background: #7d8590; |
|
|
transition: background-color 0.3s; |
|
|
} |
|
|
|
|
|
.status-dot.connected { |
|
|
background: #56d364; |
|
|
box-shadow: 0 0 8px rgba(86, 211, 100, 0.5); |
|
|
} |
|
|
|
|
|
.status-dot.running { |
|
|
background: #ffa657; |
|
|
animation: pulse 1.5s infinite; |
|
|
} |
|
|
|
|
|
.status-dot.error { |
|
|
background: #f85149; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0%, 100% { opacity: 1; } |
|
|
50% { opacity: 0.5; } |
|
|
} |
|
|
|
|
|
.typing-indicator { |
|
|
display: none; |
|
|
color: #7d8590; |
|
|
font-style: italic; |
|
|
animation: blink 1s infinite; |
|
|
} |
|
|
|
|
|
@keyframes blink { |
|
|
0%, 50% { opacity: 1; } |
|
|
51%, 100% { opacity: 0; } |
|
|
} |
|
|
|
|
|
.command-history { |
|
|
position: absolute; |
|
|
bottom: 60px; |
|
|
left: 16px; |
|
|
right: 16px; |
|
|
background: #21262d; |
|
|
border: 1px solid #30363d; |
|
|
border-radius: 6px; |
|
|
max-height: 200px; |
|
|
overflow-y: auto; |
|
|
display: none; |
|
|
z-index: 1000; |
|
|
} |
|
|
|
|
|
.history-item { |
|
|
padding: 8px 12px; |
|
|
cursor: pointer; |
|
|
border-bottom: 1px solid #30363d; |
|
|
transition: background-color 0.2s; |
|
|
} |
|
|
|
|
|
.history-item:hover { |
|
|
background: #30363d; |
|
|
} |
|
|
|
|
|
.history-item:last-child { |
|
|
border-bottom: none; |
|
|
} |
|
|
|
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.terminal-header { |
|
|
padding: 8px 12px; |
|
|
} |
|
|
|
|
|
.terminal-output { |
|
|
padding: 12px; |
|
|
font-size: 12px; |
|
|
} |
|
|
|
|
|
.terminal-input { |
|
|
padding: 8px 12px; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="terminal-container"> |
|
|
<div class="terminal-header"> |
|
|
<div class="terminal-title"> |
|
|
<div class="terminal-icon"></div> |
|
|
<span>Manus AI Terminal</span> |
|
|
</div> |
|
|
<div class="terminal-controls"> |
|
|
<button class="control-btn close" onclick="closeTerminal()"></button> |
|
|
<button class="control-btn minimize" onclick="minimizeTerminal()"></button> |
|
|
<button class="control-btn maximize" onclick="maximizeTerminal()"></button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="terminal-body"> |
|
|
<div class="terminal-output" id="output"></div> |
|
|
<div class="command-history" id="history"></div> |
|
|
|
|
|
<div class="terminal-input"> |
|
|
<span class="prompt">$</span> |
|
|
<input type="text" class="input-field" id="commandInput" |
|
|
placeholder="Type a command and press Enter..." |
|
|
autocomplete="off" spellcheck="false"> |
|
|
<div class="status-indicator"> |
|
|
<div class="status-dot" id="statusDot"></div> |
|
|
<span id="statusText">Disconnected</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
class ManusTerminal { |
|
|
constructor() { |
|
|
this.ws = null; |
|
|
this.output = document.getElementById('output'); |
|
|
this.input = document.getElementById('commandInput'); |
|
|
this.statusDot = document.getElementById('statusDot'); |
|
|
this.statusText = document.getElementById('statusText'); |
|
|
this.history = document.getElementById('history'); |
|
|
|
|
|
this.commandHistory = []; |
|
|
this.historyIndex = -1; |
|
|
this.isConnected = false; |
|
|
this.isRunning = false; |
|
|
|
|
|
this.init(); |
|
|
} |
|
|
|
|
|
init() { |
|
|
this.setupEventListeners(); |
|
|
this.connect(); |
|
|
this.addWelcomeMessage(); |
|
|
} |
|
|
|
|
|
setupEventListeners() { |
|
|
this.input.addEventListener('keydown', (e) => this.handleKeyDown(e)); |
|
|
this.input.addEventListener('keyup', (e) => this.handleKeyUp(e)); |
|
|
|
|
|
|
|
|
window.addEventListener('focus', () => { |
|
|
if (!this.isConnected) { |
|
|
this.connect(); |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
connect() { |
|
|
try { |
|
|
this.ws = new WebSocket('ws://localhost:8765'); |
|
|
|
|
|
this.ws.onopen = () => { |
|
|
this.isConnected = true; |
|
|
this.updateStatus('connected', 'Connected'); |
|
|
this.addSystemMessage('🚀 Connected to terminal server'); |
|
|
}; |
|
|
|
|
|
this.ws.onmessage = (event) => { |
|
|
const data = JSON.parse(event.data); |
|
|
this.handleMessage(data); |
|
|
}; |
|
|
|
|
|
this.ws.onclose = () => { |
|
|
this.isConnected = false; |
|
|
this.isRunning = false; |
|
|
this.updateStatus('error', 'Disconnected'); |
|
|
this.addSystemMessage('❌ Connection lost. Attempting to reconnect...'); |
|
|
|
|
|
|
|
|
setTimeout(() => this.connect(), 3000); |
|
|
}; |
|
|
|
|
|
this.ws.onerror = (error) => { |
|
|
this.addSystemMessage('⚠️ Connection error. Check if the server is running.'); |
|
|
}; |
|
|
|
|
|
} catch (error) { |
|
|
this.addSystemMessage('❌ Failed to connect to terminal server'); |
|
|
} |
|
|
} |
|
|
|
|
|
handleMessage(data) { |
|
|
const timestamp = new Date(data.timestamp).toLocaleTimeString(); |
|
|
|
|
|
switch (data.type) { |
|
|
case 'connected': |
|
|
this.addSystemMessage(data.message); |
|
|
break; |
|
|
|
|
|
case 'command_start': |
|
|
this.isRunning = true; |
|
|
this.updateStatus('running', 'Running'); |
|
|
this.addCommandLine(data.message); |
|
|
break; |
|
|
|
|
|
case 'output': |
|
|
this.addOutputLine(data.data, data.stream); |
|
|
break; |
|
|
|
|
|
case 'command_complete': |
|
|
this.isRunning = false; |
|
|
this.updateStatus('connected', 'Connected'); |
|
|
this.addSystemMessage(`Process completed with exit code ${data.exit_code}`); |
|
|
break; |
|
|
|
|
|
case 'error': |
|
|
this.addErrorLine(data.data); |
|
|
break; |
|
|
|
|
|
case 'interrupted': |
|
|
this.isRunning = false; |
|
|
this.updateStatus('connected', 'Connected'); |
|
|
this.addSystemMessage(data.message); |
|
|
break; |
|
|
} |
|
|
} |
|
|
|
|
|
handleKeyDown(e) { |
|
|
switch (e.key) { |
|
|
case 'Enter': |
|
|
e.preventDefault(); |
|
|
this.executeCommand(); |
|
|
break; |
|
|
|
|
|
case 'ArrowUp': |
|
|
e.preventDefault(); |
|
|
this.navigateHistory(-1); |
|
|
break; |
|
|
|
|
|
case 'ArrowDown': |
|
|
e.preventDefault(); |
|
|
this.navigateHistory(1); |
|
|
break; |
|
|
|
|
|
case 'Tab': |
|
|
e.preventDefault(); |
|
|
|
|
|
break; |
|
|
|
|
|
case 'c': |
|
|
if (e.ctrlKey) { |
|
|
e.preventDefault(); |
|
|
this.interruptCommand(); |
|
|
} |
|
|
break; |
|
|
} |
|
|
} |
|
|
|
|
|
handleKeyUp(e) { |
|
|
|
|
|
if (e.target.value.length > 0) { |
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
executeCommand() { |
|
|
const command = this.input.value.trim(); |
|
|
if (!command || !this.isConnected) return; |
|
|
|
|
|
|
|
|
if (this.commandHistory[this.commandHistory.length - 1] !== command) { |
|
|
this.commandHistory.push(command); |
|
|
} |
|
|
this.historyIndex = this.commandHistory.length; |
|
|
|
|
|
|
|
|
this.ws.send(JSON.stringify({ |
|
|
type: 'command', |
|
|
command: command |
|
|
})); |
|
|
|
|
|
|
|
|
this.input.value = ''; |
|
|
} |
|
|
|
|
|
interruptCommand() { |
|
|
if (this.isRunning && this.isConnected) { |
|
|
this.ws.send(JSON.stringify({ |
|
|
type: 'interrupt' |
|
|
})); |
|
|
} |
|
|
} |
|
|
|
|
|
navigateHistory(direction) { |
|
|
if (this.commandHistory.length === 0) return; |
|
|
|
|
|
this.historyIndex += direction; |
|
|
|
|
|
if (this.historyIndex < 0) { |
|
|
this.historyIndex = 0; |
|
|
} else if (this.historyIndex >= this.commandHistory.length) { |
|
|
this.historyIndex = this.commandHistory.length; |
|
|
this.input.value = ''; |
|
|
return; |
|
|
} |
|
|
|
|
|
this.input.value = this.commandHistory[this.historyIndex] || ''; |
|
|
} |
|
|
|
|
|
updateStatus(status, text) { |
|
|
this.statusDot.className = `status-dot ${status}`; |
|
|
this.statusText.textContent = text; |
|
|
} |
|
|
|
|
|
addWelcomeMessage() { |
|
|
this.addSystemMessage('🎯 Manus AI Terminal - Ready for commands'); |
|
|
this.addSystemMessage('💡 Use Ctrl+C to interrupt running commands'); |
|
|
this.addSystemMessage('📚 Use ↑/↓ arrows to navigate command history'); |
|
|
} |
|
|
|
|
|
addCommandLine(text) { |
|
|
this.addLine(text, 'command-line'); |
|
|
} |
|
|
|
|
|
addOutputLine(text, stream = 'stdout') { |
|
|
const className = stream === 'stderr' ? 'error-line' : 'output-line'; |
|
|
this.addLine(text, className); |
|
|
} |
|
|
|
|
|
addErrorLine(text) { |
|
|
this.addLine(text, 'error-line'); |
|
|
} |
|
|
|
|
|
addSystemMessage(text) { |
|
|
this.addLine(text, 'system-line'); |
|
|
} |
|
|
|
|
|
addLine(text, className = 'output-line') { |
|
|
const line = document.createElement('div'); |
|
|
line.className = `terminal-line ${className}`; |
|
|
|
|
|
const timestamp = document.createElement('span'); |
|
|
timestamp.className = 'timestamp'; |
|
|
timestamp.textContent = new Date().toLocaleTimeString(); |
|
|
|
|
|
const content = document.createElement('span'); |
|
|
content.textContent = text; |
|
|
|
|
|
line.appendChild(timestamp); |
|
|
line.appendChild(content); |
|
|
|
|
|
this.output.appendChild(line); |
|
|
this.scrollToBottom(); |
|
|
} |
|
|
|
|
|
scrollToBottom() { |
|
|
this.output.scrollTop = this.output.scrollHeight; |
|
|
} |
|
|
|
|
|
clear() { |
|
|
this.output.innerHTML = ''; |
|
|
this.addWelcomeMessage(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function closeTerminal() { |
|
|
if (confirm('Are you sure you want to close the terminal?')) { |
|
|
window.close(); |
|
|
} |
|
|
} |
|
|
|
|
|
function minimizeTerminal() { |
|
|
|
|
|
console.log('Minimize terminal'); |
|
|
} |
|
|
|
|
|
function maximizeTerminal() { |
|
|
if (document.fullscreenElement) { |
|
|
document.exitFullscreen(); |
|
|
} else { |
|
|
document.documentElement.requestFullscreen(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', () => { |
|
|
window.terminal = new ManusTerminal(); |
|
|
}); |
|
|
|
|
|
|
|
|
window.addEventListener('keydown', (e) => { |
|
|
if (e.ctrlKey && e.key === 'l') { |
|
|
e.preventDefault(); |
|
|
window.terminal.clear(); |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
