mirror of
https://github.com/samsonjs/vibetunnel.git
synced 2026-04-16 13:05:53 +00:00
6830517221
- Implement TypeScript/Express server with tty-fwd integration - Add real-time terminal streaming via Server-Sent Events using tail -f - Create asciinema player integration with dynamic resize support - Implement global keyboard capture for full terminal interaction - Add session management (create, list, kill) with proper cleanup - Support instant playback of existing content + real-time new content - Include directory browser for working directory selection - Add hot reload development workflow with concurrent build processes 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
139 lines
No EOL
6.5 KiB
HTML
139 lines
No EOL
6.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>VibeTunnel - Terminal Multiplexer</title>
|
|
<link href="output.css" rel="stylesheet">
|
|
<link rel="stylesheet" type="text/css" href="https://unpkg.com/asciinema-player@3.7.0/dist/bundle/asciinema-player.css" />
|
|
</head>
|
|
<body class="bg-terminal-bg text-terminal-fg min-h-screen">
|
|
<div class="container mx-auto p-4">
|
|
<header class="mb-6">
|
|
<h1 class="text-2xl font-bold text-terminal-green mb-2">
|
|
<a href="#" id="home-link" class="hover:opacity-80">VibeTunnel</a>
|
|
</h1>
|
|
<p class="text-terminal-fg opacity-80">Terminal Multiplexer Web Interface</p>
|
|
</header>
|
|
|
|
<!-- Process List Page -->
|
|
<div id="process-list-page" class="page">
|
|
<div class="terminal mb-6">
|
|
<h2 class="text-lg font-bold text-terminal-cyan mb-4">Create New Process</h2>
|
|
<form id="create-process-form" class="space-y-4">
|
|
<div>
|
|
<label class="block text-sm font-medium mb-2">Working Directory:</label>
|
|
<div class="flex space-x-2">
|
|
<input
|
|
id="working-dir"
|
|
type="text"
|
|
class="terminal-input flex-1"
|
|
placeholder="~/projects/my-app"
|
|
value="~/"
|
|
/>
|
|
<button type="button" id="browse-dir" class="bg-terminal-blue text-white px-3 py-1 rounded hover:opacity-80">
|
|
Browse
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium mb-2">Command:</label>
|
|
<input
|
|
id="command"
|
|
type="text"
|
|
class="terminal-input w-full"
|
|
placeholder="bash"
|
|
/>
|
|
</div>
|
|
<button type="submit" class="bg-terminal-green text-black px-4 py-2 rounded hover:opacity-80">
|
|
Create Process
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="terminal">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h2 class="text-lg font-bold text-terminal-cyan">Active Processes</h2>
|
|
<button id="refresh-processes" class="bg-terminal-blue text-white px-3 py-1 rounded hover:opacity-80">
|
|
Refresh
|
|
</button>
|
|
</div>
|
|
<div id="process-list" class="space-y-2">
|
|
<!-- Process list will be populated here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Terminal Page -->
|
|
<div id="terminal-page" class="page hidden">
|
|
<div class="mb-4">
|
|
<button id="back-to-processes" class="bg-terminal-blue text-white px-3 py-1 rounded hover:opacity-80">
|
|
← Back to Processes
|
|
</button>
|
|
</div>
|
|
|
|
<div class="terminal min-h-96">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h2 class="text-lg font-bold text-terminal-cyan">Terminal</h2>
|
|
<div class="flex items-center space-x-2">
|
|
<span id="current-process" class="text-terminal-yellow"></span>
|
|
<button id="kill-current-process" class="bg-terminal-red text-white px-3 py-1 rounded text-sm hover:opacity-80">
|
|
Kill Session
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Asciinema Player Container -->
|
|
<div id="terminal-player" class="mb-4 bg-black rounded min-h-64">
|
|
<p class="text-center py-8 text-terminal-fg opacity-60">Loading terminal...</p>
|
|
</div>
|
|
|
|
<!-- Input Area -->
|
|
<div class="flex items-center space-x-2">
|
|
<span class="text-terminal-green">$</span>
|
|
<input
|
|
id="terminal-input"
|
|
type="text"
|
|
class="terminal-input flex-1"
|
|
placeholder="Enter command..."
|
|
/>
|
|
<button
|
|
id="send-input"
|
|
class="bg-terminal-green text-black px-3 py-1 rounded hover:opacity-80"
|
|
>
|
|
Send
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Directory Browser Modal -->
|
|
<div id="dir-browser-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden p-4">
|
|
<div class="terminal max-w-2xl w-full max-h-[90vh] flex flex-col">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h3 class="text-lg font-bold text-terminal-cyan">Browse Directory</h3>
|
|
<button id="close-dir-browser" class="text-terminal-red hover:opacity-80 text-xl p-1">✕</button>
|
|
</div>
|
|
<div class="mb-4">
|
|
<span class="text-sm text-gray-400">Current: </span>
|
|
<span id="current-dir-path" class="text-terminal-green break-all"></span>
|
|
</div>
|
|
<div id="dir-browser-content" class="overflow-y-auto flex-1 space-y-1 min-h-0">
|
|
<!-- Directory contents will be populated here -->
|
|
</div>
|
|
<div class="mt-4 flex justify-between sm:justify-end space-x-2 flex-wrap gap-2">
|
|
<button id="cancel-dir-browser" class="bg-gray-600 text-white px-4 py-2 rounded hover:opacity-80 order-2 sm:order-1">
|
|
Cancel
|
|
</button>
|
|
<button id="select-dir" class="bg-terminal-green text-black px-4 py-2 rounded hover:opacity-80 order-1 sm:order-2">
|
|
Select Directory
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://unpkg.com/asciinema-player@3.7.0/dist/bundle/asciinema-player.min.js"></script>
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html> |