Merge branch 'improve-desktop-onboarding-flow-swvs'

Author: knowsuchagency

CLAUDE.md

@@ -123,7 +123,7 @@ Settings are stored in `.vibora/settings.json`. The vibora directory is resolved
 | Setting | Env Var | Default |
 |---------|---------|---------|
 | (base directory) | `VIBORA_DIR` | .vibora in CWD or ~/.vibora |
-| port | `PORT` | 3333 |
+| port | `PORT` | 7777 |
 | defaultGitReposDir | `VIBORA_GIT_REPOS_DIR` | ~ |
 | linearApiKey | `LINEAR_API_KEY` | null |
 
@@ -226,19 +226,13 @@ mise run build:debug                # Web build with debug logging
 
 ### Development vs Production
 
-The `mise run dev` command defaults to `~/.vibora/dev` (port 3222) to keep development data separate from production:
+The `mise run dev` command requires explicit `PORT` and `VIBORA_DIR` environment variables to avoid accidentally running against production data:
 
 ```bash
-# Development (uses ~/.vibora/dev with port 3222)
-mise run dev
+# Development (explicitly set port and directory)
+PORT=3222 VIBORA_DIR=~/.vibora/dev mise run dev
 
-# Development with custom port
-mise run dev 3333
-
-# Development with custom directory
-mise run dev 3333 ~/.vibora/custom
-
-# Production (uses ~/.vibora with port 3333)
+# Production (uses ~/.vibora with port 7777)
 mise run start
 ```
 

DEVELOPMENT.md

@@ -15,7 +15,7 @@ mise install
 mise run dev
 
 # Or run separately:
-mise run server    # Backend (port 3333, with auto-reload)
+mise run server    # Backend (uses PORT env var, with auto-reload)
 mise run client    # Frontend (port 5173, proxies to backend)
 ```
 

README.md

@@ -56,7 +56,7 @@ claude plugin marketplace add knowsuchagency/vibora
 claude plugin install vibora@vibora --scope user
 ```
 
-Open http://localhost:3333 in your browser.
+Open http://localhost:7777 in your browser.
 
 ### Remote Server Setup
 
@@ -76,11 +76,11 @@ Run the backend on a remote server and connect from the desktop app or browser:
 2. **Connect from desktop app:**
    - Launch the app
    - Click "Connect to Remote" (if local server not found)
-   - Enter the server URL: `your-server.example.com:3333`
+   - Enter the server URL: `your-server.example.com:7777`
    - Enter credentials when prompted
 
 3. **Or access via browser:**
-   Open `http://your-server.example.com:3333`
+   Open `http://your-server.example.com:7777`
 
 ### Server Commands (Web Application)
 
@@ -100,7 +100,7 @@ Settings are stored in `.vibora/settings.json`. The vibora directory is resolved
 
 | Setting | Env Var | Default |
 |---------|---------|---------|
-| port | `PORT` | 3333 |
+| port | `PORT` | 7777 |
 | defaultGitReposDir | `VIBORA_GIT_REPOS_DIR` | ~ |
 | remoteHost | `VIBORA_REMOTE_HOST` | (empty) |
 | sshPort | `VIBORA_SSH_PORT` | 22 |
@@ -212,7 +212,7 @@ vibora notify <title> [message]  # Send a notification to all enabled channels
 ### Global Options
 
 ```bash
---port=<port>     # Server port (default: 3333)
+--port=<port>     # Server port (default: 7777)
 --url=<url>       # Override full server URL
 --pretty          # Pretty-print JSON output
 ```

cli/src/index.ts

@@ -125,7 +125,7 @@ Commands:
   dev status                Check if developer mode is enabled
 
 Global Options:
-  --port=<port>     Server port (default: 3333)
+  --port=<port>     Server port (default: 7777)
   --url=<url>       Override full server URL
   --pretty          Pretty-print JSON output
   --version         Show version

cli/src/utils/process.ts

@@ -81,5 +81,5 @@ export function getPort(portOverride?: string): number {
     if (!isNaN(port)) return port
   }
 
-  return 3333
+  return 7777
 }

cli/src/utils/server.ts

@@ -2,12 +2,58 @@ import { existsSync, readFileSync } from 'node:fs'
 import { join } from 'node:path'
 import { homedir } from 'node:os'
 
+// Settings interface supporting both nested (v2) and flat (legacy) formats
 interface Settings {
+  _schemaVersion?: number
+  // Nested format (v2)
+  server?: { port?: number }
+  authentication?: { username?: string | null; password?: string | null }
+  // Legacy flat format
   port?: number
   basicAuthUsername?: string
   basicAuthPassword?: string
 }
 
