# Hydra Browser

A visual web browser that displays websites in draggable windows on a canvas, with visual wire connections showing your browsing trail. Built with Electron.

## Features

- **Visual Canvas Interface**: Browse websites in floating windows on an infinite canvas
- **Draggable Windows**: Move browser windows freely around the canvas
- **Wire Connections**: Visual links between parent and child windows (future: click interception)
- **CORS Bypass**: Built-in proxy server to load any website
- **Dark Theme**: Modern, developer-friendly UI

## Installation

1. Install dependencies:
```bash
npm install
```

## Usage

1. Start the application:
```bash
npm start
```

2. Enter a URL in the input field (e.g., `https://example.com`)
3. Click "Go" or press Enter
4. The website will load in a new window on the canvas
5. Drag windows by their title bar
6. Close windows with the red close button

## Keyboard Shortcuts

- **Cmd/Ctrl + T**: Focus URL input
- **Cmd/Ctrl + W**: Close active window
- **ESC**: Clear URL input

## Architecture

### Components

- **Main Process** (`src/main/index.js`): Electron app initialization and lifecycle
- **Proxy Server** (`src/server/proxy.js`): Express server to bypass CORS restrictions
- **Renderer Process** (`src/renderer/`): UI and application logic
  - `index.html`: Main UI structure
  - `app.js`: Application initialization and event handling
  - `canvas-manager.js`: Manages canvas, windows, and wire connections
  - `window-manager.js`: Individual browser window logic
  - `styles.css`: UI styling

### How It Works

1. **Proxy Server**: Runs on `localhost:3001` and fetches web content to bypass CORS
2. **Electron Window**: Displays the canvas interface
3. **Browser Windows**: Each website is loaded in an iframe within a draggable window
4. **Wire Rendering**: SVG paths connect parent and child windows

## Development

Run in development mode with DevTools:
```bash
npm run dev
```

## Project Structure

```
hydra/
├── package.json
├── README.md
└── src/
    ├── main/
    │   └── index.js          # Electron main process
    ├── server/
    │   └── proxy.js          # Proxy server
    └── renderer/
        ├── index.html        # Main UI
        ├── app.js            # Application logic
        ├── canvas-manager.js # Canvas management
        ├── window-manager.js # Window management
        └── styles.css        # Styling
```

## Future Enhancements

- **Link Interception**: Automatically open clicked links in new connected windows
- **Multiple Windows**: Better support for managing many windows simultaneously
- **Canvas Pan/Zoom**: Navigate large browsing trails
- **Session Persistence**: Save and restore browsing sessions
- **Window Minimize/Maximize**: Full window management
- **Bookmarks**: Quick access to favorite sites
- **History**: Track browsing history
- **Search**: Find windows by URL or title

## Troubleshooting

### Port 3001 already in use
If the proxy server fails to start, another process may be using port 3001. Either:
- Stop the conflicting process
- Change the port in `src/server/proxy.js` and `src/renderer/window-manager.js`

### Websites not loading
Some websites have strict security policies that prevent them from being embedded:
- Try the desktop version of the site
- Some sites block iframes entirely (banking sites, social media)
- Check the browser console for specific errors

### Performance issues
- Limit the number of open windows (5-10 recommended)
- Close unused windows
- Some websites are resource-intensive

## Console Debugging

Open DevTools (View > Toggle Developer Tools) and use these commands:

```javascript
// Open a URL programmatically
app.openURL('https://example.com')

// Close active window
app.closeActiveWindow()

// Cascade all windows
app.cascadeAllWindows()

// Close all windows
app.closeAllWindows()

// Get canvas manager
app.getCanvasManager()
```

## License

MIT

## Credits

Built with Electron, Express, and modern web technologies.