# How the Wand Enhancer Code Is Organized: A Three-Layer Architecture

> Discover the Wand Enhancer code organization. Explore its three-tier architecture: WPF backend, Preact frontend, and Node.js bridge for seamless IPC communication.

- Repository: [k1tbyte/Wand-Enhancer](https://github.com/k1tbyte/Wand-Enhancer)
- Tags: architecture
- Published: 2026-07-13

---

**Wand Enhancer follows a strict three-tier architecture that separates the native Windows WPF patcher, the TypeScript/Preact web-panel frontend, and the Node.js bridge facilitating IPC between the Electron renderer and the C# backend.**

The k1tbyte/Wand-Enhancer repository implements a hybrid application architecture designed to patch Electron ASAR archives while injecting a custom web interface. Understanding the Wand Enhancer code organization requires examining how responsibilities are distributed across the `WandEnhancer/`, `web-panel/`, and `web-panel/bridge/` directories. Each layer operates independently but communicates through well-defined APIs and WebSocket protocols.

## 1. Windows Patcher Layer (C# WPF)

The native Windows application handles ASAR extraction, patch application, and local configuration management.

### Entry Point and UI Bootstrap

The application lifecycle begins in [`WandEnhancer/Program.cs`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/WandEnhancer/Program.cs), which instantiates the WPF `App` object and loads the main window defined in `WandEnhancer/View/MainWindow/MainWindow.xaml`. The code-behind file [`MainWindow.xaml.cs`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/MainWindow.xaml.cs) wires UI events to ViewModels, while XAML files like `SettingsPopup.xaml` define the visual layout.

### Core Services and Configuration

The `WandEnhancer/Core/` directory contains the patching orchestration logic:

- **[`Core/Enhancer.cs`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/Core/Enhancer.cs)** – Orchestrates the complete patching flow, including loading `app.asar`, extracting contents, applying modifications, and rebuilding the archive.
- **[`Core/EnhancerConfig.cs`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/Core/EnhancerConfig.cs)** – Stores static configuration values such as default TCP ports and file system paths.
- **[`Core/Services/SettingsManager.cs`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/Core/Services/SettingsManager.cs)** – Persists user preferences to a JSON file via `Load()` and `Save()` methods.
- **[`Core/Services/LocalizationManager.cs`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/Core/Services/LocalizationManager.cs)** – Loads localized XAML resources from the `Locale/` directory.

Accessing settings from the WPF side follows this pattern:

```csharp
using WandEnhancer.Core.Services;

// Load the persisted settings
var settings = SettingsManager.Load();
// Toggle the “Hide toolbar” flag
settings.HideToolbar = !settings.HideToolbar;
SettingsManager.Save(settings);

```

### ASAR Archive Handling

The `AsarSharp/` directory provides a pure-C# implementation for manipulating Electron archives. **[`AsarSharp/AsarExtractor.cs`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/AsarSharp/AsarExtractor.cs)** handles extraction while skipping missing unpacked entries to avoid locked DLL failures, and **[`AsarSharp/AsarCreator.cs`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/AsarSharp/AsarCreator.cs)** rebuilds the modified archives.

```csharp
using AsarSharp;

// Extract the original app.asar
var extractor = new AsarExtractor(@"C:\Wand\resources\app.asar");
extractor.ExtractAll(@"C:\temp\wand-extracted");

// …apply patches to the extracted files…

// Re‑pack the modified files
var creator = new AsarCreator(@"C:\temp\wand-modified", @"C:\Wand\resources\app.asar");
creator.Create();

```

## 2. Web-Panel Frontend (TypeScript/Preact)

This layer implements a lightweight UI that runs inside the patched Electron renderer and communicates over TCP 3223.

### Build Pipeline and Vite Configuration

The build process is defined in [`web-panel/package.json`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/web-panel/package.json), where the `build` script orchestrates TypeScript checking, Vite bundling, and bridge compilation via `pnpm run build:bridge`. The **[`web-panel/vite.config.ts`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/web-panel/vite.config.ts)** configures React-style JSX support while aliasing React imports to Preact for minimal bundle size. Final output resides in `web-panel/dist/`.

### Application Structure and Entry Points

The frontend mounts at **[`src/app/main.tsx`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/src/app/main.tsx)**, which renders the root `<App/>` component. Key UI components include [`TopBar.tsx`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/TopBar.tsx) (hosting the Connect button for QR-code generation) and reusable primitives in `src/shared/ui/` such as `Drawer`, `SearchInput`, and `Icon`. Centralized storage utilities in [`src/shared/storage.ts`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/src/shared/storage.ts) wrap all `localStorage` access.

### Remote Session Management

The WebSocket communication layer lives in **`src/remote-session/`**:

- **[`remote-session.client.ts`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/remote-session.client.ts)** – Implements the WebSocket client connecting to the C# bridge.

- **[`remote-session.reducer.ts`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/remote-session.reducer.ts)** and **[`remote-session.protocol.ts`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/remote-session.protocol.ts)** – Define message types and Redux-style state management.
- **[`use-remote-session.ts`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/use-remote-session.ts)** – Exposes a hook for UI components to access connection state.

```tsx
import { useRemoteSession } from '@/remote-session/use-remote-session';

export function GameStatus() {
  const { gameStatus } = useRemoteSession(state => ({
    gameStatus: state.gameStatus,
  }));
  return <div>Current game: {gameStatus?.title ?? 'None'}</div>;
}

```

## 3. Bridge Layer (Node.js IPC)

This runtime layer enables bidirectional communication between the Electron renderer and the native Windows patcher.

### Bridge Bundle Architecture

The bridge compiles into **`web-panel/dist/bridge.cjs`**, which the patcher copies into `resources/app.asar` as `remote-panel/bridge.cjs`. The Electron renderer loads this bundle before executing custom scripts. Build configuration is handled by **`web-panel/bridge/build.mjs`**, while **[`web-panel/bridge/src/constants.ts`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/web-panel/bridge/src/constants.ts)** defines stable IPC channel names.

### Default Script Ecosystem

Runtime logic resides in `web-panel/bridge/scripts/default/`:

- **[`installed-apps-sync/index.js`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/installed-apps-sync/index.js)** – Synchronizes the game list and trainer status with the desktop client, falling back to the `/v3/unavailable_titles` API when necessary.
- **[`activate-pro/index.js`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/activate-pro/index.js)** – Intercepts account service responses to maintain the Pro subscription flag.
- **[`remote-popup-cleanup.js`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/remote-popup-cleanup.js)** – Removes QR-code tooltips and hides Pro-onboarding cards.

Custom scripts can leverage the global `WandEnhancer` object:

```js
// hello.js – runs inside the Electron renderer
if (!globalThis.__helloInstalled) {
  globalThis.__helloInstalled = true;
  WandEnhancer.log('Hello from custom script!', WandEnhancer.remoteUrl);
}

```

## Summary

- **Wand Enhancer code organization** follows a three-layer architecture separating concerns between native Windows operations, web UI, and IPC bridging.
- The **C# WPF layer** (`WandEnhancer/`) handles ASAR manipulation through `AsarExtractor` and `AsarCreator`, while `SettingsManager` persists local configuration.

- The **TypeScript frontend** (`web-panel/src/`) uses Preact and Vite for a lightweight UI, with [`remote-session.client.ts`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/remote-session.client.ts) managing WebSocket connections to the backend.
- The **Node.js bridge** (`web-panel/bridge/`) provides the runtime glue, exposing APIs via `bridge.cjs` and default scripts for game synchronization and feature activation.

## Frequently Asked Questions

### What is the entry point for the Wand Enhancer WPF application?

The application bootstraps in [`WandEnhancer/Program.cs`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/WandEnhancer/Program.cs), which creates the `App` object and initializes the main window defined in `WandEnhancer/View/MainWindow/MainWindow.xaml`. This file injects early log entries and sets up the WPF application context before displaying the UI.

### How does the web-panel communicate with the native C# backend?

The web-panel uses a WebSocket client implemented in [`web-panel/src/remote-session/remote-session.client.ts`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/web-panel/src/remote-session/remote-session.client.ts) that connects to the C# patcher over TCP 3223. The connection is mediated by the Node.js bridge (`web-panel/dist/bridge.cjs`), which forwards messages between the Electron renderer process and the native Windows application using IPC channels defined in [`web-panel/bridge/src/constants.ts`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/web-panel/bridge/src/constants.ts).

### Where is the ASAR patching logic implemented in the Wand Enhancer codebase?

The core patching orchestration resides in [`WandEnhancer/Core/Enhancer.cs`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/WandEnhancer/Core/Enhancer.cs), which coordinates extraction and rebuilding. The low-level ASAR file manipulation is handled by the `AsarSharp` library, specifically [`AsarSharp/AsarExtractor.cs`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/AsarSharp/AsarExtractor.cs) for reading archives and [`AsarSharp/AsarCreator.cs`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/AsarSharp/AsarCreator.cs) for writing them, providing a pure-C# implementation that avoids dependencies on Node.js tools.

### How are user settings persisted in the Wand Enhancer application?

User configuration is managed by [`WandEnhancer/Core/Services/SettingsManager.cs`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/WandEnhancer/Core/Services/SettingsManager.cs), which serializes settings to a JSON file using static `Load()` and `Save()` methods. The `SettingsManager` exposes these values to the UI layer through `WandEnhancer.log` and handles properties like `HideToolbar` and localization preferences.