feat(electron): add remote dev mode, enhance navigation handling, and update Electron UI styles

- Introduced `--remote` flag for Electron dev mode to load external URLs.
- Added navigation guards to restrict navigation and external URL handling.
- Updated Electron styles for title bar spacing and transparency adjustments.
- Removed unused assets (`icon.svg`, `logo.svg`) and optimized workspace connection logic.

Author: mrtcmn

package.json

@@ -17,6 +17,7 @@
     "db:migrate": "bun run --cwd packages/api db:migrate",
     "db:studio": "bun run --cwd packages/api db:studio",
     "electron:dev": "bun run build:ui && cd packages/electron && npm run dev",
+    "electron:dev:remote": "cd packages/electron && npm run dev:remote",
     "electron:build": "bun run build:ui && cd packages/electron && npm run dist"
   },
   "devDependencies": {

packages/electron/package.json

@@ -7,6 +7,7 @@
     "build:main": "tsc -p tsconfig.json",
     "start": "npm run build:main && electron dist/main.js",
     "dev": "npm run build:main && electron dist/main.js --dev",
+    "dev:remote": "npm run build:main && electron dist/main.js --dev --remote",
     "dist": "npm run build:main && electron-builder"
   },
   "dependencies": {

packages/electron/src/main.ts

@@ -1,4 +1,4 @@
-import { app, BrowserWindow, ipcMain, net } from 'electron';
+import { app, BrowserWindow, ipcMain, net, shell } from 'electron';
 import path from 'path';
 import { getStore } from './store';
 
@@ -40,14 +40,37 @@ async function createWindow() {
 
   // Load the UI
   const isDev = process.argv.includes('--dev');
+  const isRemote = process.argv.includes('--remote');
+  const devUrl = isRemote ? 'https://ra.grasco.dev' : 'http://localhost:5173';
+  const allowedOrigin = isDev ? new URL(devUrl).origin : 'file://';
+
   if (isDev) {
-    mainWindow.loadURL('http://localhost:5173');
-    mainWindow.webContents.openDevTools();
+    mainWindow.loadURL(devUrl);
+    if (!isRemote) mainWindow.webContents.openDevTools();
   } else {
     const uiPath = path.join(process.resourcesPath, 'ui', 'index.html');
     mainWindow.loadFile(uiPath);
   }
 
+  // Open external URLs in default browser, only allow the app origin
+  mainWindow.webContents.setWindowOpenHandler(({ url }) => {
+    try {
+      if (new URL(url).origin !== allowedOrigin) {
+        shell.openExternal(url);
+      }
+    } catch {}
+    return { action: 'deny' };
+  });
+
+  mainWindow.webContents.on('will-navigate', (event, url) => {
+    try {
+      if (new URL(url).origin !== allowedOrigin) {
+        event.preventDefault();
+        shell.openExternal(url);
+      }
+    } catch {}
+  });
+
   mainWindow.on('closed', () => {
     mainWindow = null;
   });

packages/ui/public/icon.svg

@@ -421,6 +421,8 @@ export function AppSidebar({ data, isLoading, onClose }: AppSidebarProps) {
 
   return (
     <div className="flex flex-col h-full bg-card text-foreground">
+      {/* Electron: traffic light spacer + drag region */}
+      <div className="hidden electron-titlebar h-[38px] shrink-0 app-drag" />
       {/* Top nav tabs with sliding pill */}
       <div className="flex items-center gap-0.5 px-2 pt-3 pb-2 shrink-0">
         {(['workspaces', 'tasks'] as const).map((tab) => (

packages/ui/public/logo.png

@@ -221,10 +221,10 @@
 
 /* Electron: frosted glass card */
 .frosted-card {
-  background: hsla(var(--card), 0.6);
+  background: hsl(var(--card) / 0.6);
   backdrop-filter: blur(40px) saturate(1.8);
   -webkit-backdrop-filter: blur(40px) saturate(1.8);
-  border: 1px solid hsla(var(--border), 0.3);
+  border: 1px solid hsl(var(--border) / 0.3);
   box-shadow:
     0 8px 32px rgba(0, 0, 0, 0.3),
     inset 0 1px 0 hsla(0, 0%, 100%, 0.05);
@@ -238,10 +238,28 @@
   -webkit-app-region: no-drag;
 }
 
-/* Electron: transparent background for acrylic */
-.electron-app body {
+/* Electron: transparent backgrounds for acrylic/vibrancy */
+.electron-app,
+.electron-app body,
+.electron-app body.bg-background,
+.electron-app #root,
+.electron-app #root > * {
   background: transparent !important;
+  background-color: transparent !important;
 }
-.electron-app .min-h-screen {
-  background: transparent;
+
+/* Electron: translucent surfaces */
+.electron-app .bg-background:not(body):not(#root > *) {
+  background-color: hsl(var(--background) / 0.6) !important;
+}
+.electron-app .bg-card {
+  background-color: hsl(var(--card) / 0.5) !important;
+}
+.electron-app .bg-background\/95 {
+  background-color: hsl(var(--background) / 0.5) !important;
+}
+
+/* Electron: show traffic light spacer */
+.electron-app .electron-titlebar {
+  display: block !important;
 }

packages/ui/public/logo.svg

@@ -58,9 +58,30 @@ export const useApiConfig = create<ApiConfigState>((set) => ({
 }));
 
 export function getApiBase(): string {
-  return useApiConfig.getState().apiBaseUrl;
+  const configured = useApiConfig.getState().apiBaseUrl;
+  if (!configured) return '';
+  // If configured URL matches the current page origin, use relative URLs
+  // so requests go through the same origin (e.g. vite proxy in dev)
+  try {
+    const configuredOrigin = new URL(configured).origin;
+    if (configuredOrigin === window.location.origin) return '';
+  } catch {
+    // invalid URL, return as-is
+  }
+  return configured;
 }
 
 export function getWsBase(): string {
-  return useApiConfig.getState().wsBaseUrl;
+  const configured = useApiConfig.getState().wsBaseUrl;
+  if (!configured) return '';
+  // If configured WS URL matches the current page origin, use relative WS
+  // so connections go through the same origin (e.g. vite proxy in dev)
+  try {
+    const configuredOrigin = new URL(configured).origin;
+    const pageWsOrigin = window.location.origin.replace(/^http/, 'ws');
+    if (configuredOrigin === pageWsOrigin) return '';
+  } catch {
+    // invalid URL, return as-is
+  }
+  return configured;
 }

packages/ui/src/components/AppSidebar.tsx

@@ -5,7 +5,8 @@ import { Button } from '@/components/ui/Button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/Card';
 import { Input } from '@/components/ui/Input';
 import { useGitHubOAuthStatus } from '@/hooks/useGitHubApps';
-import { getApiBase } from '@/lib/api-config';
+import { getApiBase, useApiConfig } from '@/lib/api-config';
+import { isElectron, getElectronAPI } from '@/lib/electron';
 
 export function LoginPage() {
   const [email, setEmail] = useState('');
@@ -112,6 +113,23 @@ export function LoginPage() {
           <p className="text-center text-xs text-muted-foreground">
             By continuing, you agree to our terms of service and privacy policy.
           </p>
+
+          {isElectron() && (
+            <button
+              type="button"
+              onClick={async () => {
+                const electronAPI = getElectronAPI();
+                if (electronAPI) {
+                  await electronAPI.setApiUrl('');
+                }
+                useApiConfig.getState().setApiUrl('');
+                useApiConfig.setState({ isConfigured: false });
+              }}
+              className="w-full text-xs text-muted-foreground hover:text-foreground transition-colors"
+            >
+              Connect to another workspace
+            </button>
+          )}
         </CardContent>
       </Card>
     </div>