+const DEFAULT_PORT = 7777
+
+/**
+ * Get port from settings (supports nested and flat formats)
+ */
+function getPortFromSettings(settings: Settings | null): number | null {
+  if (!settings) return null
+  // Try nested format first (v2)
+  if (settings.server?.port) {
+    return settings.server.port
+  }
+  // Fall back to flat format (legacy)
+  if (settings.port) {
+    return settings.port
+  }
+  return null
+}
+
+/**
+ * Get auth credentials from settings (supports nested and flat formats)
+ */
+function getAuthFromSettings(settings: Settings | null): { username: string; password: string } | null {
+  if (!settings) return null
+  // Try nested format first (v2)
+  if (settings.authentication?.username && settings.authentication?.password) {
+    return {
+      username: settings.authentication.username,
+      password: settings.authentication.password,
+    }
+  }
+  // Fall back to flat format (legacy)
+  if (settings.basicAuthUsername && settings.basicAuthPassword) {
+    return {
+      username: settings.basicAuthUsername,
+      password: settings.basicAuthPassword,
+    }
+  }
+  return null
+}
+
 function expandPath(p: string): string {
   if (p.startsWith('~/')) {
     return join(homedir(), p.slice(2))
@@ -36,7 +82,7 @@ function readSettingsFile(path: string): Settings | null {
  * 4. VIBORA_DIR settings.json (read port)
  * 5. .vibora/settings.json in CWD (read port)
  * 6. ~/.vibora/settings.json (read port)
- * 7. Default: http://localhost:3333
+ * 7. Default: http://localhost:7777
  */
 export function discoverServerUrl(urlOverride?: string, portOverride?: string): string {
   // 1. Explicit URL override
@@ -58,27 +104,30 @@ export function discoverServerUrl(urlOverride?: string, portOverride?: string):
   if (process.env.VIBORA_DIR) {
     const viboraDirSettings = join(expandPath(process.env.VIBORA_DIR), 'settings.json')
     const settings = readSettingsFile(viboraDirSettings)
-    if (settings?.port) {
-      return `http://localhost:${settings.port}`
+    const port = getPortFromSettings(settings)
+    if (port) {
+      return `http://localhost:${port}`
     }
   }
 
   // 5. Local .vibora/settings.json
   const cwdSettings = join(process.cwd(), '.vibora', 'settings.json')
   const localSettings = readSettingsFile(cwdSettings)
-  if (localSettings?.port) {
-    return `http://localhost:${localSettings.port}`
+  const localPort = getPortFromSettings(localSettings)
+  if (localPort) {
+    return `http://localhost:${localPort}`
   }
 
   // 6. Global ~/.vibora/settings.json
   const globalSettings = join(homedir(), '.vibora', 'settings.json')
   const homeSettings = readSettingsFile(globalSettings)
-  if (homeSettings?.port) {
-    return `http://localhost:${homeSettings.port}`
+  const homePort = getPortFromSettings(homeSettings)
+  if (homePort) {
+    return `http://localhost:${homePort}`
   }
 
   // 7. Default
-  return 'http://localhost:3333'
+  return `http://localhost:${DEFAULT_PORT}`
 }
 
 /**
@@ -101,6 +150,7 @@ export function getViboraDir(): string {
 
 /**
  * Gets auth credentials from settings.json.
+ * Supports both nested (v2) and flat (legacy) formats.
  * Priority: VIBORA_DIR → CWD .vibora → ~/.vibora
  * Returns null if no credentials are configured.
  */
@@ -113,11 +163,9 @@ export function getAuthCredentials(): { username: string; password: string } | n
 
   for (const path of settingsPaths) {
     const settings = readSettingsFile(path)
-    if (settings?.basicAuthUsername && settings?.basicAuthPassword) {
-      return {
-        username: settings.basicAuthUsername,
-        password: settings.basicAuthPassword,
-      }
+    const auth = getAuthFromSettings(settings)
+    if (auth) {
+      return auth
     }
   }
 

desktop/README.md

@@ -60,9 +60,12 @@ Desktop-specific settings are saved to `~/.vibora/settings.json`:
 
 ```json
 {
-  "port": 3333,
-  "remoteHost": "my-server.tailnet.ts.net",
-  "remotePort": 3333,
+  "_schemaVersion": 2,
+  "server": { "port": 7777 },
+  "remoteVibora": {
+    "host": "my-server.tailnet.ts.net",
+    "port": 7777
+  },
   "lastConnectedHost": "my-server.tailnet.ts.net"
 }
 ```
@@ -157,12 +160,14 @@ To use the desktop app with a remote Vibora server:
 
 2. **Ensure the server is accessible**:
    - Via Tailscale: Use your machine's Tailscale hostname (e.g., `my-server.tailnet.ts.net`)
-   - Via direct IP: Ensure port 3333 (or your configured port) is accessible
+   - Via direct IP: Ensure port 7777 (or your configured port) is accessible
 
 3. **Configure the remote host** in your local `~/.vibora/settings.json`:
    ```json
    {
-     "remoteHost": "my-server.tailnet.ts.net"
+     "remoteVibora": {
+       "host": "my-server.tailnet.ts.net"
+     }
    }
    ```
 

desktop/resources/index.html

@@ -150,6 +150,11 @@
       margin-top: 8px;
     }
 
+    .button-group.vertical {
+      flex-direction: column;
+      gap: 12px;
+    }
+
     .primary-btn, .secondary-btn, .retry-btn {
       flex: 1;
       padding: 10px 16px;
@@ -161,6 +166,38 @@
       border: none;
     }
 
+    .primary-btn.large, .secondary-btn.large {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      padding: 16px 20px;
+      border-radius: 10px;
+      text-align: left;
+    }
+
+    .btn-icon {
+      font-size: 24px;
+      flex-shrink: 0;
+    }
+
+    .btn-content {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    .btn-title {
+      font-size: 15px;
+      font-weight: 600;
+      color: inherit;
+    }
+
+    .btn-desc {
+      font-size: 12px;
+      opacity: 0.7;
+      font-weight: 400;
+    }
+
     .primary-btn {
       background: #3b82f6;
       color: white;