From 2c5bad2ee14fc4db7957c481ec06fa2ae2ff0f08 Mon Sep 17 00:00:00 2001
From: Helmut Januschka <helmut@januschka.com>
Date: Fri, 1 Aug 2025 19:44:42 +0200
Subject: [PATCH] Fix blinking cursor in binary terminal mode

- 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.
---
 .../client/components/vibe-terminal-buffer.ts   | 17 +++++++----------
 web/src/client/styles.css                       |  8 +++-----
 web/src/client/utils/terminal-renderer.ts       | 10 ++--------
 3 files changed, 12 insertions(+), 23 deletions(-)

diff --git a/web/src/client/components/vibe-terminal-buffer.ts b/web/src/client/components/vibe-terminal-buffer.ts
index 4d5e341d..96bc8b78 100644
--- a/web/src/client/components/vibe-terminal-buffer.ts
+++ b/web/src/client/components/vibe-terminal-buffer.ts
@@ -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);
 
diff --git a/web/src/client/styles.css b/web/src/client/styles.css
index ca4c7168..05c7d5db 100644
--- a/web/src/client/styles.css
+++ b/web/src/client/styles.css
@@ -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;
   }
 }
 
diff --git a/web/src/client/utils/terminal-renderer.ts b/web/src/client/utils/terminal-renderer.ts
index a174c0b9..ef5eca35 100644
--- a/web/src/client/utils/terminal-renderer.ts
+++ b/web/src/client/utils/terminal-renderer.ts
@@ -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;