The Presentation
Layer
The Vextor frontend is a strictly "dumb" UI. By completely stripping computational logic out of the React rendering tree, the editor guarantees a flawless 60FPS experience, regardless of repository size.
01. The 60FPS Mandate
In traditional Electron apps, heavy operations (like searching across files or parsing syntax) are often run on the main Node.js process. When the user types quickly, the UI stutters because the V8 engine is busy allocating memory.
Vextor flips this paradigm. The React frontend is exclusively responsible for painting pixels. It communicates with the Rust AST Parser and Go PTY host via asynchronous WebSockets and memory-mapped buffers. It never calculates; it only displays.
React 18 Concurrent Features
Vextor utilizes React's `useTransition` and `Suspense` heavily. UI updates that require large tree reconciliations (like opening massive JSON files) are deprioritized to keep typing latency at zero.
Electron as a Thin Client
Context Isolation is strictly enforced. The renderer process has absolutely no access to the Node.js `fs` or `child_process` modules, completely neutralizing local vulnerability injections.
02. High-Performance Terminal Rendering
Vextor utilizes a customized fork of xterm.js. Rather than using the standard DOM renderer (which creates a new HTML span element for every character), Vextor enforces the WebGL Renderer.
import { Terminal } from '@xterm/xterm';
import { WebglAddon } from '@xterm/addon-webgl';
// Initialize dumb terminal display
const term = new Terminal({
fontFamily: 'JetBrains Mono',
allowProposedApi: true
});
// Attach WebGL hardware acceleration
const webglAddon = new WebglAddon();
term.loadAddon(webglAddon);
// Connect directly to the Go Concurrent PTY Host via WebSocket
const ws = new WebSocket('ws://localhost:8080/pty/stream');
ws.onmessage = (event) => {
// Directly pipe binary stream to WebGL canvas. Zero JS parsing.
term.write(new Uint8Array(event.data));
};When a compiler outputs 50,000 lines of error logs instantly, the Go backend pushes the binary stream directly into the GPU via WebGL. The React virtual DOM doesn't even know it happened.
03. The Magic AI Bar Component
The UI for the Natural Language Terminal sits directly above the `xterm.js` canvas. It acts as the bridge between human intent and shell execution.
When the user presses Enter, the React component does not call an API directly. Instead, it dispatches an IPC message to the Electron main process, which securely ferries the intent to the local llama.cpp instance for translation.