shell-mirror
Version:
Access your Mac shell from any device securely. Perfect for mobile coding with Claude Code CLI, Gemini CLI, and any shell tool.
92 lines (88 loc) • 3.18 kB
HTML
<html>
<head>
<title>Terminal Mirror (HTTP)</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@4.15.0/css/xterm.css" />
<script src="https://cdn.jsdelivr.net/npm/xterm@4.15.0/lib/xterm.js"></script>
<script src="https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.5.0/lib/xterm-addon-fit.js"></script>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
background-color: #1e1e1e;
color: #ccc;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
#terminal-container {
display: none;
height: 100%;
width: 100%;
background-color: #000000;
}
#terminal {
padding: 8px; /* Mac Terminal.app padding */
background-color: #000000;
height: calc(100% - 16px);
width: calc(100% - 16px);
}
#connect-container {
padding: 2em;
text-align: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
min-height: 100vh;
}
#connect-container h2 {
margin-bottom: 2em;
font-size: 2.5rem;
}
.http-notice {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 10px;
padding: 20px;
margin: 20px auto;
max-width: 600px;
}
.http-notice h3 {
color: #4CAF50;
margin-bottom: 10px;
}
#agent-id-input { font-size: 1.2em; padding: 8px; width: 400px; margin-bottom: 1em; }
#connect-btn { font-size: 1.2em; padding: 10px 20px; }
</style>
</head>
<body>
<div id="connect-container">
<h2>Terminal Mirror</h2>
<div class="http-notice">
<h3>🌐 HTTP Terminal Mode</h3>
<p>This HTTP version allows secure connections to your local Mac WebSocket server.</p>
<p>Perfect for local network terminal access!</p>
</div>
<div id="agent-discovery">
<p>Discovering available Mac agents...</p>
<div id="agent-list"></div>
</div>
<div id="manual-connect" style="display: none; margin-top: 20px;">
<p>Or manually enter Agent ID:</p>
<input type="text" id="agent-id-input" placeholder="e.g., agent-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx">
<br>
<button id="connect-btn">Connect</button>
</div>
<button id="show-manual" style="margin-top: 10px;">Manual Connect</button>
</div>
<div id="terminal-container">
<div id="terminal"></div>
</div>
<!-- Version Footer -->
<footer style="background: #ff6b35; color: white; text-align: center; padding: 10px 0; font-size: 0.8rem; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;">
<div style="max-width: 1200px; margin: 0 auto;">
<p id="terminal-version-info">Terminal Mirror (HTTP) • Loading version...</p>
</div>
</footer>
<script src="/app/terminal.js"></script>
</body>
</html>