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

> Discover the purpose of the src directory in Wand Enhancer. This essential frontend architecture holds TypeScript/TSX source files that compile into the production bundle for the web panel.

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

---

**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`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/main.tsx) file boots the entire panel, while [`app.tsx`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/app.tsx) defines the root layout structure. Global hooks like [`use-remote-panel.ts`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/use-remote-panel.ts) establish the WebSocket connection, and [`use-dock-auto-hide.ts`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/use-dock-auto-hide.ts) manages window behavior. Key UI chrome lives here, including [`TopBar.tsx`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/TopBar.tsx) and [`StatusPill.tsx`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/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`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/ToggleControl.tsx), [`SliderControl.tsx`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/SliderControl.tsx), and [`CheatControl.tsx`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/CheatControl.tsx). State management for saved presets resides in [`use-presets.ts`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/use-presets.ts) and [`preset-storage.ts`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/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`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/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`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/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`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/GameCover.tsx) rendering game artwork with fallback handling. Storage helpers such as [`game-pin-storage.ts`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/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`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/Icon.tsx), [`Drawer.tsx`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/Drawer.tsx)), the storage abstraction layer ([`storage.ts`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/storage.ts)), and type definitions ([`po.d.ts`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/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`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/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:

```tsx
// 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:

```tsx
// 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:

```ts
// 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`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/web-panel/src/app/main.tsx) – Entry point that boots the panel and establishes the WebSocket connection.
- [`web-panel/src/trainer/controls/ToggleControl.tsx`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/web-panel/src/trainer/controls/ToggleControl.tsx) – Reusable trainer control component for boolean cheat toggles.
- [`web-panel/src/remote-session/remote-session.reducer.ts`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/web-panel/src/remote-session/remote-session.reducer.ts) – Redux-style reducer handling incoming remote-session messages.
- [`web-panel/src/shared/storage.ts`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/web-panel/src/shared/storage.ts) – Centralized helper for reading/writing JSON to `localStorage`.
- [`web-panel/src/library/ui/GameCover.tsx`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/web-panel/src/library/ui/GameCover.tsx) – Component rendering game artwork with graceful fallback handling.
- [`web-panel/src/appearance/appearance-storage.ts`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/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`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/main.tsx) and [`remote-session.client.ts`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/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`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/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`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/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`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/ToggleControl.tsx) and [`SliderControl.tsx`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/SliderControl.tsx). These components accept props for cheat state and change handlers, making them customizable for different cheat types and interaction patterns.