feat(sidecars): add proxied sidecar tabs (#279)

## Summary
- add SideCar support across the server and UI, including proxied tabs,
picker/settings flows, and websocket-aware proxying
- unify top-level tab handling so workspace instances and SideCars share
the same tab model and navigation flows
- limit SideCars to port-based services only, removing server-managed
process control from the final API and UI

---------

Co-authored-by: Shantur <shantur@Mac.home>
Co-authored-by: Shantur <shantur@Shanturs-MacBook-Pro-M5.local>

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

@@ -1,7 +1,7 @@
 import { app, BrowserView, BrowserWindow, nativeImage, session, shell } from "electron"
 import http from "node:http"
 import https from "node:https"
-import { existsSync } from "fs"
+import { existsSync, mkdirSync } from "fs"
 import { dirname, join } from "path"
 import { fileURLToPath } from "url"
 import { createApplicationMenu } from "./menu"
@@ -14,6 +14,31 @@ const mainDirname = dirname(mainFilename)
 
 const isMac = process.platform === "darwin"
 
+function configureDevStoragePaths() {
+  if (app.isPackaged) {
+    return
+  }
+
+  const appName = "CodeNomad"
+
+  try {
+    app.setName(appName)
+
+    const userDataPath = join(app.getPath("appData"), appName)
+    const sessionDataPath = join(userDataPath, "session-data")
+
+    mkdirSync(userDataPath, { recursive: true })
+    mkdirSync(sessionDataPath, { recursive: true })
+
+    app.setPath("userData", userDataPath)
+    app.setPath("sessionData", sessionDataPath)
+  } catch (error) {
+    console.warn("[cli] failed to configure dev storage paths", error)
+  }
+}
+
+configureDevStoragePaths()
+
 const cliManager = new CliProcessManager()
 let mainWindow: BrowserWindow | null = null
 let currentCliUrl: string | null = null
@@ -21,6 +46,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 +120,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 +141,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 +160,7 @@ function setupNavigationGuards(window: BrowserWindow) {
   }
 
   window.webContents.setWindowOpenHandler(({ url }) => {
-    if (shouldOpenExternally(url)) {
+    if (shouldOpenExternally(url, window)) {
       handleExternal(url)
       return { action: "deny" }
     }
@@ -136,13 +168,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 +280,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,10 +400,66 @@ 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))}`)
+  }
 }
 
 let bootstrapExchangeInFlight = false
@@ -504,6 +638,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/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

@@ -170,6 +170,24 @@ export interface InstanceStreamEvent {
   [key: string]: unknown
 }
 
+export type SideCarKind = "port"
+
+export type SideCarPrefixMode = "strip" | "preserve"
+
+export type SideCarStatus = "running" | "stopped"
+
+export interface SideCar {
+  id: string
+  kind: SideCarKind
+  name: string
+  port: number
+  insecure: boolean
+  prefixMode: SideCarPrefixMode
+  status: SideCarStatus
+  createdAt: string
+  updatedAt: string
+}
+
 export interface BinaryRecord {
   id: string
   path: string
@@ -244,12 +262,40 @@ 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"
   | "workspace.error"
   | "workspace.stopped"
   | "workspace.log"
+  | "sidecar.updated"
+  | "sidecar.removed"
   | "storage.configChanged"
   | "storage.stateChanged"
   | "instance.dataChanged"
@@ -262,6 +308,8 @@ export type WorkspaceEventPayload =
   | { type: "workspace.error"; workspace: WorkspaceDescriptor }
   | { type: "workspace.stopped"; workspaceId: string }
   | { type: "workspace.log"; entry: WorkspaceLogEntry }
+  | { type: "sidecar.updated"; sidecar: SideCar }
+  | { type: "sidecar.removed"; sidecarId: string }
   | { type: "storage.configChanged"; owner: SettingsOwner; value: SettingsBucket }
   | { type: "storage.stateChanged"; owner: SettingsOwner; value: SettingsBucket }
   | { type: "instance.dataChanged"; instanceId: string; data: InstanceData }

packages/server/src/auth/manager.ts

@@ -104,13 +104,18 @@ export class AuthManager {
   }
 
   getSessionFromRequest(request: FastifyRequest): { username: string; sessionId: string } | null {
+    return this.getSessionFromHeaders(request.headers)
+  }
+
+  getSessionFromHeaders(headers: { cookie?: string | string[] | undefined }): { username: string; sessionId: string } | null {
     if (!this.authEnabled) {
       // When auth is disabled, treat all requests as authenticated.
       // We still return a stable username so callers can display it.
       return { username: this.init.username, sessionId: "auth-disabled" }
     }
 
-    const cookies = parseCookies(request.headers.cookie)
+    const cookieHeader = Array.isArray(headers.cookie) ? headers.cookie.join("; ") : headers.cookie
+    const cookies = parseCookies(cookieHeader)
     const sessionId = cookies[this.cookieName]
     const session = this.sessionManager.getSession(sessionId)
     if (!session) return null

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/events/bus.ts

@@ -24,6 +24,8 @@ export class EventBus extends EventEmitter {
     this.on("workspace.error", handler)
     this.on("workspace.stopped", handler)
     this.on("workspace.log", handler)
+    this.on("sidecar.updated", handler)
+    this.on("sidecar.removed", handler)
     this.on("storage.configChanged", handler)
     this.on("storage.stateChanged", handler)
     this.on("instance.dataChanged", handler)
@@ -35,6 +37,8 @@ export class EventBus extends EventEmitter {
       this.off("workspace.error", handler)
       this.off("workspace.stopped", handler)
       this.off("workspace.log", handler)
+      this.off("sidecar.updated", handler)
+      this.off("sidecar.removed", handler)
       this.off("storage.configChanged", handler)
       this.off("storage.stateChanged", handler)
       this.off("instance.dataChanged", handler)

packages/server/src/index.ts

@@ -24,6 +24,7 @@ import { resolveHttpsOptions } from "./server/tls"
 import { resolveNetworkAddresses, resolveRemoteAddresses } from "./server/network-addresses"
 import { startDevReleaseMonitor } from "./releases/dev-release-monitor"
 import { SpeechService } from "./speech/service"
+import { SideCarManager } from "./sidecars/manager"
 
 const require = createRequire(import.meta.url)
 
@@ -315,6 +316,11 @@ async function main() {
   const fileSystemBrowser = new FileSystemBrowser({ rootDir: options.rootDir, unrestricted: options.unrestrictedRoot })
   const instanceStore = new InstanceStore(configLocation.instancesDir)
   const speechService = new SpeechService(settings, logger.child({ component: "speech" }))
+  const sidecarManager = new SideCarManager({
+    settings,
+    eventBus,
+    logger: logger.child({ component: "sidecars" }),
+  })
   const instanceEventBridge = new InstanceEventBridge({
     workspaceManager,
     eventBus,
@@ -400,6 +406,7 @@ async function main() {
         serverMeta,
         instanceStore,
         speechService,
+        sidecarManager,
         authManager,
         uiStaticDir: uiResolution.uiStaticDir ?? DEFAULT_UI_STATIC_DIR,
         uiDevServerUrl: uiResolution.uiDevServerUrl,
@@ -421,6 +428,7 @@ async function main() {
         serverMeta,
         instanceStore,
         speechService,
+        sidecarManager,
         authManager,
         uiStaticDir: uiResolution.uiStaticDir ?? DEFAULT_UI_STATIC_DIR,
         uiDevServerUrl: undefined,
@@ -520,6 +528,12 @@ async function main() {
         logger.warn({ err: error }, "Instance event bridge shutdown failed")
       }
 
+      try {
+        await sidecarManager.shutdown()
+      } catch (error) {
+        logger.error({ err: error }, "SideCar manager shutdown failed")
+      }
+
       try {
         await workspaceManager.shutdown()
         logger.info("Workspace manager shutdown complete")

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

@@ -3,7 +3,9 @@ import cors from "@fastify/cors"
 import fastifyStatic from "@fastify/static"
 import replyFrom from "@fastify/reply-from"
 import fs from "fs"
+import { connect as connectTcp, type Socket } from "net"
 import path from "path"
+import { connect as connectTls, type TLSSocket } from "tls"
 import { fetch } from "undici"
 import type { Logger } from "../logger"
 import { WorkspaceManager } from "../workspaces/manager"
@@ -22,6 +24,8 @@ 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 { registerSideCarRoutes } from "./routes/sidecars"
 import { ServerMeta } from "../api-types"
 import { InstanceStore } from "../storage/instance-store"
 import { BackgroundProcessManager } from "../background-processes/manager"
@@ -32,6 +36,7 @@ import type { SpeechService } from "../speech/service"
 import { ClientConnectionManager } from "../clients/connection-manager"
 import { PluginChannelManager } from "../plugins/channel"
 import { VoiceModeManager } from "../plugins/voice-mode"
+import type { SideCarManager } from "../sidecars/manager"
 
 interface HttpServerDeps {
   bindHost: string
@@ -47,6 +52,7 @@ interface HttpServerDeps {
   serverMeta: ServerMeta
   instanceStore: InstanceStore
   speechService: SpeechService
+  sidecarManager: SideCarManager
   authManager: AuthManager
   uiStaticDir: string
   uiDevServerUrl?: string
@@ -203,7 +209,7 @@ export function createHttpServer(deps: HttpServerDeps) {
 
     const session = deps.authManager.getSessionFromRequest(request)
 
-    const requiresAuthForApi = pathname.startsWith("/api/") || pathname.startsWith("/workspaces/")
+    const requiresAuthForApi = pathname.startsWith("/api/") || pathname.startsWith("/workspaces/") || pathname.startsWith("/sidecars/")
     if (requiresAuthForApi && !session) {
       // Allow OpenCode plugin -> CodeNomad calls with per-instance basic auth.
       const pluginMatch = pathname.match(/^\/workspaces\/([^/]+)\/plugin(?:\/|$)/)
@@ -270,7 +276,15 @@ export function createHttpServer(deps: HttpServerDeps) {
     eventBus: deps.eventBus,
     workspaceManager: deps.workspaceManager,
   })
+  registerRemoteServerRoutes(app, { logger: apiLogger })
   registerSpeechRoutes(app, { speechService: deps.speechService })
+  registerSideCarRoutes(app, { sidecarManager: deps.sidecarManager })
+  registerSideCarProxyRoutes(app, { sidecarManager: deps.sidecarManager, logger: proxyLogger })
+  setupSideCarWebSocketProxy(app, {
+    sidecarManager: deps.sidecarManager,
+    authManager: deps.authManager,
+    logger: proxyLogger,
+  })
   registerPluginRoutes(app, {
     workspaceManager: deps.workspaceManager,
     eventBus: deps.eventBus,
@@ -353,6 +367,68 @@ interface InstanceProxyDeps {
   logger: Logger
 }
 
+interface SideCarProxyDeps {
+  sidecarManager: SideCarManager
+  logger: Logger
+}
+
+interface SideCarWebSocketProxyDeps extends SideCarProxyDeps {
+  authManager: AuthManager
+}
+
+function registerSideCarProxyRoutes(app: FastifyInstance, deps: SideCarProxyDeps) {
+  const proxyBaseHandler = async (
+    request: FastifyRequest<{ Params: { id: string } }>,
+    reply: FastifyReply,
+  ) => {
+    await proxySideCarRequest({
+      request,
+      reply,
+      sidecarManager: deps.sidecarManager,
+      logger: deps.logger,
+      pathSuffix: "",
+    })
+  }
+
+  const proxyWildcardHandler = async (
+    request: FastifyRequest<{ Params: { id: string; "*": string } }>,
+    reply: FastifyReply,
+  ) => {
+    await proxySideCarRequest({
+      request,
+      reply,
+      sidecarManager: deps.sidecarManager,
+      logger: deps.logger,
+      pathSuffix: request.params["*"] ?? "",
+    })
+  }
+
+  app.all("/sidecars/:id", proxyBaseHandler)
+  app.all("/sidecars/:id/*", proxyWildcardHandler)
+}
+
+function setupSideCarWebSocketProxy(app: FastifyInstance, deps: SideCarWebSocketProxyDeps) {
+  app.server.on("upgrade", (request, socket, head) => {
+    const rawUrl = request.url ?? "/"
+    const parsed = parseSideCarUpgradePath(rawUrl)
+    if (!parsed) {
+      return
+    }
+
+    void proxySideCarWebSocketUpgrade({
+      request,
+      socket: socket as Socket,
+      head,
+      sidecarId: parsed.sidecarId,
+      incomingPath: parsed.pathname,
+      search: parsed.search,
+      sidecarManager: deps.sidecarManager,
+      authManager: deps.authManager,
+      logger: deps.logger,
+    })
+  })
+}
+
 function registerInstanceProxyRoutes(app: FastifyInstance, deps: InstanceProxyDeps) {
   app.register(async (instance) => {
     instance.removeAllContentTypeParsers()
@@ -837,3 +913,281 @@ function buildProxyHeaders(headers: FastifyRequest["headers"]): Record<string, s
   }
   return result
 }
+
+async function proxySideCarRequest(args: {
+  request: FastifyRequest
+  reply: FastifyReply
+  sidecarManager: SideCarManager
+  logger: Logger
+  pathSuffix?: string
+}) {
+  const sidecarId = (args.request.params as { id?: string }).id ?? ""
+  const sidecar = await args.sidecarManager.get(sidecarId)
+  if (!sidecar) {
+    args.reply.code(404).send({ error: "SideCar not found" })
+    return
+  }
+
+  const pathname = (args.request.raw.url ?? args.request.url ?? "").split("?")[0] ?? ""
+  const queryIndex = (args.request.raw.url ?? args.request.url ?? "").indexOf("?")
+  const search = queryIndex >= 0 ? (args.request.raw.url ?? args.request.url ?? "").slice(queryIndex) : ""
+  const pathSuffix = args.pathSuffix ?? ""
+  const requestPath = pathSuffix ? `${args.sidecarManager.buildProxyBasePath(sidecarId)}/${pathSuffix.replace(/^\/+/, "")}` : args.sidecarManager.buildProxyBasePath(sidecarId)
+  const targetPath = args.sidecarManager.buildTargetPath(sidecarId, requestPath, search)
+  const targetOrigin = args.sidecarManager.buildTargetOrigin(sidecar)
+  const targetUrl = `${targetOrigin}${targetPath}`
+  args.logger.debug({ sidecarId: sidecar.id, targetUrl, pathname, prefixMode: sidecar.prefixMode }, "Proxying request to SideCar")
+
+  await args.reply.from(targetUrl, {
+    rewriteRequestHeaders: (_originalRequest, headers) =>
+      sanitizeSideCarProxyRequestHeaders(headers as Record<string, string | string[] | undefined>, targetOrigin),
+    rewriteHeaders: (headers) => rewriteSideCarResponseHeaders(headers, sidecarId, targetOrigin, sidecar.prefixMode),
+    onError: (reply, { error }) => {
+      args.logger.error({ sidecarId: sidecar.id, err: error, targetUrl }, "Failed to proxy SideCar request")
+      if (!reply.sent) {
+        reply.code(502).send({ error: "SideCar proxy failed" })
+      }
+    },
+  })
+}
+
+function parseSideCarUpgradePath(rawUrl: string): { sidecarId: string; pathname: string; search: string } | null {
+  let parsed: URL
+  try {
+    parsed = new URL(rawUrl, "http://localhost")
+  } catch {
+    return null
+  }
+
+  const match = parsed.pathname.match(/^\/sidecars\/([^/]+)(?:\/.*)?$/)
+  if (!match) {
+    return null
+  }
+
+  try {
+    return {
+      sidecarId: decodeURIComponent(match[1] ?? ""),
+      pathname: parsed.pathname,
+      search: parsed.search,
+    }
+  } catch {
+    return null
+  }
+}
+
+async function proxySideCarWebSocketUpgrade(args: {
+  request: import("http").IncomingMessage
+  socket: Socket
+  head: Buffer
+  sidecarId: string
+  incomingPath: string
+  search: string
+  sidecarManager: SideCarManager
+  authManager: AuthManager
+  logger: Logger
+}) {
+  const { request, socket, head, sidecarId, incomingPath, search, sidecarManager, authManager, logger } = args
+
+  if (!isWebSocketUpgradeRequest(request)) {
+    rejectUpgrade(socket, 400, "Bad Request")
+    return
+  }
+
+  const session = authManager.getSessionFromHeaders(request.headers)
+  if (!session) {
+    rejectUpgrade(socket, 401, "Unauthorized")
+    return
+  }
+
+  const sidecar = await sidecarManager.get(sidecarId)
+  if (!sidecar) {
+    rejectUpgrade(socket, 404, "Not Found")
+    return
+  }
+
+  const targetOrigin = sidecarManager.buildTargetOrigin(sidecar)
+  const targetPath = sidecarManager.buildTargetPath(sidecarId, incomingPath, search)
+  const targetUrl = new URL(`${targetOrigin}${targetPath}`)
+  logger.debug({ sidecarId, targetUrl: targetUrl.toString(), prefixMode: sidecar.prefixMode }, "Proxying websocket to SideCar")
+
+  const { socket: upstream, readyEvent } = createSideCarUpstreamSocket(targetUrl)
+
+  const closeBoth = () => {
+    if (!socket.destroyed) {
+      socket.destroy()
+    }
+    if (!upstream.destroyed) {
+      upstream.destroy()
+    }
+  }
+
+  upstream.once("error", (error) => {
+    logger.error({ sidecarId, err: error, targetUrl: targetUrl.toString() }, "Failed to proxy SideCar websocket")
+    rejectUpgrade(socket, 502, "Bad Gateway")
+    if (!upstream.destroyed) {
+      upstream.destroy()
+    }
+  })
+
+  socket.once("error", (error) => {
+    logger.debug({ sidecarId, err: error }, "SideCar websocket client socket errored")
+    if (!upstream.destroyed) {
+      upstream.destroy()
+    }
+  })
+
+  upstream.once(readyEvent, () => {
+    try {
+      upstream.write(buildSideCarWebSocketRequest(request, targetUrl))
+      if (head.length > 0) {
+        upstream.write(head)
+      }
+      upstream.pipe(socket)
+      socket.pipe(upstream)
+    } catch (error) {
+      logger.error({ sidecarId, err: error, targetUrl: targetUrl.toString() }, "Failed to forward SideCar websocket upgrade")
+      closeBoth()
+    }
+  })
+
+  upstream.once("close", () => {
+    if (!socket.destroyed) {
+      socket.end()
+    }
+  })
+
+  socket.once("close", () => {
+    if (!upstream.destroyed) {
+      upstream.end()
+    }
+  })
+}
+
+function createSideCarUpstreamSocket(targetUrl: URL): { socket: Socket | TLSSocket; readyEvent: "connect" | "secureConnect" } {
+  const port = Number(targetUrl.port || (targetUrl.protocol === "https:" ? 443 : 80))
+  if (targetUrl.protocol === "https:") {
+    return {
+      socket: connectTls({
+        host: targetUrl.hostname,
+        port,
+        servername: targetUrl.hostname,
+      }),
+      readyEvent: "secureConnect",
+    }
+  }
+  return {
+    socket: connectTcp(port, targetUrl.hostname),
+    readyEvent: "connect",
+  }
+}
+
+function buildSideCarWebSocketRequest(request: import("http").IncomingMessage, targetUrl: URL): string {
+  const pathWithQuery = `${targetUrl.pathname}${targetUrl.search}`
+  const requestLine = `${request.method ?? "GET"} ${pathWithQuery} HTTP/${request.httpVersion}\r\n`
+  const headerLines: string[] = []
+  const rawHeaders = request.rawHeaders ?? []
+  const blockedHeaders = getBlockedSideCarRequestHeaders()
+
+  for (let index = 0; index < rawHeaders.length; index += 2) {
+    const key = rawHeaders[index]
+    const value = rawHeaders[index + 1]
+    if (!key || value === undefined) continue
+    const lower = key.toLowerCase()
+    if (blockedHeaders.has(lower)) continue
+    if (lower === "origin") {
+      headerLines.push(`Origin: ${targetUrl.origin}\r\n`)
+      continue
+    }
+    headerLines.push(`${key}: ${value}\r\n`)
+  }
+
+  const hostValue = targetUrl.port ? `${targetUrl.hostname}:${targetUrl.port}` : targetUrl.hostname
+  headerLines.push(`Host: ${hostValue}\r\n`)
+  headerLines.push("\r\n")
+
+  return requestLine + headerLines.join("")
+}
+
+function isWebSocketUpgradeRequest(request: import("http").IncomingMessage): boolean {
+  const upgrade = request.headers.upgrade
+  if (typeof upgrade !== "string" || upgrade.toLowerCase() !== "websocket") {
+    return false
+  }
+  const connection = request.headers.connection
+  const connectionValue = Array.isArray(connection) ? connection.join(",") : connection ?? ""
+  return connectionValue.toLowerCase().split(",").map((part) => part.trim()).includes("upgrade")
+}
+
+function rejectUpgrade(socket: Socket, statusCode: number, statusText: string) {
+  if (socket.destroyed) {
+    return
+  }
+  socket.write(`HTTP/1.1 ${statusCode} ${statusText}\r\nConnection: close\r\nContent-Length: 0\r\n\r\n`)
+  socket.destroy()
+}
+
+function rewriteSideCarResponseHeaders(
+  headers: Record<string, string | string[] | undefined>,
+  sidecarId: string,
+  targetOrigin: string,
+  prefixMode: "strip" | "preserve",
+) {
+  if (prefixMode === "preserve") {
+    return headers
+  }
+
+  const next = { ...headers }
+  const locationHeader = next.location
+  const location = Array.isArray(locationHeader) ? locationHeader[0] : locationHeader
+  if (!location) {
+    return next
+  }
+
+  const publicBase = `/sidecars/${encodeURIComponent(sidecarId)}`
+
+  if (location.startsWith("/")) {
+    next.location = `${publicBase}${location}`
+    return next
+  }
+
+  try {
+    const parsed = new URL(location)
+    if (parsed.origin === targetOrigin) {
+      next.location = `${publicBase}${parsed.pathname}${parsed.search}${parsed.hash}`
+    }
+  } catch {
+    // Relative redirects should continue to resolve against the public sidecar path.
+  }
+
+  return next
+}
+
+function sanitizeSideCarProxyRequestHeaders(
+  headers: Record<string, string | string[] | undefined>,
+  targetOrigin: string,
+): Record<string, string | string[] | undefined> {
+  const blockedHeaders = getBlockedSideCarRequestHeaders()
+  const next: Record<string, string | string[] | undefined> = {}
+
+  for (const [key, value] of Object.entries(headers)) {
+    if (!value) continue
+    if (blockedHeaders.has(key.toLowerCase())) continue
+    next[key] = value
+  }
+
+  next.origin = targetOrigin
+  return next
+}
+
+function getBlockedSideCarRequestHeaders(): Set<string> {
+  return new Set([
+    "host",
+    "authorization",
+    "proxy-authorization",
+    "forwarded",
+    "x-forwarded-for",
+    "x-forwarded-host",
+    "x-forwarded-port",
+    "x-forwarded-proto",
+  ])
+}

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/server/routes/sidecars.ts

@@ -0,0 +1,56 @@
+import { FastifyInstance } from "fastify"
+import { z } from "zod"
+import type { SideCarManager } from "../../sidecars/manager"
+
+interface RouteDeps {
+  sidecarManager: SideCarManager
+}
+
+const SideCarCreateSchema = z.object({
+  kind: z.literal("port").default("port"),
+  name: z.string().trim().min(1),
+  port: z.number().int().min(1).max(65535),
+  insecure: z.boolean().default(false),
+  prefixMode: z.enum(["strip", "preserve"]).default("strip"),
+})
+
+const SideCarUpdateSchema = SideCarCreateSchema.omit({ kind: true }).partial().refine((value) => Object.keys(value).length > 0, {
+  message: "At least one field is required",
+})
+
+export function registerSideCarRoutes(app: FastifyInstance, deps: RouteDeps) {
+  app.get("/api/sidecars", async () => {
+    return { sidecars: await deps.sidecarManager.list() }
+  })
+
+  app.post("/api/sidecars", async (request, reply) => {
+    try {
+      const body = SideCarCreateSchema.parse(request.body ?? {})
+      const sidecar = await deps.sidecarManager.create(body)
+      reply.code(201)
+      return sidecar
+    } catch (error) {
+      reply.code(400)
+      return { error: error instanceof Error ? error.message : "Failed to create SideCar" }
+    }
+  })
+
+  app.put<{ Params: { id: string } }>("/api/sidecars/:id", async (request, reply) => {
+    try {
+      const body = SideCarUpdateSchema.parse(request.body ?? {})
+      return await deps.sidecarManager.update(request.params.id, body)
+    } catch (error) {
+      reply.code(400)
+      return { error: error instanceof Error ? error.message : "Failed to update SideCar" }
+    }
+  })
+
+  app.delete<{ Params: { id: string } }>("/api/sidecars/:id", async (request, reply) => {
+    const removed = await deps.sidecarManager.delete(request.params.id)
+    if (!removed) {
+      reply.code(404)
+      return { error: "SideCar not found" }
+    }
+    reply.code(204)
+  })
+}

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/sidecars/manager.ts

@@ -0,0 +1,256 @@
+import { connect } from "net"
+import type { EventBus } from "../events/bus"
+import type { Logger } from "../logger"
+import type { SettingsService } from "../settings/service"
+import type { SideCar, SideCarKind, SideCarPrefixMode, SideCarStatus } from "../api-types"
+
+interface SideCarManagerOptions {
+  settings: SettingsService
+  eventBus: EventBus
+  logger: Logger
+}
+
+interface SideCarConfigRecord {
+  id: string
+  kind: SideCarKind
+  name: string
+  port: number
+  insecure: boolean
+  prefixMode: SideCarPrefixMode
+  createdAt: string
+  updatedAt: string
+}
+
+interface SideCarRuntimeRecord {
+  status: SideCarStatus
+}
+
+export class SideCarManager {
+  private readonly configs = new Map<string, SideCarConfigRecord>()
+  private readonly runtime = new Map<string, SideCarRuntimeRecord>()
+
+  constructor(private readonly options: SideCarManagerOptions) {
+    for (const record of this.loadConfiguredSideCars()) {
+      this.configs.set(record.id, record)
+      this.runtime.set(record.id, { status: "stopped" })
+    }
+
+    queueMicrotask(() => {
+      for (const record of this.configs.values()) {
+        void this.refreshPortSideCar(record.id).catch((error) => {
+          this.options.logger.warn({ sidecarId: record.id, err: error }, "Failed to probe sidecar port")
+        })
+      }
+    })
+  }
+
+  async list(): Promise<SideCar[]> {
+    await this.refreshPortStatuses()
+    return Array.from(this.configs.values()).map((record) => this.toSideCar(record))
+  }
+
+  async get(id: string): Promise<SideCar | undefined> {
+    if (!this.configs.has(id)) return undefined
+    await this.refreshPortSideCar(id)
+    return this.toSideCar(this.requireConfig(id))
+  }
+
+  async create(input: {
+    kind: SideCarKind
+    name: string
+    port: number
+    insecure: boolean
+    prefixMode: SideCarPrefixMode
+  }): Promise<SideCar> {
+    const normalizedName = input.name.trim()
+    const id = this.buildSideCarId(normalizedName)
+    if (this.configs.has(id)) {
+      throw new Error(`SideCar '${id}' already exists`)
+    }
+
+    const now = new Date().toISOString()
+    const record: SideCarConfigRecord = {
+      id,
+      kind: input.kind,
+      name: normalizedName,
+      port: input.port,
+      insecure: input.insecure,
+      prefixMode: input.prefixMode,
+      createdAt: now,
+      updatedAt: now,
+    }
+
+    this.configs.set(record.id, record)
+    this.runtime.set(record.id, { status: "stopped" })
+    this.persistConfigs()
+    await this.refreshPortSideCar(record.id)
+    return this.toSideCar(record)
+  }
+
+  async update(
+    id: string,
+    input: Partial<{
+      name: string
+      port: number
+      insecure: boolean
+      prefixMode: SideCarPrefixMode
+    }>,
+  ): Promise<SideCar> {
+    const record = this.requireConfig(id)
+
+    record.name = typeof input.name === "string" ? input.name.trim() : record.name
+    record.port = typeof input.port === "number" ? input.port : record.port
+    record.insecure = typeof input.insecure === "boolean" ? input.insecure : record.insecure
+    record.prefixMode = typeof input.prefixMode === "string" ? input.prefixMode : record.prefixMode
+    record.updatedAt = new Date().toISOString()
+
+    this.persistConfigs()
+    await this.refreshPortSideCar(id)
+    return this.toSideCar(record)
+  }
+
+  async delete(id: string): Promise<boolean> {
+    const record = this.configs.get(id)
+    if (!record) return false
+
+    this.configs.delete(id)
+    this.runtime.delete(id)
+    this.persistConfigs()
+    this.options.eventBus.publish({ type: "sidecar.removed", sidecarId: id })
+    return true
+  }
+
+  async shutdown() {
+    return
+  }
+
+  buildTargetOrigin(sidecar: Pick<SideCar, "port" | "insecure">): string {
+    const protocol = sidecar.insecure ? "http" : "https"
+    return `${protocol}://127.0.0.1:${sidecar.port}`
+  }
+
+  buildProxyBasePath(id: string): string {
+    return `/sidecars/${encodeURIComponent(id)}`
+  }
+
+  buildTargetPath(id: string, incomingPath: string, search = ""): string {
+    const record = this.requireConfig(id)
+    const publicBase = this.buildProxyBasePath(id)
+    const normalizedPath = incomingPath || publicBase
+
+    if (record.prefixMode === "preserve") {
+      return `${normalizedPath}${search}`
+    }
+
+    let stripped = normalizedPath.startsWith(publicBase) ? normalizedPath.slice(publicBase.length) : normalizedPath
+    if (!stripped || stripped === "/") {
+      stripped = "/"
+    } else if (!stripped.startsWith("/")) {
+      stripped = `/${stripped}`
+    }
+    return `${stripped}${search}`
+  }
+
+  private async refreshPortStatuses() {
+    await Promise.all(Array.from(this.configs.values()).map((record) => this.refreshPortSideCar(record.id)))
+  }
+
+  private async refreshPortSideCar(id: string) {
+    const record = this.configs.get(id)
+    if (!record) return
+    const isAvailable = await this.isPortAvailable(record.port)
+    const current = this.runtime.get(id)
+    const nextStatus: SideCarStatus = isAvailable ? "running" : "stopped"
+    if (current?.status === nextStatus) {
+      return
+    }
+
+    this.runtime.set(id, { status: nextStatus })
+    record.updatedAt = new Date().toISOString()
+    this.publish(id)
+  }
+
+  private publish(id: string) {
+    const record = this.configs.get(id)
+    if (!record) return
+    this.options.eventBus.publish({ type: "sidecar.updated", sidecar: this.toSideCar(record) })
+  }
+
+  private toSideCar(record: SideCarConfigRecord): SideCar {
+    const runtime = this.runtime.get(record.id)
+    return {
+      id: record.id,
+      kind: record.kind,
+      name: record.name,
+      port: record.port,
+      insecure: record.insecure,
+      prefixMode: record.prefixMode,
+      status: runtime?.status ?? "stopped",
+      createdAt: record.createdAt,
+      updatedAt: record.updatedAt,
+    }
+  }
+
+  private requireConfig(id: string): SideCarConfigRecord {
+    const record = this.configs.get(id)
+    if (!record) {
+      throw new Error("SideCar not found")
+    }
+    return record
+  }
+
+  private persistConfigs() {
+    const sidecars = Array.from(this.configs.values()).map((record) => ({ ...record }))
+    this.options.settings.mergePatchOwner("config", "server", { sidecars })
+  }
+
+  private loadConfiguredSideCars(): SideCarConfigRecord[] {
+    const serverConfig = this.options.settings.getOwner("config", "server") as { sidecars?: unknown }
+    const list = Array.isArray(serverConfig?.sidecars) ? serverConfig.sidecars : []
+    const records: SideCarConfigRecord[] = []
+    for (const item of list) {
+      if (!item || typeof item !== "object") continue
+      const record = item as Record<string, unknown>
+      const kind = record.kind === "port" ? "port" : null
+      const id = typeof record.id === "string" && record.id.trim() ? record.id.trim() : null
+      const name = typeof record.name === "string" && record.name.trim() ? record.name.trim() : null
+      const port = typeof record.port === "number" && Number.isInteger(record.port) ? record.port : null
+      if (!kind || !id || !name || !port) continue
+
+      const insecure = record.insecure === true
+      const prefixMode = record.prefixMode === "preserve" ? "preserve" : "strip"
+      const createdAt = typeof record.createdAt === "string" && record.createdAt ? record.createdAt : new Date().toISOString()
+      const updatedAt = typeof record.updatedAt === "string" && record.updatedAt ? record.updatedAt : createdAt
+      records.push({ id, kind, name, port, insecure, prefixMode, createdAt, updatedAt })
+    }
+    return records
+  }
+
+  private isPortAvailable(port: number): Promise<boolean> {
+    return new Promise((resolve) => {
+      const socket = connect({ port, host: "127.0.0.1" }, () => {
+        socket.end()
+        resolve(true)
+      })
+      socket.once("error", () => {
+        socket.destroy()
+        resolve(false)
+      })
+    })
+  }
+
+  private buildSideCarId(name: string): string {
+    const normalized = name
+      .trim()
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/g, "-")
+      .replace(/-{2,}/g, "-")
+      .replace(/^-|-$/g, "")
+
+    if (!normalized) {
+      throw new Error("SideCar name must include letters or numbers")
+    }
+
+    return normalized
+  }
+}

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

