sjs/vibetunnel
1
0
Fork 0
mirror of https://github.com/samsonjs/vibetunnel.git synced 2026-04-18 13:25:52 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Replace custom renderer with XTerm.js and consolidate tests

Browse source 
- Remove old custom ANSI renderer (src/client/renderer.ts)
- Rename XTermRenderer to Renderer and move to renderer.ts
- Update renderer-entry.ts to export single Renderer class
- Rename and update all test files:
  - test-xterm-renderer.html → test-renderer.html
  - simple-xterm-test.html → simple-test.html
  - debug-xterm.html → debug-renderer.html
- Remove obsolete custom renderer tests
- Update tests/index.html with new test descriptions
- All tests now use single XTerm.js-based Renderer

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Mario Zechner 2025-06-16 09:44:24 +02:00
parent e4b4a37c86
commit c7c8a605c2
9 changed files with 413 additions and 1619 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
web/public/tests/debug-xterm.html → web/public/tests/debug-renderer.html
View file

@ -56,50 +56,50 @@
<div id="log"></div>
<script type="module">
import { XTermRenderer } from '../bundle/renderer.js';
import { Renderer } from '../bundle/renderer.js';
function log(message) {
const logDiv = document.getElementById('log');
logDiv.textContent += new Date().toLocaleTimeString() + ': ' + message + '\n';
}
// Test XTerm renderer from bundle
log('Testing XTerm Renderer from bundle...');
log('XTermRenderer available: ' + (typeof XTermRenderer !== 'undefined'));
// Test renderer from bundle
log('Testing Renderer from bundle...');
log('Renderer available: ' + (typeof Renderer !== 'undefined'));
window.testXTerm = function() {
try {
log('Testing XTerm Renderer...');
log('Testing Renderer...');
const container = document.getElementById('terminal');
container.innerHTML = '';
const renderer = new XTermRenderer(container, 80, 24);
const renderer = new Renderer(container, 80, 24);
renderer.processOutput('Hello from bundled XTerm.js!\r\n');
renderer.processOutput('\x1b[31mRed text\x1b[0m\r\n');
renderer.processOutput('\x1b[32mGreen text\x1b[0m\r\n');
renderer.processOutput('\x1b[1;33mBold yellow text\x1b[0m\r\n');
log('XTerm Renderer test successful!');
log('Renderer test successful!');
} catch (error) {
log('XTerm Renderer test failed: ' + error.message);
log('Renderer test failed: ' + error.message);
}
};
window.testRenderer = function() {
try {
log('Testing XTerm Renderer advanced features...');
log('Testing Renderer advanced features...');
const container = document.getElementById('terminal');
container.innerHTML = '';
const renderer = new XTermRenderer(container, 80, 24);
const renderer = new Renderer(container, 80, 24);
renderer.processOutput('Hello from XTerm Renderer!\r\n');
renderer.processOutput('\x1b[32mGreen text from renderer\x1b[0m\r\n');
renderer.processOutput('\x1b[1;34mBold blue text\x1b[0m\r\n');
renderer.processOutput('\x1b[43mYellow background\x1b[0m\r\n');
log('XTerm Renderer advanced test successful!');
log('Renderer advanced test successful!');
} catch (error) {
log('XTerm Renderer advanced test failed: ' + error.message);
log('Renderer advanced test failed: ' + error.message);
}
};

28
web/public/tests/index.html
View file

@ -79,43 +79,27 @@
<div class="test-grid">
<div class="test-card">
<div class="test-title">Custom Renderer Test</div>
<div class="test-title">Terminal Renderer Test</div>
<div class="test-description">
Test the original custom ANSI renderer implementation with various escape sequences and color codes.
Comprehensive test of the XTerm.js-based renderer with cast file playback, streaming, and manual input testing.
</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.
Basic dual-terminal test comparing performance and rendering with simple ANSI sequences.
</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-title">Debug Renderer Test</div>
<div class="test-description">
Debug version of XTerm renderer with additional logging and development features.
Debug version with detailed logging for troubleshooting import issues and basic functionality.
</div>
<a href="debug-xterm.html" class="test-link">Run Test</a>
<a href="debug-renderer.html" class="test-link">Run Test</a>
</div>
<div class="test-card">

195
web/public/tests/simple-test.html
View file

