directlx-claude-config/plans/cozy-cuddling-clover.md

ATM Incident Browser - Implementation Plan

Overview

Create a restricted Electron-based browser application that only allows access to a configurable URL (atm-incident site). The app will have a standard window with minimize/close buttons and work on both Windows and Linux.

Project Structure

hiveops-browser/
├── package.json
├── electron-builder.yml       # Build configuration for Windows/Linux
├── src/
│   ├── main/
│   │   ├── main.js            # Electron main process
│   │   ├── config.js          # Configuration management
│   │   └── preload.js         # Security bridge
│   └── renderer/
│       ├── index.html         # Simple loading/error UI
│       └── styles.css         # Basic styles
├── config/
│   └── default-config.json    # Default configuration template
└── assets/
    └── icon.png               # Application icon

Key Components

1. Configuration System (src/main/config.js)

• Store settings in user's app data directory
• Configurable options:
  • allowedUrl: Base URL to allow (e.g., https://atm-incident.example.com)
  • windowWidth, windowHeight: Window dimensions
  • allowSubdomains: Whether to allow subdomains of the base URL
• Settings accessible via system tray or menu

2. Main Process (src/main/main.js)

• Create BrowserWindow with standard frame
• Load the configured URL on startup
• Intercept all navigation requests
• Block navigation to URLs outside the allowed domain
• Handle new window requests (open in same window or block)
• Provide settings menu via application menu

3. URL Restriction Logic

• Parse the allowed URL to extract the domain
• On every navigation event (will-navigate, new-window):
  • Compare target URL domain against allowed domain
  • Block if not matching, show notification
• Handle redirects appropriately

4. Preload Script (src/main/preload.js)

• Minimal context bridge for any needed IPC
• Expose config reading capability to renderer

5. Build Configuration (electron-builder.yml)

• Windows: Create .exe installer and portable version
• Linux: Create .AppImage and .deb packages
• Include desktop shortcuts automatically

Implementation Steps

1. Initialize project

   • Create package.json with Electron and electron-builder dependencies
   • Set up npm scripts for dev and build

2. Create main process

   • Implement main.js with BrowserWindow creation
   • Add URL restriction logic with domain validation
   • Create application menu with Settings option

3. Create configuration system

   • Implement config loading/saving using electron-store or custom JSON
   • Create settings window for URL configuration
   • Store in OS-appropriate location (AppData/config)

4. Create renderer files

   • Simple index.html for loading states and errors
   • Minimal CSS for professional appearance

5. Set up build configuration

   • Configure electron-builder.yml for Windows and Linux
   • Set up icons and metadata
   • Configure shortcuts to be created during install

6. Testing

   • Test URL blocking on various navigation attempts
   • Test settings persistence
   • Test builds on both platforms

Verification

1. Run npm start to launch in development mode
2. Verify only the configured URL loads
3. Attempt to navigate away (should be blocked)
4. Change settings and verify persistence
5. Build for Windows: npm run build:win
6. Build for Linux: npm run build:linux
7. Test installers create proper desktop shortcuts

Dependencies

• electron: ^28.0.0
• electron-builder: ^24.0.0 (dev)
• electron-store: ^8.0.0 (for config persistence)