Advisor Electron Angular Native

Reviews Electron desktop applications with Angular renderers and native OS integrations for security, performance, and code quality.

When to Use This Agent

Choose this agent when you need to:

• Architect or review Electron apps pairing Node.js main process with Angular renderer
• Audit IPC patterns, native shell/AppleScript integrations, and cross-process security
• Diagnose memory leaks, re-renders, and RxJS subscription issues in desktop contexts

Consider alternatives when:

• Your desktop app uses Tauri or NW.js with a different process model
• The renderer uses React or Vue rather than Angular

Quick Start

Configuration

Copy
name: advisor-electron-angular-native
type: agent
category: web-tools

Example Invocation

Copy
claude agent:invoke advisor-electron-angular-native "Review IPC handler in main/ipc-bridge.ts for security"

Example Output

Code Review: main/ipc-bridge.ts
================================
HIGH: [Security] Raw file path exposed without sanitization (line 42)
  Fix: Validate path against allowed directories
HIGH: [Error] Missing try/catch around exiftool spawn (line 78)
  Fix: Wrap with timeout and exit code validation
MEDIUM: [Perf] Synchronous fs.readFileSync blocks main (line 31)
  Fix: Replace with fs.promises.readFile
Architecture: Main/Renderer separation PASS | IPC validation FAIL

Core Concepts

Electron Process Model

Aspect	Details
Main Process	Node.js runtime managing windows, IPC routing, native integrations, and system tray
Renderer Process	Angular app in Chromium with restricted Node.js access via context isolation
Preload Scripts	Bridge layer exposing safe APIs through contextBridge.exposeInMainWorld
Native Layer	OS-specific integrations (AppleScript, shell, exiftool) wrapped in typed services
IPC Protocol	Structured message passing via ipcMain.handle / ipcRenderer.invoke

Electron + Angular Architecture

+-------------------+     +-------------------+     +------------------+
|  Angular          |<--->|  Preload Bridge   |<--->|  Electron Main   |
|  Renderer         |     |  (contextBridge)  |     |  Process         |
+-------------------+     +-------------------+     +------------------+
       |                                                    |
       | RxJS / Change Detection                            | child_process
       v                                                    v
+-------------------+                              +------------------+
|  UI Components    |                              |  Native Layer    |
|  Services/Guards  |                              |  AppleScript/CLI |
+-------------------+                              +------------------+

Configuration

Parameter	Type	Default	Description
review_scope	string	"full"	Scope: "main", "renderer", "native", or "full"
security_level	string	"strict"	Depth: "basic" or "strict" with context isolation checks
angular_version	string	"17"	Angular version for framework-specific recommendations
native_platform	string	"darwin"	Target OS: "darwin", "win32", or "linux"
ipc_rate_limit	number	100	Max recommended IPC calls/sec before throttling warnings

Best Practices

1. Enforce Context Isolation - Never disable contextIsolation or enable nodeIntegration. Expose only minimum APIs through contextBridge.exposeInMainWorld and validate every renderer argument as untrusted input.

2. Manage RxJS Subscriptions with Lifecycle Hooks - Desktop windows persist for hours, making subscription leaks severe. Use takeUntil(this.destroy$) or the async pipe exclusively, and audit long-running services during extended sessions.

3. Wrap Native Commands in Typed Services - Shell commands and CLI invocations should be encapsulated in service classes with TypeScript interfaces, timeout parameters, exit code validation, and stderr capture.

4. Debounce High-Frequency IPC - Renderer events like resize or file watcher updates can flood the IPC channel. Apply throttling at the renderer side and rate limiting at the main process handler level.

5. Implement Graceful Shutdown - Register before-quit and will-quit handlers to terminate child processes, clean temp files, and save in-progress work. Test shutdown with pending native operations.

Common Issues

1. Missing await in IPC Handlers - Forgetting await inside ipcMain.handle returns undefined silently. The renderer receives no error, making this a hidden data loss bug. Lint for missing await in all async handlers.

2. Angular Zone and Native Events - Native callbacks execute outside Angular's Zone, causing missed change detection. Wrap callbacks with this.ngZone.run(() => ...) to ensure view refreshes.

3. Unreleased Child Processes - Spawned CLI processes not killed on window close accumulate over time. Track all ChildProcess references and terminate them during shutdown.