@ -3,7 +3,11 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Terminal Renderer Test</title>
<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;
@ -18,10 +22,8 @@
background: #000;
height: 400px;
width: 800px;
overflow-y: scroll;
padding: 10px;
font-size: 14px;
line-height: 1.2;
overflow: hidden;
margin-bottom: 20px;
}
.controls {
@ -41,93 +43,170 @@
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 Terminal Renderer Debug</h1>
<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="clearTerminal()">Clear</button>
<button onclick="debugOutput()">Debug Output</button>
<button onclick="testPerformance()">Test Performance</button>
<button onclick="clearTerminals()">Clear All</button>
</div>
<div class="terminal" id="terminal"></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>Debug Output:</h3>
<pre id="debugText"></pre>
<h3>Performance Comparison:</h3>
<pre id="debugText">Run performance test to see timing comparison</pre>
</div>
<script type="module">
import { TerminalRenderer } from './renderer.js';
import { Renderer } from '../bundle/renderer.js';
const terminal = new TerminalRenderer(document.getElementById('terminal'), 80, 20);
const terminal1 = new Renderer(document.getElementById('custom-terminal'), 80, 20);
const terminal2 = new Renderer(document.getElementById('xterm-terminal'), 80, 20);
function runOnBoth(callback) {
callback(terminal1, 'Terminal 1');
callback(terminal2, 'Terminal 2');
}
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);
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...');
updateDebug();
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...');
terminal.clear();
for (let i = 1; i <= 30; i++) {
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 terminal 1
const terminal1Start = performance.now();
terminal1.clear();
for (let i = 1; i <= 1000; 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);
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`;
terminal1.processOutput(line);
}
const terminal1End = performance.now();
results.terminal1 = terminal1End - terminal1Start;
updateDebug();
};
window.clearTerminal = function() {
terminal.clear();
updateDebug();
};
window.debugOutput = function() {
updateDebug();
};
function updateDebug() {
const terminalEl = document.getElementById('terminal');
// Test terminal 2
const terminal2Start = performance.now();
terminal2.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`;
terminal2.processOutput(line);
}
const terminal2End = performance.now();
results.terminal2 = terminal2End - terminal2Start;
// Display results
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
const comparison = {
'Terminal 1': `${results.terminal1.toFixed(2)}ms`,
'Terminal 2': `${results.terminal2.toFixed(2)}ms`,
'Performance Ratio': `${(results.terminal1 / results.terminal2).toFixed(2)}x`,
'Winner': results.terminal2 < results.terminal1 ? 'Terminal 2' : 'Terminal 1',
'Lines Processed': '1000 lines each',
'Test Date': new Date().toLocaleString()
};
debugEl.textContent = JSON.stringify(info, null, 2);
}
debugEl.textContent = JSON.stringify(comparison, null, 2);
};
window.clearTerminals = function() {
terminal1.clear();
terminal2.clear();
const debugEl = document.getElementById('debugText');
debugEl.textContent = 'Terminals cleared. Run tests to see comparison.';
};
// Initial test
setTimeout(() => {
console.log('Running initial test...');
console.log('Running initial comparison...');
testBasic();
}, 100);
</script>

214
web/public/tests/simple-xterm-test.html
View file

