ken/muxplex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: match preview styling to xterm.js — palette, background, font, line-height

Browse Source 
ANSI_COLORS: replaced with xterm.js default GTK/Tango palette.
Background: #000000 on tile-body, sidebar-item-body, preview-popover.
Font: 'SF Mono', 'Fira Code', Consolas, monospace (same as terminal).
Line-height: 1.0 across all preview surfaces (xterm.js default).
Gradient overlays: fade to #000 instead of theme bg.
Result: previews are visually indistinguishable from the terminal.
This commit is contained in:
Brian Krabach
2026-03-29 19:19:05 -07:00
parent 85298abdcc
commit 583de6ec2d
4 changed files with 122 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
muxplex/frontend/app.js
+2 -2
View File
@@ -269,8 +269,8 @@ function escapeHtml(str) {
// Converts terminal color sequences to <span> tags with inline styles.
// ---------------------------------------------------------------------------
var ANSI_COLORS = [
'#000','#c23621','#25bc26','#adad27','#492ee1','#d338d3','#33bbc8','#cbcccd',
'#818383','#fc391f','#31e722','#eaec23','#5833ff','#f935f8','#14f0f0','#e9ebeb'
'#2e3436','#cc0000','#4e9a06','#c4a000','#3465a4','#75507b','#06989a','#d3d7cf',
'#555753','#ef2929','#8ae234','#fce94f','#729fcf','#ad7fa8','#34e2e2','#eeeeec'
];
function ansiToHtml(raw) {
muxplex/frontend/style.css
+13 -10
View File
@@ -221,6 +221,7 @@ body {
flex: 1;
overflow: hidden;
position: relative;
background: #000000;
}
.tile-body pre {
@@ -229,8 +230,9 @@ body {
left: 0;
right: 0;
padding: 6px 8px;
font-family: var(--font-mono);
font-family: 'SF Mono', 'Fira Code', Consolas, monospace;
font-size: 11px;
line-height: 1.0;
color: #c9d1d9; /* match xterm.js foreground */
white-space: pre;
overflow: hidden;
@@ -257,7 +259,7 @@ body {
left: 0;
right: 0;
height: 40px;
background: linear-gradient(to bottom, transparent, var(--bg-tile));
background: linear-gradient(to bottom, transparent, #000000);
pointer-events: none;
z-index: 1;
}
@@ -518,6 +520,7 @@ body {
flex: 1;
position: relative;
overflow: hidden;
background: #000000;
}
.sidebar-item-body::before {
@@ -527,13 +530,13 @@ body {
left: 0;
right: 0;
height: 32px;
background: linear-gradient(to bottom, transparent, var(--bg-secondary));
background: linear-gradient(to bottom, transparent, #000000);
pointer-events: none;
z-index: 1;
}
.sidebar-item--active .sidebar-item-body::before {
background: linear-gradient(to bottom, transparent, var(--bg-surface));
background: linear-gradient(to bottom, transparent, #000000);
}
.sidebar-item-body pre {
@@ -541,9 +544,9 @@ body {
bottom: 0;
left: 0;
right: 0;
font-family: var(--font-mono);
font-family: 'SF Mono', 'Fira Code', Consolas, monospace;
font-size: 10px;
line-height: 1.4;
line-height: 1.0;
color: #c9d1d9; /* match xterm.js foreground */
white-space: pre;
padding: 0 8px 6px;
@@ -966,7 +969,7 @@ body {
.preview-popover {
position: fixed;
z-index: 500;
background: var(--bg-secondary);
background: #000000;
border: 2px solid var(--accent);
border-radius: 8px;
padding: 16px 20px;
@@ -982,9 +985,9 @@ body {
.preview-popover pre {
margin: 0;
font-family: var(--font-mono);
font-size: 12px;
line-height: 1.5;
font-family: 'SF Mono', 'Fira Code', Consolas, monospace;
font-size: 14px;
line-height: 1.0;
color: #c9d1d9; /* match xterm.js foreground exactly */
white-space: pre-wrap; /* WRAP text instead of horizontal overflow */
word-break: break-all; /* break long lines at viewport edge */
muxplex/frontend/tests/test_app.mjs
+13
View File
@@ -2114,4 +2114,17 @@ test('ansiToHtml converts SGR codes to styled spans', () => {
assert.ok(source.includes('ansiToHtml(session.snapshot)'), 'overlay must use ansiToHtml');
});
test('ANSI_COLORS uses xterm.js default GTK/Tango palette', () => {
// xterm.js default palette (GTK/Tango-derived) — must match exactly
// so previews render colors identically to the interactive terminal
assert.strictEqual(app.ansi256Color(0), '#2e3436', 'color 0 must be xterm.js default: #2e3436');
assert.strictEqual(app.ansi256Color(1), '#cc0000', 'color 1 must be xterm.js default: #cc0000');
assert.strictEqual(app.ansi256Color(2), '#4e9a06', 'color 2 must be xterm.js default: #4e9a06');
assert.strictEqual(app.ansi256Color(3), '#c4a000', 'color 3 must be xterm.js default: #c4a000');
assert.strictEqual(app.ansi256Color(7), '#d3d7cf', 'color 7 must be xterm.js default: #d3d7cf');
assert.strictEqual(app.ansi256Color(8), '#555753', 'color 8 must be xterm.js default: #555753');
assert.strictEqual(app.ansi256Color(10), '#8ae234', 'color 10 must be xterm.js default: #8ae234');
assert.strictEqual(app.ansi256Color(14), '#34e2e2', 'color 14 must be xterm.js default: #34e2e2');
});