Purpose of the src Directory in Wand Enhancer: Frontend Architecture and Build Pipeline

TLDR: The src directory under web-panel/ contains all TypeScript/TSX source files that compile into the production bundle for Wand Enhancer's remote web panel, organized into functional modules that handle the UI, cheat trainer, WebSocket session management, and user preferences.

The src directory sits at the core of the Wand Enhancer project under web-panel/src, serving as the source of truth for the remote web panel's front-end architecture. This folder houses the TypeScript/TSX source files that Vite bundles into the production assets injected into the Wand desktop client. Understanding the purpose of the src directory in Wand Enhancer reveals how the project separates concerns between the trainer UI, remote session management, and the game library interface.

Directory Structure and Functional Organization

The src folder is deliberately organized into seven sub-directories, each handling a distinct aspect of the remote panel's functionality. This separation ensures that the cheat trainer, WebSocket connection, and UI components remain maintainable and testable.

Application Bootstrap and Layout (app/)

The app/ sub-directory contains the entry point and global layout components. The main.tsx file boots the entire panel, while app.tsx defines the root layout structure. Global hooks like use-remote-panel.ts establish the WebSocket connection, and use-dock-auto-hide.ts manages window behavior. Key UI chrome lives here, including TopBar.tsx and StatusPill.tsx.

Cheat Trainer Interface (trainer/)

The trainer/ folder implements the cheat-trainer UI, organizing cheats into categories, controls, and presets. It includes reusable control components such as ToggleControl.tsx, SliderControl.tsx, and CheatControl.tsx. State management for saved presets resides in use-presets.ts and preset-storage.ts, enabling users to persist cheat configurations between sessions.

WebSocket Session Management (remote-session/)

This directory manages the real-time connection to the local Wand client. The remote-session.client.ts file handles the WebSocket implementation, processing messages like installed_apps and game_status. State updates flow through a Redux-style reducer defined in remote-session.reducer.ts, ensuring predictable state transitions when the remote game launches or closes.

Game Library Views (library/)

The library/ directory provides the "My Games" interface, with components like GameCover.tsx rendering game artwork with fallback handling. Storage helpers such as game-pin-storage.ts persist user preferences about pinned or favorite games.

Shared Utilities (shared/)

Cross-cutting concerns live in shared/, including UI primitives (Icon.tsx, Drawer.tsx), the storage abstraction layer (storage.ts), and type definitions (po.d.ts). This folder ensures consistency across the other modules.

Appearance and Theming (appearance/)

User customization settings reside in appearance/, with appearance-storage.ts persisting theme preferences to localStorage.

Internationalization (locales/)

Translation files (messages.po) support multi-language interfaces, storing localized strings for the global audience.

Build Pipeline and Distribution

When the build script executes (pnpm run build), the TypeScript source undergoes transpilation, bundling, and minification. The output lands in web-panel/dist/bridge.cjs (the bridge module) and web-panel/dist/renderer-scripts/ (default scripts). A C# patcher then injects these compiled assets into Wand's app.asar, enabling the remote panel to run inside the desktop client without external dependencies.

Key Implementation Examples

The following patterns demonstrate how the src directory structures its core functionality.

Initialize the remote panel and connect to the local Wand instance:

// web-panel/src/app/main.tsx
import { useRemotePanel } from "./use-remote-panel";
import { TopBar } from "./ui/TopBar";

function App() {
  useRemotePanel();               // Sets up the websocket connection
  return (
    <div className="h-full flex flex-col">
      <TopBar />
      {/* other UI components */}
    </div>
  );
}
export default App;

Toggle a cheat in the trainer UI:

// web-panel/src/trainer/controls/ToggleControl.tsx
import { Switch } from "preact-switch";

export const ToggleControl = ({ cheat, onChange }) => (
  <Switch
    checked={cheat.enabled}
    onChange={(e) => onChange({ ...cheat, enabled: e.target.checked })}
  />
);

React to a remote "game-launched" websocket message:

// web-panel/src/remote-session/remote-session.client.ts
socket.on("game_status", (msg) => {
  if (msg.type === "game-launched") {
    // Update UI state so the trainer shows the active game
    dispatch({ type: "GAME_LAUNCHED", payload: msg });
  }
});

Critical Files in the src Directory

• web-panel/src/app/main.tsx – Entry point that boots the panel and establishes the WebSocket connection.
• web-panel/src/trainer/controls/ToggleControl.tsx – Reusable trainer control component for boolean cheat toggles.
• web-panel/src/remote-session/remote-session.reducer.ts – Redux-style reducer handling incoming remote-session messages.
• web-panel/src/shared/storage.ts – Centralized helper for reading/writing JSON to localStorage.
• web-panel/src/library/ui/GameCover.tsx – Component rendering game artwork with graceful fallback handling.
• web-panel/src/appearance/appearance-storage.ts – Persists theme and UI appearance preferences.

Summary

• The src directory under web-panel/ serves as the TypeScript/TSX source for Wand Enhancer's remote web panel.
• Seven sub-folders separate concerns: app (boot/layout), trainer (cheats), remote-session (WebSocket), library (games), shared (utilities), appearance (themes), and locales (i18n).
• The Vite/PNPM build process compiles src into web-panel/dist/bridge.cjs and renderer-scripts/, then injects them into app.asar.
• Core files like main.tsx and remote-session.client.ts manage the panel lifecycle and real-time communication with the local Wand client.

Frequently Asked Questions

What build tool compiles the src directory in Wand Enhancer?

The project uses Vite with PNPM to transpile, bundle, and minify the TypeScript source. Running pnpm run build outputs the production assets to web-panel/dist/, specifically generating bridge.cjs and the renderer-scripts/ directory.

How does the src directory connect to the desktop Wand application?

The compiled assets from src are injected into Wand's app.asar archive by a C# patcher. This allows the remote panel to execute within the desktop client as an integrated component without requiring external dependencies or separate installation.

Where is the WebSocket connection logic located in the src directory?

The WebSocket client logic resides in web-panel/src/remote-session/remote-session.client.ts, while state management is handled by the reducer in web-panel/src/remote-session/remote-session.reducer.ts. These files process messages like game_status and installed_apps to synchronize the UI with the local Wand instance.

Can I modify the trainer UI controls in the src directory?

Yes, the trainer controls are modular components located in web-panel/src/trainer/controls/, including ToggleControl.tsx and SliderControl.tsx. These components accept props for cheat state and change handlers, making them customizable for different cheat types and interaction patterns.

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