Agent-Draco/WhyskAI-CustomInstaller-Maker

🎯 Goal

Transform a standard React/Vite production build into a single, standalone, highly customized native Windows .exe installer. The wrapper bypasses standard OS window chrome to present a deterministic, cinematic 5-step installer wizard interface.

🛠️ Core Engineering Modules

1. Lifecycle Interception & Window Styling (electron.js)

Initialize a hardcoded, fixed-layout window footprint ($760 \times 480\text{px}$) with the following strict native properties:

• frame: false (Disable all native OS window boundaries/borders)
• resizable: false (Lock dimensions)
• transparent: true (Enable transparent backing for custom web styling)

Expose an isolated, secure asynchronous IPC (Inter-Process Communication) architecture via preload.js. This passes data cleanly between the background runtime and the React renderer layer without triggering sandbox access safety crashes.

2. System Asset Deployment (Node.js Background Layer)

• Directory Mapping: Dynamically parse workspace string paths to safely build target folders using fs-extra.
• Shortcut Link Injection: Trigger a background child process executing Windows PowerShell commands to construct native .lnk shortcuts directly on the user's Desktop environment.
• OS App List Registry Population: Directly inject required software application telemetry into the local machine registry index path: HKCU\Software\Microsoft\Windows\CurrentVersion\Uninstall\[AppName] Ensure proper population of DisplayName, DisplayIcon, installation directory targets, and operational uninstallation string hooks to cleanly bind the app to the Windows Apps & Features utility.

🎨 Frontend Architecture & Step Machine (React)

The installer interface runs a deterministic 5-step React state machine styled with deep, minimalist slate-blue primitives (#0a0f1d, #111827) utilizing Tailwind CSS:

1. Welcome Onboarding Phase: Minimal typography header displaying software version and configuration flags.
2. Custom Theme Directory Explorer: A custom folder selection dialog modal running directly within the web application's DOM context (bypassing the standard mismatched Windows native file explorer).
3. Workspace Toggle: Stateful checkbox component (toggled ON by default) governing the creation and deployment of desktop shortcut files.
4. Cinematic Progress Splash Phase: Full-bleed, borderless layout rendering smooth CSS micro-interactions and animations synced to an exact 3.5-second linear progress animation matching file system copy execution.
5. Completion Choices: Dual branching exit screen offering a standard exit trigger or immediate system execution via "Launch Application".

🖼️ Application Logo Resolution Protocol

The installer requires high-fidelity graphic primitives (icon.ico and a transparent logo.png). Resolve missing visual components using this fallback sequence:

1. Protocol A: User-Supplied Branding (High-Tier): If a custom asset is provided via the wizard configuration screen, capture the file object, validate dimensions, stream it into the UI layers, and compile the .ico variant directly into the final executable header metadata.
2. Protocol B: AI-Driven Contextual Fallback (Zero-Knowledge Tier): If no branding is provided, parse the application metadata (name, description, industry vertical). Perform a vector or repository lookup to extract a clean, geometric, minimalist open-source icon. Guardrail: Absolutely prohibit chaotic, decorative, or literal clip-art clip designs. Only abstract, high-end vector structures are valid.

⚠️ Constraints & Guardrails

• Relative Asset Addressing: Ensure all output assets within the build configurations utilize relative paths (./static/...). Absolute web resolution references will break inside the packaged filesystem, causing a blank white screen runtime error.
• Security Isolation: Keep nodeIntegration: false and contextIsolation: true active at all times. All background platform operations must transition securely through the contextBridge layer.

📝 Examples

Example: Injecting Manifest Targets into package.json

"build": {
  "appId": "com.whyskai.custominstaller",
  "productName": "WhyskAI-CustomInstaller-Maker",
  "win": {
    "target": ["nsis"],
    "icon": "assets/icon.ico"
  },
  "nsis": {
    "oneClick": false,
    "allowToChangeInstallationDirectory": true,
    "installerIcon": "assets/icon.ico",
    "uninstallerIcon": "assets/icon.ico",
    "createDesktopShortcut": true,
    "runAfterFinish": true
  }
}