feat(tauri): Enhance main window UI and improve server startup

- Add polished main window UI with dashboard access and status checking
- Fix Unix socket server initialization to handle async runtime properly
- Serve web assets from the server for browser dashboard access
- Add server status monitoring and real-time updates
- Improve error handling and user feedback

tauri/public/index.html

@@ -5,34 +5,262 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>VibeTunnel</title>
     <style>
-        body {
+        :root {
+            --bg-color: #1c1c1e;
+            --text-primary: #f5f5f7;
+            --text-secondary: #98989d;
+            --accent-color: #0a84ff;
+            --accent-hover: #409cff;
+            --border-color: rgba(255, 255, 255, 0.1);
+        }
+
+        @media (prefers-color-scheme: light) {
+            :root {
+                --bg-color: #ffffff;
+                --text-primary: #1d1d1f;
+                --text-secondary: #86868b;
+                --accent-color: #007aff;
+                --accent-hover: #0051d5;
+                --border-color: rgba(0, 0, 0, 0.1);
+            }
+        }
+
+        * {
             margin: 0;
             padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', system-ui, sans-serif;
+            background-color: var(--bg-color);
+            color: var(--text-primary);
+            height: 100vh;
             display: flex;
             align-items: center;
             justify-content: center;
-            height: 100vh;
-            background-color: #1c1c1e;
-            color: #f5f5f7;
-            font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', system-ui, sans-serif;
         }
-        .content {
+
+        .container {
             text-align: center;
+            max-width: 600px;
+            padding: 40px;
         }
+
+        .app-icon {
+            width: 128px;
+            height: 128px;
+            margin-bottom: 30px;
+            filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
+            border-radius: 27.6%;
+        }
+
         h1 {
-            font-size: 24px;
+            font-size: 32px;
+            font-weight: 600;
+            margin-bottom: 16px;
+            letter-spacing: -0.5px;
+        }
+
+        .subtitle {
+            font-size: 18px;
+            color: var(--text-secondary);
+            margin-bottom: 40px;
+            line-height: 1.5;
+        }
+
+        .status {
+            font-size: 14px;
+            color: var(--text-secondary);
+            margin-bottom: 30px;
+            padding: 12px 20px;
+            background-color: rgba(255, 255, 255, 0.05);
+            border-radius: 8px;
+            display: inline-block;
+        }
+
+        .button-group {
+            display: flex;
+            gap: 16px;
+            justify-content: center;
+            flex-wrap: wrap;
+        }
+
+        .button {
+            padding: 12px 24px;
+            background-color: var(--accent-color);
+            color: white;
+            border: none;
+            border-radius: 8px;
+            font-size: 16px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            text-decoration: none;
+            display: inline-block;
+        }
+
+        .button:hover {
+            background-color: var(--accent-hover);
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(0, 132, 255, 0.3);
+        }
+
+        .button:active {
+            transform: translateY(0);
+        }
+
+        .secondary-button {
+            background-color: transparent;
+            color: var(--accent-color);
+            border: 1px solid var(--accent-color);
+        }
+
+        .secondary-button:hover {
+            background-color: var(--accent-color);
+            color: white;
+        }
+
+        .info {
+            margin-top: 40px;
+            font-size: 14px;
+            color: var(--text-secondary);
+            line-height: 1.6;
+        }
+
+        .info-item {
             margin-bottom: 8px;
         }
-        p {
-            font-size: 14px;
-            color: #98989d;
+
+        .loading {
+            display: none;
+        }
+
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+
+        .spinner {
+            width: 20px;
+            height: 20px;
+            border: 2px solid rgba(255, 255, 255, 0.3);
+            border-top-color: white;
+            border-radius: 50%;
+            animation: spin 0.8s linear infinite;
+            display: inline-block;
+            margin-right: 8px;
         }
     </style>
 </head>
 <body>
-    <div class="content">
+    <div class="container">
+        <img src="icon.png" alt="VibeTunnel" class="app-icon">
         <h1>VibeTunnel</h1>
-        <p>Running in system tray</p>
+        <p class="subtitle">Turn any browser into your terminal. Command your agents on the go.</p>
+        
+        <div class="status" id="status">
+            <span class="loading" id="loadingSpinner"><span class="spinner"></span></span>
+            <span id="statusText">Checking server status...</span>
+        </div>
+        
+        <div class="button-group">
+            <button class="button" onclick="openDashboard()">Open Dashboard</button>
+            <button class="button secondary-button" onclick="openSettings()">Settings</button>
+            <button class="button secondary-button" onclick="showWelcome()">Welcome Guide</button>
+        </div>
+        
+        <div class="info">
+            <div class="info-item">💡 VibeTunnel runs in your system tray</div>
+            <div class="info-item">🖱️ Click the tray icon to access quick actions</div>
+            <div class="info-item">⌨️ Use the <code>vt</code> command to create terminal sessions</div>
+        </div>
     </div>
+
+    <script>
+        // Add error handling for Tauri API
+        let tauriApi = null;
+        try {
+            if (window.__TAURI__) {
+                tauriApi = window.__TAURI__;
+                console.log('Tauri API loaded successfully');
+            } else {
+                console.error('Tauri API not available');
+            }
+        } catch (error) {
+            console.error('Error loading Tauri API:', error);
+        }
+
+        const invoke = tauriApi?.tauri?.invoke || (() => Promise.reject('Tauri not available'));
+        const open = tauriApi?.shell?.open || (() => Promise.reject('Tauri shell not available'));
+
+        async function checkServerStatus() {
+            const statusEl = document.getElementById('statusText');
+            const spinner = document.getElementById('loadingSpinner');
+            
+            try {
+                spinner.style.display = 'inline-block';
+                const status = await invoke('get_server_status');
+                
+                if (status.running) {
+                    statusEl.textContent = `Server running on port ${status.port}`;
+                    statusEl.style.color = '#32d74b';
+                } else {
+                    statusEl.textContent = 'Server not running';
+                    statusEl.style.color = '#ff453a';
+                }
+            } catch (error) {
+                statusEl.textContent = 'Unable to check server status';
+                statusEl.style.color = '#ff453a';
+            } finally {
+                spinner.style.display = 'none';
+            }
+        }
+
+        async function openDashboard() {
+            try {
+                const status = await invoke('get_server_status');
+                if (status.running) {
+                    await open(status.url);
+                } else {
+                    alert('Server is not running. Please start the server from the tray menu.');
+                }
+            } catch (error) {
+                console.error('Failed to open dashboard:', error);
+                alert('Failed to open dashboard. Please check the server status.');
+            }
+        }
+
+        async function openSettings() {
+            try {
+                await invoke('open_settings_window');
+            } catch (error) {
+                console.error('Failed to open settings:', error);
+            }
+        }
+
+        async function showWelcome() {
+            try {
+                await invoke('show_welcome_window');
+            } catch (error) {
+                console.error('Failed to show welcome:', error);
+            }
+        }
+
+        // Check server status on load
+        window.addEventListener('DOMContentLoaded', () => {
+            console.log('VibeTunnel main window loaded');
+            checkServerStatus();
+            // Refresh status every 5 seconds
+            setInterval(checkServerStatus, 5000);
+        });
+
+        // Listen for server status updates
+        if (tauriApi?.event) {
+            tauriApi.event.listen('server:restarted', (event) => {
+                console.log('Server restarted event received:', event);
+                checkServerStatus();
+            });
+        }
+    </script>
 </body>
 </html>

tauri/src-tauri/src/main.rs

@@ -442,6 +442,7 @@ fn main() {
             // Auto-start server with monitoring
             let app_handle = app.handle().clone();
             tauri::async_runtime::spawn(async move {
+                tracing::info!("Starting server with monitoring...");
                 start_server_with_monitoring(app_handle).await;
             });
 

tauri/src-tauri/src/server.rs

@@ -18,6 +18,7 @@ use std::sync::Arc;
 use tokio::net::TcpListener;
 use tokio::time::{interval, Duration};
 use tower_http::cors::{Any, CorsLayer};
+use tower_http::services::ServeDir;
 use tracing::{debug, error, info};
 
 use crate::auth::{auth_middleware, check_auth, login, AuthConfig};
@@ -215,8 +216,8 @@ impl HttpServer {
             session_monitor: self.session_monitor.clone(),
         };
 
-        // Don't serve static files in Tauri - the frontend is served by Tauri itself
-        // This server is only for the terminal API
+        // Serve the web terminal UI from the web/public directory
+        // This is needed for the dashboard to work when opened in a browser
 
         // Create auth routes that use auth config
         let auth_routes = Router::new()
@@ -251,9 +252,33 @@ impl HttpServer {
             ))
             .with_state(app_state);
 
+        // Find the web assets directory
+        let web_dir = std::env::current_dir()
+            .ok()
+            .and_then(|mut path| {
+                // Try to find the web/public directory relative to the current directory
+                // This works whether we're in src-tauri or the project root
+                if path.ends_with("src-tauri") {
+                    path.pop(); // Go to tauri/
+                    path.pop(); // Go to project root
+                }
+                path.push("web");
+                path.push("public");
+                if path.exists() {
+                    Some(path)
+                } else {
+                    None
+                }
+            })
+            .unwrap_or_else(|| PathBuf::from("../../web/public"));
+
+        info!("Serving web assets from: {:?}", web_dir);
+        let serve_dir = ServeDir::new(web_dir);
+
         Router::new()
             .merge(auth_routes)
             .merge(protected_routes)
+            .fallback_service(serve_dir)
             .layer(
                 CorsLayer::new()
                     .allow_origin(Any)

tauri/src-tauri/src/unix_socket_server.rs

@@ -2,7 +2,7 @@ use serde::{Deserialize, Serialize};
 use std::io::Read;
 use std::os::unix::net::{UnixListener, UnixStream};
 use std::path::Path;
-use std::sync::Arc;
+use std::sync::{Arc, Mutex};
 use tokio::sync::mpsc;
 use tracing::{error, info};
 
@@ -26,33 +26,40 @@ pub struct SpawnResponse {
 
 pub struct UnixSocketServer {
     request_tx: mpsc::Sender<SpawnRequest>,
+    request_rx: Arc<Mutex<Option<mpsc::Receiver<SpawnRequest>>>>,
+    terminal_spawn_service: Arc<crate::terminal_spawn_service::TerminalSpawnService>,
 }
 
 impl UnixSocketServer {
     pub fn new(
         terminal_spawn_service: Arc<crate::terminal_spawn_service::TerminalSpawnService>,
     ) -> Self {
-        let (tx, mut rx) = mpsc::channel::<SpawnRequest>(100);
-
-        // Spawn handler for requests
-        let spawn_service = terminal_spawn_service.clone();
-        tokio::spawn(async move {
-            while let Some(request) = rx.recv().await {
-                let service = spawn_service.clone();
-                tokio::spawn(async move {
-                    if let Err(e) = handle_spawn_request(request, service).await {
-                        error!("Failed to handle spawn request: {}", e);
-                    }
-                });
-            }
-        });
+        let (tx, rx) = mpsc::channel::<SpawnRequest>(100);
 
         Self {
             request_tx: tx,
+            request_rx: Arc::new(Mutex::new(Some(rx))),
+            terminal_spawn_service,
         }
     }
 
     pub fn start(&self) -> Result<(), Box<dyn std::error::Error>> {
+        // Spawn the handler for requests now that runtime is available
+        let rx = self.request_rx.lock().unwrap().take();
+        if let Some(mut rx) = rx {
+            let spawn_service = self.terminal_spawn_service.clone();
+            tokio::spawn(async move {
+                while let Some(request) = rx.recv().await {
+                    let service = spawn_service.clone();
+                    tokio::spawn(async move {
+                        if let Err(e) = handle_spawn_request(request, service).await {
+                            error!("Failed to handle spawn request: {}", e);
+                        }
+                    });
+                }
+            });
+        }
+
         // Remove existing socket if it exists
         if Path::new(SOCKET_PATH).exists() {
             std::fs::remove_file(SOCKET_PATH)?;