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

Fix blinking cursor in binary terminal mode

Browse source 
- Remove inline background-color style that was overriding CSS animation
- Fix cursor position calculation by removing client-side viewport truncation
- Add session status check to hide cursor when session is exited
- Update cursor CSS with visible green color and proper blinking animation

The server already sends only the visible terminal area, so additional
client-side truncation was causing incorrect cursor position mapping.
This commit is contained in:
Helmut Januschka 2025-08-01 19:44:42 +02:00 committed by Peter Steinberger
parent cded6b2bf9
commit 2c5bad2ee1
3 changed files with 12 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
web/src/client/components/vibe-terminal-buffer.ts
View file

@ -33,6 +33,7 @@ export class VibeTerminalBuffer extends LitElement {
@property({ type: String }) sessionId = '';
@property({ type: String }) theme: TerminalThemeId = 'auto';
@property({ type: String }) sessionStatus = 'running'; // Track session status for cursor control
@state() private buffer: BufferSnapshot | null = null;
@state() private error: string | null = null;
@ -316,19 +317,15 @@ export class VibeTerminalBuffer extends LitElement {
const lineHeight = this.displayedFontSize * 1.2;
let html = '';
// Step 3: Show bottom N lines that fit
let startIndex = 0;
if (this.buffer.cells.length > this.visibleRows) {
// More content than visible rows - show bottom portion
startIndex = this.buffer.cells.length - this.visibleRows;
}
// Render only the visible rows
for (let i = startIndex; i < this.buffer.cells.length; i++) {
// The server already sends only the visible terminal area (terminal.rows worth of lines)
// We should render all cells sent by the server without additional truncation
for (let i = 0; i < this.buffer.cells.length; i++) {
const row = this.buffer.cells[i];
// Check if cursor is on this line
const isCursorLine = i === this.buffer.cursorY;
// The server sends cursorY relative to the cells array (0-based)
// Only show cursor if session is running
const isCursorLine = i === this.buffer.cursorY && this.sessionStatus === 'running';
const cursorCol = isCursorLine ? this.buffer.cursorX : -1;
const lineContent = TerminalRenderer.renderLineFromCells(row, cursorCol);

8
web/src/client/styles.css
View file

@ -1321,20 +1321,18 @@ body.initial-session-load .session-flex-responsive > session-card:nth-child(n +
/* Enhanced cursor styling */
.terminal-char.cursor {
animation: cursor-blink 1s infinite;
background-color: rgb(var(--color-primary));
color: rgb(10 10 10); /* Always dark text on cursor */
background-color: #23d18b !important; /* Green cursor */
color: #000000 !important; /* Black text on cursor */
}
@keyframes cursor-blink {
0%,
50% {
opacity: 1;
background-color: rgb(var(--color-primary));
}
51%,
100% {
opacity: 0.4;
background-color: rgb(var(--color-primary));
opacity: 0.3;
}
}

10
web/src/client/utils/terminal-renderer.ts
View file

@ -161,10 +161,7 @@ function getCellStyling(cell: IBufferCell, isCursor: boolean): { classes: string
}
}
// Override background for cursor
if (isCursor) {
style += `background-color: #23d18b;`;
}
// Don't set background color for cursor - let CSS animation handle it
// Get text attributes
if (cell.isBold()) classes += ' bold';
@ -234,10 +231,7 @@ function getCellStylingFromBuffer(
}
}
// Override background for cursor
if (isCursor) {
style += `background-color: #23d18b;`;
}
// Don't set background color for cursor - let CSS animation handle it
// Get text attributes from bit flags
const attrs = cell.attributes || 0;