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.

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
+    // The server already sends only the visible terminal area (terminal.rows worth of lines)
-    let startIndex = 0;
+    // We should render all cells sent by the server without additional truncation
-    if (this.buffer.cells.length > this.visibleRows) {
+    for (let i = 0; i < this.buffer.cells.length; i++) {
-      // 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++) {
       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);
 

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));
+  background-color: #23d18b !important; /* Green cursor */
-  color: rgb(10 10 10); /* Always dark text on 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;
+    opacity: 0.3;
-    background-color: rgb(var(--color-primary));
   }
 }
 

web/src/client/utils/terminal-renderer.ts

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