@@ -534,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 {
@@ -545,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."
@@ -559,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);
@@ -619,26 +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,
-                    auth_cookie_name_clone.as_str(),
-                );
+                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,
-                    auth_cookie_name_clone.as_str(),
-                );
+                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(),
+                    );
+                });
             }
         });
 
@@ -757,8 +776,7 @@ impl CliProcessManager {
         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 {
@@ -801,37 +819,6 @@ impl CliProcessManager {
                             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,
-                                    auth_cookie_name,
-                                    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,
-                                        auth_cookie_name,
-                                        format!("http://localhost:{}", port),
-                                    );
-                                    continue;
-                                }
-                            }
-                        }
                     }
                 }
                 Err(_) => break,
@@ -1031,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)
@@ -1153,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/App.tsx

@@ -10,7 +10,10 @@ import InstanceTabs from "./components/instance-tabs"
 import InstanceDisconnectedModal from "./components/instance-disconnected-modal"
 import InstanceShell from "./components/instance/instance-shell2"
 import { SettingsScreen } from "./components/settings-screen"
+import { SideCarPickerDialog } from "./components/sidecar-picker-dialog"
+import { SideCarView } from "./components/sidecar-view"
 import { InstanceMetadataProvider } from "./lib/contexts/instance-metadata-context"