@ -1,214 +0,0 @@
<!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>
<script type="module">
import { Renderer, XTermRenderer } from '../bundle/renderer.js';
const customTerminal = new Renderer(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>

193
web/public/tests/test-renderer.html
View file

@ -3,7 +3,11 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Terminal Renderer Test</title>
<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;
@ -54,44 +58,11 @@
background: #000;
height: 300px;
width: 100%;
overflow-y: scroll;
overflow-x: auto;
overflow: hidden;
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;
@ -125,11 +96,28 @@
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>Terminal Renderer Test</h1>
<h1>XTerm Terminal Renderer Test</h1>
<div class="section">
<h2>1. Test with Pre-recorded Cast File</h2>
@ -167,28 +155,47 @@
</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>Usage Instructions:</h2>
<h2>XTerm.js Features:</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>
<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>Features Supported:</h2>
<h2>Usage Instructions:</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>
<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>
@ -200,6 +207,8 @@
const terminal1 = new Renderer(document.getElementById('terminal1'));
const terminal2 = new Renderer(document.getElementById('terminal2'));
const terminal3 = new Renderer(document.getElementById('terminal3'));
const terminal4 = new Renderer(document.getElementById('terminal4'));
const terminal5 = new Renderer(document.getElementById('terminal5'));
let currentStream = null;
@ -246,23 +255,25 @@
showStatus(1, 'Loading sample ANSI data...');
terminal1.clear();
// Sample ANSI sequences to demonstrate features
// 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;33mTerminal Renderer Demo\\u001b[0m \\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[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'
'[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(''));
@ -343,35 +354,63 @@
showStatus(1, 'Generating scrollback test...');
terminal1.clear();
// Generate lots of output to test scrollback - enough to definitely overflow
// Generate lots of output to test scrollback
for (let i = 1; i <= 100; i++) {
const colors = [31, 32, 33, 34, 35, 36]; // red, green, yellow, blue, magenta, cyan
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}: This is test content with \x1b[4munderline\x1b[0m and \x1b[1mbold\x1b[0m text to test scrollback!\n`;
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);
}
// Add a final message
terminal1.processOutput('\x1b[1;37m=== End of scrollback test ===\x1b[0m\n');
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! Scroll up to see the full history.');
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);
}
};
// 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'
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'
];
testSequences.forEach(seq => terminal3.processOutput(seq));
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>

419
web/public/tests/test-xterm-renderer.html
View file

@ -1,419 +0,0 @@
<!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>
<script type="module">
import { XTermRenderer, Renderer } from '../bundle/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 Renderer(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>

8
web/src/client/renderer-entry.ts
View file

@ -1,6 +1,2 @@
// Entry point for renderer bundle - exports both renderers for tests
export { TerminalRenderer } from './renderer.js';
export { XTermRenderer } from './xterm-renderer.js';
// Also export with shorter alias for convenience
export { TerminalRenderer as Renderer } from './renderer.js';
// Entry point for renderer bundle - exports XTerm-based renderer
export { Renderer } from './renderer.js';

693
web/src/client/renderer.ts
View file

@ -1,5 +1,9 @@
// Terminal renderer for asciinema cast format with DOM rendering
// Supports complete cast files and streaming events
// Terminal renderer for asciinema cast format using XTerm.js
// Professional-grade terminal emulation with full VT compatibility
import { Terminal } from '@xterm/xterm';
import { FitAddon } from '@xterm/addon-fit';
import { WebLinksAddon } from '@xterm/addon-web-links';
interface CastHeader {
version: number;
@ -15,553 +19,92 @@ interface CastEvent {
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 {
export class Renderer {
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'
];
private terminal: Terminal;
private fitAddon: FitAddon;
private webLinksAddon: WebLinksAddon;
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
};
// 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
});
this.primaryBuffer = this.createBuffer(width, height);
this.alternateBuffer = this.createBuffer(width, height);
this.scrollbackBuffer = [];
// Add addons
this.fitAddon = new FitAddon();
this.webLinksAddon = new WebLinksAddon();
this.terminal.loadAddon(this.fitAddon);
this.terminal.loadAddon(this.webLinksAddon);
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';
// Clear container and add CSS
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('');
this.container.style.padding = '10px';
this.container.style.backgroundColor = '#000000';
this.container.style.overflow = 'hidden';
// 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;
}
}
// Create terminal wrapper
const terminalWrapper = document.createElement('div');
terminalWrapper.style.width = '100%';
terminalWrapper.style.height = '100%';
this.container.appendChild(terminalWrapper);
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 === ' ' ? '&nbsp;' : this.escapeHtml(char);
}
// Close any open span
if (spanOpen) {
line += '</span>';
}
return line || '&nbsp;'; // 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];
// Open terminal in the wrapper
this.terminal.open(terminalWrapper);
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();
// Fit terminal to container
this.fitAddon.fit();
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;
}
// Handle container resize
const resizeObserver = new ResizeObserver(() => {
this.fitAddon.fit();
});
resizeObserver.observe(this.container);
}
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
// Public API methods - maintain compatibility with custom renderer
async loadCastFile(url: string): Promise<void> {
const response = await fetch(url);
@ -573,6 +116,9 @@ export class TerminalRenderer {
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;
@ -599,48 +145,38 @@ export class TerminalRenderer {
console.warn('Failed to parse cast line:', line);
}
}
this.renderBuffer();
}
processOutput(data: string): void {
this.parseAnsiSequence(data);
this.renderBuffer();
// XTerm handles all ANSI escape sequences automatically
this.terminal.write(data);
}
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;
this.terminal.resize(width, height);
// Fit addon will handle the visual resize
setTimeout(() => {
this.fitAddon.fit();
}, 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();
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);
@ -668,4 +204,55 @@ export class TerminalRenderer {
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
});
}
}
}

258
web/src/client/xterm-renderer.ts
View file

@ -1,258 +0,0 @@
// 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
});
}
}
}