commit 507b0ceb1e6dbd48bbd6f1e3976ab4a33045669b Author: geezo Date: Tue Feb 10 16:07:41 2026 -0500 first commit diff --git a/README.md b/README.md new file mode 100644 index 0000000..f1a3a83 --- /dev/null +++ b/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.