mirror of
https://github.com/samsonjs/vibetunnel.git
synced 2026-04-22 14:06:02 +00:00
Clean up build system and implement XTerm.js renderer
- Replace TypeScript compilation with esbuild bundling - Organize all generated files in public/bundle/ - Remove PWA features and simplify index.html - Add XTerm.js renderer with same API as custom renderer - Create comprehensive test suite in public/tests/ - Update .gitignore to only track source files 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Mario Zechner
parent
8f52b73454
commit
43d406a84c
47 changed files with 2557 additions and 1893 deletions
23
web/.gitignore
vendored
23
web/.gitignore
vendored
|
|
@ -4,22 +4,8 @@ npm-debug.log*
|
|||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# Generated shit
|
||||
public/components
|
||||
public/app-new*
|
||||
|
||||
# Build outputs
|
||||
dist/
|
||||
build/
|
||||
public/app.js
|
||||
public/app.js.map
|
||||
public/app-new.js
|
||||
public/app-new.js.map
|
||||
public/app-new-entry.js
|
||||
public/app-new-entry.js.map
|
||||
public/components/
|
||||
public/components.js
|
||||
public/output.css
|
||||
# Generated files
|
||||
public/bundle/
|
||||
|
||||
# Logs
|
||||
*.log
|
||||
|
|
@ -117,7 +103,4 @@ tmp/
|
|||
temp/
|
||||
|
||||
# Terminal session data (don't commit user sessions)
|
||||
~/.vibetunnel/
|
||||
public/*.js
|
||||
public/*.js.map
|
||||
public/*components*
|
||||
~/.vibetunnel/
|
||||
28
web/package-lock.json
generated
28
web/package-lock.json
generated
|
|
@ -9,6 +9,9 @@
|
|||
"version": "1.0.0",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@xterm/addon-fit": "^0.10.0",
|
||||
"@xterm/addon-web-links": "^0.11.0",
|
||||
"@xterm/xterm": "^5.5.0",
|
||||
"asciinema-player": "^3.7.0",
|
||||
"express": "^4.18.2",
|
||||
"lit": "^3.1.0",
|
||||
|
|
@ -24,6 +27,7 @@
|
|||
"autoprefixer": "^10.4.21",
|
||||
"chokidar": "^3.5.3",
|
||||
"concurrently": "^8.2.2",
|
||||
"esbuild": "^0.25.5",
|
||||
"jest": "^29.7.0",
|
||||
"postcss": "^8.5.5",
|
||||
"puppeteer": "^21.0.0",
|
||||
|
|
@ -1959,6 +1963,30 @@
|
|||
"@types/node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@xterm/addon-fit": {
|
||||
"version": "0.10.0",
|
||||
"resolved": "https://registry.npmjs.org/@xterm/addon-fit/-/addon-fit-0.10.0.tgz",
|
||||
"integrity": "sha512-UFYkDm4HUahf2lnEyHvio51TNGiLK66mqP2JoATy7hRZeXaGMRDr00JiSF7m63vR5WKATF605yEggJKsw0JpMQ==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"@xterm/xterm": "^5.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@xterm/addon-web-links": {
|
||||
"version": "0.11.0",
|
||||
"resolved": "https://registry.npmjs.org/@xterm/addon-web-links/-/addon-web-links-0.11.0.tgz",
|
||||
"integrity": "sha512-nIHQ38pQI+a5kXnRaTgwqSHnX7KE6+4SVoceompgHL26unAxdfP6IPqUTSYPQgSwM56hsElfoNrrW5V7BUED/Q==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"@xterm/xterm": "^5.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@xterm/xterm": {
|
||||
"version": "5.5.0",
|
||||
"resolved": "https://registry.npmjs.org/@xterm/xterm/-/xterm-5.5.0.tgz",
|
||||
"integrity": "sha512-hqJHYaQb5OptNunnyAnkHyM8aCjZ1MEIDTQu1iIbbTD/xops91NB5yq1ZK/dC2JDbVWtF23zUtl9JE2NqwT87A==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/accepts": {
|
||||
"version": "1.3.8",
|
||||
"resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
|
||||
|
|
|
|||
|
|
@ -4,19 +4,24 @@
|
|||
"description": "Web frontend for terminal multiplexer",
|
||||
"main": "dist/server.js",
|
||||
"scripts": {
|
||||
"dev": "npm run build:css && concurrently --kill-others-on-fail \"npm run watch:css\" \"npm run watch:client\" \"npm run watch:server\"",
|
||||
"dev": "npm run build:css && concurrently --kill-others-on-fail \"npm run watch:css\" \"npm run bundle:watch\" \"npm run watch:server\"",
|
||||
"watch:server": "tsx watch src/server.ts",
|
||||
"watch:client": "tsc -p tsconfig.client.json --watch --preserveWatchOutput",
|
||||
"watch:css": "npx tailwindcss -i ./src/input.css -o ./public/output.css --watch",
|
||||
"watch:css": "npx tailwindcss -i ./src/input.css -o ./public/bundle/output.css --watch",
|
||||
"build": "npm run build:css && npm run build:client && npm run build:server",
|
||||
"build:server": "tsc",
|
||||
"build:client": "tsc -p tsconfig.client.json",
|
||||
"build:css": "npx tailwindcss -i ./src/input.css -o ./public/output.css --minify",
|
||||
"build:css": "npx tailwindcss -i ./src/input.css -o ./public/bundle/output.css --minify",
|
||||
"bundle": "esbuild src/client/app-entry.ts --bundle --outfile=public/bundle/client-bundle.js --format=esm --sourcemap --external:@xterm/xterm/css/xterm.css",
|
||||
"bundle:watch": "esbuild src/client/app-entry.ts --bundle --outfile=public/bundle/client-bundle.js --format=esm --sourcemap --external:@xterm/xterm/css/xterm.css --watch",
|
||||
"start": "node dist/server.js",
|
||||
"test": "jest",
|
||||
"test:watch": "jest --watch"
|
||||
},
|
||||
"dependencies": {
|
||||
"@xterm/addon-fit": "^0.10.0",
|
||||
"@xterm/addon-web-links": "^0.11.0",
|
||||
"@xterm/xterm": "^5.5.0",
|
||||
"asciinema-player": "^3.7.0",
|
||||
"express": "^4.18.2",
|
||||
"lit": "^3.1.0",
|
||||
|
|
@ -32,6 +37,7 @@
|
|||
"autoprefixer": "^10.4.21",
|
||||
"chokidar": "^3.5.3",
|
||||
"concurrently": "^8.2.2",
|
||||
"esbuild": "^0.25.5",
|
||||
"jest": "^29.7.0",
|
||||
"postcss": "^8.5.5",
|
||||
"puppeteer": "^21.0.0",
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
// Entry point for the app
|
||||
import './app.js';
|
||||
//# sourceMappingURL=app-entry.js.map
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"file":"app-entry.js","sourceRoot":"","sources":["../src/client/app-entry.ts"],"names":[],"mappings":"AAAA,0BAA0B;AAC1B,OAAO,UAAU,CAAC","sourcesContent":["// Entry point for the app\nimport './app.js';"]}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
// Entry point for the new app
|
||||
import './app-new.js';
|
||||
//# sourceMappingURL=app-new-entry.js.map
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"file":"app-new-entry.js","sourceRoot":"","sources":["../src/client/app-new-entry.ts"],"names":[],"mappings":"AAAA,8BAA8B;AAC9B,OAAO,cAAc,CAAC","sourcesContent":["// Entry point for the new app\nimport './app-new.js';"]}
|
||||
|
|
@ -1,146 +0,0 @@
|
|||
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
||||
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
||||
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
||||
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
||||
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
||||
};
|
||||
import { LitElement, html } from 'lit';
|
||||
import { customElement, state } from 'lit/decorators.js';
|
||||
// Import components
|
||||
import './components/app-header.js';
|
||||
import './components/session-create-form.js';
|
||||
import './components/session-list.js';
|
||||
let VibeTunnelAppNew = class VibeTunnelAppNew extends LitElement {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.errorMessage = '';
|
||||
this.sessions = [];
|
||||
this.loading = false;
|
||||
this.hotReloadWs = null;
|
||||
}
|
||||
// Disable shadow DOM to use Tailwind
|
||||
createRenderRoot() {
|
||||
return this;
|
||||
}
|
||||
connectedCallback() {
|
||||
super.connectedCallback();
|
||||
this.setupHotReload();
|
||||
this.loadSessions();
|
||||
this.startAutoRefresh();
|
||||
}
|
||||
disconnectedCallback() {
|
||||
super.disconnectedCallback();
|
||||
if (this.hotReloadWs) {
|
||||
this.hotReloadWs.close();
|
||||
}
|
||||
}
|
||||
showError(message) {
|
||||
this.errorMessage = message;
|
||||
// Clear error after 5 seconds
|
||||
setTimeout(() => {
|
||||
this.errorMessage = '';
|
||||
}, 5000);
|
||||
}
|
||||
clearError() {
|
||||
this.errorMessage = '';
|
||||
}
|
||||
async loadSessions() {
|
||||
this.loading = true;
|
||||
try {
|
||||
const response = await fetch('/api/sessions');
|
||||
if (response.ok) {
|
||||
const sessionsData = await response.json();
|
||||
this.sessions = sessionsData.map((session) => ({
|
||||
id: session.id,
|
||||
command: session.command,
|
||||
workingDir: session.workingDir,
|
||||
status: session.status,
|
||||
exitCode: session.exitCode,
|
||||
startedAt: session.startedAt,
|
||||
lastModified: session.lastModified,
|
||||
pid: session.pid
|
||||
}));
|
||||
this.clearError();
|
||||
}
|
||||
else {
|
||||
this.showError('Failed to load sessions');
|
||||
}
|
||||
}
|
||||
catch (error) {
|
||||
console.error('Error loading sessions:', error);
|
||||
this.showError('Failed to load sessions');
|
||||
}
|
||||
finally {
|
||||
this.loading = false;
|
||||
}
|
||||
}
|
||||
startAutoRefresh() {
|
||||
// Refresh sessions every 3 seconds
|
||||
setInterval(() => {
|
||||
this.loadSessions();
|
||||
}, 3000);
|
||||
}
|
||||
handleSessionCreated(e) {
|
||||
console.log('Session created:', e.detail);
|
||||
this.showError('Session created successfully!');
|
||||
this.loadSessions(); // Refresh the list
|
||||
}
|
||||
handleSessionSelect(e) {
|
||||
const session = e.detail;
|
||||
console.log('Session selected:', session);
|
||||
this.showError(`Terminal view not implemented yet for session: ${session.id}`);
|
||||
}
|
||||
handleSessionKilled(e) {
|
||||
console.log('Session killed:', e.detail);
|
||||
this.loadSessions(); // Refresh the list
|
||||
}
|
||||
handleRefresh() {
|
||||
this.loadSessions();
|
||||
}
|
||||
handleError(e) {
|
||||
this.showError(e.detail);
|
||||
}
|
||||
setupHotReload() {
|
||||
if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
|
||||
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
||||
const wsUrl = `${protocol}//${window.location.host}?hotReload=true`;
|
||||
this.hotReloadWs = new WebSocket(wsUrl);
|
||||
this.hotReloadWs.onmessage = (event) => {
|
||||
const message = JSON.parse(event.data);
|
||||
if (message.type === 'reload') {
|
||||
window.location.reload();
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
render() {
|
||||
return html `
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<app-header></app-header>
|
||||
<session-list
|
||||
.sessions=${this.sessions}
|
||||
.loading=${this.loading}
|
||||
@session-select=${this.handleSessionSelect}
|
||||
@session-killed=${this.handleSessionKilled}
|
||||
@session-created=${this.handleSessionCreated}
|
||||
@refresh=${this.handleRefresh}
|
||||
@error=${this.handleError}
|
||||
></session-list>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
};
|
||||
__decorate([
|
||||
state()
|
||||
], VibeTunnelAppNew.prototype, "errorMessage", void 0);
|
||||
__decorate([
|
||||
state()
|
||||
], VibeTunnelAppNew.prototype, "sessions", void 0);
|
||||
__decorate([
|
||||
state()
|
||||
], VibeTunnelAppNew.prototype, "loading", void 0);
|
||||
VibeTunnelAppNew = __decorate([
|
||||
customElement('vibetunnel-app-new')
|
||||
], VibeTunnelAppNew);
|
||||
export { VibeTunnelAppNew };
|
||||
//# sourceMappingURL=app-new.js.map
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,9 +0,0 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<browserconfig>
|
||||
<msapplication>
|
||||
<tile>
|
||||
<square150x150logo src="/icons/icon-144x144.png"/>
|
||||
<TileColor>#1e1e1e</TileColor>
|
||||
</tile>
|
||||
</msapplication>
|
||||
</browserconfig>
|
||||
|
|
@ -1,538 +0,0 @@
|
|||
import { LitElement, html, css } from 'https://unpkg.com/lit@latest/index.js?module';
|
||||
|
||||
// Header component with ASCII art
|
||||
class VibeHeader extends LitElement {
|
||||
static styles = css`
|
||||
:host {
|
||||
display: block;
|
||||
font-family: 'Courier New', monospace;
|
||||
color: var(--terminal-green);
|
||||
margin: 1em 0;
|
||||
}
|
||||
.ascii-art {
|
||||
font-size: 12px;
|
||||
line-height: 1em;
|
||||
white-space: pre;
|
||||
margin: 1em 0;
|
||||
}
|
||||
.title {
|
||||
font-size: 24px;
|
||||
margin: 1em 0;
|
||||
}
|
||||
`;
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<div class="ascii-art">
|
||||
██╗ ██╗██╗██████╗ ███████╗ ████████╗██╗ ██╗███╗ ███╗███╗ ██╗███████╗██╗
|
||||
██║ ██║██║██╔══██╗██╔════╝ ╚══██╔══╝██║ ██║████╗ ████║████╗ ██║██╔════╝██║
|
||||
██║ ██║██║██████╔╝█████╗ ██║ ██║ ██║██╔████╔██║██╔██╗ ██║█████╗ ██║
|
||||
╚██╗ ██╔╝██║██╔══██╗██╔══╝ ██║ ██║ ██║██║╚██╔╝██║██║╚██╗██║██╔══╝ ██║
|
||||
╚████╔╝ ██║██████╔╝███████╗ ██║ ╚██████╔╝██║ ╚═╝ ██║██║ ╚████║███████╗███████╗
|
||||
╚═══╝ ╚═╝╚═════╝ ╚══════╝ ╚═╝ ╚═════╝ ╚═╝ ╚═╝╚═╝ ╚═══╝╚══════╝╚══════╝
|
||||
</div>
|
||||
<p>Terminal Multiplexer Web Interface</p>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
// Session card component
|
||||
class SessionCard extends LitElement {
|
||||
static properties = {
|
||||
session: { type: Object }
|
||||
};
|
||||
|
||||
static styles = css`
|
||||
:host {
|
||||
display: block;
|
||||
font-family: 'Courier New', monospace;
|
||||
}
|
||||
.card {
|
||||
border: 1px solid var(--terminal-gray);
|
||||
background: var(--terminal-bg);
|
||||
padding: 1em;
|
||||
cursor: pointer;
|
||||
height: 20em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.card:hover {
|
||||
border-color: var(--terminal-green);
|
||||
}
|
||||
.header {
|
||||
color: var(--terminal-cyan);
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.status {
|
||||
color: var(--terminal-yellow);
|
||||
}
|
||||
.status.running {
|
||||
color: var(--terminal-green);
|
||||
}
|
||||
.preview {
|
||||
flex: 1;
|
||||
border: 1px solid var(--terminal-gray);
|
||||
min-height: 12em;
|
||||
position: relative;
|
||||
}
|
||||
.preview-content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
`;
|
||||
|
||||
firstUpdated() {
|
||||
this.renderPreview();
|
||||
}
|
||||
|
||||
updated(changedProperties) {
|
||||
if (changedProperties.has('session')) {
|
||||
this.renderPreview();
|
||||
}
|
||||
}
|
||||
|
||||
renderPreview() {
|
||||
const previewEl = this.shadowRoot.querySelector('.preview-content');
|
||||
if (!previewEl || !this.session?.lastOutput) return;
|
||||
|
||||
try {
|
||||
const lines = this.session.lastOutput.trim().split('\n');
|
||||
if (lines.length > 1) {
|
||||
// Parse asciinema format
|
||||
const castData = [];
|
||||
for (let i = 1; i < lines.length; i++) {
|
||||
if (lines[i].trim()) {
|
||||
try {
|
||||
castData.push(JSON.parse(lines[i]));
|
||||
} catch (e) {
|
||||
// Skip invalid lines
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (castData.length > 0) {
|
||||
const cast = {
|
||||
version: 2,
|
||||
width: 80,
|
||||
height: 24,
|
||||
timestamp: Math.floor(Date.now() / 1000)
|
||||
};
|
||||
|
||||
AsciinemaPlayer.create({
|
||||
data: castData,
|
||||
...cast
|
||||
}, previewEl, {
|
||||
theme: 'asciinema',
|
||||
loop: false,
|
||||
autoPlay: false,
|
||||
controls: false,
|
||||
fit: 'width'
|
||||
});
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
previewEl.innerHTML = '<p style="color: var(--terminal-gray); padding: 1em;">No preview available</p>';
|
||||
}
|
||||
}
|
||||
|
||||
handleClick() {
|
||||
this.dispatchEvent(new CustomEvent('session-select', {
|
||||
detail: { sessionId: this.session.id },
|
||||
bubbles: true
|
||||
}));
|
||||
}
|
||||
|
||||
render() {
|
||||
if (!this.session) return html``;
|
||||
|
||||
const command = this.session.metadata?.cmdline?.join(' ') || 'Unknown';
|
||||
const status = this.session.status || 'unknown';
|
||||
|
||||
return html`
|
||||
<div class="card" @click="${this.handleClick}">
|
||||
<div class="header">
|
||||
${command}
|
||||
</div>
|
||||
<div class="status ${status}">
|
||||
Status: ${status}
|
||||
</div>
|
||||
<div>ID: ${this.session.id.substring(0, 8)}...</div>
|
||||
<div class="preview">
|
||||
<div class="preview-content"></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
// Session overview component
|
||||
class SessionOverview extends LitElement {
|
||||
static properties = {
|
||||
sessions: { type: Array }
|
||||
};
|
||||
|
||||
static styles = css`
|
||||
:host {
|
||||
display: block;
|
||||
font-family: 'Courier New', monospace;
|
||||
}
|
||||
.controls {
|
||||
margin: 1em 0;
|
||||
display: flex;
|
||||
gap: 1em;
|
||||
align-items: center;
|
||||
}
|
||||
.form {
|
||||
border: 1px solid var(--terminal-gray);
|
||||
padding: 1em;
|
||||
margin: 1em 0;
|
||||
}
|
||||
.form-row {
|
||||
display: flex;
|
||||
gap: 1em;
|
||||
margin: 1em 0;
|
||||
align-items: center;
|
||||
}
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(40ch, 1fr));
|
||||
gap: 1em;
|
||||
margin: 1em 0;
|
||||
}
|
||||
input {
|
||||
font-family: 'Courier New', monospace;
|
||||
background: var(--terminal-bg);
|
||||
color: var(--terminal-fg);
|
||||
border: 1px solid var(--terminal-gray);
|
||||
padding: 0 1ch;
|
||||
height: 2em;
|
||||
}
|
||||
button {
|
||||
font-family: 'Courier New', monospace;
|
||||
background: var(--terminal-gray);
|
||||
color: var(--terminal-bg);
|
||||
border: 1px solid var(--terminal-gray);
|
||||
padding: 0 1ch;
|
||||
height: 2em;
|
||||
cursor: pointer;
|
||||
min-width: 8ch;
|
||||
}
|
||||
button:hover {
|
||||
background: var(--terminal-fg);
|
||||
}
|
||||
button.primary {
|
||||
background: var(--terminal-green);
|
||||
border-color: var(--terminal-green);
|
||||
}
|
||||
`;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.sessions = [];
|
||||
this.loadSessions();
|
||||
this.refreshInterval = setInterval(() => this.loadSessions(), 5000);
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
super.disconnectedCallback();
|
||||
if (this.refreshInterval) {
|
||||
clearInterval(this.refreshInterval);
|
||||
}
|
||||
}
|
||||
|
||||
async loadSessions() {
|
||||
try {
|
||||
const response = await fetch('/api/sessions');
|
||||
const data = await response.json();
|
||||
this.sessions = data;
|
||||
} catch (error) {
|
||||
console.error('Failed to load sessions:', error);
|
||||
}
|
||||
}
|
||||
|
||||
async createSession(event) {
|
||||
event.preventDefault();
|
||||
const formData = new FormData(event.target);
|
||||
const command = formData.get('command').trim().split(' ');
|
||||
const workingDir = formData.get('workingDir').trim();
|
||||
|
||||
if (!command[0]) {
|
||||
alert('Command is required');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/sessions', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
command,
|
||||
workingDir: workingDir || undefined
|
||||
})
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
event.target.reset();
|
||||
this.shadowRoot.querySelector('input[name="workingDir"]').value = '~/';
|
||||
setTimeout(() => this.loadSessions(), 1000);
|
||||
} else {
|
||||
const error = await response.json();
|
||||
alert(`Failed to create session: ${error.error}`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error creating session:', error);
|
||||
alert('Failed to create session');
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<h2>Session Overview</h2>
|
||||
|
||||
<div class="form">
|
||||
<h3>Create New Session</h3>
|
||||
<form @submit="${this.createSession}">
|
||||
<div class="form-row">
|
||||
<label>Working Directory:</label>
|
||||
<input name="workingDir" type="text" value="~/" placeholder="~/projects/my-app" style="flex: 1;">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label>Command:</label>
|
||||
<input name="command" type="text" placeholder="bash" required style="flex: 1;">
|
||||
<button type="submit" class="primary">Create</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<h3>Active Sessions (${this.sessions.length})</h3>
|
||||
<button @click="${this.loadSessions}">Refresh</button>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
${this.sessions.map(session => html`
|
||||
<session-card .session="${session}"></session-card>
|
||||
`)}
|
||||
</div>
|
||||
|
||||
${this.sessions.length === 0 ? html`
|
||||
<p style="color: var(--terminal-gray); text-align: center; margin: 2em;">
|
||||
No active sessions. Create one above to get started.
|
||||
</p>
|
||||
` : ''}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
// Session detail component
|
||||
class SessionDetail extends LitElement {
|
||||
static properties = {
|
||||
sessionId: { type: String },
|
||||
session: { type: Object }
|
||||
};
|
||||
|
||||
static styles = css`
|
||||
:host {
|
||||
display: block;
|
||||
font-family: 'Courier New', monospace;
|
||||
}
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 1em 0;
|
||||
}
|
||||
.terminal {
|
||||
border: 1px solid var(--terminal-gray);
|
||||
min-height: 30em;
|
||||
position: relative;
|
||||
}
|
||||
.input-area {
|
||||
display: flex;
|
||||
gap: 1em;
|
||||
margin: 1em 0;
|
||||
align-items: center;
|
||||
}
|
||||
input {
|
||||
font-family: 'Courier New', monospace;
|
||||
background: var(--terminal-bg);
|
||||
color: var(--terminal-fg);
|
||||
border: 1px solid var(--terminal-gray);
|
||||
padding: 0 1ch;
|
||||
height: 2em;
|
||||
flex: 1;
|
||||
}
|
||||
button {
|
||||
font-family: 'Courier New', monospace;
|
||||
background: var(--terminal-gray);
|
||||
color: var(--terminal-bg);
|
||||
border: 1px solid var(--terminal-gray);
|
||||
padding: 0 1ch;
|
||||
height: 2em;
|
||||
cursor: pointer;
|
||||
min-width: 8ch;
|
||||
}
|
||||
button:hover {
|
||||
background: var(--terminal-fg);
|
||||
}
|
||||
button.primary {
|
||||
background: var(--terminal-green);
|
||||
border-color: var(--terminal-green);
|
||||
}
|
||||
`;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.sessionId = null;
|
||||
this.session = null;
|
||||
this.websocket = null;
|
||||
this.player = null;
|
||||
this.castData = [];
|
||||
}
|
||||
|
||||
updated(changedProperties) {
|
||||
if (changedProperties.has('sessionId') && this.sessionId) {
|
||||
this.loadSession();
|
||||
this.connectWebSocket();
|
||||
}
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
super.disconnectedCallback();
|
||||
this.disconnectWebSocket();
|
||||
}
|
||||
|
||||
async loadSession() {
|
||||
try {
|
||||
const response = await fetch('/api/sessions');
|
||||
const sessions = await response.json();
|
||||
this.session = sessions.find(s => s.id === this.sessionId);
|
||||
} catch (error) {
|
||||
console.error('Failed to load session:', error);
|
||||
}
|
||||
}
|
||||
|
||||
connectWebSocket() {
|
||||
this.disconnectWebSocket();
|
||||
|
||||
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
||||
const wsUrl = `${protocol}//${window.location.host}?session=${this.sessionId}`;
|
||||
|
||||
this.websocket = new WebSocket(wsUrl);
|
||||
|
||||
this.websocket.onopen = () => {
|
||||
console.log(`Connected to session ${this.sessionId}`);
|
||||
};
|
||||
|
||||
this.websocket.onmessage = (event) => {
|
||||
try {
|
||||
const castEvent = JSON.parse(event.data);
|
||||
this.castData.push(castEvent);
|
||||
this.updatePlayer();
|
||||
} catch (error) {
|
||||
console.error('Error parsing WebSocket message:', error);
|
||||
}
|
||||
};
|
||||
|
||||
this.websocket.onclose = () => {
|
||||
console.log(`Disconnected from session ${this.sessionId}`);
|
||||
};
|
||||
|
||||
this.websocket.onerror = (error) => {
|
||||
console.error('WebSocket error:', error);
|
||||
};
|
||||
}
|
||||
|
||||
disconnectWebSocket() {
|
||||
if (this.websocket) {
|
||||
this.websocket.close();
|
||||
this.websocket = null;
|
||||
}
|
||||
}
|
||||
|
||||
updatePlayer() {
|
||||
const terminalEl = this.shadowRoot.querySelector('.terminal');
|
||||
if (!terminalEl || this.castData.length === 0) return;
|
||||
|
||||
terminalEl.innerHTML = '';
|
||||
|
||||
try {
|
||||
const cast = {
|
||||
version: 2,
|
||||
width: 80,
|
||||
height: 24,
|
||||
timestamp: Math.floor(Date.now() / 1000)
|
||||
};
|
||||
|
||||
this.player = AsciinemaPlayer.create({
|
||||
data: this.castData,
|
||||
...cast
|
||||
}, terminalEl, {
|
||||
theme: 'asciinema',
|
||||
loop: false,
|
||||
autoPlay: true,
|
||||
controls: false,
|
||||
fit: 'width'
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error creating player:', error);
|
||||
terminalEl.innerHTML = '<p style="color: var(--terminal-red); padding: 1em;">Error loading terminal</p>';
|
||||
}
|
||||
}
|
||||
|
||||
sendInput(event) {
|
||||
event.preventDefault();
|
||||
const input = this.shadowRoot.querySelector('input[name="input"]');
|
||||
const value = input.value.trim();
|
||||
|
||||
if (!value || !this.websocket || this.websocket.readyState !== WebSocket.OPEN) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.websocket.send(JSON.stringify({
|
||||
type: 'input',
|
||||
data: value
|
||||
}));
|
||||
|
||||
input.value = '';
|
||||
}
|
||||
|
||||
goBack() {
|
||||
this.dispatchEvent(new CustomEvent('go-back', { bubbles: true }));
|
||||
}
|
||||
|
||||
render() {
|
||||
if (!this.session) {
|
||||
return html`<p>Loading session...</p>`;
|
||||
}
|
||||
|
||||
const command = this.session.metadata?.cmdline?.join(' ') || 'Unknown';
|
||||
|
||||
return html`
|
||||
<div class="header">
|
||||
<button @click="${this.goBack}">← Back to Sessions</button>
|
||||
<h2>${command}</h2>
|
||||
<span style="color: var(--terminal-gray);">ID: ${this.sessionId.substring(0, 8)}...</span>
|
||||
</div>
|
||||
|
||||
<div class="terminal"></div>
|
||||
|
||||
<form @submit="${this.sendInput}" class="input-area">
|
||||
<span style="color: var(--terminal-green);">$</span>
|
||||
<input name="input" type="text" placeholder="Enter command..." autofocus>
|
||||
<button type="submit" class="primary">Send</button>
|
||||
</form>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
// Register components
|
||||
customElements.define('vibe-header', VibeHeader);
|
||||
customElements.define('session-card', SessionCard);
|
||||
customElements.define('session-overview', SessionOverview);
|
||||
customElements.define('session-detail', SessionDetail);
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
||||
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
||||
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
||||
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
||||
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
||||
};
|
||||
import { LitElement, html } from 'lit';
|
||||
import { customElement } from 'lit/decorators.js';
|
||||
let AppHeader = class AppHeader extends LitElement {
|
||||
createRenderRoot() {
|
||||
return this;
|
||||
}
|
||||
handleCreateSession() {
|
||||
this.dispatchEvent(new CustomEvent('create-session'));
|
||||
}
|
||||
render() {
|
||||
return html `
|
||||
<div class="p-4 border-b border-vs-border">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="text-vs-user font-mono text-sm">VibeTunnel</div>
|
||||
<button
|
||||
class="bg-vs-user text-vs-text hover:bg-vs-accent font-mono px-4 py-2 border-none rounded transition-colors text-sm"
|
||||
@click=${this.handleCreateSession}
|
||||
>
|
||||
CREATE SESSION
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
};
|
||||
AppHeader = __decorate([
|
||||
customElement('app-header')
|
||||
], AppHeader);
|
||||
export { AppHeader };
|
||||
//# sourceMappingURL=app-header.js.map
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"file":"app-header.js","sourceRoot":"","sources":["../../src/client/components/app-header.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAG3C,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IACvC,gBAAgB;QACd,OAAO,IAAI,CAAC;IACd,CAAC;IAEO,mBAAmB;QACzB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,gBAAgB,CAAC,CAAC,CAAC;IACxD,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;qBAMM,IAAI,CAAC,mBAAmB;;;;;;KAMxC,CAAC;IACJ,CAAC;CACF,CAAA;AAxBY,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAwBrB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators.js';\n\n@customElement('app-header')\nexport class AppHeader extends LitElement {\n createRenderRoot() {\n return this;\n }\n\n private handleCreateSession() {\n this.dispatchEvent(new CustomEvent('create-session'));\n }\n\n render() {\n return html`\n <div class=\"p-4 border-b border-vs-border\">\n <div class=\"flex items-center justify-between\">\n <div class=\"text-vs-user font-mono text-sm\">VibeTunnel</div>\n <button\n class=\"bg-vs-user text-vs-text hover:bg-vs-accent font-mono px-4 py-2 border-none rounded transition-colors text-sm\"\n @click=${this.handleCreateSession}\n >\n CREATE SESSION\n </button>\n </div>\n </div>\n `;\n }\n}"]}
|
||||
|
|
@ -1,148 +0,0 @@
|
|||
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
||||
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
||||
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
||||
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
||||
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
||||
};
|
||||
import { LitElement, html } from 'lit';
|
||||
import { customElement, property, state } from 'lit/decorators.js';
|
||||
let FileBrowser = class FileBrowser extends LitElement {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.currentPath = '~';
|
||||
this.visible = false;
|
||||
this.files = [];
|
||||
this.loading = false;
|
||||
}
|
||||
// Disable shadow DOM to use Tailwind
|
||||
createRenderRoot() {
|
||||
return this;
|
||||
}
|
||||
async connectedCallback() {
|
||||
super.connectedCallback();
|
||||
if (this.visible) {
|
||||
await this.loadDirectory(this.currentPath);
|
||||
}
|
||||
}
|
||||
async updated(changedProperties) {
|
||||
if (changedProperties.has('visible') && this.visible) {
|
||||
await this.loadDirectory(this.currentPath);
|
||||
}
|
||||
}
|
||||
async loadDirectory(dirPath) {
|
||||
this.loading = true;
|
||||
try {
|
||||
const response = await fetch(`/api/fs/browse?path=${encodeURIComponent(dirPath)}`);
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
this.currentPath = data.absolutePath;
|
||||
this.files = data.files;
|
||||
}
|
||||
else {
|
||||
console.error('Failed to load directory');
|
||||
}
|
||||
}
|
||||
catch (error) {
|
||||
console.error('Error loading directory:', error);
|
||||
}
|
||||
finally {
|
||||
this.loading = false;
|
||||
}
|
||||
}
|
||||
handleDirectoryClick(dirName) {
|
||||
const newPath = this.currentPath + '/' + dirName;
|
||||
this.loadDirectory(newPath);
|
||||
}
|
||||
handleParentClick() {
|
||||
const parentPath = this.currentPath.split('/').slice(0, -1).join('/') || '/';
|
||||
this.loadDirectory(parentPath);
|
||||
}
|
||||
handleSelect() {
|
||||
this.dispatchEvent(new CustomEvent('directory-selected', {
|
||||
detail: this.currentPath
|
||||
}));
|
||||
}
|
||||
handleCancel() {
|
||||
this.dispatchEvent(new CustomEvent('browser-cancel'));
|
||||
}
|
||||
render() {
|
||||
if (!this.visible) {
|
||||
return html ``;
|
||||
}
|
||||
return html `
|
||||
<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center" style="z-index: 9999;">
|
||||
<div class="bg-vs-bg-secondary border border-vs-border font-mono text-sm w-96 h-96 flex flex-col">
|
||||
<div class="p-4 border-b border-vs-border flex-shrink-0">
|
||||
<div class="text-vs-assistant text-sm mb-2">Select Directory</div>
|
||||
<div class="text-vs-muted text-sm break-all">${this.currentPath}</div>
|
||||
</div>
|
||||
|
||||
<div class="p-4 flex-1 overflow-y-auto">
|
||||
${this.loading ? html `
|
||||
<div class="text-vs-muted">Loading...</div>
|
||||
` : html `
|
||||
${this.currentPath !== '/' ? html `
|
||||
<div
|
||||
class="flex items-center gap-2 p-2 hover:bg-vs-nav-hover cursor-pointer text-vs-accent"
|
||||
@click=${this.handleParentClick}
|
||||
>
|
||||
<span>📁</span>
|
||||
<span>.. (parent directory)</span>
|
||||
</div>
|
||||
` : ''}
|
||||
|
||||
${this.files.filter(f => f.isDir).map(file => html `
|
||||
<div
|
||||
class="flex items-center gap-2 p-2 hover:bg-vs-nav-hover cursor-pointer text-vs-accent"
|
||||
@click=${() => this.handleDirectoryClick(file.name)}
|
||||
>
|
||||
<span>📁</span>
|
||||
<span>${file.name}</span>
|
||||
</div>
|
||||
`)}
|
||||
|
||||
${this.files.filter(f => !f.isDir).map(file => html `
|
||||
<div class="flex items-center gap-2 p-2 text-vs-muted">
|
||||
<span>📄</span>
|
||||
<span>${file.name}</span>
|
||||
</div>
|
||||
`)}
|
||||
`}
|
||||
</div>
|
||||
|
||||
<div class="p-4 border-t border-vs-border flex gap-4 justify-end flex-shrink-0">
|
||||
<button
|
||||
class="bg-vs-muted text-vs-bg hover:bg-vs-text font-mono px-4 py-2 border-none"
|
||||
@click=${this.handleCancel}
|
||||
>
|
||||
cancel
|
||||
</button>
|
||||
<button
|
||||
class="bg-vs-user text-vs-bg hover:bg-vs-accent font-mono px-4 py-2 border-none"
|
||||
@click=${this.handleSelect}
|
||||
>
|
||||
select
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
};
|
||||
__decorate([
|
||||
property({ type: String })
|
||||
], FileBrowser.prototype, "currentPath", void 0);
|
||||
__decorate([
|
||||
property({ type: Boolean })
|
||||
], FileBrowser.prototype, "visible", void 0);
|
||||
__decorate([
|
||||
state()
|
||||
], FileBrowser.prototype, "files", void 0);
|
||||
__decorate([
|
||||
state()
|
||||
], FileBrowser.prototype, "loading", void 0);
|
||||
FileBrowser = __decorate([
|
||||
customElement('file-browser')
|
||||
], FileBrowser);
|
||||
export { FileBrowser };
|
||||
//# sourceMappingURL=file-browser.js.map
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,223 +0,0 @@
|
|||
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
||||
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
||||
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
||||
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
||||
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
||||
};
|
||||
import { LitElement, html } from 'lit';
|
||||
import { customElement, property, state } from 'lit/decorators.js';
|
||||
import './file-browser.js';
|
||||
let SessionCreateForm = class SessionCreateForm extends LitElement {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.workingDir = '~/';
|
||||
this.command = 'zsh';
|
||||
this.disabled = false;
|
||||
this.visible = false;
|
||||
this.isCreating = false;
|
||||
this.showFileBrowser = false;
|
||||
}
|
||||
// Disable shadow DOM to use Tailwind
|
||||
createRenderRoot() {
|
||||
return this;
|
||||
}
|
||||
handleWorkingDirChange(e) {
|
||||
const input = e.target;
|
||||
this.workingDir = input.value;
|
||||
this.dispatchEvent(new CustomEvent('working-dir-change', {
|
||||
detail: this.workingDir
|
||||
}));
|
||||
}
|
||||
handleCommandChange(e) {
|
||||
const input = e.target;
|
||||
this.command = input.value;
|
||||
}
|
||||
handleBrowse() {
|
||||
this.showFileBrowser = true;
|
||||
}
|
||||
handleDirectorySelected(e) {
|
||||
this.workingDir = e.detail;
|
||||
this.showFileBrowser = false;
|
||||
}
|
||||
handleBrowserCancel() {
|
||||
this.showFileBrowser = false;
|
||||
}
|
||||
async handleCreate() {
|
||||
if (!this.workingDir.trim() || !this.command.trim()) {
|
||||
this.dispatchEvent(new CustomEvent('error', {
|
||||
detail: 'Please fill in both working directory and command'
|
||||
}));
|
||||
return;
|
||||
}
|
||||
this.isCreating = true;
|
||||
const sessionData = {
|
||||
command: this.parseCommand(this.command.trim()),
|
||||
workingDir: this.workingDir.trim()
|
||||
};
|
||||
try {
|
||||
const response = await fetch('/api/sessions', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(sessionData)
|
||||
});
|
||||
if (response.ok) {
|
||||
const result = await response.json();
|
||||
this.command = ''; // Clear command on success
|
||||
this.dispatchEvent(new CustomEvent('session-created', {
|
||||
detail: result
|
||||
}));
|
||||
}
|
||||
else {
|
||||
const error = await response.json();
|
||||
this.dispatchEvent(new CustomEvent('error', {
|
||||
detail: `Failed to create session: ${error.error}`
|
||||
}));
|
||||
}
|
||||
}
|
||||
catch (error) {
|
||||
console.error('Error creating session:', error);
|
||||
this.dispatchEvent(new CustomEvent('error', {
|
||||
detail: 'Failed to create session'
|
||||
}));
|
||||
}
|
||||
finally {
|
||||
this.isCreating = false;
|
||||
}
|
||||
}
|
||||
parseCommand(commandStr) {
|
||||
// Simple command parsing - split by spaces but respect quotes
|
||||
const args = [];
|
||||
let current = '';
|
||||
let inQuotes = false;
|
||||
let quoteChar = '';
|
||||
for (let i = 0; i < commandStr.length; i++) {
|
||||
const char = commandStr[i];
|
||||
if ((char === '"' || char === "'") && !inQuotes) {
|
||||
inQuotes = true;
|
||||
quoteChar = char;
|
||||
}
|
||||
else if (char === quoteChar && inQuotes) {
|
||||
inQuotes = false;
|
||||
quoteChar = '';
|
||||
}
|
||||
else if (char === ' ' && !inQuotes) {
|
||||
if (current) {
|
||||
args.push(current);
|
||||
current = '';
|
||||
}
|
||||
}
|
||||
else {
|
||||
current += char;
|
||||
}
|
||||
}
|
||||
if (current) {
|
||||
args.push(current);
|
||||
}
|
||||
return args;
|
||||
}
|
||||
handleCancel() {
|
||||
this.dispatchEvent(new CustomEvent('cancel'));
|
||||
}
|
||||
render() {
|
||||
if (!this.visible) {
|
||||
return html ``;
|
||||
}
|
||||
return html `
|
||||
<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center" style="z-index: 9999;">
|
||||
<div class="bg-vs-bg-secondary border border-vs-border font-mono text-sm w-96 max-w-full mx-4">
|
||||
<div class="p-4 border-b border-vs-border flex justify-between items-center">
|
||||
<div class="text-vs-assistant text-sm">Create New Session</div>
|
||||
<button
|
||||
class="text-vs-muted hover:text-vs-text text-lg leading-none border-none bg-transparent cursor-pointer"
|
||||
@click=${this.handleCancel}
|
||||
>×</button>
|
||||
</div>
|
||||
|
||||
<div class="p-4">
|
||||
|
||||
<div class="mb-4">
|
||||
<div class="text-vs-text mb-2">Working Directory:</div>
|
||||
<div class="flex gap-4">
|
||||
<input
|
||||
type="text"
|
||||
class="flex-1 bg-vs-bg text-vs-text border border-vs-border outline-none font-mono px-4 py-2"
|
||||
.value=${this.workingDir}
|
||||
@input=${this.handleWorkingDirChange}
|
||||
placeholder="~/"
|
||||
?disabled=${this.disabled || this.isCreating}
|
||||
/>
|
||||
<button
|
||||
class="bg-vs-function text-vs-bg hover:bg-vs-highlight font-mono px-4 py-2 border-none"
|
||||
@click=${this.handleBrowse}
|
||||
?disabled=${this.disabled || this.isCreating}
|
||||
>
|
||||
browse
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<div class="text-vs-text mb-2">Command:</div>
|
||||
<input
|
||||
type="text"
|
||||
class="w-full bg-vs-bg text-vs-text border border-vs-border outline-none font-mono px-4 py-2"
|
||||
.value=${this.command}
|
||||
@input=${this.handleCommandChange}
|
||||
@keydown=${(e) => e.key === 'Enter' && this.handleCreate()}
|
||||
placeholder="zsh"
|
||||
?disabled=${this.disabled || this.isCreating}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-4 justify-end">
|
||||
<button
|
||||
class="bg-vs-muted text-vs-bg hover:bg-vs-text font-mono px-4 py-2 border-none"
|
||||
@click=${this.handleCancel}
|
||||
?disabled=${this.isCreating}
|
||||
>
|
||||
cancel
|
||||
</button>
|
||||
<button
|
||||
class="bg-vs-user text-vs-text hover:bg-vs-accent font-mono px-4 py-2 border-none disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-vs-user"
|
||||
@click=${this.handleCreate}
|
||||
?disabled=${this.disabled || this.isCreating || !this.workingDir.trim() || !this.command.trim()}
|
||||
>
|
||||
${this.isCreating ? 'creating...' : 'create'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<file-browser
|
||||
.visible=${this.showFileBrowser}
|
||||
.currentPath=${this.workingDir}
|
||||
@directory-selected=${this.handleDirectorySelected}
|
||||
@browser-cancel=${this.handleBrowserCancel}
|
||||
></file-browser>
|
||||
`;
|
||||
}
|
||||
};
|
||||
__decorate([
|
||||
property({ type: String })
|
||||
], SessionCreateForm.prototype, "workingDir", void 0);
|
||||
__decorate([
|
||||
property({ type: String })
|
||||
], SessionCreateForm.prototype, "command", void 0);
|
||||
__decorate([
|
||||
property({ type: Boolean })
|
||||
], SessionCreateForm.prototype, "disabled", void 0);
|
||||
__decorate([
|
||||
property({ type: Boolean })
|
||||
], SessionCreateForm.prototype, "visible", void 0);
|
||||
__decorate([
|
||||
state()
|
||||
], SessionCreateForm.prototype, "isCreating", void 0);
|
||||
__decorate([
|
||||
state()
|
||||
], SessionCreateForm.prototype, "showFileBrowser", void 0);
|
||||
SessionCreateForm = __decorate([
|
||||
customElement('session-create-form')
|
||||
], SessionCreateForm);
|
||||
export { SessionCreateForm };
|
||||
//# sourceMappingURL=session-create-form.js.map
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,422 +0,0 @@
|
|||
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
||||
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
||||
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
||||
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
||||
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
||||
};
|
||||
import { LitElement, html } from 'lit';
|
||||
import { customElement, property, state } from 'lit/decorators.js';
|
||||
import './session-create-form.js';
|
||||
let SessionList = class SessionList extends LitElement {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.sessions = [];
|
||||
this.loading = false;
|
||||
this.hideExited = true;
|
||||
this.showCreateModal = false;
|
||||
this.killingSessionIds = new Set();
|
||||
this.loadedSnapshots = new Map();
|
||||
this.loadingSnapshots = new Set();
|
||||
this.cleaningExited = false;
|
||||
this.newSessionIds = new Set();
|
||||
}
|
||||
// Disable shadow DOM to use Tailwind
|
||||
createRenderRoot() {
|
||||
return this;
|
||||
}
|
||||
handleRefresh() {
|
||||
this.dispatchEvent(new CustomEvent('refresh'));
|
||||
}
|
||||
async loadSnapshot(sessionId) {
|
||||
if (this.loadedSnapshots.has(sessionId) || this.loadingSnapshots.has(sessionId)) {
|
||||
return;
|
||||
}
|
||||
this.loadingSnapshots.add(sessionId);
|
||||
this.requestUpdate();
|
||||
try {
|
||||
// Just mark as loaded and create the player with the endpoint URL
|
||||
this.loadedSnapshots.set(sessionId, sessionId);
|
||||
this.requestUpdate();
|
||||
// Create asciinema player after the element is rendered
|
||||
setTimeout(() => this.createPlayer(sessionId), 10);
|
||||
}
|
||||
catch (error) {
|
||||
console.error('Error loading snapshot:', error);
|
||||
}
|
||||
finally {
|
||||
this.loadingSnapshots.delete(sessionId);
|
||||
this.requestUpdate();
|
||||
}
|
||||
}
|
||||
loadAllSnapshots() {
|
||||
this.sessions.forEach(session => {
|
||||
this.loadSnapshot(session.id);
|
||||
});
|
||||
}
|
||||
updated(changedProperties) {
|
||||
super.updated(changedProperties);
|
||||
if (changedProperties.has('sessions')) {
|
||||
// Auto-load snapshots for existing sessions immediately, but delay for new ones
|
||||
const prevSessions = changedProperties.get('sessions') || [];
|
||||
const newSessionIdsList = this.sessions
|
||||
.filter(session => !prevSessions.find((prev) => prev.id === session.id))
|
||||
.map(session => session.id);
|
||||
// Track new sessions
|
||||
newSessionIdsList.forEach(id => this.newSessionIds.add(id));
|
||||
// Load existing sessions immediately
|
||||
const existingSessions = this.sessions.filter(session => !newSessionIdsList.includes(session.id));
|
||||
existingSessions.forEach(session => this.loadSnapshot(session.id));
|
||||
// Load new sessions after a delay to let them generate some output
|
||||
if (newSessionIdsList.length > 0) {
|
||||
setTimeout(() => {
|
||||
newSessionIdsList.forEach(sessionId => {
|
||||
this.newSessionIds.delete(sessionId); // Remove from new sessions set
|
||||
this.loadSnapshot(sessionId);
|
||||
});
|
||||
this.requestUpdate(); // Update UI to show the players
|
||||
}, 500); // Wait 500ms for new sessions
|
||||
}
|
||||
}
|
||||
// If hideExited changed, recreate players for newly visible sessions
|
||||
if (changedProperties.has('hideExited')) {
|
||||
// Use a slight delay to avoid blocking the checkbox click
|
||||
setTimeout(() => {
|
||||
requestAnimationFrame(() => {
|
||||
this.filteredSessions.forEach(session => {
|
||||
const playerElement = this.querySelector(`#player-${session.id}`);
|
||||
if (playerElement && this.loadedSnapshots.has(session.id)) {
|
||||
// Player element exists but might not have a player instance
|
||||
// Check if it's empty and recreate if needed
|
||||
if (!playerElement.hasChildNodes() || playerElement.children.length === 0) {
|
||||
this.createPlayer(session.id);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}, 10);
|
||||
}
|
||||
}
|
||||
createPlayer(sessionId) {
|
||||
const playerElement = this.querySelector(`#player-${sessionId}`);
|
||||
if (!playerElement) {
|
||||
// Element not ready yet, retry on next frame
|
||||
requestAnimationFrame(() => this.createPlayer(sessionId));
|
||||
return;
|
||||
}
|
||||
if (window.AsciinemaPlayer) {
|
||||
try {
|
||||
// Find the session to check its status
|
||||
const session = this.sessions.find(s => s.id === sessionId);
|
||||
// For ended sessions, use snapshot instead of stream to avoid reloading
|
||||
const url = session?.status === 'exited'
|
||||
? `/api/sessions/${sessionId}/snapshot`
|
||||
: `/api/sessions/${sessionId}/stream`;
|
||||
const config = session?.status === 'exited'
|
||||
? { url } // Static snapshot
|
||||
: { driver: "eventsource", url }; // Live stream
|
||||
window.AsciinemaPlayer.create(config, playerElement, {
|
||||
autoPlay: true,
|
||||
loop: false,
|
||||
controls: false,
|
||||
fit: 'width',
|
||||
terminalFontSize: '8px',
|
||||
idleTimeLimit: 0.5,
|
||||
preload: true,
|
||||
poster: 'npt:999999'
|
||||
});
|
||||
}
|
||||
catch (error) {
|
||||
console.error('Error creating asciinema player:', error);
|
||||
}
|
||||
}
|
||||
}
|
||||
handleSessionClick(session) {
|
||||
this.dispatchEvent(new CustomEvent('session-select', {
|
||||
detail: session
|
||||
}));
|
||||
}
|
||||
async handleKillSession(e, sessionId) {
|
||||
e.stopPropagation(); // Prevent session selection
|
||||
if (!confirm('Are you sure you want to kill this session?')) {
|
||||
return;
|
||||
}
|
||||
this.killingSessionIds.add(sessionId);
|
||||
this.requestUpdate();
|
||||
try {
|
||||
const response = await fetch(`/api/sessions/${sessionId}`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
if (response.ok) {
|
||||
this.dispatchEvent(new CustomEvent('session-killed', {
|
||||
detail: { sessionId }
|
||||
}));
|
||||
// Refresh the list after a short delay
|
||||
setTimeout(() => {
|
||||
this.handleRefresh();
|
||||
}, 1000);
|
||||
}
|
||||
else {
|
||||
const error = await response.json();
|
||||
this.dispatchEvent(new CustomEvent('error', {
|
||||
detail: `Failed to kill session: ${error.error}`
|
||||
}));
|
||||
}
|
||||
}
|
||||
catch (error) {
|
||||
console.error('Error killing session:', error);
|
||||
this.dispatchEvent(new CustomEvent('error', {
|
||||
detail: 'Failed to kill session'
|
||||
}));
|
||||
}
|
||||
finally {
|
||||
this.killingSessionIds.delete(sessionId);
|
||||
this.requestUpdate();
|
||||
}
|
||||
}
|
||||
async handleCleanSession(e, sessionId) {
|
||||
e.stopPropagation(); // Prevent session selection
|
||||
if (!confirm('Are you sure you want to clean up this session?')) {
|
||||
return;
|
||||
}
|
||||
this.killingSessionIds.add(sessionId);
|
||||
this.requestUpdate();
|
||||
try {
|
||||
const response = await fetch(`/api/sessions/${sessionId}/cleanup`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
if (response.ok) {
|
||||
this.dispatchEvent(new CustomEvent('session-killed', {
|
||||
detail: { sessionId }
|
||||
}));
|
||||
// Refresh the list after a short delay
|
||||
setTimeout(() => {
|
||||
this.handleRefresh();
|
||||
}, 500);
|
||||
}
|
||||
else {
|
||||
const error = await response.json();
|
||||
this.dispatchEvent(new CustomEvent('error', {
|
||||
detail: `Failed to clean session: ${error.error}`
|
||||
}));
|
||||
}
|
||||
}
|
||||
catch (error) {
|
||||
console.error('Error cleaning session:', error);
|
||||
this.dispatchEvent(new CustomEvent('error', {
|
||||
detail: 'Failed to clean session'
|
||||
}));
|
||||
}
|
||||
finally {
|
||||
this.killingSessionIds.delete(sessionId);
|
||||
this.requestUpdate();
|
||||
}
|
||||
}
|
||||
formatTime(timestamp) {
|
||||
try {
|
||||
const date = new Date(timestamp);
|
||||
return date.toLocaleTimeString();
|
||||
}
|
||||
catch {
|
||||
return 'Unknown';
|
||||
}
|
||||
}
|
||||
truncateId(id) {
|
||||
return id.length > 8 ? `${id.substring(0, 8)}...` : id;
|
||||
}
|
||||
handleSessionCreated(e) {
|
||||
this.dispatchEvent(new CustomEvent('session-created', {
|
||||
detail: e.detail
|
||||
}));
|
||||
}
|
||||
handleCreateError(e) {
|
||||
this.dispatchEvent(new CustomEvent('error', {
|
||||
detail: e.detail
|
||||
}));
|
||||
}
|
||||
handleCreateModalClose() {
|
||||
this.dispatchEvent(new CustomEvent('create-modal-close'));
|
||||
}
|
||||
async handleCleanExited() {
|
||||
const exitedSessions = this.sessions.filter(session => session.status === 'exited');
|
||||
if (exitedSessions.length === 0) {
|
||||
this.dispatchEvent(new CustomEvent('error', {
|
||||
detail: 'No exited sessions to clean'
|
||||
}));
|
||||
return;
|
||||
}
|
||||
if (!confirm(`Are you sure you want to delete ${exitedSessions.length} exited session${exitedSessions.length > 1 ? 's' : ''}?`)) {
|
||||
return;
|
||||
}
|
||||
this.cleaningExited = true;
|
||||
this.requestUpdate();
|
||||
try {
|
||||
// Use the bulk cleanup API endpoint
|
||||
const response = await fetch('/api/cleanup-exited', {
|
||||
method: 'POST'
|
||||
});
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to cleanup exited sessions');
|
||||
}
|
||||
this.dispatchEvent(new CustomEvent('error', {
|
||||
detail: `Successfully cleaned ${exitedSessions.length} exited session${exitedSessions.length > 1 ? 's' : ''}`
|
||||
}));
|
||||
// Refresh the list after cleanup
|
||||
setTimeout(() => {
|
||||
this.handleRefresh();
|
||||
}, 500);
|
||||
}
|
||||
catch (error) {
|
||||
console.error('Error cleaning exited sessions:', error);
|
||||
this.dispatchEvent(new CustomEvent('error', {
|
||||
detail: 'Failed to clean exited sessions'
|
||||
}));
|
||||
}
|
||||
finally {
|
||||
this.cleaningExited = false;
|
||||
this.requestUpdate();
|
||||
}
|
||||
}
|
||||
handleHideExitedChange(e) {
|
||||
const checked = e.target.checked;
|
||||
this.dispatchEvent(new CustomEvent('hide-exited-change', {
|
||||
detail: checked
|
||||
}));
|
||||
}
|
||||
get filteredSessions() {
|
||||
return this.hideExited
|
||||
? this.sessions.filter(session => session.status === 'running')
|
||||
: this.sessions;
|
||||
}
|
||||
render() {
|
||||
const sessionsToShow = this.filteredSessions;
|
||||
return html `
|
||||
<div class="font-mono text-sm p-4">
|
||||
<!-- Controls -->
|
||||
<div class="mb-4 flex items-center justify-between">
|
||||
${!this.hideExited ? html `
|
||||
<button
|
||||
class="bg-vs-warning text-vs-bg hover:bg-vs-highlight font-mono px-4 py-2 border-none rounded transition-colors disabled:opacity-50"
|
||||
@click=${this.handleCleanExited}
|
||||
?disabled=${this.cleaningExited || this.sessions.filter(s => s.status === 'exited').length === 0}
|
||||
>
|
||||
${this.cleaningExited ? '[~] CLEANING...' : 'CLEAN EXITED'}
|
||||
</button>
|
||||
` : html `<div></div>`}
|
||||
|
||||
<label class="flex items-center gap-2 text-vs-text text-sm cursor-pointer hover:text-vs-accent transition-colors">
|
||||
<div class="relative">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="sr-only"
|
||||
.checked=${this.hideExited}
|
||||
@change=${this.handleHideExitedChange}
|
||||
>
|
||||
<div class="w-4 h-4 border border-vs-border rounded bg-vs-bg-secondary flex items-center justify-center transition-all ${this.hideExited ? 'bg-vs-user border-vs-user' : 'hover:border-vs-accent'}">
|
||||
${this.hideExited ? html `
|
||||
<svg class="w-3 h-3 text-vs-bg" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
` : ''}
|
||||
</div>
|
||||
</div>
|
||||
hide exited
|
||||
</label>
|
||||
</div>
|
||||
|
||||
${sessionsToShow.length === 0 ? html `
|
||||
<div class="text-vs-muted text-center py-8">
|
||||
${this.loading ? 'Loading sessions...' : (this.hideExited && this.sessions.length > 0 ? 'No running sessions' : 'No sessions found')}
|
||||
</div>
|
||||
` : html `
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
${sessionsToShow.map(session => html `
|
||||
<div
|
||||
class="bg-vs-bg border border-vs-border rounded shadow cursor-pointer overflow-hidden"
|
||||
@click=${() => this.handleSessionClick(session)}
|
||||
>
|
||||
<!-- Compact Header -->
|
||||
<div class="flex justify-between items-center px-3 py-2 border-b border-vs-border">
|
||||
<div class="text-vs-text text-xs font-mono truncate pr-2 flex-1">${session.command}</div>
|
||||
${session.status === 'running' || !this.hideExited ? html `
|
||||
<button
|
||||
class="bg-vs-warning text-vs-bg hover:bg-vs-highlight font-mono px-2 py-0.5 border-none text-xs disabled:opacity-50 flex-shrink-0 rounded"
|
||||
@click=${(e) => session.status === 'running' ? this.handleKillSession(e, session.id) : this.handleCleanSession(e, session.id)}
|
||||
?disabled=${this.killingSessionIds.has(session.id)}
|
||||
>
|
||||
${this.killingSessionIds.has(session.id)
|
||||
? (session.status === 'running' ? '[~] killing...' : '[~] cleaning...')
|
||||
: (session.status === 'running' ? 'kill' : 'clean')}
|
||||
</button>
|
||||
` : ''}
|
||||
</div>
|
||||
|
||||
<!-- Asciinema player (main content) -->
|
||||
<div class="session-preview bg-black flex items-center justify-center overflow-hidden" style="aspect-ratio: 640/480;">
|
||||
${this.loadedSnapshots.has(session.id) ? html `
|
||||
<div id="player-${session.id}" class="w-full h-full overflow-hidden"></div>
|
||||
` : html `
|
||||
<div class="text-vs-muted text-xs">
|
||||
${this.newSessionIds.has(session.id)
|
||||
? '[~] init_session...'
|
||||
: (this.loadingSnapshots.has(session.id) ? '[~] loading...' : '[~] loading...')}
|
||||
</div>
|
||||
`}
|
||||
</div>
|
||||
|
||||
<!-- Compact Footer -->
|
||||
<div class="px-3 py-2 text-vs-muted text-xs border-t border-vs-border">
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="${session.status === 'running' ? 'text-vs-user' : 'text-vs-warning'} text-xs">
|
||||
${session.status}
|
||||
</span>
|
||||
<span class="truncate">${this.truncateId(session.id)}</span>
|
||||
</div>
|
||||
<div class="truncate text-xs opacity-75" title="${session.workingDir}">${session.workingDir}</div>
|
||||
</div>
|
||||
</div>
|
||||
`)}
|
||||
</div>
|
||||
`}
|
||||
|
||||
<session-create-form
|
||||
.visible=${this.showCreateModal}
|
||||
@session-created=${this.handleSessionCreated}
|
||||
@cancel=${this.handleCreateModalClose}
|
||||
@error=${this.handleCreateError}
|
||||
></session-create-form>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
};
|
||||
__decorate([
|
||||
property({ type: Array })
|
||||
], SessionList.prototype, "sessions", void 0);
|
||||
__decorate([
|
||||
property({ type: Boolean })
|
||||
], SessionList.prototype, "loading", void 0);
|
||||
__decorate([
|
||||
property({ type: Boolean })
|
||||
], SessionList.prototype, "hideExited", void 0);
|
||||
__decorate([
|
||||
property({ type: Boolean })
|
||||
], SessionList.prototype, "showCreateModal", void 0);
|
||||
__decorate([
|
||||
state()
|
||||
], SessionList.prototype, "killingSessionIds", void 0);
|
||||
__decorate([
|
||||
state()
|
||||
], SessionList.prototype, "loadedSnapshots", void 0);
|
||||
__decorate([
|
||||
state()
|
||||
], SessionList.prototype, "loadingSnapshots", void 0);
|
||||
__decorate([
|
||||
state()
|
||||
], SessionList.prototype, "cleaningExited", void 0);
|
||||
__decorate([
|
||||
state()
|
||||
], SessionList.prototype, "newSessionIds", void 0);
|
||||
SessionList = __decorate([
|
||||
customElement('session-list')
|
||||
], SessionList);
|
||||
export { SessionList };
|
||||
//# sourceMappingURL=session-list.js.map
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 9.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.4 KiB |
|
|
@ -1,42 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<defs>
|
||||
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#007acc;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#005a9e;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- Background -->
|
||||
<rect width="512" height="512" rx="64" ry="64" fill="#1e1e1e"/>
|
||||
|
||||
<!-- Terminal window -->
|
||||
<rect x="64" y="96" width="384" height="288" rx="16" ry="16" fill="#2d2d30" stroke="#007acc" stroke-width="2"/>
|
||||
|
||||
<!-- Terminal header -->
|
||||
<rect x="64" y="96" width="384" height="48" rx="16" ry="16" fill="url(#grad1)"/>
|
||||
<rect x="64" y="128" width="384" height="16" fill="url(#grad1)"/>
|
||||
|
||||
<!-- Window controls -->
|
||||
<circle cx="96" cy="120" r="6" fill="#ff5f57"/>
|
||||
<circle cx="120" cy="120" r="6" fill="#ffbd2e"/>
|
||||
<circle cx="144" cy="120" r="6" fill="#28ca42"/>
|
||||
|
||||
<!-- Terminal content lines -->
|
||||
<rect x="96" y="168" width="320" height="8" rx="4" fill="#007acc"/>
|
||||
<rect x="96" y="188" width="280" height="8" rx="4" fill="#4fc1ff"/>
|
||||
<rect x="96" y="208" width="300" height="8" rx="4" fill="#007acc"/>
|
||||
<rect x="96" y="228" width="200" height="8" rx="4" fill="#4fc1ff"/>
|
||||
|
||||
<!-- Cursor -->
|
||||
<rect x="224" y="248" width="12" height="16" fill="#00ff00" opacity="0.8"/>
|
||||
|
||||
<!-- Connection lines (representing tunnel/multiplexing) -->
|
||||
<path d="M 256 400 Q 180 420 120 450" stroke="#007acc" stroke-width="4" fill="none" opacity="0.6"/>
|
||||
<path d="M 256 400 Q 332 420 392 450" stroke="#007acc" stroke-width="4" fill="none" opacity="0.6"/>
|
||||
<path d="M 256 400 Q 256 430 256 460" stroke="#007acc" stroke-width="4" fill="none" opacity="0.6"/>
|
||||
|
||||
<!-- Connection endpoints -->
|
||||
<circle cx="120" cy="450" r="8" fill="#007acc"/>
|
||||
<circle cx="256" cy="460" r="8" fill="#007acc"/>
|
||||
<circle cx="392" cy="450" r="8" fill="#007acc"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.8 KiB |
|
|
@ -6,37 +6,12 @@
|
|||
<title>VibeTunnel - Terminal Multiplexer</title>
|
||||
<meta name="description" content="Interactive terminal sessions in your browser with real-time streaming and mobile support">
|
||||
|
||||
<!-- PWA Manifest -->
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
|
||||
<!-- Theme colors -->
|
||||
<meta name="theme-color" content="#007acc">
|
||||
<meta name="msapplication-TileColor" content="#1e1e1e">
|
||||
<meta name="msapplication-config" content="/browserconfig.xml">
|
||||
|
||||
<!-- Apple Touch Icons -->
|
||||
<link rel="apple-touch-icon" sizes="152x152" href="/icons/icon-152x152.png">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/icons/icon-180x180.png">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||||
<meta name="apple-mobile-web-app-title" content="VibeTunnel">
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/icons/icon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/icons/icon-16x16.png">
|
||||
<link rel="shortcut icon" href="/favicon.ico">
|
||||
|
||||
<!-- Open Graph / Social Media -->
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="VibeTunnel - Terminal Multiplexer">
|
||||
<meta property="og:description" content="Interactive terminal sessions in your browser with real-time streaming and mobile support">
|
||||
<meta property="og:image" content="/icons/icon-512x512.png">
|
||||
<meta property="og:url" content="/">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
|
||||
<!-- Styles -->
|
||||
<link rel="stylesheet" type="text/css" href="https://unpkg.com/asciinema-player@3.7.0/dist/bundle/asciinema-player.css" />
|
||||
<link href="output.css" rel="stylesheet">
|
||||
<link href="bundle/output.css" rel="stylesheet">
|
||||
|
||||
<!-- Import Maps -->
|
||||
<script type="importmap">
|
||||
|
|
@ -51,77 +26,7 @@
|
|||
<body class="bg-vs-bg m-0 p-0">
|
||||
<vibetunnel-app></vibetunnel-app>
|
||||
<script src="https://unpkg.com/asciinema-player@3.7.0/dist/bundle/asciinema-player.min.js"></script>
|
||||
<script type="module" src="app-entry.js"></script>
|
||||
<script type="module" src="bundle/client-bundle.js"></script>
|
||||
|
||||
<!-- Service Worker Registration -->
|
||||
<script>
|
||||
if ('serviceWorker' in navigator) {
|
||||
window.addEventListener('load', () => {
|
||||
navigator.serviceWorker.register('/sw.js')
|
||||
.then((registration) => {
|
||||
console.log('PWA: Service Worker registered successfully:', registration.scope);
|
||||
|
||||
// Check for updates
|
||||
registration.addEventListener('updatefound', () => {
|
||||
const newWorker = registration.installing;
|
||||
if (newWorker) {
|
||||
newWorker.addEventListener('statechange', () => {
|
||||
if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
|
||||
// New update available
|
||||
console.log('PWA: New version available');
|
||||
// You could show a notification here to reload
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('PWA: Service Worker registration failed:', error);
|
||||
});
|
||||
});
|
||||
|
||||
// Listen for messages from service worker
|
||||
navigator.serviceWorker.addEventListener('message', (event) => {
|
||||
if (event.data && event.data.type === 'CACHE_UPDATED') {
|
||||
console.log('PWA: Cache updated');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Handle install prompt
|
||||
let deferredPrompt;
|
||||
window.addEventListener('beforeinstallprompt', (e) => {
|
||||
console.log('PWA: Install prompt available - you can install VibeTunnel!');
|
||||
// Prevent Chrome 67 and earlier from automatically showing the prompt
|
||||
e.preventDefault();
|
||||
// Stash the event so it can be triggered later
|
||||
deferredPrompt = e;
|
||||
|
||||
// Show a temporary notification that install is available
|
||||
console.log('PWA: App can be installed - look for the install icon in your browser!');
|
||||
|
||||
// You can trigger the install prompt manually like this:
|
||||
// deferredPrompt.prompt();
|
||||
});
|
||||
|
||||
window.addEventListener('appinstalled', (evt) => {
|
||||
console.log('PWA: App was installed successfully');
|
||||
});
|
||||
|
||||
// Debug PWA readiness
|
||||
window.addEventListener('load', () => {
|
||||
// Check PWA criteria
|
||||
console.log('PWA Debug Info:');
|
||||
console.log('- HTTPS:', window.location.protocol === 'https:');
|
||||
console.log('- Service Worker supported:', 'serviceWorker' in navigator);
|
||||
console.log('- Manifest link present:', !!document.querySelector('link[rel="manifest"]'));
|
||||
console.log('- Current URL:', window.location.href);
|
||||
|
||||
// Check if already installed
|
||||
if (window.matchMedia && window.matchMedia('(display-mode: standalone)').matches) {
|
||||
console.log('PWA: App is running in standalone mode (already installed)');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,93 +0,0 @@
|
|||
{
|
||||
"name": "VibeTunnel",
|
||||
"short_name": "VibeTunnel",
|
||||
"description": "Interactive terminal sessions in your browser",
|
||||
"start_url": "/",
|
||||
"display": "standalone",
|
||||
"background_color": "#1e1e1e",
|
||||
"theme_color": "#007acc",
|
||||
"orientation": "any",
|
||||
"scope": "/",
|
||||
"categories": ["developer", "utilities"],
|
||||
"lang": "en-US",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/icons/icon-72x72.png",
|
||||
"sizes": "72x72",
|
||||
"type": "image/png",
|
||||
"purpose": "any"
|
||||
},
|
||||
{
|
||||
"src": "/icons/icon-96x96.png",
|
||||
"sizes": "96x96",
|
||||
"type": "image/png",
|
||||
"purpose": "any"
|
||||
},
|
||||
{
|
||||
"src": "/icons/icon-128x128.png",
|
||||
"sizes": "128x128",
|
||||
"type": "image/png",
|
||||
"purpose": "any"
|
||||
},
|
||||
{
|
||||
"src": "/icons/icon-144x144.png",
|
||||
"sizes": "144x144",
|
||||
"type": "image/png",
|
||||
"purpose": "any"
|
||||
},
|
||||
{
|
||||
"src": "/icons/icon-152x152.png",
|
||||
"sizes": "152x152",
|
||||
"type": "image/png",
|
||||
"purpose": "any"
|
||||
},
|
||||
{
|
||||
"src": "/icons/icon-192x192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png",
|
||||
"purpose": "any"
|
||||
},
|
||||
{
|
||||
"src": "/icons/icon-384x384.png",
|
||||
"sizes": "384x384",
|
||||
"type": "image/png",
|
||||
"purpose": "any"
|
||||
},
|
||||
{
|
||||
"src": "/icons/icon-512x512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png",
|
||||
"purpose": "any"
|
||||
}
|
||||
],
|
||||
"shortcuts": [
|
||||
{
|
||||
"name": "New Session",
|
||||
"short_name": "New",
|
||||
"description": "Create a new terminal session",
|
||||
"url": "/?action=create",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/icons/icon-96x96.png",
|
||||
"sizes": "96x96"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"screenshots": [
|
||||
{
|
||||
"src": "/screenshots/desktop.png",
|
||||
"sizes": "1280x720",
|
||||
"type": "image/png",
|
||||
"form_factor": "wide",
|
||||
"label": "VibeTunnel desktop view"
|
||||
},
|
||||
{
|
||||
"src": "/screenshots/mobile.png",
|
||||
"sizes": "390x844",
|
||||
"type": "image/png",
|
||||
"form_factor": "narrow",
|
||||
"label": "VibeTunnel mobile view"
|
||||
}
|
||||
]
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
|
|
@ -1,5 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">
|
||||
<!-- Desktop screenshot placeholder -->
|
||||
<rect width="1280" height="720" fill="#1e1e1e"/>
|
||||
<text x="640" y="360" text-anchor="middle" fill="#007acc" font-family="monospace" font-size="32">VibeTunnel Desktop View</text>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 293 B |
Binary file not shown.
|
Before Width: | Height: | Size: 7.6 KiB |
|
|
@ -1,5 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 390 844">
|
||||
<!-- Mobile screenshot placeholder -->
|
||||
<rect width="390" height="844" fill="#1e1e1e"/>
|
||||
<text x="195" y="422" text-anchor="middle" fill="#007acc" font-family="monospace" font-size="16">VibeTunnel Mobile View</text>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 289 B |
125
web/public/tests/debug-xterm.html
Normal file
125
web/public/tests/debug-xterm.html
Normal file
|
|
@ -0,0 +1,125 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Debug XTerm Test</title>
|
||||
|
||||
<!-- XTerm.js CSS -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/css/xterm.css" />
|
||||
|
||||
<style>
|
||||
body {
|
||||
background: #1a1a1a;
|
||||
color: #fff;
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.terminal {
|
||||
border: 2px solid #333;
|
||||
border-radius: 8px;
|
||||
background: #000;
|
||||
height: 400px;
|
||||
width: 800px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
button {
|
||||
background: #333;
|
||||
color: #fff;
|
||||
border: 1px solid #555;
|
||||
padding: 8px 16px;
|
||||
margin: 10px;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
#log {
|
||||
background: #333;
|
||||
padding: 10px;
|
||||
margin-top: 20px;
|
||||
border-radius: 4px;
|
||||
font-family: monospace;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Debug XTerm Loading</h1>
|
||||
|
||||
<button onclick="testXTerm()">Test XTerm</button>
|
||||
<button onclick="testRenderer()">Test XTerm Renderer</button>
|
||||
|
||||
<div class="terminal" id="terminal"></div>
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<!-- XTerm.js Scripts -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/lib/xterm.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@xterm/addon-fit@0.10.0/lib/addon-fit.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@xterm/addon-web-links@0.11.0/lib/addon-web-links.js"></script>
|
||||
|
||||
<script>
|
||||
function log(message) {
|
||||
const logDiv = document.getElementById('log');
|
||||
logDiv.textContent += new Date().toLocaleTimeString() + ': ' + message + '\n';
|
||||
}
|
||||
|
||||
// Check what's available globally
|
||||
log('Checking global objects...');
|
||||
log('Terminal available: ' + (typeof Terminal !== 'undefined'));
|
||||
log('FitAddon available: ' + (typeof FitAddon !== 'undefined'));
|
||||
log('WebLinksAddon available: ' + (typeof WebLinksAddon !== 'undefined'));
|
||||
|
||||
function testXTerm() {
|
||||
try {
|
||||
log('Creating XTerm directly...');
|
||||
const terminal = new Terminal();
|
||||
const container = document.getElementById('terminal');
|
||||
container.innerHTML = '';
|
||||
terminal.open(container);
|
||||
terminal.write('Hello from XTerm.js!\r\n');
|
||||
terminal.write('\x1b[31mRed text\x1b[0m\r\n');
|
||||
log('XTerm direct test successful!');
|
||||
} catch (error) {
|
||||
log('XTerm direct test failed: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
function testRenderer() {
|
||||
try {
|
||||
log('Testing XTerm Renderer import...');
|
||||
|
||||
// Test if we can access the renderer
|
||||
import('./xterm-renderer.js')
|
||||
.then(module => {
|
||||
log('XTerm Renderer module loaded successfully');
|
||||
log('XTermRenderer class: ' + (module.XTermRenderer ? 'available' : 'not available'));
|
||||
|
||||
try {
|
||||
const container = document.getElementById('terminal');
|
||||
const renderer = new module.XTermRenderer(container);
|
||||
renderer.processOutput('Hello from XTerm Renderer!\n');
|
||||
renderer.processOutput('\x1b[32mGreen text from renderer\x1b[0m\n');
|
||||
log('XTerm Renderer test successful!');
|
||||
} catch (error) {
|
||||
log('XTerm Renderer creation failed: ' + error.message);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
log('XTerm Renderer import failed: ' + error.message);
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
log('XTerm Renderer test failed: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
// Run initial checks
|
||||
window.addEventListener('load', () => {
|
||||
log('Page loaded, running initial checks...');
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
131
web/public/tests/index.html
Normal file
131
web/public/tests/index.html
Normal file
|
|
@ -0,0 +1,131 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>VibeTunnel Tests</title>
|
||||
<link href="../bundle/output.css" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
background: #1e1e1e;
|
||||
color: #d4d4d4;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
margin: 0;
|
||||
padding: 2rem;
|
||||
}
|
||||
.container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
h1 {
|
||||
color: #569cd6;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.test-grid {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
}
|
||||
.test-card {
|
||||
background: #2d2d30;
|
||||
border: 1px solid #3e3e42;
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
.test-card:hover {
|
||||
border-color: #569cd6;
|
||||
}
|
||||
.test-title {
|
||||
color: #dcdcaa;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.test-description {
|
||||
color: #8c8c8c;
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.test-link {
|
||||
display: inline-block;
|
||||
background: #6a9955;
|
||||
color: #1e1e1e;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 4px;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
.test-link:hover {
|
||||
background: #7db161;
|
||||
}
|
||||
.back-link {
|
||||
color: #569cd6;
|
||||
text-decoration: none;
|
||||
margin-bottom: 2rem;
|
||||
display: inline-block;
|
||||
}
|
||||
.back-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<a href="../" class="back-link">← Back to VibeTunnel</a>
|
||||
|
||||
<h1>VibeTunnel Test Suite</h1>
|
||||
|
||||
<div class="test-grid">
|
||||
<div class="test-card">
|
||||
<div class="test-title">Custom Renderer Test</div>
|
||||
<div class="test-description">
|
||||
Test the original custom ANSI renderer implementation with various escape sequences and color codes.
|
||||
</div>
|
||||
<a href="test-renderer.html" class="test-link">Run Test</a>
|
||||
</div>
|
||||
|
||||
<div class="test-card">
|
||||
<div class="test-title">XTerm Renderer Test</div>
|
||||
<div class="test-description">
|
||||
Test the new XTerm.js-based renderer with comprehensive terminal features and cast file playback.
|
||||
</div>
|
||||
<a href="test-xterm-renderer.html" class="test-link">Run Test</a>
|
||||
</div>
|
||||
|
||||
<div class="test-card">
|
||||
<div class="test-title">Side-by-Side Comparison</div>
|
||||
<div class="test-description">
|
||||
Compare custom renderer vs XTerm.js renderer side-by-side with the same input data.
|
||||
</div>
|
||||
<a href="simple-xterm-test.html" class="test-link">Run Test</a>
|
||||
</div>
|
||||
|
||||
<div class="test-card">
|
||||
<div class="test-title">Simple Renderer Test</div>
|
||||
<div class="test-description">
|
||||
Basic test of the custom renderer with simple ANSI sequences and text output.
|
||||
</div>
|
||||
<a href="simple-test.html" class="test-link">Run Test</a>
|
||||
</div>
|
||||
|
||||
<div class="test-card">
|
||||
<div class="test-title">XTerm Debug Test</div>
|
||||
<div class="test-description">
|
||||
Debug version of XTerm renderer with additional logging and development features.
|
||||
</div>
|
||||
<a href="debug-xterm.html" class="test-link">Run Test</a>
|
||||
</div>
|
||||
|
||||
<div class="test-card">
|
||||
<div class="test-title">Minimal Test</div>
|
||||
<div class="test-description">
|
||||
Minimal test setup for quick debugging and isolated testing of specific features.
|
||||
</div>
|
||||
<a href="minimal-test.html" class="test-link">Run Test</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
39
web/public/tests/minimal-test.html
Normal file
39
web/public/tests/minimal-test.html
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Minimal Test</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="terminal"></div>
|
||||
<script>
|
||||
console.log('Script starting...');
|
||||
|
||||
function testBasic() {
|
||||
console.log('testBasic called');
|
||||
}
|
||||
|
||||
// Make it global so onclick can find it
|
||||
window.testBasic = testBasic;
|
||||
|
||||
console.log('Basic function defined');
|
||||
</script>
|
||||
|
||||
<button onclick="testBasic()">Test Basic</button>
|
||||
|
||||
<script type="module">
|
||||
console.log('Module script starting...');
|
||||
|
||||
try {
|
||||
console.log('About to import TerminalRenderer...');
|
||||
const { TerminalRenderer } = await import('./renderer.js');
|
||||
console.log('TerminalRenderer imported successfully');
|
||||
|
||||
const terminal = new TerminalRenderer(document.getElementById('terminal'));
|
||||
console.log('TerminalRenderer created successfully');
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error importing/creating TerminalRenderer:', error);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
135
web/public/tests/simple-test.html
Normal file
135
web/public/tests/simple-test.html
Normal file
|
|
@ -0,0 +1,135 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Simple Terminal Renderer Test</title>
|
||||
<style>
|
||||
body {
|
||||
background: #1a1a1a;
|
||||
color: #fff;
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.terminal {
|
||||
border: 2px solid #333;
|
||||
border-radius: 8px;
|
||||
background: #000;
|
||||
height: 400px;
|
||||
width: 800px;
|
||||
overflow-y: scroll;
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.controls {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
button {
|
||||
background: #333;
|
||||
color: #fff;
|
||||
border: 1px solid #555;
|
||||
padding: 8px 16px;
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: #444;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Simple Terminal Renderer Debug</h1>
|
||||
|
||||
<div class="controls">
|
||||
<button onclick="testBasic()">Test Basic Colors</button>
|
||||
<button onclick="testScrollback()">Test Scrollback</button>
|
||||
<button onclick="clearTerminal()">Clear</button>
|
||||
<button onclick="debugOutput()">Debug Output</button>
|
||||
</div>
|
||||
|
||||
<div class="terminal" id="terminal"></div>
|
||||
|
||||
<div id="debug" style="margin-top: 20px; background: #333; padding: 10px; border-radius: 4px;">
|
||||
<h3>Debug Output:</h3>
|
||||
<pre id="debugText"></pre>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
import { TerminalRenderer } from './renderer.js';
|
||||
|
||||
const terminal = new TerminalRenderer(document.getElementById('terminal'), 80, 20);
|
||||
|
||||
window.testBasic = function() {
|
||||
console.log('Testing basic colors...');
|
||||
terminal.clear();
|
||||
|
||||
// Test individual ANSI sequences
|
||||
const tests = [
|
||||
'Hello World (no color)\n',
|
||||
'\x1b[31mRed Text\x1b[0m\n',
|
||||
'\x1b[32mGreen Text\x1b[0m\n',
|
||||
'\x1b[1;33mBold Yellow\x1b[0m\n',
|
||||
'\x1b[4;34mUnderline Blue\x1b[0m\n',
|
||||
'\x1b[1;31m[001]\x1b[0m Test line 1\n',
|
||||
'\x1b[1;32m[002]\x1b[0m Test line 2\n'
|
||||
];
|
||||
|
||||
tests.forEach((test, i) => {
|
||||
console.log(`Processing test ${i}:`, JSON.stringify(test));
|
||||
terminal.processOutput(test);
|
||||
});
|
||||
|
||||
updateDebug();
|
||||
};
|
||||
|
||||
window.testScrollback = function() {
|
||||
console.log('Testing scrollback...');
|
||||
terminal.clear();
|
||||
|
||||
for (let i = 1; i <= 30; i++) {
|
||||
const color = 31 + (i % 6);
|
||||
const line = `\x1b[1;${color}m[${i.toString().padStart(3, '0')}]\x1b[0m Line ${i}: Scrollback test content\n`;
|
||||
console.log(`Line ${i}:`, JSON.stringify(line));
|
||||
terminal.processOutput(line);
|
||||
}
|
||||
|
||||
updateDebug();
|
||||
};
|
||||
|
||||
window.clearTerminal = function() {
|
||||
terminal.clear();
|
||||
updateDebug();
|
||||
};
|
||||
|
||||
window.debugOutput = function() {
|
||||
updateDebug();
|
||||
};
|
||||
|
||||
function updateDebug() {
|
||||
const terminalEl = document.getElementById('terminal');
|
||||
const debugEl = document.getElementById('debugText');
|
||||
|
||||
const info = {
|
||||
innerHTML: terminalEl.innerHTML.substring(0, 500) + (terminalEl.innerHTML.length > 500 ? '...' : ''),
|
||||
childCount: terminalEl.children.length,
|
||||
scrollHeight: terminalEl.scrollHeight,
|
||||
clientHeight: terminalEl.clientHeight
|
||||
};
|
||||
|
||||
debugEl.textContent = JSON.stringify(info, null, 2);
|
||||
}
|
||||
|
||||
// Initial test
|
||||
setTimeout(() => {
|
||||
console.log('Running initial test...');
|
||||
testBasic();
|
||||
}, 100);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
220
web/public/tests/simple-xterm-test.html
Normal file
220
web/public/tests/simple-xterm-test.html
Normal file
|
|
@ -0,0 +1,220 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Simple XTerm Renderer Test</title>
|
||||
|
||||
<!-- XTerm.js CSS -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/css/xterm.css" />
|
||||
|
||||
<style>
|
||||
body {
|
||||
background: #1a1a1a;
|
||||
color: #fff;
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.terminal {
|
||||
border: 2px solid #333;
|
||||
border-radius: 8px;
|
||||
background: #000;
|
||||
height: 400px;
|
||||
width: 800px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.controls {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
button {
|
||||
background: #333;
|
||||
color: #fff;
|
||||
border: 1px solid #555;
|
||||
padding: 8px 16px;
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: #444;
|
||||
}
|
||||
|
||||
.comparison {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.comparison .terminal {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #4CAF50;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Simple XTerm Renderer Test</h1>
|
||||
|
||||
<div class="controls">
|
||||
<button onclick="testBasic()">Test Basic Colors</button>
|
||||
<button onclick="testAdvanced()">Test Advanced Features</button>
|
||||
<button onclick="testScrollback()">Test Scrollback</button>
|
||||
<button onclick="testPerformance()">Test Performance</button>
|
||||
<button onclick="clearTerminals()">Clear All</button>
|
||||
</div>
|
||||
|
||||
<div class="comparison">
|
||||
<div>
|
||||
<h2>Custom Renderer</h2>
|
||||
<div class="terminal" id="custom-terminal"></div>
|
||||
</div>
|
||||
<div>
|
||||
<h2>XTerm.js Renderer</h2>
|
||||
<div class="terminal" id="xterm-terminal"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="debug" style="margin-top: 20px; background: #333; padding: 10px; border-radius: 4px;">
|
||||
<h3>Performance Comparison:</h3>
|
||||
<pre id="debugText">Run performance test to see timing comparison</pre>
|
||||
</div>
|
||||
|
||||
<!-- XTerm.js Scripts -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/lib/xterm.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@xterm/addon-fit@0.10.0/lib/addon-fit.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@xterm/addon-web-links@0.11.0/lib/addon-web-links.js"></script>
|
||||
|
||||
<script type="module">
|
||||
import { TerminalRenderer } from './renderer.js';
|
||||
import { XTermRenderer } from './xterm-renderer.js';
|
||||
|
||||
const customTerminal = new TerminalRenderer(document.getElementById('custom-terminal'), 80, 20);
|
||||
const xtermTerminal = new XTermRenderer(document.getElementById('xterm-terminal'), 80, 20);
|
||||
|
||||
function runOnBoth(callback) {
|
||||
callback(customTerminal, 'Custom');
|
||||
callback(xtermTerminal, 'XTerm');
|
||||
}
|
||||
|
||||
window.testBasic = function() {
|
||||
console.log('Testing basic colors...');
|
||||
|
||||
runOnBoth((terminal, name) => {
|
||||
terminal.clear();
|
||||
|
||||
const tests = [
|
||||
`${name} Renderer Test\n`,
|
||||
'\x1b[31mRed Text\x1b[0m\n',
|
||||
'\x1b[32mGreen Text\x1b[0m\n',
|
||||
'\x1b[1;33mBold Yellow\x1b[0m\n',
|
||||
'\x1b[4;34mUnderline Blue\x1b[0m\n',
|
||||
'\x1b[1;31m[001]\x1b[0m Test line 1\n',
|
||||
'\x1b[1;32m[002]\x1b[0m Test line 2\n'
|
||||
];
|
||||
|
||||
tests.forEach(test => terminal.processOutput(test));
|
||||
});
|
||||
};
|
||||
|
||||
window.testAdvanced = function() {
|
||||
console.log('Testing advanced features...');
|
||||
|
||||
runOnBoth((terminal, name) => {
|
||||
terminal.clear();
|
||||
|
||||
const tests = [
|
||||
`${name} Advanced Features\n`,
|
||||
'\x1b[38;2;255;100;50mRGB Orange\x1b[0m\n',
|
||||
'\x1b[38;2;100;255;100mRGB Lime\x1b[0m\n',
|
||||
'\x1b[38;5;196m256-color Red\x1b[0m\n',
|
||||
'\x1b[38;5;46m256-color Green\x1b[0m\n',
|
||||
'\x1b[1;3;4mBold Italic Underline\x1b[0m\n',
|
||||
'\x1b[7mInverse Video\x1b[0m\n',
|
||||
'\x1b[9mStrikethrough\x1b[0m\n',
|
||||
'Unicode: 🚀 ✨ 🎉 ♦ ♠ ♥ ♣\n',
|
||||
'Box: ┌─┬─┐ │ │ │ ├─┼─┤\n'
|
||||
];
|
||||
|
||||
tests.forEach(test => terminal.processOutput(test));
|
||||
});
|
||||
};
|
||||
|
||||
window.testScrollback = function() {
|
||||
console.log('Testing scrollback...');
|
||||
|
||||
runOnBoth((terminal, name) => {
|
||||
terminal.clear();
|
||||
|
||||
for (let i = 1; i <= 30; i++) {
|
||||
const color = 31 + (i % 6);
|
||||
const line = `\x1b[1;${color}m[${i.toString().padStart(3, '0')}]\x1b[0m ${name} Line ${i}\n`;
|
||||
terminal.processOutput(line);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
window.testPerformance = function() {
|
||||
console.log('Testing performance...');
|
||||
|
||||
const results = {};
|
||||
|
||||
// Test custom renderer
|
||||
const customStart = performance.now();
|
||||
customTerminal.clear();
|
||||
for (let i = 1; i <= 1000; i++) {
|
||||
const color = 31 + (i % 6);
|
||||
const line = `\x1b[1;${color}m[${i.toString().padStart(4, '0')}]\x1b[0m Performance test line ${i} with \x1b[4munderline\x1b[0m and \x1b[1mbold\x1b[0m\n`;
|
||||
customTerminal.processOutput(line);
|
||||
}
|
||||
const customEnd = performance.now();
|
||||
results.custom = customEnd - customStart;
|
||||
|
||||
// Test XTerm renderer
|
||||
const xtermStart = performance.now();
|
||||
xtermTerminal.clear();
|
||||
for (let i = 1; i <= 1000; i++) {
|
||||
const color = 31 + (i % 6);
|
||||
const line = `\x1b[1;${color}m[${i.toString().padStart(4, '0')}]\x1b[0m Performance test line ${i} with \x1b[4munderline\x1b[0m and \x1b[1mbold\x1b[0m\n`;
|
||||
xtermTerminal.processOutput(line);
|
||||
}
|
||||
const xtermEnd = performance.now();
|
||||
results.xterm = xtermEnd - xtermStart;
|
||||
|
||||
// Display results
|
||||
const debugEl = document.getElementById('debugText');
|
||||
const comparison = {
|
||||
'Custom Renderer': `${results.custom.toFixed(2)}ms`,
|
||||
'XTerm.js Renderer': `${results.xterm.toFixed(2)}ms`,
|
||||
'Performance Ratio': `${(results.custom / results.xterm).toFixed(2)}x`,
|
||||
'Winner': results.xterm < results.custom ? 'XTerm.js' : 'Custom',
|
||||
'Lines Processed': '1000 lines each',
|
||||
'Test Date': new Date().toLocaleString()
|
||||
};
|
||||
|
||||
debugEl.textContent = JSON.stringify(comparison, null, 2);
|
||||
};
|
||||
|
||||
window.clearTerminals = function() {
|
||||
customTerminal.clear();
|
||||
xtermTerminal.clear();
|
||||
|
||||
const debugEl = document.getElementById('debugText');
|
||||
debugEl.textContent = 'Terminals cleared. Run tests to see comparison.';
|
||||
};
|
||||
|
||||
// Initial test
|
||||
setTimeout(() => {
|
||||
console.log('Running initial comparison...');
|
||||
testBasic();
|
||||
}, 100);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
378
web/public/tests/test-renderer.html
Normal file
378
web/public/tests/test-renderer.html
Normal file
|
|
@ -0,0 +1,378 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Terminal Renderer Test</title>
|
||||
<style>
|
||||
body {
|
||||
background: #1a1a1a;
|
||||
color: #fff;
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.controls {
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.controls button {
|
||||
background: #333;
|
||||
color: #fff;
|
||||
border: 1px solid #555;
|
||||
padding: 8px 16px;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.controls button:hover {
|
||||
background: #444;
|
||||
}
|
||||
|
||||
.controls input {
|
||||
background: #333;
|
||||
color: #fff;
|
||||
border: 1px solid #555;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.terminal-container {
|
||||
border: 2px solid #333;
|
||||
border-radius: 8px;
|
||||
background: #000;
|
||||
height: 300px;
|
||||
width: 100%;
|
||||
overflow-y: scroll;
|
||||
overflow-x: auto;
|
||||
resize: both;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Make sure scrollbars are visible */
|
||||
.terminal-container::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
.terminal-container::-webkit-scrollbar-track {
|
||||
background: #222;
|
||||
}
|
||||
|
||||
.terminal-container::-webkit-scrollbar-thumb {
|
||||
background: #555;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.terminal-container::-webkit-scrollbar-thumb:hover {
|
||||
background: #777;
|
||||
}
|
||||
|
||||
.scrollback-line {
|
||||
opacity: 0.8;
|
||||
border-left: 2px solid #444;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.terminal-line {
|
||||
min-height: 1.2em;
|
||||
}
|
||||
|
||||
.current-line {
|
||||
background-color: rgba(255, 255, 255, 0.02);
|
||||
}
|
||||
|
||||
.info {
|
||||
margin-top: 20px;
|
||||
background: #333;
|
||||
padding: 15px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #4CAF50;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.status {
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
margin-top: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.status.success {
|
||||
background: #2d5a2d;
|
||||
color: #90EE90;
|
||||
}
|
||||
|
||||
.status.error {
|
||||
background: #5a2d2d;
|
||||
color: #FFB6C1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Terminal Renderer Test</h1>
|
||||
|
||||
<div class="section">
|
||||
<h2>1. Test with Pre-recorded Cast File</h2>
|
||||
<div class="controls">
|
||||
<input type="text" id="castUrl" placeholder="Enter cast file URL or use buttons below">
|
||||
<button onclick="loadCastFile()">Load Cast File</button>
|
||||
<button onclick="loadTestFile()">Load Test File via Server</button>
|
||||
<button onclick="loadSampleData()">Load Sample ANSI</button>
|
||||
<button onclick="generateScrollbackTest()">Generate Scrollback Test</button>
|
||||
<button onclick="clearTerminal()">Clear</button>
|
||||
</div>
|
||||
<div class="terminal-container" id="terminal1"></div>
|
||||
<div class="status" id="status1"></div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h2>2. Test with Live Session Stream</h2>
|
||||
<div class="controls">
|
||||
<input type="text" id="sessionId" placeholder="Enter session ID">
|
||||
<button onclick="connectToSession()">Connect to Stream</button>
|
||||
<button onclick="disconnectStream()">Disconnect</button>
|
||||
<button onclick="clearTerminal2()">Clear</button>
|
||||
</div>
|
||||
<div class="terminal-container" id="terminal2"></div>
|
||||
<div class="status" id="status2"></div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h2>3. Manual Test</h2>
|
||||
<div class="controls">
|
||||
<input type="text" id="testInput" placeholder="Enter raw ANSI escape sequences to test"
|
||||
value="\x1b[31mRed text\x1b[0m \x1b[1;32mBold green\x1b[0m">
|
||||
<button onclick="sendTestInput()">Send to Terminal</button>
|
||||
<button onclick="clearTerminal3()">Clear</button>
|
||||
</div>
|
||||
<div class="terminal-container" id="terminal3"></div>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<h2>Usage Instructions:</h2>
|
||||
<ul>
|
||||
<li><strong>Cast File Test:</strong> The default URL points to your test cast file. Click "Load Cast File" to render it.</li>
|
||||
<li><strong>Stream Test:</strong> Enter a session ID and click "Connect to Stream" to watch live terminal output.</li>
|
||||
<li><strong>Manual Test:</strong> Enter raw ANSI escape sequences to test specific rendering features.</li>
|
||||
</ul>
|
||||
|
||||
<h2>Features Supported:</h2>
|
||||
<ul>
|
||||
<li>✅ ANSI color codes (standard 16 colors + 256-color + RGB)</li>
|
||||
<li>✅ Text formatting (bold, italic, underline, strikethrough)</li>
|
||||
<li>✅ Cursor movement and positioning</li>
|
||||
<li>✅ Screen clearing and line erasing</li>
|
||||
<li>✅ Alternate screen buffer support</li>
|
||||
<li>✅ Scrollback buffer (up to 1000 lines)</li>
|
||||
<li>✅ Scroll regions</li>
|
||||
<li>✅ Auto-wrap mode</li>
|
||||
<li>✅ Inverse video</li>
|
||||
<li>✅ Cast file format v2 parsing</li>
|
||||
<li>✅ Server-Sent Events streaming</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
import { TerminalRenderer } from './renderer.js';
|
||||
|
||||
// Initialize terminals
|
||||
const terminal1 = new TerminalRenderer(document.getElementById('terminal1'));
|
||||
const terminal2 = new TerminalRenderer(document.getElementById('terminal2'));
|
||||
const terminal3 = new TerminalRenderer(document.getElementById('terminal3'));
|
||||
|
||||
let currentStream = null;
|
||||
|
||||
function showStatus(terminalNum, message, isError = false) {
|
||||
const status = document.getElementById(`status${terminalNum}`);
|
||||
status.textContent = message;
|
||||
status.className = `status ${isError ? 'error' : 'success'}`;
|
||||
status.style.display = 'block';
|
||||
setTimeout(() => {
|
||||
status.style.display = 'none';
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
window.loadCastFile = async function() {
|
||||
const url = document.getElementById('castUrl').value.trim();
|
||||
if (!url) {
|
||||
showStatus(1, 'Please enter a cast file URL', true);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
showStatus(1, 'Loading cast file...');
|
||||
await terminal1.loadCastFile(url);
|
||||
showStatus(1, 'Cast file loaded successfully!');
|
||||
} catch (error) {
|
||||
console.error('Error loading cast file:', error);
|
||||
showStatus(1, `Error loading cast file: ${error.message}`, true);
|
||||
}
|
||||
};
|
||||
|
||||
window.loadTestFile = async function() {
|
||||
try {
|
||||
showStatus(1, 'Loading test cast file...');
|
||||
await terminal1.loadCastFile('/api/test-cast');
|
||||
showStatus(1, 'Test cast file loaded successfully!');
|
||||
} catch (error) {
|
||||
console.error('Error loading test file:', error);
|
||||
showStatus(1, `Error loading test file: ${error.message}`, true);
|
||||
}
|
||||
};
|
||||
|
||||
window.loadSampleData = function() {
|
||||
try {
|
||||
showStatus(1, 'Loading sample ANSI data...');
|
||||
terminal1.clear();
|
||||
|
||||
// Sample ANSI sequences to demonstrate features
|
||||
const samples = [
|
||||
'{"version":2,"width":80,"height":24}\n',
|
||||
'[0,"o","\\u001b[2J\\u001b[H"]\n', // Clear screen and home cursor
|
||||
'[0.1,"o","\\u001b[1;31m╔════════════════════════════════════════════════════════════════════════════╗\\u001b[0m\\r\\n"]\n',
|
||||
'[0.2,"o","\\u001b[1;31m║\\u001b[0m \\u001b[1;33mTerminal Renderer Demo\\u001b[0m \\u001b[1;31m║\\u001b[0m\\r\\n"]\n',
|
||||
'[0.3,"o","\\u001b[1;31m╚════════════════════════════════════════════════════════════════════════════╝\\u001b[0m\\r\\n"]\n',
|
||||
'[0.4,"o","\\r\\n"]\n',
|
||||
'[0.5,"o","\\u001b[1mColors:\\u001b[0m \\u001b[31mRed\\u001b[0m \\u001b[32mGreen\\u001b[0m \\u001b[33mYellow\\u001b[0m \\u001b[34mBlue\\u001b[0m \\u001b[35mMagenta\\u001b[0m \\u001b[36mCyan\\u001b[0m\\r\\n"]\n',
|
||||
'[0.6,"o","\\u001b[1mStyles:\\u001b[0m \\u001b[1mBold\\u001b[0m \\u001b[3mItalic\\u001b[0m \\u001b[4mUnderline\\u001b[0m \\u001b[9mStrikethrough\\u001b[0m\\r\\n"]\n',
|
||||
'[0.7,"o","\\u001b[1mRGB Colors:\\u001b[0m \\u001b[38;2;255;100;50mOrange\\u001b[0m \\u001b[38;2;100;255;100mLime\\u001b[0m \\u001b[38;2;100;100;255mLightBlue\\u001b[0m\\r\\n"]\n',
|
||||
'[0.8,"o","\\u001b[1mInverse:\\u001b[0m \\u001b[7mWhite on Black\\u001b[0m\\r\\n"]\n',
|
||||
'[0.9,"o","\\r\\n\\u001b[32m$\\u001b[0m ls -la\\r\\n"]\n',
|
||||
'[1.0,"o","drwxr-xr-x 5 user staff 160 Dec 16 10:30 \\u001b[34m.\\u001b[0m\\r\\n"]\n',
|
||||
'[1.1,"o","drwxr-xr-x 10 user staff 320 Dec 16 10:25 \\u001b[34m..\\u001b[0m\\r\\n"]\n',
|
||||
'[1.2,"o","-rw-r--r-- 1 user staff 1024 Dec 16 10:30 \\u001b[32mrenderer.ts\\u001b[0m\\r\\n"]\n',
|
||||
'[1.3,"o","\\r\\n\\u001b[32m$\\u001b[0m \\u001b[7m \\u001b[0m"]\n'
|
||||
];
|
||||
|
||||
terminal1.parseCastFile(samples.join(''));
|
||||
showStatus(1, 'Sample ANSI data loaded!');
|
||||
} catch (error) {
|
||||
console.error('Error loading sample data:', error);
|
||||
showStatus(1, `Error loading sample data: ${error.message}`, true);
|
||||
}
|
||||
};
|
||||
|
||||
window.connectToSession = function() {
|
||||
const sessionId = document.getElementById('sessionId').value.trim();
|
||||
if (!sessionId) {
|
||||
showStatus(2, 'Please enter a session ID', true);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
if (currentStream) {
|
||||
currentStream.close();
|
||||
}
|
||||
|
||||
terminal2.clear();
|
||||
currentStream = terminal2.connectToStream(sessionId);
|
||||
|
||||
currentStream.onopen = () => {
|
||||
showStatus(2, `Connected to session ${sessionId}`);
|
||||
};
|
||||
|
||||
currentStream.onerror = (error) => {
|
||||
showStatus(2, `Stream error: ${error.message || 'Connection failed'}`, true);
|
||||
};
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error connecting to stream:', error);
|
||||
showStatus(2, `Error connecting: ${error.message}`, true);
|
||||
}
|
||||
};
|
||||
|
||||
window.disconnectStream = function() {
|
||||
if (currentStream) {
|
||||
currentStream.close();
|
||||
currentStream = null;
|
||||
showStatus(2, 'Disconnected from stream');
|
||||
}
|
||||
};
|
||||
|
||||
window.sendTestInput = function() {
|
||||
const input = document.getElementById('testInput').value;
|
||||
if (!input) {
|
||||
showStatus(3, 'Please enter some test input', true);
|
||||
return;
|
||||
}
|
||||
|
||||
// Decode escape sequences
|
||||
const decoded = input.replace(/\\x1b/g, '\x1b').replace(/\\n/g, '\n').replace(/\\r/g, '\r');
|
||||
terminal3.processOutput(decoded);
|
||||
showStatus(3, 'Test input processed');
|
||||
};
|
||||
|
||||
window.clearTerminal = function() {
|
||||
terminal1.clear();
|
||||
showStatus(1, 'Terminal cleared');
|
||||
};
|
||||
|
||||
window.clearTerminal2 = function() {
|
||||
terminal2.clear();
|
||||
showStatus(2, 'Terminal cleared');
|
||||
};
|
||||
|
||||
window.clearTerminal3 = function() {
|
||||
terminal3.clear();
|
||||
showStatus(3, 'Terminal cleared');
|
||||
};
|
||||
|
||||
window.generateScrollbackTest = function() {
|
||||
try {
|
||||
showStatus(1, 'Generating scrollback test...');
|
||||
terminal1.clear();
|
||||
|
||||
// Generate lots of output to test scrollback - enough to definitely overflow
|
||||
for (let i = 1; i <= 100; i++) {
|
||||
const colors = [31, 32, 33, 34, 35, 36]; // red, green, yellow, blue, magenta, cyan
|
||||
const color = colors[i % colors.length];
|
||||
const line = `\x1b[1;${color}m[${i.toString().padStart(3, '0')}]\x1b[0m Line ${i}: This is test content with \x1b[4munderline\x1b[0m and \x1b[1mbold\x1b[0m text to test scrollback!\n`;
|
||||
terminal1.processOutput(line);
|
||||
}
|
||||
|
||||
// Add a final message
|
||||
terminal1.processOutput('\x1b[1;37m=== End of scrollback test ===\x1b[0m\n');
|
||||
terminal1.processOutput('\x1b[32m$\x1b[0m \x1b[7m \x1b[0m');
|
||||
|
||||
showStatus(1, 'Generated 100 lines! Scroll up to see the full history.');
|
||||
} catch (error) {
|
||||
console.error('Error generating scrollback test:', error);
|
||||
showStatus(1, `Error generating scrollback test: ${error.message}`, true);
|
||||
}
|
||||
};
|
||||
|
||||
// Test the renderer with some sample ANSI sequences on load
|
||||
setTimeout(() => {
|
||||
const testSequences = [
|
||||
'\x1b[1;31m♦ \x1b[1;32m♦ \x1b[1;33m♦ \x1b[1;34m♦ \x1b[1;35m♦ \x1b[1;36m♦ \x1b[0m\n',
|
||||
'\x1b[1mBold\x1b[0m \x1b[3mItalic\x1b[0m \x1b[4mUnderline\x1b[0m \x1b[9mStrikethrough\x1b[0m\n',
|
||||
'\x1b[7mInverse\x1b[0m \x1b[38;2;255;100;50mRGB Color\x1b[0m\n',
|
||||
'Terminal Renderer Test Ready!\n'
|
||||
];
|
||||
|
||||
testSequences.forEach(seq => terminal3.processOutput(seq));
|
||||
}, 100);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
425
web/public/tests/test-xterm-renderer.html
Normal file
425
web/public/tests/test-xterm-renderer.html
Normal file
|
|
@ -0,0 +1,425 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>XTerm Terminal Renderer Test</title>
|
||||
|
||||
<!-- XTerm.js CSS -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/css/xterm.css" />
|
||||
|
||||
<style>
|
||||
body {
|
||||
background: #1a1a1a;
|
||||
color: #fff;
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.controls {
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.controls button {
|
||||
background: #333;
|
||||
color: #fff;
|
||||
border: 1px solid #555;
|
||||
padding: 8px 16px;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.controls button:hover {
|
||||
background: #444;
|
||||
}
|
||||
|
||||
.controls input {
|
||||
background: #333;
|
||||
color: #fff;
|
||||
border: 1px solid #555;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.terminal-container {
|
||||
border: 2px solid #333;
|
||||
border-radius: 8px;
|
||||
background: #000;
|
||||
height: 300px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
resize: both;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.info {
|
||||
margin-top: 20px;
|
||||
background: #333;
|
||||
padding: 15px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #4CAF50;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.status {
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
margin-top: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.status.success {
|
||||
background: #2d5a2d;
|
||||
color: #90EE90;
|
||||
}
|
||||
|
||||
.status.error {
|
||||
background: #5a2d2d;
|
||||
color: #FFB6C1;
|
||||
}
|
||||
|
||||
.comparison {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.comparison .terminal-container {
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.comparison h3 {
|
||||
color: #FFB86C;
|
||||
margin-bottom: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>XTerm Terminal Renderer Test</h1>
|
||||
|
||||
<div class="section">
|
||||
<h2>1. Test with Pre-recorded Cast File</h2>
|
||||
<div class="controls">
|
||||
<input type="text" id="castUrl" placeholder="Enter cast file URL or use buttons below">
|
||||
<button onclick="loadCastFile()">Load Cast File</button>
|
||||
<button onclick="loadTestFile()">Load Test File via Server</button>
|
||||
<button onclick="loadSampleData()">Load Sample ANSI</button>
|
||||
<button onclick="generateScrollbackTest()">Generate Scrollback Test</button>
|
||||
<button onclick="clearTerminal()">Clear</button>
|
||||
</div>
|
||||
<div class="terminal-container" id="terminal1"></div>
|
||||
<div class="status" id="status1"></div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h2>2. Test with Live Session Stream</h2>
|
||||
<div class="controls">
|
||||
<input type="text" id="sessionId" placeholder="Enter session ID">
|
||||
<button onclick="connectToSession()">Connect to Stream</button>
|
||||
<button onclick="disconnectStream()">Disconnect</button>
|
||||
<button onclick="clearTerminal2()">Clear</button>
|
||||
</div>
|
||||
<div class="terminal-container" id="terminal2"></div>
|
||||
<div class="status" id="status2"></div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h2>3. Manual Test</h2>
|
||||
<div class="controls">
|
||||
<input type="text" id="testInput" placeholder="Enter raw ANSI escape sequences to test"
|
||||
value="\x1b[31mRed text\x1b[0m \x1b[1;32mBold green\x1b[0m">
|
||||
<button onclick="sendTestInput()">Send to Terminal</button>
|
||||
<button onclick="clearTerminal3()">Clear</button>
|
||||
</div>
|
||||
<div class="terminal-container" id="terminal3"></div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h2>4. Renderer Comparison</h2>
|
||||
<div class="controls">
|
||||
<button onclick="runComparisonTest()">Run Comparison Test</button>
|
||||
<button onclick="clearComparison()">Clear Both</button>
|
||||
</div>
|
||||
<div class="comparison">
|
||||
<div>
|
||||
<h3>Custom Renderer</h3>
|
||||
<div class="terminal-container" id="terminal4"></div>
|
||||
</div>
|
||||
<div>
|
||||
<h3>XTerm Renderer</h3>
|
||||
<div class="terminal-container" id="terminal5"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<h2>XTerm.js Features:</h2>
|
||||
<ul>
|
||||
<li>✅ Full VT100/VT220/VT320 terminal emulation</li>
|
||||
<li>✅ Professional-grade ANSI escape sequence parsing</li>
|
||||
<li>✅ Advanced cursor movement and screen manipulation</li>
|
||||
<li>✅ True color (24-bit RGB) support</li>
|
||||
<li>✅ Sixel graphics support (addon)</li>
|
||||
<li>✅ Unicode and emoji support</li>
|
||||
<li>✅ Configurable scrollback buffer</li>
|
||||
<li>✅ Responsive resizing with fit addon</li>
|
||||
<li>✅ Web links detection and clickable URLs</li>
|
||||
<li>✅ Better performance for large outputs</li>
|
||||
<li>✅ Industry-standard terminal behavior</li>
|
||||
</ul>
|
||||
|
||||
<h2>Usage Instructions:</h2>
|
||||
<ul>
|
||||
<li><strong>Cast File Test:</strong> Load asciinema cast files with full compatibility</li>
|
||||
<li><strong>Stream Test:</strong> Connect to live terminal sessions with real-time rendering</li>
|
||||
<li><strong>Manual Test:</strong> Test specific ANSI sequences directly</li>
|
||||
<li><strong>Comparison:</strong> Compare custom renderer vs XTerm.js side by side</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- XTerm.js Scripts -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/lib/xterm.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@xterm/addon-fit@0.10.0/lib/addon-fit.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@xterm/addon-web-links@0.11.0/lib/addon-web-links.js"></script>
|
||||
|
||||
<script type="module">
|
||||
import { XTermRenderer } from './xterm-renderer.js';
|
||||
import { TerminalRenderer } from './renderer.js';
|
||||
|
||||
// Initialize XTerm terminals
|
||||
const terminal1 = new XTermRenderer(document.getElementById('terminal1'));
|
||||
const terminal2 = new XTermRenderer(document.getElementById('terminal2'));
|
||||
const terminal3 = new XTermRenderer(document.getElementById('terminal3'));
|
||||
const terminal5 = new XTermRenderer(document.getElementById('terminal5'));
|
||||
|
||||
// Initialize custom renderer for comparison
|
||||
const terminal4 = new TerminalRenderer(document.getElementById('terminal4'));
|
||||
|
||||
let currentStream = null;
|
||||
|
||||
function showStatus(terminalNum, message, isError = false) {
|
||||
const status = document.getElementById(`status${terminalNum}`);
|
||||
status.textContent = message;
|
||||
status.className = `status ${isError ? 'error' : 'success'}`;
|
||||
status.style.display = 'block';
|
||||
setTimeout(() => {
|
||||
status.style.display = 'none';
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
window.loadCastFile = async function() {
|
||||
const url = document.getElementById('castUrl').value.trim();
|
||||
if (!url) {
|
||||
showStatus(1, 'Please enter a cast file URL', true);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
showStatus(1, 'Loading cast file...');
|
||||
await terminal1.loadCastFile(url);
|
||||
showStatus(1, 'Cast file loaded successfully!');
|
||||
} catch (error) {
|
||||
console.error('Error loading cast file:', error);
|
||||
showStatus(1, `Error loading cast file: ${error.message}`, true);
|
||||
}
|
||||
};
|
||||
|
||||
window.loadTestFile = async function() {
|
||||
try {
|
||||
showStatus(1, 'Loading test cast file...');
|
||||
await terminal1.loadCastFile('/api/test-cast');
|
||||
showStatus(1, 'Test cast file loaded successfully!');
|
||||
} catch (error) {
|
||||
console.error('Error loading test file:', error);
|
||||
showStatus(1, `Error loading test file: ${error.message}`, true);
|
||||
}
|
||||
};
|
||||
|
||||
window.loadSampleData = function() {
|
||||
try {
|
||||
showStatus(1, 'Loading sample ANSI data...');
|
||||
terminal1.clear();
|
||||
|
||||
// Sample ANSI sequences to demonstrate XTerm features
|
||||
const samples = [
|
||||
'{"version":2,"width":80,"height":24}\n',
|
||||
'[0,"o","\\u001b[2J\\u001b[H"]\n', // Clear screen and home cursor
|
||||
'[0.1,"o","\\u001b[1;31m╔════════════════════════════════════════════════════════════════════════════╗\\u001b[0m\\r\\n"]\n',
|
||||
'[0.2,"o","\\u001b[1;31m║\\u001b[0m \\u001b[1;33mXTerm.js Renderer Demo\\u001b[0m \\u001b[1;31m║\\u001b[0m\\r\\n"]\n',
|
||||
'[0.3,"o","\\u001b[1;31m╚════════════════════════════════════════════════════════════════════════════╝\\u001b[0m\\r\\n"]\n',
|
||||
'[0.4,"o","\\r\\n"]\n',
|
||||
'[0.5,"o","\\u001b[1mStandard Colors:\\u001b[0m \\u001b[31mRed\\u001b[0m \\u001b[32mGreen\\u001b[0m \\u001b[33mYellow\\u001b[0m \\u001b[34mBlue\\u001b[0m \\u001b[35mMagenta\\u001b[0m \\u001b[36mCyan\\u001b[0m\\r\\n"]\n',
|
||||
'[0.6,"o","\\u001b[1mBright Colors:\\u001b[0m \\u001b[91mBright Red\\u001b[0m \\u001b[92mBright Green\\u001b[0m \\u001b[93mBright Yellow\\u001b[0m\\r\\n"]\n',
|
||||
'[0.7,"o","\\u001b[1m256 Colors:\\u001b[0m \\u001b[38;5;196mColor 196\\u001b[0m \\u001b[38;5;46mColor 46\\u001b[0m \\u001b[38;5;21mColor 21\\u001b[0m\\r\\n"]\n',
|
||||
'[0.8,"o","\\u001b[1mRGB Colors:\\u001b[0m \\u001b[38;2;255;100;50mOrange\\u001b[0m \\u001b[38;2;100;255;100mLime\\u001b[0m \\u001b[38;2;100;100;255mLight Blue\\u001b[0m\\r\\n"]\n',
|
||||
'[0.9,"o","\\u001b[1mStyles:\\u001b[0m \\u001b[1mBold\\u001b[0m \\u001b[3mItalic\\u001b[0m \\u001b[4mUnderline\\u001b[0m \\u001b[9mStrikethrough\\u001b[0m \\u001b[7mInverse\\u001b[0m\\r\\n"]\n',
|
||||
'[1.0,"o","\\u001b[1mCombined:\\u001b[0m \\u001b[1;3;4;38;2;255;165;0mBold Italic Underline Orange\\u001b[0m\\r\\n"]\n',
|
||||
'[1.1,"o","\\u001b[1mUnicode:\\u001b[0m 🚀 ✨ 🎉 ♦ ♠ ♥ ♣ 中文 日本語 العربية\\r\\n"]\n',
|
||||
'[1.2,"o","\\u001b[1mBox Drawing:\\u001b[0m ┌─┬─┐ │ │ │ ├─┼─┤ │ │ │ └─┴─┘\\r\\n"]\n',
|
||||
'[1.3,"o","\\r\\n\\u001b[32m$\\u001b[0m echo \\"XTerm.js handles complex sequences perfectly\\"\\r\\n"]\n',
|
||||
'[1.4,"o","XTerm.js handles complex sequences perfectly\\r\\n"]\n',
|
||||
'[1.5,"o","\\u001b[32m$\\u001b[0m \\u001b[7m \\u001b[0m"]\n'
|
||||
];
|
||||
|
||||
terminal1.parseCastFile(samples.join(''));
|
||||
showStatus(1, 'Sample ANSI data loaded!');
|
||||
} catch (error) {
|
||||
console.error('Error loading sample data:', error);
|
||||
showStatus(1, `Error loading sample data: ${error.message}`, true);
|
||||
}
|
||||
};
|
||||
|
||||
window.connectToSession = function() {
|
||||
const sessionId = document.getElementById('sessionId').value.trim();
|
||||
if (!sessionId) {
|
||||
showStatus(2, 'Please enter a session ID', true);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
if (currentStream) {
|
||||
currentStream.close();
|
||||
}
|
||||
|
||||
terminal2.clear();
|
||||
currentStream = terminal2.connectToStream(sessionId);
|
||||
|
||||
currentStream.onopen = () => {
|
||||
showStatus(2, `Connected to session ${sessionId}`);
|
||||
};
|
||||
|
||||
currentStream.onerror = (error) => {
|
||||
showStatus(2, `Stream error: ${error.message || 'Connection failed'}`, true);
|
||||
};
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error connecting to stream:', error);
|
||||
showStatus(2, `Error connecting: ${error.message}`, true);
|
||||
}
|
||||
};
|
||||
|
||||
window.disconnectStream = function() {
|
||||
if (currentStream) {
|
||||
currentStream.close();
|
||||
currentStream = null;
|
||||
showStatus(2, 'Disconnected from stream');
|
||||
}
|
||||
};
|
||||
|
||||
window.sendTestInput = function() {
|
||||
const input = document.getElementById('testInput').value;
|
||||
if (!input) {
|
||||
showStatus(3, 'Please enter some test input', true);
|
||||
return;
|
||||
}
|
||||
|
||||
// Decode escape sequences
|
||||
const decoded = input.replace(/\\x1b/g, '\x1b').replace(/\\n/g, '\n').replace(/\\r/g, '\r');
|
||||
terminal3.processOutput(decoded);
|
||||
showStatus(3, 'Test input processed');
|
||||
};
|
||||
|
||||
window.clearTerminal = function() {
|
||||
terminal1.clear();
|
||||
showStatus(1, 'Terminal cleared');
|
||||
};
|
||||
|
||||
window.clearTerminal2 = function() {
|
||||
terminal2.clear();
|
||||
showStatus(2, 'Terminal cleared');
|
||||
};
|
||||
|
||||
window.clearTerminal3 = function() {
|
||||
terminal3.clear();
|
||||
showStatus(3, 'Terminal cleared');
|
||||
};
|
||||
|
||||
window.generateScrollbackTest = function() {
|
||||
try {
|
||||
showStatus(1, 'Generating scrollback test...');
|
||||
terminal1.clear();
|
||||
|
||||
// Generate lots of output to test scrollback
|
||||
for (let i = 1; i <= 100; i++) {
|
||||
const colors = [31, 32, 33, 34, 35, 36];
|
||||
const color = colors[i % colors.length];
|
||||
const line = `\x1b[1;${color}m[${i.toString().padStart(3, '0')}]\x1b[0m Line ${i}: XTerm.js scrollback with \x1b[4munderline\x1b[0m and \x1b[1mbold\x1b[0m text!\n`;
|
||||
terminal1.processOutput(line);
|
||||
}
|
||||
|
||||
terminal1.processOutput('\x1b[1;37m=== End of XTerm scrollback test ===\x1b[0m\n');
|
||||
terminal1.processOutput('\x1b[32m$\x1b[0m \x1b[7m \x1b[0m');
|
||||
|
||||
showStatus(1, 'Generated 100 lines! XTerm.js handles scrollback smoothly.');
|
||||
} catch (error) {
|
||||
console.error('Error generating scrollback test:', error);
|
||||
showStatus(1, `Error generating scrollback test: ${error.message}`, true);
|
||||
}
|
||||
};
|
||||
|
||||
window.runComparisonTest = function() {
|
||||
const testData = [
|
||||
'\x1b[2J\x1b[H', // Clear and home
|
||||
'\x1b[1;31m=== Renderer Comparison Test ===\x1b[0m\n',
|
||||
'\x1b[1mColors:\x1b[0m \x1b[31mRed\x1b[0m \x1b[32mGreen\x1b[0m \x1b[33mYellow\x1b[0m \x1b[34mBlue\x1b[0m\n',
|
||||
'\x1b[1mRGB:\x1b[0m \x1b[38;2;255;100;50mOrange RGB\x1b[0m \x1b[38;2;100;255;100mLime RGB\x1b[0m\n',
|
||||
'\x1b[1mStyles:\x1b[0m \x1b[1mBold\x1b[0m \x1b[3mItalic\x1b[0m \x1b[4mUnderline\x1b[0m \x1b[7mInverse\x1b[0m\n',
|
||||
'\x1b[1mUnicode:\x1b[0m 🚀 ✨ 🎉 ♦ ♠ ♥ ♣\n',
|
||||
'\x1b[1mBox:\x1b[0m ┌─┬─┐\n │ │ │\n ├─┼─┤\n │ │ │\n └─┴─┘\n',
|
||||
'\x1b[32m$\x1b[0m echo "Compare renderers"\n',
|
||||
'Custom renderer vs XTerm.js\n',
|
||||
'\x1b[32m$\x1b[0m \x1b[7m \x1b[0m'
|
||||
];
|
||||
|
||||
const combined = testData.join('');
|
||||
|
||||
// Clear both terminals
|
||||
terminal4.clear();
|
||||
terminal5.clear();
|
||||
|
||||
// Process on both renderers
|
||||
terminal4.processOutput(combined);
|
||||
terminal5.processOutput(combined);
|
||||
};
|
||||
|
||||
window.clearComparison = function() {
|
||||
terminal4.clear();
|
||||
terminal5.clear();
|
||||
};
|
||||
|
||||
// Initialize with a welcome message showing XTerm capabilities
|
||||
setTimeout(() => {
|
||||
const welcomeSequences = [
|
||||
'\x1b[1;36m♦ XTerm.js Renderer Ready! ♦\x1b[0m\n',
|
||||
'\x1b[38;2;100;255;100mProfessional terminal emulation\x1b[0m\n',
|
||||
'\x1b[1mTry the sample data or comparison test!\x1b[0m\n'
|
||||
];
|
||||
|
||||
welcomeSequences.forEach(seq => terminal3.processOutput(seq));
|
||||
}, 100);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
671
web/src/client/renderer.ts
Normal file
671
web/src/client/renderer.ts
Normal file
|
|
@ -0,0 +1,671 @@
|
|||
// Terminal renderer for asciinema cast format with DOM rendering
|
||||
// Supports complete cast files and streaming events
|
||||
|
||||
interface CastHeader {
|
||||
version: number;
|
||||
width: number;
|
||||
height: number;
|
||||
timestamp?: number;
|
||||
env?: Record<string, string>;
|
||||
}
|
||||
|
||||
interface CastEvent {
|
||||
timestamp: number;
|
||||
type: 'o' | 'i'; // output or input
|
||||
data: string;
|
||||
}
|
||||
|
||||
interface TerminalCell {
|
||||
char: string;
|
||||
fg: string;
|
||||
bg: string;
|
||||
bold: boolean;
|
||||
italic: boolean;
|
||||
underline: boolean;
|
||||
strikethrough: boolean;
|
||||
inverse: boolean;
|
||||
}
|
||||
|
||||
interface TerminalState {
|
||||
width: number;
|
||||
height: number;
|
||||
cursorX: number;
|
||||
cursorY: number;
|
||||
currentFg: string;
|
||||
currentBg: string;
|
||||
bold: boolean;
|
||||
italic: boolean;
|
||||
underline: boolean;
|
||||
strikethrough: boolean;
|
||||
inverse: boolean;
|
||||
alternateScreen: boolean;
|
||||
scrollRegionTop: number;
|
||||
scrollRegionBottom: number;
|
||||
originMode: boolean;
|
||||
autowrap: boolean;
|
||||
insertMode: boolean;
|
||||
}
|
||||
|
||||
export class TerminalRenderer {
|
||||
private container: HTMLElement;
|
||||
private state: TerminalState;
|
||||
private primaryBuffer: TerminalCell[][];
|
||||
private alternateBuffer: TerminalCell[][];
|
||||
private scrollbackBuffer: TerminalCell[][];
|
||||
private maxScrollback: number = 1000;
|
||||
private ansiColorMap: string[] = [
|
||||
'#000000', '#cc241d', '#98971a', '#d79921', // Standard colors (0-7) - brighter
|
||||
'#458588', '#b16286', '#689d6a', '#a89984',
|
||||
'#928374', '#fb4934', '#b8bb26', '#fabd2f', // Bright colors (8-15) - very bright
|
||||
'#83a598', '#d3869b', '#8ec07c', '#ebdbb2'
|
||||
];
|
||||
|
||||
constructor(container: HTMLElement, width: number = 80, height: number = 20) {
|
||||
this.container = container;
|
||||
this.state = {
|
||||
width,
|
||||
height,
|
||||
cursorX: 0,
|
||||
cursorY: 0,
|
||||
currentFg: '#ffffff',
|
||||
currentBg: '#000000',
|
||||
bold: false,
|
||||
italic: false,
|
||||
underline: false,
|
||||
strikethrough: false,
|
||||
inverse: false,
|
||||
alternateScreen: false,
|
||||
scrollRegionTop: 0,
|
||||
scrollRegionBottom: height - 1,
|
||||
originMode: false,
|
||||
autowrap: true,
|
||||
insertMode: false
|
||||
};
|
||||
|
||||
this.primaryBuffer = this.createBuffer(width, height);
|
||||
this.alternateBuffer = this.createBuffer(width, height);
|
||||
this.scrollbackBuffer = [];
|
||||
|
||||
this.setupDOM();
|
||||
}
|
||||
|
||||
private createBuffer(width: number, height: number): TerminalCell[][] {
|
||||
const buffer: TerminalCell[][] = [];
|
||||
for (let y = 0; y < height; y++) {
|
||||
buffer[y] = [];
|
||||
for (let x = 0; x < width; x++) {
|
||||
buffer[y][x] = {
|
||||
char: ' ',
|
||||
fg: '#ffffff',
|
||||
bg: '#000000',
|
||||
bold: false,
|
||||
italic: false,
|
||||
underline: false,
|
||||
strikethrough: false,
|
||||
inverse: false
|
||||
};
|
||||
}
|
||||
}
|
||||
return buffer;
|
||||
}
|
||||
|
||||
private setupDOM(): void {
|
||||
this.container.style.fontFamily = 'Monaco, "Lucida Console", monospace';
|
||||
this.container.style.fontSize = '14px';
|
||||
this.container.style.lineHeight = '1.2';
|
||||
this.container.style.backgroundColor = '#000000';
|
||||
this.container.style.color = '#ffffff';
|
||||
this.container.style.padding = '10px';
|
||||
this.container.style.overflow = 'auto';
|
||||
this.container.style.whiteSpace = 'pre';
|
||||
this.container.innerHTML = '';
|
||||
}
|
||||
|
||||
private getCurrentBuffer(): TerminalCell[][] {
|
||||
return this.state.alternateScreen ? this.alternateBuffer : this.primaryBuffer;
|
||||
}
|
||||
|
||||
private renderBuffer(): void {
|
||||
const buffer = this.getCurrentBuffer();
|
||||
const allLines: string[] = [];
|
||||
|
||||
// Render scrollback buffer first (only for primary screen)
|
||||
if (!this.state.alternateScreen && this.scrollbackBuffer.length > 0) {
|
||||
for (let i = 0; i < this.scrollbackBuffer.length; i++) {
|
||||
const line = this.renderLine(this.scrollbackBuffer[i]);
|
||||
allLines.push(`<div class="scrollback-line">${line}</div>`);
|
||||
}
|
||||
}
|
||||
|
||||
// Render current buffer
|
||||
for (let y = 0; y < this.state.height; y++) {
|
||||
const line = this.renderLine(buffer[y]);
|
||||
const isCurrentLine = y === this.state.cursorY;
|
||||
allLines.push(`<div class="terminal-line ${isCurrentLine ? 'current-line' : ''}">${line}</div>`);
|
||||
}
|
||||
|
||||
this.container.innerHTML = allLines.join('');
|
||||
|
||||
// Auto-scroll to bottom unless user has scrolled up
|
||||
if (this.container.scrollTop + this.container.clientHeight >= this.container.scrollHeight - 10) {
|
||||
this.container.scrollTop = this.container.scrollHeight;
|
||||
}
|
||||
}
|
||||
|
||||
private renderLine(lineBuffer: TerminalCell[]): string {
|
||||
let line = '';
|
||||
let lastBg = '';
|
||||
let lastFg = '';
|
||||
let lastStyles = '';
|
||||
let spanOpen = false;
|
||||
|
||||
for (let x = 0; x < lineBuffer.length; x++) {
|
||||
const cell = lineBuffer[x];
|
||||
const fg = cell.inverse ? cell.bg : cell.fg;
|
||||
const bg = cell.inverse ? cell.fg : cell.bg;
|
||||
|
||||
let styles = '';
|
||||
if (cell.bold) styles += 'font-weight: bold; ';
|
||||
if (cell.italic) styles += 'font-style: italic; ';
|
||||
if (cell.underline) styles += 'text-decoration: underline; ';
|
||||
if (cell.strikethrough) styles += 'text-decoration: line-through; ';
|
||||
|
||||
if (fg !== lastFg || bg !== lastBg || styles !== lastStyles) {
|
||||
if (spanOpen) {
|
||||
line += '</span>';
|
||||
spanOpen = false;
|
||||
}
|
||||
|
||||
// Always add span for consistent rendering
|
||||
line += `<span style="color: ${fg}; background-color: ${bg}; ${styles}">`;
|
||||
spanOpen = true;
|
||||
|
||||
lastFg = fg;
|
||||
lastBg = bg;
|
||||
lastStyles = styles;
|
||||
}
|
||||
|
||||
const char = cell.char || ' ';
|
||||
line += char === ' ' ? ' ' : this.escapeHtml(char);
|
||||
}
|
||||
|
||||
// Close any open span
|
||||
if (spanOpen) {
|
||||
line += '</span>';
|
||||
}
|
||||
|
||||
return line || ' '; // Ensure empty lines have height
|
||||
}
|
||||
|
||||
private escapeHtml(text: string): string {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
private parseAnsiSequence(data: string): void {
|
||||
let i = 0;
|
||||
while (i < data.length) {
|
||||
const char = data[i];
|
||||
|
||||
if (char === '\x1b' && i + 1 < data.length && data[i + 1] === '[') {
|
||||
// CSI sequence
|
||||
i += 2;
|
||||
let params = '';
|
||||
let finalChar = '';
|
||||
|
||||
while (i < data.length) {
|
||||
const c = data[i];
|
||||
if ((c >= '0' && c <= '9') || c === ';' || c === ':' || c === '?') {
|
||||
params += c;
|
||||
} else {
|
||||
finalChar = c;
|
||||
break;
|
||||
}
|
||||
i++;
|
||||
}
|
||||
|
||||
// Debug problematic sequences
|
||||
if (params.includes('2004')) {
|
||||
console.log(`CSI sequence: ESC[${params}${finalChar}`);
|
||||
}
|
||||
|
||||
this.handleCSI(params, finalChar);
|
||||
} else if (char === '\x1b' && i + 1 < data.length && data[i + 1] === ']') {
|
||||
// OSC sequence - skip for now
|
||||
i += 2;
|
||||
while (i < data.length && data[i] !== '\x07' && data[i] !== '\x1b') {
|
||||
i++;
|
||||
}
|
||||
if (i < data.length && data[i] === '\x1b' && i + 1 < data.length && data[i + 1] === '\\') {
|
||||
i++; // Skip the backslash too
|
||||
}
|
||||
} else if (char === '\x1b' && i + 1 < data.length && data[i + 1] === '=') {
|
||||
// Application keypad mode - skip
|
||||
i++;
|
||||
} else if (char === '\x1b' && i + 1 < data.length && data[i + 1] === '>') {
|
||||
// Normal keypad mode - skip
|
||||
i++;
|
||||
} else if (char === '\r') {
|
||||
this.state.cursorX = 0;
|
||||
} else if (char === '\n') {
|
||||
this.newline();
|
||||
} else if (char === '\t') {
|
||||
this.state.cursorX = Math.min(this.state.width - 1, (Math.floor(this.state.cursorX / 8) + 1) * 8);
|
||||
} else if (char === '\b') {
|
||||
if (this.state.cursorX > 0) {
|
||||
this.state.cursorX--;
|
||||
}
|
||||
} else if (char >= ' ' || char === '\x00') {
|
||||
this.writeChar(char === '\x00' ? ' ' : char);
|
||||
}
|
||||
|
||||
i++;
|
||||
}
|
||||
}
|
||||
|
||||
private handleCSI(params: string, finalChar: string): void {
|
||||
const paramList = params ? params.split(';').map(p => parseInt(p) || 0) : [0];
|
||||
|
||||
switch (finalChar) {
|
||||
case 'A': // Cursor Up
|
||||
this.state.cursorY = Math.max(this.state.scrollRegionTop, this.state.cursorY - (paramList[0] || 1));
|
||||
break;
|
||||
case 'B': // Cursor Down
|
||||
this.state.cursorY = Math.min(this.state.scrollRegionBottom, this.state.cursorY + (paramList[0] || 1));
|
||||
break;
|
||||
case 'C': // Cursor Forward
|
||||
this.state.cursorX = Math.min(this.state.width - 1, this.state.cursorX + (paramList[0] || 1));
|
||||
break;
|
||||
case 'D': // Cursor Backward
|
||||
this.state.cursorX = Math.max(0, this.state.cursorX - (paramList[0] || 1));
|
||||
break;
|
||||
case 'H': // Cursor Position
|
||||
case 'f':
|
||||
this.state.cursorY = Math.min(this.state.height - 1, Math.max(0, (paramList[0] || 1) - 1));
|
||||
this.state.cursorX = Math.min(this.state.width - 1, Math.max(0, (paramList[1] || 1) - 1));
|
||||
break;
|
||||
case 'J': // Erase Display
|
||||
this.eraseDisplay(paramList[0] || 0);
|
||||
break;
|
||||
case 'K': // Erase Line
|
||||
this.eraseLine(paramList[0] || 0);
|
||||
break;
|
||||
case 'm': // Set Graphics Rendition
|
||||
this.handleSGR(paramList);
|
||||
break;
|
||||
case 'r': // Set Scroll Region
|
||||
this.state.scrollRegionTop = Math.max(0, (paramList[0] || 1) - 1);
|
||||
this.state.scrollRegionBottom = Math.min(this.state.height - 1, (paramList[1] || this.state.height) - 1);
|
||||
this.state.cursorX = 0;
|
||||
this.state.cursorY = this.state.scrollRegionTop;
|
||||
break;
|
||||
case 's': // Save Cursor Position
|
||||
// TODO: Implement cursor save/restore
|
||||
break;
|
||||
case 'u': // Restore Cursor Position
|
||||
// TODO: Implement cursor save/restore
|
||||
break;
|
||||
case 'h': // Set Mode
|
||||
if (params === '?1049' || params === '?47') {
|
||||
this.state.alternateScreen = true;
|
||||
} else if (params === '?2004') {
|
||||
// Bracketed paste mode - ignore (should not display)
|
||||
console.log('Bracketed paste mode enabled');
|
||||
} else if (params === '?1') {
|
||||
// Application cursor keys mode
|
||||
} else {
|
||||
console.log(`Unhandled set mode: ${params}h`);
|
||||
}
|
||||
break;
|
||||
case 'l': // Reset Mode
|
||||
if (params === '?1049' || params === '?47') {
|
||||
this.state.alternateScreen = false;
|
||||
} else if (params === '?2004') {
|
||||
// Bracketed paste mode - ignore (should not display)
|
||||
console.log('Bracketed paste mode disabled');
|
||||
} else if (params === '?1') {
|
||||
// Normal cursor keys mode
|
||||
} else {
|
||||
console.log(`Unhandled reset mode: ${params}l`);
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
private handleSGR(params: number[]): void {
|
||||
for (let i = 0; i < params.length; i++) {
|
||||
const param = params[i];
|
||||
|
||||
if (param === 0) {
|
||||
// Reset
|
||||
this.state.currentFg = '#ffffff';
|
||||
this.state.currentBg = '#000000';
|
||||
this.state.bold = false;
|
||||
this.state.italic = false;
|
||||
this.state.underline = false;
|
||||
this.state.strikethrough = false;
|
||||
this.state.inverse = false;
|
||||
} else if (param === 1) {
|
||||
this.state.bold = true;
|
||||
} else if (param === 3) {
|
||||
this.state.italic = true;
|
||||
} else if (param === 4) {
|
||||
this.state.underline = true;
|
||||
} else if (param === 7) {
|
||||
this.state.inverse = true;
|
||||
} else if (param === 9) {
|
||||
this.state.strikethrough = true;
|
||||
} else if (param === 22) {
|
||||
this.state.bold = false;
|
||||
} else if (param === 23) {
|
||||
this.state.italic = false;
|
||||
} else if (param === 24) {
|
||||
this.state.underline = false;
|
||||
} else if (param === 27) {
|
||||
this.state.inverse = false;
|
||||
} else if (param === 29) {
|
||||
this.state.strikethrough = false;
|
||||
} else if (param === 39) {
|
||||
// Default foreground color
|
||||
this.state.currentFg = '#ffffff';
|
||||
} else if (param === 49) {
|
||||
// Default background color
|
||||
this.state.currentBg = '#000000';
|
||||
} else if (param >= 30 && param <= 37) {
|
||||
// Standard foreground colors
|
||||
this.state.currentFg = this.ansiColorMap[param - 30];
|
||||
} else if (param >= 40 && param <= 47) {
|
||||
// Standard background colors
|
||||
this.state.currentBg = this.ansiColorMap[param - 40];
|
||||
} else if (param >= 90 && param <= 97) {
|
||||
// Bright foreground colors
|
||||
this.state.currentFg = this.ansiColorMap[param - 90 + 8];
|
||||
} else if (param >= 100 && param <= 107) {
|
||||
// Bright background colors
|
||||
this.state.currentBg = this.ansiColorMap[param - 100 + 8];
|
||||
} else if (param === 38) {
|
||||
// Extended foreground color
|
||||
if (i + 1 < params.length && params[i + 1] === 2 && i + 4 < params.length) {
|
||||
// RGB: 38;2;r;g;b
|
||||
const r = params[i + 2];
|
||||
const g = params[i + 3];
|
||||
const b = params[i + 4];
|
||||
this.state.currentFg = `rgb(${r},${g},${b})`;
|
||||
i += 4;
|
||||
} else if (i + 1 < params.length && params[i + 1] === 5 && i + 2 < params.length) {
|
||||
// 256-color: 38;5;n
|
||||
this.state.currentFg = this.get256Color(params[i + 2]);
|
||||
i += 2;
|
||||
}
|
||||
} else if (param === 48) {
|
||||
// Extended background color
|
||||
if (i + 1 < params.length && params[i + 1] === 2 && i + 4 < params.length) {
|
||||
// RGB: 48;2;r;g;b
|
||||
const r = params[i + 2];
|
||||
const g = params[i + 3];
|
||||
const b = params[i + 4];
|
||||
this.state.currentBg = `rgb(${r},${g},${b})`;
|
||||
i += 4;
|
||||
} else if (i + 1 < params.length && params[i + 1] === 5 && i + 2 < params.length) {
|
||||
// 256-color: 48;5;n
|
||||
this.state.currentBg = this.get256Color(params[i + 2]);
|
||||
i += 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private get256Color(index: number): string {
|
||||
if (index < 16) {
|
||||
return this.ansiColorMap[index];
|
||||
} else if (index < 232) {
|
||||
// 216 color cube
|
||||
const n = index - 16;
|
||||
const r = Math.floor(n / 36);
|
||||
const g = Math.floor((n % 36) / 6);
|
||||
const b = n % 6;
|
||||
|
||||
const values = [0, 95, 135, 175, 215, 255];
|
||||
return `rgb(${values[r]},${values[g]},${values[b]})`;
|
||||
} else {
|
||||
// Grayscale
|
||||
const gray = 8 + (index - 232) * 10;
|
||||
return `rgb(${gray},${gray},${gray})`;
|
||||
}
|
||||
}
|
||||
|
||||
private eraseDisplay(mode: number): void {
|
||||
const buffer = this.getCurrentBuffer();
|
||||
|
||||
switch (mode) {
|
||||
case 0: // Erase from cursor to end of screen
|
||||
this.eraseLine(0);
|
||||
for (let y = this.state.cursorY + 1; y < this.state.height; y++) {
|
||||
for (let x = 0; x < this.state.width; x++) {
|
||||
buffer[y][x] = this.createEmptyCell();
|
||||
}
|
||||
}
|
||||
break;
|
||||
case 1: // Erase from beginning of screen to cursor
|
||||
for (let y = 0; y < this.state.cursorY; y++) {
|
||||
for (let x = 0; x < this.state.width; x++) {
|
||||
buffer[y][x] = this.createEmptyCell();
|
||||
}
|
||||
}
|
||||
this.eraseLine(1);
|
||||
break;
|
||||
case 2: // Erase entire screen
|
||||
case 3: // Erase entire screen and scrollback
|
||||
for (let y = 0; y < this.state.height; y++) {
|
||||
for (let x = 0; x < this.state.width; x++) {
|
||||
buffer[y][x] = this.createEmptyCell();
|
||||
}
|
||||
}
|
||||
if (mode === 3) {
|
||||
this.scrollbackBuffer = [];
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
private eraseLine(mode: number): void {
|
||||
const buffer = this.getCurrentBuffer();
|
||||
const y = this.state.cursorY;
|
||||
|
||||
switch (mode) {
|
||||
case 0: // Erase from cursor to end of line
|
||||
for (let x = this.state.cursorX; x < this.state.width; x++) {
|
||||
buffer[y][x] = this.createEmptyCell();
|
||||
}
|
||||
break;
|
||||
case 1: // Erase from beginning of line to cursor
|
||||
for (let x = 0; x <= this.state.cursorX; x++) {
|
||||
buffer[y][x] = this.createEmptyCell();
|
||||
}
|
||||
break;
|
||||
case 2: // Erase entire line
|
||||
for (let x = 0; x < this.state.width; x++) {
|
||||
buffer[y][x] = this.createEmptyCell();
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
private createEmptyCell(): TerminalCell {
|
||||
return {
|
||||
char: ' ',
|
||||
fg: this.state.currentFg,
|
||||
bg: this.state.currentBg,
|
||||
bold: false,
|
||||
italic: false,
|
||||
underline: false,
|
||||
strikethrough: false,
|
||||
inverse: false
|
||||
};
|
||||
}
|
||||
|
||||
private writeChar(char: string): void {
|
||||
const buffer = this.getCurrentBuffer();
|
||||
|
||||
if (this.state.cursorX >= this.state.width) {
|
||||
if (this.state.autowrap) {
|
||||
this.newline();
|
||||
} else {
|
||||
this.state.cursorX = this.state.width - 1;
|
||||
}
|
||||
}
|
||||
|
||||
buffer[this.state.cursorY][this.state.cursorX] = {
|
||||
char,
|
||||
fg: this.state.currentFg,
|
||||
bg: this.state.currentBg,
|
||||
bold: this.state.bold,
|
||||
italic: this.state.italic,
|
||||
underline: this.state.underline,
|
||||
strikethrough: this.state.strikethrough,
|
||||
inverse: this.state.inverse
|
||||
};
|
||||
|
||||
this.state.cursorX++;
|
||||
}
|
||||
|
||||
private newline(): void {
|
||||
this.state.cursorX = 0;
|
||||
if (this.state.cursorY >= this.state.scrollRegionBottom) {
|
||||
this.scrollUp();
|
||||
} else {
|
||||
this.state.cursorY++;
|
||||
}
|
||||
}
|
||||
|
||||
private scrollUp(): void {
|
||||
const buffer = this.getCurrentBuffer();
|
||||
|
||||
// Add the top line to scrollback if we're in primary buffer
|
||||
if (!this.state.alternateScreen) {
|
||||
this.scrollbackBuffer.push([...buffer[this.state.scrollRegionTop]]);
|
||||
if (this.scrollbackBuffer.length > this.maxScrollback) {
|
||||
this.scrollbackBuffer.shift();
|
||||
}
|
||||
}
|
||||
|
||||
// Scroll the region
|
||||
for (let y = this.state.scrollRegionTop; y < this.state.scrollRegionBottom; y++) {
|
||||
buffer[y] = [...buffer[y + 1]];
|
||||
}
|
||||
|
||||
// Clear the bottom line
|
||||
for (let x = 0; x < this.state.width; x++) {
|
||||
buffer[this.state.scrollRegionBottom][x] = this.createEmptyCell();
|
||||
}
|
||||
}
|
||||
|
||||
// Public API methods
|
||||
|
||||
async loadCastFile(url: string): Promise<void> {
|
||||
const response = await fetch(url);
|
||||
const text = await response.text();
|
||||
this.parseCastFile(text);
|
||||
}
|
||||
|
||||
parseCastFile(content: string): void {
|
||||
const lines = content.trim().split('\n');
|
||||
let header: CastHeader | null = null;
|
||||
|
||||
for (const line of lines) {
|
||||
if (!line.trim()) continue;
|
||||
|
||||
try {
|
||||
const parsed = JSON.parse(line);
|
||||
|
||||
if (parsed.version && parsed.width && parsed.height) {
|
||||
// Header
|
||||
header = parsed;
|
||||
this.resize(parsed.width, parsed.height);
|
||||
} else if (Array.isArray(parsed) && parsed.length >= 3) {
|
||||
// Event: [timestamp, type, data]
|
||||
const event: CastEvent = {
|
||||
timestamp: parsed[0],
|
||||
type: parsed[1],
|
||||
data: parsed[2]
|
||||
};
|
||||
|
||||
if (event.type === 'o') {
|
||||
this.processOutput(event.data);
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn('Failed to parse cast line:', line);
|
||||
}
|
||||
}
|
||||
|
||||
this.renderBuffer();
|
||||
}
|
||||
|
||||
processOutput(data: string): void {
|
||||
this.parseAnsiSequence(data);
|
||||
this.renderBuffer();
|
||||
}
|
||||
|
||||
processEvent(event: CastEvent): void {
|
||||
if (event.type === 'o') {
|
||||
this.processOutput(event.data);
|
||||
this.renderBuffer();
|
||||
}
|
||||
}
|
||||
|
||||
resize(width: number, height: number): void {
|
||||
this.state.width = width;
|
||||
this.state.height = height;
|
||||
this.state.scrollRegionBottom = height - 1;
|
||||
|
||||
this.primaryBuffer = this.createBuffer(width, height);
|
||||
this.alternateBuffer = this.createBuffer(width, height);
|
||||
|
||||
this.state.cursorX = 0;
|
||||
this.state.cursorY = 0;
|
||||
}
|
||||
|
||||
clear(): void {
|
||||
this.primaryBuffer = this.createBuffer(this.state.width, this.state.height);
|
||||
this.alternateBuffer = this.createBuffer(this.state.width, this.state.height);
|
||||
this.scrollbackBuffer = [];
|
||||
this.state.cursorX = 0;
|
||||
this.state.cursorY = 0;
|
||||
this.state.alternateScreen = false;
|
||||
this.renderBuffer();
|
||||
}
|
||||
|
||||
// Stream support - connect to SSE endpoint
|
||||
connectToStream(sessionId: string): EventSource {
|
||||
const eventSource = new EventSource(`/api/sessions/${sessionId}/stream`);
|
||||
|
||||
eventSource.onmessage = (event) => {
|
||||
try {
|
||||
const data = JSON.parse(event.data);
|
||||
|
||||
if (data.version && data.width && data.height) {
|
||||
// Header
|
||||
this.resize(data.width, data.height);
|
||||
} else if (Array.isArray(data) && data.length >= 3) {
|
||||
// Event
|
||||
const castEvent: CastEvent = {
|
||||
timestamp: data[0],
|
||||
type: data[1],
|
||||
data: data[2]
|
||||
};
|
||||
this.processEvent(castEvent);
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn('Failed to parse stream event:', event.data);
|
||||
}
|
||||
};
|
||||
|
||||
eventSource.onerror = (error) => {
|
||||
console.error('Stream error:', error);
|
||||
};
|
||||
|
||||
return eventSource;
|
||||
}
|
||||
}
|
||||
258
web/src/client/xterm-renderer.ts
Normal file
258
web/src/client/xterm-renderer.ts
Normal file
|
|
@ -0,0 +1,258 @@
|
|||
// XTerm-based terminal renderer for asciinema cast format
|
||||
// Provides the same interface as the custom renderer but uses xterm.js
|
||||
|
||||
import { Terminal } from '@xterm/xterm';
|
||||
import { FitAddon } from '@xterm/addon-fit';
|
||||
import { WebLinksAddon } from '@xterm/addon-web-links';
|
||||
|
||||
interface CastHeader {
|
||||
version: number;
|
||||
width: number;
|
||||
height: number;
|
||||
timestamp?: number;
|
||||
env?: Record<string, string>;
|
||||
}
|
||||
|
||||
interface CastEvent {
|
||||
timestamp: number;
|
||||
type: 'o' | 'i'; // output or input
|
||||
data: string;
|
||||
}
|
||||
|
||||
export class XTermRenderer {
|
||||
private container: HTMLElement;
|
||||
private terminal: Terminal;
|
||||
private fitAddon: FitAddon;
|
||||
private webLinksAddon: WebLinksAddon;
|
||||
|
||||
constructor(container: HTMLElement, width: number = 80, height: number = 20) {
|
||||
this.container = container;
|
||||
|
||||
// Create terminal with options similar to the custom renderer
|
||||
this.terminal = new Terminal({
|
||||
cols: width,
|
||||
rows: height,
|
||||
fontFamily: 'Monaco, "Lucida Console", monospace',
|
||||
fontSize: 14,
|
||||
lineHeight: 1.2,
|
||||
theme: {
|
||||
background: '#000000',
|
||||
foreground: '#ffffff',
|
||||
cursor: '#ffffff',
|
||||
cursorAccent: '#000000',
|
||||
selectionBackground: '#ffffff30',
|
||||
// Standard ANSI colors (matching the custom renderer)
|
||||
black: '#000000',
|
||||
red: '#cc241d',
|
||||
green: '#98971a',
|
||||
yellow: '#d79921',
|
||||
blue: '#458588',
|
||||
magenta: '#b16286',
|
||||
cyan: '#689d6a',
|
||||
white: '#a89984',
|
||||
// Bright ANSI colors
|
||||
brightBlack: '#928374',
|
||||
brightRed: '#fb4934',
|
||||
brightGreen: '#b8bb26',
|
||||
brightYellow: '#fabd2f',
|
||||
brightBlue: '#83a598',
|
||||
brightMagenta: '#d3869b',
|
||||
brightCyan: '#8ec07c',
|
||||
brightWhite: '#ebdbb2'
|
||||
},
|
||||
allowProposedApi: true,
|
||||
scrollback: 1000,
|
||||
convertEol: true,
|
||||
altClickMovesCursor: false,
|
||||
rightClickSelectsWord: false,
|
||||
disableStdin: true // We handle input separately
|
||||
});
|
||||
|
||||
// Add addons
|
||||
this.fitAddon = new FitAddon();
|
||||
this.webLinksAddon = new WebLinksAddon();
|
||||
|
||||
this.terminal.loadAddon(this.fitAddon);
|
||||
this.terminal.loadAddon(this.webLinksAddon);
|
||||
|
||||
this.setupDOM();
|
||||
}
|
||||
|
||||
private setupDOM(): void {
|
||||
// Clear container and add CSS
|
||||
this.container.innerHTML = '';
|
||||
this.container.style.padding = '10px';
|
||||
this.container.style.backgroundColor = '#000000';
|
||||
this.container.style.overflow = 'hidden';
|
||||
|
||||
// Create terminal wrapper
|
||||
const terminalWrapper = document.createElement('div');
|
||||
terminalWrapper.style.width = '100%';
|
||||
terminalWrapper.style.height = '100%';
|
||||
this.container.appendChild(terminalWrapper);
|
||||
|
||||
// Open terminal in the wrapper
|
||||
this.terminal.open(terminalWrapper);
|
||||
|
||||
// Fit terminal to container
|
||||
this.fitAddon.fit();
|
||||
|
||||
// Handle container resize
|
||||
const resizeObserver = new ResizeObserver(() => {
|
||||
this.fitAddon.fit();
|
||||
});
|
||||
resizeObserver.observe(this.container);
|
||||
}
|
||||
|
||||
// Public API methods - maintain compatibility with custom renderer
|
||||
|
||||
async loadCastFile(url: string): Promise<void> {
|
||||
const response = await fetch(url);
|
||||
const text = await response.text();
|
||||
this.parseCastFile(text);
|
||||
}
|
||||
|
||||
parseCastFile(content: string): void {
|
||||
const lines = content.trim().split('\n');
|
||||
let header: CastHeader | null = null;
|
||||
|
||||
// Clear terminal
|
||||
this.terminal.clear();
|
||||
|
||||
for (const line of lines) {
|
||||
if (!line.trim()) continue;
|
||||
|
||||
try {
|
||||
const parsed = JSON.parse(line);
|
||||
|
||||
if (parsed.version && parsed.width && parsed.height) {
|
||||
// Header
|
||||
header = parsed;
|
||||
this.resize(parsed.width, parsed.height);
|
||||
} else if (Array.isArray(parsed) && parsed.length >= 3) {
|
||||
// Event: [timestamp, type, data]
|
||||
const event: CastEvent = {
|
||||
timestamp: parsed[0],
|
||||
type: parsed[1],
|
||||
data: parsed[2]
|
||||
};
|
||||
|
||||
if (event.type === 'o') {
|
||||
this.processOutput(event.data);
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn('Failed to parse cast line:', line);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
processOutput(data: string): void {
|
||||
// XTerm handles all ANSI escape sequences automatically
|
||||
this.terminal.write(data);
|
||||
}
|
||||
|
||||
processEvent(event: CastEvent): void {
|
||||
if (event.type === 'o') {
|
||||
this.processOutput(event.data);
|
||||
}
|
||||
}
|
||||
|
||||
resize(width: number, height: number): void {
|
||||
this.terminal.resize(width, height);
|
||||
// Fit addon will handle the visual resize
|
||||
setTimeout(() => {
|
||||
this.fitAddon.fit();
|
||||
}, 0);
|
||||
}
|
||||
|
||||
clear(): void {
|
||||
this.terminal.clear();
|
||||
}
|
||||
|
||||
// Stream support - connect to SSE endpoint
|
||||
connectToStream(sessionId: string): EventSource {
|
||||
const eventSource = new EventSource(`/api/sessions/${sessionId}/stream`);
|
||||
|
||||
// Clear terminal when starting stream
|
||||
this.terminal.clear();
|
||||
|
||||
eventSource.onmessage = (event) => {
|
||||
try {
|
||||
const data = JSON.parse(event.data);
|
||||
|
||||
if (data.version && data.width && data.height) {
|
||||
// Header
|
||||
this.resize(data.width, data.height);
|
||||
} else if (Array.isArray(data) && data.length >= 3) {
|
||||
// Event
|
||||
const castEvent: CastEvent = {
|
||||
timestamp: data[0],
|
||||
type: data[1],
|
||||
data: data[2]
|
||||
};
|
||||
this.processEvent(castEvent);
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn('Failed to parse stream event:', event.data);
|
||||
}
|
||||
};
|
||||
|
||||
eventSource.onerror = (error) => {
|
||||
console.error('Stream error:', error);
|
||||
};
|
||||
|
||||
return eventSource;
|
||||
}
|
||||
|
||||
// Additional methods for terminal control
|
||||
|
||||
focus(): void {
|
||||
this.terminal.focus();
|
||||
}
|
||||
|
||||
blur(): void {
|
||||
this.terminal.blur();
|
||||
}
|
||||
|
||||
getTerminal(): Terminal {
|
||||
return this.terminal;
|
||||
}
|
||||
|
||||
dispose(): void {
|
||||
this.terminal.dispose();
|
||||
}
|
||||
|
||||
// Method to fit terminal to container (useful for responsive layouts)
|
||||
fit(): void {
|
||||
this.fitAddon.fit();
|
||||
}
|
||||
|
||||
// Get terminal dimensions
|
||||
getDimensions(): { cols: number; rows: number } {
|
||||
return {
|
||||
cols: this.terminal.cols,
|
||||
rows: this.terminal.rows
|
||||
};
|
||||
}
|
||||
|
||||
// Write raw data to terminal (useful for testing)
|
||||
write(data: string): void {
|
||||
this.terminal.write(data);
|
||||
}
|
||||
|
||||
// Enable/disable input (though we keep it disabled by default)
|
||||
setInputEnabled(enabled: boolean): void {
|
||||
// XTerm doesn't have a direct way to disable input, so we override onData
|
||||
if (enabled) {
|
||||
// Remove any existing handler first
|
||||
this.terminal.onData(() => {
|
||||
// Input is handled by the session component
|
||||
});
|
||||
} else {
|
||||
this.terminal.onData(() => {
|
||||
// Do nothing - input disabled
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -312,6 +312,13 @@ app.post('/api/cleanup-exited', async (req, res) => {
|
|||
|
||||
// === TERMINAL I/O ===
|
||||
|
||||
// Track active streams per session to avoid multiple tail processes
|
||||
const activeStreams = new Map<string, {
|
||||
clients: Set<any>,
|
||||
tailProcess: any,
|
||||
lastPosition: number
|
||||
}>();
|
||||
|
||||
// Live streaming cast file for asciinema player
|
||||
app.get('/api/sessions/:sessionId/stream', async (req, res) => {
|
||||
const sessionId = req.params.sessionId;
|
||||
|
|
@ -321,6 +328,8 @@ app.get('/api/sessions/:sessionId/stream', async (req, res) => {
|
|||
return res.status(404).json({ error: 'Session not found' });
|
||||
}
|
||||
|
||||
console.log(`New SSE client connected to session ${sessionId}`);
|
||||
|
||||
res.writeHead(200, {
|
||||
'Content-Type': 'text/event-stream',
|
||||
'Cache-Control': 'no-cache',
|
||||
|
|
@ -333,7 +342,6 @@ app.get('/api/sessions/:sessionId/stream', async (req, res) => {
|
|||
let headerSent = false;
|
||||
|
||||
// Send existing content first
|
||||
// NOTE: Small race condition possible between reading file and starting tail
|
||||
try {
|
||||
const content = fs.readFileSync(streamOutPath, 'utf8');
|
||||
const lines = content.trim().split('\n');
|
||||
|
|
@ -370,103 +378,115 @@ app.get('/api/sessions/:sessionId/stream', async (req, res) => {
|
|||
res.write(`data: ${JSON.stringify(defaultHeader)}\n\n`);
|
||||
}
|
||||
|
||||
// Stream new content
|
||||
const tailProcess = spawn('tail', ['-f', streamOutPath]);
|
||||
let buffer = '';
|
||||
let streamCleanedUp = false;
|
||||
// Get or create shared stream for this session
|
||||
let streamInfo = activeStreams.get(sessionId);
|
||||
|
||||
if (!streamInfo) {
|
||||
console.log(`Creating new shared tail process for session ${sessionId}`);
|
||||
|
||||
// Create new tail process for this session
|
||||
const tailProcess = spawn('tail', ['-f', streamOutPath]);
|
||||
let buffer = '';
|
||||
|
||||
streamInfo = {
|
||||
clients: new Set(),
|
||||
tailProcess,
|
||||
lastPosition: 0
|
||||
};
|
||||
|
||||
activeStreams.set(sessionId, streamInfo);
|
||||
|
||||
// Handle tail output - broadcast to all clients
|
||||
tailProcess.stdout.on('data', (chunk) => {
|
||||
buffer += chunk.toString();
|
||||
const lines = buffer.split('\n');
|
||||
buffer = lines.pop() || '';
|
||||
|
||||
for (const line of lines) {
|
||||
if (line.trim()) {
|
||||
let eventData;
|
||||
try {
|
||||
const parsed = JSON.parse(line);
|
||||
if (parsed.version && parsed.width && parsed.height) {
|
||||
continue; // Skip duplicate headers
|
||||
}
|
||||
if (Array.isArray(parsed) && parsed.length >= 3) {
|
||||
const currentTime = Date.now() / 1000;
|
||||
const realTimeEvent = [currentTime - startTime, parsed[1], parsed[2]];
|
||||
eventData = `data: ${JSON.stringify(realTimeEvent)}\n\n`;
|
||||
}
|
||||
} catch (e) {
|
||||
// Handle non-JSON as raw output
|
||||
const currentTime = Date.now() / 1000;
|
||||
const castEvent = [currentTime - startTime, "o", line];
|
||||
eventData = `data: ${JSON.stringify(castEvent)}\n\n`;
|
||||
}
|
||||
|
||||
if (eventData && streamInfo) {
|
||||
// Broadcast to all connected clients
|
||||
streamInfo.clients.forEach(client => {
|
||||
try {
|
||||
client.write(eventData);
|
||||
} catch (error) {
|
||||
console.error('Error writing to client:', error);
|
||||
if (streamInfo) {
|
||||
streamInfo.clients.delete(client);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
tailProcess.on('error', (error) => {
|
||||
console.error(`Shared tail process error for session ${sessionId}:`, error);
|
||||
// Cleanup all clients
|
||||
const currentStreamInfo = activeStreams.get(sessionId);
|
||||
if (currentStreamInfo) {
|
||||
currentStreamInfo.clients.forEach(client => {
|
||||
try { client.end(); } catch (e) {}
|
||||
});
|
||||
}
|
||||
activeStreams.delete(sessionId);
|
||||
});
|
||||
|
||||
tailProcess.on('exit', (code) => {
|
||||
console.log(`Shared tail process exited for session ${sessionId} with code ${code}`);
|
||||
// Cleanup all clients
|
||||
const currentStreamInfo = activeStreams.get(sessionId);
|
||||
if (currentStreamInfo) {
|
||||
currentStreamInfo.clients.forEach(client => {
|
||||
try { client.end(); } catch (e) {}
|
||||
});
|
||||
}
|
||||
activeStreams.delete(sessionId);
|
||||
});
|
||||
}
|
||||
|
||||
// Add this client to the shared stream
|
||||
streamInfo.clients.add(res);
|
||||
console.log(`Added client to session ${sessionId}, total clients: ${streamInfo.clients.size}`);
|
||||
|
||||
// Cleanup when client disconnects
|
||||
const cleanup = () => {
|
||||
if (!streamCleanedUp) {
|
||||
streamCleanedUp = true;
|
||||
console.log(`Cleaning up tail process for session ${sessionId}`);
|
||||
tailProcess.kill('SIGTERM');
|
||||
if (streamInfo && streamInfo.clients.has(res)) {
|
||||
streamInfo.clients.delete(res);
|
||||
console.log(`Removed client from session ${sessionId}, remaining clients: ${streamInfo.clients.size}`);
|
||||
|
||||
// If no more clients, cleanup the tail process
|
||||
if (streamInfo.clients.size === 0) {
|
||||
console.log(`No more clients for session ${sessionId}, cleaning up tail process`);
|
||||
try {
|
||||
streamInfo.tailProcess.kill('SIGTERM');
|
||||
} catch (e) {}
|
||||
activeStreams.delete(sessionId);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Get the session info once to get the PID
|
||||
let sessionPid: number | null = null;
|
||||
try {
|
||||
const output = await executeTtyFwd(['--control-path', TTY_FWD_CONTROL_DIR, '--list-sessions']);
|
||||
const sessions: TtyFwdListResponse = JSON.parse(output || '{}');
|
||||
if (sessions[sessionId]) {
|
||||
sessionPid = sessions[sessionId].pid;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error getting session PID:', error);
|
||||
}
|
||||
|
||||
// Set a timeout to check if process is still alive
|
||||
const sessionCheckInterval = setInterval(() => {
|
||||
if (sessionPid) {
|
||||
try {
|
||||
// Signal 0 just checks if process exists without actually sending a signal
|
||||
process.kill(sessionPid, 0);
|
||||
} catch (error) {
|
||||
console.log(`Session ${sessionId} process ${sessionPid} has died, terminating stream`);
|
||||
clearInterval(sessionCheckInterval);
|
||||
cleanup();
|
||||
res.end();
|
||||
}
|
||||
} else {
|
||||
// If we don't have a PID, fall back to checking session status
|
||||
console.log(`No PID found for session ${sessionId}, terminating stream`);
|
||||
clearInterval(sessionCheckInterval);
|
||||
cleanup();
|
||||
res.end();
|
||||
}
|
||||
}, 2000); // Check every 2 seconds
|
||||
|
||||
tailProcess.stdout.on('data', (chunk) => {
|
||||
if (streamCleanedUp) return;
|
||||
|
||||
buffer += chunk.toString();
|
||||
const lines = buffer.split('\n');
|
||||
buffer = lines.pop() || '';
|
||||
|
||||
for (const line of lines) {
|
||||
if (line.trim()) {
|
||||
try {
|
||||
const parsed = JSON.parse(line);
|
||||
if (parsed.version && parsed.width && parsed.height) {
|
||||
return; // Skip duplicate headers
|
||||
}
|
||||
if (Array.isArray(parsed) && parsed.length >= 3) {
|
||||
const currentTime = Date.now() / 1000;
|
||||
const realTimeEvent = [currentTime - startTime, parsed[1], parsed[2]];
|
||||
res.write(`data: ${JSON.stringify(realTimeEvent)}\n\n`);
|
||||
}
|
||||
} catch (e) {
|
||||
// Handle non-JSON as raw output
|
||||
const currentTime = Date.now() / 1000;
|
||||
const castEvent = [currentTime - startTime, "o", line];
|
||||
res.write(`data: ${JSON.stringify(castEvent)}\n\n`);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
tailProcess.on('error', (error) => {
|
||||
console.error(`Tail process error for session ${sessionId}:`, error);
|
||||
clearInterval(sessionCheckInterval);
|
||||
cleanup();
|
||||
});
|
||||
|
||||
tailProcess.on('exit', (code) => {
|
||||
console.log(`Tail process exited for session ${sessionId} with code ${code}`);
|
||||
clearInterval(sessionCheckInterval);
|
||||
cleanup();
|
||||
});
|
||||
|
||||
// Cleanup on disconnect
|
||||
req.on('close', () => {
|
||||
clearInterval(sessionCheckInterval);
|
||||
cleanup();
|
||||
});
|
||||
|
||||
req.on('aborted', () => {
|
||||
clearInterval(sessionCheckInterval);
|
||||
cleanup();
|
||||
});
|
||||
req.on('close', cleanup);
|
||||
req.on('aborted', cleanup);
|
||||
});
|
||||
|
||||
// Get session snapshot (asciinema cast with adjusted timestamps for immediate playback)
|
||||
|
|
@ -616,6 +636,26 @@ app.post('/api/sessions/:sessionId/input', async (req, res) => {
|
|||
}
|
||||
});
|
||||
|
||||
// === CAST FILE SERVING ===
|
||||
|
||||
// Serve test cast file
|
||||
app.get('/api/test-cast', (req, res) => {
|
||||
const testCastPath = path.join(__dirname, '..', 'public', 'stream-out');
|
||||
|
||||
try {
|
||||
if (fs.existsSync(testCastPath)) {
|
||||
res.setHeader('Content-Type', 'text/plain');
|
||||
const content = fs.readFileSync(testCastPath, 'utf8');
|
||||
res.send(content);
|
||||
} else {
|
||||
res.status(404).json({ error: 'Test cast file not found' });
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error serving test cast file:', error);
|
||||
res.status(500).json({ error: 'Failed to serve test cast file' });
|
||||
}
|
||||
});
|
||||
|
||||
// === FILE SYSTEM ===
|
||||
|
||||
// Directory listing for file browser
|
||||
|
|
|
|||
Loading…
Reference in a new issue