+import { showAlertDialog } from "./stores/alerts"
 import { initGithubStars } from "./stores/github-stars"
 
 import { useCommands } from "./lib/hooks/use-commands"
@@ -23,7 +26,6 @@ import { runtimeEnv } from "./lib/runtime-env"
 import { useI18n } from "./lib/i18n"
 import { setWakeLockDesired } from "./lib/native/wake-lock"
 import {
-  hasInstances,
   isSelectingFolder,
   setIsSelectingFolder,
   showFolderSelection,
@@ -33,10 +35,7 @@ import { useConfig } from "./stores/preferences"
 import {
   createInstance,
   instances,
-  activeInstanceId,
-  setActiveInstanceId,
   stopInstance,
-  getActiveInstance,
   disconnectedInstance,
   acknowledgeDisconnectedInstance,
 } from "./stores/instances"
@@ -53,6 +52,22 @@ import {
 
 import { getInstanceSessionIndicatorStatus } from "./stores/session-status"
 import { openSettings } from "./stores/settings-screen"
+import {
+  closeSidecarTab,
+  ensureSidecarsLoaded,
+  openSidecarTab,
+} from "./stores/sidecars"
+import {
+  activeAppTab,
+  activeAppTabId,
+  appTabs,
+  ensureActiveAppTab,
+  getAdjacentAppTabId,
+  getAppTabById,
+  selectAppTab,
+  selectInstanceTab,
+  selectSidecarTab,
+} from "./stores/app-tabs"
 
 const log = getLogger("actions")
 
@@ -77,6 +92,7 @@ const App: Component = () => {
   } = useConfig()
   const [escapeInDebounce, setEscapeInDebounce] = createSignal(false)
   const [instanceTabBarHeight, setInstanceTabBarHeight] = createSignal(0)
+  const [sidecarPickerOpen, setSidecarPickerOpen] = createSignal(false)
 
   const phoneQuery = useMediaQuery("(max-width: 767px)")
   const isPhoneLayout = createMemo(() => phoneQuery())
@@ -206,8 +222,7 @@ const App: Component = () => {
   })
 
   createEffect(() => {
-    instances()
-    hasInstances()
+    appTabs()
     requestAnimationFrame(() => updateInstanceTabBarHeight())
   })
 
@@ -219,7 +234,15 @@ const App: Component = () => {
     onCleanup(() => window.removeEventListener("resize", handleResize))
   })
 
