first commit

README.md

@@ -0,0 +1,141 @@
+# 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.