add remote server launcher flow (#277)

## Summary
- add a remote CodeNomad server launcher flow in the home screen,
including saved server profiles, probe-before-connect behavior, and
desktop bridge APIs for opening remote windows
- add Electron support for remote server windows with per-window origin
handling and self-signed certificate bypass, plus Tauri support for
remote windows with clearer self-signed guidance
- fix Tauri dev server resolution and window shutdown behavior so dev
mode prefers the source server entry and the app only exits after the
last window closes

.github/workflows/comment-pr-artifacts.yml

@@ -4,6 +4,7 @@ on:
   pull_request_target:
     types:
       - opened
+      - edited
       - synchronize
       - reopened
       - ready_for_review
@@ -19,7 +20,7 @@ jobs:
     runs-on: ubuntu-latest
     env:
       ALLOWED_ACTORS: ${{ vars.ALLOWED_NON_DEV_PR_ACTORS }}
-      ACTOR: ${{ github.actor }}
+      PR_AUTHOR: ${{ github.event.pull_request.user.login }}
       BASE_REF: ${{ github.event.pull_request.base.ref }}
       IS_DRAFT: ${{ github.event.pull_request.draft }}
       PR_NUMBER: ${{ github.event.pull_request.number }}
@@ -37,7 +38,7 @@ jobs:
           fi
 
           normalized=",${ALLOWED_ACTORS},"
-          if [[ "$normalized" == *",${ACTOR},"* ]]; then
+          if [[ "$normalized" == *",${PR_AUTHOR},"* ]]; then
             echo "allowed=true" >> "$GITHUB_OUTPUT"
           else
             echo "allowed=false" >> "$GITHUB_OUTPUT"

.github/workflows/pr-build.yml

@@ -4,6 +4,7 @@ on:
   pull_request:
     types:
       - opened
+      - edited
       - synchronize
       - reopened
       - ready_for_review
@@ -23,7 +24,7 @@ jobs:
       allowed: ${{ steps.auth.outputs.allowed }}
     env:
       ALLOWED_ACTORS: ${{ vars.ALLOWED_NON_DEV_PR_ACTORS }}
-      ACTOR: ${{ github.actor }}
+      PR_AUTHOR: ${{ github.event.pull_request.user.login }}
       BASE_REF: ${{ github.event.pull_request.base.ref }}
     steps:
       - name: Check PR authorization
@@ -37,11 +38,11 @@ jobs:
           fi
 
           normalized=",${ALLOWED_ACTORS},"
-          if [[ "$normalized" == *",${ACTOR},"* ]]; then
+          if [[ "$normalized" == *",${PR_AUTHOR},"* ]]; then
             echo "allowed=true" >> "$GITHUB_OUTPUT"
           else
             echo "allowed=false" >> "$GITHUB_OUTPUT"
-            echo "Skipping builds for unauthorized PR targeting $BASE_REF" >&2
+            echo "Skipping builds for PR by unauthorized author targeting $BASE_REF" >&2
           fi
 
   build:

.github/workflows/restrict-non-dev-prs.yml

@@ -4,6 +4,7 @@ on:
   pull_request_target:
     types:
       - opened
+      - edited
       - reopened
       - synchronize
 
@@ -17,7 +18,7 @@ jobs:
     runs-on: ubuntu-latest
     env:
       ALLOWED_ACTORS: ${{ vars.ALLOWED_NON_DEV_PR_ACTORS }}
-      ACTOR: ${{ github.actor }}
+      PR_AUTHOR: ${{ github.event.pull_request.user.login }}
       PR_NUMBER: ${{ github.event.pull_request.number }}
       BASE_REF: ${{ github.event.pull_request.base.ref }}
     steps:
@@ -27,7 +28,7 @@ jobs:
         run: |
           set -euo pipefail
           normalized=",${ALLOWED_ACTORS},"
-          if [[ "$normalized" == *",${ACTOR},"* ]]; then
+          if [[ "$normalized" == *",${PR_AUTHOR},"* ]]; then
             echo "authorized=true" >> "$GITHUB_OUTPUT"
           else
             echo "authorized=false" >> "$GITHUB_OUTPUT"
@@ -50,5 +51,5 @@ jobs:
       - name: Fail unauthorized PR
         if: ${{ steps.auth.outputs.authorized != 'true' }}
         run: |
-          echo "Actor $ACTOR is not allowed to open PRs targeting $BASE_REF" >&2
+          echo "PR author $PR_AUTHOR is not allowed to open PRs targeting $BASE_REF" >&2
           exit 1

packages/electron-app/electron/main/ipc.ts

@@ -117,6 +117,28 @@ export function setupCliIPC(mainWindow: BrowserWindow, cliManager: CliProcessMan
     async (): Promise<{ granted: boolean }> => ({ granted: await requestMicrophoneAccess() }),
   )
 
+  ipcMain.handle(
+    "remote:openWindow",
+    async (
+      _event,
+      payload: { id: string; name: string; baseUrl: string; skipTlsVerify: boolean },
+    ): Promise<{ ok: boolean }> => {
+      const opener = (mainWindow as BrowserWindow & {
+        __codenomadOpenRemoteWindow?: (payload: {
+          id: string
+          name: string
+          baseUrl: string
+          skipTlsVerify: boolean
+        }) => Promise<void>
+      }).__codenomadOpenRemoteWindow
+      if (!opener) {
+        throw new Error("Remote window opening is not available")
+      }
+      await opener(payload)
+      return { ok: true }
+    },
+  )
+
   ipcMain.handle(
     "notifications:show",
     async (_event, payload: { title?: unknown; body?: unknown }): Promise<{ ok: boolean; reason?: string }> => {

packages/electron-app/electron/main/main.ts

@@ -21,6 +21,8 @@ let pendingCliUrl: string | null = null
 let pendingBootstrapToken: string | null = null
 let showingLoadingScreen = false
 let preloadingView: BrowserView | null = null
+const remoteWindowOrigins = new Map<number, Set<string>>()
+const insecureWindowOrigins = new Map<number, Set<string>>()
 
 if (isMac) {
   app.commandLine.appendSwitch("disable-spell-checking")
@@ -93,8 +95,13 @@ function loadLoadingScreen(window: BrowserWindow) {
   })
 }
 
-function getAllowedRendererOrigins(): string[] {
+function getAllowedRendererOrigins(window?: BrowserWindow | null): string[] {
   const origins = new Set<string>()
+  if (window) {
+    for (const origin of remoteWindowOrigins.get(window.id) ?? []) {
+      origins.add(origin)
+    }
+  }
   const rendererCandidates = [currentCliUrl, process.env.VITE_DEV_SERVER_URL, process.env.ELECTRON_RENDERER_URL]
   for (const candidate of rendererCandidates) {
     if (!candidate) {
@@ -109,13 +116,13 @@ function getAllowedRendererOrigins(): string[] {
   return Array.from(origins)
 }
 
-function shouldOpenExternally(url: string): boolean {
+function shouldOpenExternally(url: string, window?: BrowserWindow | null): boolean {
   try {
     const parsed = new URL(url)
     if (parsed.protocol !== "http:" && parsed.protocol !== "https:") {
       return true
     }
-    const allowedOrigins = getAllowedRendererOrigins()
+    const allowedOrigins = getAllowedRendererOrigins(window)
     return !allowedOrigins.includes(parsed.origin)
   } catch {
     return false
@@ -128,7 +135,7 @@ function setupNavigationGuards(window: BrowserWindow) {
   }
 
   window.webContents.setWindowOpenHandler(({ url }) => {
-    if (shouldOpenExternally(url)) {
+    if (shouldOpenExternally(url, window)) {
       handleExternal(url)
       return { action: "deny" }
     }
@@ -136,13 +143,54 @@ function setupNavigationGuards(window: BrowserWindow) {
   })
 
   window.webContents.on("will-navigate", (event, url) => {
-    if (shouldOpenExternally(url)) {
+    if (shouldOpenExternally(url, window)) {
       event.preventDefault()
       handleExternal(url)
     }
   })
 }
 
+function setWindowAllowedOrigin(window: BrowserWindow, url: string) {
+  try {
+    const origin = new URL(url).origin
+    remoteWindowOrigins.set(window.id, new Set([origin]))
+  } catch (error) {
+    console.warn("[cli] failed to store allowed origin", url, error)
+  }
+}
+
+function clearWindowAllowedOrigin(window: BrowserWindow) {
+  remoteWindowOrigins.delete(window.id)
+}
+
+function addWindowInsecureOrigin(window: BrowserWindow, url: string) {
+  try {
+    const origin = new URL(url).origin
+    insecureWindowOrigins.set(window.id, new Set([origin]))
+  } catch (error) {
+    console.warn("[cli] failed to store insecure origin", url, error)
+  }
+}
+
+function clearWindowInsecureOrigin(window: BrowserWindow) {
+  insecureWindowOrigins.delete(window.id)
+}
+
+function isInsecureOriginAllowed(url: string) {
+  try {
+    const targetOrigin = new URL(url).origin
+    for (const origins of insecureWindowOrigins.values()) {
+      if (origins.has(targetOrigin)) {
+        return true
+      }
+    }
+  } catch {
+    return false
+  }
+
+  return false
+}
+
 let cachedPreloadPath: string | null = null
 function getPreloadPath() {
   if (cachedPreloadPath && existsSync(cachedPreloadPath)) {
@@ -207,25 +255,30 @@ function createWindow() {
     },
   })
 
-  setupNavigationGuards(mainWindow)
+  const window = mainWindow
+
+  setupNavigationGuards(window)
 
   if (isMac) {
-    mainWindow.webContents.session.setSpellCheckerEnabled(false)
+    window.webContents.session.setSpellCheckerEnabled(false)
   }
 
   showingLoadingScreen = true
   currentCliUrl = null
-  loadLoadingScreen(mainWindow)
+  clearWindowAllowedOrigin(window)
+  loadLoadingScreen(window)
 
   if (process.env.NODE_ENV === "development") {
-    mainWindow.webContents.openDevTools({ mode: "detach" })
+    window.webContents.openDevTools({ mode: "detach" })
   }
 
-  createApplicationMenu(mainWindow)
-  setupCliIPC(mainWindow, cliManager)
+  createApplicationMenu(window)
+  setupCliIPC(window, cliManager)
 
-  mainWindow.on("closed", () => {
+  window.on("closed", () => {
     destroyPreloadingView()
+    clearWindowAllowedOrigin(window)
+    clearWindowInsecureOrigin(window)
     mainWindow = null
     currentCliUrl = null
     pendingCliUrl = null
@@ -322,13 +375,68 @@ function finalizeCliSwap(url: string) {
     return
   }
 
+  const window = mainWindow
   showingLoadingScreen = false
   currentCliUrl = url
+  setWindowAllowedOrigin(window, url)
   pendingCliUrl = null
-  mainWindow.loadURL(url).catch((error) => console.error("[cli] failed to load CLI view:", error))
+  window.loadURL(url).catch((error) => console.error("[cli] failed to load CLI view:", error))
+}
+
+function buildRemoteWindowTitle(name: string, baseUrl: string) {
+  try {
+    const parsed = new URL(baseUrl)
+    return `${name} - ${parsed.host}`
+  } catch {
+    return `${name} - ${baseUrl}`
+  }
+}
+
+function buildRemoteErrorHtml(name: string, baseUrl: string, message: string) {
+  const escapedName = name.replace(/[&<>"]/g, (char) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" }[char] ?? char))
+  const escapedUrl = baseUrl.replace(/[&<>"]/g, (char) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" }[char] ?? char))
+  const escapedMessage = message.replace(/[&<>"]/g, (char) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" }[char] ?? char))
+  return `<!doctype html><html><head><meta charset="utf-8" /><title>${escapedName}</title><style>body{margin:0;background:#111827;color:#f9fafb;font-family:Inter,system-ui,sans-serif;display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px}main{max-width:560px;width:100%;background:rgba(17,24,39,.88);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:28px;box-shadow:0 25px 60px rgba(0,0,0,.45)}h1{margin:0 0 10px;font-size:1.5rem}p{margin:0 0 10px;color:#cbd5e1;line-height:1.5}code{display:block;margin-top:16px;padding:12px 14px;border-radius:12px;background:#0f172a;color:#bfdbfe;overflow:auto}</style></head><body><main><h1>${escapedName}</h1><p>Could not connect to the remote server.</p><p>${escapedMessage}</p><code>${escapedUrl}</code></main></body></html>`
+}
+
+async function openRemoteWindow(payload: { id: string; name: string; baseUrl: string; skipTlsVerify: boolean }) {
+  const targetUrl = new URL(payload.baseUrl)
+  const title = buildRemoteWindowTitle(payload.name, payload.baseUrl)
+  const window = new BrowserWindow({
+    width: 1400,
+    height: 900,
+    minWidth: 800,
+    minHeight: 600,
+    backgroundColor: "#1a1a1a",
+    icon: getIconPath(),
+    title,
+    webPreferences: {
+      preload: getPreloadPath(),
+      contextIsolation: true,
+      nodeIntegration: false,
+      spellcheck: !isMac,
+    },
+  })
+
+  setWindowAllowedOrigin(window, targetUrl.toString())
+  if (payload.skipTlsVerify) {
+    addWindowInsecureOrigin(window, targetUrl.toString())
+  }
+
+  setupNavigationGuards(window)
+  window.on("closed", () => {
+    clearWindowAllowedOrigin(window)
+    clearWindowInsecureOrigin(window)
+  })
+
+  try {
+    await window.loadURL(targetUrl.toString())
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error)
+    await window.loadURL(`data:text/html;charset=utf-8,${encodeURIComponent(buildRemoteErrorHtml(payload.name, payload.baseUrl, message))}`)
+  }
 }
 
-const SESSION_COOKIE_NAME = "codenomad_session"
 let bootstrapExchangeInFlight = false
 
 function extractCookieValue(setCookieHeader: string | string[] | undefined, name: string): string | null {
@@ -351,6 +459,7 @@ function extractCookieValue(setCookieHeader: string | string[] | undefined, name
 }
 
 async function exchangeBootstrapToken(baseUrl: string, token: string): Promise<boolean> {
+  const sessionCookieName = cliManager.getAuthCookieName()
   const target = new URL("/api/auth/token", baseUrl)
   const body = JSON.stringify({ token })
 
@@ -381,14 +490,14 @@ async function exchangeBootstrapToken(baseUrl: string, token: string): Promise<b
     return false
   }
 
-  const sessionId = extractCookieValue(result.setCookie, SESSION_COOKIE_NAME)
+  const sessionId = extractCookieValue(result.setCookie, sessionCookieName)
   if (!sessionId) {
     return false
   }
 
   await session.defaultSession.cookies.set({
     url: baseUrl,
-    name: SESSION_COOKIE_NAME,
+    name: sessionCookieName,
     value: sessionId,
     httpOnly: true,
     path: "/",
@@ -504,6 +613,17 @@ app.whenReady().then(() => {
   }
 
   createWindow()
+  ;(mainWindow as BrowserWindow & { __codenomadOpenRemoteWindow?: typeof openRemoteWindow }).__codenomadOpenRemoteWindow = openRemoteWindow
+
+  app.on("certificate-error", (event, _webContents, url, error, _certificate, callback) => {
+    if (isInsecureOriginAllowed(url)) {
+      event.preventDefault()
+      console.warn("[cli] allowing insecure remote certificate for", url, error)
+      callback(true)
+      return
+    }
+    callback(false)
+  })
 
   app.on("activate", () => {
     if (BrowserWindow.getAllWindows().length === 0) {

packages/electron-app/electron/main/process-manager.ts

@@ -14,6 +14,7 @@ const mainFilename = fileURLToPath(import.meta.url)
 const mainDirname = path.dirname(mainFilename)
 
 const BOOTSTRAP_TOKEN_PREFIX = "CODENOMAD_BOOTSTRAP_TOKEN:"
+const SESSION_COOKIE_NAME_PREFIX = "codenomad_session"
 
 type CliState = "starting" | "ready" | "error" | "stopped"
 type ListeningMode = "local" | "all"
@@ -129,6 +130,7 @@ export class CliProcessManager extends EventEmitter {
   private stdoutBuffer = ""
   private stderrBuffer = ""
   private bootstrapToken: string | null = null
+  private authCookieName = `${SESSION_COOKIE_NAME_PREFIX}_${process.pid}_${Date.now()}`
   private requestedStop = false
 
   async start(options: StartOptions): Promise<CliStatus> {
@@ -139,6 +141,7 @@ export class CliProcessManager extends EventEmitter {
     this.stdoutBuffer = ""
     this.stderrBuffer = ""
     this.bootstrapToken = null
+    this.authCookieName = `${SESSION_COOKIE_NAME_PREFIX}_${process.pid}_${Date.now()}`
     this.requestedStop = false
     this.updateStatus({ state: "starting", port: undefined, pid: undefined, url: undefined, error: undefined })
 
@@ -436,6 +439,10 @@ export class CliProcessManager extends EventEmitter {
     return { ...this.status }
   }
 
+  getAuthCookieName(): string {
+    return this.authCookieName
+  }
+
   private resolveListeningMode(): ListeningMode {
     return readListeningModeFromConfig()
   }
@@ -532,7 +539,7 @@ export class CliProcessManager extends EventEmitter {
   }
 
   private buildCliArgs(options: StartOptions, host: string): string[] {
-    const args = ["serve", "--host", host, "--generate-token"]
+    const args = ["serve", "--host", host, "--generate-token", "--auth-cookie-name", this.authCookieName]
 
     if (options.dev) {
       // Dev: run plain HTTP + Vite dev server proxy.

packages/electron-app/electron/preload/index.cjs

@@ -23,6 +23,7 @@ const electronAPI = {
   requestMicrophoneAccess: () => ipcRenderer.invoke("media:requestMicrophoneAccess"),
   setWakeLock: (enabled) => ipcRenderer.invoke("power:setWakeLock", Boolean(enabled)),
   showNotification: (payload) => ipcRenderer.invoke("notifications:show", payload),
+  openRemoteWindow: (payload) => ipcRenderer.invoke("remote:openWindow", payload),
 }
 
 contextBridge.exposeInMainWorld("electronAPI", electronAPI)

packages/server/src/api-types.ts

@@ -244,6 +244,32 @@ export interface VoiceModeStateResponse {
   enabled: boolean
 }
 
+export interface RemoteServerProfile {
+  id: string
+  name: string
+  baseUrl: string
+  skipTlsVerify: boolean
+  createdAt: string
+  updatedAt: string
+  lastConnectedAt?: string
+}
+
+export interface RemoteServerProbeRequest {
+  baseUrl: string
+  skipTlsVerify?: boolean
+}
+
+export interface RemoteServerProbeResponse {
+  ok: boolean
+  reachable: boolean
+  normalizedUrl: string
+  skipTlsVerify: boolean
+  requiresAuth: boolean
+  authenticated: boolean
+  error?: string
+  errorCode?: string
+}
+
 export type WorkspaceEventType =
   | "workspace.created"
   | "workspace.started"

packages/server/src/auth/manager.ts

@@ -16,16 +16,18 @@ export interface AuthManagerInit {
   password?: string
   generateToken: boolean
   dangerouslySkipAuth?: boolean
+  cookieName?: string
 }
 
 export class AuthManager {
   private readonly authStore: AuthStore | null
   private readonly tokenManager: TokenManager | null
   private readonly sessionManager = new SessionManager()
-  private readonly cookieName = DEFAULT_AUTH_COOKIE_NAME
+  private readonly cookieName: string
   private readonly authEnabled: boolean
 
   constructor(private readonly init: AuthManagerInit, private readonly logger: Logger) {
+    this.cookieName = sanitizeCookieName(init.cookieName)
     this.authEnabled = !Boolean(init.dangerouslySkipAuth)
 
     if (!this.authEnabled) {
@@ -139,6 +141,16 @@ export class AuthManager {
   }
 }
 
+function sanitizeCookieName(value: string | undefined): string {
+  const trimmed = value?.trim()
+  if (!trimmed) {
+    return DEFAULT_AUTH_COOKIE_NAME
+  }
+
+  const sanitized = trimmed.replace(/[^A-Za-z0-9_-]/g, "_")
+  return sanitized.length > 0 ? sanitized : DEFAULT_AUTH_COOKIE_NAME
+}
+
 function resolveAuthFilePath(configPath: string) {
   const resolvedConfigPath = resolvePath(configPath)
   return path.join(path.dirname(resolvedConfigPath), "auth.json")

packages/server/src/config/schema.ts

@@ -26,6 +26,7 @@ const PreferencesSchema = z
   showUsageMetrics: z.boolean().default(true),
   autoCleanupBlankSessions: z.boolean().default(true),
   listeningMode: z.enum(["local", "all"]).default("local"),
+  logLevel: z.enum(["DEBUG", "INFO", "WARN", "ERROR"]).default("DEBUG"),
 
   // OS notifications
   osNotificationsEnabled: z.boolean().default(false),

packages/server/src/index.ts

@@ -19,9 +19,9 @@ import { InstanceEventBridge } from "./workspaces/instance-events"
 import { createLogger } from "./logger"
 import { launchInBrowser } from "./launcher"
 import { resolveUi } from "./ui/remote-ui"
-import { AuthManager, BOOTSTRAP_TOKEN_STDOUT_PREFIX, DEFAULT_AUTH_USERNAME } from "./auth/manager"
+import { AuthManager, BOOTSTRAP_TOKEN_STDOUT_PREFIX, DEFAULT_AUTH_COOKIE_NAME, DEFAULT_AUTH_USERNAME } from "./auth/manager"
 import { resolveHttpsOptions } from "./server/tls"
-import { resolveNetworkAddresses } from "./server/network-addresses"
+import { resolveNetworkAddresses, resolveRemoteAddresses } from "./server/network-addresses"
 import { startDevReleaseMonitor } from "./releases/dev-release-monitor"
 import { SpeechService } from "./speech/service"
 
@@ -55,6 +55,7 @@ interface CliOptions {
   launch: boolean
   authUsername: string
   authPassword?: string
+  authCookieName: string
   generateToken: boolean
   dangerouslySkipAuth: boolean
 }
@@ -100,6 +101,11 @@ function parseCliOptions(argv: string[]): CliOptions {
         .default(DEFAULT_AUTH_USERNAME),
     )
     .addOption(new Option("--password <password>", "Password for server authentication").env("CODENOMAD_SERVER_PASSWORD"))
+    .addOption(
+      new Option("--auth-cookie-name <name>", "Cookie name for server authentication")
+        .env("CODENOMAD_AUTH_COOKIE_NAME")
+        .default(DEFAULT_AUTH_COOKIE_NAME),
+    )
     .addOption(
       new Option("--generate-token", "Emit a one-time bootstrap token for desktop")
         .env("CODENOMAD_GENERATE_TOKEN")
@@ -139,6 +145,7 @@ function parseCliOptions(argv: string[]): CliOptions {
     launch?: boolean
     username: string
     password?: string
+    authCookieName: string
     generateToken?: boolean
     dangerouslySkipAuth?: boolean
   }>()
@@ -185,6 +192,7 @@ function parseCliOptions(argv: string[]): CliOptions {
     launch: Boolean(parsed.launch),
     authUsername: parsed.username,
     authPassword: parsed.password,
+    authCookieName: parsed.authCookieName,
     generateToken: Boolean(parsed.generateToken),
     dangerouslySkipAuth: Boolean(parsed.dangerouslySkipAuth),
   }
@@ -266,6 +274,7 @@ async function main() {
       configPath: configLocation.configYamlPath,
       username: options.authUsername,
       password: options.authPassword,
+      cookieName: options.authCookieName,
       generateToken: options.generateToken,
       dangerouslySkipAuth: options.dangerouslySkipAuth,
     },
@@ -442,18 +451,22 @@ async function main() {
   // which can lead clients to talk to the wrong process.
   const localUrl = `${localProtocol}://127.0.0.1:${localStart.port}`
   let remoteUrl: string | undefined
+  let remoteAddresses = [] as ReturnType<typeof resolveNetworkAddresses>
   if (remoteStart) {
     const wantsAll = options.host === "0.0.0.0" || !isLoopbackHost(options.host)
     let remoteHost = options.host
     if (wantsAll) {
       if (options.host === "0.0.0.0") {
-        const candidates = resolveNetworkAddresses({ host: options.host, protocol: remoteProtocol, port: remoteStart.port })
-        remoteHost = candidates.find((addr) => addr.scope === "external")?.ip ?? "localhost"
+        const resolved = resolveRemoteAddresses({ host: options.host, protocol: remoteProtocol, port: remoteStart.port })
+        remoteAddresses = resolved.userVisible
+        remoteUrl = resolved.primaryRemoteUrl ?? `${remoteProtocol}://localhost:${remoteStart.port}`
       }
     } else {
       remoteHost = "localhost"
     }
-    remoteUrl = `${remoteProtocol}://${remoteHost}:${remoteStart.port}`
+    if (!remoteUrl) {
+      remoteUrl = `${remoteProtocol}://${remoteHost}:${remoteStart.port}`
+    }
   }
 
   serverMeta.localUrl = localUrl
@@ -464,7 +477,9 @@ async function main() {
   serverMeta.listeningMode = options.host === "0.0.0.0" || !isLoopbackHost(options.host) ? "all" : "local"
 
   if (serverMeta.remotePort && remoteUrl) {
-    serverMeta.addresses = resolveNetworkAddresses({ host: options.host, protocol: remoteProtocol, port: serverMeta.remotePort })
+    serverMeta.addresses = remoteAddresses.length
+      ? remoteAddresses
+      : resolveNetworkAddresses({ host: options.host, protocol: remoteProtocol, port: serverMeta.remotePort })
   } else {
     serverMeta.addresses = []
   }
@@ -472,6 +487,16 @@ async function main() {
   console.log(`Local Connection URL : ${serverMeta.localUrl}`)
   if (serverMeta.remoteUrl) {
     console.log(`Remote Connection URL : ${serverMeta.remoteUrl}`)
+    const additionalRemoteUrls = serverMeta.addresses
+      .map((addr) => addr.remoteUrl)
+      .filter((url) => url !== serverMeta.remoteUrl)
+
+    if (additionalRemoteUrls.length > 0) {
+      console.log("Other Accessible URLs:")
+      for (const url of additionalRemoteUrls) {
+        console.log(`  - ${url}`)
+      }
+    }
   }
 
   if (options.launch) {

packages/server/src/server/__tests__/network-addresses.test.ts

@@ -0,0 +1,94 @@
+import assert from "node:assert/strict"
+import os from "node:os"
+import { describe, it } from "node:test"
+
+import { resolveNetworkAddresses, resolveRemoteAddresses } from "../network-addresses"
+
+describe("resolveNetworkAddresses", () => {
+  it("preserves interface order among external addresses", () => {
+    const addresses = [
+      { address: "172.24.0.1", family: "IPv4", internal: false },
+      { address: "192.168.1.128", family: "IPv4", internal: false },
+      { address: "10.0.0.8", family: 4, internal: false },
+      { address: "127.0.0.1", family: "IPv4", internal: true },
+      { address: "169.254.10.20", family: "IPv4", internal: false },
+    ]
+
+    usingMockedNetworkInterfaces(addresses, () => {
+      const result = resolveNetworkAddresses({ host: "0.0.0.0", protocol: "https", port: 9898 })
+
+      assert.deepEqual(
+        result.map((entry) => entry.ip),
+        ["172.24.0.1", "192.168.1.128", "10.0.0.8", "169.254.10.20", "127.0.0.1"],
+      )
+    })
+  })
+})
+
+describe("resolveRemoteAddresses", () => {
+  it("keeps all external addresses user-visible while preferring non-link-local addresses for the primary URL", () => {
+    const addresses = [
+      { address: "169.254.10.20", family: "IPv4", internal: false },
+      { address: "192.168.1.128", family: "IPv4", internal: false },
+      { address: "172.24.0.1", family: "IPv4", internal: false },
+    ]
+
+    usingMockedNetworkInterfaces(addresses, () => {
+      const result = resolveRemoteAddresses({ host: "0.0.0.0", protocol: "https", port: 9898 })
+
+      assert.deepEqual(
+        result.userVisible.map((entry) => entry.ip),
+        ["192.168.1.128", "172.24.0.1", "169.254.10.20"],
+      )
+      assert.equal(result.primaryRemoteUrl, "https://192.168.1.128:9898")
+    })
+  })
+
+  it("prefers private LAN addresses over public addresses", () => {
+    const addresses = [
+      { address: "203.0.113.40", family: "IPv4", internal: false },
+      { address: "192.168.1.128", family: "IPv4", internal: false },
+      { address: "8.8.8.8", family: "IPv4", internal: false },
+    ]
+
+    usingMockedNetworkInterfaces(addresses, () => {
+      const result = resolveRemoteAddresses({ host: "0.0.0.0", protocol: "https", port: 9898 })
+
+      assert.deepEqual(
+        result.userVisible.map((entry) => entry.ip),
+        ["192.168.1.128", "203.0.113.40", "8.8.8.8"],
+      )
+      assert.equal(result.primaryRemoteUrl, "https://192.168.1.128:9898")
+    })
+  })
+
+  it("uses a public address when no private LAN address is available", () => {
+    const addresses = [
+      { address: "169.254.10.20", family: "IPv4", internal: false },
+      { address: "203.0.113.40", family: "IPv4", internal: false },
+    ]
+
+    usingMockedNetworkInterfaces(addresses, () => {
+      const result = resolveRemoteAddresses({ host: "0.0.0.0", protocol: "https", port: 9898 })
+
+      assert.deepEqual(result.userVisible.map((entry) => entry.ip), ["203.0.113.40", "169.254.10.20"])
+      assert.equal(result.primaryRemoteUrl, "https://203.0.113.40:9898")
+    })
+  })
+})
+
+function usingMockedNetworkInterfaces(
+  addresses: Array<{ address: string; family: string | number; internal: boolean }>,
+  callback: () => void,
+) {
+  const original = os.networkInterfaces
+  os.networkInterfaces = (() => ({
+    ethernet0: addresses as unknown as ReturnType<typeof os.networkInterfaces>[string],
+  })) as typeof os.networkInterfaces
+
+  try {
+    callback()
+  } finally {
+    os.networkInterfaces = original
+  }
+}

packages/server/src/server/http-server.ts

@@ -22,6 +22,7 @@ import { registerPluginRoutes } from "./routes/plugin"
 import { registerBackgroundProcessRoutes } from "./routes/background-processes"
 import { registerWorktreeRoutes } from "./routes/worktrees"
 import { registerSpeechRoutes } from "./routes/speech"
+import { registerRemoteServerRoutes } from "./routes/remote-servers"
 import { ServerMeta } from "../api-types"
 import { InstanceStore } from "../storage/instance-store"
 import { BackgroundProcessManager } from "../background-processes/manager"
@@ -270,6 +271,7 @@ export function createHttpServer(deps: HttpServerDeps) {
     eventBus: deps.eventBus,
     workspaceManager: deps.workspaceManager,
   })
+  registerRemoteServerRoutes(app, { logger: apiLogger })
   registerSpeechRoutes(app, { speechService: deps.speechService })
   registerPluginRoutes(app, {
     workspaceManager: deps.workspaceManager,

packages/server/src/server/network-addresses.ts

@@ -1,6 +1,12 @@
 import os from "os"
 import type { NetworkAddress } from "../api-types"
 
+export interface ResolvedRemoteAddresses {
+  all: NetworkAddress[]
+  userVisible: NetworkAddress[]
+  primaryRemoteUrl?: string
+}
+
 export function resolveNetworkAddresses(args: {
   host: string
   protocol: "http" | "https"
@@ -58,10 +64,57 @@ export function resolveNetworkAddresses(args: {
   return results.sort((a, b) => {
     const scopeDelta = scopeWeight[a.scope] - scopeWeight[b.scope]
     if (scopeDelta !== 0) return scopeDelta
-    return a.ip.localeCompare(b.ip)
+
+    return 0
   })
 }
 
+export function resolveRemoteAddresses(args: {
+  host: string
+  protocol: "http" | "https"
+  port: number
+}): ResolvedRemoteAddresses {
+  const all = resolveNetworkAddresses(args)
+  const userVisible = sortUserVisibleAddresses(all.filter((address) => address.scope === "external"))
+  return {
+    all,
+    userVisible,
+    primaryRemoteUrl: userVisible[0]?.remoteUrl,
+  }
+}
+
+function sortUserVisibleAddresses(addresses: NetworkAddress[]): NetworkAddress[] {
+  return [...addresses].sort((left, right) => getUserVisiblePriority(left.ip) - getUserVisiblePriority(right.ip))
+}
+
+function getUserVisiblePriority(ip: string): number {
+  if (isPrivateIPv4(ip)) return 0
+  if (isLinkLocalIPv4(ip)) return 2
+  return 1
+}
+
+function isLinkLocalIPv4(ip: string): boolean {
+  const octets = parseIPv4(ip)
+  if (!octets) return false
+  const [first, second] = octets
+  return first === 169 && second === 254
+}
+
+function isPrivateIPv4(ip: string): boolean {
+  const octets = parseIPv4(ip)
+  if (!octets) return false
+  const [first, second] = octets
+
+  if (first === 10) return true
+  if (first === 192 && second === 168) return true
+  return first === 172 && second >= 16 && second <= 31
+}
+
+function parseIPv4(value: string): number[] | null {
+  if (!isIPv4Address(value)) return null
+  return value.split(".").map((part) => Number(part))
+}
+
 function isIPv4Address(value: string | undefined): value is string {
   if (!value) return false
   const parts = value.split(".")

packages/server/src/server/routes/meta.ts

@@ -1,6 +1,6 @@
 import { FastifyInstance } from "fastify"
 import { ServerMeta } from "../../api-types"
-import { resolveNetworkAddresses } from "../network-addresses"
+ 
 
 interface RouteDeps {
   serverMeta: ServerMeta
@@ -13,14 +13,12 @@ export function registerMetaRoutes(app: FastifyInstance, deps: RouteDeps) {
 function buildMetaResponse(meta: ServerMeta): ServerMeta {
   const localPort = resolveLocalPort(meta)
   const remote = resolveRemote(meta)
-  const addresses = remote && remote.port > 0 ? resolveNetworkAddresses({ host: meta.host, protocol: remote.protocol, port: remote.port }) : []
 
   return {
     ...meta,
     localPort,
     remotePort: remote?.port,
     listeningMode: meta.host === "0.0.0.0" || !isLoopbackHost(meta.host) ? "all" : "local",
-    addresses,
   }
 }
 

packages/server/src/server/routes/remote-servers.ts

@@ -0,0 +1,166 @@
+import { Agent, fetch } from "undici"
+import type { FastifyInstance } from "fastify"
+import { z } from "zod"
+import type { Logger } from "../../logger"
+import type { RemoteServerProbeResponse } from "../../api-types"
+
+interface RouteDeps {
+  logger: Logger
+}
+
+const ProbeSchema = z.object({
+  baseUrl: z.string().min(1),
+  skipTlsVerify: z.boolean().optional(),
+})
+
+const PROBE_TIMEOUT_MS = 8_000
+
+export function registerRemoteServerRoutes(app: FastifyInstance, deps: RouteDeps) {
+  app.post("/api/remote-servers/probe", async (request, reply) => {
+    try {
+      const body = ProbeSchema.parse(request.body ?? {})
+      return await probeRemoteServer(body.baseUrl, Boolean(body.skipTlsVerify))
+    } catch (error) {
+      deps.logger.warn({ err: error }, "Failed to probe remote server")
+      reply.code(400)
+      return { error: error instanceof Error ? error.message : "Invalid request" }
+    }
+  })
+}
+
+async function probeRemoteServer(baseUrl: string, skipTlsVerify: boolean): Promise<RemoteServerProbeResponse> {
+  const normalizedUrl = normalizeBaseUrl(baseUrl)
+  const probeUrl = new URL("./api/auth/status", `${normalizedUrl}/`)
+  const controller = new AbortController()
+  const timeout = setTimeout(() => controller.abort(), PROBE_TIMEOUT_MS)
+  const dispatcher = skipTlsVerify ? new Agent({ connect: { rejectUnauthorized: false } }) : undefined
+
+  try {
+    const response = await fetch(probeUrl, {
+      method: "GET",
+      dispatcher,
+      signal: controller.signal,
+      headers: {
+        Accept: "application/json",
+      },
+    })
+
+    if (!response.ok) {
+      return {
+        ok: false,
+        reachable: true,
+        normalizedUrl,
+        skipTlsVerify,
+        requiresAuth: false,
+        authenticated: false,
+        error: `Remote server returned HTTP ${response.status}`,
+        errorCode: "http_error",
+      }
+    }
+
+    const payload = (await response.json()) as { authenticated?: unknown }
+    if (typeof payload?.authenticated !== "boolean") {
+      return {
+        ok: false,
+        reachable: true,
+        normalizedUrl,
+        skipTlsVerify,
+        requiresAuth: false,
+        authenticated: false,
+        error: "Remote server did not return a valid CodeNomad auth response",
+        errorCode: "invalid_server",
+      }
+    }
+
+    return {
+      ok: true,
+      reachable: true,
+      normalizedUrl,
+      skipTlsVerify,
+      requiresAuth: !payload.authenticated,
+      authenticated: payload.authenticated,
+    }
+  } catch (error) {
+    const message = describeProbeError(error)
+    return {
+      ok: false,
+      reachable: false,
+      normalizedUrl,
+      skipTlsVerify,
+      requiresAuth: false,
+      authenticated: false,
+      error: message.message,
+      errorCode: message.code,
+    }
+  } finally {
+    clearTimeout(timeout)
+    await dispatcher?.close().catch(() => {})
+  }
+}
+
+function normalizeBaseUrl(input: string): string {
+  const parsed = new URL(input.trim())
+  if (parsed.protocol !== "http:" && parsed.protocol !== "https:") {
+    throw new Error("Server URL must use http:// or https://")
+  }
+
+  parsed.hash = ""
+  parsed.search = ""
+  parsed.pathname = parsed.pathname === "/" ? "/" : parsed.pathname.replace(/\/+$/, "") || "/"
+  const value = parsed.toString()
+  return parsed.pathname === "/" ? value.replace(/\/$/, "") : value.replace(/\/$/, "")
+}
+
+function describeProbeError(error: unknown): { code: string; message: string } {
+  const chain = unwrapErrorChain(error)
+  const detailed =
+    chain.find((entry) => {
+      const code = (entry?.code ?? "").toString()
+      return Boolean(code) && code !== "UND_ERR_RESPONSE_STATUS_CODE"
+    }) ?? chain[0]
+
+  const code = (detailed?.code ?? "").toString()
+  const exactMessage = detailed?.message?.trim() || chain.find((entry) => entry.message?.trim())?.message?.trim()
+
+  if (code === "DEPTH_ZERO_SELF_SIGNED_CERT" || code === "SELF_SIGNED_CERT_IN_CHAIN" || code === "CERT_HAS_EXPIRED") {
+    return {
+      code: "tls_error",
+      message: "Certificate check failed while connecting to the remote server.",
+    }
+  }
+
+  return {
+    code:
+      code === "ERR_INVALID_URL"
+        ? "invalid_url"
+        : code === "ECONNREFUSED"
+          ? "connection_refused"
+          : code === "ENOTFOUND"
+            ? "dns_error"
+            : code === "UND_ERR_CONNECT_TIMEOUT" || code === "ABORT_ERR"
+              ? "timeout"
+              : code
+                ? code.toLowerCase()
+                : "probe_failed",
+    message: exactMessage || "Failed to connect to the remote server.",
+  }
+}
+
+function unwrapErrorChain(error: unknown): Array<{ code?: unknown; message?: string }> {
+  const results: Array<{ code?: unknown; message?: string }> = []
+  let current: unknown = error
+  const seen = new Set<unknown>()
+
+  while (current && typeof current === "object" && !seen.has(current)) {
+    seen.add(current)
+    const entry = current as { code?: unknown; message?: string; cause?: unknown }
+    results.push({ code: entry.code, message: entry.message })
+    current = entry.cause
+  }
+
+  if (results.length === 0 && error instanceof Error) {
+    results.push({ message: error.message })
+  }
+
+  return results
+}

packages/server/src/settings/migrate.ts

@@ -107,6 +107,10 @@ function mapLegacyToOwnerDocs(legacyConfig: unknown, legacyState: unknown): { co
     if (typeof listeningMode === "string") {
       serverConfig.listeningMode = listeningMode
     }
+    const logLevel = preferences.logLevel
+    if (typeof logLevel === "string") {
+      serverConfig.logLevel = logLevel
+    }
     const lastUsedBinary = preferences.lastUsedBinary
     if (typeof lastUsedBinary === "string") {
       serverConfig.opencodeBinary = lastUsedBinary
@@ -135,6 +139,7 @@ function mapLegacyToOwnerDocs(legacyConfig: unknown, legacyState: unknown): { co
     const moved = new Set([
       "environmentVariables",
       "listeningMode",
+      "logLevel",
       "lastUsedBinary",
       "modelRecents",
       "modelFavorites",

packages/server/src/settings/service.ts

@@ -1,6 +1,7 @@
 import type { Logger } from "../logger"
 import type { EventBus } from "../events/bus"
 import type { ConfigLocation } from "../config/location"
+import { z } from "zod"
 import { YamlDocStore, type SettingsDoc } from "./yaml-doc-store"
 import { migrateSettingsLayout } from "./migrate"
 import type { WorkspaceEventPayload } from "../api-types"
@@ -8,6 +9,54 @@ import { sanitizeConfigOwner } from "./public-config"
 
 export type DocKind = "config" | "state"
 
+const CanonicalLogLevelSchema = z.preprocess(
+  (value) => (typeof value === "string" ? value.trim().toUpperCase() : value),
+  z.enum(["DEBUG", "INFO", "WARN", "ERROR"]),
+)
+
+function isPlainObject(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null && !Array.isArray(value)
+}
+
+function isDeepEqual(a: unknown, b: unknown): boolean {
+  if (a === b) return true
+  try {
+    return JSON.stringify(a) === JSON.stringify(b)
+  } catch {
+    return false
+  }
+}
+
+function normalizeServerConfigOwner(value: SettingsDoc): SettingsDoc {
+  if (!isPlainObject(value)) {
+    return {}
+  }
+
+  const next: SettingsDoc = { ...value }
+  const parsedLogLevel = CanonicalLogLevelSchema.safeParse(next.logLevel)
+  if (parsedLogLevel.success) {
+    next.logLevel = parsedLogLevel.data
+  } else if (next.logLevel !== undefined) {
+    next.logLevel = "DEBUG"
+  }
+  return next
+}
+
+function normalizeConfigDoc(doc: SettingsDoc): SettingsDoc {
+  if (!isPlainObject(doc)) {
+    return {}
+  }
+
+  if (!isPlainObject(doc.server)) {
+    return doc
+  }
+
+  return {
+    ...doc,
+    server: normalizeServerConfigOwner(doc.server as SettingsDoc),
+  }
+}
+
 export class SettingsService {
   private readonly configStore: YamlDocStore
   private readonly stateStore: YamlDocStore
@@ -23,22 +72,44 @@ export class SettingsService {
   }
 
   getDoc(kind: DocKind): SettingsDoc {
-    return kind === "config" ? this.configStore.get() : this.stateStore.get()
+    if (kind !== "config") {
+      return this.stateStore.get()
+    }
+
+    const current = this.configStore.get()
+    const normalized = normalizeConfigDoc(current)
+    if (!isDeepEqual(current, normalized)) {
+      this.configStore.replace(normalized)
+    }
+    return normalized
   }
 
   mergePatchDoc(kind: DocKind, patch: unknown): SettingsDoc {
-    const updated = kind === "config" ? this.configStore.mergePatch(patch) : this.stateStore.mergePatch(patch)
+    const updated =
+      kind === "config"
+        ? this.configStore.replace(normalizeConfigDoc(this.configStore.mergePatch(patch)))
+        : this.stateStore.mergePatch(patch)
     this.publish(kind, "*")
     return updated
   }
 
   getOwner(kind: DocKind, owner: string): SettingsDoc {
-    return kind === "config" ? this.configStore.getOwner(owner) : this.stateStore.getOwner(owner)
+    if (kind !== "config") {
+      return this.stateStore.getOwner(owner)
+    }
+
+    return owner === "server"
+      ? normalizeServerConfigOwner(this.getDoc("config").server as SettingsDoc)
+      : this.getDoc("config")[owner] as SettingsDoc
   }
 
   mergePatchOwner(kind: DocKind, owner: string, patch: unknown): SettingsDoc {
     const updated =
-      kind === "config" ? this.configStore.mergePatchOwner(owner, patch) : this.stateStore.mergePatchOwner(owner, patch)
+      kind === "config"
+        ? owner === "server"
+          ? this.configStore.replaceOwner(owner, normalizeServerConfigOwner(this.configStore.mergePatchOwner(owner, patch)))
+          : this.configStore.mergePatchOwner(owner, patch)
+        : this.stateStore.mergePatchOwner(owner, patch)
     this.publish(kind, owner, updated)
     return updated
   }

packages/server/src/workspaces/manager.ts

@@ -142,12 +142,15 @@ export class WorkspaceManager {
       [OPENCODE_SERVER_PASSWORD_ENV]: opencodePassword,
     }
 
+    const logLevel = (serverConfig as any)?.logLevel
+
     try {
       const { pid, port, exitPromise, getLastOutput } = await this.runtime.launch({
         workspaceId: id,
         folder: workspacePath,
         binaryPath: resolvedBinaryPath,
         environment,
+        logLevel,
         onExit: (info) => this.handleProcessExit(info.workspaceId, info),
       })
 

packages/server/src/workspaces/runtime.ts

@@ -116,6 +116,7 @@ interface LaunchOptions {
   folder: string
   binaryPath: string
   environment?: Record<string, string>
+  logLevel?: string
   onExit?: (info: ProcessExitInfo) => void
 }
 
@@ -139,7 +140,8 @@ export class WorkspaceRuntime {
   async launch(options: LaunchOptions): Promise<{ pid: number; port: number; exitPromise: Promise<ProcessExitInfo>; getLastOutput: () => string }> {
     this.validateFolder(options.folder)
 
-    const args = ["serve", "--port", "0", "--print-logs", "--log-level", "DEBUG"]
+    const logLevel = typeof options.logLevel === "string" ? options.logLevel.toUpperCase() : "DEBUG"
+    const args = ["serve", "--port", "0", "--print-logs", "--log-level", logLevel]
     const env = { ...process.env, ...(options.environment ?? {}) }
 
     let exitResolve: ((info: ProcessExitInfo) => void) | null = null

packages/tauri-app/src-tauri/gen/schemas/capabilities.json

@@ -1 +1 @@
-{"main-window-native-dialogs":{"identifier":"main-window-native-dialogs","description":"Grant the main window access to required core features and native dialog commands.","remote":{"urls":["http://127.0.0.1:*","http://localhost:*","http://tauri.localhost/*","https://tauri.localhost/*"]},"local":true,"windows":["main"],"permissions":["core:default","core:menu:default","dialog:allow-open","opener:allow-default-urls","opener:allow-open-url","notification:allow-is-permission-granted","notification:allow-request-permission","notification:allow-notify","notification:allow-show","core:webview:allow-set-webview-zoom"]}}
+{"main-window-native-dialogs":{"identifier":"main-window-native-dialogs","description":"Grant the main window access to required core features and native dialog commands.","remote":{"urls":["http://127.0.0.1:*","http://localhost:*","http://tauri.localhost/*","https://tauri.localhost/*"]},"local":true,"windows":["main"],"permissions":["core:default","core:menu:default","dialog:allow-open","opener:allow-default-urls","opener:allow-open-url","notification:allow-is-permission-granted","notification:allow-request-permission","notification:allow-notify","notification:allow-show","core:webview:allow-set-webview-zoom"]}}

packages/tauri-app/src-tauri/gen/schemas/macOS-schema.json

@@ -2378,6 +2378,72 @@
           "const": "dialog:deny-save",
           "markdownDescription": "Denies the save command without any pre-configured scope."
         },
+        {
+          "description": "No features are enabled by default, as we believe\nthe shortcuts can be inherently dangerous and it is\napplication specific if specific shortcuts should be\nregistered or unregistered.\n",
+          "type": "string",
+          "const": "global-shortcut:default",
+          "markdownDescription": "No features are enabled by default, as we believe\nthe shortcuts can be inherently dangerous and it is\napplication specific if specific shortcuts should be\nregistered or unregistered.\n"
+        },
+        {
+          "description": "Enables the is_registered command without any pre-configured scope.",
+          "type": "string",
+          "const": "global-shortcut:allow-is-registered",
+          "markdownDescription": "Enables the is_registered command without any pre-configured scope."
+        },
+        {
+          "description": "Enables the register command without any pre-configured scope.",
+          "type": "string",
+          "const": "global-shortcut:allow-register",
+          "markdownDescription": "Enables the register command without any pre-configured scope."
+        },
+        {
+          "description": "Enables the register_all command without any pre-configured scope.",
+          "type": "string",
+          "const": "global-shortcut:allow-register-all",
+          "markdownDescription": "Enables the register_all command without any pre-configured scope."
+        },
+        {
+          "description": "Enables the unregister command without any pre-configured scope.",
+          "type": "string",
+          "const": "global-shortcut:allow-unregister",
+          "markdownDescription": "Enables the unregister command without any pre-configured scope."
+        },
+        {
+          "description": "Enables the unregister_all command without any pre-configured scope.",
+          "type": "string",
+          "const": "global-shortcut:allow-unregister-all",
+          "markdownDescription": "Enables the unregister_all command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the is_registered command without any pre-configured scope.",
+          "type": "string",
+          "const": "global-shortcut:deny-is-registered",
+          "markdownDescription": "Denies the is_registered command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the register command without any pre-configured scope.",
+          "type": "string",
+          "const": "global-shortcut:deny-register",
+          "markdownDescription": "Denies the register command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the register_all command without any pre-configured scope.",
+          "type": "string",
+          "const": "global-shortcut:deny-register-all",
+          "markdownDescription": "Denies the register_all command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the unregister command without any pre-configured scope.",
+          "type": "string",
+          "const": "global-shortcut:deny-unregister",
+          "markdownDescription": "Denies the unregister command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the unregister_all command without any pre-configured scope.",
+          "type": "string",
+          "const": "global-shortcut:deny-unregister-all",
+          "markdownDescription": "Denies the unregister_all command without any pre-configured scope."
+        },
         {
           "description": "This permission set configures which\nnotification features are by default exposed.\n\n#### Granted Permissions\n\nIt allows all notification related features.\n\n\n#### This default permission set includes:\n\n- `allow-is-permission-granted`\n- `allow-request-permission`\n- `allow-notify`\n- `allow-register-action-types`\n- `allow-register-listener`\n- `allow-cancel`\n- `allow-get-pending`\n- `allow-remove-active`\n- `allow-get-active`\n- `allow-check-permissions`\n- `allow-show`\n- `allow-batch`\n- `allow-list-channels`\n- `allow-delete-channel`\n- `allow-create-channel`\n- `allow-permission-state`",
           "type": "string",

packages/tauri-app/src-tauri/src/cli_manager.rs

@@ -16,7 +16,7 @@ use std::process::{Child, Command, Stdio};
 use std::sync::atomic::{AtomicBool, Ordering};
 use std::sync::Arc;
 use std::thread;
-use std::time::{Duration, Instant};
+use std::time::{Duration, Instant, SystemTime, UNIX_EPOCH};
 use tauri::{webview::cookie::Cookie, AppHandle, Emitter, Manager, Url};
 
 #[cfg(windows)]
@@ -48,7 +48,7 @@ fn workspace_root() -> Option<PathBuf> {
     })
 }
 
-const SESSION_COOKIE_NAME: &str = "codenomad_session";
+const SESSION_COOKIE_NAME_PREFIX: &str = "codenomad_session";
 
 const CLI_STOP_GRACE_SECS: u64 = 30;
 #[cfg(windows)]
@@ -124,7 +124,11 @@ fn extract_cookie_value(set_cookie: &str, name: &str) -> Option<String> {
     Some(value.to_string())
 }
 
-fn exchange_bootstrap_token(base_url: &str, token: &str) -> anyhow::Result<Option<String>> {
+fn exchange_bootstrap_token(
+    base_url: &str,
+    token: &str,
+    cookie_name: &str,
+) -> anyhow::Result<Option<String>> {
     let parsed = Url::parse(base_url)?;
     let host = parsed.host_str().unwrap_or("127.0.0.1");
     let port = parsed.port_or_known_default().unwrap_or(80);
@@ -159,11 +163,11 @@ fn exchange_bootstrap_token(base_url: &str, token: &str) -> anyhow::Result<Optio
     for line in lines {
         // handle case-insensitive header name
         if let Some(value) = line.strip_prefix("Set-Cookie:") {
-            if let Some(session_id) = extract_cookie_value(value.trim(), SESSION_COOKIE_NAME) {
+            if let Some(session_id) = extract_cookie_value(value.trim(), cookie_name) {
                 return Ok(Some(session_id));
             }
         } else if let Some(value) = line.strip_prefix("set-cookie:") {
-            if let Some(session_id) = extract_cookie_value(value.trim(), SESSION_COOKIE_NAME) {
+            if let Some(session_id) = extract_cookie_value(value.trim(), cookie_name) {
                 return Ok(Some(session_id));
             }
         }
@@ -172,11 +176,16 @@ fn exchange_bootstrap_token(base_url: &str, token: &str) -> anyhow::Result<Optio
     Ok(None)
 }
 
-fn set_session_cookie(app: &AppHandle, base_url: &str, session_id: &str) -> anyhow::Result<()> {
+fn set_session_cookie(
+    app: &AppHandle,
+    base_url: &str,
+    cookie_name: &str,
+    session_id: &str,
+) -> anyhow::Result<()> {
     let parsed = Url::parse(base_url)?;
     let domain = parsed.host_str().unwrap_or("127.0.0.1").to_string();
 
-    let cookie = Cookie::build((SESSION_COOKIE_NAME, session_id))
+    let cookie = Cookie::build((cookie_name.to_string(), session_id.to_string()))
         .domain(domain)
         .path("/")
         .http_only(true)
@@ -190,6 +199,16 @@ fn set_session_cookie(app: &AppHandle, base_url: &str, session_id: &str) -> anyh
     Ok(())
 }
 
+fn generate_auth_cookie_name() -> String {
+    let pid = std::process::id();
+    let timestamp = SystemTime::now()
+        .duration_since(UNIX_EPOCH)
+        .map(|duration| duration.as_millis())
+        .unwrap_or(0);
+
+    format!("{SESSION_COOKIE_NAME_PREFIX}_{pid}_{timestamp}")
+}
+
 const DEFAULT_CONFIG_PATH: &str = "~/.config/codenomad/config.json";
 
 #[derive(Debug, Deserialize)]
@@ -503,7 +522,8 @@ impl CliProcessManager {
             "resolved CLI entry runner={:?} entry={} host={}",
             resolution.runner, resolution.entry, host
         ));
-        let args = resolution.build_args(dev, &host);
+        let auth_cookie_name = Arc::new(generate_auth_cookie_name());
+        let args = resolution.build_args(dev, &host, auth_cookie_name.as_str());
         log_line(&format!("CLI args: {:?}", args));
         if dev {
             log_line("development mode: will prefer tsx + source if present");
@@ -514,7 +534,9 @@ impl CliProcessManager {
             log_line(&format!("using cwd={}", c.display()));
         }
 
-        let command_info = if supports_user_shell() {
+        let use_user_shell = supports_user_shell();
+
+        let command_info = if use_user_shell {
             log_line("spawning via user shell");
             ShellCommandType::UserShell(build_shell_command_string(&resolution, &args)?)
         } else {
@@ -525,7 +547,7 @@ impl CliProcessManager {
             })
         };
 
-        if !supports_user_shell() {
+        if !use_user_shell {
             if which::which(&resolution.node_binary).is_err() {
                 return Err(anyhow::anyhow!(
                     "Node binary not found. Make sure Node.js is installed."
@@ -539,6 +561,8 @@ impl CliProcessManager {
                 let mut c = Command::new(&cmd.shell);
                 c.args(&cmd.args)
                     .env("ELECTRON_RUN_AS_NODE", "1")
+                    .env_remove("npm_config_prefix")
+                    .env_remove("NPM_CONFIG_PREFIX")
                     .stdout(Stdio::piped())
                     .stderr(Stdio::piped());
                 configure_spawn(&mut c);
@@ -584,6 +608,7 @@ impl CliProcessManager {
         let app_clone = app.clone();
         let ready_clone = ready.clone();
         let token_clone = bootstrap_token.clone();
+        let auth_cookie_name_clone = auth_cookie_name.clone();
 
         thread::spawn(move || {
             let stdout = child_clone
@@ -598,24 +623,41 @@ impl CliProcessManager {
                 .map(BufReader::new);
 
             if let Some(reader) = stdout {
-                Self::process_stream(
-                    reader,
-                    "stdout",
-                    &app_clone,
-                    &status_clone,
-                    &ready_clone,
-                    &token_clone,
-                );
+                let app = app_clone.clone();
+                let status = status_clone.clone();
+                let ready = ready_clone.clone();
+                let token = token_clone.clone();
+                let auth_cookie_name = auth_cookie_name_clone.clone();
+                thread::spawn(move || {
+                    Self::process_stream(
+                        reader,
+                        "stdout",
+                        &app,
+                        &status,
+                        &ready,
+                        &token,
+                        auth_cookie_name.as_str(),
+                    );
+                });
             }
+
             if let Some(reader) = stderr {
-                Self::process_stream(
-                    reader,
-                    "stderr",
-                    &app_clone,
-                    &status_clone,
-                    &ready_clone,
-                    &token_clone,
-                );
+                let app = app_clone.clone();
+                let status = status_clone.clone();
+                let ready = ready_clone.clone();
+                let token = token_clone.clone();
+                let auth_cookie_name = auth_cookie_name_clone.clone();
+                thread::spawn(move || {
+                    Self::process_stream(
+                        reader,
+                        "stderr",
+                        &app,
+                        &status,
+                        &ready,
+                        &token,
+                        auth_cookie_name.as_str(),
+                    );
+                });
             }
         });
 
@@ -731,10 +773,10 @@ impl CliProcessManager {
         status: &Arc<Mutex<CliStatus>>,
         ready: &Arc<AtomicBool>,
         bootstrap_token: &Arc<Mutex<Option<String>>>,
+        auth_cookie_name: &str,
     ) {
         let mut buffer = String::new();
-        let local_url_regex = Regex::new(r"^Local\s+Connection\s+URL\s*:\s*(https?://\S+)").ok();
-        let http_regex = Regex::new(r":(\d{2,5})(?!.*:\d)").ok();
+        let local_url_regex = Regex::new(r"^Local\s+Connection\s+URL\s*:\s*(https?://\S+)\s*$").ok();
         let token_prefix = "CODENOMAD_BOOTSTRAP_TOKEN:";
 
         loop {
@@ -766,39 +808,17 @@ impl CliProcessManager {
                             .and_then(|re| re.captures(line).and_then(|c| c.get(1)))
                             .map(|m| m.as_str().to_string())
                         {
-                            Self::mark_ready(app, status, ready, bootstrap_token, url);
+                            Self::mark_ready(
+                                app,
+                                status,
+                                ready,
+                                bootstrap_token,
+                                auth_cookie_name,
+                                url,
+                            );
                             continue;
                         }
 
-                        if line.to_lowercase().contains("http server listening") {
-                            if let Some(port) = http_regex
-                                .as_ref()
-                                .and_then(|re| re.captures(line).and_then(|c| c.get(1)))
-                                .and_then(|m| m.as_str().parse::<u16>().ok())
-                            {
-                                Self::mark_ready(
-                                    app,
-                                    status,
-                                    ready,
-                                    bootstrap_token,
-                                    format!("http://localhost:{port}"),
-                                );
-                                continue;
-                            }
-
-                            if let Ok(value) = serde_json::from_str::<serde_json::Value>(line) {
-                                if let Some(port) = value.get("port").and_then(|p| p.as_u64()) {
-                                    Self::mark_ready(
-                                        app,
-                                        status,
-                                        ready,
-                                        bootstrap_token,
-                                        format!("http://localhost:{}", port),
-                                    );
-                                    continue;
-                                }
-                            }
-                        }
                     }
                 }
                 Err(_) => break,
@@ -811,6 +831,7 @@ impl CliProcessManager {
         status: &Arc<Mutex<CliStatus>>,
         ready: &Arc<AtomicBool>,
         bootstrap_token: &Arc<Mutex<Option<String>>>,
+        auth_cookie_name: &str,
         base_url: String,
     ) {
         ready.store(true, Ordering::SeqCst);
@@ -834,9 +855,11 @@ impl CliProcessManager {
             if scheme.as_deref() != Some("http") {
                 navigate_main(app, &base_url);
             } else {
-                match exchange_bootstrap_token(&base_url, &token) {
+                match exchange_bootstrap_token(&base_url, &token, &auth_cookie_name) {
                     Ok(Some(session_id)) => {
-                        if let Err(err) = set_session_cookie(app, &base_url, &session_id) {
+                        if let Err(err) =
+                            set_session_cookie(app, &base_url, &auth_cookie_name, &session_id)
+                        {
                             log_line(&format!("failed to set session cookie: {err}"));
                             navigate_main(app, &format!("{base_url}/login"));
                         } else {
@@ -932,11 +955,13 @@ impl CliEntry {
         ))
     }
 
-    fn build_args(&self, dev: bool, host: &str) -> Vec<String> {
+    fn build_args(&self, dev: bool, host: &str, auth_cookie_name: &str) -> Vec<String> {
         let mut args = vec![
             "serve".to_string(),
             "--host".to_string(),
             host.to_string(),
+            "--auth-cookie-name".to_string(),
+            auth_cookie_name.to_string(),
             "--generate-token".to_string(),
         ];
 
@@ -993,27 +1018,50 @@ impl CliEntry {
 }
 
 fn resolve_tsx(_app: &AppHandle) -> Option<String> {
-    let candidates = vec![
-        std::env::current_dir()
-            .ok()
+    let cwd = std::env::current_dir().ok();
+    let workspace = workspace_root();
+    let mut candidates = vec![
+        cwd.as_ref().map(|p| p.join("node_modules/tsx/dist/cli.mjs")),
+        cwd.as_ref().map(|p| p.join("node_modules/tsx/dist/cli.cjs")),
+        cwd.as_ref().map(|p| p.join("node_modules/tsx/dist/cli.js")),
+        cwd.as_ref().map(|p| p.join("../node_modules/tsx/dist/cli.mjs")),
+        cwd.as_ref().map(|p| p.join("../node_modules/tsx/dist/cli.cjs")),
+        cwd.as_ref().map(|p| p.join("../node_modules/tsx/dist/cli.js")),
+        cwd.as_ref().map(|p| p.join("../../node_modules/tsx/dist/cli.mjs")),
+        cwd.as_ref().map(|p| p.join("../../node_modules/tsx/dist/cli.cjs")),
+        cwd.as_ref().map(|p| p.join("../../node_modules/tsx/dist/cli.js")),
+        workspace
+            .as_ref()
+            .map(|p| p.join("node_modules/tsx/dist/cli.mjs")),
+        workspace
+            .as_ref()
+            .map(|p| p.join("node_modules/tsx/dist/cli.cjs")),
+        workspace
+            .as_ref()
             .map(|p| p.join("node_modules/tsx/dist/cli.js")),
-        std::env::current_exe().ok().and_then(|ex| {
-            ex.parent()
-                .map(|p| p.join("../node_modules/tsx/dist/cli.js"))
-        }),
     ];
 
+    if let Ok(exe) = std::env::current_exe() {
+        if let Some(dir) = exe.parent() {
+            candidates.push(Some(dir.join("../node_modules/tsx/dist/cli.mjs")));
+            candidates.push(Some(dir.join("../node_modules/tsx/dist/cli.cjs")));
+            candidates.push(Some(dir.join("../node_modules/tsx/dist/cli.js")));
+        }
+    }
+
     first_existing(candidates)
 }
 
 fn resolve_dev_entry(_app: &AppHandle) -> Option<String> {
+    let cwd = std::env::current_dir().ok();
+    let workspace = workspace_root();
     let candidates = vec![
-        std::env::current_dir()
-            .ok()
+        workspace
+            .as_ref()
             .map(|p| p.join("packages/server/src/index.ts")),
-        std::env::current_dir()
-            .ok()
-            .map(|p| p.join("../server/src/index.ts")),
+        cwd.as_ref().map(|p| p.join("packages/server/src/index.ts")),
+        cwd.as_ref().map(|p| p.join("../server/src/index.ts")),
+        cwd.as_ref().map(|p| p.join("../../server/src/index.ts")),
     ];
 
     first_existing(candidates)
@@ -1115,11 +1163,8 @@ fn build_shell_args(shell: &str, command: &str) -> Vec<String> {
         .unwrap_or("")
         .to_lowercase();
 
-    if shell_name.contains("zsh") {
-        vec!["-l".into(), "-i".into(), "-c".into(), command.into()]
-    } else {
-        vec!["-l".into(), "-c".into(), command.into()]
-    }
+    let _ = shell_name;
+    vec!["-l".into(), "-c".into(), command.into()]
 }
 
 fn first_existing(paths: Vec<Option<PathBuf>>) -> Option<String> {

packages/tauri-app/src-tauri/src/main.rs

@@ -6,13 +6,14 @@ use cli_manager::{CliProcessManager, CliStatus};
 use keepawake::KeepAwake;
 use serde::Deserialize;
 use serde_json::json;
+use std::collections::HashMap;
 use std::sync::atomic::{AtomicBool, Ordering};
 use std::sync::Mutex;
 use std::time::{SystemTime, UNIX_EPOCH};
 use tauri::menu::{MenuBuilder, MenuItem, SubmenuBuilder};
 use tauri::plugin::{Builder as PluginBuilder, TauriPlugin};
 use tauri::webview::Webview;
-use tauri::{AppHandle, Emitter, Manager, Runtime, WindowEvent, Wry};
+use tauri::{AppHandle, Emitter, Manager, Runtime, WebviewUrl, WebviewWindowBuilder, WindowEvent, Wry};
 use tauri_plugin_global_shortcut::{
     Code as ShortcutCode, GlobalShortcutExt, Shortcut, ShortcutState,
 };
@@ -41,6 +42,16 @@ pub struct AppState {
     pub manager: CliProcessManager,
     pub wake_lock: Mutex<Option<KeepAwake>>,
     pub zoom_level: Mutex<f64>,
+    pub remote_origins: Mutex<HashMap<String, String>>,
+}
+
+#[derive(Debug, Deserialize)]
+#[serde(rename_all = "camelCase")]
+struct RemoteWindowPayload {
+    id: String,
+    name: String,
+    base_url: String,
+    skip_tls_verify: bool,
 }
 
 #[derive(Debug, Default, Deserialize)]
@@ -118,11 +129,28 @@ fn should_allow_internal(url: &Url) -> bool {
     }
 }
 
-fn intercept_navigation<R: Runtime>(webview: &Webview<R>, url: &Url) -> bool {
+fn should_allow_window_origin<R: Runtime>(app_handle: &AppHandle<R>, window_label: &str, url: &Url) -> bool {
     if should_allow_internal(url) {
         return true;
     }
 
+    let state = app_handle.state::<AppState>();
+    let Ok(allowed) = state.remote_origins.lock() else {
+        return false;
+    };
+    if let Some(origin) = allowed.get(window_label) {
+        return origin == &url.origin().ascii_serialization();
+    }
+
+    false
+}
+
+fn intercept_navigation<R: Runtime>(webview: &Webview<R>, url: &Url) -> bool {
+    let window_label = webview.label().to_string();
+    if should_allow_window_origin(&webview.app_handle(), &window_label, url) {
+        return true;
+    }
+
     if let Err(err) = webview
         .app_handle()
         .opener()
@@ -133,6 +161,53 @@ fn intercept_navigation<R: Runtime>(webview: &Webview<R>, url: &Url) -> bool {
     false
 }
 
+#[tauri::command]
+fn open_remote_window(app: AppHandle, payload: RemoteWindowPayload) -> Result<(), String> {
+    if payload.skip_tls_verify && payload.base_url.starts_with("https://") {
+        return Err(
+            "Tauri cannot bypass self-signed HTTPS certificates automatically yet. Trust the certificate in your OS first, then reconnect, or use the CodeNomad Electron app."
+                .to_string(),
+        );
+    }
+
+    let parsed = Url::parse(&payload.base_url).map_err(|err| err.to_string())?;
+    let label = format!("remote-{}", payload.id);
+    let title = format!("{} - {}", payload.name, parsed.host_str().unwrap_or(payload.base_url.as_str()));
+
+    if let Some(existing) = app.get_webview_window(&label) {
+        let _ = existing.navigate(parsed.clone());
+        let _ = existing.set_title(&title);
+        let _ = existing.show();
+        let _ = existing.unminimize();
+        let _ = existing.set_focus();
+        return Ok(());
+    }
+
+    app.state::<AppState>()
+        .remote_origins
+        .lock()
+        .map_err(|err| err.to_string())?
+        .insert(label.clone(), parsed.origin().ascii_serialization());
+
+    let window = WebviewWindowBuilder::new(&app, label.clone(), WebviewUrl::External(parsed.clone()))
+        .title(title)
+        .inner_size(1400.0, 900.0)
+        .min_inner_size(800.0, 600.0)
+        .build()
+        .map_err(|err| err.to_string())?;
+
+    let app_handle = app.clone();
+    window.on_window_event(move |event| {
+        if let WindowEvent::Destroyed = event {
+            if let Ok(mut origins) = app_handle.state::<AppState>().remote_origins.lock() {
+                origins.remove(&label);
+            }
+        }
+    });
+
+    Ok(())
+}
+
 fn collect_directory_paths(paths: &[std::path::PathBuf]) -> Vec<String> {
     paths
         .iter()
@@ -286,6 +361,7 @@ fn main() {
             manager: CliProcessManager::new(),
             wake_lock: Mutex::new(None),
             zoom_level: Mutex::new(DEFAULT_ZOOM_LEVEL),
+            remote_origins: Mutex::new(HashMap::new()),
         })
         .setup(|app| {
             set_windows_app_user_model_id();
@@ -323,7 +399,8 @@ fn main() {
             cli_get_status,
             cli_restart,
             wake_lock_start,
-            wake_lock_stop
+            wake_lock_stop,
+            open_remote_window
         ])
         .on_menu_event(|app_handle, event| {
             match event.id().0.as_str() {
@@ -455,11 +532,24 @@ fn main() {
                 event: tauri::WindowEvent::CloseRequested { api, .. },
                 ..
             } => {
-                // Ensure we have time to stop the CLI process before the app exits.
+                // Let windows close normally. App shutdown is handled only after the
+                // last window is actually gone so remote windows can outlive `main`.
+                let _ = api;
+            }
+            tauri::RunEvent::WindowEvent {
+                event: tauri::WindowEvent::Destroyed,
+                ..
+            } => {
+                if !app_handle.webview_windows().is_empty() {
+                    return;
+                }
+
+                // Stop the CLI only when the final window is gone and the app is
+                // truly exiting.
                 if QUIT_REQUESTED.swap(true, Ordering::SeqCst) {
                     return;
                 }
-                api.prevent_close();
+
                 let app = app_handle.clone();
                 std::thread::spawn(move || {
                     if let Some(state) = app.try_state::<AppState>() {

packages/ui/src/components/diff-viewer.tsx

@@ -1,4 +1,4 @@
-import { createMemo, Show, createEffect, onCleanup } from "solid-js"
+import { createMemo, Show, createEffect } from "solid-js"
 import { DiffView, DiffModeEnum } from "@git-diff-view/solid"
 import "@git-diff-view/solid/styles/diff-view-pure.css"
 import { disableCache } from "@git-diff-view/core"
@@ -20,6 +20,7 @@ interface ToolCallDiffViewerProps {
   filePath?: string
   theme: "light" | "dark"
   mode: DiffViewMode
+  wrap?: boolean
   onRendered?: () => void
   cachedHtml?: string
   cacheEntryParams?: CacheEntryParams
@@ -31,11 +32,183 @@ type DiffData = {
   hunks: string[]
 }
 
-type CaptureContext = {
-  theme: ToolCallDiffViewerProps["theme"]
-  mode: DiffViewMode
-  diffText: string
-  cacheEntryParams?: CacheEntryParams
+function measureTextWidth(container: HTMLElement, text: string, source: HTMLElement) {
+  const computed = window.getComputedStyle(source)
+  const probe = document.createElement("span")
+  probe.textContent = text || ""
+  probe.style.position = "absolute"
+  probe.style.visibility = "hidden"
+  probe.style.pointerEvents = "none"
+  probe.style.display = "inline-block"
+  probe.style.width = "auto"
+  probe.style.maxWidth = "none"
+  probe.style.whiteSpace = "nowrap"
+  probe.style.fontFamily = computed.fontFamily
+  probe.style.fontSize = computed.fontSize
+  probe.style.fontWeight = computed.fontWeight
+  probe.style.fontStyle = computed.fontStyle
+  probe.style.letterSpacing = computed.letterSpacing
+  probe.style.fontVariant = computed.fontVariant
+  probe.style.textTransform = computed.textTransform
+  probe.style.lineHeight = computed.lineHeight
+  container.appendChild(probe)
+  const width = Math.ceil(probe.getBoundingClientRect().width)
+  probe.remove()
+  return width
+}
+
+function computeCompactWidth(
+  container: HTMLElement,
+  entries: Array<{ text: string; source: HTMLElement }>,
+  maxWidthPx = 40,
+) {
+  const measuredLabelWidthPx = entries.reduce((max, entry) => {
+    return Math.max(max, measureTextWidth(container, entry.text, entry.source))
+  }, 0)
+  const fallbackTextLength = entries.reduce((max, entry) => Math.max(max, entry.text.length), 1)
+  const fallbackWidthPx = Math.round(fallbackTextLength * 7 + 4)
+  return Math.max(2, Math.min(maxWidthPx, measuredLabelWidthPx > 0 ? measuredLabelWidthPx + 2 : fallbackWidthPx))
+}
+
+function applyCompactUnifiedGutter(container: HTMLElement, wrap: boolean) {
+  const tableWrapper = container.querySelector<HTMLElement>(".unified-diff-table-wrapper")
+  const table = container.querySelector<HTMLTableElement>(".unified-diff-table")
+  const numberCol = container.querySelector<HTMLTableColElement>(".unified-diff-table-num-col")
+  const gutterRows = container.querySelectorAll<HTMLElement>(".diff-line-num")
+  const hunkGutters = container.querySelectorAll<HTMLElement>(".diff-line-hunk-action, .diff-line-widget-wrapper, .diff-line-extend-wrapper")
+  const entries: Array<{ gutter: HTMLElement; label: HTMLElement; text: string }> = []
+
+  if (table) {
+    if (wrap) {
+      table.classList.add("table-fixed")
+      table.style.tableLayout = "fixed"
+      table.style.width = "100%"
+      table.style.minWidth = "100%"
+    } else {
+      table.classList.remove("table-fixed")
+      table.style.tableLayout = "auto"
+      table.style.width = "max-content"
+      table.style.minWidth = "100%"
+    }
+  }
+
+  gutterRows.forEach((gutter) => {
+    const oldSpan = gutter.querySelector<HTMLElement>("[data-line-old-num]")
+    const newSpan = gutter.querySelector<HTMLElement>("[data-line-new-num]")
+    const spacer = gutter.querySelector<HTMLElement>(".shrink-0")
+    const flexWrapper = gutter.querySelector<HTMLElement>(":scope > .flex")
+    const currentLabel = gutter.querySelector<HTMLElement>(":scope > .tool-call-diff-compact-line-number")
+
+    const oldText = oldSpan?.textContent?.trim() ?? ""
+    const newText = newSpan?.textContent?.trim() ?? ""
+    const hasUsableNew = newText.length > 0 && newText !== "0"
+    const hasUsableOld = oldText.length > 0 && oldText !== "0"
+    const visibleText = hasUsableNew ? newText : hasUsableOld ? oldText : newText || oldText
+
+    if (flexWrapper) flexWrapper.style.display = "none"
+    if (spacer) spacer.style.display = "none"
+    if (oldSpan) { oldSpan.style.display = "none"; oldSpan.style.width = "auto" }
+    if (newSpan) { newSpan.style.display = "none"; newSpan.style.width = "auto" }
+
+    gutter.style.paddingLeft = "1px"
+    gutter.style.paddingRight = "1px"
+    gutter.style.textAlign = "left"
+
+    const label = currentLabel ?? document.createElement("span")
+    label.className = "tool-call-diff-compact-line-number"
+    label.textContent = visibleText
+    label.setAttribute("aria-hidden", visibleText ? "false" : "true")
+    if (!currentLabel) gutter.appendChild(label)
+
+    entries.push({ gutter, label, text: visibleText })
+  })
+
+  const gutterWidthPx = computeCompactWidth(container, entries.map((entry) => ({ text: entry.text, source: entry.label })))
+  const gutterWidth = `${gutterWidthPx}px`
+  const compactAsideWidth = `${Math.max(8, gutterWidthPx - 10)}px`
+
+  if (tableWrapper) {
+    tableWrapper.style.setProperty("--diff-aside-width", compactAsideWidth)
+    tableWrapper.style.setProperty("--diff-aside-width--", compactAsideWidth)
+  }
+  if (numberCol) {
+    numberCol.style.width = gutterWidth
+  }
+
+  entries.forEach(({ gutter, label }) => {
+    gutter.style.width = gutterWidth
+    gutter.style.minWidth = gutterWidth
+    gutter.style.maxWidth = gutterWidth
+    label.style.width = "auto"
+    label.style.maxWidth = "none"
+  })
+
+  hunkGutters.forEach((gutter) => {
+    gutter.style.width = gutterWidth
+    gutter.style.minWidth = gutterWidth
+    gutter.style.maxWidth = gutterWidth
+    gutter.style.paddingLeft = "0"
+    gutter.style.paddingRight = "0"
+  })
+}
+
+function applyCompactSplitGutter(container: HTMLElement) {
+  const oldWrapper = container.querySelector<HTMLElement>(".old-diff-table-wrapper")
+  const newWrapper = container.querySelector<HTMLElement>(".new-diff-table-wrapper")
+  const numberCells = Array.from(container.querySelectorAll<HTMLElement>(".diff-line-old-num, .diff-line-new-num"))
+  const hunkActions = Array.from(container.querySelectorAll<HTMLElement>(".diff-line-hunk-action, .diff-line-widget-wrapper, .diff-line-extend-wrapper"))
+  const numberSpans = numberCells
+    .map((cell) => ({ cell, span: cell.querySelector<HTMLElement>("[data-line-num]") }))
+    .filter((entry): entry is { cell: HTMLElement; span: HTMLElement } => Boolean(entry.span))
+
+  const gutterWidthPx = computeCompactWidth(
+    container,
+    numberSpans.map(({ span }) => ({ text: span.textContent?.trim() ?? "", source: span })),
+    64,
+  )
+  const gutterWidth = `${gutterWidthPx}px`
+
+  ;[oldWrapper, newWrapper].forEach((wrapper) => {
+    if (wrapper) {
+      wrapper.style.setProperty("--diff-aside-width", gutterWidth)
+    }
+  })
+
+  numberCells.forEach((cell) => {
+    cell.style.width = gutterWidth
+    cell.style.minWidth = gutterWidth
+    cell.style.maxWidth = gutterWidth
+    cell.style.paddingLeft = "2px"
+    cell.style.paddingRight = "2px"
+    cell.style.textAlign = "left"
+    cell.style.whiteSpace = "nowrap"
+    cell.style.overflowWrap = "normal"
+    cell.style.wordBreak = "normal"
+  })
+
+  numberSpans.forEach(({ span }) => {
+    span.style.whiteSpace = "nowrap"
+    span.style.overflowWrap = "normal"
+    span.style.wordBreak = "normal"
+  })
+
+  hunkActions.forEach((cell) => {
+    cell.style.width = gutterWidth
+    cell.style.minWidth = gutterWidth
+    cell.style.maxWidth = gutterWidth
+    cell.style.paddingLeft = "0"
+    cell.style.paddingRight = "0"
+  })
+}
+
+function applyCompactDiffLayout(container: HTMLElement, mode: DiffViewMode, wrap = false) {
+  if (mode === "unified") {
+    applyCompactUnifiedGutter(container, wrap)
+    return
+  }
+  if (mode === "split") {
+    applyCompactSplitGutter(container)
+  }
 }
 
 export function ToolCallDiffViewer(props: ToolCallDiffViewerProps) {
@@ -67,12 +240,15 @@ export function ToolCallDiffViewer(props: ToolCallDiffViewerProps) {
   const contextKey = createMemo(() => {
     const data = diffData()
     if (!data) return ""
-    return `${props.theme}|${props.mode}|${props.diffText}`
+    return `${props.theme}|${props.mode}|${props.wrap ? "wrap" : "nowrap"}|${props.diffText}`
   })
  
   createEffect(() => {
     const cachedHtml = props.cachedHtml
     if (cachedHtml) {
+      if (diffContainerRef) {
+        applyCompactDiffLayout(diffContainerRef, props.mode, Boolean(props.wrap))
+      }
       // When we are given cached HTML, we rely on the caller's cache
       // and simply notify once rendered.
       props.onRendered?.()
@@ -83,9 +259,10 @@ export function ToolCallDiffViewer(props: ToolCallDiffViewerProps) {
     if (!key) return
     if (!diffContainerRef) return
     if (lastCapturedKey === key) return
- 
+
     requestAnimationFrame(() => {
       if (!diffContainerRef) return
+      applyCompactDiffLayout(diffContainerRef, props.mode, Boolean(props.wrap))
       const markup = diffContainerRef.innerHTML
       if (!markup) return
       lastCapturedKey = key
@@ -95,6 +272,7 @@ export function ToolCallDiffViewer(props: ToolCallDiffViewerProps) {
           html: markup,
           theme: props.theme,
           mode: props.mode,
+          wrap: props.wrap,
         })
       }
       props.onRendered?.()
@@ -122,7 +300,7 @@ export function ToolCallDiffViewer(props: ToolCallDiffViewerProps) {
                     diffViewMode={props.mode === "split" ? DiffModeEnum.Split : DiffModeEnum.Unified}
                     diffViewTheme={props.theme}
                     diffViewHighlight
-                    diffViewWrap={false}
+                    diffViewWrap={Boolean(props.wrap)}
                     diffViewFontSize={13}
                   />
                 </ErrorBoundary>
@@ -131,7 +309,7 @@ export function ToolCallDiffViewer(props: ToolCallDiffViewerProps) {
           </div>
         }
       >
-        <div innerHTML={props.cachedHtml} />
+        <div ref={diffContainerRef} innerHTML={props.cachedHtml} />
       </Show>
     </div>
   )

packages/ui/src/components/folder-selection-view.tsx

@@ -1,6 +1,7 @@
+import { Dialog } from "@kobalte/core/dialog"
 import { Select } from "@kobalte/core/select"
 import { Component, createSignal, Show, For, onMount, onCleanup, createEffect } from "solid-js"
-import { Folder, Clock, Trash2, FolderPlus, Settings, ChevronRight, MonitorUp, Star, Languages, ChevronDown, X } from "lucide-solid"
+import { Folder, Clock, Trash2, FolderPlus, Settings, ChevronRight, MonitorUp, Star, Languages, ChevronDown, X, Globe, Loader2 } from "lucide-solid"
 import { useConfig } from "../stores/preferences"
 import DirectoryBrowserDialog from "./directory-browser-dialog"
 import Kbd from "./kbd"
@@ -14,11 +15,15 @@ import { useI18n, type Locale } from "../lib/i18n"
 import { showAlertDialog } from "../stores/alerts"
 import { openSettings, settingsOpen } from "../stores/settings-screen"
 import { openExternalUrl } from "../lib/external-url"
+import { serverApi } from "../lib/api-client"
+import { openRemoteServerWindow } from "../lib/native/remote-window"
 
 const codeNomadLogo = new URL("../images/CodeNomad-Icon.png", import.meta.url).href
 const GITHUB_URL = "https://github.com/NeuralNomadsAI/CodeNomad"
 const DISCORD_URL = "https://discord.com/channels/1391832426048651334/1458412028325793887/1464701235683917945"
 
+type HomeTab = "local" | "servers"
+
 
 interface FolderSelectionViewProps {
   onSelectFolder: (folder: string, binaryPath?: string) => void
@@ -27,12 +32,30 @@ interface FolderSelectionViewProps {
 }
 
 const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
-  const { recentFolders, removeRecentFolder, preferences, updatePreferences, serverSettings } = useConfig()
+  const {
+    recentFolders,
+    removeRecentFolder,
+    preferences,
+    updatePreferences,
+    serverSettings,
+    remoteServers,
+    saveRemoteServerProfile,
+    markRemoteServerConnected,
+    removeRemoteServerProfile,
+  } = useConfig()
   const { t, locale } = useI18n()
   const [selectedIndex, setSelectedIndex] = createSignal(0)
   const [focusMode, setFocusMode] = createSignal<"recent" | "new" | null>("recent")
   const [selectedBinary, setSelectedBinary] = createSignal(serverSettings().opencodeBinary || "opencode")
   const [isFolderBrowserOpen, setIsFolderBrowserOpen] = createSignal(false)
+  const [activeTab, setActiveTab] = createSignal<HomeTab>("local")
+  const [isServerDialogOpen, setIsServerDialogOpen] = createSignal(false)
+  const [serverName, setServerName] = createSignal("")
+  const [serverUrl, setServerUrl] = createSignal("")
+  const [skipTlsVerify, setSkipTlsVerify] = createSignal(false)
+  const [serverDialogError, setServerDialogError] = createSignal<string | null>(null)
+  const [isSavingServer, setIsSavingServer] = createSignal(false)
+  const [connectingServerId, setConnectingServerId] = createSignal<string | null>(null)
   const nativeDialogsAvailable = supportsNativeDialogs()
   let recentListRef: HTMLDivElement | undefined
 
@@ -49,10 +72,15 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
   ]
 
   const selectedLanguageOption = () => languageOptions.find((opt) => opt.value === locale()) ?? languageOptions[0]
- 
+  
   const folders = () => recentFolders()
+  const serverList = () => remoteServers()
   const isLoading = () => Boolean(props.isLoading)
 
+  function getActiveListLength() {
+    return activeTab() === "local" ? folders().length : serverList().length
+  }
+
   // Update selected binary when preferences change
   createEffect(() => {
     const lastUsed = serverSettings().opencodeBinary
@@ -64,7 +92,7 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
   function scrollToIndex(index: number) {
     const container = recentListRef
     if (!container) return
-    const element = container.querySelector(`[data-folder-index="${index}"]`) as HTMLElement | null
+    const element = container.querySelector(`[data-list-index="${index}"]`) as HTMLElement | null
     if (!element) return
 
     const containerRect = container.getBoundingClientRect()
@@ -113,19 +141,18 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
       return
     }
 
-    const folderList = folders()
-
     if (isBrowseShortcut) {
       e.preventDefault()
       void handleBrowse()
       return
     }
 
-    if (folderList.length === 0) return
+    const listLength = getActiveListLength()
+    if (listLength === 0) return
 
     if (e.key === "ArrowDown") {
       e.preventDefault()
-      const newIndex = Math.min(selectedIndex() + 1, folderList.length - 1)
+      const newIndex = Math.min(selectedIndex() + 1, listLength - 1)
       setSelectedIndex(newIndex)
       setFocusMode("recent")
       scrollToIndex(newIndex)
@@ -138,7 +165,7 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
     } else if (e.key === "PageDown") {
       e.preventDefault()
       const pageSize = 5
-      const newIndex = Math.min(selectedIndex() + pageSize, folderList.length - 1)
+      const newIndex = Math.min(selectedIndex() + pageSize, listLength - 1)
       setSelectedIndex(newIndex)
       setFocusMode("recent")
       scrollToIndex(newIndex)
@@ -156,7 +183,7 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
       scrollToIndex(0)
     } else if (e.key === "End") {
       e.preventDefault()
-      const newIndex = folderList.length - 1
+      const newIndex = listLength - 1
       setSelectedIndex(newIndex)
       setFocusMode("recent")
       scrollToIndex(newIndex)
@@ -165,10 +192,17 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
       handleEnterKey()
     } else if (e.key === "Backspace" || e.key === "Delete") {
       e.preventDefault()
-      if (folderList.length > 0 && focusMode() === "recent") {
-        const folder = folderList[selectedIndex()]
-        if (folder) {
-          handleRemove(folder.path)
+      if (listLength > 0 && focusMode() === "recent") {
+        if (activeTab() === "local") {
+          const folder = folders()[selectedIndex()]
+          if (folder) {
+            handleRemove(folder.path)
+          }
+        } else {
+          const server = serverList()[selectedIndex()]
+          if (server) {
+            removeRemoteServerProfile(server.id)
+          }
         }
       }
     }
@@ -177,15 +211,40 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
 
   function handleEnterKey() {
     if (isLoading()) return
-    const folderList = folders()
     const index = selectedIndex()
 
-    const folder = folderList[index]
-    if (folder) {
-      handleFolderSelect(folder.path)
+    if (activeTab() === "local") {
+      const folder = folders()[index]
+      if (folder) {
+        handleFolderSelect(folder.path)
+      }
+      return
+    }
+
+    const server = serverList()[index]
+    if (server) {
+      void handleConnectSavedServer(server.id)
     }
   }
 
+  createEffect(() => {
+    activeTab()
+    setSelectedIndex(0)
+    setFocusMode("recent")
+  })
+
+  createEffect(() => {
+    const length = getActiveListLength()
+    if (length === 0) {
+      setSelectedIndex(0)
+      return
+    }
+
+    if (selectedIndex() >= length) {
+      setSelectedIndex(length - 1)
+    }
+  })
+
 
   onMount(() => {
     window.addEventListener("keydown", handleKeyDown)
@@ -236,6 +295,87 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
     props.onSelectFolder(path, selectedBinary())
   }
 
+  function resetServerDialog() {
+    setServerName("")
+    setServerUrl("")
+    setSkipTlsVerify(false)
+    setServerDialogError(null)
+  }
+
+  function openServerDialog() {
+    resetServerDialog()
+    setIsServerDialogOpen(true)
+  }
+
+  async function probeAndOpenServer(input: { id?: string; name: string; baseUrl: string; skipTlsVerify: boolean }, openWindow: boolean) {
+    const trimmedName = input.name.trim()
+    const trimmedUrl = input.baseUrl.trim()
+    if (!trimmedName || !trimmedUrl) {
+      throw new Error(t("folderSelection.servers.dialog.errorRequired"))
+    }
+
+    const probe = await serverApi.probeRemoteServer({
+      baseUrl: trimmedUrl,
+      skipTlsVerify: input.skipTlsVerify,
+    })
+
+    if (!probe.ok) {
+      throw new Error(probe.error || t("folderSelection.servers.dialog.errorConnect"))
+    }
+
+    const profile = await saveRemoteServerProfile({
+      id: input.id,
+      name: trimmedName,
+      baseUrl: probe.normalizedUrl,
+      skipTlsVerify: input.skipTlsVerify,
+    })
+
+    if (openWindow) {
+      await openRemoteServerWindow(profile)
+      await markRemoteServerConnected(profile.id)
+    }
+
+    return profile
+  }
+
+  async function handleSaveServer(openWindow: boolean) {
+    if (isSavingServer()) return
+    setIsSavingServer(true)
+    setServerDialogError(null)
+    try {
+      await probeAndOpenServer(
+        {
+          name: serverName(),
+          baseUrl: serverUrl(),
+          skipTlsVerify: skipTlsVerify(),
+        },
+        openWindow,
+      )
+      setIsServerDialogOpen(false)
+      resetServerDialog()
+    } catch (error) {
+      setServerDialogError(error instanceof Error ? error.message : String(error))
+    } finally {
+      setIsSavingServer(false)
+    }
+  }
+
+  async function handleConnectSavedServer(id: string) {
+    const target = remoteServers().find((entry) => entry.id === id)
+    if (!target || connectingServerId()) return
+    setConnectingServerId(id)
+    try {
+      await probeAndOpenServer(target, true)
+    } catch (error) {
+      showAlertDialog(error instanceof Error ? error.message : String(error), {
+        title: t("folderSelection.servers.errorTitle"),
+        variant: "warning",
+      })
+    } finally {
+      setConnectingServerId(null)
+    }
+  }
+
   async function handleBrowse() {
     if (isLoading()) return
     setFocusMode("new")
@@ -476,90 +616,223 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
             <div class="flex-1 min-h-0 overflow-hidden flex flex-col lg:flex-row gap-4">
               {/* Right column: recent folders */}
               <div class="order-1 lg:order-2 flex flex-col gap-4 flex-1 min-h-0 overflow-hidden">
-              <Show
-                when={folders().length > 0}
-                fallback={
-                  <div class="panel panel-empty-state flex-1">
-                    <div class="panel-empty-state-icon">
-                      <Clock class="w-12 h-12 mx-auto" />
-                    </div>
-                    <p class="panel-empty-state-title">{t("folderSelection.empty.title")}</p>
-                    <p class="panel-empty-state-description">{t("folderSelection.empty.description")}</p>
-                  </div>
-                }
-              >
                 <div class="panel flex flex-col flex-1 min-h-0">
-                  <div class="panel-header">
-                    <h2 class="panel-title">{t("folderSelection.recent.title")}</h2>
-                    <p class="panel-subtitle">
-                      {t(
-                        folders().length === 1
-                          ? "folderSelection.recent.subtitle.one"
-                          : "folderSelection.recent.subtitle.other",
-                        { count: folders().length },
-                      )}
-                    </p>
-                  </div>
-                  <div
-                    class="panel-list panel-list--fill flex-1 min-h-0 overflow-auto"
-                    ref={(el) => (recentListRef = el)}
-                  >
-                    <For each={folders()}>
-                      {(folder, index) => (
+                  <div class="panel-header !gap-0 !p-0">
+                    <div class="grid grid-cols-2 gap-0 overflow-hidden border border-base rounded-t-lg rounded-b-none">
+                      <button
+                        type="button"
+                        class="border-r border-base px-4 py-3 text-left transition-colors"
+                        classList={{
+                          "text-primary": activeTab() === "local",
+                          "text-muted hover:text-secondary": activeTab() !== "local",
+                        }}
+                        style={{
+                          "background-color": "var(--surface-secondary)",
+                        }}
+                        onClick={() => setActiveTab("local")}
+                      >
                         <div
-                          class="panel-list-item"
-                          classList={{
-                            "panel-list-item-highlight": focusMode() === "recent" && selectedIndex() === index(),
-                            "panel-list-item-disabled": isLoading(),
+                          class="panel-title text-base"
+                          style={{
+                            color: activeTab() === "local" ? "var(--text-primary)" : "var(--text-secondary)",
                           }}
                         >
-                          <div class="flex items-center gap-2 w-full px-1">
+                          {t("folderSelection.recent.title")}
+                        </div>
+                        <p
+                          class="panel-subtitle mt-1"
+                          style={{
+                            color: activeTab() === "local" ? "var(--text-muted)" : "var(--text-secondary)",
+                          }}
+                        >
+                          {t(
+                            folders().length === 1
+                              ? "folderSelection.recent.subtitle.one"
+                              : "folderSelection.recent.subtitle.other",
+                            { count: folders().length },
+                          )}
+                        </p>
+                      </button>
+                      <button
+                        type="button"
+                        class="px-4 py-3 text-left transition-colors"
+                        classList={{
+                          "text-primary": activeTab() === "servers",
+                          "text-muted hover:text-secondary": activeTab() !== "servers",
+                        }}
+                        style={{
+                          "background-color": "var(--surface-secondary)",
+                        }}
+                        onClick={() => setActiveTab("servers")}
+                      >
+                        <div
+                          class="panel-title text-base"
+                          style={{
+                            color: activeTab() === "servers" ? "var(--text-primary)" : "var(--text-secondary)",
+                          }}
+                        >
+                          {t("folderSelection.tabs.servers")}
+                        </div>
+                        <p
+                          class="panel-subtitle mt-1"
+                          style={{
+                            color: activeTab() === "servers" ? "var(--text-muted)" : "var(--text-secondary)",
+                          }}
+                        >
+                          {t("folderSelection.servers.count", { count: remoteServers().length })}
+                        </p>
+                      </button>
+                    </div>
+                  </div>
+
+                  <Show
+                    when={activeTab() === "local"}
+                    fallback={
+                      <Show
+                        when={remoteServers().length > 0}
+                        fallback={
+                          <div class="panel-empty-state flex-1">
+                            <div class="panel-empty-state-icon">
+                              <Globe class="w-12 h-12 mx-auto" />
+                            </div>
+                            <p class="panel-empty-state-title">{t("folderSelection.servers.empty.title")}</p>
+                            <p class="panel-empty-state-description">{t("folderSelection.servers.empty.description")}</p>
                             <button
-                              data-folder-index={index()}
-                              class="panel-list-item-content flex-1"
-                              disabled={isLoading()}
-                              onClick={() => handleFolderSelect(folder.path)}
-                              onMouseEnter={() => {
-                                if (isLoading()) return
-                                setFocusMode("recent")
-                                setSelectedIndex(index())
-                              }}
+                              type="button"
+                              class="button-primary mt-4 w-auto self-center inline-flex items-center justify-center gap-2 px-4"
+                              onClick={openServerDialog}
                             >
-                              <div class="flex items-center justify-between gap-3 w-full">
-                                <div class="flex-1 min-w-0">
-                                  <div class="flex items-center gap-2 mb-1">
-                                    <Folder class="w-4 h-4 flex-shrink-0 icon-muted" />
-                                    <span class="text-sm font-medium truncate text-primary">
-                                      {splitFolderPath(folder.path).baseName}
-                                    </span>
-                                  </div>
-                                  <div class="flex items-center gap-2 pl-6 text-xs text-muted min-w-0">
-                                    <span class="font-mono truncate-start flex-1 min-w-0">
-                                      {getDisplayPath(folder.path)}
-                                    </span>
-                                    <span class="flex-shrink-0">{formatRelativeTime(folder.lastAccessed)}</span>
-                                  </div>
-                                </div>
-                                <Show when={focusMode() === "recent" && selectedIndex() === index()}>
-                                  <kbd class="kbd">↵</kbd>
-                                </Show>
-                              </div>
-                            </button>
-                            <button
-                              onClick={(e) => handleRemove(folder.path, e)}
-                              disabled={isLoading()}
-                              class="p-2 transition-all hover:bg-red-100 dark:hover:bg-red-900/30 opacity-70 hover:opacity-100 rounded"
-                              title={t("folderSelection.recent.remove")}
-                            >
-                              <Trash2 class="w-3.5 h-3.5 transition-colors icon-muted hover:text-red-600 dark:hover:text-red-400" />
+                              <Globe class="w-4 h-4" />
+                              <span>{t("folderSelection.actions.connectButton")}</span>
                             </button>
                           </div>
+                        }
+                      >
+                        <div
+                          class="panel-list panel-list--fill flex-1 min-h-0 overflow-auto"
+                          ref={(el) => (recentListRef = el)}
+                        >
+                          <For each={remoteServers()}>
+                            {(server, index) => (
+                              <div
+                                class="panel-list-item"
+                                classList={{
+                                  "panel-list-item-highlight": focusMode() === "recent" && selectedIndex() === index(),
+                                }}
+                              >
+                                <div class="flex items-center gap-2 w-full px-1">
+                                  <button
+                                    data-list-index={index()}
+                                    class="panel-list-item-content flex-1"
+                                    onClick={() => void handleConnectSavedServer(server.id)}
+                                    onMouseEnter={() => {
+                                      setFocusMode("recent")
+                                      setSelectedIndex(index())
+                                    }}
+                                  >
+                                    <div class="flex items-center justify-between gap-3 w-full">
+                                      <div class="flex-1 min-w-0 text-left">
+                                        <div class="flex items-center gap-2 mb-1">
+                                          <Globe class="w-4 h-4 flex-shrink-0 icon-muted" />
+                                          <span class="text-sm font-medium truncate text-primary">{server.name}</span>
+                                        </div>
+                                        <div class="flex items-center gap-2 pl-6 text-xs text-muted min-w-0">
+                                          <span class="font-mono truncate-start flex-1 min-w-0">{server.baseUrl}</span>
+                                        </div>
+                                      </div>
+                                      <Show when={connectingServerId() === server.id} fallback={<Show when={focusMode() === "recent" && selectedIndex() === index()}><kbd class="kbd">↵</kbd></Show>}>
+                                        <Loader2 class="w-4 h-4 animate-spin icon-muted" />
+                                      </Show>
+                                    </div>
+                                  </button>
+                                  <button
+                                    onClick={() => removeRemoteServerProfile(server.id)}
+                                    class="p-2 transition-all hover:bg-red-100 dark:hover:bg-red-900/30 opacity-70 hover:opacity-100 rounded"
+                                    title={t("folderSelection.servers.remove")}
+                                  >
+                                    <Trash2 class="w-3.5 h-3.5 transition-colors icon-muted hover:text-red-600 dark:hover:text-red-400" />
+                                  </button>
+                                </div>
+                              </div>
+                            )}
+                          </For>
                         </div>
-                      )}
-                    </For>
-                  </div>
+                      </Show>
+                    }
+                  >
+                    <Show
+                      when={folders().length > 0}
+                      fallback={
+                        <div class="panel-empty-state flex-1">
+                          <div class="panel-empty-state-icon">
+                            <Clock class="w-12 h-12 mx-auto" />
+                          </div>
+                          <p class="panel-empty-state-title">{t("folderSelection.empty.title")}</p>
+                          <p class="panel-empty-state-description">{t("folderSelection.empty.description")}</p>
+                        </div>
+                      }
+                    >
+                      <div
+                        class="panel-list panel-list--fill flex-1 min-h-0 overflow-auto"
+                        ref={(el) => (recentListRef = el)}
+                      >
+                        <For each={folders()}>
+                          {(folder, index) => (
+                            <div
+                              class="panel-list-item"
+                              classList={{
+                                "panel-list-item-highlight": focusMode() === "recent" && selectedIndex() === index(),
+                                "panel-list-item-disabled": isLoading(),
+                              }}
+                            >
+                              <div class="flex items-center gap-2 w-full px-1">
+                                <button
+                                  data-list-index={index()}
+                                  class="panel-list-item-content flex-1"
+                                  disabled={isLoading()}
+                                  onClick={() => handleFolderSelect(folder.path)}
+                                  onMouseEnter={() => {
+                                    if (isLoading()) return
+                                    setFocusMode("recent")
+                                    setSelectedIndex(index())
+                                  }}
+                                >
+                                  <div class="flex items-center justify-between gap-3 w-full">
+                                    <div class="flex-1 min-w-0">
+                                      <div class="flex items-center gap-2 mb-1">
+                                        <Folder class="w-4 h-4 flex-shrink-0 icon-muted" />
+                                        <span class="text-sm font-medium truncate text-primary">
+                                          {splitFolderPath(folder.path).baseName}
+                                        </span>
+                                      </div>
+                                      <div class="flex items-center gap-2 pl-6 text-xs text-muted min-w-0">
+                                        <span class="font-mono truncate-start flex-1 min-w-0">
+                                          {getDisplayPath(folder.path)}
+                                        </span>
+                                        <span class="flex-shrink-0">{formatRelativeTime(folder.lastAccessed)}</span>
+                                      </div>
+                                    </div>
+                                    <Show when={focusMode() === "recent" && selectedIndex() === index()}>
+                                      <kbd class="kbd">↵</kbd>
+                                    </Show>
+                                  </div>
+                                </button>
+                                <button
+                                  onClick={(e) => handleRemove(folder.path, e)}
+                                  disabled={isLoading()}
+                                  class="p-2 transition-all hover:bg-red-100 dark:hover:bg-red-900/30 opacity-70 hover:opacity-100 rounded"
+                                  title={t("folderSelection.recent.remove")}
+                                >
+                                  <Trash2 class="w-3.5 h-3.5 transition-colors icon-muted hover:text-red-600 dark:hover:text-red-400" />
+                                </button>
+                              </div>
+                            </div>
+                          )}
+                        </For>
+                      </div>
+                    </Show>
+                  </Show>
                 </div>
-              </Show>
 
               </div>
 
@@ -567,27 +840,37 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
               <div class="order-2 lg:order-1 flex flex-col gap-4 flex-1 min-h-0">
               <div class="panel shrink-0">
                 <div class="panel-header hidden sm:block">
-                  <h2 class="panel-title">{t("folderSelection.browse.title")}</h2>
-                  <p class="panel-subtitle">{t("folderSelection.browse.subtitle")}</p>
+                  <h2 class="panel-title">{t("folderSelection.actions.title")}</h2>
+                  <p class="panel-subtitle">{t("folderSelection.actions.subtitle")}</p>
                 </div>
 
-                <div class="panel-body">
-                  <button
-                    onClick={() => void handleBrowse()}
-                    disabled={props.isLoading}
-                    class="button-primary w-full flex items-center justify-center text-sm disabled:cursor-not-allowed"
-                    onMouseEnter={() => setFocusMode("new")}
-                  >
-                    <div class="flex items-center gap-2">
-                      <FolderPlus class="w-4 h-4" />
-                      <span>
-                        {props.isLoading
-                          ? t("folderSelection.browse.buttonOpening")
-                          : t("folderSelection.browse.button")}
-                      </span>
-                    </div>
-                    <Kbd shortcut="cmd+n" class="ml-2 kbd-hint" />
-                  </button>
+                <div class="panel-body flex flex-col gap-3">
+                    <button
+                      onClick={() => void handleBrowse()}
+                      disabled={props.isLoading}
+                      class="button-primary w-full flex items-center justify-center text-sm disabled:cursor-not-allowed"
+                      onMouseEnter={() => setFocusMode("new")}
+                    >
+                      <div class="flex items-center gap-2">
+                        <FolderPlus class="w-4 h-4" />
+                        <span>
+                          {props.isLoading
+                            ? t("folderSelection.browse.buttonOpening")
+                            : t("folderSelection.browse.button")}
+                        </span>
+                      </div>
+                      <Kbd shortcut="cmd+n" class="ml-2 kbd-hint" />
+                    </button>
+
+                    <button
+                      onClick={openServerDialog}
+                      class="button-primary w-full flex items-center justify-center text-sm"
+                    >
+                      <div class="flex items-center gap-2">
+                        <Globe class="w-4 h-4" />
+                        <span>{t("folderSelection.actions.connectButton")}</span>
+                      </div>
+                    </button>
                 </div>
 
                 {/* OpenCode settings section */}
@@ -663,6 +946,82 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
         onClose={() => setIsFolderBrowserOpen(false)}
         onSelect={handleBrowserSelect}
       />
+
+      <Dialog open={isServerDialogOpen()} onOpenChange={(open) => !open && setIsServerDialogOpen(false)}>
+        <Dialog.Portal>
+          <Dialog.Overlay class="modal-overlay" />
+          <div class="fixed inset-0 z-[1300] flex items-center justify-center p-4">
+            <Dialog.Content class="modal-surface w-full max-w-lg p-6 flex flex-col gap-5" tabIndex={-1}>
+              <div>
+                <Dialog.Title class="text-xl font-semibold text-primary">
+                  {t("folderSelection.servers.dialog.title")}
+                </Dialog.Title>
+                <Dialog.Description class="text-sm text-secondary mt-2">
+                  {t("folderSelection.servers.dialog.description")}
+                </Dialog.Description>
+              </div>
+
+              <label class="flex flex-col gap-2 text-sm text-secondary">
+                <span>{t("folderSelection.servers.dialog.name")}</span>
+                <input
+                  class="selector-input w-full"
+                  value={serverName()}
+                  onInput={(event) => setServerName(event.currentTarget.value)}
+                  placeholder={t("folderSelection.servers.dialog.namePlaceholder")}
+                />
+              </label>
+
+              <label class="flex flex-col gap-2 text-sm text-secondary">
+                <span>{t("folderSelection.servers.dialog.url")}</span>
+                <input
+                  class="selector-input w-full"
+                  value={serverUrl()}
+                  onInput={(event) => setServerUrl(event.currentTarget.value)}
+                  placeholder={t("folderSelection.servers.dialog.urlPlaceholder")}
+                />
+              </label>
+
+              <label class="flex items-start gap-3 text-sm text-secondary">
+                <input
+                  type="checkbox"
+                  checked={skipTlsVerify()}
+                  onChange={(event) => setSkipTlsVerify(event.currentTarget.checked)}
+                />
+                <span>{t("folderSelection.servers.dialog.skipTls")}</span>
+              </label>
+
+              <Show when={serverDialogError()}>
+                {(message) => <p class="text-sm text-red-500 break-words">{message()}</p>}
+              </Show>
+
+              <div class="flex items-center justify-end gap-3">
+                <button class="selector-button selector-button-secondary w-auto px-4" onClick={() => setIsServerDialogOpen(false)}>
+                  {t("folderSelection.servers.dialog.cancel")}
+                </button>
+                <button
+                  class="selector-button selector-button-secondary w-auto px-4"
+                  disabled={isSavingServer()}
+                  onClick={() => void handleSaveServer(false)}
+                >
+                  {t("folderSelection.servers.dialog.save")}
+                </button>
+                <button
+                  class="selector-button selector-button-secondary w-auto px-4"
+                  disabled={isSavingServer()}
+                  onClick={() => void handleSaveServer(true)}
+                >
+                  <Show when={isSavingServer()} fallback={<span>{t("folderSelection.servers.dialog.connect")}</span>}>
+                    <span class="inline-flex items-center gap-2">
+                      <Loader2 class="w-4 h-4 animate-spin" />
+                      {t("folderSelection.servers.dialog.connecting")}
+                    </span>
+                  </Show>
+                </button>
+              </div>
+            </Dialog.Content>
+          </div>
+        </Dialog.Portal>
+      </Dialog>
     </>
   )
 }

packages/ui/src/components/remote-access-overlay.tsx

@@ -2,7 +2,7 @@ import { Dialog } from "@kobalte/core/dialog"
 import { Switch } from "@kobalte/core/switch"
 import { For, Show, createEffect, createMemo, createSignal } from "solid-js"
 import { toDataURL } from "qrcode"
-import { ExternalLink, Link2, Loader2, RefreshCw, Shield, Wifi } from "lucide-solid"
+import { ChevronDown, ExternalLink, Link2, Loader2, RefreshCw, Shield, Wifi } from "lucide-solid"
 import type { NetworkAddress, ServerMeta } from "../../../server/src/api-types"
 import { serverApi } from "../lib/api-client"
 import { restartCli } from "../lib/native/cli"
@@ -10,6 +10,7 @@ import { serverSettings, setListeningMode } from "../stores/preferences"
 import { showConfirmDialog } from "../stores/alerts"
 import { getLogger } from "../lib/logger"
 import { useI18n } from "../lib/i18n"
+import { splitRemoteAddresses, type RemoteAddressGroups } from "../lib/remote-access-addresses"
 const log = getLogger("actions")
 
 
@@ -32,17 +33,17 @@ export function RemoteAccessOverlay(props: RemoteAccessOverlayProps) {
   const [passwordConfirm, setPasswordConfirm] = createSignal("")
   const [passwordError, setPasswordError] = createSignal<string | null>(null)
   const [savingPassword, setSavingPassword] = createSignal(false)
+  const [showAllAddresses, setShowAllAddresses] = createSignal(false)
 
   const addresses = createMemo<NetworkAddress[]>(() => meta()?.addresses ?? [])
   const currentMode = createMemo(() => meta()?.listeningMode ?? serverSettings().listeningMode)
   const allowExternalConnections = createMemo(() => currentMode() === "all")
-  const displayAddresses = createMemo(() => {
+  const displayAddresses = createMemo<RemoteAddressGroups>(() => {
     const list = addresses()
     if (!allowExternalConnections()) {
-      return []
+      return { recommended: null, hidden: [] }
     }
-    // Local URL is displayed separately; list only remote-friendly addresses.
-    return list.filter((address) => address.scope !== "loopback")
+    return splitRemoteAddresses(list)
   })
 
   const refreshMeta = async () => {
@@ -53,6 +54,7 @@ export function RemoteAccessOverlay(props: RemoteAccessOverlayProps) {
       const [metaResult, authResult] = await Promise.all([serverApi.fetchServerMeta(), serverApi.fetchAuthStatus()])
       setMeta(metaResult)
       setAuthStatus(authResult)
+      setShowAllAddresses(false)
     } catch (err) {
       setError(err instanceof Error ? err.message : String(err))
     } finally {
@@ -326,7 +328,7 @@ export function RemoteAccessOverlay(props: RemoteAccessOverlayProps) {
 
                 <Show when={!loading()} fallback={<div class="remote-card">{t("remoteAccess.addresses.loading")}</div>}>
                   <Show when={!error()} fallback={<div class="remote-error">{error()}</div>}>
-                    <Show when={displayAddresses().length > 0} fallback={<div class="remote-card">{t("remoteAccess.addresses.none")}</div>}>
+                    <Show when={displayAddresses().recommended || meta()?.localUrl} fallback={<div class="remote-card">{t("remoteAccess.addresses.none")}</div>}>
                       <div class="remote-address-list">
                         <Show when={meta()?.localUrl}>
                           {(url) => {
@@ -373,8 +375,9 @@ export function RemoteAccessOverlay(props: RemoteAccessOverlayProps) {
                             )
                           }}
                         </Show>
-                        <For each={displayAddresses()}>
-                          {(address) => {
+                        <Show when={displayAddresses().recommended}>
+                          {(addressAccessor) => {
+                            const address = addressAccessor()
                             const url = address.remoteUrl
                             const expandedState = () => expandedUrl() === url
                             const qr = () => qrCodes()[url]
@@ -384,13 +387,14 @@ export function RemoteAccessOverlay(props: RemoteAccessOverlayProps) {
                                 : address.scope === "loopback"
                                   ? t("remoteAccess.address.scope.loopback")
                                   : t("remoteAccess.address.scope.internal")
+
                             return (
                               <div class="remote-address">
                                 <div class="remote-address-main">
                                   <div>
                                     <p class="remote-address-url">{url}</p>
                                     <p class="remote-address-meta">
-                                      {address.family.toUpperCase()} • {scopeLabel()} • {address.ip}
+                                      {address.family.toUpperCase()} - {scopeLabel()} - {address.ip}
                                     </p>
                                   </div>
                                   <div class="remote-actions">
@@ -425,7 +429,83 @@ export function RemoteAccessOverlay(props: RemoteAccessOverlayProps) {
                               </div>
                             )
                           }}
-                        </For>
+                        </Show>
+
+                        <Show when={displayAddresses().hidden.length > 0}>
+                          <div class="remote-address-disclosure" data-expanded={showAllAddresses()}>
+                            <button
+                              class="remote-address-disclosure-trigger"
+                              type="button"
+                              onClick={() => setShowAllAddresses(!showAllAddresses())}
+                              aria-expanded={showAllAddresses()}
+                            >
+                              <span class="remote-address-disclosure-label">
+                                {showAllAddresses()
+                                  ? t("remoteAccess.addresses.actions.hideOther")
+                                  : t("remoteAccess.addresses.actions.showOther", { count: String(displayAddresses().hidden.length) })}
+                              </span>
+                              <ChevronDown class={`remote-address-disclosure-chevron ${showAllAddresses() ? "is-expanded" : ""}`} />
+                            </button>
+
+                            <Show when={showAllAddresses()}>
+                              <div class="remote-address-disclosure-content">
+                                <For each={displayAddresses().hidden}>
+                                {(address) => {
+                                  const url = address.remoteUrl
+                                  const expandedState = () => expandedUrl() === url
+                                  const qr = () => qrCodes()[url]
+                                  const scopeLabel = () =>
+                                    address.scope === "external"
+                                      ? t("remoteAccess.address.scope.network")
+                                      : address.scope === "loopback"
+                                        ? t("remoteAccess.address.scope.loopback")
+                                        : t("remoteAccess.address.scope.internal")
+                                  return (
+                                    <div class="remote-address">
+                                      <div class="remote-address-main">
+                                        <div>
+                                          <p class="remote-address-url">{url}</p>
+                                          <p class="remote-address-meta">
+                                            {address.family.toUpperCase()} • {scopeLabel()} • {address.ip}
+                                          </p>
+                                        </div>
+                                        <div class="remote-actions">
+                                          <button class="remote-pill" type="button" onClick={() => handleOpenUrl(url)}>
+                                            <ExternalLink class="remote-icon" />
+                                            {t("remoteAccess.address.open")}
+                                          </button>
+                                          <button
+                                            class="remote-pill"
+                                            type="button"
+                                            onClick={() => void toggleExpanded(url)}
+                                            aria-expanded={expandedState()}
+                                          >
+                                            <Link2 class="remote-icon" />
+                                            {expandedState() ? t("remoteAccess.address.hideQr") : t("remoteAccess.address.showQr")}
+                                          </button>
+                                        </div>
+                                      </div>
+                                      <Show when={expandedState()}>
+                                        <div class="remote-qr">
+                                          <Show when={qr()} fallback={<Loader2 class="remote-icon remote-spin" aria-hidden="true" />}>
+                                            {(dataUrl) => (
+                                              <img
+                                                src={dataUrl()}
+                                                alt={t("remoteAccess.address.qrAlt", { url })}
+                                                class="remote-qr-img"
+                                              />
+                                            )}
+                                          </Show>
+                                        </div>
+                                      </Show>
+                                    </div>
+                                  )
+                                }}
+                                </For>
+                              </div>
+                            </Show>
+                          </div>
+                        </Show>
                       </div>
                     </Show>
                   </Show>

packages/ui/src/components/settings/opencode-settings-section.tsx

@@ -1,14 +1,30 @@
-import { createEffect, createSignal, type Component } from "solid-js"
-import { Terminal } from "lucide-solid"
+import { Select } from "@kobalte/core/select"
+import { createEffect, createMemo, createSignal, type Component } from "solid-js"
+import { ChevronDown, Terminal } from "lucide-solid"
 import OpenCodeBinarySelector from "../opencode-binary-selector"
 import EnvironmentVariablesEditor from "../environment-variables-editor"
 import { useConfig } from "../../stores/preferences"
+import type { ServerLogLevel } from "../../stores/preferences"
 import { useI18n } from "../../lib/i18n"
 
+type LogLevelOption = {
+  value: ServerLogLevel
+  label: string
+}
+
 export const OpenCodeSettingsSection: Component = () => {
   const { t } = useI18n()
-  const { serverSettings, updateLastUsedBinary } = useConfig()
+  const { serverSettings, updateLastUsedBinary, updateLogLevel } = useConfig()
   const [selectedBinary, setSelectedBinary] = createSignal(serverSettings().opencodeBinary || "opencode")
+  const logLevelOptions = createMemo<LogLevelOption[]>(() => [
+    { value: "DEBUG", label: t("settings.opencode.logLevel.option.debug") },
+    { value: "INFO", label: t("settings.opencode.logLevel.option.info") },
+    { value: "WARN", label: t("settings.opencode.logLevel.option.warn") },
+    { value: "ERROR", label: t("settings.opencode.logLevel.option.error") },
+  ])
+  const selectedLogLevel = createMemo(
+    () => logLevelOptions().find((option) => option.value === serverSettings().logLevel) ?? logLevelOptions()[0],
+  )
 
   createEffect(() => {
     const binary = serverSettings().opencodeBinary || "opencode"
@@ -37,6 +53,60 @@ export const OpenCodeSettingsSection: Component = () => {
         <OpenCodeBinarySelector selectedBinary={selectedBinary()} onBinaryChange={handleBinaryChange} isVisible />
       </div>
 
+      <div class="settings-card">
+        <div class="settings-card-header">
+          <div>
+            <h3 class="settings-card-title">{t("settings.opencode.logLevel.title")}</h3>
+            <p class="settings-card-subtitle">{t("settings.opencode.logLevel.subtitle")}</p>
+          </div>
+          <span class="settings-scope-badge settings-scope-badge-server">{t("settings.scope.server")}</span>
+        </div>
+        <div class="settings-card-body">
+          <div class="settings-toggle-row settings-toggle-row-compact">
+            <div>
+              <div class="settings-toggle-title">{t("settings.opencode.logLevel.selector.title")}</div>
+              <div class="settings-toggle-caption">{t("settings.opencode.logLevel.selector.subtitle")}</div>
+            </div>
+            <Select<LogLevelOption>
+              value={selectedLogLevel()}
+              onChange={(option) => {
+                if (!option) return
+                updateLogLevel(option.value)
+              }}
+              options={logLevelOptions()}
+              optionValue="value"
+              optionTextValue="label"
+              itemComponent={(itemProps) => (
+                <Select.Item item={itemProps.item} class="selector-option">
+                  <Select.ItemLabel class="selector-option-label">{itemProps.item.rawValue.label}</Select.ItemLabel>
+                </Select.Item>
+              )}
+            >
+              <Select.Trigger class="selector-trigger" aria-label={t("settings.opencode.logLevel.title")}>
+                <div class="flex-1 min-w-0">
+                  <Select.Value<LogLevelOption>>
+                    {(state) => (
+                      <span class="selector-trigger-primary selector-trigger-primary--align-left">
+                        {state.selectedOption()?.label}
+                      </span>
+                    )}
+                  </Select.Value>
+                </div>
+                <Select.Icon class="selector-trigger-icon">
+                  <ChevronDown class="w-3 h-3" />
+                </Select.Icon>
+              </Select.Trigger>
+
+              <Select.Portal>
+                <Select.Content class="selector-popover">
+                  <Select.Listbox class="selector-listbox" />
+                </Select.Content>
+              </Select.Portal>
+            </Select>
+          </div>
+        </div>
+      </div>
+
       <div class="settings-card">
         <div class="settings-card-header">
           <div>

packages/ui/src/components/settings/remote-access-settings-section.tsx

@@ -1,7 +1,7 @@
 import { Switch } from "@kobalte/core/switch"
 import { For, Show, createMemo, createSignal, type Component, onMount } from "solid-js"
 import { toDataURL } from "qrcode"
-import { ExternalLink, Link2, Loader2, RefreshCw, Shield, Wifi } from "lucide-solid"
+import { ChevronDown, ExternalLink, Link2, Loader2, RefreshCw, Shield, Wifi } from "lucide-solid"
 import type { NetworkAddress, ServerMeta } from "../../../../server/src/api-types"
 import { serverApi } from "../../lib/api-client"
 import { restartCli } from "../../lib/native/cli"
@@ -9,6 +9,7 @@ import { serverSettings, setListeningMode } from "../../stores/preferences"
 import { showConfirmDialog } from "../../stores/alerts"
 import { getLogger } from "../../lib/logger"
 import { useI18n } from "../../lib/i18n"
+import { splitRemoteAddresses, type RemoteAddressGroups } from "../../lib/remote-access-addresses"
 
 const log = getLogger("actions")
 
@@ -30,14 +31,15 @@ export const RemoteAccessSettingsSection: Component = () => {
   const [passwordConfirm, setPasswordConfirm] = createSignal("")
   const [passwordError, setPasswordError] = createSignal<string | null>(null)
   const [savingPassword, setSavingPassword] = createSignal(false)
+  const [showAllAddresses, setShowAllAddresses] = createSignal(false)
 
   const addresses = createMemo<NetworkAddress[]>(() => meta()?.addresses ?? [])
   const currentMode = createMemo(() => meta()?.listeningMode ?? serverSettings().listeningMode)
   const allowExternalConnections = createMemo(() => currentMode() === "all")
-  const displayAddresses = createMemo(() => {
+  const displayAddresses = createMemo<RemoteAddressGroups>(() => {
     const list = addresses()
-    if (!allowExternalConnections()) return []
-    return list.filter((address) => address.scope !== "loopback")
+    if (!allowExternalConnections()) return { recommended: null, hidden: [] }
+    return splitRemoteAddresses(list)
   })
 
   const refreshMeta = async () => {
@@ -48,6 +50,7 @@ export const RemoteAccessSettingsSection: Component = () => {
       const [metaResult, authResult] = await Promise.all([serverApi.fetchServerMeta(), serverApi.fetchAuthStatus()])
       setMeta(metaResult)
       setAuthStatus(authResult)
+      setShowAllAddresses(false)
     } catch (err) {
       setError(err instanceof Error ? err.message : String(err))
     } finally {
@@ -218,31 +221,35 @@ export const RemoteAccessSettingsSection: Component = () => {
           fallback={<div class="settings-card-message">{t("remoteAccess.authStatus.unavailable")}</div>}
         >
           <div class="settings-card-content">
-                <p class="settings-help-text">{t("remoteAccess.username", { username: authStatus()!.username ?? "codenomad" })}</p>
-                <p class="settings-help-text">
-                  {authStatus()!.passwordUserProvided
-                    ? t("remoteAccess.password.status.set")
-                    : t("remoteAccess.password.status.unset")}
-                </p>
+                <div class="settings-password-summary-row">
+                  <div class="settings-password-summary-copy">
+                 <p class="settings-help-text">{t("remoteAccess.username", { username: authStatus()!.username ?? "codenomad" })}</p>
+                 <p class="settings-help-text">
+                   {authStatus()!.passwordUserProvided
+                     ? t("remoteAccess.password.status.set")
+                     : t("remoteAccess.password.status.unset")}
+                 </p>
+                  </div>
 
-                <div class="settings-password-actions">
-                  <button
-                    class="settings-pill-button"
-                    type="button"
-                    onClick={() => {
-                      setPasswordFormOpen(!passwordFormOpen())
-                      setPasswordError(null)
-                    }}
-                  >
-                    {passwordFormOpen()
-                      ? t("remoteAccess.password.actions.cancel")
-                      : authStatus()!.passwordUserProvided
-                        ? t("remoteAccess.password.actions.change")
-                        : t("remoteAccess.password.actions.set")}
-                  </button>
+                  <div class="settings-password-actions">
+                    <button
+                      class="settings-pill-button"
+                      type="button"
+                      onClick={() => {
+                        setPasswordFormOpen(!passwordFormOpen())
+                        setPasswordError(null)
+                      }}
+                    >
+                      {passwordFormOpen()
+                        ? t("remoteAccess.password.actions.cancel")
+                        : authStatus()!.passwordUserProvided
+                          ? t("remoteAccess.password.actions.change")
+                          : t("remoteAccess.password.actions.set")}
+                    </button>
+                  </div>
                 </div>
 
-                <Show when={passwordFormOpen()}>
+                 <Show when={passwordFormOpen()}>
                   <div class="settings-form-group">
                     <label class="settings-form-label">{t("remoteAccess.password.form.newPassword")}</label>
                     <input
@@ -292,7 +299,7 @@ export const RemoteAccessSettingsSection: Component = () => {
         <Show when={!loading()} fallback={<div class="remote-card">{t("remoteAccess.addresses.loading")}</div>}>
           <Show when={!error()} fallback={<div class="remote-error">{error()}</div>}>
             <Show
-              when={displayAddresses().length > 0 || meta()?.localUrl}
+              when={Boolean(displayAddresses().recommended) || meta()?.localUrl}
               fallback={<div class="remote-card">{t("remoteAccess.addresses.none")}</div>}
             >
               <div class="remote-address-list">
@@ -342,8 +349,9 @@ export const RemoteAccessSettingsSection: Component = () => {
                   }}
                 </Show>
 
-                <For each={displayAddresses()}>
-                  {(address) => {
+                <Show when={displayAddresses().recommended}>
+                  {(addressAccessor) => {
+                    const address = addressAccessor()
                     const url = address.remoteUrl
                     const expandedState = () => expandedUrl() === url
                     const qr = () => qrCodes()[url]
@@ -383,7 +391,11 @@ export const RemoteAccessSettingsSection: Component = () => {
                           <div class="remote-qr">
                             <Show when={qr()} fallback={<Loader2 class="remote-icon remote-spin" aria-hidden="true" />}>
                               {(dataUrl) => (
-                                <img src={dataUrl()} alt={t("remoteAccess.address.qrAlt", { url })} class="remote-qr-img" />
+                                <img
+                                  src={dataUrl()}
+                                  alt={t("remoteAccess.address.qrAlt", { url })}
+                                  class="remote-qr-img"
+                                />
                               )}
                             </Show>
                           </div>
@@ -391,7 +403,80 @@ export const RemoteAccessSettingsSection: Component = () => {
                       </div>
                     )
                   }}
-                </For>
+                </Show>
+
+                <Show when={displayAddresses().hidden.length > 0}>
+                  <div class="remote-address-disclosure" data-expanded={showAllAddresses()}>
+                    <button
+                      class="remote-address-disclosure-trigger"
+                      type="button"
+                      onClick={() => setShowAllAddresses(!showAllAddresses())}
+                      aria-expanded={showAllAddresses()}
+                    >
+                      <span class="remote-address-disclosure-label">
+                        {showAllAddresses()
+                          ? t("remoteAccess.addresses.actions.hideOther")
+                          : t("remoteAccess.addresses.actions.showOther", { count: String(displayAddresses().hidden.length) })}
+                      </span>
+                      <ChevronDown class={`remote-address-disclosure-chevron ${showAllAddresses() ? "is-expanded" : ""}`} />
+                    </button>
+
+                    <Show when={showAllAddresses()}>
+                      <div class="remote-address-disclosure-content">
+                        <For each={displayAddresses().hidden}>
+                        {(address) => {
+                          const url = address.remoteUrl
+                          const expandedState = () => expandedUrl() === url
+                          const qr = () => qrCodes()[url]
+                          const scopeLabel = () =>
+                            address.scope === "external"
+                              ? t("remoteAccess.address.scope.network")
+                              : address.scope === "loopback"
+                                ? t("remoteAccess.address.scope.loopback")
+                                : t("remoteAccess.address.scope.internal")
+
+                          return (
+                            <div class="remote-address">
+                              <div class="remote-address-main">
+                                <div>
+                                  <p class="remote-address-url">{url}</p>
+                                  <p class="remote-address-meta">
+                                    {address.family.toUpperCase()} - {scopeLabel()} - {address.ip}
+                                  </p>
+                                </div>
+                                <div class="remote-actions">
+                                  <button class="remote-pill" type="button" onClick={() => handleOpenUrl(url)}>
+                                    <ExternalLink class="remote-icon" />
+                                    {t("remoteAccess.address.open")}
+                                  </button>
+                                  <button
+                                    class="remote-pill"
+                                    type="button"
+                                    onClick={() => void toggleExpanded(url)}
+                                    aria-expanded={expandedState()}
+                                  >
+                                    <Link2 class="remote-icon" />
+                                    {expandedState() ? t("remoteAccess.address.hideQr") : t("remoteAccess.address.showQr")}
+                                  </button>
+                                </div>
+                              </div>
+                              <Show when={expandedState()}>
+                                <div class="remote-qr">
+                                  <Show when={qr()} fallback={<Loader2 class="remote-icon remote-spin" aria-hidden="true" />}>
+                                    {(dataUrl) => (
+                                      <img src={dataUrl()} alt={t("remoteAccess.address.qrAlt", { url })} class="remote-qr-img" />
+                                    )}
+                                  </Show>
+                                </div>
+                              </Show>
+                            </div>
+                          )
+                        }}
+                        </For>
+                      </div>
+                    </Show>
+                  </div>
+                </Show>
               </div>
             </Show>
           </Show>

packages/ui/src/components/tool-call/diff-render.tsx

@@ -1,10 +1,13 @@
-import { Suspense, lazy, onMount, type Accessor, type JSXElement } from "solid-js"
+import { Suspense, createEffect, createMemo, createSignal, lazy, onMount, type Accessor, type JSXElement } from "solid-js"
 import type { ToolState } from "@opencode-ai/sdk/v2"
+import useMediaQuery from "@suid/material/useMediaQuery"
+import { AlignJustify, Copy, Split, WrapText } from "lucide-solid"
 import type { RenderCache } from "../../types/message"
 import type { DiffViewMode } from "../../stores/preferences"
 import type { DiffPayload, DiffRenderOptions, ToolScrollHelpers } from "./types"
 import { getRelativePath } from "./utils"
 import { getCacheEntry } from "../../lib/global-cache"
+import { copyToClipboard } from "../../lib/clipboard"
 
 const LazyToolCallDiffViewer = lazy(() =>
   import("../diff-viewer").then((module) => ({ default: module.ToolCallDiffViewer })),
@@ -43,6 +46,16 @@ export function createDiffContentRenderer(params: {
   handleScrollRendered: () => void
   onContentRendered?: () => void
 }) {
+  const compactDiffQuery = useMediaQuery("(max-width: 640px)")
+  const [mobileModeOverride, setMobileModeOverride] = createSignal<DiffViewMode | undefined>(undefined)
+  const [wordWrapEnabled, setWordWrapEnabled] = createSignal(true)
+
+  createEffect(() => {
+    if (!compactDiffQuery()) {
+      setMobileModeOverride(undefined)
+    }
+  })
+
   const registerTracked = (element: HTMLDivElement | null) => {
     params.scrollHelpers.registerContainer(element)
   }
@@ -58,7 +71,12 @@ export function createDiffContentRenderer(params: {
       : params.t("toolCall.diff.label"))
     const selectedVariant = options?.variant === "permission-diff" ? "permission-diff" : "diff"
     const cacheHandle = selectedVariant === "permission-diff" ? params.permissionDiffCache : params.diffCache
-    const diffMode = () => (params.preferences().diffViewMode || "split") as DiffViewMode
+    const preferredMode = () => (params.preferences().diffViewMode || "split") as DiffViewMode
+    const effectiveMode = () => {
+      if (!compactDiffQuery()) return preferredMode()
+      return mobileModeOverride() || "unified"
+    }
+    const shouldWrap = () => wordWrapEnabled()
     const themeKey = params.isDark() ? "dark" : "light"
     const state = params.toolState()
     const disableScrollTracking = Boolean(
@@ -76,17 +94,40 @@ export function createDiffContentRenderer(params: {
       }
     })()
 
-    let cachedHtml: string | undefined
-    const cached = getCacheEntry<RenderCache>(cacheEntryParams)
-    const currentMode = diffMode()
-    if (cached && cached.text === payload.diffText && cached.theme === themeKey && cached.mode === currentMode) {
-      cachedHtml = cached.html
-    }
+    const currentMode = createMemo(() => effectiveMode())
+    const currentWrap = createMemo(() => shouldWrap())
+    const cachedHtml = createMemo(() => {
+      const cached = getCacheEntry<RenderCache>(cacheEntryParams)
+      if (
+        cached
+        && cached.text === payload.diffText
+        && cached.theme === themeKey
+        && cached.mode === currentMode()
+        && cached.wrap === currentWrap()
+      ) {
+        return cached.html
+      }
+      return undefined
+    })
 
     const handleModeChange = (mode: DiffViewMode) => {
+      if (compactDiffQuery()) {
+        setMobileModeOverride(mode)
+      }
       params.setDiffViewMode(mode)
     }
 
+    const nextViewMode = (): DiffViewMode => (currentMode() === "split" ? "unified" : "split")
+    const viewModeTitle = () =>
+      nextViewMode() === "split"
+        ? params.t("toolCall.diff.switchToSplit")
+        : params.t("toolCall.diff.switchToUnified")
+    const wordWrapTitle = () =>
+      wordWrapEnabled()
+        ? params.t("toolCall.diff.disableWordWrap")
+        : params.t("toolCall.diff.enableWordWrap")
+    const copyPatchTitle = () => params.t("toolCall.diff.copyPatch")
+
     const handleDiffRendered = () => {
       if (!disableScrollTracking) {
         params.handleScrollRendered()
@@ -95,41 +136,54 @@ export function createDiffContentRenderer(params: {
     }
 
     return (
-      <div
-        class="message-text tool-call-markdown tool-call-markdown-large tool-call-diff-shell"
-        ref={registerRef}
-        onScroll={disableScrollTracking ? undefined : params.scrollHelpers.handleScroll}
-      >
+        <div
+          class="message-text tool-call-markdown tool-call-markdown-large tool-call-diff-shell"
+          data-diff-mode={currentMode()}
+          ref={registerRef}
+          onScroll={disableScrollTracking ? undefined : params.scrollHelpers.handleScroll}
+        >
         <div class="tool-call-diff-toolbar" role="group" aria-label={params.t("toolCall.diff.viewMode.ariaLabel")}>
           <span class="tool-call-diff-toolbar-label">{toolbarLabel}</span>
-          <div class="tool-call-diff-toggle">
+          <div class="file-viewer-toolbar">
             <button
               type="button"
-              class={`tool-call-diff-mode-button${diffMode() === "split" ? " active" : ""}`}
-              aria-pressed={diffMode() === "split"}
-              onClick={() => handleModeChange("split")}
+              class="file-viewer-toolbar-icon-button"
+              onClick={() => void copyToClipboard(payload.diffText)}
+              aria-label={copyPatchTitle()}
+              title={copyPatchTitle()}
             >
-              {params.t("toolCall.diff.viewMode.split")}
+              <Copy class="h-4 w-4" aria-hidden="true" />
             </button>
             <button
               type="button"
-              class={`tool-call-diff-mode-button${diffMode() === "unified" ? " active" : ""}`}
-              aria-pressed={diffMode() === "unified"}
-              onClick={() => handleModeChange("unified")}
+              class="file-viewer-toolbar-icon-button"
+              onClick={() => handleModeChange(nextViewMode())}
+              aria-label={viewModeTitle()}
+              title={viewModeTitle()}
             >
-              {params.t("toolCall.diff.viewMode.unified")}
+              {nextViewMode() === "split" ? <Split class="h-4 w-4" aria-hidden="true" /> : <AlignJustify class="h-4 w-4" aria-hidden="true" />}
+            </button>
+            <button
+              type="button"
+              class={`file-viewer-toolbar-icon-button${wordWrapEnabled() ? " active" : ""}`}
+              onClick={() => setWordWrapEnabled((enabled) => !enabled)}
+              aria-label={wordWrapTitle()}
+              title={wordWrapTitle()}
+            >
+              <WrapText class="h-4 w-4" aria-hidden="true" />
             </button>
           </div>
         </div>
-        {cachedHtml ? (
-          <CachedDiffMarkup html={cachedHtml} onRendered={handleDiffRendered} />
+        {cachedHtml() ? (
+          <CachedDiffMarkup html={cachedHtml()!} onRendered={handleDiffRendered} />
         ) : (
           <Suspense fallback={<pre class="tool-call-diff-fallback">{payload.diffText}</pre>}>
             <LazyToolCallDiffViewer
               diffText={payload.diffText}
               filePath={payload.filePath}
               theme={themeKey}
-              mode={diffMode()}
+              mode={currentMode()}
+              wrap={currentWrap()}
               cacheEntryParams={cacheEntryParams as any}
               onRendered={handleDiffRendered}
             />

packages/ui/src/lib/api-client.ts

@@ -11,6 +11,8 @@ import type {
   SpeechSynthesisResponse,
   SpeechTranscriptionResponse,
   ServerMeta,
+  RemoteServerProbeRequest,
+  RemoteServerProbeResponse,
   VoiceModeStateResponse,
   WorkspaceCreateRequest,
   WorkspaceDescriptor,
@@ -194,6 +196,12 @@ export const serverApi = {
   fetchServerMeta(): Promise<ServerMeta> {
     return request<ServerMeta>("/api/meta")
   },
+  probeRemoteServer(payload: RemoteServerProbeRequest): Promise<RemoteServerProbeResponse> {
+    return request<RemoteServerProbeResponse>("/api/remote-servers/probe", {
+      method: "POST",
+      body: JSON.stringify(payload),
+    })
+  },
   fetchAuthStatus(): Promise<{ authenticated: boolean; username?: string; passwordUserProvided?: boolean }> {
     return request<{ authenticated: boolean; username?: string; passwordUserProvided?: boolean }>("/api/auth/status")
   },

packages/ui/src/lib/i18n/messages/en/folderSelection.ts

@@ -20,6 +20,9 @@ export const folderSelectionMessages = {
   "folderSelection.browse.subtitle": "Select any folder on your computer",
   "folderSelection.browse.button": "Browse Folders",
   "folderSelection.browse.buttonOpening": "Opening...",
+  "folderSelection.actions.title": "Open Folder or Connect Server",
+  "folderSelection.actions.subtitle": "Open local folder or connect to a CodeNomad server",
+  "folderSelection.actions.connectButton": "Connect CodeNomad Server",
 
   "folderSelection.advancedSettings": "Advanced Settings",
   "folderSelection.opencode": "OpenCode",
@@ -39,4 +42,31 @@ export const folderSelectionMessages = {
 
   "folderSelection.dialog.title": "Select Workspace",
   "folderSelection.dialog.description": "Select workspace to start coding.",
+
+  "folderSelection.tabs.local": "Local Folders",
+  "folderSelection.tabs.servers": "Servers",
+  "folderSelection.servers.title": "Saved Servers",
+  "folderSelection.servers.subtitle": "Open a saved remote CodeNomad server in a new window",
+  "folderSelection.servers.count": "{count} Servers",
+  "folderSelection.servers.empty.title": "No Saved Servers",
+  "folderSelection.servers.empty.description": "Add a remote server to reconnect quickly from this device",
+  "folderSelection.servers.connectTitle": "Connect to Server",
+  "folderSelection.servers.connectSubtitle": "Save a remote CodeNomad server and open it in a new window",
+  "folderSelection.servers.connectButton": "Connect to Server",
+  "folderSelection.servers.remove": "Remove saved server",
+  "folderSelection.servers.skipTls": "Self-signed TLS",
+  "folderSelection.servers.errorTitle": "Remote Connection Failed",
+  "folderSelection.servers.dialog.title": "Connect to Server",
+  "folderSelection.servers.dialog.description": "Add a remote CodeNomad server and optionally open it right away.",
+  "folderSelection.servers.dialog.name": "Server name",
+  "folderSelection.servers.dialog.namePlaceholder": "Production Server",
+  "folderSelection.servers.dialog.url": "Server URL",
+  "folderSelection.servers.dialog.urlPlaceholder": "https://server.example.com",
+  "folderSelection.servers.dialog.skipTls": "Skip TLS verification for self-signed certificates.",
+  "folderSelection.servers.dialog.cancel": "Cancel",
+  "folderSelection.servers.dialog.save": "Save",
+  "folderSelection.servers.dialog.connect": "Connect",
+  "folderSelection.servers.dialog.connecting": "Connecting...",
+  "folderSelection.servers.dialog.errorRequired": "Server name and URL are required.",
+  "folderSelection.servers.dialog.errorConnect": "Could not connect to the remote server.",
 } as const

packages/ui/src/lib/i18n/messages/en/remoteAccess.ts

@@ -41,6 +41,8 @@ export const remoteAccessMessages = {
   "remoteAccess.sections.addresses.help": "Launch or scan from another machine to hand over control.",
   "remoteAccess.addresses.loading": "Loading addresses…",
   "remoteAccess.addresses.none": "No addresses available yet.",
+  "remoteAccess.addresses.actions.showOther": "Show {count} other addresses",
+  "remoteAccess.addresses.actions.hideOther": "Hide other addresses",
   "remoteAccess.address.scope.network": "Network",
   "remoteAccess.address.scope.loopback": "Loopback",
   "remoteAccess.address.scope.internal": "Internal",

packages/ui/src/lib/i18n/messages/en/settings.ts

@@ -113,6 +113,15 @@ export const settingsMessages = {
   "settings.section.opencode.subtitle": "Choose the OpenCode binary and environment used for new instances.",
   "settings.opencode.runtime.title": "Runtime",
   "settings.opencode.runtime.subtitle": "Configure which OpenCode binary new instances launch with.",
+  "settings.opencode.logLevel.title": "OpenCode Log Level",
+  "settings.opencode.logLevel.subtitle": "Control the log verbosity used when launching new OpenCode instances.",
+  "settings.opencode.logLevel.selector.title": "Default log level",
+  "settings.opencode.logLevel.selector.subtitle": "Choose how verbose new OpenCode instances should be.",
+  "settings.opencode.logLevel.option.debug": "Debug",
+  "settings.opencode.logLevel.option.info": "Info",
+  "settings.opencode.logLevel.option.warn": "Warn",
+  "settings.opencode.logLevel.option.error": "Error",
+
 
   "settings.appearance.behavior.title": "Interaction",
   "settings.appearance.behavior.subtitle": "Message, diff, and input defaults.",

packages/ui/src/lib/i18n/messages/en/toolCall.ts

@@ -18,6 +18,11 @@ export const toolCallMessages = {
   "toolCall.diff.viewMode.ariaLabel": "Diff view mode",
   "toolCall.diff.viewMode.split": "Split",
   "toolCall.diff.viewMode.unified": "Unified",
+  "toolCall.diff.switchToSplit": "Switch to split view",
+  "toolCall.diff.switchToUnified": "Switch to unified view",
+  "toolCall.diff.enableWordWrap": "Enable word wrap",
+  "toolCall.diff.disableWordWrap": "Disable word wrap",
+  "toolCall.diff.copyPatch": "Copy patch",
 
   "toolCall.diagnostics.title": "Diagnostics",
   "toolCall.diagnostics.ariaLabel": "Diagnostics",

packages/ui/src/lib/i18n/messages/es/folderSelection.ts

@@ -20,6 +20,9 @@ export const folderSelectionMessages = {
   "folderSelection.browse.subtitle": "Selecciona cualquier carpeta en tu ordenador",
   "folderSelection.browse.button": "Explorar carpetas",
   "folderSelection.browse.buttonOpening": "Abriendo...",
+  "folderSelection.actions.title": "Abrir carpeta o conectar servidor",
+  "folderSelection.actions.subtitle": "Abre una carpeta local o conéctate a un servidor de CodeNomad",
+  "folderSelection.actions.connectButton": "Conectar servidor CodeNomad",
 
   "folderSelection.advancedSettings": "Configuración avanzada",
   "folderSelection.opencode": "OpenCode",
@@ -39,4 +42,31 @@ export const folderSelectionMessages = {
 
   "folderSelection.dialog.title": "Seleccionar workspace",
   "folderSelection.dialog.description": "Selecciona un workspace para empezar a programar.",
+
+  "folderSelection.tabs.local": "Carpetas locales",
+  "folderSelection.tabs.servers": "Servidores",
+  "folderSelection.servers.title": "Servidores guardados",
+  "folderSelection.servers.subtitle": "Abre un servidor remoto de CodeNomad guardado en una ventana nueva",
+  "folderSelection.servers.count": "{count} servidores",
+  "folderSelection.servers.empty.title": "No hay servidores guardados",
+  "folderSelection.servers.empty.description": "Añade un servidor remoto para volver a conectarte rápidamente desde este dispositivo",
+  "folderSelection.servers.connectTitle": "Conectar a un servidor",
+  "folderSelection.servers.connectSubtitle": "Guarda un servidor remoto de CodeNomad y ábrelo en una ventana nueva",
+  "folderSelection.servers.connectButton": "Conectar a un servidor",
+  "folderSelection.servers.remove": "Eliminar servidor guardado",
+  "folderSelection.servers.skipTls": "TLS autofirmado",
+  "folderSelection.servers.errorTitle": "Falló la conexión remota",
+  "folderSelection.servers.dialog.title": "Conectar a un servidor",
+  "folderSelection.servers.dialog.description": "Añade un servidor remoto de CodeNomad y ábrelo ahora si quieres.",
+  "folderSelection.servers.dialog.name": "Nombre del servidor",
+  "folderSelection.servers.dialog.namePlaceholder": "Servidor de producción",
+  "folderSelection.servers.dialog.url": "URL del servidor",
+  "folderSelection.servers.dialog.urlPlaceholder": "https://server.example.com",
+  "folderSelection.servers.dialog.skipTls": "Omitir la verificación TLS para certificados autofirmados.",
+  "folderSelection.servers.dialog.cancel": "Cancelar",
+  "folderSelection.servers.dialog.save": "Guardar",
+  "folderSelection.servers.dialog.connect": "Conectar",
+  "folderSelection.servers.dialog.connecting": "Conectando...",
+  "folderSelection.servers.dialog.errorRequired": "El nombre y la URL del servidor son obligatorios.",
+  "folderSelection.servers.dialog.errorConnect": "No se pudo conectar al servidor remoto.",
 } as const

packages/ui/src/lib/i18n/messages/es/remoteAccess.ts

@@ -41,6 +41,8 @@ export const remoteAccessMessages = {
   "remoteAccess.sections.addresses.help": "Abre o escanea desde otra máquina para transferir el control.",
   "remoteAccess.addresses.loading": "Cargando direcciones…",
   "remoteAccess.addresses.none": "Aún no hay direcciones disponibles.",
+  "remoteAccess.addresses.actions.showOther": "Mostrar {count} direcciones más",
+  "remoteAccess.addresses.actions.hideOther": "Ocultar otras direcciones",
   "remoteAccess.address.scope.network": "Red",
   "remoteAccess.address.scope.loopback": "Loopback",
   "remoteAccess.address.scope.internal": "Interna",

packages/ui/src/lib/i18n/messages/es/settings.ts

@@ -113,6 +113,14 @@ export const settingsMessages = {
   "settings.section.opencode.subtitle": "Choose the OpenCode binary and environment used for new instances.",
   "settings.opencode.runtime.title": "Runtime",
   "settings.opencode.runtime.subtitle": "Configure which OpenCode binary new instances launch with.",
+  "settings.opencode.logLevel.title": "Nivel de logs de OpenCode",
+  "settings.opencode.logLevel.subtitle": "Define el nivel de logs usado al iniciar nuevas instancias de OpenCode.",
+  "settings.opencode.logLevel.selector.title": "Verbosidad de logs",
+  "settings.opencode.logLevel.selector.subtitle": "Elige cuanta informacion deben registrar las nuevas instancias de OpenCode.",
+  "settings.opencode.logLevel.option.debug": "Depuracion",
+  "settings.opencode.logLevel.option.info": "Informacion",
+  "settings.opencode.logLevel.option.warn": "Advertencia",
+  "settings.opencode.logLevel.option.error": "Error",
 
   "settings.appearance.behavior.title": "Interaccion",
   "settings.appearance.behavior.subtitle": "Valores predeterminados de mensajes, diffs y entrada.",

packages/ui/src/lib/i18n/messages/es/toolCall.ts

@@ -18,6 +18,11 @@ export const toolCallMessages = {
   "toolCall.diff.viewMode.ariaLabel": "Modo de vista de diff",
   "toolCall.diff.viewMode.split": "Dividida",
   "toolCall.diff.viewMode.unified": "Unificada",
+  "toolCall.diff.switchToSplit": "Cambiar a vista dividida",
+  "toolCall.diff.switchToUnified": "Cambiar a vista unificada",
+  "toolCall.diff.enableWordWrap": "Activar ajuste de línea",
+  "toolCall.diff.disableWordWrap": "Desactivar ajuste de línea",
+  "toolCall.diff.copyPatch": "Copiar patch",
 
   "toolCall.diagnostics.title": "Diagnósticos",
   "toolCall.diagnostics.ariaLabel": "Diagnósticos",

packages/ui/src/lib/i18n/messages/fr/folderSelection.ts

@@ -20,6 +20,9 @@ export const folderSelectionMessages = {
   "folderSelection.browse.subtitle": "Sélectionnez n'importe quel dossier sur votre ordinateur",
   "folderSelection.browse.button": "Parcourir les dossiers",
   "folderSelection.browse.buttonOpening": "Ouverture...",
+  "folderSelection.actions.title": "Ouvrir un dossier ou connecter un serveur",
+  "folderSelection.actions.subtitle": "Ouvrez un dossier local ou connectez-vous à un serveur CodeNomad",
+  "folderSelection.actions.connectButton": "Connecter un serveur CodeNomad",
 
   "folderSelection.advancedSettings": "Paramètres avancés",
   "folderSelection.opencode": "OpenCode",
@@ -39,4 +42,31 @@ export const folderSelectionMessages = {
 
   "folderSelection.dialog.title": "Sélectionner l'espace de travail",
   "folderSelection.dialog.description": "Sélectionnez un espace de travail pour commencer à coder.",
+
+  "folderSelection.tabs.local": "Dossiers locaux",
+  "folderSelection.tabs.servers": "Serveurs",
+  "folderSelection.servers.title": "Serveurs enregistrés",
+  "folderSelection.servers.subtitle": "Ouvrez un serveur CodeNomad distant enregistré dans une nouvelle fenêtre",
+  "folderSelection.servers.count": "{count} serveurs",
+  "folderSelection.servers.empty.title": "Aucun serveur enregistré",
+  "folderSelection.servers.empty.description": "Ajoutez un serveur distant pour vous reconnecter rapidement depuis cet appareil",
+  "folderSelection.servers.connectTitle": "Se connecter à un serveur",
+  "folderSelection.servers.connectSubtitle": "Enregistrez un serveur CodeNomad distant et ouvrez-le dans une nouvelle fenêtre",
+  "folderSelection.servers.connectButton": "Se connecter à un serveur",
+  "folderSelection.servers.remove": "Supprimer le serveur enregistré",
+  "folderSelection.servers.skipTls": "TLS auto-signé",
+  "folderSelection.servers.errorTitle": "Échec de la connexion distante",
+  "folderSelection.servers.dialog.title": "Se connecter à un serveur",
+  "folderSelection.servers.dialog.description": "Ajoutez un serveur CodeNomad distant et ouvrez-le immédiatement si vous le souhaitez.",
+  "folderSelection.servers.dialog.name": "Nom du serveur",
+  "folderSelection.servers.dialog.namePlaceholder": "Serveur de production",
+  "folderSelection.servers.dialog.url": "URL du serveur",
+  "folderSelection.servers.dialog.urlPlaceholder": "https://server.example.com",
+  "folderSelection.servers.dialog.skipTls": "Ignorer la vérification TLS pour les certificats auto-signés.",
+  "folderSelection.servers.dialog.cancel": "Annuler",
+  "folderSelection.servers.dialog.save": "Enregistrer",
+  "folderSelection.servers.dialog.connect": "Se connecter",
+  "folderSelection.servers.dialog.connecting": "Connexion...",
+  "folderSelection.servers.dialog.errorRequired": "Le nom du serveur et l'URL sont requis.",
+  "folderSelection.servers.dialog.errorConnect": "Impossible de se connecter au serveur distant.",
 } as const

packages/ui/src/lib/i18n/messages/fr/remoteAccess.ts

@@ -41,6 +41,8 @@ export const remoteAccessMessages = {
   "remoteAccess.sections.addresses.help": "Lancez ou scannez depuis une autre machine pour passer le contrôle.",
   "remoteAccess.addresses.loading": "Chargement des adresses…",
   "remoteAccess.addresses.none": "Aucune adresse disponible pour le moment.",
+  "remoteAccess.addresses.actions.showOther": "Afficher {count} autres adresses",
+  "remoteAccess.addresses.actions.hideOther": "Masquer les autres adresses",
   "remoteAccess.address.scope.network": "Réseau",
   "remoteAccess.address.scope.loopback": "Boucle locale",
   "remoteAccess.address.scope.internal": "Interne",

packages/ui/src/lib/i18n/messages/fr/settings.ts

@@ -113,6 +113,14 @@ export const settingsMessages = {
   "settings.section.opencode.subtitle": "Choose the OpenCode binary and environment used for new instances.",
   "settings.opencode.runtime.title": "Runtime",
   "settings.opencode.runtime.subtitle": "Configure which OpenCode binary new instances launch with.",
+  "settings.opencode.logLevel.title": "Niveau de logs OpenCode",
+  "settings.opencode.logLevel.subtitle": "Definir le niveau de logs utilise au lancement des nouvelles instances OpenCode.",
+  "settings.opencode.logLevel.selector.title": "Verbosite des logs",
+  "settings.opencode.logLevel.selector.subtitle": "Choisir la quantite de journaux emise par les nouvelles instances OpenCode.",
+  "settings.opencode.logLevel.option.debug": "Debogage",
+  "settings.opencode.logLevel.option.info": "Info",
+  "settings.opencode.logLevel.option.warn": "Avertissement",
+  "settings.opencode.logLevel.option.error": "Erreur",
 
   "settings.appearance.behavior.title": "Interaction",
   "settings.appearance.behavior.subtitle": "Parametres par defaut pour les messages, les diffs et la saisie.",

packages/ui/src/lib/i18n/messages/fr/toolCall.ts

@@ -18,6 +18,11 @@ export const toolCallMessages = {
   "toolCall.diff.viewMode.ariaLabel": "Mode d'affichage du diff",
   "toolCall.diff.viewMode.split": "Côte à côte",
   "toolCall.diff.viewMode.unified": "Unifié",
+  "toolCall.diff.switchToSplit": "Passer à la vue côte à côte",
+  "toolCall.diff.switchToUnified": "Passer à la vue unifiée",
+  "toolCall.diff.enableWordWrap": "Activer le retour à la ligne",
+  "toolCall.diff.disableWordWrap": "Désactiver le retour à la ligne",
+  "toolCall.diff.copyPatch": "Copier le patch",
 
   "toolCall.diagnostics.title": "Diagnostics",
   "toolCall.diagnostics.ariaLabel": "Diagnostics",

packages/ui/src/lib/i18n/messages/he/folderSelection.ts

@@ -20,6 +20,9 @@ export const folderSelectionMessages = {
   "folderSelection.browse.subtitle": "בחר כל תיקייה במחשב שלך",
   "folderSelection.browse.button": "עיון בתיקיות",
   "folderSelection.browse.buttonOpening": "פותח...",
+  "folderSelection.actions.title": "פתח תיקייה או התחבר לשרת",
+  "folderSelection.actions.subtitle": "פתח תיקייה מקומית או התחבר לשרת CodeNomad",
+  "folderSelection.actions.connectButton": "התחבר לשרת CodeNomad",
 
   "folderSelection.advancedSettings": "הגדרות מתקדמות",
   "folderSelection.opencode": "OpenCode",
@@ -39,4 +42,31 @@ export const folderSelectionMessages = {
 
   "folderSelection.dialog.title": "בחר סביבת עבודה",
   "folderSelection.dialog.description": "בחר סביבת עבודה כדי להתחיל לתכנת.",
+
+  "folderSelection.tabs.local": "תיקיות מקומיות",
+  "folderSelection.tabs.servers": "שרתים",
+  "folderSelection.servers.title": "שרתים שמורים",
+  "folderSelection.servers.subtitle": "פתח שרת CodeNomad מרוחק שמור בחלון חדש",
+  "folderSelection.servers.count": "{count} שרתים",
+  "folderSelection.servers.empty.title": "אין שרתים שמורים",
+  "folderSelection.servers.empty.description": "הוסף שרת מרוחק כדי להתחבר אליו במהירות מהמכשיר הזה",
+  "folderSelection.servers.connectTitle": "התחבר לשרת",
+  "folderSelection.servers.connectSubtitle": "שמור שרת CodeNomad מרוחק ופתח אותו בחלון חדש",
+  "folderSelection.servers.connectButton": "התחבר לשרת",
+  "folderSelection.servers.remove": "הסר שרת שמור",
+  "folderSelection.servers.skipTls": "TLS בחתימה עצמית",
+  "folderSelection.servers.errorTitle": "החיבור המרוחק נכשל",
+  "folderSelection.servers.dialog.title": "התחבר לשרת",
+  "folderSelection.servers.dialog.description": "הוסף שרת CodeNomad מרוחק ופתח אותו מיד אם תרצה.",
+  "folderSelection.servers.dialog.name": "שם השרת",
+  "folderSelection.servers.dialog.namePlaceholder": "שרת ייצור",
+  "folderSelection.servers.dialog.url": "כתובת השרת",
+  "folderSelection.servers.dialog.urlPlaceholder": "https://server.example.com",
+  "folderSelection.servers.dialog.skipTls": "דלג על אימות TLS עבור תעודות בחתימה עצמית.",
+  "folderSelection.servers.dialog.cancel": "ביטול",
+  "folderSelection.servers.dialog.save": "שמור",
+  "folderSelection.servers.dialog.connect": "התחבר",
+  "folderSelection.servers.dialog.connecting": "מתחבר...",
+  "folderSelection.servers.dialog.errorRequired": "שם השרת והכתובת הם שדות חובה.",
+  "folderSelection.servers.dialog.errorConnect": "לא ניתן היה להתחבר לשרת המרוחק.",
 } as const

packages/ui/src/lib/i18n/messages/he/remoteAccess.ts

@@ -41,6 +41,8 @@ export const remoteAccessMessages = {
   "remoteAccess.sections.addresses.help": "הפעל או סרוק ממכונה אחרת להעברת שליטה.",
   "remoteAccess.addresses.loading": "טוען כתובות…",
   "remoteAccess.addresses.none": "אין כתובות זמינות עדיין.",
+  "remoteAccess.addresses.actions.showOther": "הצג עוד {count} כתובות",
+  "remoteAccess.addresses.actions.hideOther": "הסתר כתובות נוספות",
   "remoteAccess.address.scope.network": "רשת",
   "remoteAccess.address.scope.loopback": "לולאה מקומית",
   "remoteAccess.address.scope.internal": "פנימי",

packages/ui/src/lib/i18n/messages/he/settings.ts

@@ -112,6 +112,14 @@ export const settingsMessages = {
   "settings.section.opencode.subtitle": "בחר את הקובץ הבינארי של OpenCode והסביבה לשימוש במופעים חדשים.",
   "settings.opencode.runtime.title": "סביבת ריצה",
   "settings.opencode.runtime.subtitle": "הגדר עם איזה קובץ בינארי של OpenCode מופעים חדשים יופעלו.",
+  "settings.opencode.logLevel.title": "רמת הלוגים של OpenCode",
+  "settings.opencode.logLevel.subtitle": "הגדר את רמת הלוגים שבה ייעשה שימוש בעת הפעלת מופעי OpenCode חדשים.",
+  "settings.opencode.logLevel.selector.title": "פירוט לוגים",
+  "settings.opencode.logLevel.selector.subtitle": "בחר כמה לוגים מופעי OpenCode חדשים צריכים להפיק.",
+  "settings.opencode.logLevel.option.debug": "ניפוי שגיאות",
+  "settings.opencode.logLevel.option.info": "מידע",
+  "settings.opencode.logLevel.option.warn": "אזהרה",
+  "settings.opencode.logLevel.option.error": "שגיאה",
 
   "settings.appearance.behavior.title": "אינטראקציה",
   "settings.appearance.behavior.subtitle": "ברירות מחדל להודעות, diff וקלט.",

packages/ui/src/lib/i18n/messages/he/toolCall.ts

@@ -18,6 +18,11 @@ export const toolCallMessages = {
   "toolCall.diff.viewMode.ariaLabel": "מצב תצוגת diff",
   "toolCall.diff.viewMode.split": "מפוצל",
   "toolCall.diff.viewMode.unified": "מאוחד",
+  "toolCall.diff.switchToSplit": "עבור לתצוגה מפוצלת",
+  "toolCall.diff.switchToUnified": "עבור לתצוגה מאוחדת",
+  "toolCall.diff.enableWordWrap": "הפעל גלישת מילים",
+  "toolCall.diff.disableWordWrap": "כבה גלישת מילים",
+  "toolCall.diff.copyPatch": "העתק patch",
 
   "toolCall.diagnostics.title": "אבחון",
   "toolCall.diagnostics.ariaLabel": "אבחון",

packages/ui/src/lib/i18n/messages/ja/folderSelection.ts

@@ -20,6 +20,9 @@ export const folderSelectionMessages = {
   "folderSelection.browse.subtitle": "コンピュータ上の任意のフォルダを選択",
   "folderSelection.browse.button": "フォルダを参照",
   "folderSelection.browse.buttonOpening": "開いています...",
+  "folderSelection.actions.title": "フォルダを開くかサーバーに接続",
+  "folderSelection.actions.subtitle": "ローカルフォルダを開くか CodeNomad サーバーに接続します",
+  "folderSelection.actions.connectButton": "CodeNomad サーバーに接続",
 
   "folderSelection.advancedSettings": "詳細設定",
   "folderSelection.opencode": "OpenCode",
@@ -39,4 +42,31 @@ export const folderSelectionMessages = {
 
   "folderSelection.dialog.title": "ワークスペースを選択",
   "folderSelection.dialog.description": "コーディングを開始するワークスペースを選択してください。",
+
+  "folderSelection.tabs.local": "ローカルフォルダ",
+  "folderSelection.tabs.servers": "サーバー",
+  "folderSelection.servers.title": "保存済みサーバー",
+  "folderSelection.servers.subtitle": "保存したリモート CodeNomad サーバーを新しいウィンドウで開きます",
+  "folderSelection.servers.count": "{count} サーバー",
+  "folderSelection.servers.empty.title": "保存済みサーバーはありません",
+  "folderSelection.servers.empty.description": "この端末からすばやく再接続できるように、リモートサーバーを追加してください",
+  "folderSelection.servers.connectTitle": "サーバーに接続",
+  "folderSelection.servers.connectSubtitle": "リモート CodeNomad サーバーを保存して新しいウィンドウで開きます",
+  "folderSelection.servers.connectButton": "サーバーに接続",
+  "folderSelection.servers.remove": "保存したサーバーを削除",
+  "folderSelection.servers.skipTls": "自己署名 TLS",
+  "folderSelection.servers.errorTitle": "リモート接続に失敗しました",
+  "folderSelection.servers.dialog.title": "サーバーに接続",
+  "folderSelection.servers.dialog.description": "リモート CodeNomad サーバーを追加し、必要に応じてすぐに開きます。",
+  "folderSelection.servers.dialog.name": "サーバー名",
+  "folderSelection.servers.dialog.namePlaceholder": "本番サーバー",
+  "folderSelection.servers.dialog.url": "サーバー URL",
+  "folderSelection.servers.dialog.urlPlaceholder": "https://server.example.com",
+  "folderSelection.servers.dialog.skipTls": "自己署名証明書の TLS 検証をスキップします。",
+  "folderSelection.servers.dialog.cancel": "キャンセル",
+  "folderSelection.servers.dialog.save": "保存",
+  "folderSelection.servers.dialog.connect": "接続",
+  "folderSelection.servers.dialog.connecting": "接続中...",
+  "folderSelection.servers.dialog.errorRequired": "サーバー名と URL は必須です。",
+  "folderSelection.servers.dialog.errorConnect": "リモートサーバーに接続できませんでした。",
 } as const

packages/ui/src/lib/i18n/messages/ja/remoteAccess.ts

@@ -41,6 +41,8 @@ export const remoteAccessMessages = {
   "remoteAccess.sections.addresses.help": "別の端末から起動またはスキャンして操作を引き継ぎます。",
   "remoteAccess.addresses.loading": "アドレスを読み込み中…",
   "remoteAccess.addresses.none": "まだ利用可能なアドレスがありません。",
+  "remoteAccess.addresses.actions.showOther": "他の {count} 件のアドレスを表示",
+  "remoteAccess.addresses.actions.hideOther": "他のアドレスを隠す",
   "remoteAccess.address.scope.network": "ネットワーク",
   "remoteAccess.address.scope.loopback": "ループバック",
   "remoteAccess.address.scope.internal": "内部",

packages/ui/src/lib/i18n/messages/ja/settings.ts

@@ -113,6 +113,14 @@ export const settingsMessages = {
   "settings.section.opencode.subtitle": "Choose the OpenCode binary and environment used for new instances.",
   "settings.opencode.runtime.title": "Runtime",
   "settings.opencode.runtime.subtitle": "Configure which OpenCode binary new instances launch with.",
+  "settings.opencode.logLevel.title": "OpenCode のログレベル",
+  "settings.opencode.logLevel.subtitle": "新しい OpenCode インスタンスの起動時に使うログレベルを設定します。",
+  "settings.opencode.logLevel.selector.title": "ログ出力の詳細度",
+  "settings.opencode.logLevel.selector.subtitle": "新しい OpenCode インスタンスがどの程度ログを出力するかを選択します。",
+  "settings.opencode.logLevel.option.debug": "デバッグ",
+  "settings.opencode.logLevel.option.info": "情報",
+  "settings.opencode.logLevel.option.warn": "警告",
+  "settings.opencode.logLevel.option.error": "エラー",
 
   "settings.appearance.behavior.title": "操作",
   "settings.appearance.behavior.subtitle": "メッセージ、差分、入力の既定値。",

packages/ui/src/lib/i18n/messages/ja/toolCall.ts

@@ -18,6 +18,11 @@ export const toolCallMessages = {
   "toolCall.diff.viewMode.ariaLabel": "diff 表示モード",
   "toolCall.diff.viewMode.split": "分割",
   "toolCall.diff.viewMode.unified": "ユニファイド",
+  "toolCall.diff.switchToSplit": "分割表示に切り替え",
+  "toolCall.diff.switchToUnified": "ユニファイド表示に切り替え",
+  "toolCall.diff.enableWordWrap": "折り返しを有効化",
+  "toolCall.diff.disableWordWrap": "折り返しを無効化",
+  "toolCall.diff.copyPatch": "パッチをコピー",
 
   "toolCall.diagnostics.title": "診断",
   "toolCall.diagnostics.ariaLabel": "診断",

packages/ui/src/lib/i18n/messages/ru/folderSelection.ts

@@ -20,6 +20,9 @@ export const folderSelectionMessages = {
   "folderSelection.browse.subtitle": "Выберите любую папку на компьютере",
   "folderSelection.browse.button": "Обзор папок",
   "folderSelection.browse.buttonOpening": "Открытие…",
+  "folderSelection.actions.title": "Открыть папку или подключить сервер",
+  "folderSelection.actions.subtitle": "Откройте локальную папку или подключитесь к серверу CodeNomad",
+  "folderSelection.actions.connectButton": "Подключить сервер CodeNomad",
 
   "folderSelection.advancedSettings": "Расширенные настройки",
   "folderSelection.opencode": "OpenCode",
@@ -39,4 +42,31 @@ export const folderSelectionMessages = {
 
   "folderSelection.dialog.title": "Выберите рабочее пространство",
   "folderSelection.dialog.description": "Выберите рабочее пространство, чтобы начать писать код.",
+
+  "folderSelection.tabs.local": "Локальные папки",
+  "folderSelection.tabs.servers": "Серверы",
+  "folderSelection.servers.title": "Сохраненные серверы",
+  "folderSelection.servers.subtitle": "Откройте сохраненный удаленный сервер CodeNomad в новом окне",
+  "folderSelection.servers.count": "{count} серверов",
+  "folderSelection.servers.empty.title": "Нет сохраненных серверов",
+  "folderSelection.servers.empty.description": "Добавьте удаленный сервер, чтобы быстро подключаться к нему с этого устройства",
+  "folderSelection.servers.connectTitle": "Подключиться к серверу",
+  "folderSelection.servers.connectSubtitle": "Сохраните удаленный сервер CodeNomad и откройте его в новом окне",
+  "folderSelection.servers.connectButton": "Подключиться к серверу",
+  "folderSelection.servers.remove": "Удалить сохраненный сервер",
+  "folderSelection.servers.skipTls": "Самоподписанный TLS",
+  "folderSelection.servers.errorTitle": "Ошибка удаленного подключения",
+  "folderSelection.servers.dialog.title": "Подключиться к серверу",
+  "folderSelection.servers.dialog.description": "Добавьте удаленный сервер CodeNomad и при желании сразу откройте его.",
+  "folderSelection.servers.dialog.name": "Имя сервера",
+  "folderSelection.servers.dialog.namePlaceholder": "Продакшн сервер",
+  "folderSelection.servers.dialog.url": "URL сервера",
+  "folderSelection.servers.dialog.urlPlaceholder": "https://server.example.com",
+  "folderSelection.servers.dialog.skipTls": "Пропустить проверку TLS для самоподписанных сертификатов.",
+  "folderSelection.servers.dialog.cancel": "Отмена",
+  "folderSelection.servers.dialog.save": "Сохранить",
+  "folderSelection.servers.dialog.connect": "Подключиться",
+  "folderSelection.servers.dialog.connecting": "Подключение...",
+  "folderSelection.servers.dialog.errorRequired": "Имя сервера и URL обязательны.",
+  "folderSelection.servers.dialog.errorConnect": "Не удалось подключиться к удаленному серверу.",
 } as const

packages/ui/src/lib/i18n/messages/ru/remoteAccess.ts

@@ -41,6 +41,8 @@ export const remoteAccessMessages = {
   "remoteAccess.sections.addresses.help": "Откройте или отсканируйте с другой машины, чтобы передать управление.",
   "remoteAccess.addresses.loading": "Загрузка адресов…",
   "remoteAccess.addresses.none": "Пока нет доступных адресов.",
+  "remoteAccess.addresses.actions.showOther": "Показать еще {count} адресов",
+  "remoteAccess.addresses.actions.hideOther": "Скрыть остальные адреса",
   "remoteAccess.address.scope.network": "Сеть",
   "remoteAccess.address.scope.loopback": "Loopback",
   "remoteAccess.address.scope.internal": "Внутренний",

packages/ui/src/lib/i18n/messages/ru/settings.ts

@@ -113,6 +113,14 @@ export const settingsMessages = {
   "settings.section.opencode.subtitle": "Choose the OpenCode binary and environment used for new instances.",
   "settings.opencode.runtime.title": "Runtime",
   "settings.opencode.runtime.subtitle": "Configure which OpenCode binary new instances launch with.",
+  "settings.opencode.logLevel.title": "Уровень логирования OpenCode",
+  "settings.opencode.logLevel.subtitle": "Задайте уровень логирования, используемый при запуске новых экземпляров OpenCode.",
+  "settings.opencode.logLevel.selector.title": "Подробность логов",
+  "settings.opencode.logLevel.selector.subtitle": "Выберите, сколько логов должны выводить новые экземпляры OpenCode.",
+  "settings.opencode.logLevel.option.debug": "Отладка",
+  "settings.opencode.logLevel.option.info": "Информация",
+  "settings.opencode.logLevel.option.warn": "Предупреждение",
+  "settings.opencode.logLevel.option.error": "Ошибка",
 
   "settings.appearance.behavior.title": "Взаимодействие",
   "settings.appearance.behavior.subtitle": "Значения по умолчанию для сообщений, диффов и ввода.",

packages/ui/src/lib/i18n/messages/ru/toolCall.ts

@@ -18,6 +18,11 @@ export const toolCallMessages = {
   "toolCall.diff.viewMode.ariaLabel": "Режим просмотра diff",
   "toolCall.diff.viewMode.split": "Раздельный",
   "toolCall.diff.viewMode.unified": "Единый",
+  "toolCall.diff.switchToSplit": "Переключить на раздельный вид",
+  "toolCall.diff.switchToUnified": "Переключить на единый вид",
+  "toolCall.diff.enableWordWrap": "Включить перенос слов",
+  "toolCall.diff.disableWordWrap": "Выключить перенос слов",
+  "toolCall.diff.copyPatch": "Скопировать patch",
 
   "toolCall.diagnostics.title": "Диагностика",
   "toolCall.diagnostics.ariaLabel": "Диагностика",

packages/ui/src/lib/i18n/messages/zh-Hans/folderSelection.ts

@@ -20,6 +20,9 @@ export const folderSelectionMessages = {
   "folderSelection.browse.subtitle": "选择你电脑上的任意文件夹",
   "folderSelection.browse.button": "浏览文件夹",
   "folderSelection.browse.buttonOpening": "正在打开...",
+  "folderSelection.actions.title": "打开文件夹或连接服务器",
+  "folderSelection.actions.subtitle": "打开本地文件夹或连接到 CodeNomad 服务器",
+  "folderSelection.actions.connectButton": "连接 CodeNomad 服务器",
 
   "folderSelection.advancedSettings": "高级设置",
   "folderSelection.opencode": "OpenCode",
@@ -39,4 +42,31 @@ export const folderSelectionMessages = {
 
   "folderSelection.dialog.title": "选择工作区",
   "folderSelection.dialog.description": "选择工作区以开始编码。",
+
+  "folderSelection.tabs.local": "本地文件夹",
+  "folderSelection.tabs.servers": "服务器",
+  "folderSelection.servers.title": "已保存的服务器",
+  "folderSelection.servers.subtitle": "在新窗口中打开已保存的远程 CodeNomad 服务器",
+  "folderSelection.servers.count": "{count} 个服务器",
+  "folderSelection.servers.empty.title": "没有已保存的服务器",
+  "folderSelection.servers.empty.description": "添加远程服务器，以便在此设备上快速重新连接",
+  "folderSelection.servers.connectTitle": "连接到服务器",
+  "folderSelection.servers.connectSubtitle": "保存远程 CodeNomad 服务器并在新窗口中打开它",
+  "folderSelection.servers.connectButton": "连接到服务器",
+  "folderSelection.servers.remove": "删除已保存服务器",
+  "folderSelection.servers.skipTls": "自签名 TLS",
+  "folderSelection.servers.errorTitle": "远程连接失败",
+  "folderSelection.servers.dialog.title": "连接到服务器",
+  "folderSelection.servers.dialog.description": "添加远程 CodeNomad 服务器，并可选择立即打开。",
+  "folderSelection.servers.dialog.name": "服务器名称",
+  "folderSelection.servers.dialog.namePlaceholder": "生产服务器",
+  "folderSelection.servers.dialog.url": "服务器 URL",
+  "folderSelection.servers.dialog.urlPlaceholder": "https://server.example.com",
+  "folderSelection.servers.dialog.skipTls": "为自签名证书跳过 TLS 验证。",
+  "folderSelection.servers.dialog.cancel": "取消",
+  "folderSelection.servers.dialog.save": "保存",
+  "folderSelection.servers.dialog.connect": "连接",
+  "folderSelection.servers.dialog.connecting": "连接中...",
+  "folderSelection.servers.dialog.errorRequired": "服务器名称和 URL 为必填项。",
+  "folderSelection.servers.dialog.errorConnect": "无法连接到远程服务器。",
 } as const

packages/ui/src/lib/i18n/messages/zh-Hans/remoteAccess.ts

@@ -41,6 +41,8 @@ export const remoteAccessMessages = {
   "remoteAccess.sections.addresses.help": "从另一台设备打开或扫描，以接管控制权。",
   "remoteAccess.addresses.loading": "正在加载地址…",
   "remoteAccess.addresses.none": "暂时没有可用地址。",
+  "remoteAccess.addresses.actions.showOther": "显示另外 {count} 个地址",
+  "remoteAccess.addresses.actions.hideOther": "隐藏其他地址",
   "remoteAccess.address.scope.network": "网络",
   "remoteAccess.address.scope.loopback": "回环",
   "remoteAccess.address.scope.internal": "内部",

packages/ui/src/lib/i18n/messages/zh-Hans/settings.ts

@@ -113,6 +113,14 @@ export const settingsMessages = {
   "settings.section.opencode.subtitle": "Choose the OpenCode binary and environment used for new instances.",
   "settings.opencode.runtime.title": "Runtime",
   "settings.opencode.runtime.subtitle": "Configure which OpenCode binary new instances launch with.",
+  "settings.opencode.logLevel.title": "OpenCode 日志级别",
+  "settings.opencode.logLevel.subtitle": "设置启动新的 OpenCode 实例时使用的日志级别。",
+  "settings.opencode.logLevel.selector.title": "日志详细程度",
+  "settings.opencode.logLevel.selector.subtitle": "选择新的 OpenCode 实例应输出多少日志信息。",
+  "settings.opencode.logLevel.option.debug": "调试",
+  "settings.opencode.logLevel.option.info": "信息",
+  "settings.opencode.logLevel.option.warn": "警告",
+  "settings.opencode.logLevel.option.error": "错误",
 
   "settings.appearance.behavior.title": "交互",
   "settings.appearance.behavior.subtitle": "消息、差异与输入的默认值。",

packages/ui/src/lib/i18n/messages/zh-Hans/toolCall.ts

@@ -18,6 +18,11 @@ export const toolCallMessages = {
   "toolCall.diff.viewMode.ariaLabel": "Diff 视图模式",
   "toolCall.diff.viewMode.split": "分栏",
   "toolCall.diff.viewMode.unified": "统一",
+  "toolCall.diff.switchToSplit": "切换到分栏视图",
+  "toolCall.diff.switchToUnified": "切换到统一视图",
+  "toolCall.diff.enableWordWrap": "启用自动换行",
+  "toolCall.diff.disableWordWrap": "禁用自动换行",
+  "toolCall.diff.copyPatch": "复制补丁",
 
   "toolCall.diagnostics.title": "诊断",
   "toolCall.diagnostics.ariaLabel": "诊断",

packages/ui/src/lib/native/remote-window.ts

@@ -0,0 +1,34 @@
+import { invoke } from "@tauri-apps/api/core"
+import type { RemoteServerProfile } from "../../../../server/src/api-types"
+import { runtimeEnv } from "../runtime-env"
+
+export interface RemoteWindowOpenPayload {
+  id: string
+  name: string
+  baseUrl: string
+  skipTlsVerify: boolean
+}
+
+export async function openRemoteServerWindow(profile: Pick<RemoteServerProfile, "id" | "name" | "baseUrl" | "skipTlsVerify">): Promise<void> {
+  const payload: RemoteWindowOpenPayload = {
+    id: profile.id,
+    name: profile.name,
+    baseUrl: profile.baseUrl,
+    skipTlsVerify: profile.skipTlsVerify,
+  }
+
+  if (runtimeEnv.host === "electron") {
+    const api = (window as Window & { electronAPI?: ElectronAPI }).electronAPI
+    if (typeof api?.openRemoteWindow === "function") {
+      await api.openRemoteWindow(payload)
+      return
+    }
+  }
+
+  if (runtimeEnv.host === "tauri") {
+    await invoke("open_remote_window", { payload })
+    return
+  }
+
+  window.open(profile.baseUrl, "_blank", "noopener,noreferrer")
+}

packages/ui/src/lib/remote-access-addresses.test.ts

@@ -0,0 +1,17 @@
+import assert from "node:assert/strict"
+import { describe, it } from "node:test"
+
+import { splitRemoteAddresses } from "./remote-access-addresses"
+
+describe("splitRemoteAddresses", () => {
+  it("keeps the first remote address visible and collapses the rest", () => {
+    const result = splitRemoteAddresses([
+      { ip: "127.0.0.1", family: "ipv4", scope: "loopback", remoteUrl: "https://127.0.0.1:9898" },
+      { ip: "192.168.1.128", family: "ipv4", scope: "external", remoteUrl: "https://192.168.1.128:9898" },
+      { ip: "172.24.96.1", family: "ipv4", scope: "external", remoteUrl: "https://172.24.96.1:9898" },
+    ])
+
+    assert.equal(result.recommended?.ip, "192.168.1.128")
+    assert.deepEqual(result.hidden.map((address) => address.ip), ["172.24.96.1"])
+  })
+})

packages/ui/src/lib/remote-access-addresses.ts

@@ -0,0 +1,14 @@
+import type { NetworkAddress } from "../../../server/src/api-types"
+
+export interface RemoteAddressGroups {
+  recommended: NetworkAddress | null
+  hidden: NetworkAddress[]
+}
+
+export function splitRemoteAddresses(addresses: NetworkAddress[]): RemoteAddressGroups {
+  const remoteAddresses = addresses.filter((address) => address.scope !== "loopback")
+  return {
+    recommended: remoteAddresses[0] ?? null,
+    hidden: remoteAddresses.slice(1),
+  }
+}

packages/ui/src/stores/preferences.tsx

@@ -1,6 +1,7 @@
 import { createContext, createMemo, createSignal, onMount, useContext } from "solid-js"
 import type { Accessor, ParentComponent } from "solid-js"
 import { storage, type OwnerBucket } from "../lib/storage"
+import type { RemoteServerProfile } from "../../../server/src/api-types"
 import {
   ensureInstanceConfigLoaded,
   getInstanceConfig,
@@ -28,6 +29,7 @@ export type DiffViewMode = "split" | "unified"
 export type ExpansionPreference = "expanded" | "collapsed"
 export type ToolInputsVisibilityPreference = "hidden" | "collapsed" | "expanded"
 export type ListeningMode = "local" | "all"
+export type ServerLogLevel = "DEBUG" | "INFO" | "WARN" | "ERROR"
 export type SpeechProviderPreference = "openai-compatible"
 export type SpeechPlaybackMode = "streaming" | "buffered"
 export type SpeechTtsFormat = "mp3" | "wav" | "opus" | "aac"
@@ -94,6 +96,7 @@ interface UiConfigBucket {
 
 interface ServerConfigBucket {
   listeningMode?: ListeningMode
+  logLevel?: ServerLogLevel
   environmentVariables?: Record<string, string>
   opencodeBinary?: string
   speech?: Partial<SpeechSettings>
@@ -102,6 +105,7 @@ interface ServerConfigBucket {
 interface UiStateBucket {
   recentFolders?: RecentFolder[]
   opencodeBinaries?: OpenCodeBinary[]
+  remoteServers?: RemoteServerProfile[]
   models?: {
     recents?: ModelPreference[]
     favorites?: ModelPreference[]
@@ -112,6 +116,7 @@ interface UiStateBucket {
 interface NormalizedUiState {
   recentFolders: RecentFolder[]
   opencodeBinaries: OpenCodeBinary[]
+  remoteServers: RemoteServerProfile[]
   models: {
     recents: ModelPreference[]
     favorites: ModelPreference[]
@@ -250,6 +255,29 @@ function normalizeUiState(input?: UiStateBucket | null): NormalizedUiState {
       const label = typeof (b as any).label === "string" ? (b as any).label : undefined
       return { path: p, version, label, lastUsed }
     }),
+    remoteServers: cloneArray<RemoteServerProfile>(source.remoteServers, (server) => {
+      if (!server || typeof server !== "object") return null
+      const id = typeof (server as any).id === "string" ? (server as any).id.trim() : ""
+      const name = typeof (server as any).name === "string" ? (server as any).name.trim() : ""
+      const baseUrl = typeof (server as any).baseUrl === "string" ? (server as any).baseUrl.trim() : ""
+      if (!id || !name || !baseUrl) return null
+      const createdAt = typeof (server as any).createdAt === "string" ? (server as any).createdAt : new Date().toISOString()
+      const updatedAt = typeof (server as any).updatedAt === "string" ? (server as any).updatedAt : createdAt
+      const lastConnectedAt = typeof (server as any).lastConnectedAt === "string" ? (server as any).lastConnectedAt : undefined
+      return {
+        id,
+        name,
+        baseUrl,
+        skipTlsVerify: Boolean((server as any).skipTlsVerify),
+        createdAt,
+        updatedAt,
+        lastConnectedAt,
+      }
+    }).sort((a, b) => {
+      const left = a.lastConnectedAt ?? a.updatedAt
+      const right = b.lastConnectedAt ?? b.updatedAt
+      return right.localeCompare(left)
+    }),
     models: {
       recents: cloneArray<ModelPreference>((source.models as any)?.recents, (m) => {
         if (!m || typeof m !== "object") return null
@@ -272,13 +300,17 @@ function normalizeUiState(input?: UiStateBucket | null): NormalizedUiState {
 
 function normalizeServerConfig(
   input?: ServerConfigBucket | null,
-): Required<Pick<ServerConfigBucket, "listeningMode" | "environmentVariables" | "opencodeBinary">> & { speech: SpeechSettings } {
+): Required<Pick<ServerConfigBucket, "listeningMode" | "logLevel" | "environmentVariables" | "opencodeBinary">> & { speech: SpeechSettings } {
   const source = input ?? {}
   const listeningMode = source.listeningMode === "all" ? "all" : "local"
+  const logLevel =
+    source.logLevel === "INFO" || source.logLevel === "WARN" || source.logLevel === "ERROR" || source.logLevel === "DEBUG"
+      ? source.logLevel
+      : "DEBUG"
   const opencodeBinary = typeof source.opencodeBinary === "string" && source.opencodeBinary.trim() ? source.opencodeBinary : "opencode"
   const environmentVariables = normalizeRecord(source.environmentVariables)
   const speech = normalizeSpeechSettings(source.speech)
-  return { listeningMode, opencodeBinary, environmentVariables, speech }
+  return { listeningMode, logLevel, opencodeBinary, environmentVariables, speech }
 }
 
 function getModelKey(model: { providerId: string; modelId: string }): string {
@@ -305,6 +337,43 @@ function buildBinaryList(binaryPath: string, version: string | undefined, source
   return [nextEntry, ...source].slice(0, 10)
 }
 
+interface RemoteServerProfileInput {
+  id?: string
+  name: string
+  baseUrl: string
+  skipTlsVerify: boolean
+}
+
+function buildRemoteServerProfile(input: RemoteServerProfileInput, source: RemoteServerProfile[]): RemoteServerProfile {
+  const existing = input.id ? source.find((entry) => entry.id === input.id) : undefined
+  const now = new Date().toISOString()
+  return {
+    id: existing?.id ?? input.id ?? createRandomId(),
+    name: input.name.trim(),
+    baseUrl: input.baseUrl.trim(),
+    skipTlsVerify: Boolean(input.skipTlsVerify),
+    createdAt: existing?.createdAt ?? now,
+    updatedAt: now,
+    lastConnectedAt: existing?.lastConnectedAt,
+  }
+}
+
+function buildRemoteServerList(profile: RemoteServerProfile, source: RemoteServerProfile[]): RemoteServerProfile[] {
+  const remaining = source.filter((entry) => entry.id !== profile.id)
+  return [profile, ...remaining].sort((a, b) => {
+    const left = a.lastConnectedAt ?? a.updatedAt
+    const right = b.lastConnectedAt ?? b.updatedAt
+    return right.localeCompare(left)
+  })
+}
+
+function createRandomId(): string {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+    return crypto.randomUUID()
+  }
+  return `remote-${Date.now()}-${Math.random().toString(36).slice(2, 10)}`
+}
+
 const [uiConfigBucket, setUiConfigBucket] = createSignal<UiConfigBucket>({})
 const [serverConfigBucket, setServerConfigBucket] = createSignal<ServerConfigBucket>({})
 const [uiStateBucket, setUiStateBucket] = createSignal<UiStateBucket>({})
@@ -318,6 +387,7 @@ const uiState = createMemo(() => normalizeUiState(uiStateBucket()))
 const preferences = uiSettings
 const recentFolders = createMemo<RecentFolder[]>(() => uiState().recentFolders)
 const opencodeBinaries = createMemo<OpenCodeBinary[]>(() => uiState().opencodeBinaries)
+const remoteServers = createMemo<RemoteServerProfile[]>(() => uiState().remoteServers)
 
 let loadPromise: Promise<void> | null = null
 
@@ -409,6 +479,11 @@ function updateLastUsedBinary(path: string): void {
   void patchStateOwner("ui", { opencodeBinaries: nextList }).catch((error) => log.error("Failed to update binary list", error))
 }
 
+function updateLogLevel(level: ServerLogLevel): void {
+  const target = level ?? "DEBUG"
+  void patchConfigOwner("server", { logLevel: target }).catch((error) => log.error("Failed to set log level", error))
+}
+
 async function updateSpeechSettings(updates: SpeechSettingsUpdate): Promise<void> {
   const apiKeyPatch = updates.apiKey
   const { apiKey: _apiKey, ...restUpdates } = updates
@@ -456,6 +531,29 @@ function removeRecentFolder(folderPath: string): void {
   void patchStateOwner("ui", { recentFolders: next }).catch((error) => log.error("Failed to remove recent folder", error))
 }
 
+async function saveRemoteServerProfile(input: RemoteServerProfileInput): Promise<RemoteServerProfile> {
+  const profile = buildRemoteServerProfile(input, remoteServers())
+  await patchStateOwner("ui", { remoteServers: buildRemoteServerList(profile, remoteServers()) })
+  return profile
+}
+
+async function markRemoteServerConnected(id: string): Promise<void> {
+  const current = remoteServers().find((entry) => entry.id === id)
+  if (!current) return
+  const now = new Date().toISOString()
+  const updated: RemoteServerProfile = {
+    ...current,
+    updatedAt: now,
+    lastConnectedAt: now,
+  }
+  await patchStateOwner("ui", { remoteServers: buildRemoteServerList(updated, remoteServers()) })
+}
+
+function removeRemoteServerProfile(id: string): void {
+  const next = remoteServers().filter((entry) => entry.id !== id)
+  void patchStateOwner("ui", { remoteServers: next }).catch((error) => log.error("Failed to remove remote server", error))
+}
+
 function recordWorkspaceLaunch(folderPath: string, binaryPath?: string): void {
   const targetBinary = binaryPath && binaryPath.trim().length > 0 ? binaryPath : serverSettings().opencodeBinary
   const nextFolders = buildRecentFolderList(folderPath, recentFolders())
@@ -612,17 +710,22 @@ interface ConfigContextValue {
   updateEnvironmentVariables: typeof updateEnvironmentVariables
   addEnvironmentVariable: typeof addEnvironmentVariable
   removeEnvironmentVariable: typeof removeEnvironmentVariable
-  updateLastUsedBinary: typeof updateLastUsedBinary
-  updateSpeechSettings: typeof updateSpeechSettings
+    updateLastUsedBinary: typeof updateLastUsedBinary
+    updateLogLevel: typeof updateLogLevel
+    updateSpeechSettings: typeof updateSpeechSettings
 
   // ui-owned state
   recentFolders: typeof recentFolders
   opencodeBinaries: typeof opencodeBinaries
+  remoteServers: typeof remoteServers
   uiState: typeof uiState
   addRecentFolder: typeof addRecentFolder
   removeRecentFolder: typeof removeRecentFolder
   addOpenCodeBinary: typeof addOpenCodeBinary
   removeOpenCodeBinary: typeof removeOpenCodeBinary
+  saveRemoteServerProfile: typeof saveRemoteServerProfile
+  markRemoteServerConnected: typeof markRemoteServerConnected
+  removeRemoteServerProfile: typeof removeRemoteServerProfile
   recordWorkspaceLaunch: typeof recordWorkspaceLaunch
   addRecentModelPreference: typeof addRecentModelPreference
   isFavoriteModelPreference: typeof isFavoriteModelPreference
@@ -663,14 +766,19 @@ const configContextValue: ConfigContextValue = {
   addEnvironmentVariable,
   removeEnvironmentVariable,
   updateLastUsedBinary,
+  updateLogLevel,
   updateSpeechSettings,
   recentFolders,
   opencodeBinaries,
+  remoteServers,
   uiState,
   addRecentFolder,
   removeRecentFolder,
   addOpenCodeBinary,
   removeOpenCodeBinary,
+  saveRemoteServerProfile,
+  markRemoteServerConnected,
+  removeRemoteServerProfile,
   recordWorkspaceLaunch,
   addRecentModelPreference,
   isFavoriteModelPreference,
@@ -746,6 +854,7 @@ export {
   addEnvironmentVariable,
   removeEnvironmentVariable,
   updateLastUsedBinary,
+  updateLogLevel,
   updateSpeechSettings,
   addRecentFolder,
   removeRecentFolder,

packages/ui/src/styles/components/remote-access.css

@@ -256,6 +256,55 @@
   cursor: pointer;
 }
 
+.remote-address-disclosure {
+  border: 1px solid var(--border-base);
+  border-radius: 12px;
+  background: var(--surface-primary);
+  overflow: hidden;
+}
+
+.remote-address-disclosure-trigger {
+  width: 100%;
+  min-height: 40px;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  padding: 8px 12px;
+  border: 0;
+  background: transparent;
+  color: var(--text-primary);
+  cursor: pointer;
+}
+
+.remote-address-disclosure-label {
+  grid-column: 2;
+  justify-self: center;
+  text-align: center;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.remote-address-disclosure-chevron {
+  grid-column: 3;
+  justify-self: end;
+  width: 16px;
+  height: 16px;
+  color: var(--text-secondary);
+  transition: transform 0.2s ease;
+}
+
+.remote-address-disclosure-chevron.is-expanded {
+  transform: rotate(180deg);
+}
+
+.remote-address-disclosure-content {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 0 10px 10px;
+  border-top: 1px solid var(--border-base);
+}
+
 .remote-qr {
   margin-top: 12px;
   display: flex;

packages/ui/src/styles/components/settings-screen.css

@@ -1,11 +1,12 @@
 .settings-screen-frame {
-  @apply fixed inset-0 z-50 flex items-center justify-center p-4;
+  @apply fixed inset-0 z-50 flex items-center justify-center px-4;
+  padding-block: 5dvh;
 }
 
 /* Override .modal-surface (defined later in panels.css). */
 .modal-surface.settings-screen-shell {
   width: min(1120px, 100%);
-  height: min(88vh, 920px);
+  height: 100%;
   max-height: none;
   display: grid;
   grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
@@ -278,10 +279,25 @@
   font-size: var(--font-size-sm);
 }
 
+.settings-password-summary-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.settings-password-summary-copy {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  min-width: 0;
+}
+
 .settings-password-actions {
   display: flex;
-  justify-content: flex-start;
-  margin-top: 0.75rem;
+  justify-content: flex-end;
+  margin-top: 0;
 }
 
 .settings-form-group {

packages/ui/src/styles/messaging/tool-call.css

@@ -321,6 +321,7 @@
 
 .tool-call-diff-shell {
   padding: 0;
+  scrollbar-gutter: auto;
 }
 
 .tool-call-diff-viewer {
@@ -343,6 +344,8 @@
 .tool-call-diff-shell .tool-call-diff-viewer {
   max-height: none;
   overflow: visible;
+  width: 100%;
+  min-width: 100%;
 }
 
 .tool-call-diff-toolbar-label {
@@ -513,6 +516,84 @@
   font-size: var(--font-size-xs);
 }
 
+.tool-call-diff-shell .tool-call-diff-viewer .diff-line-content,
+.tool-call-diff-shell .tool-call-diff-viewer .diff-line-hunk-content,
+.tool-call-diff-shell .tool-call-diff-viewer .diff-line-old-content,
+.tool-call-diff-shell .tool-call-diff-viewer .diff-line-new-content {
+  padding-right: 0 !important;
+}
+
+.tool-call-diff-shell[data-diff-mode="unified"] .tool-call-diff-viewer .diff-line-num {
+  padding-left: 1px !important;
+  padding-right: 1px !important;
+  text-align: left !important;
+}
+
+.tool-call-diff-shell[data-diff-mode="unified"] .tool-call-diff-viewer .unified-diff-table {
+  table-layout: fixed;
+}
+
+.tool-call-diff-shell[data-diff-mode="unified"] .tool-call-diff-viewer .unified-diff-table-num-col {
+  width: auto !important;
+}
+
+.tool-call-diff-shell[data-diff-mode="unified"] .tool-call-diff-viewer .tool-call-diff-compact-line-number {
+  display: block;
+  width: 100%;
+  overflow: hidden;
+  text-align: left;
+  white-space: nowrap;
+}
+
+.tool-call-diff-shell[data-diff-mode="split"] .tool-call-diff-viewer .diff-line-old-num,
+.tool-call-diff-shell[data-diff-mode="split"] .tool-call-diff-viewer .diff-line-new-num,
+.tool-call-diff-shell[data-diff-mode="split"] .tool-call-diff-viewer .diff-line-hunk-action {
+  padding-left: 2px !important;
+  padding-right: 2px !important;
+  text-align: left !important;
+}
+
+.tool-call-diff-shell[data-diff-mode="split"] .tool-call-diff-viewer .diff-line-old-num,
+.tool-call-diff-shell[data-diff-mode="split"] .tool-call-diff-viewer .diff-line-new-num,
+.tool-call-diff-shell[data-diff-mode="split"] .tool-call-diff-viewer .diff-line-old-num [data-line-num],
+.tool-call-diff-shell[data-diff-mode="split"] .tool-call-diff-viewer .diff-line-new-num [data-line-num] {
+  white-space: nowrap !important;
+  word-break: normal !important;
+  overflow-wrap: normal !important;
+}
+
+.tool-call-diff-shell[data-diff-mode="split"] .tool-call-diff-viewer .diff-line-hunk-action {
+  padding-top: 1px !important;
+  padding-bottom: 1px !important;
+}
+
+.tool-call-diff-shell .tool-call-diff-viewer .diff-line-content-item {
+  padding-left: 1.1em !important;
+}
+
+.tool-call-diff-shell .tool-call-diff-viewer .diff-line-content-operator {
+  margin-left: -1.1em !important;
+  width: 0.9em !important;
+  min-width: 0.9em !important;
+  text-indent: 0 !important;
+}
+
+@media (max-width: 640px) {
+  .tool-call-diff-shell[data-diff-mode="unified"] .tool-call-diff-viewer .unified-diff-table-wrapper {
+    --diff-aside-width: 18px;
+  }
+
+  .tool-call-diff-shell .tool-call-diff-viewer .diff-line-content-item {
+    padding-left: 1.5em !important;
+  }
+
+  .tool-call-diff-shell .tool-call-diff-viewer .diff-line-content-operator {
+    margin-left: -1.5em !important;
+    width: 1.1em !important;
+    min-width: 1.1em !important;
+  }
+}
+
 .tool-call-markdown .markdown-code-block {
   margin: 0;
   border-radius: 0;

packages/ui/src/types/global.d.ts

@@ -33,6 +33,12 @@ declare global {
     setWakeLock?: (enabled: boolean) => Promise<{ enabled: boolean }>
 
     showNotification?: (payload: { title: string; body: string }) => Promise<{ ok: boolean; reason?: string }>
+    openRemoteWindow?: (payload: {
+      id: string
+      name: string
+      baseUrl: string
+      skipTlsVerify: boolean
+    }) => Promise<{ ok: boolean }>
   }
 
   interface File {

packages/ui/src/types/message.ts

@@ -40,6 +40,7 @@ export interface RenderCache {
   html: string
   theme?: string
   mode?: string
+  wrap?: boolean
 }
 
 export interface PendingPermissionState {