VSCode Integration
Relevant source files
The following files were used as context for generating this wiki page:
Arbor's VSCode integration provides a bridge between the local editor and the Arbor Logic Forest ecosystem. It enables AI-aware code navigation, real-time synchronization with the Arbor Visualizer, and interactive "Spotlight" highlights triggered by AI agents or the Arbor server.
The integration consists of a TypeScript-based extension that communicates via WebSockets with the Arbor Sync Server. This allows developers to visualize the "Logic Forest" directly from their code and allows AI tools to guide the developer's focus within the IDE during analysis.
Sources: extensions/arbor-vscode/package.json, extensions/arbor-vscode/README.md, README.md
Architecture and Connection
The extension acts as a client that connects to the Arbor server (typically running on ws://127.0.0.1:8080). Upon activation, it initializes a status bar item and attempts an automatic connection.
Connection Lifecycle
The connection status is reflected in the VSCode Status Bar. The extension handles lifecycle events such as open, message, close, and error to update the UI and manage global state.
Key Features
Spotlight Highlight System
The Spotlight system provides a visual cue when an AI agent (via MCP) or the Arbor server focuses on a specific code node. The extension applies a "golden glow" effect to the relevant line in the editor.
- Visual Style: 15% opacity gold background, 1px solid gold border, and a gold indicator in the overview ruler.
- Behavior: The editor automatically scrolls to and highlights the target line for 3 seconds before fading out.
Sources: extensions/arbor-vscode/src/extension.ts:25-32, extensions/arbor-vscode/src/extension.ts:98-124, extensions/arbor-vscode/README.md:10-18
Visualizer Synchronization
The integration allows bidirectional focus between the editor and the Arbor Visualizer.
- Show in Visualizer: Users can right-click a line or use the command palette to focus the current file and line within the Arbor Logic Forest visualizer.
- Toggle Visualizer: Launches the
arbor vizcommand within a integrated terminal to start the visualizer stack.
Sources: extensions/arbor-vscode/src/extension.ts:139-160, extensions/arbor-vscode/package.json:51-57
Configuration and Commands
The extension provides several configuration options and commands to manage the integration.
Configuration Settings
| Setting | Type | Default | Description |
|---|---|---|---|
arbor.serverUrl | string | ws://127.0.0.1:8080 | WebSocket URL for the Arbor Sync Server |
Sources: extensions/arbor-vscode/package.json:65-71, extensions/arbor-vscode/README.md:29-33
Extension Commands
| Command | Title | Keybinding |
|---|---|---|
arbor.connect | Arbor: Connect to Server | - |
arbor.showInVisualizer | Show in Arbor Visualizer | - |
arbor.toggleVisualizer | Arbor: Toggle Visualizer | Ctrl+Shift+A (Win/Linux) / Cmd+Shift+A (Mac) |
Sources: extensions/arbor-vscode/package.json:27-50, extensions/arbor-vscode/README.md:35-40
Protocol and Data Flow
The extension communicates using JSON-RPC over WebSockets. It specifically listens for the FocusNode message type to trigger UI highlights and sends spotlight.focus to the server.
Message Flow Example
When the AI agent (using the arbor-mcp bridge) identifies a critical logic path, it triggers a spotlight through the server.
Implementation Detail: showInVisualizer
// extensions/arbor-vscode/src/extension.ts:139-160
async function showInVisualizer() {
const editor = vscode.window.activeTextEditor;
if (!editor) return;
const line = editor.selection.active.line + 1;
const fileName = editor.document.fileName;
if (ws && ws.readyState === WebSocket.OPEN) {
const request = {
jsonrpc: '2.0',
method: 'spotlight.focus',
params: { file: fileName, line: line },
id: Date.now()
};
ws.send(JSON.stringify(request));
}
}
Sources: extensions/arbor-vscode/src/extension.ts:139-160
Summary
The VSCode Integration for Arbor serves as the primary user interface for developers interacting with the Arbor graph engine during active coding. By supporting real-time WebSocket communication, it enables seamless transitions between raw source code and high-level architectural visualizations, while providing a unique "Spotlight" mechanism for AI-guided code reviews and impact analysis.