-  const activeInstance = createMemo(() => getActiveInstance())
+  createEffect(() => {
+    appTabs()
+    ensureActiveAppTab()
+  })
+
+  const activeInstance = createMemo(() => {
+    const tab = activeAppTab()
+    return tab?.kind === "instance" ? tab.instance : null
+  })
   const activeSessionIdForInstance = createMemo(() => {
     const instance = activeInstance()
     if (!instance) return null
@@ -244,6 +267,7 @@ const App: Component = () => {
       recordWorkspaceLaunch(folderPath, selectedBinary)
       clearLaunchError()
       const instanceId = await createInstance(folderPath, selectedBinary)
+      selectInstanceTab(instanceId)
       setShowFolderSelection(false)
 
       log.info("Created instance", {
@@ -270,8 +294,27 @@ const App: Component = () => {
   }
 
   function handleNewInstanceRequest() {
-    if (hasInstances()) {
-      setShowFolderSelection(true)
+    setShowFolderSelection(true)
+  }
+
+  function handleOpenSidecarPicker() {
+    setSidecarPickerOpen(true)
+    void ensureSidecarsLoaded()
+  }
+
+  async function handleOpenSidecar(sidecarId: string) {
+    try {
+      const tab = await openSidecarTab(sidecarId)
+      selectSidecarTab(tab.token)
+      setShowFolderSelection(false)
+      setSidecarPickerOpen(false)
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error)
+      showAlertDialog(message, {
+        variant: "error",
+        title: t("sidecars.open.errorTitle"),
+      })
+      log.error("Failed to open SideCar", error)
     }
   }
 
@@ -332,6 +375,23 @@ const App: Component = () => {
     }
   }
 
+  async function handleCloseAppTab(tabId: string) {
+    const tab = getAppTabById(tabId)
+    if (!tab) return
+
+    const fallbackTabId = activeAppTabId() === tabId ? getAdjacentAppTabId(tabId) : activeAppTabId()
+
+    if (tab.kind === "instance") {
+      await handleCloseInstance(tab.instance.id)
+    } else {
+      closeSidecarTab(tab.sidecarTab.token)
+    }
+
+    if (!getAppTabById(tabId)) {
+      ensureActiveAppTab(fallbackTabId)
+    }
+  }
+
   const handleSidebarAgentChange = async (instanceId: string, sessionId: string, agent: string) => {
     if (!instanceId || !sessionId || sessionId === "info") return
     await updateSessionAgent(instanceId, sessionId, agent)
@@ -361,6 +421,7 @@ const App: Component = () => {
     setThinkingBlocksExpansion,
     setToolInputsVisibility,
     handleNewInstanceRequest,
+    handleCloseActiveTab: () => handleCloseAppTab(activeAppTabId() ?? ""),
     handleCloseInstance,
     handleNewSession,
     handleCloseSession,
@@ -371,6 +432,7 @@ const App: Component = () => {
   useAppLifecycle({
     setEscapeInDebounce,
     handleNewInstanceRequest,
+    handleCloseActiveTab: () => handleCloseAppTab(activeAppTabId() ?? ""),
     handleCloseInstance,
     handleNewSession,
     handleCloseSession,
@@ -470,52 +532,60 @@ const App: Component = () => {
           </div>
         </Show>
         <Show
-          when={!hasInstances()}
+          when={appTabs().length === 0}
           fallback={
             <>
               <Show when={!isPhoneLayout() || !mobileFullscreenMode()}>
                 <InstanceTabs
-                  instances={instances()}
-                  activeInstanceId={activeInstanceId()}
-                  onSelect={setActiveInstanceId}
-                  onClose={handleCloseInstance}
+                  tabs={appTabs()}
+                  activeTabId={activeAppTabId()}
+                  onSelect={selectAppTab}
+                  onClose={(tabId) => void handleCloseAppTab(tabId)}
                   onNew={handleNewInstanceRequest}
                 />
               </Show>
- 
-              <For each={Array.from(instances().values())}>
-                {(instance) => {
-                  const isActiveInstance = () => activeInstanceId() === instance.id
-                  const isVisible = () => isActiveInstance() && !showFolderSelection()
-                    return (
-                       <div
-                         class="flex-1 min-h-0 overflow-hidden"
-                         style={{ display: isVisible() ? "flex" : "none" }}
-                         data-instance-id={instance.id}
-                         data-instance-active={isActiveInstance() ? "true" : "false"}
-                         data-instance-visible={isVisible() ? "true" : "false"}
-                       >
-                         <InstanceMetadataProvider instance={instance}>
-                           <InstanceShell
-                             instance={instance}
-                             isActiveInstance={isActiveInstance()}
-                             escapeInDebounce={escapeInDebounce()}
-                             paletteCommands={paletteCommands}
-                             onCloseSession={(sessionId) => handleCloseSession(instance.id, sessionId)}
-                             onNewSession={() => handleNewSession(instance.id)}
-                             handleSidebarAgentChange={(sessionId, agent) => handleSidebarAgentChange(instance.id, sessionId, agent)}
-                             handleSidebarModelChange={(sessionId, model) => handleSidebarModelChange(instance.id, sessionId, model)}
-                             onExecuteCommand={executeCommand}
-                            tabBarOffset={isPhoneLayout() && mobileFullscreenMode() ? 0 : instanceTabBarHeight()}
-                            mobileFullscreenMode={isPhoneLayout() && mobileFullscreenMode()}
-                            onEnterMobileFullscreen={() => void enterMobileFullscreen()}
-                            onExitMobileFullscreen={() => void exitMobileFullscreen()}
-                          />
-                        </InstanceMetadataProvider>
-
-                      </div>
-                    )
 
+              <For each={appTabs()}>
+                {(tab) => {
+                  const isVisible = () => activeAppTabId() === tab.id && !showFolderSelection()
+                  return tab.kind === "instance" ? (
+                    <div
+                      class="flex-1 min-h-0 overflow-hidden"
+                      style={{ display: isVisible() ? "flex" : "none" }}
+                      data-instance-id={tab.instance.id}
+                      data-tab-id={tab.id}
+                      data-tab-kind={tab.kind}
+                      data-tab-visible={isVisible() ? "true" : "false"}
+                    >
+                      <InstanceMetadataProvider instance={tab.instance}>
+                        <InstanceShell
+                          instance={tab.instance}
+                          isActiveInstance={isVisible()}
+                          escapeInDebounce={escapeInDebounce()}
+                          paletteCommands={paletteCommands}
+                          onCloseSession={(sessionId) => handleCloseSession(tab.instance.id, sessionId)}
+                          onNewSession={() => handleNewSession(tab.instance.id)}
+                          handleSidebarAgentChange={(sessionId, agent) => handleSidebarAgentChange(tab.instance.id, sessionId, agent)}
+                          handleSidebarModelChange={(sessionId, model) => handleSidebarModelChange(tab.instance.id, sessionId, model)}
+                          onExecuteCommand={executeCommand}
+                          tabBarOffset={isPhoneLayout() && mobileFullscreenMode() ? 0 : instanceTabBarHeight()}
+                          mobileFullscreenMode={isPhoneLayout() && mobileFullscreenMode()}
+                          onEnterMobileFullscreen={() => void enterMobileFullscreen()}
+                          onExitMobileFullscreen={() => void exitMobileFullscreen()}
+                        />
+                      </InstanceMetadataProvider>
+                    </div>
+                  ) : (
+                    <div
+                      class="flex-1 min-h-0 overflow-hidden"
+                      style={{ display: isVisible() ? "flex" : "none" }}
+                      data-tab-id={tab.id}
+                      data-tab-kind={tab.kind}
+                      data-tab-visible={isVisible() ? "true" : "false"}
+                    >
+                      <SideCarView tab={tab.sidecarTab} />
+                    </div>
+                  )
                 }}
               </For>
 
@@ -525,6 +595,7 @@ const App: Component = () => {
           <FolderSelectionView
             onSelectFolder={handleSelectFolder}
             isLoading={isSelectingFolder()}
+            onOpenSidecar={handleOpenSidecarPicker}
           />
         </Show>
 
@@ -534,6 +605,7 @@ const App: Component = () => {
               <FolderSelectionView
                 onSelectFolder={handleSelectFolder}
                 isLoading={isSelectingFolder()}
+                onOpenSidecar={handleOpenSidecarPicker}
                 onClose={() => {
                   setShowFolderSelection(false)
                   clearLaunchError()
@@ -544,6 +616,7 @@ const App: Component = () => {
         </Show>
  
         <SettingsScreen />
+        <SideCarPickerDialog open={sidecarPickerOpen()} onClose={() => setSidecarPickerOpen(false)} onOpenSidecar={handleOpenSidecar} />
  
         <AlertDialog />
 

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,25 +15,48 @@ 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
+  onOpenSidecar?: () => void
   isLoading?: boolean
   onClose?: () => void
 }
 
 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 +73,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 +93,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 +142,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 +166,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 +184,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 +193,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 +212,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 +296,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 +617,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,11 +841,11 @@ 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">
+                <div class="panel-body flex flex-col gap-3">
                   <button
                     onClick={() => void handleBrowse()}
                     disabled={props.isLoading}
@@ -588,6 +862,27 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
                     </div>
                     <Kbd shortcut="cmd+n" class="ml-2 kbd-hint" />
                   </button>
+
+                  <button
+                    type="button"
+                    onClick={() => props.onOpenSidecar?.()}
+                    class="button-primary mt-3 w-full flex items-center justify-center text-sm"
+                  >
+                    <div class="flex items-center gap-2">
+                      <MonitorUp class="w-4 h-4" />
+                      <span>{t("folderSelection.sidecars.button")}</span>
+                    </div>
+                  </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 +958,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/instance-tabs.tsx

@@ -1,6 +1,5 @@
 import { Component, For, Show, createMemo } from "solid-js"
 import { Dynamic } from "solid-js/web"
-import type { Instance } from "../types/instance"
 import InstanceTab from "./instance-tab"
 import KeyboardHint from "./keyboard-hint"
 import { Plus, MonitorUp, Bell, BellOff, Settings } from "lucide-solid"
@@ -9,12 +8,13 @@ import { useI18n } from "../lib/i18n"
 import { isOsNotificationSupportedSync } from "../lib/os-notifications"
 import { useConfig } from "../stores/preferences"
 import { openSettings } from "../stores/settings-screen"
+import type { AppTabRecord } from "../stores/app-tabs"
 
 interface InstanceTabsProps {
-  instances: Map<string, Instance>
-  activeInstanceId: string | null
-  onSelect: (instanceId: string) => void
-  onClose: (instanceId: string) => void
+  tabs: AppTabRecord[]
+  activeTabId: string | null
+  onSelect: (tabId: string) => void
+  onClose: (tabId: string) => void
   onNew: () => void
 }
 
@@ -42,15 +42,25 @@ const InstanceTabs: Component<InstanceTabsProps> = (props) => {
         <div class="tab-scroll">
           <div class="tab-strip">
             <div class="tab-strip-tabs">
-              <For each={Array.from(props.instances.entries())}>
-                {([id, instance]) => (
-                  <InstanceTab
-                    instance={instance}
-                    active={id === props.activeInstanceId}
-                    onSelect={() => props.onSelect(id)}
-                    onClose={() => props.onClose(id)}
-                  />
-                )}
+              <For each={props.tabs}>
+                {(tab) =>
+                  tab.kind === "instance" ? (
+                    <InstanceTab
+                      instance={tab.instance}
+                      active={tab.id === props.activeTabId}
+                      onSelect={() => props.onSelect(tab.id)}
+                      onClose={() => props.onClose(tab.id)}
+                    />
+                  ) : (
+                    <div class={`tab-pill ${tab.id === props.activeTabId ? "tab-pill-active" : ""}`}>
+                      <button class="tab-pill-button" onClick={() => props.onSelect(tab.id)}>
+                        <span class="truncate max-w-[180px]">{tab.sidecarTab.name}</span>
+                      </button>
+                      <button class="tab-pill-close" onClick={() => props.onClose(tab.id)} aria-label={tab.sidecarTab.name}>
+                        ×
+                      </button>
+                    </div>
+                  )}
               </For>
               <button
                 class="new-tab-button"
@@ -62,7 +72,7 @@ const InstanceTabs: Component<InstanceTabsProps> = (props) => {
               </button>
             </div>
             <div class="tab-strip-spacer" />
-            <Show when={Array.from(props.instances.entries()).length > 1}>
+            <Show when={props.tabs.length > 1}>
               <div class="tab-shortcuts">
                 <KeyboardHint
                   shortcuts={[keyboardRegistry.get("instance-prev")!, keyboardRegistry.get("instance-next")!].filter(

packages/ui/src/components/message-block.tsx

@@ -9,7 +9,7 @@ import type { MessageRecord } from "../stores/message-v2/types"
 import { messageStoreBus } from "../stores/message-v2/bus"
 import { formatTokenTotal } from "../lib/formatters"
 import { sessions, setActiveParentSession, setActiveSession } from "../stores/sessions"
-import { setActiveInstanceId } from "../stores/instances"
+import { selectInstanceTab } from "../stores/app-tabs"
 import { showAlertDialog } from "../stores/alerts"
 import { deleteMessage } from "../stores/session-actions"
 import { useI18n } from "../lib/i18n"
@@ -130,7 +130,7 @@ function findTaskSessionLocation(sessionId: string, preferredInstanceId?: string
 }
 
 function navigateToTaskSession(location: TaskSessionLocation) {
-  setActiveInstanceId(location.instanceId)
+  selectInstanceTab(location.instanceId)
   const parentToActivate = location.parentId ?? location.sessionId
   setActiveParentSession(location.instanceId, parentToActivate)
   if (location.parentId) {

packages/ui/src/components/settings-screen.tsx

@@ -1,5 +1,5 @@
 import { Dialog } from "@kobalte/core/dialog"
-import { Settings, Bell, MonitorUp, Paintbrush, Terminal, Volume2, X } from "lucide-solid"
+import { Settings, Bell, MonitorUp, Paintbrush, Terminal, Volume2, Globe, X } from "lucide-solid"
 import { createMemo, For, type Component } from "solid-js"
 import { useI18n } from "../lib/i18n"
 import {
@@ -14,6 +14,7 @@ import { NotificationsSettingsSection } from "./settings/notifications-settings-
 import { OpenCodeSettingsSection } from "./settings/opencode-settings-section"
 import { RemoteAccessSettingsSection } from "./settings/remote-access-settings-section"
 import { SpeechSettingsSection } from "./settings/speech-settings-section"
+import { SideCarsSettingsSection } from "./settings/sidecars-settings-section"
 
 export const SettingsScreen: Component = () => {
   const { t } = useI18n()
@@ -23,6 +24,7 @@ export const SettingsScreen: Component = () => {
     { id: "notifications" as SettingsSectionId, icon: Bell, label: t("settings.nav.notifications") },
     { id: "remote" as SettingsSectionId, icon: MonitorUp, label: t("settings.nav.remote") },
     { id: "speech" as SettingsSectionId, icon: Volume2, label: t("settings.nav.speech") },
+    { id: "sidecars" as SettingsSectionId, icon: Globe, label: t("settings.nav.sidecars") },
     { id: "opencode" as SettingsSectionId, icon: Terminal, label: t("settings.nav.opencode") },
   ])
 
@@ -34,6 +36,8 @@ export const SettingsScreen: Component = () => {
         return <RemoteAccessSettingsSection />
       case "speech":
         return <SpeechSettingsSection />
+      case "sidecars":
+        return <SideCarsSettingsSection />
       case "opencode":
         return <OpenCodeSettingsSection />
       case "appearance":

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/sidecars-settings-section.tsx

@@ -0,0 +1,201 @@
+import { createMemo, createSignal, For, Show, onMount, type Component } from "solid-js"
+import { Globe, Loader2, Plus, Trash2 } from "lucide-solid"
+import { useI18n } from "../../lib/i18n"
+import { serverApi } from "../../lib/api-client"
+import { ensureSidecarsLoaded, sidecars, sidecarsLoading } from "../../stores/sidecars"
+
+function deriveSidecarId(value: string): string {
+  return value
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/-{2,}/g, "-")
+    .replace(/^-|-$/g, "")
+}
+
+export const SideCarsSettingsSection: Component = () => {
+  const { t } = useI18n()
+  const [name, setName] = createSignal("")
+  const [port, setPort] = createSignal("3000")
+  const [insecure, setInsecure] = createSignal(false)
+  const [prefixMode, setPrefixMode] = createSignal<"strip" | "preserve">("strip")
+  const [busyId, setBusyId] = createSignal<string | null>(null)
+  const [creating, setCreating] = createSignal(false)
+  const [formError, setFormError] = createSignal<string | null>(null)
+  const [actionError, setActionError] = createSignal<string | null>(null)
+
+  onMount(() => {
+    void ensureSidecarsLoaded()
+  })
+
+  const orderedSidecars = createMemo(() => Array.from(sidecars().values()).sort((a, b) => a.name.localeCompare(b.name)))
+  const derivedId = createMemo(() => deriveSidecarId(name()) || "your-sidecar")
+
+  async function handleCreate() {
+    const trimmedName = name().trim()
+    const nextPort = Number(port())
+    if (!trimmedName || !Number.isInteger(nextPort) || nextPort <= 0 || nextPort > 65535) {
+      setFormError(t("sidecars.form.validation"))
+      return
+    }
+
+    setCreating(true)
+    setFormError(null)
+    try {
+      await serverApi.createSidecar({
+        kind: "port",
+        name: trimmedName,
+        port: nextPort,
+        insecure: insecure(),
+        prefixMode: prefixMode(),
+      })
+      setName("")
+      setPort("3000")
+      setInsecure(false)
+      setPrefixMode("strip")
+    } catch (error) {
+      setFormError(error instanceof Error ? error.message : String(error))
+    } finally {
+      setCreating(false)
+    }
+  }
+
+  async function handleDelete(id: string) {
+    setBusyId(id)
+    setActionError(null)
+    try {
+      await serverApi.deleteSidecar(id)
+    } catch (error) {
+      setActionError(error instanceof Error ? error.message : String(error))
+    } finally {
+      setBusyId(null)
+    }
+  }
+
+  return (
+    <div class="settings-section-stack">
+      <div class="settings-card">
+        <div class="settings-card-header">
+          <div class="settings-card-heading-with-icon">
+            <Globe class="settings-card-heading-icon" />
+            <div>
+              <h3 class="settings-card-title">{t("settings.section.sidecars.title")}</h3>
+              <p class="settings-card-subtitle">{t("settings.section.sidecars.subtitle")}</p>
+            </div>
+          </div>
+          <span class="settings-scope-badge settings-scope-badge-server">{t("settings.scope.server")}</span>
+        </div>
+
+        <div class="settings-card-content">
+          <div class="settings-toggle-row settings-toggle-row-compact">
+            <div>
+              <div class="settings-toggle-title">{t("sidecars.form.name")}</div>
+              <div class="settings-toggle-caption">{t("sidecars.basePath")}: <code>/sidecars/{derivedId()}</code></div>
+            </div>
+            <input
+              class="selector-input w-full max-w-xs"
+              value={name()}
+              onInput={(event) => {
+                setFormError(null)
+                setName(event.currentTarget.value)
+              }}
+            />
+          </div>
+
+          <div class="settings-toggle-row settings-toggle-row-compact">
+            <div>
+              <div class="settings-toggle-title">{t("sidecars.form.port")}</div>
+              <div class="settings-toggle-caption">127.0.0.1</div>
+            </div>
+            <input
+              class="selector-input w-full max-w-xs"
+              value={port()}
+              onInput={(event) => {
+                setFormError(null)
+                setPort(event.currentTarget.value)
+              }}
+              inputMode="numeric"
+            />
+          </div>
+
+          <div class="settings-toggle-row settings-toggle-row-compact">
+            <div>
+              <div class="settings-toggle-title">{t("sidecars.form.protocol")}</div>
+              <div class="settings-toggle-caption">{t("sidecars.form.protocol.help")}</div>
+            </div>
+            <select class="selector-input w-full max-w-xs" value={insecure() ? "http" : "https"} onChange={(event) => setInsecure(event.currentTarget.value === "http") }>
+              <option value="https">{t("sidecars.form.protocol.https")}</option>
+              <option value="http">{t("sidecars.form.protocol.http")}</option>
+            </select>
+          </div>
+
+          <div class="settings-toggle-row settings-toggle-row-compact">
+            <div>
+              <div class="settings-toggle-title">{t("sidecars.form.prefixMode")}</div>
+              <div class="settings-toggle-caption">{t("sidecars.form.prefixMode.help")}</div>
+            </div>
+            <select class="selector-input w-full max-w-xs" value={prefixMode()} onChange={(event) => setPrefixMode(event.currentTarget.value as "strip" | "preserve") }>
+              <option value="strip">{t("sidecars.form.prefixMode.strip")}</option>
+              <option value="preserve">{t("sidecars.form.prefixMode.preserve")}</option>
+            </select>
+          </div>
+
+          <Show when={formError()}>
+            <div class="text-sm text-red-500">{formError()}</div>
+          </Show>
+
+          <div class="flex justify-end">
+            <button type="button" class="selector-button selector-button-primary" disabled={creating()} onClick={() => void handleCreate()}>
+              <Show when={creating()} fallback={<Plus class="w-4 h-4" />}>
+                <Loader2 class="w-4 h-4 animate-spin" />
+              </Show>
+              <span>{t("sidecars.form.add")}</span>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div class="settings-card">
+        <div class="settings-card-header">
+          <div>
+            <h3 class="settings-card-title">{t("sidecars.settings.listTitle")}</h3>
+            <p class="settings-card-subtitle">{t("sidecars.settings.listSubtitle")}</p>
+          </div>
+        </div>
+
+        <div class="settings-card-content">
+          <Show when={actionError()}>
+            <div class="text-sm text-red-500">{actionError()}</div>
+          </Show>
+
+          <Show when={!sidecarsLoading()} fallback={<div class="settings-card-message">{t("sidecars.picker.loading")}</div>}>
+            <Show when={orderedSidecars().length > 0} fallback={<div class="settings-card-message">{t("sidecars.settings.empty")}</div>}>
+              <For each={orderedSidecars()}>
+                {(sidecar) => (
+                  <div class="settings-toggle-row settings-toggle-row-compact">
+                    <div>
+                      <div class="settings-toggle-title">{sidecar.name}</div>
+                      <div class="settings-toggle-caption">
+                        {t("sidecars.kind.port")} · {sidecar.insecure ? "http" : "https"}://127.0.0.1:{sidecar.port}
+                      </div>
+                      <div class="settings-toggle-caption">
+                        {t("sidecars.basePath")}: <code>/sidecars/{sidecar.id}</code> · {t(`sidecars.form.prefixMode.${sidecar.prefixMode}`)}
+                      </div>
+                    </div>
+
+                    <div class="flex items-center gap-2">
+                      <span class="text-xs text-secondary min-w-[4.5rem] text-right">{t(`sidecars.status.${sidecar.status}`)}</span>
+                      <button type="button" class="selector-button selector-button-secondary" disabled={busyId() === sidecar.id} onClick={() => void handleDelete(sidecar.id)}>
+                        <Trash2 class="w-4 h-4" />
+                      </button>
+                    </div>
+                  </div>
+                )}
+              </For>
+            </Show>
+          </Show>
+        </div>
+      </div>
+    </div>
+  )
+}

packages/ui/src/components/sidecar-picker-dialog.tsx

@@ -0,0 +1,82 @@
+import { Dialog } from "@kobalte/core/dialog"
+import { For, Show, createEffect, createMemo, type Component } from "solid-js"
+import { Globe, Square } from "lucide-solid"
+import { useI18n } from "../lib/i18n"
+import { ensureSidecarsLoaded, sidecars, sidecarsLoading } from "../stores/sidecars"
+
+interface SideCarPickerDialogProps {
+  open: boolean
+  onClose: () => void
+  onOpenSidecar: (sidecarId: string) => void | Promise<void>
+}
+
+export const SideCarPickerDialog: Component<SideCarPickerDialogProps> = (props) => {
+  const { t } = useI18n()
+  const orderedSidecars = createMemo(() => Array.from(sidecars().values()).sort((a, b) => a.name.localeCompare(b.name)))
+
+  createEffect(() => {
+    if (props.open) {
+      void ensureSidecarsLoaded()
+    }
+  })
+
+  return (
+    <Dialog open={props.open} onOpenChange={(open) => !open && props.onClose()}>
+      <Dialog.Portal>
+        <Dialog.Overlay class="modal-overlay" />
+        <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
+          <Dialog.Content class="modal-surface w-full max-w-2xl p-6 flex flex-col gap-4 max-h-[80vh] overflow-hidden">
+            <div>
+              <Dialog.Title class="text-xl font-semibold text-primary">{t("sidecars.picker.title")}</Dialog.Title>
+              <Dialog.Description class="text-sm text-secondary mt-2">
+                {t("sidecars.picker.subtitle")}
+              </Dialog.Description>
+            </div>
+
+            <div class="flex-1 overflow-auto flex flex-col gap-3">
+              <Show when={!sidecarsLoading()} fallback={<div class="panel panel-empty-state">{t("sidecars.picker.loading")}</div>}>
+                <Show when={orderedSidecars().length > 0} fallback={<div class="panel panel-empty-state">{t("sidecars.picker.empty")}</div>}>
+                  <For each={orderedSidecars()}>
+                    {(sidecar) => (
+                      <button
+                        type="button"
+                        class="panel-list-item panel-list-item-content text-left disabled:cursor-not-allowed disabled:opacity-60"
+                        disabled={sidecar.status !== "running"}
+                        onClick={() => void props.onOpenSidecar(sidecar.id)}
+                      >
+                        <div class="flex items-center justify-between gap-4 w-full">
+                          <div class="flex items-center gap-3 min-w-0">
+                            <span class="panel-empty-state-icon !w-10 !h-10">
+                              <Globe class="w-5 h-5" />
+                            </span>
+                            <div class="min-w-0">
+                              <div class="text-sm font-medium text-primary truncate">{sidecar.name}</div>
+                              <div class="text-xs text-muted">
+                                {t("sidecars.kind.port")} - {sidecar.insecure ? "http" : "https"}://127.0.0.1:{sidecar.port}
+                              </div>
+                              <div class="text-xs text-muted mt-1">{t("sidecars.basePath")}: <code>/sidecars/{sidecar.id}</code></div>
+                            </div>
+                          </div>
+                          <div class="text-xs text-secondary flex items-center gap-2">
+                            <Square class="w-4 h-4" />
+                            <span>{t(`sidecars.status.${sidecar.status}`)}</span>
+                          </div>
+                        </div>
+                      </button>
+                    )}
+                  </For>
+                </Show>
+              </Show>
+            </div>
+
+            <div class="flex justify-end">
+              <button type="button" class="selector-button selector-button-secondary" onClick={props.onClose}>
+                {t("sidecars.picker.close")}
+              </button>
+            </div>
+          </Dialog.Content>
+        </div>
+      </Dialog.Portal>
+    </Dialog>
+  )
+}

packages/ui/src/components/sidecar-view.tsx

@@ -0,0 +1,197 @@
+import { ArrowLeft, ArrowRight, RefreshCw } from "lucide-solid"
+import { createEffect, createMemo, createSignal, type Component } from "solid-js"
+import type { SideCarTabRecord } from "../stores/sidecars"
+import { useI18n } from "../lib/i18n"
+
+interface SideCarViewProps {
+  tab: SideCarTabRecord
+}
+
+export const SideCarView: Component<SideCarViewProps> = (props) => {
+  const { t } = useI18n()
+  const [frameSrc, setFrameSrc] = createSignal(props.tab.shellUrl)
+  const [pathInput, setPathInput] = createSignal("/")
+  let iframeRef: HTMLIFrameElement | undefined
+
+  const lockedBaseLabel = createMemo(() => {
+    const hostLabel = props.tab.port ? `${props.tab.name}:${props.tab.port}` : props.tab.name
+    if (props.tab.prefixMode === "preserve") {
+      return `${hostLabel}${props.tab.proxyBasePath}`
+    }
+    return hostLabel
+  })
+
+  const getEditablePathFromUrl = (url: string): string => {
+    try {
+      const parsed = new URL(url, window.location.origin)
+      const basePath = props.tab.proxyBasePath
+      let pathname = parsed.pathname
+
+      if (basePath && pathname.startsWith(basePath)) {
+        pathname = pathname.slice(basePath.length) || "/"
+      }
+
+      if (!pathname.startsWith("/")) {
+        pathname = `/${pathname}`
+      }
+
+      return `${pathname}${parsed.search}${parsed.hash}`
+    } catch {
+      return "/"
+    }
+  }
+
+  const buildNormalizedTargetUrl = (rawInput: string): string => {
+    const trimmed = rawInput.trim()
+    const withLeadingSlash = trimmed.startsWith("/") ? trimmed : `/${trimmed}`
+    const parsed = new URL(withLeadingSlash || "/", window.location.origin)
+
+    const safeSegments: string[] = []
+    for (const segment of parsed.pathname.split("/")) {
+      if (!segment || segment === ".") {
+        continue
+      }
+      if (segment === "..") {
+        if (safeSegments.length > 0) {
+          safeSegments.pop()
+        }
+        continue
+      }
+      safeSegments.push(segment)
+    }
+
+    const normalizedPath = `/${safeSegments.join("/")}` || "/"
+    const basePath = props.tab.proxyBasePath
+    return `${basePath}${normalizedPath}${parsed.search}${parsed.hash}`
+  }
+
+  const syncPathInputFromFrame = () => {
+    try {
+      const currentHref = iframeRef?.contentWindow?.location.href
+      if (!currentHref) {
+        return
+      }
+      setPathInput(getEditablePathFromUrl(currentHref))
+    } catch {
+      setPathInput(getEditablePathFromUrl(frameSrc()))
+    }
+  }
+
+  createEffect(() => {
+    setFrameSrc(props.tab.shellUrl)
+    setPathInput(getEditablePathFromUrl(props.tab.shellUrl))
+  })
+
+  const handleBack = (event: MouseEvent) => {
+    event.preventDefault()
+    event.stopPropagation()
+
+    try {
+      const frameWindow = iframeRef?.contentWindow
+      if (!frameWindow) {
+        return
+      }
+
+      if (frameWindow.history.length <= 1) {
+        return
+      }
+
+      frameWindow.focus()
+      frameWindow.history.go(-1)
+    } catch {
+      // Ignore navigation errors from pages that do not expose history access.
+    }
+  }
+
+  const handleRefresh = () => {
+    try {
+      iframeRef?.contentWindow?.location.reload()
+      return
+    } catch {
+      // Fall back to resetting the iframe source if the frame cannot be reloaded directly.
+    }
+
+    setFrameSrc("about:blank")
+    requestAnimationFrame(() => setFrameSrc(props.tab.shellUrl))
+  }
+
+  const handleGo = (event?: Event) => {
+    event?.preventDefault()
+
+    const nextUrl = buildNormalizedTargetUrl(pathInput())
+    setFrameSrc(nextUrl)
+    setPathInput(getEditablePathFromUrl(nextUrl))
+  }
+
+  return (
+    <div class="flex h-full min-h-0 w-full flex-col bg-surface">
+      <div
+        class="flex shrink-0 items-center gap-2 px-3 py-2"
+        style={{ "border-bottom": "1px solid var(--border-base)" }}
+      >
+        <button
+          type="button"
+          class="new-tab-button"
+          onClick={handleBack}
+          title={t("sidecars.back")}
+          aria-label={t("sidecars.back")}
+        >
+          <ArrowLeft class="h-4 w-4" />
+        </button>
+        <button
+          type="button"
+          class="new-tab-button"
+          onClick={handleRefresh}
+          title={t("sidecars.refresh")}
+          aria-label={t("sidecars.refresh")}
+        >
+          <RefreshCw class="h-4 w-4" />
+        </button>
+        <div
+          class="shrink-0 rounded-md px-3 py-1.5 text-sm"
+          style={{
+            background: "var(--surface-secondary)",
+            color: "var(--text-secondary)",
+            border: "1px solid var(--border-base)",
+          }}
+        >
+          {lockedBaseLabel()}
+        </div>
+        <form class="flex min-w-0 flex-1 items-center gap-2" onSubmit={(event) => handleGo(event)}>
+          <input
+            type="text"
+            class="min-w-0 flex-1 rounded-md px-3 py-1.5 text-sm outline-none"
+            style={{
+              background: "var(--surface-secondary)",
+              color: "var(--text-primary)",
+              border: "1px solid var(--border-base)",
+            }}
+            value={pathInput()}
+            onInput={(event) => setPathInput(event.currentTarget.value)}
+            spellcheck={false}
+            autocomplete="off"
+            autocorrect="off"
+            autocapitalize="off"
+            aria-label={t("sidecars.path")}
+          />
+          <button
+            type="submit"
+            class="new-tab-button"
+            title={t("sidecars.go")}
+            aria-label={t("sidecars.go")}
+          >
+            <ArrowRight class="h-4 w-4" />
+          </button>
+        </form>
+      </div>
+      <iframe
+        ref={iframeRef}
+        src={frameSrc()}
+        title={props.tab.name}
+        class="min-h-0 flex-1 w-full border-0 bg-surface"
+        referrerPolicy="same-origin"
+        onLoad={syncPathInputFromFrame}
+      />
+    </div>
+  )
+}

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

@@ -10,7 +10,10 @@ import type {
   SpeechCapabilitiesResponse,
   SpeechSynthesisResponse,
   SpeechTranscriptionResponse,
+  SideCar,
   ServerMeta,
+  RemoteServerProbeRequest,
+  RemoteServerProbeResponse,
   VoiceModeStateResponse,
   WorkspaceCreateRequest,
   WorkspaceDescriptor,
@@ -191,9 +194,42 @@ export const serverApi = {
       body: JSON.stringify(payload),
     })
   },
+  fetchSidecars(): Promise<{ sidecars: SideCar[] }> {
+    return request<{ sidecars: SideCar[] }>("/api/sidecars")
+  },
+  createSidecar(payload: {
+    kind: "port"
+    name: string
+    port: number
+    insecure: boolean
+    prefixMode: "strip" | "preserve"
+  }): Promise<SideCar> {
+    return request<SideCar>("/api/sidecars", {
+      method: "POST",
+      body: JSON.stringify(payload),
+    })
+  },
+  updateSidecar(
+    id: string,
+    payload: Partial<{ name: string; port: number; insecure: boolean; prefixMode: "strip" | "preserve" }>,
+  ): Promise<SideCar> {
+    return request<SideCar>(`/api/sidecars/${encodeURIComponent(id)}`, {
+      method: "PUT",
+      body: JSON.stringify(payload),
+    })
+  },
+  deleteSidecar(id: string): Promise<void> {
+    return request(`/api/sidecars/${encodeURIComponent(id)}`, { method: "DELETE" })
+  },
   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")
   },
@@ -430,4 +466,4 @@ function buildClientEventsUrl(identity: { clientId: string; connectionId: string
   return `${url.pathname}${url.search}`
 }
 
-export type { WorkspaceDescriptor, WorkspaceLogEntry, WorkspaceEventPayload, WorkspaceEventType }
+export type { WorkspaceDescriptor, WorkspaceLogEntry, WorkspaceEventPayload, WorkspaceEventType, SideCar }

packages/ui/src/lib/hooks/use-app-lifecycle.ts

@@ -16,6 +16,7 @@ const log = getLogger("actions")
 interface UseAppLifecycleOptions {
   setEscapeInDebounce: (value: boolean) => void
   handleNewInstanceRequest: () => void
+  handleCloseActiveTab: () => Promise<void>
   handleCloseInstance: (instanceId: string) => Promise<void>
   handleNewSession: (instanceId: string) => Promise<void>
   handleCloseSession: (instanceId: string, sessionId: string) => Promise<void>
@@ -31,7 +32,7 @@ export function useAppLifecycle(options: UseAppLifecycleOptions) {
 
     setupTabKeyboardShortcuts(
       options.handleNewInstanceRequest,
-      options.handleCloseInstance,
+      options.handleCloseActiveTab,
       options.handleNewSession,
       options.handleCloseSession,
       () => {

packages/ui/src/lib/hooks/use-commands.ts

@@ -2,7 +2,8 @@ import { createSignal, onMount } from "solid-js"
 import type { Accessor } from "solid-js"
 import type { Preferences, ExpansionPreference, ToolInputsVisibilityPreference } from "../../stores/preferences"
 import { createCommandRegistry, type Command } from "../commands"
-import { instances, activeInstanceId, setActiveInstanceId } from "../../stores/instances"
+import { activeInstanceId } from "../../stores/instances"
+import { selectNextAppTab, selectPreviousAppTab } from "../../stores/app-tabs"
 import type { ClientPart, MessageInfo } from "../../types/message"
 import { getSessions, getVisibleSessionIds, setActiveSession, setActiveSessionFromList } from "../../stores/sessions"
 import { showAlertDialog } from "../../stores/alerts"
@@ -41,6 +42,7 @@ export interface UseCommandsOptions {
   setThinkingBlocksExpansion: (mode: ExpansionPreference) => void
   setToolInputsVisibility: (mode: ToolInputsVisibilityPreference) => void
   handleNewInstanceRequest: () => void
+  handleCloseActiveTab: () => Promise<void>
   handleCloseInstance: (instanceId: string) => Promise<void>
   handleNewSession: (instanceId: string) => Promise<void>
   handleCloseSession: (instanceId: string, sessionId: string) => Promise<void>
@@ -90,9 +92,7 @@ export function useCommands(options: UseCommandsOptions) {
       keywords: () => splitKeywords("commands.closeInstance.keywords"),
       shortcut: { key: "W", meta: true },
       action: async () => {
-        const instance = activeInstance()
-        if (!instance) return
-        await options.handleCloseInstance(instance.id)
+        await options.handleCloseActiveTab()
       },
     })
 
@@ -103,13 +103,7 @@ export function useCommands(options: UseCommandsOptions) {
       category: "Instance",
       keywords: () => splitKeywords("commands.nextInstance.keywords"),
       shortcut: { key: "]", meta: true },
-      action: () => {
-        const ids = Array.from(instances().keys())
-        if (ids.length <= 1) return
-        const current = ids.indexOf(activeInstanceId() || "")
-        const next = (current + 1) % ids.length
-        if (ids[next]) setActiveInstanceId(ids[next])
-      },
+      action: () => selectNextAppTab(),
     })
 
     commandRegistry.register({
@@ -119,13 +113,7 @@ export function useCommands(options: UseCommandsOptions) {
       category: "Instance",
       keywords: () => splitKeywords("commands.previousInstance.keywords"),
       shortcut: { key: "[", meta: true },
-      action: () => {
-        const ids = Array.from(instances().keys())
-        if (ids.length <= 1) return
-        const current = ids.indexOf(activeInstanceId() || "")
-        const prev = current <= 0 ? ids.length - 1 : current - 1
-        if (ids[prev]) setActiveInstanceId(ids[prev])
-      },
+      action: () => selectPreviousAppTab(),
     })
 
     commandRegistry.register({

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

@@ -15,17 +15,17 @@ export const commandMessages = {
   "commands.newInstance.description": "Open folder picker to create new instance",
   "commands.newInstance.keywords": "folder, project, workspace",
 
-  "commands.closeInstance.label": "Close Instance",
-  "commands.closeInstance.description": "Stop current instance's server",
-  "commands.closeInstance.keywords": "stop, quit, close",
+  "commands.closeInstance.label": "Close Tab",
+  "commands.closeInstance.description": "Close the current top-level tab",
+  "commands.closeInstance.keywords": "stop, quit, close, tab",
 
-  "commands.nextInstance.label": "Next Instance",
-  "commands.nextInstance.description": "Cycle to next instance tab",
-  "commands.nextInstance.keywords": "switch, navigate",
+  "commands.nextInstance.label": "Next Tab",
+  "commands.nextInstance.description": "Cycle to the next top-level tab",
+  "commands.nextInstance.keywords": "switch, navigate, tab",
 
-  "commands.previousInstance.label": "Previous Instance",
-  "commands.previousInstance.description": "Cycle to previous instance tab",
-  "commands.previousInstance.keywords": "switch, navigate",
+  "commands.previousInstance.label": "Previous Tab",
+  "commands.previousInstance.description": "Cycle to the previous top-level tab",
+  "commands.previousInstance.keywords": "switch, navigate, tab",
 
   "commands.newSession.label": "New Session",
   "commands.newSession.description": "Create a new parent session",

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,32 @@ 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.",
+  "folderSelection.sidecars.button": "Open SideCar",
 } as const

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.",
@@ -186,4 +195,40 @@ export const settingsMessages = {
   "settings.speech.save.saved": "Saved",
   "settings.speech.save.unsaved": "Unsaved changes",
   "settings.speech.save.error": "Save failed",
+  "settings.nav.sidecars": "SideCars",
+  "settings.section.sidecars.eyebrow": "Server services",
+  "settings.section.sidecars.title": "SideCars",
+  "settings.section.sidecars.subtitle": "Configure local services listening on fixed ports that the server can proxy into tabs.",
+  "sidecars.form.name": "Name",
+  "sidecars.form.validation": "Enter a valid SideCar name and port.",
+  "sidecars.form.port": "Port",
+  "sidecars.form.insecure": "Use HTTP",
+  "sidecars.form.protocol": "Protocol",
+  "sidecars.form.protocol.help": "Choose how the proxy should connect to the local service.",
+  "sidecars.form.protocol.https": "HTTPS",
+  "sidecars.form.protocol.http": "HTTP",
+  "sidecars.form.prefixMode": "Prefix mode",
+  "sidecars.form.prefixMode.help": "Choose whether the SideCar receives the public /sidecars path prefix.",
+  "sidecars.form.prefixMode.strip": "Strip prefix",
+  "sidecars.form.prefixMode.preserve": "Preserve prefix",
+  "sidecars.form.add": "Add SideCar",
+  "sidecars.kind.port": "Port",
+  "sidecars.status.running": "Running",
+  "sidecars.status.stopped": "Stopped",
+  "sidecars.basePath": "Base path",
+  "sidecars.settings.listTitle": "Configured SideCars",
+  "sidecars.settings.listSubtitle": "Review the port-based SideCars available in the picker.",
+  "sidecars.settings.empty": "No SideCars configured yet.",
+  "sidecars.picker.title": "Open SideCar",
+  "sidecars.picker.loading": "Loading SideCars...",
+  "sidecars.picker.subtitle": "Choose an available SideCar to open in a new tab.",
+  "sidecars.picker.empty": "No port-based SideCars are available yet.",
+  "sidecars.picker.close": "Close",
+  "sidecars.open.errorTitle": "Unable to open SideCar",
+  "sidecars.open.notFound": "SideCar not found.",
+  "sidecars.open.notRunning": "SideCar is not reachable on its configured port.",
+  "sidecars.back": "Back",
+  "sidecars.refresh": "Refresh",
+  "sidecars.path": "Path",
+  "sidecars.go": "Go",
 } as const

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

@@ -15,17 +15,17 @@ export const commandMessages = {
   "commands.newInstance.description": "Abrir el selector de carpetas para crear una nueva instancia",
   "commands.newInstance.keywords": "carpeta, proyecto, workspace",
 
-  "commands.closeInstance.label": "Cerrar instancia",
-  "commands.closeInstance.description": "Detener el servidor de la instancia actual",
-  "commands.closeInstance.keywords": "detener, salir, cerrar",
+  "commands.closeInstance.label": "Cerrar pestaña",
+  "commands.closeInstance.description": "Cerrar la pestaña superior actual",
+  "commands.closeInstance.keywords": "detener, salir, cerrar, pestaña",
 
-  "commands.nextInstance.label": "Siguiente instancia",
-  "commands.nextInstance.description": "Cambiar a la siguiente pestaña de instancia",
-  "commands.nextInstance.keywords": "cambiar, navegar",
+  "commands.nextInstance.label": "Siguiente pestaña",
+  "commands.nextInstance.description": "Cambiar a la siguiente pestaña superior",
+  "commands.nextInstance.keywords": "cambiar, navegar, pestaña",
 
-  "commands.previousInstance.label": "Instancia anterior",
-  "commands.previousInstance.description": "Cambiar a la pestaña de instancia anterior",
-  "commands.previousInstance.keywords": "cambiar, navegar",
+  "commands.previousInstance.label": "Pestaña anterior",
+  "commands.previousInstance.description": "Cambiar a la pestaña superior anterior",
+  "commands.previousInstance.keywords": "cambiar, navegar, pestaña",
 
   "commands.newSession.label": "Nueva sesión",
   "commands.newSession.description": "Crear una nueva sesión principal",

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

@@ -2,35 +2,38 @@ export const folderSelectionMessages = {
   "folderSelection.language.ariaLabel": "Idioma",
 
   "folderSelection.logoAlt": "Logo de CodeNomad",
-  "folderSelection.tagline": "Selecciona una carpeta para empezar a programar con IA",
+  "folderSelection.tagline": "Selecciona una carpeta para empezar a programar con AI",
 
   "folderSelection.links.github": "GitHub de CodeNomad",
-  "folderSelection.links.githubStars": "Estrellas de CodeNomad en GitHub",
+  "folderSelection.links.githubStars": "Estrellas de GitHub de CodeNomad",
   "folderSelection.links.discord": "Discord de CodeNomad",
 
   "folderSelection.empty.title": "No hay carpetas recientes",
-  "folderSelection.empty.description": "Explora una carpeta para comenzar",
+  "folderSelection.empty.description": "Busca una carpeta para comenzar",
 
   "folderSelection.recent.title": "Carpetas recientes",
   "folderSelection.recent.subtitle.one": "{count} carpeta disponible",
   "folderSelection.recent.subtitle.other": "{count} carpetas disponibles",
-  "folderSelection.recent.remove": "Quitar de recientes",
+  "folderSelection.recent.remove": "Eliminar de recientes",
 
-  "folderSelection.browse.title": "Explorar carpetas",
+  "folderSelection.browse.title": "Buscar carpeta",
   "folderSelection.browse.subtitle": "Selecciona cualquier carpeta en tu ordenador",
-  "folderSelection.browse.button": "Explorar carpetas",
+  "folderSelection.browse.button": "Buscar 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",
 
   "folderSelection.hints.navigate": "Navegar",
   "folderSelection.hints.select": "Seleccionar",
-  "folderSelection.hints.remove": "Quitar",
-  "folderSelection.hints.browse": "Explorar",
+  "folderSelection.hints.remove": "Eliminar",
+  "folderSelection.hints.browse": "Buscar",
 
   "folderSelection.loading.title": "Iniciando instancia...",
-  "folderSelection.loading.subtitle": "Espera un momento mientras preparamos tu workspace.",
+  "folderSelection.loading.subtitle": "Espera mientras preparamos tu espacio de trabajo.",
 
   "folderSelection.drop.title": "Suelta una carpeta para abrirla",
   "folderSelection.drop.subtitle": "Inicia una nueva instancia en la carpeta soltada.",
@@ -39,4 +42,32 @@ 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.",
+  "folderSelection.sidecars.button": "Open SideCar",
 } as const

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.",
@@ -186,4 +194,40 @@ export const settingsMessages = {
   "settings.speech.save.saved": "Guardado",
   "settings.speech.save.unsaved": "Cambios sin guardar",
   "settings.speech.save.error": "Error al guardar",
+  "settings.nav.sidecars": "SideCars",
+  "settings.section.sidecars.eyebrow": "Server services",
+  "settings.section.sidecars.title": "SideCars",
+  "settings.section.sidecars.subtitle": "Configure local services listening on fixed ports that the server can proxy into tabs.",
+  "sidecars.form.name": "Name",
+  "sidecars.form.validation": "Enter a valid SideCar name and port.",
+  "sidecars.form.port": "Port",
+  "sidecars.form.insecure": "Use HTTP",
+  "sidecars.form.protocol": "Protocol",
+  "sidecars.form.protocol.help": "Choose how the proxy should connect to the local service.",
+  "sidecars.form.protocol.https": "HTTPS",
+  "sidecars.form.protocol.http": "HTTP",
+  "sidecars.form.prefixMode": "Prefix mode",
+  "sidecars.form.prefixMode.help": "Choose whether the SideCar receives the public /sidecars path prefix.",
+  "sidecars.form.prefixMode.strip": "Strip prefix",
+  "sidecars.form.prefixMode.preserve": "Preserve prefix",
+  "sidecars.form.add": "Add SideCar",
+  "sidecars.kind.port": "Port",
+  "sidecars.status.running": "Running",
+  "sidecars.status.stopped": "Stopped",
+  "sidecars.basePath": "Base path",
+  "sidecars.settings.listTitle": "Configured SideCars",
+  "sidecars.settings.listSubtitle": "Review the port-based SideCars available in the picker.",
+  "sidecars.settings.empty": "No SideCars configured yet.",
+  "sidecars.picker.title": "Open SideCar",
+  "sidecars.picker.loading": "Loading SideCars...",
+  "sidecars.picker.subtitle": "Choose an available SideCar to open in a new tab.",
+  "sidecars.picker.empty": "No port-based SideCars are available yet.",
+  "sidecars.picker.close": "Close",
+  "sidecars.open.errorTitle": "Unable to open SideCar",
+  "sidecars.open.notFound": "SideCar not found.",
+  "sidecars.open.notRunning": "SideCar is not reachable on its configured port.",
+  "sidecars.back": "Back",
+  "sidecars.refresh": "Refresh",
+  "sidecars.path": "Path",
+  "sidecars.go": "Go",
 } as const

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

@@ -15,17 +15,17 @@ export const commandMessages = {
   "commands.newInstance.description": "Ouvrir le sélecteur de dossiers pour créer une nouvelle instance",
   "commands.newInstance.keywords": "dossier, projet, espace de travail",
 
-  "commands.closeInstance.label": "Fermer l'instance",
-  "commands.closeInstance.description": "Arrêter le serveur de l'instance actuelle",
-  "commands.closeInstance.keywords": "arrêter, quitter, fermer",
+  "commands.closeInstance.label": "Fermer l'onglet",
+  "commands.closeInstance.description": "Fermer l'onglet de premier niveau actuel",
+  "commands.closeInstance.keywords": "arrêter, quitter, fermer, onglet",
 
-  "commands.nextInstance.label": "Instance suivante",
-  "commands.nextInstance.description": "Passer à l'onglet d'instance suivant",
-  "commands.nextInstance.keywords": "changer, naviguer, suivant",
+  "commands.nextInstance.label": "Onglet suivant",
+  "commands.nextInstance.description": "Passer à l'onglet de premier niveau suivant",
+  "commands.nextInstance.keywords": "changer, naviguer, suivant, onglet",
 
-  "commands.previousInstance.label": "Instance précédente",
-  "commands.previousInstance.description": "Passer à l'onglet d'instance précédent",
-  "commands.previousInstance.keywords": "changer, naviguer, précédent",
+  "commands.previousInstance.label": "Onglet précédent",
+  "commands.previousInstance.description": "Passer à l'onglet de premier niveau précédent",
+  "commands.previousInstance.keywords": "changer, naviguer, précédent, onglet",
 
   "commands.newSession.label": "Nouvelle session",
   "commands.newSession.description": "Créer une nouvelle session parente",

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

@@ -5,7 +5,7 @@ export const folderSelectionMessages = {
   "folderSelection.tagline": "Sélectionnez un dossier pour commencer à coder avec l'IA",
 
   "folderSelection.links.github": "GitHub de CodeNomad",
-  "folderSelection.links.githubStars": "Stars GitHub de CodeNomad",
+  "folderSelection.links.githubStars": "Étoiles GitHub de CodeNomad",
   "folderSelection.links.discord": "Discord de CodeNomad",
 
   "folderSelection.empty.title": "Aucun dossier récent",
@@ -16,10 +16,13 @@ export const folderSelectionMessages = {
   "folderSelection.recent.subtitle.other": "{count} dossiers disponibles",
   "folderSelection.recent.remove": "Retirer des récents",
 
-  "folderSelection.browse.title": "Parcourir les dossiers",
+  "folderSelection.browse.title": "Parcourir un dossier",
   "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 se connecter à un serveur",
+  "folderSelection.actions.subtitle": "Ouvrez un dossier local ou connectez-vous à un serveur CodeNomad",
+  "folderSelection.actions.connectButton": "Se connecter au serveur CodeNomad",
 
   "folderSelection.advancedSettings": "Paramètres avancés",
   "folderSelection.opencode": "OpenCode",
@@ -39,4 +42,32 @@ 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.",
+  "folderSelection.sidecars.button": "Open SideCar",
 } as const

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.",
@@ -186,4 +194,40 @@ export const settingsMessages = {
   "settings.speech.save.saved": "Enregistré",
   "settings.speech.save.unsaved": "Modifications non enregistrées",
   "settings.speech.save.error": "Échec de l'enregistrement",
+  "settings.nav.sidecars": "SideCars",
+  "settings.section.sidecars.eyebrow": "Server services",
+  "settings.section.sidecars.title": "SideCars",
+  "settings.section.sidecars.subtitle": "Configure local services listening on fixed ports that the server can proxy into tabs.",
+  "sidecars.form.name": "Name",
+  "sidecars.form.validation": "Enter a valid SideCar name and port.",
+  "sidecars.form.port": "Port",
+  "sidecars.form.insecure": "Use HTTP",
+  "sidecars.form.protocol": "Protocol",
+  "sidecars.form.protocol.help": "Choose how the proxy should connect to the local service.",
+  "sidecars.form.protocol.https": "HTTPS",
+  "sidecars.form.protocol.http": "HTTP",
+  "sidecars.form.prefixMode": "Prefix mode",
+  "sidecars.form.prefixMode.help": "Choose whether the SideCar receives the public /sidecars path prefix.",
+  "sidecars.form.prefixMode.strip": "Strip prefix",
+  "sidecars.form.prefixMode.preserve": "Preserve prefix",
+  "sidecars.form.add": "Add SideCar",
+  "sidecars.kind.port": "Port",
+  "sidecars.status.running": "Running",
+  "sidecars.status.stopped": "Stopped",
+  "sidecars.basePath": "Base path",
+  "sidecars.settings.listTitle": "Configured SideCars",
+  "sidecars.settings.listSubtitle": "Review the port-based SideCars available in the picker.",
+  "sidecars.settings.empty": "No SideCars configured yet.",
+  "sidecars.picker.title": "Open SideCar",
+  "sidecars.picker.loading": "Loading SideCars...",
+  "sidecars.picker.subtitle": "Choose an available SideCar to open in a new tab.",
+  "sidecars.picker.empty": "No port-based SideCars are available yet.",
+  "sidecars.picker.close": "Close",
+  "sidecars.open.errorTitle": "Unable to open SideCar",
+  "sidecars.open.notFound": "SideCar not found.",
+  "sidecars.open.notRunning": "SideCar is not reachable on its configured port.",
+  "sidecars.back": "Back",
+  "sidecars.refresh": "Refresh",
+  "sidecars.path": "Path",
+  "sidecars.go": "Go",
 } as const

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

@@ -15,17 +15,17 @@ export const commandMessages = {
   "commands.newInstance.description": "פתח בורר תיקיות ליצירת מופע חדש",
   "commands.newInstance.keywords": "תיקייה, פרויקט, סביבת עבודה",
 
-  "commands.closeInstance.label": "סגור מופע",
-  "commands.closeInstance.description": "עצור את השרת של המופע הנוכחי",
-  "commands.closeInstance.keywords": "עצור, סגור",
+  "commands.closeInstance.label": "סגור לשונית",
+  "commands.closeInstance.description": "סגור את הלשונית העליונה הנוכחית",
+  "commands.closeInstance.keywords": "עצור, סגור, לשונית",
 
-  "commands.nextInstance.label": "מופע הבא",
-  "commands.nextInstance.description": "עבור למופע הבא",
-  "commands.nextInstance.keywords": "החלף, נווט",
+  "commands.nextInstance.label": "הלשונית הבאה",
+  "commands.nextInstance.description": "עבור ללשונית העליונה הבאה",
+  "commands.nextInstance.keywords": "החלף, נווט, לשונית",
 
-  "commands.previousInstance.label": "מופע קודם",
-  "commands.previousInstance.description": "עבור למופע הקודם",
-  "commands.previousInstance.keywords": "החלף, נווט",
+  "commands.previousInstance.label": "הלשונית הקודמת",
+  "commands.previousInstance.description": "עבור ללשונית העליונה הקודמת",
+  "commands.previousInstance.keywords": "החלף, נווט, לשונית",
 
   "commands.newSession.label": "סשן חדש",
   "commands.newSession.description": "צור סשן הורה חדש",

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,32 @@ 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": "לא ניתן היה להתחבר לשרת המרוחק.",
+  "folderSelection.sidecars.button": "Open SideCar",
 } as const

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 וקלט.",
@@ -185,4 +193,40 @@ export const settingsMessages = {
   "settings.speech.save.saved": "נשמר",
   "settings.speech.save.unsaved": "יש שינויים שלא נשמרו",
   "settings.speech.save.error": "השמירה נכשלה",
+  "settings.nav.sidecars": "SideCars",
+  "settings.section.sidecars.eyebrow": "Server services",
+  "settings.section.sidecars.title": "SideCars",
+  "settings.section.sidecars.subtitle": "Configure local services listening on fixed ports that the server can proxy into tabs.",
+  "sidecars.form.name": "Name",
+  "sidecars.form.validation": "Enter a valid SideCar name and port.",
+  "sidecars.form.port": "Port",
+  "sidecars.form.insecure": "Use HTTP",
+  "sidecars.form.protocol": "Protocol",
+  "sidecars.form.protocol.help": "Choose how the proxy should connect to the local service.",
+  "sidecars.form.protocol.https": "HTTPS",
+  "sidecars.form.protocol.http": "HTTP",
+  "sidecars.form.prefixMode": "Prefix mode",
+  "sidecars.form.prefixMode.help": "Choose whether the SideCar receives the public /sidecars path prefix.",
+  "sidecars.form.prefixMode.strip": "Strip prefix",
+  "sidecars.form.prefixMode.preserve": "Preserve prefix",
+  "sidecars.form.add": "Add SideCar",
+  "sidecars.kind.port": "Port",
+  "sidecars.status.running": "Running",
+  "sidecars.status.stopped": "Stopped",
+  "sidecars.basePath": "Base path",
+  "sidecars.settings.listTitle": "Configured SideCars",
+  "sidecars.settings.listSubtitle": "Review the port-based SideCars available in the picker.",
+  "sidecars.settings.empty": "No SideCars configured yet.",
+  "sidecars.picker.title": "Open SideCar",
+  "sidecars.picker.loading": "Loading SideCars...",
+  "sidecars.picker.subtitle": "Choose an available SideCar to open in a new tab.",
+  "sidecars.picker.empty": "No port-based SideCars are available yet.",
+  "sidecars.picker.close": "Close",
+  "sidecars.open.errorTitle": "Unable to open SideCar",
+  "sidecars.open.notFound": "SideCar not found.",
+  "sidecars.open.notRunning": "SideCar is not reachable on its configured port.",
+  "sidecars.back": "Back",
+  "sidecars.refresh": "Refresh",
+  "sidecars.path": "Path",
+  "sidecars.go": "Go",
 } as const

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

@@ -15,17 +15,17 @@ export const commandMessages = {
   "commands.newInstance.description": "フォルダ選択を開いて新しいインスタンスを作成",
   "commands.newInstance.keywords": "フォルダ, プロジェクト, ワークスペース, folder, project, workspace",
 
-  "commands.closeInstance.label": "インスタンスを閉じる",
-  "commands.closeInstance.description": "現在のインスタンスのサーバーを停止",
-  "commands.closeInstance.keywords": "停止, 終了, 閉じる, stop, quit, close",
+  "commands.closeInstance.label": "タブを閉じる",
+  "commands.closeInstance.description": "現在のトップレベルタブを閉じる",
+  "commands.closeInstance.keywords": "閉じる, タブ, stop, quit, close",
 
-  "commands.nextInstance.label": "次のインスタンス",
-  "commands.nextInstance.description": "次のインスタンスタブへ切り替え",
-  "commands.nextInstance.keywords": "切り替え, 移動, switch, navigate",
+  "commands.nextInstance.label": "次のタブ",
+  "commands.nextInstance.description": "次のトップレベルタブへ切り替え",
+  "commands.nextInstance.keywords": "切り替え, 移動, タブ, switch, navigate",
 
-  "commands.previousInstance.label": "前のインスタンス",
-  "commands.previousInstance.description": "前のインスタンスタブへ切り替え",
-  "commands.previousInstance.keywords": "切り替え, 移動, switch, navigate",
+  "commands.previousInstance.label": "前のタブ",
+  "commands.previousInstance.description": "前のトップレベルタブへ切り替え",
+  "commands.previousInstance.keywords": "切り替え, 移動, タブ, switch, navigate",
 
   "commands.newSession.label": "新しいセッション",
   "commands.newSession.description": "新しい親セッションを作成",

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,32 @@ 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": "リモートサーバーに接続できませんでした。",
+  "folderSelection.sidecars.button": "Open SideCar",
 } as const

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": "メッセージ、差分、入力の既定値。",
@@ -186,4 +194,40 @@ export const settingsMessages = {
   "settings.speech.save.saved": "保存済み",
   "settings.speech.save.unsaved": "未保存の変更",
   "settings.speech.save.error": "保存に失敗しました",
+  "settings.nav.sidecars": "SideCars",
+  "settings.section.sidecars.eyebrow": "Server services",
+  "settings.section.sidecars.title": "SideCars",
+  "settings.section.sidecars.subtitle": "Configure local services listening on fixed ports that the server can proxy into tabs.",
+  "sidecars.form.name": "Name",
+  "sidecars.form.validation": "Enter a valid SideCar name and port.",
+  "sidecars.form.port": "Port",
+  "sidecars.form.insecure": "Use HTTP",
+  "sidecars.form.protocol": "Protocol",
+  "sidecars.form.protocol.help": "Choose how the proxy should connect to the local service.",
+  "sidecars.form.protocol.https": "HTTPS",
+  "sidecars.form.protocol.http": "HTTP",
+  "sidecars.form.prefixMode": "Prefix mode",
+  "sidecars.form.prefixMode.help": "Choose whether the SideCar receives the public /sidecars path prefix.",
+  "sidecars.form.prefixMode.strip": "Strip prefix",
+  "sidecars.form.prefixMode.preserve": "Preserve prefix",
+  "sidecars.form.add": "Add SideCar",
+  "sidecars.kind.port": "Port",
+  "sidecars.status.running": "Running",
+  "sidecars.status.stopped": "Stopped",
+  "sidecars.basePath": "Base path",
+  "sidecars.settings.listTitle": "Configured SideCars",
+  "sidecars.settings.listSubtitle": "Review the port-based SideCars available in the picker.",
+  "sidecars.settings.empty": "No SideCars configured yet.",
+  "sidecars.picker.title": "Open SideCar",
+  "sidecars.picker.loading": "Loading SideCars...",
+  "sidecars.picker.subtitle": "Choose an available SideCar to open in a new tab.",
+  "sidecars.picker.empty": "No port-based SideCars are available yet.",
+  "sidecars.picker.close": "Close",
+  "sidecars.open.errorTitle": "Unable to open SideCar",
+  "sidecars.open.notFound": "SideCar not found.",
+  "sidecars.open.notRunning": "SideCar is not reachable on its configured port.",
+  "sidecars.back": "Back",
+  "sidecars.refresh": "Refresh",
+  "sidecars.path": "Path",
+  "sidecars.go": "Go",
 } as const

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

@@ -15,17 +15,17 @@ export const commandMessages = {
   "commands.newInstance.description": "Открыть выбор папки для создания нового экземпляра",
   "commands.newInstance.keywords": "папка, проект, рабочее пространство",
 
-  "commands.closeInstance.label": "Закрыть экземпляр",
-  "commands.closeInstance.description": "Остановить сервер текущего экземпляра",
-  "commands.closeInstance.keywords": "остановить, выйти, закрыть",
+  "commands.closeInstance.label": "Закрыть вкладку",
+  "commands.closeInstance.description": "Закрыть текущую верхнеуровневую вкладку",
+  "commands.closeInstance.keywords": "остановить, выйти, закрыть, вкладка",
 
-  "commands.nextInstance.label": "Следующий экземпляр",
-  "commands.nextInstance.description": "Переключиться на следующую вкладку экземпляра",
-  "commands.nextInstance.keywords": "переключить, навигация",
+  "commands.nextInstance.label": "Следующая вкладка",
+  "commands.nextInstance.description": "Переключиться на следующую верхнеуровневую вкладку",
+  "commands.nextInstance.keywords": "переключить, навигация, вкладка",
 
-  "commands.previousInstance.label": "Предыдущий экземпляр",
-  "commands.previousInstance.description": "Переключиться на предыдущую вкладку экземпляра",
-  "commands.previousInstance.keywords": "переключить, навигация",
+  "commands.previousInstance.label": "Предыдущая вкладка",
+  "commands.previousInstance.description": "Переключиться на предыдущую верхнеуровневую вкладку",
+  "commands.previousInstance.keywords": "переключить, навигация, вкладка",
 
   "commands.newSession.label": "Новая сессия",
   "commands.newSession.description": "Создать новую родительскую сессию",

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,32 @@ 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": "Не удалось подключиться к удаленному серверу.",
+  "folderSelection.sidecars.button": "Open SideCar",
 } as const

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": "Значения по умолчанию для сообщений, диффов и ввода.",
@@ -186,4 +194,40 @@ export const settingsMessages = {
   "settings.speech.save.saved": "Сохранено",
   "settings.speech.save.unsaved": "Есть несохранённые изменения",
   "settings.speech.save.error": "Не удалось сохранить",
+  "settings.nav.sidecars": "SideCars",
+  "settings.section.sidecars.eyebrow": "Server services",
+  "settings.section.sidecars.title": "SideCars",
+  "settings.section.sidecars.subtitle": "Configure local services listening on fixed ports that the server can proxy into tabs.",
+  "sidecars.form.name": "Name",
+  "sidecars.form.validation": "Enter a valid SideCar name and port.",
+  "sidecars.form.port": "Port",
+  "sidecars.form.insecure": "Use HTTP",
+  "sidecars.form.protocol": "Protocol",
+  "sidecars.form.protocol.help": "Choose how the proxy should connect to the local service.",
+  "sidecars.form.protocol.https": "HTTPS",
+  "sidecars.form.protocol.http": "HTTP",
+  "sidecars.form.prefixMode": "Prefix mode",
+  "sidecars.form.prefixMode.help": "Choose whether the SideCar receives the public /sidecars path prefix.",
+  "sidecars.form.prefixMode.strip": "Strip prefix",
+  "sidecars.form.prefixMode.preserve": "Preserve prefix",
+  "sidecars.form.add": "Add SideCar",
+  "sidecars.kind.port": "Port",
+  "sidecars.status.running": "Running",
+  "sidecars.status.stopped": "Stopped",
+  "sidecars.basePath": "Base path",
+  "sidecars.settings.listTitle": "Configured SideCars",
+  "sidecars.settings.listSubtitle": "Review the port-based SideCars available in the picker.",
+  "sidecars.settings.empty": "No SideCars configured yet.",
+  "sidecars.picker.title": "Open SideCar",
+  "sidecars.picker.loading": "Loading SideCars...",
+  "sidecars.picker.subtitle": "Choose an available SideCar to open in a new tab.",
+  "sidecars.picker.empty": "No port-based SideCars are available yet.",
+  "sidecars.picker.close": "Close",
+  "sidecars.open.errorTitle": "Unable to open SideCar",
+  "sidecars.open.notFound": "SideCar not found.",
+  "sidecars.open.notRunning": "SideCar is not reachable on its configured port.",
+  "sidecars.back": "Back",
+  "sidecars.refresh": "Refresh",
+  "sidecars.path": "Path",
+  "sidecars.go": "Go",
 } as const

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

@@ -15,17 +15,17 @@ export const commandMessages = {
   "commands.newInstance.description": "打开文件夹选择器以创建新实例",
   "commands.newInstance.keywords": "folder, project, workspace, 文件夹, 项目, 工作区",
 
-  "commands.closeInstance.label": "关闭实例",
-  "commands.closeInstance.description": "停止当前实例的服务器",
-  "commands.closeInstance.keywords": "stop, quit, close, 停止, 退出, 关闭",
+  "commands.closeInstance.label": "关闭标签页",
+  "commands.closeInstance.description": "关闭当前顶层标签页",
+  "commands.closeInstance.keywords": "stop, quit, close, 停止, 退出, 关闭, 标签",
 
-  "commands.nextInstance.label": "下一个实例",
-  "commands.nextInstance.description": "切换到下一个实例标签页",
-  "commands.nextInstance.keywords": "switch, navigate, 切换, 导航",
+  "commands.nextInstance.label": "下一个标签页",
+  "commands.nextInstance.description": "切换到下一个顶层标签页",
+  "commands.nextInstance.keywords": "switch, navigate, 切换, 导航, 标签",
 
-  "commands.previousInstance.label": "上一个实例",
-  "commands.previousInstance.description": "切换到上一个实例标签页",
-  "commands.previousInstance.keywords": "switch, navigate, 切换, 导航",
+  "commands.previousInstance.label": "上一个标签页",
+  "commands.previousInstance.description": "切换到上一个顶层标签页",
+  "commands.previousInstance.keywords": "switch, navigate, 切换, 导航, 标签",
 
   "commands.newSession.label": "新建会话",
   "commands.newSession.description": "创建新的父会话",

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,32 @@ 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": "无法连接到远程服务器。",
+  "folderSelection.sidecars.button": "Open SideCar",
 } as const

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": "消息、差异与输入的默认值。",
@@ -186,4 +194,40 @@ export const settingsMessages = {
   "settings.speech.save.saved": "已保存",
   "settings.speech.save.unsaved": "有未保存的更改",
   "settings.speech.save.error": "保存失败",
+  "settings.nav.sidecars": "SideCars",
+  "settings.section.sidecars.eyebrow": "Server services",
+  "settings.section.sidecars.title": "SideCars",
+  "settings.section.sidecars.subtitle": "Configure local services listening on fixed ports that the server can proxy into tabs.",
+  "sidecars.form.name": "Name",
+  "sidecars.form.validation": "Enter a valid SideCar name and port.",
+  "sidecars.form.port": "Port",
+  "sidecars.form.insecure": "Use HTTP",
+  "sidecars.form.protocol": "Protocol",
+  "sidecars.form.protocol.help": "Choose how the proxy should connect to the local service.",
+  "sidecars.form.protocol.https": "HTTPS",
+  "sidecars.form.protocol.http": "HTTP",
+  "sidecars.form.prefixMode": "Prefix mode",
+  "sidecars.form.prefixMode.help": "Choose whether the SideCar receives the public /sidecars path prefix.",
+  "sidecars.form.prefixMode.strip": "Strip prefix",
+  "sidecars.form.prefixMode.preserve": "Preserve prefix",
+  "sidecars.form.add": "Add SideCar",
+  "sidecars.kind.port": "Port",
+  "sidecars.status.running": "Running",
+  "sidecars.status.stopped": "Stopped",
+  "sidecars.basePath": "Base path",
+  "sidecars.settings.listTitle": "Configured SideCars",
+  "sidecars.settings.listSubtitle": "Review the port-based SideCars available in the picker.",
+  "sidecars.settings.empty": "No SideCars configured yet.",
+  "sidecars.picker.title": "Open SideCar",
+  "sidecars.picker.loading": "Loading SideCars...",
+  "sidecars.picker.subtitle": "Choose an available SideCar to open in a new tab.",
+  "sidecars.picker.empty": "No port-based SideCars are available yet.",
+  "sidecars.picker.close": "Close",
+  "sidecars.open.errorTitle": "Unable to open SideCar",
+  "sidecars.open.notFound": "SideCar not found.",
+  "sidecars.open.notRunning": "SideCar is not reachable on its configured port.",
+  "sidecars.back": "Back",
+  "sidecars.refresh": "Refresh",
+  "sidecars.path": "Path",
+  "sidecars.go": "Go",
 } as const

packages/ui/src/lib/keyboard.ts

@@ -1,11 +1,12 @@
-import { instances, activeInstanceId, setActiveInstanceId } from "../stores/instances"
+import { activeInstanceId } from "../stores/instances"
+import { selectAppTabByIndex } from "../stores/app-tabs"
 import { activeSessionId, setActiveSession, getSessions, activeParentSessionId } from "../stores/sessions"
 import { keyboardRegistry } from "./keyboard-registry"
 import { isMac } from "./keyboard-utils"
 
 export function setupTabKeyboardShortcuts(
   handleNewInstance: () => void,
-  handleCloseInstance: (instanceId: string) => void,
+  handleCloseActiveTab: () => Promise<void>,
   handleNewSession: (instanceId: string) => void,
   handleCloseSession: (instanceId: string, sessionId: string) => void,
   handleCommandPalette: () => void,
@@ -35,11 +36,7 @@ export function setupTabKeyboardShortcuts(
 
     if ((e.metaKey || e.ctrlKey) && !e.shiftKey && e.key >= "1" && e.key <= "9") {
       e.preventDefault()
-      const index = parseInt(e.key) - 1
-      const instanceIds = Array.from(instances().keys())
-      if (instanceIds[index]) {
-        setActiveInstanceId(instanceIds[index])
-      }
+      selectAppTabByIndex(parseInt(e.key) - 1)
     }
 
     if ((e.metaKey || e.ctrlKey) && e.shiftKey && e.key >= "1" && e.key <= "9") {
@@ -67,10 +64,7 @@ export function setupTabKeyboardShortcuts(
 
     if ((e.metaKey || e.ctrlKey) && !e.shiftKey && e.key.toLowerCase() === "w") {
       e.preventDefault()
-      const instanceId = activeInstanceId()
-      if (instanceId) {
-        handleCloseInstance(instanceId)
-      }
+      void handleCloseActiveTab()
     }
 
     if ((e.metaKey || e.ctrlKey) && e.shiftKey && e.key.toLowerCase() === "w") {

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/shortcuts/navigation.ts

@@ -1,5 +1,6 @@
 import { keyboardRegistry } from "../keyboard-registry"
-import { instances, activeInstanceId, setActiveInstanceId } from "../../stores/instances"
+import { activeInstanceId } from "../../stores/instances"
+import { selectNextAppTab, selectPreviousAppTab } from "../../stores/app-tabs"
 import { activeSessionId, getVisibleSessionIds, setActiveSession, setActiveSessionFromList } from "../../stores/sessions"
 
 export function registerNavigationShortcuts() {
@@ -11,14 +12,8 @@ export function registerNavigationShortcuts() {
     id: "instance-prev",
     key: "[",
     modifiers: { ctrl: !isMac(), meta: isMac() },
-    handler: () => {
-      const ids = Array.from(instances().keys())
-      if (ids.length <= 1) return
-      const current = ids.indexOf(activeInstanceId() || "")
-      const prev = current <= 0 ? ids.length - 1 : current - 1
-      if (ids[prev]) setActiveInstanceId(ids[prev])
-    },
-    description: "previous instance",
+    handler: () => selectPreviousAppTab(),
+    description: "previous tab",
     context: "global",
   })
 
@@ -26,14 +21,8 @@ export function registerNavigationShortcuts() {
     id: "instance-next",
     key: "]",
     modifiers: { ctrl: !isMac(), meta: isMac() },
-    handler: () => {
-      const ids = Array.from(instances().keys())
-      if (ids.length <= 1) return
-      const current = ids.indexOf(activeInstanceId() || "")
-      const next = (current + 1) % ids.length
-      if (ids[next]) setActiveInstanceId(ids[next])
-    },
-    description: "next instance",
+    handler: () => selectNextAppTab(),
+    description: "next tab",
     context: "global",
   })
 

packages/ui/src/stores/app-tabs.ts

@@ -0,0 +1,172 @@
+import { createMemo, createSignal } from "solid-js"
+import type { Instance } from "../types/instance"
+import { activeInstanceId, instances, setActiveInstanceId } from "./instances"
+import { activeSidecarToken, setActiveSidecarToken, sidecarTabs, type SideCarTabRecord } from "./sidecars"
+
+export interface InstanceAppTab {
+  id: string
+  kind: "instance"
+  instance: Instance
+}
+
+export interface SideCarAppTab {
+  id: string
+  kind: "sidecar"
+  sidecarTab: SideCarTabRecord
+}
+
+export type AppTabRecord = InstanceAppTab | SideCarAppTab
+
+function getInstanceAppTabId(instanceId: string): string {
+  return `instance:${instanceId}`
+}
+
+function getSidecarAppTabId(token: string): string {
+  return `sidecar:${token}`
+}
+
+function getAdjacentAppTabId(tabId: string): string | null {
+  const tabs = appTabs()
+  const index = tabs.findIndex((tab) => tab.id === tabId)
+  if (index < 0) return activeAppTabId()
+  return tabs[index - 1]?.id ?? tabs[index + 1]?.id ?? null
+}
+
+function getPreferredTabId(): string | null {
+  const sidecarToken = activeSidecarToken()
+  if (sidecarToken) {
+    return getSidecarAppTabId(sidecarToken)
+  }
+
+  const instanceId = activeInstanceId()
+  if (instanceId) {
+    return getInstanceAppTabId(instanceId)
+  }
+
+  return null
+}
+
+const [activeAppTabId, setActiveAppTabId] = createSignal<string | null>(null)
+const [tabOrder, setTabOrder] = createSignal<string[]>([])
+
+function rememberTabOrder(tabId: string) {
+  setTabOrder((prev) => (prev.includes(tabId) ? prev : [...prev, tabId]))
+}
+
+const appTabs = createMemo<AppTabRecord[]>(() => {
+  const currentTabs = [
+    ...Array.from(instances().values()).map((instance) => ({
+      id: getInstanceAppTabId(instance.id),
+      kind: "instance" as const,
+      instance,
+    })),
+    ...sidecarTabs().map((sidecarTab) => ({
+      id: getSidecarAppTabId(sidecarTab.token),
+      kind: "sidecar" as const,
+      sidecarTab,
+    })),
+  ]
+
+  const tabsById = new Map(currentTabs.map((tab) => [tab.id, tab]))
+  const orderedIds = tabOrder().filter((tabId) => tabsById.has(tabId))
+  const missingIds = currentTabs.map((tab) => tab.id).filter((tabId) => !orderedIds.includes(tabId))
+
+  return [...orderedIds, ...missingIds].map((tabId) => tabsById.get(tabId)!).filter(Boolean)
+})
+
+const activeAppTab = createMemo(() => appTabs().find((tab) => tab.id === activeAppTabId()) ?? null)
+
+function getAppTabById(tabId: string | null): AppTabRecord | null {
+  if (!tabId) return null
+  return appTabs().find((tab) => tab.id === tabId) ?? null
+}
+
+function selectAppTab(tabId: string | null) {
+  if (!tabId) {
+    setActiveAppTabId(null)
+    setActiveSidecarToken(null)
+    return
+  }
+
+  const tab = appTabs().find((entry) => entry.id === tabId)
+  if (!tab) return
+
+  rememberTabOrder(tab.id)
+  setActiveAppTabId(tab.id)
+
+  if (tab.kind === "instance") {
+    setActiveSidecarToken(null)
+    setActiveInstanceId(tab.instance.id)
+    return
+  }
+
+  setActiveInstanceId(null)
+  setActiveSidecarToken(tab.sidecarTab.token)
+}
+
+function selectInstanceTab(instanceId: string) {
+  selectAppTab(getInstanceAppTabId(instanceId))
+}
+
+function selectSidecarTab(token: string) {
+  selectAppTab(getSidecarAppTabId(token))
+}
+
+function selectNextAppTab() {
+  const tabs = appTabs()
+  if (tabs.length <= 1) return
+
+  const current = tabs.findIndex((tab) => tab.id === activeAppTabId())
+  const nextIndex = current < 0 ? 0 : (current + 1) % tabs.length
+  const nextTab = tabs[nextIndex]
+  if (nextTab) selectAppTab(nextTab.id)
+}
+
+function selectPreviousAppTab() {
+  const tabs = appTabs()
+  if (tabs.length <= 1) return
+
+  const current = tabs.findIndex((tab) => tab.id === activeAppTabId())
+  const previousIndex = current <= 0 ? tabs.length - 1 : current - 1
+  const previousTab = tabs[previousIndex]
+  if (previousTab) selectAppTab(previousTab.id)
+}
+
+function selectAppTabByIndex(index: number) {
+  const tab = appTabs()[index]
+  if (tab) selectAppTab(tab.id)
+}
+
+function ensureActiveAppTab(preferredTabId?: string | null) {
+  const tabs = appTabs()
+  const current = activeAppTabId()
+
+  if (current && tabs.some((tab) => tab.id === current)) {
+    return
+  }
+
+  const candidateId = preferredTabId ?? getPreferredTabId()
+  if (candidateId && tabs.some((tab) => tab.id === candidateId)) {
+    selectAppTab(candidateId)
+    return
+  }
+
+  selectAppTab(tabs[0]?.id ?? null)
+}
+
+export {
+  activeAppTabId,
+  activeAppTab,
+  appTabs,
+  ensureActiveAppTab,
+  getAdjacentAppTabId,
+  getAppTabById,
+  getInstanceAppTabId,
+  getSidecarAppTabId,
+  selectAppTab,
+  selectAppTabByIndex,
+  selectInstanceTab,
+  selectNextAppTab,
+  selectPreviousAppTab,
+  selectSidecarTab,
+}

packages/ui/src/stores/instances.ts

@@ -36,6 +36,7 @@ import { clearCacheForInstance } from "../lib/global-cache"
 import { getLogger } from "../lib/logger"
 import { mergeInstanceMetadata, clearInstanceMetadata } from "./instance-metadata"
 import { showWorkspaceLaunchError } from "./launch-errors"
+import { activeSidecarToken } from "./sidecars"
 
 const log = getLogger("api")
 
@@ -109,6 +110,8 @@ function workspaceDescriptorToInstance(descriptor: WorkspaceDescriptor): Instanc
 }
 
 function ensureActiveInstanceSelected(): void {
+  if (activeSidecarToken()) return
+
   const current = activeInstanceId()
   const instanceMap = instances()
   if (current && instanceMap.has(current)) return

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/stores/settings-screen.ts

@@ -1,6 +1,6 @@
 import { createSignal } from "solid-js"
 
-export type SettingsSectionId = "appearance" | "notifications" | "remote" | "speech" | "opencode"
+export type SettingsSectionId = "appearance" | "notifications" | "remote" | "speech" | "opencode" | "sidecars"
 
 const [settingsOpen, setSettingsOpen] = createSignal(false)
 const [activeSettingsSection, setActiveSettingsSection] = createSignal<SettingsSectionId>("appearance")

packages/ui/src/stores/sidecars.ts

@@ -0,0 +1,149 @@
+import { createMemo, createSignal } from "solid-js"
+import { serverApi } from "../lib/api-client"
+import { tGlobal } from "../lib/i18n"
+import { serverEvents } from "../lib/server-events"
+import { getLogger } from "../lib/logger"
+import type { SideCar } from "../../../server/src/api-types"
+
+const log = getLogger("api")
+
+export interface SideCarTabRecord {
+  token: string
+  sidecarId: string
+  name: string
+  port?: number
+  prefixMode: SideCar["prefixMode"]
+  proxyBasePath: string
+  shellUrl: string
+}
+
+function buildSidecarShellUrl(sidecarId: string): string {
+  return `/sidecars/${encodeURIComponent(sidecarId)}/`
+}
+
+const [sidecars, setSidecars] = createSignal<Map<string, SideCar>>(new Map())
+const [sidecarTabs, setSidecarTabs] = createSignal<SideCarTabRecord[]>([])
+const [activeSidecarToken, setActiveSidecarToken] = createSignal<string | null>(null)
+const [sidecarsLoading, setSidecarsLoading] = createSignal(false)
+
+let loadPromise: Promise<void> | null = null
+
+async function ensureSidecarsLoaded() {
+  if (loadPromise) return loadPromise
+  setSidecarsLoading(true)
+  loadPromise = serverApi.fetchSidecars()
+    .then((result) => {
+      setSidecars(new Map(result.sidecars.map((sidecar) => [sidecar.id, sidecar])))
+    })
+    .catch((error) => {
+      log.error("Failed to load SideCars", error)
+    })
+    .finally(() => {
+      setSidecarsLoading(false)
+      loadPromise = null
+    })
+  return loadPromise
+}
+
+function upsertSidecar(sidecar: SideCar) {
+  setSidecars((prev) => {
+    const next = new Map(prev)
+    next.set(sidecar.id, sidecar)
+    return next
+  })
+
+  setSidecarTabs((prev) =>
+    prev.map((tab) =>
+      tab.sidecarId === sidecar.id
+        ? {
+            ...tab,
+            name: sidecar.name,
+            port: sidecar.port,
+            prefixMode: sidecar.prefixMode,
+            proxyBasePath: buildSidecarShellUrl(sidecar.id).replace(/\/$/, ""),
+            shellUrl: buildSidecarShellUrl(sidecar.id),
+          }
+        : tab,
+    ),
+  )
+}
+
+function removeSidecar(sidecarId: string) {
+  setSidecars((prev) => {
+    const next = new Map(prev)
+    next.delete(sidecarId)
+    return next
+  })
+
+  setSidecarTabs((prev) => {
+    const next = prev.filter((tab) => tab.sidecarId !== sidecarId)
+    if (!next.some((tab) => tab.token === activeSidecarToken())) {
+      setActiveSidecarToken(next[0]?.token ?? null)
+    }
+    return next
+  })
+}
+
+serverEvents.on("sidecar.updated", (event) => {
+  if (event.type !== "sidecar.updated") return
+  upsertSidecar(event.sidecar)
+})
+
+serverEvents.on("sidecar.removed", (event) => {
+  if (event.type !== "sidecar.removed") return
+  removeSidecar(event.sidecarId)
+})
+
+async function openSidecarTab(sidecarId: string) {
+  await ensureSidecarsLoaded()
+
+  const sidecar = sidecars().get(sidecarId)
+  if (!sidecar) {
+    throw new Error(tGlobal("sidecars.open.notFound"))
+  }
+  if (sidecar.status !== "running") {
+    throw new Error(tGlobal("sidecars.open.notRunning"))
+  }
+
+  const token = `${sidecarId}:${Date.now().toString(36)}`
+  const nextTab: SideCarTabRecord = {
+    token,
+    sidecarId,
+    name: sidecar.name,
+    port: sidecar.port,
+    prefixMode: sidecar.prefixMode,
+    proxyBasePath: buildSidecarShellUrl(sidecarId).replace(/\/$/, ""),
+    shellUrl: buildSidecarShellUrl(sidecarId),
+  }
+
+  setSidecarTabs((prev) => [...prev, nextTab])
+  setActiveSidecarToken(nextTab.token)
+  return nextTab
+}
+
+function closeSidecarTab(token: string) {
+  setSidecarTabs((prev) => {
+    const index = prev.findIndex((tab) => tab.token === token)
+    if (index < 0) return prev
+    const next = prev.filter((tab) => tab.token !== token)
+    if (activeSidecarToken() === token) {
+      const fallback = next[index - 1] ?? next[index] ?? null
+      setActiveSidecarToken(fallback?.token ?? null)
+    }
+    return next
+  })
+}
+
+const activeSidecarTab = createMemo(() => sidecarTabs().find((tab) => tab.token === activeSidecarToken()) ?? null)
+
+export {
+  sidecars,
+  sidecarTabs,
+  activeSidecarToken,
+  activeSidecarTab,
+  sidecarsLoading,
+  setActiveSidecarToken,
+  ensureSidecarsLoaded,
+  openSidecarTab,
+  closeSidecarTab,
+}

packages/ui/src/styles/panels/tabs.css

@@ -154,6 +154,31 @@
   ring-offset-color: var(--surface-base);
 }
 
+.tab-pill {
+  @apply inline-flex items-center gap-1 px-3 py-2 rounded-t-md max-w-[220px] text-sm;
+  background-color: var(--tab-inactive-bg);
+  color: var(--tab-inactive-text);
+  border-bottom: 2px solid var(--tab-active-bg);
+}
+
+.tab-pill-active {
+  background-color: var(--tab-active-bg);
+  color: var(--tab-active-text);
+  border-bottom-color: var(--accent-primary);
+}
+
+.tab-pill-button {
+  @apply truncate;
+}
+
+.tab-pill-close {
+  @apply inline-flex items-center justify-center rounded w-5 h-5 text-xs;
+}
+
+.tab-pill-close:hover {
+  background-color: var(--new-tab-hover-bg);
+}
+
 /* Session tabs */
 .session-tab-base {
   @apply inline-flex items-center gap-2 px-3 py-1.5 rounded-t-md max-w-[150px] transition-colors text-sm;

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 {