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

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, 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 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 – Orchestrates the complete patching flow, including loading app.asar, extracting contents, applying modifications, and rebuilding the archive.
• Core/EnhancerConfig.cs – Stores static configuration values such as default TCP ports and file system paths.
• Core/Services/SettingsManager.cs – Persists user preferences to a JSON file via Load() and Save() methods.
• Core/Services/LocalizationManager.cs – Loads localized XAML resources from the Locale/ directory.

Accessing settings from the WPF side follows this pattern:

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 handles extraction while skipping missing unpacked entries to avoid locked DLL failures, and AsarSharp/AsarCreator.cs rebuilds the modified archives.

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, where the build script orchestrates TypeScript checking, Vite bundling, and bridge compilation via pnpm run build:bridge. The 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, which renders the root <App/> component. Key UI components include 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 wrap all localStorage access.

Remote Session Management

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

• remote-session.client.ts – Implements the WebSocket client connecting to the C# bridge.

• remote-session.reducer.ts and remote-session.protocol.ts – Define message types and Redux-style state management.

• use-remote-session.ts – Exposes a hook for UI components to access connection state.

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 defines stable IPC channel names.

Default Script Ecosystem

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

• 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 – Intercepts account service responses to maintain the Pro subscription flag.
• remote-popup-cleanup.js – Removes QR-code tooltips and hides Pro-onboarding cards.

Custom scripts can leverage the global WandEnhancer object:

// 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 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, 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 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.

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

The core patching orchestration resides in 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 for reading archives and 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, 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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}