Buffer Injection Architecture
The frontend uses a special technique to display terminal content extremely fast. Instead of processing text commands one by one, Monolex writes directly to the display buffer.Display Buffer Structure
┌─────────────────────────────────────────────────────────────────────────┐
│ DISPLAY BUFFER STRUCTURE │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ Terminal Window │
│ │ │
│ └──▶ Display Buffer │
│ │ │
│ └──▶ Line Storage (circular) │
│ │ │
│ └──▶ Each Line │
│ │ │
│ ├──▶ Character data │
│ │ (what to show) │
│ │ │
│ ├──▶ Text color │
│ │ (foreground) │
│ │ │
│ └──▶ Background color │
│ │
└─────────────────────────────────────────────────────────────────────────┘
How Each Character is Stored
Each character on screen uses 12 bytes of memory:┌─────────────────────────────────────────────────────────────────────────┐
│ CHARACTER STORAGE (12 bytes) │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ Part 1: Content (4 bytes) │
│ ───────────────────────── │
│ • Which character to display (Unicode) │
│ • Character width (narrow or wide) │
│ │
│ Part 2: Text Color (4 bytes) │
│ ──────────────────────────── │
│ • Color value │
│ • Bold, underline, inverse flags │
│ │
│ Part 3: Background Color (4 bytes) │
│ ────────────────────────────────── │
│ • Color value │
│ • Italic, dim flags │
│ │
└─────────────────────────────────────────────────────────────────────────┘
Fast Scrolling with Circular Storage
┌─────────────────────────────────────────────────────────────────────────┐
│ CIRCULAR LINE STORAGE │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ 1000 lines of history + 40 visible lines = 1040 total │
│ │
│ Physical storage: │
│ [line 0][line 1][line 2]...[line 1039] │
│ ▲ ▲ │
│ │ │ │
│ start pointer wraps around │
│ │
│ Scrolling = Just move the start pointer │
│ No data needs to be copied or moved! │
│ │
│ Result: Scrolling is instant, no matter how much history │
│ │
└─────────────────────────────────────────────────────────────────────────┘
Traditional vs Direct Injection
┌─────────────────────────────────────────────────────────────────────────┐
│ TRADITIONAL METHOD (Slow) │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ Receive text data │
│ │ │
│ ▼ │
│ Parse escape sequences (CSI, OSC, etc.) │
│ │ │
│ ▼ │
│ Update buffer cells one by one │
│ │ │
│ ▼ │
│ Render to screen │
│ │
│ Speed: ~100 bytes per millisecond │
│ │
└─────────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────────┐
│ DIRECT INJECTION (Fast) │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ Receive pre-processed data from backend │
│ │ │
│ ▼ │
│ Write directly to buffer memory │
│ (skip all parsing!) │
│ │ │
│ ▼ │
│ Render to screen │
│ │
│ Speed: ~2,200 cells per millisecond (22x faster!) │
│ │
└─────────────────────────────────────────────────────────────────────────┘
Compact Data Format
┌─────────────────────────────────────────────────────────────────────────┐
│ DATA FORMAT COMPARISON │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ JSON Format (Traditional): │
│ ────────────────────────── │
│ {"cell":{"char":"A","fg":"#ff0000","bg":"#000000"}} │
│ Size for full screen: ~194 KB │
│ │
│ Binary Format (Monolex): │
│ ──────────────────────── │
│ ┌────────────────────┐ │
│ │ Header (64 bytes) │ │
│ ├────────────────────┤ │
│ │ Line info │ │
│ ├────────────────────┤ │
│ │ Cell data │ ◀── Compact, no wasted space │
│ ├────────────────────┤ │
│ │ Special chars │ │
│ └────────────────────┘ │
│ Size for full screen: ~57 KB (3.4x smaller!) │
│ │
└─────────────────────────────────────────────────────────────────────────┘
Smart Update Types
┌─────────────────────────────────────────────────────────────────────────┐
│ UPDATE TYPES │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ FULL UPDATE │
│ ─────────── │
│ When: Scroll position changed significantly │
│ What: Redraw entire screen │
│ Cost: ~2.5ms │
│ │
│ PARTIAL UPDATE │
│ ────────────── │
│ When: Only some lines changed (most common) │
│ What: Redraw only changed lines │
│ Cost: ~0.3ms (8x faster than full!) │
│ │
│ CURSOR ONLY │
│ ─────────── │
│ When: Only cursor moved │
│ What: Update cursor position only │
│ Cost: ~0.005ms (nearly instant) │
│ │
│ SKIP │
│ ──── │
│ When: Nothing meaningful changed │
│ What: Do nothing │
│ Cost: 0ms │
│ │
└─────────────────────────────────────────────────────────────────────────┘
Overall Performance Gains
┌─────────────────────────────────────────────────────────────────────────┐
│ COMBINED IMPROVEMENTS │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ Optimization Speed Improvement │
│ ════════════ ═════════════════ │
│ │
│ Binary vs JSON 3.4x smaller data │
│ Direct injection 22x faster display │
│ Partial updates 8x faster refresh │
│ Cursor-only mode Nearly instant │
│ Adaptive timing 50% fewer updates when needed │
│ │
│ ───────────────────────────────────────────────────────────────── │
│ │
│ COMBINED RESULT 10x+ overall improvement │
│ │
└─────────────────────────────────────────────────────────────────────────┘
Summary
Direct Injection
22x faster than traditional parsing by writing directly to display memory.
Compact Format
3.4x smaller than JSON format, transfers faster.
Instant Scrolling
Circular storage means scrolling is always instant.
Smart Updates
Only updates what changed, saving up to 8x processing time.
Related
- Display Timing - Adaptive refresh rate
- Dual-Loop Architecture - Data vs Render loops
- Control Layers - Hz and ACK controls