fix(ui): split message header into two rows

Move assistant meta below speaker label and bump speaker label size.

.github/workflows/release-ui.yml

@@ -1,7 +1,7 @@
+name: Release UI
+
 on:
-  push:
-    branches:
-      - main
+  workflow_call: {}
   workflow_dispatch: {}
 
 permissions:
@@ -12,7 +12,8 @@ env:
 
 jobs:
   release-ui:
-    if: ${{ github.ref == 'refs/heads/main' }}
+    # Automated via reusable call (main releases); manual runs allowed on dev/main.
+    if: ${{ github.event_name == 'workflow_call' || github.ref == 'refs/heads/dev' || github.ref == 'refs/heads/main' }}
     runs-on: ubuntu-24.04
     steps:
       - name: Checkout
@@ -27,6 +28,9 @@ jobs:
       - name: Install dependencies
         run: npm ci --workspaces --include=optional
 
+      - name: Ensure rollup native binary
+        run: npm install @rollup/rollup-linux-x64-gnu --no-save
+
       - name: Install Cloudflare worker deps
         run: npm ci
         working-directory: packages/cloudflare

.github/workflows/reusable-release.yml

@@ -69,6 +69,13 @@ jobs:
       release_name: ${{ needs.prepare-release.outputs.release_name }}
     secrets: inherit
 
+  release-ui:
+    needs: prepare-release
+    permissions:
+      contents: read
+    uses: ./.github/workflows/release-ui.yml
+    secrets: inherit
+
   publish-server:
     needs:
       - prepare-release

.opencode/commands/release-notes.md

@@ -0,0 +1,7 @@
+---
+description: Creates release notes
+agent: build
+---
+
+Check how I do prepare release notes here - https://github.com/NeuralNomadsAI/CodeNomad/releases/tag/v0.7.0
+Use the same format to create release notes from users perspective for new release by looking at changes from last tagged release to tip of branch

AGENTS.md

@@ -15,6 +15,35 @@
 - Prefer composable primitives (signals, hooks, utilities) over deep inheritance or implicit global state.
 - When adding platform integrations (SSE, IPC, SDK), isolate them in thin adapters that surface typed events/actions.
 
+## Multi-Language Support (i18n)
+
+The UI uses a small custom i18n layer (no ICU/messageformat). When building features, never hardcode user-visible strings.
+
+- **Runtime API:** use `useI18n()` in components (`const { t } = useI18n();`) and `tGlobal(...)` in stores/non-component code.
+  - Implementation: `packages/ui/src/lib/i18n/index.tsx`
+- **Where messages live:** `packages/ui/src/lib/i18n/messages/<locale>/` as TypeScript objects (`"flat.dot.keys": "string"`).
+  - Each locale has an `index.ts` that merges message parts; duplicate keys throw at build time.
+  - Merge helper: `packages/ui/src/lib/i18n/messages/merge.ts`
+- **Adding a new string:** add it to the appropriate `.../messages/en/*.ts` part file, then add the same key to each other locale’s corresponding file.
+  - Missing translations fall back to English (and finally to the key), so gaps can be easy to miss.
+- **Interpolation:** placeholders are simple `{name}` replacements (word characters only). Avoid placeholders like `{file-name}`.
+- **Pluralization:** handle manually via separate keys like `something.one` / `something.other` and choose in code.
+- **Adding a new language:** add a new `messages/<locale>/` folder + `index.ts`, register it in `packages/ui/src/lib/i18n/index.tsx`, and add it to the language picker in `packages/ui/src/components/folder-selection-view.tsx`.
+- **Locale persistence:** the selected locale is stored in app preferences (`locale`) and persisted via the server config (default `~/.config/codenomad/config.json`).
+- **Avoid English-only paths:** do not import `enMessages` directly in feature code; always go through `t(...)` so locale changes apply.
+
+## File Length Guidelines (Highlight Only)
+
+We track file size as a refactoring signal. When you touch or create files, highlight oversized files so the team can plan refactors when time permits.
+
+- Source files: warn after ~500 lines; target limit ~800 lines
+- Test files: highlight after ~1000 lines
+
+Behavior for agents:
+- Do not refactor solely to satisfy these thresholds.
+- When a change touches a file that exceeds the warning/limit, mention it in your final response and include the file path and approximate line count.
+- When creating new files, aim to stay under the thresholds unless there's a clear reason.
+
 ## Tooling Preferences
 - Use the `edit` tool for modifying existing files; prefer it over other editing methods.
 - Use the `write` tool only when creating new files from scratch.

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Neural Nomads
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package.json

@@ -1,8 +1,9 @@
 {
   "name": "codenomad-workspace",
-  "version": "0.7.6",
+  "version": "0.10.3",
   "private": true,
   "description": "CodeNomad monorepo workspace",
+  "license": "MIT",
   "workspaces": {
     "packages": [
       "packages/server",

packages/cloudflare/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@codenomad/ui-host-worker",
   "private": true,
+  "license": "MIT",
   "type": "module",
   "scripts": {
     "build:manifest": "node ./scripts/build-manifest.mjs",

packages/cloudflare/release-config.json

@@ -1,4 +1,4 @@
 {
-  "minServerVersion": "0.7.5",
+  "minServerVersion": "0.10.3",
   "latestServerUrl": "https://github.com/NeuralNomadsAI/CodeNomad/releases/latest"
 }

packages/cloudflare/scripts/build-manifest.mjs

@@ -72,4 +72,12 @@ const manifest = {
 fs.mkdirSync(distDir, { recursive: true })
 fs.writeFileSync(manifestPath, JSON.stringify(manifest, null, 2) + "\n", "utf-8")
 
+const headersPath = path.join(distDir, "_headers")
+fs.writeFileSync(
+  headersPath,
+  "/version.json\n  Cache-Control: no-cache\n  Content-Type: application/json; charset=utf-8\n",
+  "utf-8",
+)
+
 console.log(`Wrote ${manifestPath}`)
+console.log(`Wrote ${headersPath}`)

packages/cloudflare/src/index.ts

@@ -2,28 +2,8 @@ export interface Env {
   ASSETS: { fetch: (request: Request) => Promise<Response> }
 }
 
-function withHeader(response: Response, key: string, value: string): Response {
-  const headers = new Headers(response.headers)
-  headers.set(key, value)
-  return new Response(response.body, {
-    status: response.status,
-    statusText: response.statusText,
-    headers,
-  })
-}
-
 export default {
   async fetch(request: Request, env: Env): Promise<Response> {
-    const url = new URL(request.url)
-
-    if (url.pathname === "/version.json") {
-      const assetResponse = await env.ASSETS.fetch(request)
-
-      // Ensure this stays fresh; the server uses it on startup.
-      const withCache = withHeader(assetResponse, "Cache-Control", "no-cache")
-      return withHeader(withCache, "Content-Type", "application/json; charset=utf-8")
-    }
-
-    return new Response("Not found", { status: 404 })
+    return env.ASSETS.fetch(request)
   },
 }

packages/cloudflare/wrangler.toml

@@ -12,4 +12,3 @@ custom_domain = true
 directory = "./dist"
 binding = "ASSETS"
 not_found_handling = "404-page"
-run_worker_first = ["/version.json"]

packages/electron-app/electron.vite.config.ts

@@ -1,6 +1,7 @@
 import { defineConfig, externalizeDepsPlugin } from "electron-vite"
 import solid from "vite-plugin-solid"
 import { resolve } from "path"
+import { copyMonacoPublicAssets } from "../ui/scripts/monaco-public-assets.js"
 
 const uiRoot = resolve(__dirname, "../ui")
 const uiSrc = resolve(uiRoot, "src")
@@ -8,6 +9,32 @@ const uiRendererRoot = resolve(uiRoot, "src/renderer")
 const uiRendererEntry = resolve(uiRendererRoot, "index.html")
 const uiRendererLoadingEntry = resolve(uiRendererRoot, "loading.html")
 
+function prepareMonacoPublicAssets() {
+  return {
+    name: "prepare-monaco-public-assets",
+    configureServer(server: any) {
+      copyMonacoPublicAssets({
+        uiRendererRoot: uiRendererRoot,
+        warn: (msg: string) => server.config.logger.warn(msg),
+        sourceRoots: [
+          resolve(__dirname, "../../node_modules/monaco-editor/min/vs"),
+          resolve(uiRoot, "node_modules/monaco-editor/min/vs"),
+        ],
+      })
+    },
+    buildStart(this: any) {
+      copyMonacoPublicAssets({
+        uiRendererRoot: uiRendererRoot,
+        warn: (msg: string) => this.warn(msg),
+        sourceRoots: [
+          resolve(__dirname, "../../node_modules/monaco-editor/min/vs"),
+          resolve(uiRoot, "node_modules/monaco-editor/min/vs"),
+        ],
+      })
+    },
+  }
+}
+
 export default defineConfig({
   main: {
     plugins: [externalizeDepsPlugin()],
@@ -40,7 +67,7 @@ export default defineConfig({
   },
   renderer: {
     root: uiRendererRoot,
-    plugins: [solid()],
+    plugins: [solid(), prepareMonacoPublicAssets()],
     css: {
       postcss: resolve(uiRoot, "postcss.config.js"),
     },

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

@@ -1,6 +1,8 @@
-import { BrowserWindow, dialog, ipcMain, type OpenDialogOptions } from "electron"
+import { BrowserWindow, Notification, dialog, ipcMain, powerSaveBlocker, type OpenDialogOptions } from "electron"
 import type { CliProcessManager, CliStatus } from "./process-manager"
 
+let wakeLockId: number | null = null
+
 interface DialogOpenRequest {
   mode: "directory" | "file"
   title?: string
@@ -62,4 +64,50 @@ export function setupCliIPC(mainWindow: BrowserWindow, cliManager: CliProcessMan
 
     return { canceled: result.canceled, paths: result.filePaths }
   })
+
+  ipcMain.handle("power:setWakeLock", async (_event, enabled: boolean): Promise<{ enabled: boolean }> => {
+    const next = Boolean(enabled)
+    if (next) {
+      if (wakeLockId !== null && powerSaveBlocker.isStarted(wakeLockId)) {
+        return { enabled: true }
+      }
+      try {
+        wakeLockId = powerSaveBlocker.start("prevent-display-sleep")
+      } catch {
+        wakeLockId = null
+        return { enabled: false }
+      }
+      return { enabled: true }
+    }
+
+    if (wakeLockId !== null) {
+      try {
+        if (powerSaveBlocker.isStarted(wakeLockId)) {
+          powerSaveBlocker.stop(wakeLockId)
+        }
+      } finally {
+        wakeLockId = null
+      }
+    }
+    return { enabled: false }
+  })
+
+  ipcMain.handle(
+    "notifications:show",
+    async (_event, payload: { title?: unknown; body?: unknown }): Promise<{ ok: boolean; reason?: string }> => {
+      if (!Notification.isSupported()) {
+        return { ok: false, reason: "unsupported" }
+      }
+
+      const title = typeof payload?.title === "string" ? payload.title : "CodeNomad"
+      const body = typeof payload?.body === "string" ? payload.body : ""
+      try {
+        const notification = new Notification({ title, body })
+        notification.show()
+        return { ok: true }
+      } catch (error) {
+        return { ok: false, reason: error instanceof Error ? error.message : String(error) }
+      }
+    },
+  )
 }

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

@@ -399,7 +399,11 @@ async function exchangeBootstrapToken(baseUrl: string, token: string): Promise<b
 
 async function startCli() {
   try {
-    const devMode = process.env.NODE_ENV === "development"
+    // In desktop dev workflows we always want the CLI to run in dev mode so it:
+    // - uses plain HTTP
+    // - proxies UI requests to the renderer dev server
+    // Monaco's AMD assets are served from that dev server.
+    const devMode = !app.isPackaged
     console.info("[cli] start requested (dev mode:", devMode, ")")
     await cliManager.start({ dev: devMode })
   } catch (error) {
@@ -473,6 +477,14 @@ if (isMac) {
 }
 
 app.whenReady().then(() => {
+  // Required for Windows notifications / taskbar grouping.
+  // Keep in sync with desktop app identifier.
+  try {
+    app.setAppUserModelId("ai.neuralnomads.codenomad.client")
+  } catch {
+    // ignore
+  }
+
   startCli()
 
   if (isMac) {
@@ -505,7 +517,6 @@ app.on("before-quit", async (event) => {
 })
 
 app.on("window-all-closed", () => {
-  if (process.platform !== "darwin") {
-    app.quit()
-  }
+  // CodeNomad supports a single window; closing it should quit the app on all platforms.
+  app.quit()
 })

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

@@ -1,4 +1,4 @@
-import { spawn, type ChildProcess } from "child_process"
+import { spawn, spawnSync, type ChildProcess } from "child_process"
 import { app } from "electron"
 import { createRequire } from "module"
 import { EventEmitter } from "events"
@@ -82,6 +82,7 @@ export class CliProcessManager extends EventEmitter {
   private stdoutBuffer = ""
   private stderrBuffer = ""
   private bootstrapToken: string | null = null
+  private requestedStop = false
 
   async start(options: StartOptions): Promise<CliStatus> {
     if (this.child) {
@@ -91,6 +92,7 @@ export class CliProcessManager extends EventEmitter {
     this.stdoutBuffer = ""
     this.stderrBuffer = ""
     this.bootstrapToken = null
+    this.requestedStop = false
     this.updateStatus({ state: "starting", port: undefined, pid: undefined, url: undefined, error: undefined })
 
     const cliEntry = this.resolveCliEntry(options)
@@ -109,11 +111,13 @@ export class CliProcessManager extends EventEmitter {
       ? buildUserShellCommand(`ELECTRON_RUN_AS_NODE=1 exec ${this.buildCommand(cliEntry, args)}`)
       : this.buildDirectSpawn(cliEntry, args)
 
+    const detached = process.platform !== "win32"
     const child = spawn(spawnDetails.command, spawnDetails.args, {
       cwd: process.cwd(),
       stdio: ["ignore", "pipe", "pipe"],
       env,
       shell: false,
+      detached,
     })
 
     console.info(`[cli] spawn command: ${spawnDetails.command} ${spawnDetails.args.join(" ")}`)
@@ -175,10 +179,90 @@ export class CliProcessManager extends EventEmitter {
       return
     }
 
+    this.requestedStop = true
+
+    const pid = child.pid
+    if (!pid) {
+      this.child = undefined
+      this.updateStatus({ state: "stopped" })
+      return
+    }
+
+    const isAlreadyExited = () => child.exitCode !== null || child.signalCode !== null
+
+    const tryKillPosixGroup = (signal: NodeJS.Signals) => {
+      try {
+        // Negative PID targets the process group (POSIX).
+        process.kill(-pid, signal)
+        return true
+      } catch (error) {
+        const err = error as NodeJS.ErrnoException
+        if (err?.code === "ESRCH") {
+          return true
+        }
+        return false
+      }
+    }
+
+    const tryKillSinglePid = (signal: NodeJS.Signals) => {
+      try {
+        process.kill(pid, signal)
+        return true
+      } catch (error) {
+        const err = error as NodeJS.ErrnoException
+        if (err?.code === "ESRCH") {
+          return true
+        }
+        return false
+      }
+    }
+
+    const tryTaskkill = (force: boolean) => {
+      const args = ["/PID", String(pid), "/T"]
+      if (force) {
+        args.push("/F")
+      }
+
+      try {
+        const result = spawnSync("taskkill", args, { encoding: "utf8" })
+        const exitCode = result.status
+        if (exitCode === 0) {
+          return true
+        }
+
+        // If the PID is already gone, treat it as success.
+        const stderr = (result.stderr ?? "").toString().toLowerCase()
+        const stdout = (result.stdout ?? "").toString().toLowerCase()
+        const combined = `${stdout}\n${stderr}`
+        if (combined.includes("not found") || combined.includes("no running instance")) {
+          return true
+        }
+        return false
+      } catch {
+        return false
+      }
+    }
+
+    const sendStopSignal = (signal: NodeJS.Signals) => {
+      if (process.platform === "win32") {
+        tryTaskkill(signal === "SIGKILL")
+        return
+      }
+
+      // Prefer process-group signaling so wrapper launchers (shell/tsx) don't outlive Electron.
+      const groupOk = tryKillPosixGroup(signal)
+      if (!groupOk) {
+        tryKillSinglePid(signal)
+      }
+    }
+
     return new Promise((resolve) => {
       const killTimeout = setTimeout(() => {
-        child.kill("SIGKILL")
-      }, 4000)
+        console.warn(
+          `[cli] stop timed out after 30000ms; sending SIGKILL (pid=${child.pid ?? "unknown"})`,
+        )
+        sendStopSignal("SIGKILL")
+      }, 30000)
 
       child.on("exit", () => {
         clearTimeout(killTimeout)
@@ -188,7 +272,15 @@ export class CliProcessManager extends EventEmitter {
         resolve()
       })
 
-      child.kill("SIGTERM")
+      if (isAlreadyExited()) {
+        clearTimeout(killTimeout)
+        this.child = undefined
+        this.updateStatus({ state: "stopped" })
+        resolve()
+        return
+      }
+
+      sendStopSignal("SIGTERM")
     })
   }
 
@@ -202,7 +294,16 @@ export class CliProcessManager extends EventEmitter {
 
   private handleTimeout() {
     if (this.child) {
-      this.child.kill("SIGKILL")
+      const pid = this.child.pid
+      if (pid && process.platform !== "win32") {
+        try {
+          process.kill(-pid, "SIGKILL")
+        } catch {
+          this.child.kill("SIGKILL")
+        }
+      } else {
+        this.child.kill("SIGKILL")
+      }
       this.child = undefined
     }
     this.updateStatus({ state: "error", error: "CLI did not start in time" })
@@ -246,38 +347,27 @@ export class CliProcessManager extends EventEmitter {
       console.info(`[cli][${stream}] ${trimmed}`)
       this.emit("log", { stream, message: trimmed })
 
-      const port = this.extractPort(trimmed)
-      if (port && this.status.state === "starting") {
-        const url = `http://127.0.0.1:${port}`
-        console.info(`[cli] ready on ${url}`)
-        this.updateStatus({ state: "ready", port, url })
+      const localUrl = this.extractLocalUrl(trimmed)
+      if (localUrl && this.status.state === "starting") {
+        let port: number | undefined
+        try {
+          port = Number(new URL(localUrl).port) || undefined
+        } catch {
+          port = undefined
+        }
+        console.info(`[cli] ready on ${localUrl}`)
+        this.updateStatus({ state: "ready", port, url: localUrl })
         this.emit("ready", this.status)
       }
     }
   }
 
-  private extractPort(line: string): number | null {
-    const readyMatch = line.match(/CodeNomad Server is ready at http:\/\/[^:]+:(\d+)/i)
-    if (readyMatch) {
-      return parseInt(readyMatch[1], 10)
+  private extractLocalUrl(line: string): string | null {
+    const match = line.match(/^Local\s+Connection\s+URL\s*:\s*(https?:\/\/\S+)\s*$/i)
+    if (!match) {
+      return null
     }
-
-    if (line.toLowerCase().includes("http server listening")) {
-      const httpMatch = line.match(/:(\d{2,5})(?!.*:\d)/)
-      if (httpMatch) {
-        return parseInt(httpMatch[1], 10)
-      }
-      try {
-        const parsed = JSON.parse(line)
-        if (typeof parsed.port === "number") {
-          return parsed.port
-        }
-      } catch {
-        // not JSON, ignore
-      }
-    }
-
-    return null
+    return match[1] ?? null
   }
 
   private updateStatus(patch: Partial<CliStatus>) {
@@ -286,10 +376,22 @@ export class CliProcessManager extends EventEmitter {
   }
 
   private buildCliArgs(options: StartOptions, host: string): string[] {
-    const args = ["serve", "--host", host, "--port", "0", "--generate-token"]
+    const args = ["serve", "--host", host, "--generate-token"]
 
     if (options.dev) {
-      args.push("--ui-dev-server", "http://localhost:3000", "--log-level", "debug")
+      // Dev: run plain HTTP + Vite dev server proxy.
+      args.push("--https", "false", "--http", "true")
+      // Avoid collisions with an already-running server (and dual-stack ::/0.0.0.0 quirks)
+      // by forcing an ephemeral port in dev.
+      args.push("--http-port", "0")
+    } else {
+      // Prod desktop: always keep loopback HTTP enabled.
+      args.push("--https", "true", "--http", "true")
+    }
+
+    if (options.dev) {
+      const devServer = process.env.VITE_DEV_SERVER_URL || process.env.ELECTRON_RENDERER_URL || "http://localhost:3000"
+      args.push("--ui-dev-server", devServer, "--log-level", "debug")
     }
 
     return args
@@ -376,4 +478,3 @@ export class CliProcessManager extends EventEmitter {
     throw new Error("Unable to locate CodeNomad CLI build (dist/bin.js). Run npm run build --workspace @neuralnomads/codenomad.")
   }
 }
-

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

@@ -12,6 +12,8 @@ const electronAPI = {
   getCliStatus: () => ipcRenderer.invoke("cli:getStatus"),
   restartCli: () => ipcRenderer.invoke("cli:restart"),
   openDialog: (options) => ipcRenderer.invoke("dialog:open", options),
+  setWakeLock: (enabled) => ipcRenderer.invoke("power:setWakeLock", Boolean(enabled)),
+  showNotification: (payload) => ipcRenderer.invoke("notifications:show", payload),
 }
 
 contextBridge.exposeInMainWorld("electronAPI", electronAPI)

packages/electron-app/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@neuralnomads/codenomad-electron-app",
-  "version": "0.7.6",
+  "version": "0.10.3",
   "description": "CodeNomad - AI coding assistant",
+  "license": "MIT",
   "author": {
     "name": "Neural Nomads",
     "email": "codenomad@neuralnomads.ai"

packages/opencode-config/package.json

@@ -2,7 +2,8 @@
   "name": "@codenomad/opencode-config",
   "version": "0.5.0",
   "private": true,
+  "license": "MIT",
   "dependencies": {
-    "@opencode-ai/plugin": "1.1.16"
+    "@opencode-ai/plugin": "1.1.53"
   }
-}
+}

packages/opencode-config/plugin/lib/request.ts

@@ -1,3 +1,7 @@
+import http from "http"
+import https from "https"
+import { Readable } from "stream"
+
 export type PluginEvent = {
   type: string
   properties?: Record<string, unknown>
@@ -16,7 +20,8 @@ export function getCodeNomadConfig(): CodeNomadConfig {
 }
 
 export function createCodeNomadRequester(config: CodeNomadConfig) {
-  const baseUrl = config.baseUrl.replace(/\/+$/, "")
+  const rawBaseUrl = (config.baseUrl ?? "").trim()
+  const baseUrl = rawBaseUrl.replace(/\/+$/, "")
   const pluginBase = `${baseUrl}/workspaces/${encodeURIComponent(config.instanceId)}/plugin`
   const authorization = buildInstanceAuthorizationHeader()
 
@@ -42,10 +47,10 @@ export function createCodeNomadRequester(config: CodeNomadConfig) {
     const hasBody = init?.body !== undefined
     const headers = buildHeaders(init?.headers, hasBody)
 
-    return fetch(url, {
-      ...init,
-      headers,
-    })
+    // The CodeNomad plugin only talks to the local CodeNomad server.
+    // Use a single request implementation that tolerates custom/self-signed certs
+    // without disabling TLS verification for the whole Node process.
+    return nodeFetch(url, { ...init, headers }, { rejectUnauthorized: false })
   }
 
   const requestJson = async <T>(path: string, init?: RequestInit): Promise<T> => {
@@ -87,6 +92,91 @@ export function createCodeNomadRequester(config: CodeNomadConfig) {
   }
 }
 
+async function nodeFetch(
+  url: string,
+  init: RequestInit & { headers?: Record<string, string> },
+  tls: { rejectUnauthorized: boolean },
+): Promise<Response> {
+  const parsed = new URL(url)
+  const isHttps = parsed.protocol === "https:"
+  const requestFn = isHttps ? https.request : http.request
+
+  const method = (init.method ?? "GET").toUpperCase()
+  const headers = init.headers ?? {}
+  const body = init.body
+
+  return await new Promise<Response>((resolve, reject) => {
+    const req = requestFn(
+      {
+        protocol: parsed.protocol,
+        hostname: parsed.hostname,
+        port: parsed.port ? Number(parsed.port) : undefined,
+        path: `${parsed.pathname}${parsed.search}`,
+        method,
+        headers,
+        ...(isHttps ? { rejectUnauthorized: tls.rejectUnauthorized } : {}),
+      },
+      (res) => {
+        const responseHeaders = new Headers()
+        for (const [key, value] of Object.entries(res.headers)) {
+          if (value === undefined) continue
+          if (Array.isArray(value)) {
+            responseHeaders.set(key, value.join(", "))
+          } else {
+            responseHeaders.set(key, String(value))
+          }
+        }
+
+        // Convert Node stream -> Web ReadableStream for Response.
+        const webBody = Readable.toWeb(res) as unknown as ReadableStream<Uint8Array>
+        resolve(new Response(webBody, { status: res.statusCode ?? 0, headers: responseHeaders }))
+      },
+    )
+
+    const signal = init.signal
+    const abort = () => {
+      const err = new Error("Request aborted")
+      ;(err as any).name = "AbortError"
+      req.destroy(err)
+      reject(err)
+    }
+
+    if (signal) {
+      if (signal.aborted) {
+        abort()
+        return
+      }
+      signal.addEventListener("abort", abort, { once: true })
+      req.once("close", () => signal.removeEventListener("abort", abort))
+    }
+
+    req.once("error", reject)
+
+    if (body === undefined || body === null) {
+      req.end()
+      return
+    }
+
+    if (typeof body === "string") {
+      req.end(body)
+      return
+    }
+
+    if (body instanceof Uint8Array) {
+      req.end(Buffer.from(body))
+      return
+    }
+
+    if (body instanceof ArrayBuffer) {
+      req.end(Buffer.from(new Uint8Array(body)))
+      return
+    }
+
+    // Fallback for less common BodyInit types.
+    req.end(String(body))
+  })
+}
+
 function requireEnv(key: string): string {
   const value = process.env[key]
   if (!value || !value.trim()) {

packages/server/README.md

@@ -31,6 +31,11 @@ You can run CodeNomad directly without installing it:
 npx @neuralnomads/codenomad --launch
 ```
 
+On startup, CodeNomad prints two URLs:
+
+- `Local Connection URL : ...` (used by desktop shells)
+- `Remote Connection URL : ...` (used by browsers/other machines when remote access is enabled)
+
 ### Install Globally
 Or install it globally to use the `codenomad` command:
 
@@ -44,15 +49,78 @@ You can configure the server using flags or environment variables:
 
 | Flag | Env Variable | Description |
 |------|--------------|-------------|
-| `--port <number>` | `CLI_PORT` | HTTP port (default 9898) |
+| `--https <enabled>` | `CLI_HTTPS` | Enable HTTPS listener (default `true`) |
+| `--http <enabled>` | `CLI_HTTP` | Enable HTTP listener (default `false`) |
+| `--https-port <number>` | `CLI_HTTPS_PORT` | HTTPS port (default `9898`, use `0` for auto) |
+| `--http-port <number>` | `CLI_HTTP_PORT` | HTTP port (default `9899`, use `0` for auto) |
+| `--tls-key <path>` | `CLI_TLS_KEY` | TLS private key (PEM). Requires `--tls-cert`. |
+| `--tls-cert <path>` | `CLI_TLS_CERT` | TLS certificate (PEM). Requires `--tls-key`. |
+| `--tls-ca <path>` | `CLI_TLS_CA` | Optional CA chain/bundle (PEM) |
+| `--tlsSANs <list>` | `CLI_TLS_SANS` | Additional TLS SANs (comma-separated) |
 | `--host <addr>` | `CLI_HOST` | Interface to bind (default 127.0.0.1) |
 | `--workspace-root <path>` | `CLI_WORKSPACE_ROOT` | Default root for new workspaces |
 | `--unrestricted-root` | `CLI_UNRESTRICTED_ROOT` | Allow full-filesystem browsing |
 | `--config <path>` | `CLI_CONFIG` | Config file location |
 | `--launch` | `CLI_LAUNCH` | Open the UI in a Chromium-based browser |
 | `--log-level <level>` | `CLI_LOG_LEVEL` | Logging level (trace, debug, info, warn, error) |
+| `--username <username>` | `CODENOMAD_SERVER_USERNAME` | Username for CodeNomad's internal auth (default `codenomad`) |
+| `--password <password>` | `CODENOMAD_SERVER_PASSWORD` | Password for CodeNomad's internal auth |
+| `--generate-token` | `CODENOMAD_GENERATE_TOKEN` | Emit a one-time local bootstrap token for desktop flows |
+| `--dangerously-skip-auth` | `CODENOMAD_SKIP_AUTH` | Disable CodeNomad's internal auth (use only behind a trusted perimeter) |
+
+### HTTP vs HTTPS
+
+- Default: `--https=true --http=false` (HTTPS only).
+- To run plain HTTP only (useful for development):
+
+```sh
+codenomad --https=false --http=true
+```
+
+- To run both HTTPS (for remote) and HTTP loopback (for desktop):
+
+```sh
+codenomad --https=true --http=true
+```
+
+### Remote Access Binding Rules
+
+- When remote access is enabled (bind host is non-loopback, e.g. `--host 0.0.0.0`):
+  - HTTP listens on `127.0.0.1` only.
+  - HTTPS listens on `--host` (LAN/all interfaces).
+- When remote access is disabled (bind host is loopback, e.g. `--host 127.0.0.1`):
+  - Both HTTP and HTTPS listen on `127.0.0.1`.
+
+### Self-Signed Certificates
+
+If `--https=true` and you do not provide `--tls-key/--tls-cert`, CodeNomad generates a local certificate automatically under your config directory:
+
+- `~/.config/codenomad/tls/ca-cert.pem`
+- `~/.config/codenomad/tls/server-cert.pem`
+
+Certificates are valid for about 30 days and rotate automatically on startup when needed. You can add extra SANs via:
+
+```sh
+codenomad --tlsSANs "localhost,127.0.0.1,my-hostname,192.168.1.10"
+```
+
+### Authentication
+- Default behavior: CodeNomad requires a login (username/password) and stores a session cookie in the browser.
+- `--dangerously-skip-auth` / `CODENOMAD_SKIP_AUTH=true` disables the login prompt and treats all requests as authenticated.
+  Use this only when access is already protected by another layer (SSO proxy, VPN, Coder workspace auth, etc.).
+  If you bind to `0.0.0.0` while skipping auth, anyone who can reach the port can access the API.
+
+### Progressive Web App (PWA)
+When running as a server CodeNomad can also be installed as a PWA from any supported browser, giving you a native app experience just like the Electron installation but executing on the remote server instead.
+
+1. Open the CodeNomad UI in a Chromium-based browser (Chrome, Edge, Brave, etc.).
+2. Click the install icon in the address bar, or use the browser menu → "Install CodeNomad".
+3. The app will open in a standalone window and appear in your OS app list.
+
+> **TLS requirement**
+> Browsers require a secure (`https://`) connection for PWA installation.
+> If you host CodeNomad on a remote machine, use HTTPS. Self-signed certificates generally won't work unless they are explicitly trusted by the device/browser (e.g., via a custom CA).
 
 ### Data Storage
 - **Config**: `~/.config/codenomad/config.json`
 - **Instance Data**: `~/.config/codenomad/instances` (chat history, etc.)
-

packages/server/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@neuralnomads/codenomad",
-  "version": "0.7.6",
+  "version": "0.10.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@neuralnomads/codenomad",
-      "version": "0.7.6",
+      "version": "0.10.3",
       "dependencies": {
         "@fastify/cors": "^8.5.0",
         "@fastify/reply-from": "^9.8.0",

packages/server/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@neuralnomads/codenomad",
-  "version": "0.7.6",
+  "version": "0.10.3",
   "description": "CodeNomad Server",
+  "license": "MIT",
   "author": {
     "name": "Neural Nomads",
     "email": "codenomad@neuralnomads.ai"
@@ -20,7 +21,7 @@
     "build:ui": "npm run build --prefix ../ui",
     "prepare-ui": "node ./scripts/copy-ui-dist.mjs",
     "prepare-config": "node ./scripts/copy-opencode-config.mjs",
-    "dev": "cross-env CODENOMAD_DEV=1 CODENOMAD_SERVER_PASSWORD=codenomad-dev CLI_UI_DEV_SERVER=http://localhost:3000 tsx src/index.ts",
+    "dev": "cross-env CODENOMAD_DEV=1 CODENOMAD_SERVER_PASSWORD=codenomad-dev CLI_UI_DEV_SERVER=http://localhost:3000 CLI_HTTPS=false CLI_HTTP=true tsx src/index.ts",
     "typecheck": "tsc --noEmit -p tsconfig.json"
   },
   "dependencies": {
@@ -30,12 +31,14 @@
     "commander": "^12.1.0",
     "fastify": "^4.28.1",
     "fuzzysort": "^2.0.4",
+    "node-forge": "^1.3.3",
     "pino": "^9.4.0",
     "undici": "^6.19.8",
     "yauzl": "^2.10.0",
     "zod": "^3.23.8"
   },
   "devDependencies": {
+    "@types/node-forge": "^1.3.14",
     "@types/yauzl": "^2.10.0",
     "cross-env": "^7.0.3",
     "ts-node": "^10.9.2",

packages/server/src/api-types.ts

@@ -50,6 +50,38 @@ export interface WorkspaceDeleteResponse {
   status: WorkspaceStatus
 }
 
+export type WorktreeKind = "root" | "worktree"
+
+export interface WorktreeDescriptor {
+  /** Stable identifier used by CodeNomad + clients ("root" for repo root). */
+  slug: string
+  /** Absolute directory path on the server host. */
+  directory: string
+  kind: WorktreeKind
+  /** Optional VCS branch name when available. */
+  branch?: string
+}
+
+export interface WorktreeListResponse {
+  worktrees: WorktreeDescriptor[]
+  /** True when the workspace folder resolves to a Git repository. */
+  isGitRepo?: boolean
+}
+
+export interface WorktreeCreateRequest {
+  slug: string
+  /** Optional branch name (defaults to slug). */
+  branch?: string
+}
+
+export interface WorktreeMap {
+  version: 1
+  /** Default worktree to use for new sessions and as fallback. */
+  defaultWorktreeSlug: string
+  /** Mapping of *parent* session IDs to a worktree slug. */
+  parentSessionWorktreeSlug: Record<string, string>
+}
+
 export type LogLevel = "debug" | "info" | "warn" | "error"
 
 export interface WorkspaceLogEntry {
@@ -95,6 +127,26 @@ export interface FileSystemListResponse {
   metadata: FileSystemListingMetadata
 }
 
+export interface FileSystemCreateFolderRequest {
+  /**
+   * Path identifier for the currently browsed directory.
+   * Matches the `path` parameter used for `/api/filesystem`.
+   */
+  parentPath?: string
+  /** Single folder name (no separators). */
+  name: string
+}
+
+export interface FileSystemCreateFolderResponse {
+  /**
+   * Path identifier that can be passed back to `/api/filesystem` to browse the new folder.
+   * Relative for restricted listings, absolute for unrestricted.
+   */
+  path: string
+  /** Absolute folder path on the server host. */
+  absolutePath: string
+}
+
 export const WINDOWS_DRIVES_ROOT = "__drives__"
 
 export interface WorkspaceFileResponse {
@@ -184,7 +236,8 @@ export interface NetworkAddress {
   ip: string
   family: "ipv4" | "ipv6"
   scope: "external" | "internal" | "loopback"
-  url: string
+  /** Remote URL using the server's remote protocol/port for this IP. */
+  remoteUrl: string
 }
 
 export interface LatestReleaseInfo {
@@ -210,16 +263,20 @@ export interface SupportMeta {
 }
 
 export interface ServerMeta {
-  /** Base URL clients should target for REST calls (useful for Electron embedding). */
-  httpBaseUrl: string
+  /** URL desktop apps should use to connect (prefers loopback HTTP when enabled). */
+  localUrl: string
+  /** URL remote clients should use (prefers HTTPS when enabled). */
+  remoteUrl?: string
   /** SSE endpoint advertised to clients (`/api/events` by default). */
   eventsUrl: string
   /** Host the server is bound to (e.g., 127.0.0.1 or 0.0.0.0). */
   host: string
   /** Listening mode derived from host binding. */
   listeningMode: "local" | "all"
-  /** Actual port in use after binding. */
-  port: number
+  /** Actual local port in use after binding. */
+  localPort: number
+  /** Actual remote port in use after binding (when remoteUrl is set). */
+  remotePort?: number
   /** Display label for the host (e.g., hostname or friendly name). */
   hostLabel: string
   /** Absolute path of the filesystem root exposed to clients. */

packages/server/src/auth/manager.ts

@@ -15,15 +15,25 @@ export interface AuthManagerInit {
   username: string
   password?: string
   generateToken: boolean
+  dangerouslySkipAuth?: boolean
 }
 
 export class AuthManager {
-  private readonly authStore: AuthStore
+  private readonly authStore: AuthStore | null
   private readonly tokenManager: TokenManager | null
   private readonly sessionManager = new SessionManager()
   private readonly cookieName = DEFAULT_AUTH_COOKIE_NAME
+  private readonly authEnabled: boolean
 
   constructor(private readonly init: AuthManagerInit, private readonly logger: Logger) {
+    this.authEnabled = !Boolean(init.dangerouslySkipAuth)
+
+    if (!this.authEnabled) {
+      this.authStore = null
+      this.tokenManager = null
+      return
+    }
+
     const authFilePath = resolveAuthFilePath(init.configPath)
     this.authStore = new AuthStore(authFilePath, logger.child({ component: "auth" }))
 
@@ -37,6 +47,10 @@ export class AuthManager {
     this.tokenManager = init.generateToken ? new TokenManager(60_000) : null
   }
 
+  isAuthEnabled(): boolean {
+    return this.authEnabled
+  }
+
   getCookieName(): string {
     return this.cookieName
   }
@@ -56,19 +70,31 @@ export class AuthManager {
   }
 
   validateLogin(username: string, password: string): boolean {
-    return this.authStore.validateCredentials(username, password)
+    if (!this.authEnabled) {
+      return true
+    }
+    return this.requireAuthStore().validateCredentials(username, password)
   }
 
   createSession(username: string) {
+    if (!this.authEnabled) {
+      return { id: "auth-disabled", createdAt: Date.now(), username: this.init.username }
+    }
     return this.sessionManager.createSession(username)
   }
 
   getStatus() {
-    return this.authStore.getStatus()
+    if (!this.authEnabled) {
+      return { username: this.init.username, passwordUserProvided: false }
+    }
+    return this.requireAuthStore().getStatus()
   }
 
   setPassword(password: string) {
-    return this.authStore.setPassword({ password, markUserProvided: true })
+    if (!this.authEnabled) {
+      throw new Error("Internal authentication is disabled")
+    }
+    return this.requireAuthStore().setPassword({ password, markUserProvided: true })
   }
 
   isLoopbackRequest(request: FastifyRequest): boolean {
@@ -76,6 +102,12 @@ export class AuthManager {
   }
 
   getSessionFromRequest(request: FastifyRequest): { 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 sessionId = cookies[this.cookieName]
     const session = this.sessionManager.getSession(sessionId)
@@ -87,9 +119,24 @@ export class AuthManager {
     reply.header("Set-Cookie", buildSessionCookie(this.cookieName, sessionId))
   }
 
+  setSessionCookieWithOptions(reply: FastifyReply, sessionId: string, options?: { secure?: boolean }) {
+    reply.header("Set-Cookie", buildSessionCookie(this.cookieName, sessionId, options))
+  }
+
   clearSessionCookie(reply: FastifyReply) {
     reply.header("Set-Cookie", buildSessionCookie(this.cookieName, "", { maxAgeSeconds: 0 }))
   }
+
+  clearSessionCookieWithOptions(reply: FastifyReply, options?: { secure?: boolean }) {
+    reply.header("Set-Cookie", buildSessionCookie(this.cookieName, "", { maxAgeSeconds: 0, ...options }))
+  }
+
+  private requireAuthStore(): AuthStore {
+    if (!this.authStore) {
+      throw new Error("Auth store is unavailable")
+    }
+    return this.authStore
+  }
 }
 
 function resolveAuthFilePath(configPath: string) {
@@ -104,8 +151,11 @@ function resolvePath(filePath: string) {
   return path.resolve(filePath)
 }
 
-function buildSessionCookie(name: string, value: string, options?: { maxAgeSeconds?: number }) {
+function buildSessionCookie(name: string, value: string, options?: { maxAgeSeconds?: number; secure?: boolean }) {
   const parts = [`${name}=${encodeURIComponent(value)}`, "HttpOnly", "Path=/", "SameSite=Lax"]
+  if (options?.secure) {
+    parts.push("Secure")
+  }
   if (options?.maxAgeSeconds !== undefined) {
     parts.push(`Max-Age=${Math.max(0, Math.floor(options.maxAgeSeconds))}`)
   }

packages/server/src/config/schema.ts

@@ -12,15 +12,25 @@ const PreferencesSchema = z.object({
   showThinkingBlocks: z.boolean().default(false),
   thinkingBlocksExpansion: z.enum(["expanded", "collapsed"]).default("expanded"),
   showTimelineTools: z.boolean().default(true),
+  promptSubmitOnEnter: z.boolean().default(false),
   lastUsedBinary: z.string().optional(),
+  locale: z.string().optional(),
   environmentVariables: z.record(z.string()).default({}),
   modelRecents: z.array(ModelPreferenceSchema).default([]),
+  modelFavorites: z.array(ModelPreferenceSchema).default([]),
+  modelThinkingSelections: z.record(z.string(), z.string()).default({}),
   diffViewMode: z.enum(["split", "unified"]).default("split"),
   toolOutputExpansion: z.enum(["expanded", "collapsed"]).default("expanded"),
   diagnosticsExpansion: z.enum(["expanded", "collapsed"]).default("expanded"),
   showUsageMetrics: z.boolean().default(true),
   autoCleanupBlankSessions: z.boolean().default(true),
   listeningMode: z.enum(["local", "all"]).default("local"),
+
+  // OS notifications
+  osNotificationsEnabled: z.boolean().default(false),
+  osNotificationsAllowWhenVisible: z.boolean().default(false),
+  notifyOnNeedsInput: z.boolean().default(true),
+  notifyOnIdle: z.boolean().default(true),
 })
 
 const RecentFolderSchema = z.object({

packages/server/src/filesystem/browser.ts

@@ -2,6 +2,7 @@ import fs from "fs"
 import os from "os"
 import path from "path"
 import {
+  FileSystemCreateFolderResponse,
   FileSystemEntry,
   FileSystemListResponse,
   FileSystemListingMetadata,
@@ -56,6 +57,30 @@ export class FileSystemBrowser {
     return this.listRestrictedWithMetadata(targetPath, includeFiles)
   }
 
+  createFolder(parentPath: string | undefined, folderName: string): FileSystemCreateFolderResponse {
+    const name = this.normalizeFolderName(folderName)
+
+    if (this.unrestricted) {
+      const resolvedParent = this.resolveUnrestrictedPath(parentPath)
+      if (this.isWindows && resolvedParent === WINDOWS_DRIVES_ROOT) {
+        throw new Error("Cannot create folders at drive root")
+      }
+      this.assertDirectoryExists(resolvedParent)
+      const absolutePath = this.resolveAbsoluteChild(resolvedParent, name)
+      fs.mkdirSync(absolutePath)
+      return { path: absolutePath, absolutePath }
+    }
+
+    const normalizedParent = this.normalizeRelativePath(parentPath)
+    const parentAbsolute = this.toRestrictedAbsolute(normalizedParent)
+    this.assertDirectoryExists(parentAbsolute)
+
+    const relativePath = this.buildRelativePath(normalizedParent, name)
+    const absolutePath = this.toRestrictedAbsolute(relativePath)
+    fs.mkdirSync(absolutePath)
+    return { path: relativePath, absolutePath }
+  }
+
   readFile(relativePath: string): string {
     if (this.unrestricted) {
       throw new Error("readFile is not available in unrestricted mode")
@@ -157,25 +182,58 @@ export class FileSystemBrowser {
     return { entries, metadata }
   }
 
+  private normalizeFolderName(input: string): string {
+    const name = input.trim()
+    if (!name) {
+      throw new Error("Folder name is required")
+    }
+
+    if (name === "." || name === "..") {
+      throw new Error("Invalid folder name")
+    }
+
+    if (name.startsWith("~")) {
+      throw new Error("Invalid folder name")
+    }
+
+    if (name.includes("/") || name.includes("\\")) {
+      throw new Error("Folder name must not include path separators")
+    }
+
+    if (name.includes("\u0000")) {
+      throw new Error("Invalid folder name")
+    }
+
+    return name
+  }
+
+  private assertDirectoryExists(directory: string) {
+    if (!fs.existsSync(directory)) {
+      throw new Error(`Directory does not exist: ${directory}`)
+    }
+    const stats = fs.statSync(directory)
+    if (!stats.isDirectory()) {
+      throw new Error(`Path is not a directory: ${directory}`)
+    }
+  }
+
   private readDirectoryEntries(directory: string, options: DirectoryReadOptions): FileSystemEntry[] {
     const dirents = fs.readdirSync(directory, { withFileTypes: true })
     const results: FileSystemEntry[] = []
 
     for (const entry of dirents) {
-      if (!options.includeFiles && !entry.isDirectory()) {
-        continue
-      }
-
       const absoluteEntryPath = path.join(directory, entry.name)
       let stats: fs.Stats
       try {
+        // Use fs.statSync (not Dirent.isDirectory) so symlinks to directories
+        // are treated as directories in directory-only listings.
         stats = fs.statSync(absoluteEntryPath)
       } catch {
         // Skip entries we cannot stat (insufficient permissions, etc.)
         continue
       }
 
-      const isDirectory = entry.isDirectory()
+      const isDirectory = stats.isDirectory()
       if (!options.includeFiles && !isDirectory) {
         continue
       }

packages/server/src/index.ts

@@ -19,6 +19,8 @@ import { createLogger } from "./logger"
 import { launchInBrowser } from "./launcher"
 import { resolveUi } from "./ui/remote-ui"
 import { AuthManager, BOOTSTRAP_TOKEN_STDOUT_PREFIX, DEFAULT_AUTH_USERNAME } from "./auth/manager"
+import { resolveHttpsOptions } from "./server/tls"
+import { resolveNetworkAddresses } from "./server/network-addresses"
 
 const require = createRequire(import.meta.url)
 
@@ -28,8 +30,15 @@ const __dirname = path.dirname(__filename)
 const DEFAULT_UI_STATIC_DIR = path.resolve(__dirname, "../public")
 
 interface CliOptions {
-  port: number
   host: string
+  https: boolean
+  http: boolean
+  httpsPort: number
+  httpPort: number
+  tlsKeyPath?: string
+  tlsCertPath?: string
+  tlsCaPath?: string
+  tlsSANs?: string
   rootDir: string
   configPath: string
   unrestrictedRoot: boolean
@@ -44,11 +53,13 @@ interface CliOptions {
   authUsername: string
   authPassword?: string
   generateToken: boolean
+  dangerouslySkipAuth: boolean
 }
 
-const DEFAULT_PORT = 9898
 const DEFAULT_HOST = "127.0.0.1"
 const DEFAULT_CONFIG_PATH = "~/.config/codenomad/config.json"
+const DEFAULT_HTTPS_PORT = 9898
+const DEFAULT_HTTP_PORT = 9899
 
 function parseCliOptions(argv: string[]): CliOptions {
   const program = new Command()
@@ -56,7 +67,14 @@ function parseCliOptions(argv: string[]): CliOptions {
     .description("CodeNomad CLI server")
     .version(packageJson.version, "-v, --version", "Show the CLI version")
     .addOption(new Option("--host <host>", "Host interface to bind").env("CLI_HOST").default(DEFAULT_HOST))
-    .addOption(new Option("--port <number>", "Port for the HTTP server").env("CLI_PORT").default(DEFAULT_PORT).argParser(parsePort))
+    .addOption(new Option("--https <enabled>", "Enable HTTPS listener (true|false)").env("CLI_HTTPS").default("true"))
+    .addOption(new Option("--http <enabled>", "Enable HTTP listener (true|false)").env("CLI_HTTP").default("false"))
+    .addOption(new Option("--https-port <number>", "HTTPS port (0 for auto)").env("CLI_HTTPS_PORT").default(DEFAULT_HTTPS_PORT).argParser(parsePort))
+    .addOption(new Option("--http-port <number>", "HTTP port (0 for auto)").env("CLI_HTTP_PORT").default(DEFAULT_HTTP_PORT).argParser(parsePort))
+    .addOption(new Option("--tls-key <path>", "TLS private key (PEM)").env("CLI_TLS_KEY"))
+    .addOption(new Option("--tls-cert <path>", "TLS certificate (PEM)").env("CLI_TLS_CERT"))
+    .addOption(new Option("--tls-ca <path>", "TLS CA chain (PEM)").env("CLI_TLS_CA"))
+    .addOption(new Option("--tlsSANs <list>", "Additional TLS SANs (comma-separated)").env("CLI_TLS_SANS"))
     .addOption(
       new Option("--workspace-root <path>", "Workspace root directory").env("CLI_WORKSPACE_ROOT").default(process.cwd()),
     )
@@ -84,11 +102,26 @@ function parseCliOptions(argv: string[]): CliOptions {
         .env("CODENOMAD_GENERATE_TOKEN")
         .default(false),
     )
+    .addOption(
+      new Option(
+        "--dangerously-skip-auth",
+        "Disable CodeNomad's internal auth. Use only behind a trusted perimeter (SSO/VPN/etc).",
+      )
+        .env("CODENOMAD_SKIP_AUTH")
+        .default(false),
+    )
 
   program.parse(argv, { from: "user" })
   const parsed = program.opts<{
     host: string
-    port: number
+    https?: string
+    http?: string
+    httpsPort: number
+    httpPort: number
+    tlsKey?: string
+    tlsCert?: string
+    tlsCa?: string
+    tlsSANs?: string
     workspaceRoot?: string
     root?: string
     unrestrictedRoot?: boolean
@@ -104,8 +137,14 @@ function parseCliOptions(argv: string[]): CliOptions {
     username: string
     password?: string
     generateToken?: boolean
+    dangerouslySkipAuth?: boolean
   }>()
 
+  const parseBooleanEnv = (value: string | undefined): boolean => {
+    const normalized = (value ?? "").trim().toLowerCase()
+    return normalized === "1" || normalized === "true" || normalized === "yes" || normalized === "y" || normalized === "on"
+  }
+
   const resolvedRoot = parsed.workspaceRoot ?? parsed.root ?? process.cwd()
 
   const normalizedHost = resolveHost(parsed.host)
@@ -113,9 +152,23 @@ function parseCliOptions(argv: string[]): CliOptions {
   const autoUpdateString = (parsed.uiAutoUpdate ?? "true").trim().toLowerCase()
   const uiAutoUpdate = autoUpdateString === "1" || autoUpdateString === "true" || autoUpdateString === "yes"
 
+  const httpsEnabled = parseBooleanEnv(parsed.https)
+  const httpEnabled = parseBooleanEnv(parsed.http)
+
+  if (!httpsEnabled && !httpEnabled) {
+    throw new InvalidArgumentError("At least one listener must be enabled (--https or --http)")
+  }
+
   return {
-    port: parsed.port,
     host: normalizedHost,
+    https: httpsEnabled,
+    http: httpEnabled,
+    httpsPort: parsed.httpsPort,
+    httpPort: parsed.httpPort,
+    tlsKeyPath: parsed.tlsKey,
+    tlsCertPath: parsed.tlsCert,
+    tlsCaPath: parsed.tlsCa,
+    tlsSANs: parsed.tlsSANs,
     rootDir: resolvedRoot,
     configPath: parsed.config,
     unrestrictedRoot: Boolean(parsed.unrestrictedRoot),
@@ -130,6 +183,7 @@ function parseCliOptions(argv: string[]): CliOptions {
     authUsername: parsed.username,
     authPassword: parsed.password,
     generateToken: Boolean(parsed.generateToken),
+    dangerouslySkipAuth: Boolean(parsed.dangerouslySkipAuth),
   }
 }
 
@@ -156,6 +210,13 @@ function resolveHost(input: string | undefined): string {
   return trimmed
 }
 
+function resolvePath(filePath: string) {
+  if (filePath.startsWith("~/")) {
+    return path.join(process.env.HOME ?? "", filePath.slice(2))
+  }
+  return path.resolve(filePath)
+}
+
 function programHasArg(argv: string[], flag: string): boolean {
   return argv.includes(flag)
 }
@@ -174,16 +235,30 @@ async function main() {
 
   logger.info({ options: logOptions }, "Starting CodeNomad CLI server")
 
+  if (options.dangerouslySkipAuth) {
+    logger.warn(
+      "DANGEROUS: internal authentication is disabled (--dangerously-skip-auth / CODENOMAD_SKIP_AUTH).",
+    )
+  }
+
   const eventBus = new EventBus(eventLogger)
 
   const isLoopbackHost = (host: string) => host === "127.0.0.1" || host === "::1" || host.startsWith("127.")
 
+  const configDir = path.dirname(resolvePath(options.configPath))
+
+  if ((options.tlsKeyPath && !options.tlsCertPath) || (!options.tlsKeyPath && options.tlsCertPath)) {
+    throw new InvalidArgumentError("--tls-key and --tls-cert must be provided together")
+  }
+
   const serverMeta: ServerMeta = {
-    httpBaseUrl: `http://${options.host}:${options.port}`,
+    localUrl: "http://localhost:0",
+    remoteUrl: undefined,
     eventsUrl: `/api/events`,
     host: options.host,
     listeningMode: isLoopbackHost(options.host) ? "local" : "all",
-    port: options.port,
+    localPort: 0,
+    remotePort: undefined,
     hostLabel: options.host,
     workspaceRoot: options.rootDir,
     addresses: [],
@@ -195,17 +270,31 @@ async function main() {
       username: options.authUsername,
       password: options.authPassword,
       generateToken: options.generateToken,
+      dangerouslySkipAuth: options.dangerouslySkipAuth,
     },
     logger.child({ component: "auth" }),
   )
 
-  if (options.generateToken) {
+  if (options.generateToken && !options.dangerouslySkipAuth) {
     const token = authManager.issueBootstrapToken()
     if (token) {
       console.log(`${BOOTSTRAP_TOKEN_STDOUT_PREFIX}${token}`)
     }
   }
 
+  const tlsResolution = resolveHttpsOptions({
+    enabled: options.https,
+    configDir,
+    host: options.host,
+    tlsKeyPath: options.tlsKeyPath,
+    tlsCertPath: options.tlsCertPath,
+    tlsCaPath: options.tlsCaPath,
+    tlsSANs: options.tlsSANs,
+    logger: logger.child({ component: "tls" }),
+  })
+
+  const nodeExtraCaCertsPath = !options.http ? tlsResolution?.caCertPath : undefined
+
   const configStore = new ConfigStore(options.configPath, eventBus, configLogger)
   const binaryRegistry = new BinaryRegistry(configStore, eventBus, configLogger)
   const workspaceManager = new WorkspaceManager({
@@ -214,7 +303,8 @@ async function main() {
     binaryRegistry,
     eventBus,
     logger: workspaceLogger,
-    getServerBaseUrl: () => serverMeta.httpBaseUrl,
+    getServerBaseUrl: () => serverMeta.localUrl,
+    nodeExtraCaCertsPath,
   })
   const fileSystemBrowser = new FileSystemBrowser({ rootDir: options.rootDir, unrestricted: options.unrestrictedRoot })
   const instanceStore = new InstanceStore()
@@ -254,28 +344,125 @@ async function main() {
     minServerVersion: uiResolution.minServerVersion,
   }
 
-  const server = createHttpServer({
-    host: options.host,
-    port: options.port,
-    workspaceManager,
-    configStore,
-    binaryRegistry,
-    fileSystemBrowser,
-    eventBus,
-    serverMeta,
-    instanceStore,
-    authManager,
-    uiStaticDir: uiResolution.uiStaticDir ?? DEFAULT_UI_STATIC_DIR,
-    uiDevServerUrl: uiResolution.uiDevServerUrl,
-    logger,
-  })
+  if (uiResolution.uiDevServerUrl && options.https) {
+    throw new InvalidArgumentError("UI dev proxy is only supported with --https=false --http=true")
+  }
 
-  const startInfo = await server.start()
-  logger.info({ port: startInfo.port, host: options.host }, "HTTP server listening")
-  console.log(`CodeNomad Server is ready at ${startInfo.url}`)
+  const remoteAccessEnabled = options.host === "0.0.0.0" || !isLoopbackHost(options.host)
+
+  const httpsPortExplicit = programHasArg(process.argv.slice(2), "--https-port") || Boolean(process.env.CLI_HTTPS_PORT)
+  const httpPortExplicit = programHasArg(process.argv.slice(2), "--http-port") || Boolean(process.env.CLI_HTTP_PORT)
+
+  const httpsBindPort = httpsPortExplicit ? options.httpsPort : 0
+  const httpBindPort = httpPortExplicit ? options.httpPort : 0
+
+  // Listener binding rules:
+  // - Remote access enabled: HTTP listens on loopback, HTTPS on all IPs (host=0.0.0.0 / LAN IP).
+  // - Remote access disabled: both listen on loopback.
+  // - HTTP-only mode: respect --host (used for dev/testing).
+  const httpsBindHost = remoteAccessEnabled ? options.host : "127.0.0.1"
+  const httpBindHost = options.http ? (options.https ? "127.0.0.1" : options.host) : "127.0.0.1"
+
+  const servers: Array<ReturnType<typeof createHttpServer>> = []
+
+  const httpServer = options.http
+    ? createHttpServer({
+        bindHost: httpBindHost,
+        bindPort: httpBindPort,
+        defaultPort: options.httpPort,
+        protocol: "http",
+        workspaceManager,
+        configStore,
+        binaryRegistry,
+        fileSystemBrowser,
+        eventBus,
+        serverMeta,
+        instanceStore,
+        authManager,
+        uiStaticDir: uiResolution.uiStaticDir ?? DEFAULT_UI_STATIC_DIR,
+        uiDevServerUrl: uiResolution.uiDevServerUrl,
+        logger,
+      })
+    : null
+
+  const httpsServer = options.https
+    ? createHttpServer({
+        bindHost: httpsBindHost,
+        bindPort: httpsBindPort,
+        defaultPort: options.httpsPort,
+        protocol: "https",
+        httpsOptions: tlsResolution?.httpsOptions,
+        workspaceManager,
+        configStore,
+        binaryRegistry,
+        fileSystemBrowser,
+        eventBus,
+        serverMeta,
+        instanceStore,
+        authManager,
+        uiStaticDir: uiResolution.uiStaticDir ?? DEFAULT_UI_STATIC_DIR,
+        uiDevServerUrl: undefined,
+        logger,
+      })
+    : null
+
+  if (httpServer) servers.push(httpServer)
+  if (httpsServer) servers.push(httpsServer)
+
+  const [httpStart, httpsStart] = await Promise.all([
+    httpServer ? httpServer.start() : Promise.resolve(null),
+    httpsServer ? httpsServer.start() : Promise.resolve(null),
+  ])
+
+  const localStart = httpStart ?? httpsStart
+  if (!localStart) {
+    throw new Error("No listeners started")
+  }
+
+  const remoteStart = httpsStart ?? httpStart
+  const localProtocol: "http" | "https" = httpStart ? "http" : "https"
+  const remoteProtocol: "http" | "https" = httpsStart ? "https" : "http"
+
+  // Use an explicit IPv4 loopback address for the "local" URL.
+  // On macOS, `localhost` often resolves to ::1 first, and it is possible to have
+  // another instance bound on IPv6 while this instance binds IPv4 (or vice versa),
+  // which can lead clients to talk to the wrong process.
+  const localUrl = `${localProtocol}://127.0.0.1:${localStart.port}`
+  let remoteUrl: string | undefined
+  if (remoteStart) {
+    const wantsAll = options.host === "0.0.0.0" || !isLoopbackHost(options.host)
+    let remoteHost = options.host
+    if (wantsAll) {
+      if (options.host === "0.0.0.0") {
+        const candidates = resolveNetworkAddresses({ host: options.host, protocol: remoteProtocol, port: remoteStart.port })
+        remoteHost = candidates.find((addr) => addr.scope === "external")?.ip ?? "localhost"
+      }
+    } else {
+      remoteHost = "localhost"
+    }
+    remoteUrl = `${remoteProtocol}://${remoteHost}:${remoteStart.port}`
+  }
+
+  serverMeta.localUrl = localUrl
+  serverMeta.localPort = localStart.port
+  serverMeta.remoteUrl = remoteUrl
+  serverMeta.remotePort = remoteStart?.port
+  serverMeta.host = options.host
+  serverMeta.listeningMode = options.host === "0.0.0.0" || !isLoopbackHost(options.host) ? "all" : "local"
+
+  if (serverMeta.remotePort && remoteUrl) {
+    serverMeta.addresses = resolveNetworkAddresses({ host: options.host, protocol: remoteProtocol, port: serverMeta.remotePort })
+  } else {
+    serverMeta.addresses = []
+  }
+
+  console.log(`Local Connection URL : ${serverMeta.localUrl}`)
+  if (serverMeta.remoteUrl) {
+    console.log(`Remote Connection URL : ${serverMeta.remoteUrl}`)
+  }
 
   if (options.launch) {
-    await launchInBrowser(startInfo.url, logger.child({ component: "launcher" }))
+    await launchInBrowser(serverMeta.localUrl, logger.child({ component: "launcher" }))
   }
 
   let shuttingDown = false
@@ -286,21 +473,33 @@ async function main() {
       return
     }
     shuttingDown = true
-    logger.info("Received shutdown signal, closing server")
-    try {
-      await server.stop()
-      logger.info("HTTP server stopped")
-    } catch (error) {
-      logger.error({ err: error }, "Failed to stop HTTP server")
-    }
+    logger.info("Received shutdown signal, stopping workspaces and server")
 
-    try {
-      instanceEventBridge.shutdown()
-      await workspaceManager.shutdown()
-      logger.info("Workspace manager shutdown complete")
-    } catch (error) {
-      logger.error({ err: error }, "Workspace manager shutdown failed")
-    }
+    const shutdownWorkspaces = (async () => {
+      try {
+        instanceEventBridge.shutdown()
+      } catch (error) {
+        logger.warn({ err: error }, "Instance event bridge shutdown failed")
+      }
+
+      try {
+        await workspaceManager.shutdown()
+        logger.info("Workspace manager shutdown complete")
+      } catch (error) {
+        logger.error({ err: error }, "Workspace manager shutdown failed")
+      }
+    })()
+
+    const shutdownHttp = (async () => {
+      try {
+        await Promise.allSettled(servers.map((srv) => srv.stop()))
+        logger.info("HTTP server(s) stopped")
+      } catch (error) {
+        logger.error({ err: error }, "Failed to stop HTTP server")
+      }
+    })()
+
+    await Promise.allSettled([shutdownWorkspaces, shutdownHttp])
 
     // no-op: remote UI manifest replaces GitHub release monitor
 

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

@@ -7,6 +7,7 @@ import path from "path"
 import { fetch } from "undici"
 import type { Logger } from "../logger"
 import { WorkspaceManager } from "../workspaces/manager"
+import { isValidWorktreeSlug, listWorktrees, resolveRepoRoot } from "../workspaces/git-worktrees"
 
 import { ConfigStore } from "../config/store"
 import { BinaryRegistry } from "../config/binaries"
@@ -20,6 +21,7 @@ import { registerEventRoutes } from "./routes/events"
 import { registerStorageRoutes } from "./routes/storage"
 import { registerPluginRoutes } from "./routes/plugin"
 import { registerBackgroundProcessRoutes } from "./routes/background-processes"
+import { registerWorktreeRoutes } from "./routes/worktrees"
 import { ServerMeta } from "../api-types"
 import { InstanceStore } from "../storage/instance-store"
 import { BackgroundProcessManager } from "../background-processes/manager"
@@ -28,8 +30,12 @@ import { registerAuthRoutes } from "./routes/auth"
 import { sendUnauthorized, wantsHtml } from "../auth/http-auth"
 
 interface HttpServerDeps {
-  host: string
-  port: number
+  bindHost: string
+  bindPort: number
+  /** When bindPort is 0, try this first. */
+  defaultPort: number
+  protocol: "http" | "https"
+  httpsOptions?: { key: string | Buffer; cert: string | Buffer; ca?: string | Buffer }
   workspaceManager: WorkspaceManager
   configStore: ConfigStore
   binaryRegistry: BinaryRegistry
@@ -49,10 +55,15 @@ interface HttpServerStartResult {
   displayHost: string
 }
 
-const DEFAULT_HTTP_PORT = 9898
-
 export function createHttpServer(deps: HttpServerDeps) {
-  const app = Fastify({ logger: false })
+  // Fastify's type-level RawServer inference gets noisy when toggling HTTP vs HTTPS.
+  // We keep the runtime behavior correct and cast the instance to a generic FastifyInstance.
+  const app = Fastify(
+    ({
+      logger: false,
+      ...(deps.protocol === "https" && deps.httpsOptions ? { https: deps.httpsOptions } : {}),
+    } as unknown) as any,
+  ) as unknown as FastifyInstance
   const proxyLogger = deps.logger.child({ component: "proxy" })
   const apiLogger = deps.logger.child({ component: "http" })
   const sseLogger = deps.logger.child({ component: "sse" })
@@ -95,6 +106,27 @@ export function createHttpServer(deps: HttpServerDeps) {
   const allowedDevOrigins = new Set(["http://localhost:3000", "http://127.0.0.1:3000"])
   const isLoopbackHost = (host: string) => host === "127.0.0.1" || host === "::1" || host.startsWith("127.")
 
+  const getSelfOrigins = (): Set<string> => {
+    const origins = new Set<string>()
+    const candidates: Array<string | undefined> = [deps.serverMeta.localUrl, deps.serverMeta.remoteUrl]
+    for (const candidate of candidates) {
+      if (!candidate) continue
+      try {
+        origins.add(new URL(candidate).origin)
+      } catch {
+        // ignore
+      }
+    }
+    for (const addr of deps.serverMeta.addresses ?? []) {
+      try {
+        origins.add(new URL(addr.remoteUrl).origin)
+      } catch {
+        // ignore
+      }
+    }
+    return origins
+  }
+
   app.register(cors, {
     origin: (origin, cb) => {
       if (!origin) {
@@ -102,14 +134,8 @@ export function createHttpServer(deps: HttpServerDeps) {
         return
       }
 
-      let selfOrigin: string | null = null
-      try {
-        selfOrigin = new URL(deps.serverMeta.httpBaseUrl).origin
-      } catch {
-        selfOrigin = null
-      }
-
-      if (selfOrigin && origin === selfOrigin) {
+      const selfOrigins = getSelfOrigins()
+      if (selfOrigins.has(origin)) {
         cb(null, true)
         return
       }
@@ -120,7 +146,7 @@ export function createHttpServer(deps: HttpServerDeps) {
        }
 
        // When we bind to a non-loopback host (e.g., 0.0.0.0 or LAN IP), allow cross-origin UI access.
-       if (deps.host === "0.0.0.0" || !isLoopbackHost(deps.host)) {
+       if (deps.bindHost === "0.0.0.0" || !isLoopbackHost(deps.bindHost)) {
          cb(null, true)
          return
        }
@@ -222,6 +248,7 @@ export function createHttpServer(deps: HttpServerDeps) {
   registerFilesystemRoutes(app, { fileSystemBrowser: deps.fileSystemBrowser })
   registerMetaRoutes(app, { serverMeta: deps.serverMeta })
   registerEventRoutes(app, { eventBus: deps.eventBus, registerClient: registerSseClient, logger: sseLogger })
+  registerWorktreeRoutes(app, { workspaceManager: deps.workspaceManager })
   registerStorageRoutes(app, {
     instanceStore: deps.instanceStore,
     eventBus: deps.eventBus,
@@ -242,12 +269,12 @@ export function createHttpServer(deps: HttpServerDeps) {
     instance: app,
     start: async (): Promise<HttpServerStartResult> => {
       const attemptListen = async (requestedPort: number) => {
-        const addressInfo = await app.listen({ port: requestedPort, host: deps.host })
+        const addressInfo = await app.listen({ port: requestedPort, host: deps.bindHost })
         return { addressInfo, requestedPort }
       }
 
-      const autoPortRequested = deps.port === 0
-      const primaryPort = autoPortRequested ? DEFAULT_HTTP_PORT : deps.port
+      const autoPortRequested = deps.bindPort === 0
+      const primaryPort = autoPortRequested ? deps.defaultPort : deps.bindPort
 
       const shouldRetryWithEphemeral = (error: unknown) => {
         if (!autoPortRequested) return false
@@ -283,15 +310,10 @@ export function createHttpServer(deps: HttpServerDeps) {
         }
       }
 
-      const displayHost = deps.host === "127.0.0.1" ? "localhost" : deps.host
-      const serverUrl = `http://${displayHost}:${actualPort}`
+      const displayHost = deps.bindHost === "127.0.0.1" ? "localhost" : deps.bindHost
+      const serverUrl = `${deps.protocol}://${displayHost}:${actualPort}`
 
-      deps.serverMeta.httpBaseUrl = serverUrl
-      deps.serverMeta.host = deps.host
-      deps.serverMeta.port = actualPort
-      deps.serverMeta.listeningMode = deps.host === "0.0.0.0" || !isLoopbackHost(deps.host) ? "all" : "local"
-      deps.logger.info({ port: actualPort, host: deps.host }, "HTTP server listening")
-      console.log(`CodeNomad Server is ready at ${serverUrl}`)
+      deps.logger.info({ port: actualPort, host: deps.bindHost, protocol: deps.protocol }, "HTTP server listening")
 
       return { port: actualPort, url: serverUrl, displayHost }
     },
@@ -312,31 +334,36 @@ function registerInstanceProxyRoutes(app: FastifyInstance, deps: InstanceProxyDe
     instance.removeAllContentTypeParsers()
     instance.addContentTypeParser("*", (req, body, done) => done(null, body))
 
-    const proxyBaseHandler = async (request: FastifyRequest<{ Params: { id: string } }>, reply: FastifyReply) => {
-      await proxyWorkspaceRequest({
-        request,
-        reply,
-        workspaceManager: deps.workspaceManager,
-        pathSuffix: "",
-        logger: deps.logger,
-      })
-    }
-
-    const proxyWildcardHandler = async (
-      request: FastifyRequest<{ Params: { id: string; "*": string } }>,
+    const proxyBaseHandler = async (
+      request: FastifyRequest<{ Params: { id: string; slug: string } }>,
       reply: FastifyReply,
     ) => {
       await proxyWorkspaceRequest({
         request,
         reply,
         workspaceManager: deps.workspaceManager,
+        worktreeSlug: request.params.slug,
+        pathSuffix: "",
+        logger: deps.logger,
+      })
+    }
+
+    const proxyWildcardHandler = async (
+      request: FastifyRequest<{ Params: { id: string; slug: string; "*": string } }>,
+      reply: FastifyReply,
+    ) => {
+      await proxyWorkspaceRequest({
+        request,
+        reply,
+        workspaceManager: deps.workspaceManager,
+        worktreeSlug: request.params.slug,
         pathSuffix: request.params["*"] ?? "",
         logger: deps.logger,
       })
     }
 
-    instance.all("/workspaces/:id/instance", proxyBaseHandler)
-    instance.all("/workspaces/:id/instance/*", proxyWildcardHandler)
+    instance.all("/workspaces/:id/worktrees/:slug/instance", proxyBaseHandler)
+    instance.all("/workspaces/:id/worktrees/:slug/instance/*", proxyWildcardHandler)
   })
 }
 
@@ -347,12 +374,75 @@ async function proxyWorkspaceRequest(args: {
   reply: FastifyReply
   workspaceManager: WorkspaceManager
   logger: Logger
+  worktreeSlug: string
   pathSuffix?: string
 }) {
-  const { request, reply, workspaceManager, logger } = args
+  const { request, reply, workspaceManager, logger, worktreeSlug } = args
   const workspaceId = (request.params as { id: string }).id
   const workspace = workspaceManager.get(workspaceId)
 
+  const bodyToJson = (body: unknown): unknown => {
+    if (body == null) return null
+
+    const anyBody = body as any
+    if (anyBody && typeof anyBody.pipe === "function") {
+      // Don't consume streams (would break proxying).
+      // Best-effort: if the stream already has buffered chunks, parse those.
+      try {
+        const buffered = anyBody?._readableState?.buffer
+        if (Array.isArray(buffered) && buffered.length > 0) {
+          const chunks: Buffer[] = []
+          for (const entry of buffered) {
+            if (!entry) continue
+            if (Buffer.isBuffer(entry)) {
+              chunks.push(entry)
+              continue
+            }
+            const data = (entry as any).data
+            if (Buffer.isBuffer(data)) {
+              chunks.push(data)
+            }
+          }
+
+          if (chunks.length > 0) {
+            const text = Buffer.concat(chunks).toString("utf-8")
+            try {
+              return JSON.parse(text)
+            } catch {
+              return { __raw: text }
+            }
+          }
+        }
+      } catch {
+        // fall through
+      }
+
+      return { __stream: true }
+    }
+
+    const maybeParse = (input: string): unknown => {
+      try {
+        return JSON.parse(input)
+      } catch {
+        return { __raw: input }
+      }
+    }
+
+    if (Buffer.isBuffer(body)) {
+      return maybeParse(body.toString("utf-8"))
+    }
+
+    if (typeof body === "string") {
+      return maybeParse(body)
+    }
+
+    if (typeof body === "object") {
+      return body
+    }
+
+    return body
+  }
+
   if (!workspace) {
     reply.code(404).send({ error: "Workspace not found" })
     return
@@ -364,6 +454,23 @@ async function proxyWorkspaceRequest(args: {
     return
   }
 
+  if (!isValidWorktreeSlug(worktreeSlug)) {
+    reply.code(400).send({ error: "Invalid worktree slug" })
+    return
+  }
+
+  const directory = await resolveWorktreeDirectory({
+    workspaceId,
+    workspacePath: workspace.path,
+    worktreeSlug,
+    logger,
+  })
+
+  if (!directory) {
+    reply.code(404).send({ error: "Worktree not found" })
+    return
+  }
+
   const normalizedSuffix = normalizeInstanceSuffix(args.pathSuffix)
   const queryIndex = (request.raw.url ?? "").indexOf("?")
   const search = queryIndex >= 0 ? (request.raw.url ?? "").slice(queryIndex) : ""
@@ -380,6 +487,43 @@ async function proxyWorkspaceRequest(args: {
       if (instanceAuthHeader) {
         headers.authorization = instanceAuthHeader
       }
+
+      // OpenCode expects the *full* path; we send it via header to avoid query tampering.
+      const isNonASCII = /[^\x00-\x7F]/.test(directory)
+      const encodedDirectory = isNonASCII ? encodeURIComponent(directory) : directory
+
+      // Overwrite any client-provided value (case-insensitive headers are normalized by Node).
+      ;(headers as Record<string, unknown>)["x-opencode-directory"] = encodedDirectory
+
+      if (logger.isLevelEnabled("trace")) {
+        const outgoing: Record<string, unknown> = {}
+        for (const [key, value] of Object.entries(headers as Record<string, unknown>)) {
+          outgoing[key] = value
+        }
+
+        // Redact sensitive headers.
+        for (const key of Object.keys(outgoing)) {
+          const lower = key.toLowerCase()
+          if (lower === "authorization" || lower === "cookie" || lower === "set-cookie") {
+            outgoing[key] = "<redacted>"
+          }
+        }
+
+        logger.trace(
+          {
+            workspaceId,
+            method: request.method,
+            targetUrl,
+            worktreeSlug,
+            directory,
+            contentType: request.headers["content-type"],
+            body: bodyToJson(request.body),
+            headers: outgoing,
+          },
+          "Proxy -> OpenCode request",
+        )
+      }
+
       return headers
     },
     onError: (proxyReply, { error }) => {
@@ -399,6 +543,52 @@ function normalizeInstanceSuffix(pathSuffix: string | undefined) {
   return trimmed.length === 0 ? "/" : `/${trimmed}`
 }
 
+type WorktreeCacheEntry = {
+  expiresAt: number
+  repoRoot: string
+  worktrees: Array<{ slug: string; directory: string }>
+}
+
+const WORKTREE_CACHE_TTL_MS = 2000
+const worktreeCache = new Map<string, WorktreeCacheEntry>()
+
+async function getCachedWorktrees(params: { workspaceId: string; workspacePath: string; logger: Logger }) {
+  const cached = worktreeCache.get(params.workspaceId)
+  const now = Date.now()
+  if (cached && cached.expiresAt > now) {
+    return cached
+  }
+
+  const { repoRoot } = await resolveRepoRoot(params.workspacePath, params.logger)
+  const worktrees = await listWorktrees({ repoRoot, workspaceFolder: params.workspacePath, logger: params.logger })
+  const entry: WorktreeCacheEntry = {
+    expiresAt: now + WORKTREE_CACHE_TTL_MS,
+    repoRoot,
+    worktrees: worktrees.map((wt) => ({ slug: wt.slug, directory: wt.directory })),
+  }
+  worktreeCache.set(params.workspaceId, entry)
+  return entry
+}
+
+async function resolveWorktreeDirectory(params: {
+  workspaceId: string
+  workspacePath: string
+  worktreeSlug: string
+  logger: Logger
+}): Promise<string | null> {
+  const { worktreeSlug } = params
+  const cached = await getCachedWorktrees({ workspaceId: params.workspaceId, workspacePath: params.workspacePath, logger: params.logger })
+  const match = cached.worktrees.find((wt) => wt.slug === worktreeSlug)
+  if (match) {
+    return match.directory
+  }
+
+  // If the slug is new (e.g., created moments ago), refresh once.
+  worktreeCache.delete(params.workspaceId)
+  const refreshed = await getCachedWorktrees({ workspaceId: params.workspaceId, workspacePath: params.workspacePath, logger: params.logger })
+  return refreshed.worktrees.find((wt) => wt.slug === worktreeSlug)?.directory ?? null
+}
+
 function setupStaticUi(app: FastifyInstance, uiDir: string, authManager: AuthManager) {
   if (!uiDir) {
     app.log.warn("UI static directory not provided; API endpoints only")

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

@@ -0,0 +1,75 @@
+import os from "os"
+import type { NetworkAddress } from "../api-types"
+
+export function resolveNetworkAddresses(args: {
+  host: string
+  protocol: "http" | "https"
+  port: number
+}): NetworkAddress[] {
+  const { host, protocol, port } = args
+  const interfaces = os.networkInterfaces()
+  const seen = new Set<string>()
+  const results: NetworkAddress[] = []
+
+  const addAddress = (ip: string, scope: NetworkAddress["scope"]) => {
+    if (!ip || ip === "0.0.0.0") return
+    const key = `ipv4-${ip}`
+    if (seen.has(key)) return
+    seen.add(key)
+    results.push({ ip, family: "ipv4", scope, remoteUrl: `${protocol}://${ip}:${port}` })
+  }
+
+  const normalizeFamily = (value: string | number) => {
+    if (typeof value === "string") {
+      const lowered = value.toLowerCase()
+      if (lowered === "ipv4") {
+        return "ipv4" as const
+      }
+    }
+    if (value === 4) return "ipv4" as const
+    return null
+  }
+
+  if (host === "0.0.0.0") {
+    // Enumerate system interfaces (IPv4 only)
+    for (const entries of Object.values(interfaces)) {
+      if (!entries) continue
+      for (const entry of entries) {
+        const family = normalizeFamily(entry.family)
+        if (!family) continue
+        if (!entry.address || entry.address === "0.0.0.0") continue
+        const scope: NetworkAddress["scope"] = entry.internal ? "loopback" : "external"
+        addAddress(entry.address, scope)
+      }
+    }
+  }
+
+  // Always include loopback address
+  addAddress("127.0.0.1", "loopback")
+
+  // Include explicitly configured host if it was IPv4
+  if (isIPv4Address(host) && host !== "0.0.0.0") {
+    const isLoopback = host.startsWith("127.")
+    addAddress(host, isLoopback ? "loopback" : "external")
+  }
+
+  const scopeWeight: Record<NetworkAddress["scope"], number> = { external: 0, internal: 1, loopback: 2 }
+
+  return results.sort((a, b) => {
+    const scopeDelta = scopeWeight[a.scope] - scopeWeight[b.scope]
+    if (scopeDelta !== 0) return scopeDelta
+    return a.ip.localeCompare(b.ip)
+  })
+}
+
+function isIPv4Address(value: string | undefined): value is string {
+  if (!value) return false
+  const parts = value.split(".")
+  if (parts.length !== 4) return false
+  return parts.every((part) => {
+    if (part.length === 0 || part.length > 3) return false
+    if (!/^[0-9]+$/.test(part)) return false
+    const num = Number(part)
+    return Number.isInteger(num) && num >= 0 && num <= 255
+  })
+}

packages/server/src/server/routes/auth.ts

@@ -88,7 +88,7 @@ export function registerAuthRoutes(app: FastifyInstance, deps: RouteDeps) {
     }
 
     const session = deps.authManager.createSession(body.username)
-    deps.authManager.setSessionCookie(reply, session.id)
+    deps.authManager.setSessionCookieWithOptions(reply, session.id, { secure: isSecureRequest(request) })
     reply.send({ ok: true })
   })
 
@@ -112,12 +112,12 @@ export function registerAuthRoutes(app: FastifyInstance, deps: RouteDeps) {
 
     const username = deps.authManager.getStatus().username
     const session = deps.authManager.createSession(username)
-    deps.authManager.setSessionCookie(reply, session.id)
+    deps.authManager.setSessionCookieWithOptions(reply, session.id, { secure: isSecureRequest(request) })
     reply.send({ ok: true })
   })
 
-  app.post("/api/auth/logout", async (_request, reply) => {
-    deps.authManager.clearSessionCookie(reply)
+  app.post("/api/auth/logout", async (request, reply) => {
+    deps.authManager.clearSessionCookieWithOptions(reply, { secure: isSecureRequest(request) })
     reply.send({ ok: true })
   })
 
@@ -139,6 +139,13 @@ export function registerAuthRoutes(app: FastifyInstance, deps: RouteDeps) {
   })
 }
 
+function isSecureRequest(request: any) {
+  if (request.protocol === "https") {
+    return true
+  }
+  return Boolean(request.raw?.socket && request.raw.socket.encrypted)
+}
+
 function escapeHtml(value: string) {
   return value.replace(/[&<>"]/g, (char) => {
     switch (char) {

packages/server/src/server/routes/filesystem.ts

@@ -11,6 +11,11 @@ const FilesystemQuerySchema = z.object({
   includeFiles: z.coerce.boolean().optional(),
 })
 
+const FilesystemCreateFolderSchema = z.object({
+  parentPath: z.string().optional(),
+  name: z.string(),
+})
+
 export function registerFilesystemRoutes(app: FastifyInstance, deps: RouteDeps) {
   app.get("/api/filesystem", async (request, reply) => {
     const query = FilesystemQuerySchema.parse(request.query ?? {})
@@ -24,4 +29,26 @@ export function registerFilesystemRoutes(app: FastifyInstance, deps: RouteDeps)
       return { error: (error as Error).message }
     }
   })
+
+  app.post("/api/filesystem/folders", async (request, reply) => {
+    const body = FilesystemCreateFolderSchema.parse(request.body ?? {})
+
+    try {
+      const created = deps.fileSystemBrowser.createFolder(body.parentPath, body.name)
+      reply.code(201)
+      return created
+    } catch (error) {
+      const err = error as NodeJS.ErrnoException
+      if (err?.code === "EEXIST") {
+        reply.code(409).type("text/plain").send("Folder already exists")
+        return
+      }
+      if (err?.code === "EACCES" || err?.code === "EPERM") {
+        reply.code(403).type("text/plain").send("Permission denied")
+        return
+      }
+
+      reply.code(400).type("text/plain").send((error as Error).message)
+    }
+  })
 }

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

@@ -1,6 +1,6 @@
 import { FastifyInstance } from "fastify"
-import os from "os"
-import { NetworkAddress, ServerMeta } from "../../api-types"
+import { ServerMeta } from "../../api-types"
+import { resolveNetworkAddresses } from "../network-addresses"
 
 interface RouteDeps {
   serverMeta: ServerMeta
@@ -11,23 +11,25 @@ export function registerMetaRoutes(app: FastifyInstance, deps: RouteDeps) {
 }
 
 function buildMetaResponse(meta: ServerMeta): ServerMeta {
-  const port = resolvePort(meta)
-  const addresses = port > 0 ? resolveAddresses(port, meta.host) : []
+  const localPort = resolveLocalPort(meta)
+  const remote = resolveRemote(meta)
+  const addresses = remote && remote.port > 0 ? resolveNetworkAddresses({ host: meta.host, protocol: remote.protocol, port: remote.port }) : []
 
   return {
     ...meta,
-    port,
+    localPort,
+    remotePort: remote?.port,
     listeningMode: meta.host === "0.0.0.0" || !isLoopbackHost(meta.host) ? "all" : "local",
     addresses,
   }
 }
 
-function resolvePort(meta: ServerMeta): number {
-  if (Number.isInteger(meta.port) && meta.port > 0) {
-    return meta.port
+function resolveLocalPort(meta: ServerMeta): number {
+  if (Number.isInteger(meta.localPort) && meta.localPort > 0) {
+    return meta.localPort
   }
   try {
-    const parsed = new URL(meta.httpBaseUrl)
+    const parsed = new URL(meta.localUrl)
     const port = Number(parsed.port)
     return Number.isInteger(port) && port > 0 ? port : 0
   } catch {
@@ -35,74 +37,22 @@ function resolvePort(meta: ServerMeta): number {
   }
 }
 
+function resolveRemote(meta: ServerMeta): { protocol: "http" | "https"; port: number } | null {
+  if (!meta.remoteUrl) {
+    return null
+  }
+  try {
+    const parsed = new URL(meta.remoteUrl)
+    const protocol = parsed.protocol === "https:" ? "https" : "http"
+    const port = Number(parsed.port)
+    return { protocol, port: Number.isInteger(port) && port > 0 ? port : 0 }
+  } catch {
+    return null
+  }
+}
+
 function isLoopbackHost(host: string): boolean {
   return host === "127.0.0.1" || host === "::1" || host.startsWith("127.")
 }
 
-function resolveAddresses(port: number, host: string): NetworkAddress[] {
-  const interfaces = os.networkInterfaces()
-  const seen = new Set<string>()
-  const results: NetworkAddress[] = []
-
-  const addAddress = (ip: string, scope: NetworkAddress["scope"]) => {
-    if (!ip || ip === "0.0.0.0") return
-    const key = `ipv4-${ip}`
-    if (seen.has(key)) return
-    seen.add(key)
-    results.push({ ip, family: "ipv4", scope, url: `http://${ip}:${port}` })
-  }
-
-  const normalizeFamily = (value: string | number) => {
-    if (typeof value === "string") {
-      const lowered = value.toLowerCase()
-      if (lowered === "ipv4") {
-        return "ipv4" as const
-      }
-    }
-    if (value === 4) return "ipv4" as const
-    return null
-  }
-
-  if (host === "0.0.0.0") {
-    // Enumerate system interfaces (IPv4 only)
-    for (const entries of Object.values(interfaces)) {
-      if (!entries) continue
-      for (const entry of entries) {
-        const family = normalizeFamily(entry.family)
-        if (!family) continue
-        if (!entry.address || entry.address === "0.0.0.0") continue
-        const scope: NetworkAddress["scope"] = entry.internal ? "loopback" : "external"
-        addAddress(entry.address, scope)
-      }
-    }
-  }
-
-  // Always include loopback address
-  addAddress("127.0.0.1", "loopback")
-
-  // Include explicitly configured host if it was IPv4
-  if (isIPv4Address(host) && host !== "0.0.0.0") {
-    const isLoopback = host.startsWith("127.")
-    addAddress(host, isLoopback ? "loopback" : "external")
-  }
-
-  const scopeWeight: Record<NetworkAddress["scope"], number> = { external: 0, internal: 1, loopback: 2 }
-
-  return results.sort((a, b) => {
-    const scopeDelta = scopeWeight[a.scope] - scopeWeight[b.scope]
-    if (scopeDelta !== 0) return scopeDelta
-    return a.ip.localeCompare(b.ip)
-  })
-}
-
-function isIPv4Address(value: string | undefined): value is string {
-  if (!value) return false
-  const parts = value.split(".")
-  if (parts.length !== 4) return false
-  return parts.every((part) => {
-    if (part.length === 0 || part.length > 3) return false
-    if (!/^[0-9]+$/.test(part)) return false
-    const num = Number(part)
-    return Number.isInteger(num) && num >= 0 && num <= 255
-  })
-}
+// NetworkAddress shape is resolved in ../network-addresses

packages/server/src/server/routes/worktrees.ts

@@ -0,0 +1,195 @@
+import type { FastifyInstance, FastifyReply } from "fastify"
+import { z } from "zod"
+import { WorkspaceManager } from "../../workspaces/manager"
+import {
+  resolveRepoRoot,
+  listWorktrees,
+  isValidWorktreeSlug,
+  createManagedWorktree,
+  removeWorktree,
+} from "../../workspaces/git-worktrees"
+import type { WorktreeListResponse, WorktreeMap } from "../../api-types"
+import { ensureCodenomadGitExclude, readWorktreeMap, writeWorktreeMap } from "../../workspaces/worktree-map"
+
+interface RouteDeps {
+  workspaceManager: WorkspaceManager
+}
+
+const WorktreeMapSchema = z.object({
+  version: z.literal(1),
+  defaultWorktreeSlug: z.string().min(1).default("root"),
+  parentSessionWorktreeSlug: z.record(z.string(), z.string()).default({}),
+})
+
+const WorktreeCreateSchema = z.object({
+  slug: z.string().trim().min(1),
+  branch: z.string().trim().min(1).optional(),
+})
+
+export function registerWorktreeRoutes(app: FastifyInstance, deps: RouteDeps) {
+  app.get<{ Params: { id: string } }>("/api/workspaces/:id/worktrees", async (request, reply) => {
+    const workspace = deps.workspaceManager.get(request.params.id)
+    if (!workspace) {
+      reply.code(404)
+      return { error: "Workspace not found" }
+    }
+
+    const { repoRoot, isGitRepo } = await resolveRepoRoot(workspace.path, request.log)
+    const worktrees = await listWorktrees({ repoRoot, workspaceFolder: workspace.path, logger: request.log })
+    const response: WorktreeListResponse = { worktrees, isGitRepo }
+    return response
+  })
+
+  app.post<{ Params: { id: string } }>("/api/workspaces/:id/worktrees", async (request, reply) => {
+    const workspace = deps.workspaceManager.get(request.params.id)
+    if (!workspace) {
+      reply.code(404)
+      return { error: "Workspace not found" }
+    }
+
+    try {
+      const body = WorktreeCreateSchema.parse(request.body ?? {})
+      const slug = body.slug
+      if (!isValidWorktreeSlug(slug) || slug === "root") {
+        reply.code(400)
+        return { error: "Invalid worktree slug" }
+      }
+      if (body.branch) {
+        if (!isValidWorktreeSlug(body.branch) || body.branch === "root") {
+          reply.code(400)
+          return { error: "Invalid worktree branch" }
+        }
+        if (body.branch !== slug) {
+          reply.code(400)
+          return { error: "Branch must match slug" }
+        }
+      }
+
+      const { repoRoot, isGitRepo } = await resolveRepoRoot(workspace.path, request.log)
+      if (!isGitRepo) {
+        reply.code(400)
+        return { error: "Workspace is not a Git repository" }
+      }
+
+      await ensureCodenomadGitExclude(workspace.path, request.log).catch(() => undefined)
+
+      const created = await createManagedWorktree({
+        repoRoot,
+        workspaceFolder: workspace.path,
+        slug,
+        logger: request.log,
+      })
+
+      reply.code(201)
+      return created
+    } catch (error) {
+      return handleError(error, reply)
+    }
+  })
+
+  app.delete<{ Params: { id: string; slug: string }; Querystring: { force?: string } }>(
+    "/api/workspaces/:id/worktrees/:slug",
+    async (request, reply) => {
+    const workspace = deps.workspaceManager.get(request.params.id)
+    if (!workspace) {
+      reply.code(404)
+      return { error: "Workspace not found" }
+    }
+
+    const slug = (request.params.slug ?? "").trim()
+    if (!isValidWorktreeSlug(slug) || slug === "root") {
+      reply.code(400)
+      return { error: "Invalid worktree slug" }
+    }
+
+    const { repoRoot, isGitRepo } = await resolveRepoRoot(workspace.path, request.log)
+    if (!isGitRepo) {
+      reply.code(400)
+      return { error: "Workspace is not a Git repository" }
+    }
+
+    const force = (request.query?.force ?? "").toString().toLowerCase() === "true"
+
+    try {
+      const worktrees = await listWorktrees({ repoRoot, workspaceFolder: workspace.path, logger: request.log })
+      const match = worktrees.find((wt) => wt.slug === slug)
+      if (!match || match.kind === "root") {
+        reply.code(404)
+        return { error: "Worktree not found" }
+      }
+
+      await removeWorktree({ workspaceFolder: workspace.path, directory: match.directory, force, logger: request.log })
+
+      // Best-effort: prune any mappings that point at the deleted worktree.
+      const current = await readWorktreeMap(workspace.path, request.log)
+      let changed = false
+      const nextMapping: Record<string, string> = { ...(current.parentSessionWorktreeSlug ?? {}) }
+      for (const [sessionId, mapped] of Object.entries(nextMapping)) {
+        if (mapped === slug) {
+          delete nextMapping[sessionId]
+          changed = true
+        }
+      }
+      const nextDefault = current.defaultWorktreeSlug === slug ? "root" : current.defaultWorktreeSlug
+      if (nextDefault !== current.defaultWorktreeSlug) {
+        changed = true
+      }
+      if (changed) {
+        await writeWorktreeMap(
+          workspace.path,
+          {
+            version: 1,
+            defaultWorktreeSlug: nextDefault,
+            parentSessionWorktreeSlug: nextMapping,
+          },
+          request.log,
+        )
+      }
+
+      reply.code(204)
+    } catch (error) {
+      return handleError(error, reply)
+    }
+  },
+  )
+
+  app.get<{ Params: { id: string } }>("/api/workspaces/:id/worktrees/map", async (request, reply) => {
+    const workspace = deps.workspaceManager.get(request.params.id)
+    if (!workspace) {
+      reply.code(404)
+      return { error: "Workspace not found" }
+    }
+    return await readWorktreeMap(workspace.path, request.log)
+  })
+
+  app.put<{ Params: { id: string } }>("/api/workspaces/:id/worktrees/map", async (request, reply) => {
+    const workspace = deps.workspaceManager.get(request.params.id)
+    if (!workspace) {
+      reply.code(404)
+      return { error: "Workspace not found" }
+    }
+
+    try {
+      const parsed = WorktreeMapSchema.parse(request.body ?? {}) as WorktreeMap
+      if (!isValidWorktreeSlug(parsed.defaultWorktreeSlug)) {
+        reply.code(400)
+        return { error: "Invalid defaultWorktreeSlug" }
+      }
+      for (const slug of Object.values(parsed.parentSessionWorktreeSlug ?? {})) {
+        if (!isValidWorktreeSlug(slug)) {
+          reply.code(400)
+          return { error: "Invalid worktree slug in mapping" }
+        }
+      }
+      await writeWorktreeMap(workspace.path, parsed, request.log)
+      reply.code(204)
+    } catch (error) {
+      return handleError(error, reply)
+    }
+  })
+}
+
+function handleError(error: unknown, reply: FastifyReply) {
+  reply.code(400)
+  return { error: error instanceof Error ? error.message : "Unable to fulfill request" }
+}

packages/server/src/server/tls.ts

@@ -0,0 +1,283 @@
+import crypto from "crypto"
+import fs from "fs"
+import path from "path"
+import { createRequire } from "module"
+import type { Logger } from "../logger"
+
+const require = createRequire(import.meta.url)
+
+type Forge = typeof import("node-forge")
+
+function loadForge(): Forge {
+  // node-forge is CJS in many installs; require keeps this compatible with our ESM output.
+  return require("node-forge") as Forge
+}
+
+export interface ResolvedHttpsOptions {
+  httpsOptions: { key: string | Buffer; cert: string | Buffer; ca?: string | Buffer }
+  /** Path to CA certificate suitable for NODE_EXTRA_CA_CERTS. */
+  caCertPath?: string
+  mode: "provided" | "generated"
+}
+
+export interface ResolveHttpsOptionsArgs {
+  enabled: boolean
+  configDir: string
+  host: string
+  tlsKeyPath?: string
+  tlsCertPath?: string
+  tlsCaPath?: string
+  tlsSANs?: string
+  logger: Logger
+}
+
+const LEAF_VALIDITY_DAYS = 30
+const ROTATE_IF_EXPIRES_WITHIN_DAYS = 3
+
+const CA_VALIDITY_DAYS = 365
+
+export function resolveHttpsOptions(args: ResolveHttpsOptionsArgs): ResolvedHttpsOptions | null {
+  if (!args.enabled) {
+    return null
+  }
+
+  const hasProvided = Boolean(args.tlsKeyPath && args.tlsCertPath)
+  if (hasProvided) {
+    const key = fs.readFileSync(args.tlsKeyPath!, "utf-8")
+    const cert = fs.readFileSync(args.tlsCertPath!, "utf-8")
+    const ca = args.tlsCaPath ? fs.readFileSync(args.tlsCaPath, "utf-8") : undefined
+    return {
+      httpsOptions: { key, cert, ca },
+      caCertPath: args.tlsCaPath,
+      mode: "provided",
+    }
+  }
+
+  return ensureGeneratedTls(args)
+}
+
+function ensureGeneratedTls(args: ResolveHttpsOptionsArgs): ResolvedHttpsOptions {
+  const tlsDir = path.join(args.configDir, "tls")
+  const caKeyPath = path.join(tlsDir, "ca-key.pem")
+  const caCertPath = path.join(tlsDir, "ca-cert.pem")
+  const keyPath = path.join(tlsDir, "server-key.pem")
+  const certPath = path.join(tlsDir, "server-cert.pem")
+
+  fs.mkdirSync(tlsDir, { recursive: true })
+
+  const shouldRotateLeaf = () => {
+    try {
+      if (!fs.existsSync(certPath)) return true
+      const pem = fs.readFileSync(certPath, "utf-8")
+      const x509 = new crypto.X509Certificate(pem)
+      const validToMs = Date.parse(x509.validTo)
+      if (!Number.isFinite(validToMs)) return true
+      const rotateAt = validToMs - ROTATE_IF_EXPIRES_WITHIN_DAYS * 24 * 60 * 60 * 1000
+      return Date.now() >= rotateAt
+    } catch {
+      return true
+    }
+  }
+
+  const shouldRotateCa = () => {
+    try {
+      if (!fs.existsSync(caCertPath)) return true
+      const pem = fs.readFileSync(caCertPath, "utf-8")
+      const x509 = new crypto.X509Certificate(pem)
+      const validToMs = Date.parse(x509.validTo)
+      if (!Number.isFinite(validToMs)) return true
+      // CA rotates only when expired.
+      return Date.now() >= validToMs
+    } catch {
+      return true
+    }
+  }
+
+  if (shouldRotateCa() || !fs.existsSync(caKeyPath)) {
+    const { caKeyPem, caCertPem } = generateCaCertificate()
+    writePemFile(caKeyPath, caKeyPem, 0o600)
+    writePemFile(caCertPath, caCertPem, 0o644)
+    args.logger.info({ caCertPath }, "Generated self-signed CodeNomad CA certificate")
+  }
+
+  if (shouldRotateLeaf() || !fs.existsSync(keyPath)) {
+    const caKeyPem = fs.readFileSync(caKeyPath, "utf-8")
+    const caCertPem = fs.readFileSync(caCertPath, "utf-8")
+
+    const { keyPem, certPem } = generateServerCertificate({
+      host: args.host,
+      tlsSANs: args.tlsSANs,
+      caKeyPem,
+      caCertPem,
+    })
+
+    writePemFile(keyPath, keyPem, 0o600)
+    writePemFile(certPath, certPem, 0o644)
+    args.logger.info({ certPath }, "Generated CodeNomad HTTPS certificate")
+  }
+
+  const key = fs.readFileSync(keyPath, "utf-8")
+  const cert = fs.readFileSync(certPath, "utf-8")
+  const ca = fs.readFileSync(caCertPath, "utf-8")
+
+  // Present the CA as part of the chain.
+  const chainedCert = `${cert.trim()}\n${ca.trim()}\n`
+
+  return {
+    httpsOptions: {
+      key,
+      cert: chainedCert,
+    },
+    caCertPath,
+    mode: "generated",
+  }
+}
+
+function writePemFile(filePath: string, content: string, mode: number) {
+  fs.writeFileSync(filePath, content, { encoding: "utf-8", mode })
+  try {
+    fs.chmodSync(filePath, mode)
+  } catch {
+    // best effort on platforms that ignore chmod
+  }
+}
+
+function generateCaCertificate(): { caKeyPem: string; caCertPem: string } {
+  const forge = loadForge()
+
+  const keys = forge.pki.rsa.generateKeyPair(2048)
+  const cert = forge.pki.createCertificate()
+  cert.publicKey = keys.publicKey
+  cert.serialNumber = crypto.randomBytes(16).toString("hex")
+
+  const now = new Date()
+  const notBefore = new Date(now.getTime() - 60_000)
+  const notAfter = new Date(now.getTime() + CA_VALIDITY_DAYS * 24 * 60 * 60 * 1000)
+  cert.validity.notBefore = notBefore
+  cert.validity.notAfter = notAfter
+
+  const attrs = [{ name: "commonName", value: "CodeNomad Local CA" }]
+  cert.setSubject(attrs)
+  cert.setIssuer(attrs)
+
+  cert.setExtensions([
+    { name: "basicConstraints", cA: true },
+    { name: "keyUsage", keyCertSign: true, cRLSign: true, digitalSignature: true },
+    { name: "subjectKeyIdentifier" },
+  ])
+
+  cert.sign(keys.privateKey, forge.md.sha256.create())
+
+  return {
+    caKeyPem: forge.pki.privateKeyToPem(keys.privateKey),
+    caCertPem: forge.pki.certificateToPem(cert),
+  }
+}
+
+function generateServerCertificate(args: {
+  host: string
+  tlsSANs?: string
+  caKeyPem: string
+  caCertPem: string
+}): { keyPem: string; certPem: string } {
+  const forge = loadForge()
+
+  const caKey = forge.pki.privateKeyFromPem(args.caKeyPem)
+  const caCert = forge.pki.certificateFromPem(args.caCertPem)
+
+  const keys = forge.pki.rsa.generateKeyPair(2048)
+  const cert = forge.pki.createCertificate()
+  cert.publicKey = keys.publicKey
+  cert.serialNumber = crypto.randomBytes(16).toString("hex")
+
+  const now = new Date()
+  const notBefore = new Date(now.getTime() - 60_000)
+  const notAfter = new Date(now.getTime() + LEAF_VALIDITY_DAYS * 24 * 60 * 60 * 1000)
+  cert.validity.notBefore = notBefore
+  cert.validity.notAfter = notAfter
+
+  const commonName = pickCommonName(args.host)
+  cert.setSubject([{ name: "commonName", value: commonName }])
+  cert.setIssuer(caCert.subject.attributes)
+
+  const san = buildSubjectAltNames(args.host, args.tlsSANs)
+
+  cert.setExtensions([
+    { name: "basicConstraints", cA: false },
+    { name: "keyUsage", digitalSignature: true, keyEncipherment: true },
+    { name: "extKeyUsage", serverAuth: true },
+    { name: "subjectAltName", altNames: san },
+    { name: "subjectKeyIdentifier" },
+  ])
+
+  cert.sign(caKey, forge.md.sha256.create())
+
+  return {
+    keyPem: forge.pki.privateKeyToPem(keys.privateKey),
+    certPem: forge.pki.certificateToPem(cert),
+  }
+}
+
+function pickCommonName(host: string): string {
+  if (!host || host === "0.0.0.0") {
+    return "localhost"
+  }
+  if (host === "127.0.0.1") {
+    return "localhost"
+  }
+  return host
+}
+
+function buildSubjectAltNames(host: string, tlsSANs?: string): Array<{ type: number; value?: string; ip?: string }> {
+  const dns = new Set<string>()
+  const ips = new Set<string>()
+
+  dns.add("localhost")
+  ips.add("127.0.0.1")
+
+  if (host && host !== "0.0.0.0") {
+    if (isIPv4(host)) {
+      ips.add(host)
+    } else {
+      dns.add(host)
+    }
+  }
+
+  for (const token of splitList(tlsSANs)) {
+    if (isIPv4(token)) {
+      ips.add(token)
+    } else if (token) {
+      dns.add(token)
+    }
+  }
+
+  const altNames: Array<{ type: number; value?: string; ip?: string }> = []
+
+  // 2 = DNS, 7 = IP
+  for (const name of Array.from(dns)) {
+    altNames.push({ type: 2, value: name })
+  }
+  for (const ip of Array.from(ips)) {
+    altNames.push({ type: 7, ip })
+  }
+
+  return altNames
+}
+
+function splitList(input: string | undefined): string[] {
+  if (!input) return []
+  return input
+    .split(",")
+    .map((part) => part.trim())
+    .filter(Boolean)
+}
+
+function isIPv4(value: string): boolean {
+  const parts = value.split(".")
+  if (parts.length !== 4) return false
+  return parts.every((part) => {
+    if (!/^[0-9]+$/.test(part)) return false
+    const num = Number(part)
+    return Number.isInteger(num) && num >= 0 && num <= 255
+  })
+}

packages/server/src/ui/__tests__/remote-ui.test.ts

@@ -0,0 +1,58 @@
+import assert from "node:assert/strict"
+import { mkdtempSync, rmSync, writeFileSync } from "node:fs"
+import { mkdir } from "node:fs/promises"
+import os from "node:os"
+import path from "node:path"
+import { afterEach, beforeEach, describe, it } from "node:test"
+
+import type { Logger } from "../../logger"
+import { resolveUi } from "../remote-ui"
+
+const noopLogger: Logger = {
+  debug: () => {},
+  info: () => {},
+  warn: () => {},
+  error: () => {},
+  trace: () => {},
+  child: () => noopLogger,
+  isLevelEnabled: () => false,
+} as any
+
+let tempRoot: string
+
+beforeEach(() => {
+  tempRoot = mkdtempSync(path.join(os.tmpdir(), "codenomad-ui-test-"))
+})
+
+afterEach(() => {
+  rmSync(tempRoot, { recursive: true, force: true })
+})
+
+describe("resolveUi local version preference", () => {
+  it("prefers bundled when bundled version is higher", async () => {
+    const bundledDir = path.join(tempRoot, "bundled")
+    const configDir = path.join(tempRoot, "config")
+    const currentDir = path.join(configDir, "ui", "current")
+
+    await mkdir(bundledDir, { recursive: true })
+    await mkdir(currentDir, { recursive: true })
+
+    writeFileSync(path.join(bundledDir, "index.html"), "<html>bundled</html>")
+    writeFileSync(path.join(bundledDir, "ui-version.json"), JSON.stringify({ uiVersion: "0.8.1" }))
+
+    writeFileSync(path.join(currentDir, "index.html"), "<html>current</html>")
+    writeFileSync(path.join(currentDir, "ui-version.json"), JSON.stringify({ uiVersion: "0.8.0" }))
+
+    const result = await resolveUi({
+      serverVersion: "0.8.1",
+      bundledUiDir: bundledDir,
+      autoUpdate: false,
+      configDir,
+      logger: noopLogger,
+    })
+
+    assert.equal(result.source, "bundled")
+    assert.equal(result.uiStaticDir, bundledDir)
+    assert.equal(result.uiVersion, "0.8.1")
+  })
+})

packages/server/src/ui/remote-ui.ts

@@ -73,23 +73,13 @@ export async function resolveUi(options: RemoteUiOptions): Promise<UiResolution>
   const previousDir = path.join(uiRoot, "previous")
 
   if (!options.autoUpdate) {
-    const local = await resolveStaticUiDir(currentDir)
-    if (local) {
-      return {
-        uiStaticDir: local,
-        source: "downloaded",
-        uiVersion: await readUiVersion(local),
-        supported: true,
-      }
-    }
-
-    const bundled = await resolveStaticUiDir(options.bundledUiDir)
-    return {
-      uiStaticDir: bundled ?? options.bundledUiDir,
-      source: bundled ? "bundled" : "missing",
-      uiVersion: bundled ? await readUiVersion(bundled) : undefined,
+    return await resolveFromCacheOrBundled({
+      logger: options.logger,
+      bundledUiDir: options.bundledUiDir,
+      currentDir,
+      previousDir,
       supported: true,
-    }
+    })
   }
 
   let manifest: RemoteUiManifest | null = null
@@ -125,20 +115,28 @@ export async function resolveUi(options: RemoteUiOptions): Promise<UiResolution>
     })
   }
 
-  const currentVersion = await readUiVersion(currentDir)
-  if (currentVersion && currentVersion === manifest.latestUIVersion) {
-    const currentResolved = await resolveStaticUiDir(currentDir)
-    if (currentResolved) {
-      return {
-        uiStaticDir: currentResolved,
-        source: "downloaded",
-        uiVersion: currentVersion,
-        supported: true,
-        latestServerVersion: manifest.latestServerVersion,
-        latestServerUrl: manifest.latestServerUrl,
-        minServerVersion: manifest.minServerVersion,
-      }
-    }
+  const bestLocal = await pickBestLocalUi({
+    logger: options.logger,
+    bundledUiDir: options.bundledUiDir,
+    currentDir,
+    previousDir,
+  })
+
+  const remoteIsNewer =
+    !bestLocal ||
+    compareSemverMaybe(manifest.latestUIVersion, bestLocal.uiVersion) > 0
+
+  if (!remoteIsNewer) {
+    return await resolveFromCacheOrBundled({
+      logger: options.logger,
+      bundledUiDir: options.bundledUiDir,
+      currentDir,
+      previousDir,
+      supported: true,
+      latestServerVersion: manifest.latestServerVersion,
+      latestServerUrl: manifest.latestServerUrl,
+      minServerVersion: manifest.minServerVersion,
+    })
   }
 
   try {
@@ -206,40 +204,18 @@ async function resolveFromCacheOrBundled(args: {
   latestServerUrl?: string
   minServerVersion?: string
 }): Promise<UiResolution> {
-  const currentResolved = await resolveStaticUiDir(args.currentDir)
-  if (currentResolved) {
-    return {
-      uiStaticDir: currentResolved,
-      source: "downloaded",
-      uiVersion: await readUiVersion(currentResolved),
-      supported: args.supported,
-      message: args.message,
-      latestServerVersion: args.latestServerVersion,
-      latestServerUrl: args.latestServerUrl,
-      minServerVersion: args.minServerVersion,
-    }
-  }
+  const bestLocal = await pickBestLocalUi({
+    logger: args.logger,
+    bundledUiDir: args.bundledUiDir,
+    currentDir: args.currentDir,
+    previousDir: args.previousDir,
+  })
 
-  const previousResolved = await resolveStaticUiDir(args.previousDir)
-  if (previousResolved) {
+  if (bestLocal) {
     return {
-      uiStaticDir: previousResolved,
-      source: "previous",
-      uiVersion: await readUiVersion(previousResolved),
-      supported: args.supported,
-      message: args.message,
-      latestServerVersion: args.latestServerVersion,
-      latestServerUrl: args.latestServerUrl,
-      minServerVersion: args.minServerVersion,
-    }
-  }
-
-  const bundledResolved = await resolveStaticUiDir(args.bundledUiDir)
-  if (bundledResolved) {
-    return {
-      uiStaticDir: bundledResolved,
-      source: "bundled",
-      uiVersion: await readUiVersion(bundledResolved),
+      uiStaticDir: bestLocal.uiStaticDir,
+      source: bestLocal.source,
+      uiVersion: bestLocal.uiVersion,
       supported: args.supported,
       message: args.message,
       latestServerVersion: args.latestServerVersion,
@@ -260,6 +236,66 @@ async function resolveFromCacheOrBundled(args: {
   }
 }
 
+async function pickBestLocalUi(args: {
+  logger: Logger
+  bundledUiDir: string
+  currentDir: string
+  previousDir: string
+}): Promise<{ uiStaticDir: string; source: UiSource; uiVersion?: string } | null> {
+  const candidates: Array<{ uiStaticDir: string; source: UiSource; uiVersion?: string; priority: number }> = []
+
+  const currentResolved = await resolveStaticUiDir(args.currentDir)
+  if (currentResolved) {
+    candidates.push({
+      uiStaticDir: currentResolved,
+      source: "downloaded",
+      uiVersion: await readUiVersion(currentResolved),
+      priority: 2,
+    })
+  }
+
+  const bundledResolved = await resolveStaticUiDir(args.bundledUiDir)
+  if (bundledResolved) {
+    candidates.push({
+      uiStaticDir: bundledResolved,
+      source: "bundled",
+      uiVersion: await readUiVersion(bundledResolved),
+      priority: 1,
+    })
+  }
+
+  const previousResolved = await resolveStaticUiDir(args.previousDir)
+  if (previousResolved) {
+    candidates.push({
+      uiStaticDir: previousResolved,
+      source: "previous",
+      uiVersion: await readUiVersion(previousResolved),
+      priority: 0,
+    })
+  }
+
+  if (candidates.length === 0) {
+    return null
+  }
+
+  candidates.sort((a, b) => {
+    const versionCmp = compareSemverMaybe(a.uiVersion, b.uiVersion)
+    if (versionCmp !== 0) return -versionCmp
+    return b.priority - a.priority
+  })
+
+  const best = candidates[0]
+  if (!best) return null
+  return { uiStaticDir: best.uiStaticDir, source: best.source, uiVersion: best.uiVersion }
+}
+
+function compareSemverMaybe(a: string | undefined, b: string | undefined): number {
+  if (!a && !b) return 0
+  if (!a) return -1
+  if (!b) return 1
+  return compareSemverCore(a, b)
+}
+
 async function resolveStaticUiDir(uiDir: string): Promise<string | null> {
   try {
     const indexPath = path.join(uiDir, "index.html")

packages/server/src/workspaces/git-worktrees.ts

@@ -0,0 +1,241 @@
+import path from "path"
+import { spawn } from "child_process"
+import type { WorktreeDescriptor } from "../api-types"
+import { promises as fsp } from "fs"
+
+export interface LogLike {
+  debug?: (obj: any, msg?: string) => void
+  warn?: (obj: any, msg?: string) => void
+}
+
+type GitResult = { ok: true; stdout: string } | { ok: false; error: Error; stdout?: string; stderr?: string }
+
+function runGit(args: string[], cwd: string): Promise<GitResult> {
+  return new Promise((resolve) => {
+    const child = spawn("git", args, { cwd, stdio: ["ignore", "pipe", "pipe"] })
+    let stdout = ""
+    let stderr = ""
+
+    child.stdout?.on("data", (chunk) => {
+      stdout += chunk.toString()
+    })
+    child.stderr?.on("data", (chunk) => {
+      stderr += chunk.toString()
+    })
+    child.once("error", (error) => {
+      resolve({ ok: false, error, stdout, stderr })
+    })
+    child.once("close", (code) => {
+      if (code === 0) {
+        resolve({ ok: true, stdout })
+      } else {
+        const error = new Error(stderr.trim() || `git ${args.join(" ")} failed with code ${code}`)
+        resolve({ ok: false, error, stdout, stderr })
+      }
+    })
+  })
+}
+
+export async function resolveRepoRoot(folder: string, logger?: LogLike): Promise<{ repoRoot: string; isGitRepo: boolean }> {
+  const result = await runGit(["rev-parse", "--show-toplevel"], folder)
+  if (!result.ok) {
+    logger?.debug?.({ folder, err: result.error }, "Folder is not a Git repository; using workspace folder as root")
+    return { repoRoot: folder, isGitRepo: false }
+  }
+  const repoRoot = result.stdout.trim()
+  if (!repoRoot) {
+    return { repoRoot: folder, isGitRepo: false }
+  }
+  return { repoRoot, isGitRepo: true }
+}
+
+function parseWorktreePorcelain(output: string): Array<{ worktree: string; branch?: string; head?: string; detached?: boolean }> {
+  const records: Array<{ worktree: string; branch?: string; head?: string; detached?: boolean }> = []
+  const lines = output.split(/\r?\n/)
+  let current: { worktree?: string; branch?: string; head?: string; detached?: boolean } = {}
+
+  const flush = () => {
+    if (current.worktree) {
+      records.push({ worktree: current.worktree, branch: current.branch })
+    }
+    current = {}
+  }
+
+  for (const line of lines) {
+    const trimmed = line.trim()
+    if (!trimmed) {
+      flush()
+      continue
+    }
+    const [key, ...rest] = trimmed.split(" ")
+    const value = rest.join(" ").trim()
+    if (key === "worktree") {
+      current.worktree = value
+    } else if (key === "branch") {
+      // branch is like refs/heads/foo
+      current.branch = value.replace(/^refs\/heads\//, "")
+    } else if (key === "HEAD") {
+      current.head = value
+    } else if (key === "detached") {
+      current.detached = true
+    }
+  }
+  flush()
+  return records
+}
+
+export async function listWorktrees(params: {
+  repoRoot: string
+  workspaceFolder: string
+  logger?: LogLike
+}): Promise<WorktreeDescriptor[]> {
+  const { repoRoot, workspaceFolder, logger } = params
+  const rootDescriptor: WorktreeDescriptor = { slug: "root", directory: repoRoot, kind: "root" }
+
+  const result = await runGit(["worktree", "list", "--porcelain"], workspaceFolder)
+  if (!result.ok) {
+    logger?.debug?.({ repoRoot, err: result.error }, "Failed to list git worktrees; returning root only")
+    return [rootDescriptor]
+  }
+
+  const records = parseWorktreePorcelain(result.stdout)
+
+  const worktrees: WorktreeDescriptor[] = [rootDescriptor]
+  const seen = new Set<string>(["root"])
+
+  const normalizeSlug = (record: { branch?: string; head?: string; detached?: boolean; worktree: string }): string => {
+    const branch = (record.branch ?? "").trim()
+    if (branch) {
+      return branch
+    }
+    const head = (record.head ?? "").trim()
+    if (head && /^[0-9a-f]{7,40}$/i.test(head)) {
+      return `detached-${head.slice(0, 7)}`
+    }
+    // Fallback: stable-ish identifier derived from directory basename.
+    const base = path.basename(record.worktree || "")
+    return base ? `worktree-${base}` : "worktree"
+  }
+
+
+  for (const record of records) {
+    const abs = record.worktree
+    if (!abs || typeof abs !== "string") continue
+
+    // Skip the root record (we always expose it as slug="root").
+    if (path.resolve(abs) === path.resolve(repoRoot)) {
+      continue
+    }
+
+    const slug = normalizeSlug(record)
+    if (!slug || slug === "root") {
+      continue
+    }
+    if (seen.has(slug)) {
+      continue
+    }
+    seen.add(slug)
+    worktrees.push({ slug, directory: abs, kind: "worktree", branch: record.branch })
+  }
+
+  return worktrees
+}
+
+export function isValidWorktreeSlug(slug: string): boolean {
+  if (!slug) return false
+  const trimmed = slug.trim()
+  if (!trimmed) return false
+  if (trimmed.length > 200) return false
+  // Disallow control characters; allow branch-like slugs including '/'.
+  if (/[\x00-\x1F\x7F]/.test(trimmed)) return false
+  return true
+}
+
+export async function createManagedWorktree(params: {
+  repoRoot: string
+  workspaceFolder: string
+  slug: string
+  logger?: LogLike
+}): Promise<{ slug: string; directory: string; branch?: string }> {
+  const { repoRoot, workspaceFolder, logger } = params
+  const branch = params.slug.trim()
+
+  if (!branch || branch === "root" || !isValidWorktreeSlug(branch)) {
+    throw new Error("Invalid worktree slug")
+  }
+
+  const sanitizeDirName = (input: string): string => {
+    const normalized = input
+      .trim()
+      .replace(/[\\/]+/g, "-")
+      .replace(/\s+/g, "-")
+      .replace(/[^a-zA-Z0-9_.-]+/g, "-")
+      .replace(/-{2,}/g, "-")
+      .replace(/^-+|-+$/g, "")
+    return normalized || "worktree"
+  }
+
+  const worktreesDir = path.join(repoRoot, ".codenomad", "worktrees")
+  const targetDir = path.join(worktreesDir, sanitizeDirName(branch))
+  await fsp.mkdir(worktreesDir, { recursive: true })
+
+  try {
+    const stat = await fsp.stat(targetDir)
+    if (stat.isDirectory()) {
+      throw new Error("Worktree directory already exists")
+    }
+  } catch (error) {
+    const code = (error as NodeJS.ErrnoException).code
+    if (code !== "ENOENT") {
+      throw error
+    }
+  }
+
+  logger?.debug?.({ slug: branch, branch, targetDir }, "Creating managed git worktree")
+
+  // Prefer creating a new branch from HEAD.
+  const first = await runGit(["worktree", "add", "-b", branch, targetDir, "HEAD"], workspaceFolder)
+  if (first.ok) {
+    return { slug: branch, directory: targetDir, branch }
+  }
+
+  const message = first.stderr?.toLowerCase() ?? first.error.message.toLowerCase()
+  if (message.includes("already exists")) {
+    // If the branch already exists, add worktree for that branch.
+    const second = await runGit(["worktree", "add", targetDir, branch], workspaceFolder)
+    if (second.ok) {
+      return { slug: branch, directory: targetDir, branch }
+    }
+    throw second.error
+  }
+
+  throw first.error
+}
+
+export async function removeWorktree(params: {
+  workspaceFolder: string
+  directory: string
+  force?: boolean
+  logger?: LogLike
+}): Promise<void> {
+  const { workspaceFolder, logger } = params
+  const directory = (params.directory ?? "").trim()
+  if (!directory) {
+    throw new Error("Invalid worktree directory")
+  }
+  logger?.debug?.({ directory, force: Boolean(params.force) }, "Removing git worktree")
+
+  const args = ["worktree", "remove"]
+  if (params.force) {
+    args.push("--force")
+  }
+  args.push(directory)
+
+  const result = await runGit(args, workspaceFolder)
+  if (!result.ok) {
+    throw result.error
+  }
+
+  // Best-effort cleanup of stale metadata.
+  await runGit(["worktree", "prune"], workspaceFolder).catch(() => undefined)
+}

packages/server/src/workspaces/instance-events.ts

@@ -95,7 +95,7 @@ export class InstanceEventBridge {
   }
 
   private async consumeStream(workspaceId: string, port: number, signal: AbortSignal) {
-    const url = `http://${INSTANCE_HOST}:${port}/event`
+    const url = `http://${INSTANCE_HOST}:${port}/global/event`
 
     const headers: Record<string, string> = { Accept: "text/event-stream" }
     const authHeader = this.options.workspaceManager.getInstanceAuthorizationHeader(workspaceId)
@@ -165,8 +165,32 @@ export class InstanceEventBridge {
     }
 
     try {
-      const event = JSON.parse(payload) as InstanceStreamEvent
-      this.options.logger.debug({ workspaceId, eventType: event.type }, "Instance SSE event received")
+      const parsed = JSON.parse(payload) as any
+      if (!parsed || typeof parsed !== "object") {
+        this.options.logger.warn({ workspaceId, chunk: payload }, "Dropped malformed instance event")
+        return
+      }
+
+      // OpenCode SSE payload shapes vary across versions.
+      // Common variants:
+      // - { type, properties, ... }
+      // - { payload: { type, properties, ... }, directory: "/abs/path" }
+      // - { payload: { type, properties, ... } }
+      const base = parsed.payload && typeof parsed.payload === "object" ? parsed.payload : parsed
+
+      const event: InstanceStreamEvent | null = base && typeof base === "object" ? ({ ...base } as any) : null
+
+      // Attach directory when available (don't overwrite if already present).
+      if (event && !(event as any).directory && typeof (parsed as any).directory === "string") {
+        ;(event as any).directory = (parsed as any).directory
+      }
+
+      if (!event || typeof (event as any).type !== "string") {
+        this.options.logger.warn({ workspaceId, chunk: payload }, "Dropped malformed instance event")
+        return
+      }
+
+      this.options.logger.debug({ workspaceId, eventType: (event as any).type }, "Instance SSE event received")
       if (this.options.logger.isLevelEnabled("trace")) {
         this.options.logger.trace({ workspaceId, event }, "Instance SSE event payload")
       }

packages/server/src/workspaces/manager.ts

@@ -28,6 +28,8 @@ interface WorkspaceManagerOptions {
   eventBus: EventBus
   logger: Logger
   getServerBaseUrl: () => string
+  /** Optional CA bundle path to trust CodeNomad HTTPS certs. */
+  nodeExtraCaCertsPath?: string
 }
 
 interface WorkspaceRecord extends WorkspaceDescriptor {}
@@ -91,7 +93,7 @@ export class WorkspaceManager {
 
     this.options.logger.info({ workspaceId: id, folder: workspacePath, binary: resolvedBinaryPath }, "Creating workspace")
 
-    const proxyPath = `/workspaces/${id}/instance`
+    const proxyPath = `/workspaces/${id}/worktrees/root/instance`
 
 
     const descriptor: WorkspaceRecord = {
@@ -132,6 +134,7 @@ export class WorkspaceManager {
       OPENCODE_CONFIG_DIR: this.opencodeConfigDir,
       CODENOMAD_INSTANCE_ID: id,
       CODENOMAD_BASE_URL: this.options.getServerBaseUrl(),
+      ...(this.options.nodeExtraCaCertsPath ? { NODE_EXTRA_CA_CERTS: this.options.nodeExtraCaCertsPath } : {}),
       [OPENCODE_SERVER_USERNAME_ENV]: opencodeUsername,
       [OPENCODE_SERVER_PASSWORD_ENV]: opencodePassword,
     }
@@ -187,16 +190,27 @@ export class WorkspaceManager {
 
   async shutdown() {
     this.options.logger.info("Shutting down all workspaces")
+
+    const stopTasks: Array<Promise<void>> = []
+
     for (const [id, workspace] of this.workspaces) {
-      if (workspace.pid) {
-        this.options.logger.info({ workspaceId: id }, "Stopping workspace during shutdown")
-        await this.runtime.stop(id).catch((error) => {
-          this.options.logger.error({ workspaceId: id, err: error }, "Failed to stop workspace during shutdown")
-        })
-      } else {
+      if (!workspace.pid) {
         this.options.logger.debug({ workspaceId: id }, "Workspace already stopped")
+        continue
       }
+
+      this.options.logger.info({ workspaceId: id }, "Stopping workspace during shutdown")
+      stopTasks.push(
+        this.runtime.stop(id).catch((error) => {
+          this.options.logger.error({ workspaceId: id, err: error }, "Failed to stop workspace during shutdown")
+        }),
+      )
     }
+
+    if (stopTasks.length > 0) {
+      await Promise.allSettled(stopTasks)
+    }
+
     this.workspaces.clear()
     this.opencodeAuth.clear()
     this.options.logger.info("All workspaces cleared")

packages/server/src/workspaces/runtime.ts

@@ -1,4 +1,4 @@
-import { ChildProcess, spawn } from "child_process"
+import { ChildProcess, spawn, spawnSync } from "child_process"
 import { existsSync, statSync } from "fs"
 import path from "path"
 import { EventBus } from "../events/bus"
@@ -116,16 +116,32 @@ export class WorkspaceRuntime {
           folder: options.folder,
           binary: options.binaryPath,
           spawnCommand: spec.command,
-          spawnArgs: spec.args,
           commandLine,
-          env: redactEnvironment(env),
         },
         "Launching OpenCode process",
       )
+
+      this.logger.debug(
+        {
+          workspaceId: options.workspaceId,
+          spawnArgs: spec.args,
+        },
+        "OpenCode spawn args",
+      )
+
+      this.logger.trace(
+        {
+          workspaceId: options.workspaceId,
+          env: redactEnvironment(env),
+        },
+        "OpenCode spawn environment",
+      )
+      const detached = process.platform !== "win32"
       const child = spawn(spec.command, spec.args, {
         cwd: options.folder,
         env,
         stdio: ["ignore", "pipe", "pipe"],
+        detached,
         ...spec.options,
       })
 
@@ -259,10 +275,96 @@ export class WorkspaceRuntime {
     const child = managed.child
     this.logger.info({ workspaceId }, "Stopping OpenCode process")
 
+    const pid = child.pid
+    if (!pid) {
+      this.logger.warn({ workspaceId }, "Workspace process missing PID; cannot stop")
+      return
+    }
+
+    const isAlreadyExited = () => child.exitCode !== null || child.signalCode !== null
+
+    const tryKillPosixGroup = (signal: NodeJS.Signals) => {
+      try {
+        // Negative PID targets the process group (POSIX).
+        process.kill(-pid, signal)
+        return true
+      } catch (error) {
+        const err = error as NodeJS.ErrnoException
+        if (err?.code === "ESRCH") {
+          return true
+        }
+        this.logger.debug({ workspaceId, pid, err }, "Failed to signal POSIX process group")
+        return false
+      }
+    }
+
+    const tryKillSinglePid = (signal: NodeJS.Signals) => {
+      try {
+        process.kill(pid, signal)
+        return true
+      } catch (error) {
+        const err = error as NodeJS.ErrnoException
+        if (err?.code === "ESRCH") {
+          return true
+        }
+        this.logger.debug({ workspaceId, pid, err }, "Failed to signal workspace PID")
+        return false
+      }
+    }
+
+    const tryTaskkill = (force: boolean) => {
+      const args = ["/PID", String(pid), "/T"]
+      if (force) {
+        args.push("/F")
+      }
+
+      try {
+        const result = spawnSync("taskkill", args, { encoding: "utf8" })
+        const exitCode = result.status
+        if (exitCode === 0) {
+          return true
+        }
+        // If the PID is already gone, treat it as success.
+        const stderr = (result.stderr ?? "").toString().toLowerCase()
+        const stdout = (result.stdout ?? "").toString().toLowerCase()
+        const combined = `${stdout}\n${stderr}`
+        if (combined.includes("not found") || combined.includes("no running instance") || combined.includes("process") && combined.includes("not")) {
+          return true
+        }
+        this.logger.debug({ workspaceId, pid, exitCode, stderr: result.stderr, stdout: result.stdout }, "taskkill failed")
+        return false
+      } catch (error) {
+        this.logger.debug({ workspaceId, pid, err: error }, "taskkill failed to execute")
+        return false
+      }
+    }
+
+    const sendStopSignal = (signal: NodeJS.Signals) => {
+      if (process.platform === "win32") {
+        // Best-effort: terminate the whole process tree rooted at pid.
+        // Use /F only for escalation.
+        tryTaskkill(signal === "SIGKILL")
+        return
+      }
+
+      // Prefer process-group signaling so wrapper launchers (bun/node) don't orphan the real server.
+      const groupOk = tryKillPosixGroup(signal)
+      if (!groupOk) {
+        // Fallback to direct PID kill.
+        tryKillSinglePid(signal)
+      }
+    }
+
     await new Promise<void>((resolve, reject) => {
+      let escalationTimer: NodeJS.Timeout | null = null
+
       const cleanup = () => {
         child.removeListener("exit", onExit)
         child.removeListener("error", onError)
+        if (escalationTimer) {
+          clearTimeout(escalationTimer)
+          escalationTimer = null
+        }
       }
 
       const onExit = () => {
@@ -274,32 +376,30 @@ export class WorkspaceRuntime {
         reject(error)
       }
 
-      const resolveIfAlreadyExited = () => {
-        if (child.exitCode !== null || child.signalCode !== null) {
-          this.logger.debug({ workspaceId, exitCode: child.exitCode, signal: child.signalCode }, "Process already exited")
-          cleanup()
-          resolve()
-          return true
-        }
-        return false
+      if (isAlreadyExited()) {
+        this.logger.debug({ workspaceId, exitCode: child.exitCode, signal: child.signalCode }, "Process already exited")
+        cleanup()
+        resolve()
+        return
       }
 
       child.once("exit", onExit)
       child.once("error", onError)
 
-      if (resolveIfAlreadyExited()) {
-        return
-      }
+      this.logger.debug(
+        { workspaceId, pid, detached: process.platform !== "win32" },
+        "Sending SIGTERM to workspace process (tree/group)",
+      )
+      sendStopSignal("SIGTERM")
 
-      this.logger.debug({ workspaceId }, "Sending SIGTERM to workspace process")
-      child.kill("SIGTERM")
-      setTimeout(() => {
-        if (!child.killed) {
-          this.logger.warn({ workspaceId }, "Process did not stop after SIGTERM, force killing")
-          child.kill("SIGKILL")
-        } else {
-          this.logger.debug({ workspaceId }, "Workspace process stopped gracefully before SIGKILL timeout")
+      escalationTimer = setTimeout(() => {
+        escalationTimer = null
+        if (isAlreadyExited()) {
+          this.logger.debug({ workspaceId, pid }, "Workspace exited before SIGKILL escalation")
+          return
         }
+        this.logger.warn({ workspaceId, pid }, "Process did not stop after SIGTERM, escalating")
+        sendStopSignal("SIGKILL")
       }, 2000)
     })
   }

packages/server/src/workspaces/worktree-map.ts

@@ -0,0 +1,129 @@
+import fs from "fs"
+import { promises as fsp } from "fs"
+import path from "path"
+import type { WorktreeMap } from "../api-types"
+import { resolveRepoRoot } from "./git-worktrees"
+import type { LogLike } from "./git-worktrees"
+
+const DEFAULT_MAP: WorktreeMap = {
+  version: 1,
+  defaultWorktreeSlug: "root",
+  parentSessionWorktreeSlug: {},
+}
+
+function getMapPath(repoRoot: string): string {
+  return path.join(repoRoot, ".codenomad", "worktreeMap.json")
+}
+
+function getGitExcludePath(repoRoot: string): string {
+  return path.join(repoRoot, ".git", "info", "exclude")
+}
+
+async function ensureGitExclude(repoRoot: string, logger?: LogLike): Promise<void> {
+  const excludePath = getGitExcludePath(repoRoot)
+  try {
+    await fsp.mkdir(path.dirname(excludePath), { recursive: true })
+  } catch {
+    return
+  }
+
+  const entries = [
+    ".codenomad/worktrees/",
+    ".codenomad/worktreeMap.json",
+  ]
+
+  let existing = ""
+  try {
+    existing = await fsp.readFile(excludePath, "utf-8")
+  } catch (error) {
+    const code = (error as NodeJS.ErrnoException).code
+    if (code !== "ENOENT") {
+      logger?.debug?.({ err: error, excludePath }, "Failed to read .git/info/exclude")
+      return
+    }
+    existing = ""
+  }
+
+  const lines = new Set(existing.split(/\r?\n/).map((l) => l.trim()).filter(Boolean))
+  const missing = entries.filter((e) => !lines.has(e))
+  if (missing.length === 0) {
+    return
+  }
+
+  const header = existing.includes("# codenomad") ? "" : (existing.trim() ? "\n" : "") + "# codenomad\n"
+  const suffix = missing.map((e) => `${e}\n`).join("")
+  await fsp.writeFile(excludePath, `${existing}${header}${suffix}`, "utf-8")
+}
+
+export async function ensureCodenomadGitExclude(workspaceFolder: string, logger?: LogLike): Promise<void> {
+  const { repoRoot, isGitRepo } = await resolveRepoRoot(workspaceFolder, logger)
+  if (!isGitRepo) {
+    return
+  }
+  await ensureGitExclude(repoRoot, logger)
+}
+
+export async function readWorktreeMap(workspaceFolder: string, logger?: LogLike): Promise<WorktreeMap> {
+  const { repoRoot, isGitRepo } = await resolveRepoRoot(workspaceFolder, logger)
+  const filePath = getMapPath(repoRoot)
+  try {
+    const raw = await fsp.readFile(filePath, "utf-8")
+    const parsed = JSON.parse(raw)
+    if (!parsed || typeof parsed !== "object") {
+      return DEFAULT_MAP
+    }
+    const version = (parsed as any).version
+    if (version !== 1) {
+      return DEFAULT_MAP
+    }
+    const defaultWorktreeSlug = typeof (parsed as any).defaultWorktreeSlug === "string" ? (parsed as any).defaultWorktreeSlug : "root"
+    const parentSessionWorktreeSlug = (parsed as any).parentSessionWorktreeSlug
+    const mapping = parentSessionWorktreeSlug && typeof parentSessionWorktreeSlug === "object" ? parentSessionWorktreeSlug : {}
+    return {
+      version: 1,
+      defaultWorktreeSlug,
+      parentSessionWorktreeSlug: { ...mapping },
+    }
+  } catch (error) {
+    const code = (error as NodeJS.ErrnoException).code
+    if (code === "ENOENT") {
+      if (isGitRepo) {
+        // Best-effort ignore setup on first use.
+        await ensureGitExclude(repoRoot, logger).catch(() => undefined)
+      }
+      return DEFAULT_MAP
+    }
+    logger?.warn?.({ err: error, filePath }, "Failed to read worktree map")
+    return DEFAULT_MAP
+  }
+}
+
+export async function writeWorktreeMap(workspaceFolder: string, next: WorktreeMap, logger?: LogLike): Promise<void> {
+  const { repoRoot, isGitRepo } = await resolveRepoRoot(workspaceFolder, logger)
+  const filePath = getMapPath(repoRoot)
+  await fsp.mkdir(path.dirname(filePath), { recursive: true })
+
+  // Ensure ignore rules are present (local-only).
+  if (isGitRepo) {
+    await ensureGitExclude(repoRoot, logger).catch(() => undefined)
+  }
+
+  const payload: WorktreeMap = {
+    version: 1,
+    defaultWorktreeSlug: next.defaultWorktreeSlug || "root",
+    parentSessionWorktreeSlug: next.parentSessionWorktreeSlug ?? {},
+  }
+
+  // Write atomically.
+  const tmpPath = `${filePath}.${process.pid}.tmp`
+  await fsp.writeFile(tmpPath, JSON.stringify(payload, null, 2), "utf-8")
+  await fsp.rename(tmpPath, filePath)
+}
+
+export function worktreeMapExists(repoRoot: string): boolean {
+  try {
+    return fs.existsSync(getMapPath(repoRoot))
+  } catch {
+    return false
+  }
+}

packages/tauri-app/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@codenomad/tauri-app",
-  "version": "0.7.6",
+  "version": "0.10.3",
   "private": true,
+  "license": "MIT",
   "scripts": {
     "dev": "tauri dev",
     "dev:ui": "npm run dev --workspace @codenomad/ui",

packages/tauri-app/scripts/dev-prep.js

@@ -3,6 +3,7 @@
 const fs = require("fs")
 const path = require("path")
 const { execSync } = require("child_process")
+const { pathToFileURL } = require("url")
 
 const root = path.resolve(__dirname, "..")
 const workspaceRoot = path.resolve(root, "..", "..")
@@ -10,6 +11,20 @@ const uiRoot = path.resolve(root, "..", "ui")
 const uiDist = path.resolve(uiRoot, "src", "renderer", "dist")
 const uiLoadingDest = path.resolve(root, "src-tauri", "resources", "ui-loading")
 
+async function ensureMonacoAssets() {
+  const helperPath = path.join(uiRoot, "scripts", "monaco-public-assets.js")
+  const helperUrl = pathToFileURL(helperPath).href
+  const { copyMonacoPublicAssets } = await import(helperUrl)
+  copyMonacoPublicAssets({
+    uiRendererRoot: path.join(uiRoot, "src", "renderer"),
+    warn: (msg) => console.warn(`[dev-prep] ${msg}`),
+    sourceRoots: [
+      path.resolve(workspaceRoot, "node_modules", "monaco-editor", "min", "vs"),
+      path.resolve(uiRoot, "node_modules", "monaco-editor", "min", "vs"),
+    ],
+  })
+}
+
 function ensureUiBuild() {
   const loadingHtml = path.join(uiDist, "loading.html")
   if (fs.existsSync(loadingHtml)) {
@@ -42,5 +57,11 @@ function copyUiLoadingAssets() {
   console.log(`[dev-prep] copied loader bundle from ${uiDist}`)
 }
 
-ensureUiBuild()
-copyUiLoadingAssets()
+;(async () => {
+  await ensureMonacoAssets()
+  ensureUiBuild()
+  copyUiLoadingAssets()
+})().catch((err) => {
+  console.error("[dev-prep] failed:", err)
+  process.exit(1)
+})

packages/tauri-app/scripts/prebuild.js

@@ -2,6 +2,7 @@
 const fs = require("fs")
 const path = require("path")
 const { execSync } = require("child_process")
+const { pathToFileURL } = require("url")
 
 const root = path.resolve(__dirname, "..")
 const workspaceRoot = path.resolve(root, "..", "..")
@@ -37,6 +38,20 @@ const braceExpansionPath = path.join(
 
 const viteBinPath = path.join(uiRoot, "node_modules", ".bin", "vite")
 
+async function ensureMonacoAssets() {
+  const helperPath = path.join(uiRoot, "scripts", "monaco-public-assets.js")
+  const helperUrl = pathToFileURL(helperPath).href
+  const { copyMonacoPublicAssets } = await import(helperUrl)
+  copyMonacoPublicAssets({
+    uiRendererRoot: path.join(uiRoot, "src", "renderer"),
+    warn: (msg) => console.warn(`[prebuild] ${msg}`),
+    sourceRoots: [
+      path.resolve(workspaceRoot, "node_modules", "monaco-editor", "min", "vs"),
+      path.resolve(uiRoot, "node_modules", "monaco-editor", "min", "vs"),
+    ],
+  })
+}
+
 function ensureServerBuild() {
   const distPath = path.join(serverRoot, "dist")
   const publicPath = path.join(serverRoot, "public")
@@ -223,12 +238,18 @@ function copyUiLoadingAssets() {
   console.log(`[prebuild] prepared UI loading assets from ${uiDist}`)
 }
 
-ensureServerDevDependencies()
-ensureUiDevDependencies()
-ensureRollupPlatformBinary()
-ensureServerDependencies()
-ensureServerBuild()
-ensureUiBuild()
-copyServerArtifacts()
-stripNodeModuleBins()
-copyUiLoadingAssets()
+;(async () => {
+  ensureServerDevDependencies()
+  ensureUiDevDependencies()
+  await ensureMonacoAssets()
+  ensureRollupPlatformBinary()
+  ensureServerDependencies()
+  ensureServerBuild()
+  ensureUiBuild()
+  copyServerArtifacts()
+  stripNodeModuleBins()
+  copyUiLoadingAssets()
+})().catch((err) => {
+  console.error("[prebuild] failed:", err)
+  process.exit(1)
+})

packages/tauri-app/src-tauri/Cargo.toml

@@ -2,6 +2,7 @@
 name = "codenomad-tauri"
 version = "0.1.0"
 edition = "2021"
+license = "MIT"
 
 [build-dependencies]
 tauri-build = { version = "2.5.2", features = [] }
@@ -21,3 +22,5 @@ tauri-plugin-dialog = "2"
 dirs = "5"
 tauri-plugin-opener = "2"
 url = "2"
+tauri-plugin-keepawake = "0.1.1"
+tauri-plugin-notification = "2"

packages/tauri-app/src-tauri/capabilities/main-window.json

@@ -3,7 +3,7 @@
   "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:*"]
+    "urls": ["http://127.0.0.1:*", "http://localhost:*", "http://tauri.localhost/*", "https://tauri.localhost/*"]
   },
   "windows": ["main"],
   "permissions": [
@@ -11,6 +11,10 @@
     "core:menu:default",
     "dialog:allow-open",
     "opener:allow-default-urls",
+    "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/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:*"]},"local":true,"windows":["main"],"permissions":["core:default","core:menu:default","dialog:allow-open","opener:allow-default-urls","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","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/desktop-schema.json

@@ -2378,6 +2378,234 @@
           "const": "dialog:deny-save",
           "markdownDescription": "Denies the save command without any pre-configured scope."
         },
+        {
+          "description": "Default permissions for the plugin\n#### This default permission set includes:\n\n- `allow-start`\n- `allow-stop`",
+          "type": "string",
+          "const": "keepawake:default",
+          "markdownDescription": "Default permissions for the plugin\n#### This default permission set includes:\n\n- `allow-start`\n- `allow-stop`"
+        },
+        {
+          "description": "Enables the start command without any pre-configured scope.",
+          "type": "string",
+          "const": "keepawake:allow-start",
+          "markdownDescription": "Enables the start command without any pre-configured scope."
+        },
+        {
+          "description": "Enables the stop command without any pre-configured scope.",
+          "type": "string",
+          "const": "keepawake:allow-stop",
+          "markdownDescription": "Enables the stop command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the start command without any pre-configured scope.",
+          "type": "string",
+          "const": "keepawake:deny-start",
+          "markdownDescription": "Denies the start command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the stop command without any pre-configured scope.",
+          "type": "string",
+          "const": "keepawake:deny-stop",
+          "markdownDescription": "Denies the stop 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",
+          "const": "notification:default",
+          "markdownDescription": "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`"
+        },
+        {
+          "description": "Enables the batch command without any pre-configured scope.",
+          "type": "string",
+          "const": "notification:allow-batch",
+          "markdownDescription": "Enables the batch command without any pre-configured scope."
+        },
+        {
+          "description": "Enables the cancel command without any pre-configured scope.",
+          "type": "string",
+          "const": "notification:allow-cancel",
+          "markdownDescription": "Enables the cancel command without any pre-configured scope."
+        },
+        {
+          "description": "Enables the check_permissions command without any pre-configured scope.",
+          "type": "string",
+          "const": "notification:allow-check-permissions",
+          "markdownDescription": "Enables the check_permissions command without any pre-configured scope."
+        },
+        {
+          "description": "Enables the create_channel command without any pre-configured scope.",
+          "type": "string",
+          "const": "notification:allow-create-channel",
+          "markdownDescription": "Enables the create_channel command without any pre-configured scope."
+        },
+        {
+          "description": "Enables the delete_channel command without any pre-configured scope.",
+          "type": "string",
+          "const": "notification:allow-delete-channel",
+          "markdownDescription": "Enables the delete_channel command without any pre-configured scope."
+        },
+        {
+          "description": "Enables the get_active command without any pre-configured scope.",
+          "type": "string",
+          "const": "notification:allow-get-active",
+          "markdownDescription": "Enables the get_active command without any pre-configured scope."
+        },
+        {
+          "description": "Enables the get_pending command without any pre-configured scope.",
+          "type": "string",
+          "const": "notification:allow-get-pending",
+          "markdownDescription": "Enables the get_pending command without any pre-configured scope."
+        },
+        {
+          "description": "Enables the is_permission_granted command without any pre-configured scope.",
+          "type": "string",
+          "const": "notification:allow-is-permission-granted",
+          "markdownDescription": "Enables the is_permission_granted command without any pre-configured scope."
+        },
+        {
+          "description": "Enables the list_channels command without any pre-configured scope.",
+          "type": "string",
+          "const": "notification:allow-list-channels",
+          "markdownDescription": "Enables the list_channels command without any pre-configured scope."
+        },
+        {
+          "description": "Enables the notify command without any pre-configured scope.",
+          "type": "string",
+          "const": "notification:allow-notify",
+          "markdownDescription": "Enables the notify command without any pre-configured scope."
+        },
+        {
+          "description": "Enables the permission_state command without any pre-configured scope.",
+          "type": "string",
+          "const": "notification:allow-permission-state",
+          "markdownDescription": "Enables the permission_state command without any pre-configured scope."
+        },
+        {
+          "description": "Enables the register_action_types command without any pre-configured scope.",
+          "type": "string",
+          "const": "notification:allow-register-action-types",
+          "markdownDescription": "Enables the register_action_types command without any pre-configured scope."
+        },
+        {
+          "description": "Enables the register_listener command without any pre-configured scope.",
+          "type": "string",
+          "const": "notification:allow-register-listener",
+          "markdownDescription": "Enables the register_listener command without any pre-configured scope."
+        },
+        {
+          "description": "Enables the remove_active command without any pre-configured scope.",
+          "type": "string",
+          "const": "notification:allow-remove-active",
+          "markdownDescription": "Enables the remove_active command without any pre-configured scope."
+        },
+        {
+          "description": "Enables the request_permission command without any pre-configured scope.",
+          "type": "string",
+          "const": "notification:allow-request-permission",
+          "markdownDescription": "Enables the request_permission command without any pre-configured scope."
+        },
+        {
+          "description": "Enables the show command without any pre-configured scope.",
+          "type": "string",
+          "const": "notification:allow-show",
+          "markdownDescription": "Enables the show command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the batch command without any pre-configured scope.",
+          "type": "string",
+          "const": "notification:deny-batch",
+          "markdownDescription": "Denies the batch command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the cancel command without any pre-configured scope.",
+          "type": "string",
+          "const": "notification:deny-cancel",
+          "markdownDescription": "Denies the cancel command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the check_permissions command without any pre-configured scope.",
+          "type": "string",
+          "const": "notification:deny-check-permissions",
+          "markdownDescription": "Denies the check_permissions command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the create_channel command without any pre-configured scope.",
+          "type": "string",
+          "const": "notification:deny-create-channel",
+          "markdownDescription": "Denies the create_channel command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the delete_channel command without any pre-configured scope.",
+          "type": "string",
+          "const": "notification:deny-delete-channel",
+          "markdownDescription": "Denies the delete_channel command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the get_active command without any pre-configured scope.",
+          "type": "string",
+          "const": "notification:deny-get-active",
+          "markdownDescription": "Denies the get_active command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the get_pending command without any pre-configured scope.",
+          "type": "string",
+          "const": "notification:deny-get-pending",
+          "markdownDescription": "Denies the get_pending command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the is_permission_granted command without any pre-configured scope.",
+          "type": "string",
+          "const": "notification:deny-is-permission-granted",
+          "markdownDescription": "Denies the is_permission_granted command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the list_channels command without any pre-configured scope.",
+          "type": "string",
+          "const": "notification:deny-list-channels",
+          "markdownDescription": "Denies the list_channels command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the notify command without any pre-configured scope.",
+          "type": "string",
+          "const": "notification:deny-notify",
+          "markdownDescription": "Denies the notify command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the permission_state command without any pre-configured scope.",
+          "type": "string",
+          "const": "notification:deny-permission-state",
+          "markdownDescription": "Denies the permission_state command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the register_action_types command without any pre-configured scope.",
+          "type": "string",
+          "const": "notification:deny-register-action-types",
+          "markdownDescription": "Denies the register_action_types command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the register_listener command without any pre-configured scope.",
+          "type": "string",
+          "const": "notification:deny-register-listener",
+          "markdownDescription": "Denies the register_listener command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the remove_active command without any pre-configured scope.",
+          "type": "string",
+          "const": "notification:deny-remove-active",
+          "markdownDescription": "Denies the remove_active command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the request_permission command without any pre-configured scope.",
+          "type": "string",
+          "const": "notification:deny-request-permission",
+          "markdownDescription": "Denies the request_permission command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the show command without any pre-configured scope.",
+          "type": "string",
+          "const": "notification:deny-show",
+          "markdownDescription": "Denies the show command without any pre-configured scope."
+        },
         {
           "description": "This permission set allows opening `mailto:`, `tel:`, `https://` and `http://` urls using their default application\nas well as reveal file in directories using default file explorer\n#### This default permission set includes:\n\n- `allow-open-url`\n- `allow-reveal-item-in-dir`\n- `allow-default-urls`",
           "type": "string",

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

@@ -2378,6 +2378,234 @@
           "const": "dialog:deny-save",
           "markdownDescription": "Denies the save command without any pre-configured scope."
         },
+        {
+          "description": "Default permissions for the plugin\n#### This default permission set includes:\n\n- `allow-start`\n- `allow-stop`",
+          "type": "string",
+          "const": "keepawake:default",
+          "markdownDescription": "Default permissions for the plugin\n#### This default permission set includes:\n\n- `allow-start`\n- `allow-stop`"
+        },
+        {
+          "description": "Enables the start command without any pre-configured scope.",
+          "type": "string",
+          "const": "keepawake:allow-start",
+          "markdownDescription": "Enables the start command without any pre-configured scope."
+        },
+        {
+          "description": "Enables the stop command without any pre-configured scope.",
+          "type": "string",
+          "const": "keepawake:allow-stop",
+          "markdownDescription": "Enables the stop command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the start command without any pre-configured scope.",
+          "type": "string",
+          "const": "keepawake:deny-start",
+          "markdownDescription": "Denies the start command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the stop command without any pre-configured scope.",
+          "type": "string",
+          "const": "keepawake:deny-stop",
+          "markdownDescription": "Denies the stop 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",
+          "const": "notification:default",
+          "markdownDescription": "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`"
+        },
+        {
+          "description": "Enables the batch command without any pre-configured scope.",
+          "type": "string",
+          "const": "notification:allow-batch",
+          "markdownDescription": "Enables the batch command without any pre-configured scope."
+        },
+        {
+          "description": "Enables the cancel command without any pre-configured scope.",
+          "type": "string",
+          "const": "notification:allow-cancel",
+          "markdownDescription": "Enables the cancel command without any pre-configured scope."
+        },
+        {
+          "description": "Enables the check_permissions command without any pre-configured scope.",
+          "type": "string",
+          "const": "notification:allow-check-permissions",
+          "markdownDescription": "Enables the check_permissions command without any pre-configured scope."
+        },
+        {
+          "description": "Enables the create_channel command without any pre-configured scope.",
+          "type": "string",
+          "const": "notification:allow-create-channel",
+          "markdownDescription": "Enables the create_channel command without any pre-configured scope."
+        },
+        {
+          "description": "Enables the delete_channel command without any pre-configured scope.",
+          "type": "string",
+          "const": "notification:allow-delete-channel",
+          "markdownDescription": "Enables the delete_channel command without any pre-configured scope."
+        },
+        {
+          "description": "Enables the get_active command without any pre-configured scope.",
+          "type": "string",
+          "const": "notification:allow-get-active",
+          "markdownDescription": "Enables the get_active command without any pre-configured scope."
+        },
+        {
+          "description": "Enables the get_pending command without any pre-configured scope.",
+          "type": "string",
+          "const": "notification:allow-get-pending",
+          "markdownDescription": "Enables the get_pending command without any pre-configured scope."
+        },
+        {
+          "description": "Enables the is_permission_granted command without any pre-configured scope.",
+          "type": "string",
+          "const": "notification:allow-is-permission-granted",
+          "markdownDescription": "Enables the is_permission_granted command without any pre-configured scope."
+        },
+        {
+          "description": "Enables the list_channels command without any pre-configured scope.",
+          "type": "string",
+          "const": "notification:allow-list-channels",
+          "markdownDescription": "Enables the list_channels command without any pre-configured scope."
+        },
+        {
+          "description": "Enables the notify command without any pre-configured scope.",
+          "type": "string",
+          "const": "notification:allow-notify",
+          "markdownDescription": "Enables the notify command without any pre-configured scope."
+        },
+        {
+          "description": "Enables the permission_state command without any pre-configured scope.",
+          "type": "string",
+          "const": "notification:allow-permission-state",
+          "markdownDescription": "Enables the permission_state command without any pre-configured scope."
+        },
+        {
+          "description": "Enables the register_action_types command without any pre-configured scope.",
+          "type": "string",
+          "const": "notification:allow-register-action-types",
+          "markdownDescription": "Enables the register_action_types command without any pre-configured scope."
+        },
+        {
+          "description": "Enables the register_listener command without any pre-configured scope.",
+          "type": "string",
+          "const": "notification:allow-register-listener",
+          "markdownDescription": "Enables the register_listener command without any pre-configured scope."
+        },
+        {
+          "description": "Enables the remove_active command without any pre-configured scope.",
+          "type": "string",
+          "const": "notification:allow-remove-active",
+          "markdownDescription": "Enables the remove_active command without any pre-configured scope."
+        },
+        {
+          "description": "Enables the request_permission command without any pre-configured scope.",
+          "type": "string",
+          "const": "notification:allow-request-permission",
+          "markdownDescription": "Enables the request_permission command without any pre-configured scope."
+        },
+        {
+          "description": "Enables the show command without any pre-configured scope.",
+          "type": "string",
+          "const": "notification:allow-show",
+          "markdownDescription": "Enables the show command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the batch command without any pre-configured scope.",
+          "type": "string",
+          "const": "notification:deny-batch",
+          "markdownDescription": "Denies the batch command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the cancel command without any pre-configured scope.",
+          "type": "string",
+          "const": "notification:deny-cancel",
+          "markdownDescription": "Denies the cancel command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the check_permissions command without any pre-configured scope.",
+          "type": "string",
+          "const": "notification:deny-check-permissions",
+          "markdownDescription": "Denies the check_permissions command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the create_channel command without any pre-configured scope.",
+          "type": "string",
+          "const": "notification:deny-create-channel",
+          "markdownDescription": "Denies the create_channel command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the delete_channel command without any pre-configured scope.",
+          "type": "string",
+          "const": "notification:deny-delete-channel",
+          "markdownDescription": "Denies the delete_channel command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the get_active command without any pre-configured scope.",
+          "type": "string",
+          "const": "notification:deny-get-active",
+          "markdownDescription": "Denies the get_active command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the get_pending command without any pre-configured scope.",
+          "type": "string",
+          "const": "notification:deny-get-pending",
+          "markdownDescription": "Denies the get_pending command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the is_permission_granted command without any pre-configured scope.",
+          "type": "string",
+          "const": "notification:deny-is-permission-granted",
+          "markdownDescription": "Denies the is_permission_granted command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the list_channels command without any pre-configured scope.",
+          "type": "string",
+          "const": "notification:deny-list-channels",
+          "markdownDescription": "Denies the list_channels command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the notify command without any pre-configured scope.",
+          "type": "string",
+          "const": "notification:deny-notify",
+          "markdownDescription": "Denies the notify command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the permission_state command without any pre-configured scope.",
+          "type": "string",
+          "const": "notification:deny-permission-state",
+          "markdownDescription": "Denies the permission_state command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the register_action_types command without any pre-configured scope.",
+          "type": "string",
+          "const": "notification:deny-register-action-types",
+          "markdownDescription": "Denies the register_action_types command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the register_listener command without any pre-configured scope.",
+          "type": "string",
+          "const": "notification:deny-register-listener",
+          "markdownDescription": "Denies the register_listener command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the remove_active command without any pre-configured scope.",
+          "type": "string",
+          "const": "notification:deny-remove-active",
+          "markdownDescription": "Denies the remove_active command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the request_permission command without any pre-configured scope.",
+          "type": "string",
+          "const": "notification:deny-request-permission",
+          "markdownDescription": "Denies the request_permission command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the show command without any pre-configured scope.",
+          "type": "string",
+          "const": "notification:deny-show",
+          "markdownDescription": "Denies the show command without any pre-configured scope."
+        },
         {
           "description": "This permission set allows opening `mailto:`, `tel:`, `https://` and `http://` urls using their default application\nas well as reveal file in directories using default file explorer\n#### This default permission set includes:\n\n- `allow-open-url`\n- `allow-reveal-item-in-dir`\n- `allow-default-urls`",
           "type": "string",

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

@@ -34,6 +34,8 @@ fn workspace_root() -> Option<PathBuf> {
 
 const SESSION_COOKIE_NAME: &str = "codenomad_session";
 
+const CLI_STOP_GRACE_SECS: u64 = 30;
+
 fn navigate_main(app: &AppHandle, url: &str) {
     if let Some(win) = app.webview_windows().get("main") {
         let mut display = url.to_string();
@@ -276,6 +278,7 @@ impl CliProcessManager {
     pub fn stop(&self) -> anyhow::Result<()> {
         let mut child_opt = self.child.lock();
         if let Some(mut child) = child_opt.take() {
+            log_line(&format!("stopping CLI pid={}", child.id()));
             #[cfg(unix)]
             unsafe {
                 libc::kill(child.id() as i32, libc::SIGTERM);
@@ -290,7 +293,12 @@ impl CliProcessManager {
                 match child.try_wait() {
                     Ok(Some(_)) => break,
                     Ok(None) => {
-                        if start.elapsed() > Duration::from_secs(4) {
+                        if start.elapsed() > Duration::from_secs(CLI_STOP_GRACE_SECS) {
+                            log_line(&format!(
+                                "stop timed out after {}s; sending SIGKILL pid={}",
+                                CLI_STOP_GRACE_SECS,
+                                child.id()
+                            ));
                             #[cfg(unix)]
                             unsafe {
                                 libc::kill(child.id() as i32, libc::SIGKILL);
@@ -456,13 +464,33 @@ impl CliProcessManager {
         let status_clone = status.clone();
         let app_clone = app.clone();
         thread::spawn(move || {
-            let code = {
-                let mut guard = child_holder.lock();
-                if let Some(child) = guard.as_mut() {
-                    child.wait().ok()
-                } else {
-                    None
+            // Do not hold the child mutex while waiting for process exit.
+            // Holding the lock across `wait()` deadlocks `stop()`, which needs the
+            // same lock to send SIGTERM/SIGKILL when the user quits the app.
+            let code = loop {
+                let maybe_exited = {
+                    let mut guard = child_holder.lock();
+                    if guard.is_none() {
+                        return;
+                    }
+                    match guard
+                        .as_mut()
+                        .and_then(|child| child.try_wait().ok().flatten())
+                    {
+                        Some(status) => {
+                            // Drop the handle after the process exits so other callers
+                            // don't attempt to stop/kill a finished process.
+                            *guard = None;
+                            Some(status)
+                        }
+                        None => None,
+                    }
+                };
+
+                if let Some(status) = maybe_exited {
+                    break Some(status);
                 }
+                thread::sleep(Duration::from_millis(100));
             };
 
             let mut locked = status_clone.lock();
@@ -503,7 +531,7 @@ impl CliProcessManager {
         bootstrap_token: &Arc<Mutex<Option<String>>>,
     ) {
         let mut buffer = String::new();
-        let port_regex = Regex::new(r"CodeNomad Server is ready at http://[^:]+:(\d+)").ok();
+        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 token_prefix = "CODENOMAD_BOOTSTRAP_TOKEN:";
 
@@ -531,12 +559,12 @@ impl CliProcessManager {
                             continue;
                         }
 
-                        if let Some(port) = port_regex
+                        if let Some(url) = local_url_regex
                             .as_ref()
                             .and_then(|re| re.captures(line).and_then(|c| c.get(1)))
-                            .and_then(|m| m.as_str().parse::<u16>().ok())
+                            .map(|m| m.as_str().to_string())
                         {
-                            Self::mark_ready(app, status, ready, bootstrap_token, port);
+                            Self::mark_ready(app, status, ready, bootstrap_token, url);
                             continue;
                         }
 
@@ -546,13 +574,13 @@ impl CliProcessManager {
                                 .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, port);
+                                Self::mark_ready(app, status, ready, bootstrap_token, format!("http://localhost:{port}"));
                                 continue;
                             }
 
                             if let Ok(value) = serde_json::from_str::<serde_json::Value>(line) {
                                 if let Some(port) = value.get("port").and_then(|p| p.as_u64()) {
-                                    Self::mark_ready(app, status, ready, bootstrap_token, port as u16);
+                                    Self::mark_ready(app, status, ready, bootstrap_token, format!("http://localhost:{}", port));
                                     continue;
                                 }
                             }
@@ -569,12 +597,15 @@ impl CliProcessManager {
         status: &Arc<Mutex<CliStatus>>,
         ready: &Arc<AtomicBool>,
         bootstrap_token: &Arc<Mutex<Option<String>>>,
-        port: u16,
+        base_url: String,
     ) {
         ready.store(true, Ordering::SeqCst);
-        let base_url = format!("http://127.0.0.1:{port}");
+        let port = Url::parse(&base_url)
+            .ok()
+            .and_then(|u| u.port_or_known_default())
+            .map(|p| p as u16);
         let mut locked = status.lock();
-        locked.port = Some(port);
+        locked.port = port;
         locked.url = Some(base_url.clone());
         locked.state = CliState::Ready;
         locked.error = None;
@@ -583,22 +614,29 @@ impl CliProcessManager {
         let token = bootstrap_token.lock().take();
 
         if let Some(token) = token {
-            match exchange_bootstrap_token(&base_url, &token) {
-                Ok(Some(session_id)) => {
-                    if let Err(err) = set_session_cookie(app, &base_url, &session_id) {
-                        log_line(&format!("failed to set session cookie: {err}"));
-                        navigate_main(app, &format!("{base_url}/login"));
-                    } else {
-                        navigate_main(app, &base_url);
+            // Token exchange is only implemented for loopback HTTP. If localUrl is HTTPS,
+            // skip the exchange and let the user authenticate normally.
+            let scheme = Url::parse(&base_url).ok().map(|u| u.scheme().to_string());
+            if scheme.as_deref() != Some("http") {
+                navigate_main(app, &base_url);
+            } else {
+                match exchange_bootstrap_token(&base_url, &token) {
+                    Ok(Some(session_id)) => {
+                        if let Err(err) = set_session_cookie(app, &base_url, &session_id) {
+                            log_line(&format!("failed to set session cookie: {err}"));
+                            navigate_main(app, &format!("{base_url}/login"));
+                        } else {
+                            navigate_main(app, &base_url);
+                        }
+                    }
+                    Ok(None) => {
+                        log_line("bootstrap token exchange failed (invalid token)");
+                        navigate_main(app, &format!("{base_url}/login"));
+                    }
+                    Err(err) => {
+                        log_line(&format!("bootstrap token exchange failed: {err}"));
+                        navigate_main(app, &format!("{base_url}/login"));
                     }
-                }
-                Ok(None) => {
-                    log_line("bootstrap token exchange failed (invalid token)");
-                    navigate_main(app, &format!("{base_url}/login"));
-                }
-                Err(err) => {
-                    log_line(&format!("bootstrap token exchange failed: {err}"));
-                    navigate_main(app, &format!("{base_url}/login"));
                 }
             }
         } else {
@@ -681,19 +719,24 @@ impl CliEntry {
     }
 
     fn build_args(&self, dev: bool, host: &str) -> Vec<String> {
-        let mut args = vec![
-            "serve".to_string(),
-            "--host".to_string(),
-            host.to_string(),
-            "--port".to_string(),
-            "0".to_string(),
-            "--generate-token".to_string(),
-        ];
+        let mut args = vec!["serve".to_string(), "--host".to_string(), host.to_string(), "--generate-token".to_string()];
+
         if dev {
+            // Dev: plain HTTP + Vite dev server proxy.
+            args.push("--https".to_string());
+            args.push("false".to_string());
+            args.push("--http".to_string());
+            args.push("true".to_string());
             args.push("--ui-dev-server".to_string());
             args.push("http://localhost:3000".to_string());
             args.push("--log-level".to_string());
             args.push("debug".to_string());
+        } else {
+            // Prod desktop: always keep loopback HTTP enabled.
+            args.push("--https".to_string());
+            args.push("true".to_string());
+            args.push("--http".to_string());
+            args.push("true".to_string());
         }
         args
     }

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

@@ -4,6 +4,7 @@ mod cli_manager;
 
 use cli_manager::{CliProcessManager, CliStatus};
 use serde_json::json;
+use std::sync::atomic::{AtomicBool, Ordering};
 use tauri::menu::{MenuBuilder, MenuItem, SubmenuBuilder};
 use tauri::plugin::{Builder as PluginBuilder, TauriPlugin};
 use tauri::webview::Webview;
@@ -11,6 +12,8 @@ use tauri::{AppHandle, Emitter, Manager, Runtime, Wry};
 use tauri_plugin_opener::OpenerExt;
 use url::Url;
 
+static QUIT_REQUESTED: AtomicBool = AtomicBool::new(false);
+
 #[derive(Clone)]
 pub struct AppState {
     pub manager: CliProcessManager,
@@ -32,6 +35,7 @@ fn cli_restart(app: AppHandle, state: tauri::State<AppState>) -> Result<CliStatu
     Ok(state.manager.status())
 }
 
+
 fn is_dev_mode() -> bool {
     cfg!(debug_assertions) || std::env::var("TAURI_DEV").is_ok()
 }
@@ -39,7 +43,10 @@ fn is_dev_mode() -> bool {
 fn should_allow_internal(url: &Url) -> bool {
     match url.scheme() {
         "tauri" | "asset" | "file" => true,
-        "http" | "https" => matches!(url.host_str(), Some("127.0.0.1" | "localhost")),
+        // On Windows/WebView2, Tauri serves the app assets from `tauri.localhost`.
+        // This must be treated as an internal origin or the navigation guard will
+        // redirect it to the system browser and the app will appear blank.
+        "http" | "https" => matches!(url.host_str(), Some("127.0.0.1" | "localhost" | "tauri.localhost")),
         _ => false,
     }
 }
@@ -67,6 +74,8 @@ fn main() {
     tauri::Builder::default()
         .plugin(tauri_plugin_dialog::init())
         .plugin(tauri_plugin_opener::init())
+        .plugin(tauri_plugin_keepawake::init())
+        .plugin(tauri_plugin_notification::init())
         .plugin(navigation_guard)
         .manage(AppState {
             manager: CliProcessManager::new(),
@@ -163,7 +172,13 @@ fn main() {
         .build(tauri::generate_context!())
         .expect("error while building tauri application")
         .run(|app_handle, event| match event {
-            tauri::RunEvent::ExitRequested { .. } => {
+            tauri::RunEvent::ExitRequested { api, .. } => {
+                // `app_handle.exit(0)` triggers another `ExitRequested`. Without a guard, we can
+                // prevent exit forever and the app never quits (Cmd+Q / Quit menu appears stuck).
+                if QUIT_REQUESTED.swap(true, Ordering::SeqCst) {
+                    return;
+                }
+                api.prevent_exit();
                 let app = app_handle.clone();
                 std::thread::spawn(move || {
                     if let Some(state) = app.try_state::<AppState>() {
@@ -173,18 +188,21 @@ fn main() {
                 });
             }
             tauri::RunEvent::WindowEvent {
-                event: tauri::WindowEvent::Destroyed,
+                event: tauri::WindowEvent::CloseRequested { api, .. },
                 ..
             } => {
-                if app_handle.webview_windows().len() <= 1 {
-                    let app = app_handle.clone();
-                    std::thread::spawn(move || {
-                        if let Some(state) = app.try_state::<AppState>() {
-                            let _ = state.manager.stop();
-                        }
-                        app.exit(0);
-                    });
+                // Ensure we have time to stop the CLI process before the app exits.
+                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>() {
+                        let _ = state.manager.stop();
+                    }
+                    app.exit(0);
+                });
             }
             _ => {}
         });

packages/ui/.gitignore

@@ -1,3 +1,5 @@
 node_modules/
 dist/
 .vite/
+src/renderer/public/logo.png
+src/renderer/public/monaco/

packages/ui/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@codenomad/ui",
-  "version": "0.7.6",
+  "version": "0.10.3",
   "private": true,
+  "license": "MIT",
   "type": "module",
   "scripts": {
     "dev": "vite dev",
@@ -17,22 +18,28 @@
     "@suid/icons-material": "^0.9.0",
     "@suid/material": "^0.19.0",
     "@suid/system": "^0.14.0",
+    "@tauri-apps/plugin-opener": "^2.5.3",
+    "@tauri-apps/plugin-notification": "^2.3.3",
     "ansi-sequence-parser": "^1.1.3",
     "debug": "^4.4.3",
     "github-markdown-css": "^5.8.1",
     "lucide-solid": "^0.300.0",
     "marked": "^12.0.0",
+    "monaco-editor": "^0.52.2",
     "qrcode": "^1.5.3",
     "shiki": "^3.13.0",
     "solid-js": "^1.8.0",
-    "solid-toast": "^0.5.0"
+    "solid-toast": "^0.5.0",
+    "tauri-plugin-keepawake-api": "^0.1.0"
   },
   "devDependencies": {
+    "@vite-pwa/assets-generator": "^1.0.2",
     "autoprefixer": "10.4.21",
     "postcss": "8.5.6",
     "tailwindcss": "3",
     "typescript": "^5.3.0",
     "vite": "^5.0.0",
+    "vite-plugin-pwa": "^1.2.0",
     "vite-plugin-solid": "^2.10.0"
   }
 }

packages/ui/scripts/monaco-public-assets.d.ts

@@ -0,0 +1,7 @@
+export type CopyMonacoPublicAssetsParams = {
+  uiRendererRoot: string
+  warn?: (message: string) => void
+  sourceRoots?: string[]
+}
+
+export function copyMonacoPublicAssets(params: CopyMonacoPublicAssetsParams): void

packages/ui/scripts/monaco-public-assets.js

@@ -0,0 +1,97 @@
+import fs from "fs"
+import { resolve } from "path"
+
+/**
+ * Copy Monaco's AMD `min/vs` assets into the UI renderer public folder.
+ *
+ * Monaco is loaded at runtime via `/monaco/vs/loader.js`. These assets are gitignored
+ * and generated on demand in dev/build so the repo stays clean.
+ *
+ * @param {object} params
+ * @param {string} params.uiRendererRoot Absolute path to `packages/ui/src/renderer`.
+ * @param {(message: string) => void} [params.warn] Warning logger.
+ * @param {string[]} [params.sourceRoots] Optional override list of `.../monaco-editor/min/vs` roots.
+ */
+export function copyMonacoPublicAssets(params) {
+  const uiRendererRoot = params?.uiRendererRoot
+  if (!uiRendererRoot) {
+    throw new Error("copyMonacoPublicAssets: uiRendererRoot is required")
+  }
+
+  const warn = params?.warn ?? ((message) => console.warn(message))
+  const publicDir = resolve(uiRendererRoot, "public")
+  const destRoot = resolve(publicDir, "monaco/vs")
+
+  const candidates =
+    params?.sourceRoots?.length > 0
+      ? params.sourceRoots
+      : [
+          // Workspace root hoisted deps.
+          resolve(process.cwd(), "node_modules/monaco-editor/min/vs"),
+          // UI package local deps (covers non-hoisted installs).
+          resolve(process.cwd(), "packages/ui/node_modules/monaco-editor/min/vs"),
+        ]
+
+  const sourceRoot = candidates.find((p) => fs.existsSync(resolve(p, "loader.js")))
+  if (!sourceRoot) {
+    warn("Monaco source directory not found; skipping copy")
+    return
+  }
+
+  const copyRecursive = (src, dest) => {
+    const stat = fs.statSync(src)
+    if (stat.isDirectory()) {
+      fs.mkdirSync(dest, { recursive: true })
+      for (const entry of fs.readdirSync(src)) {
+        copyRecursive(resolve(src, entry), resolve(dest, entry))
+      }
+      return
+    }
+    fs.copyFileSync(src, dest)
+  }
+
+  // Keep the working tree clean; these assets are generated.
+  try {
+    fs.rmSync(destRoot, { recursive: true, force: true })
+  } catch {
+    // ignore
+  }
+  fs.mkdirSync(destRoot, { recursive: true })
+
+  // Copy core Monaco runtime.
+  for (const dir of ["base", "editor", "platform"]) {
+    const src = resolve(sourceRoot, dir)
+    if (fs.existsSync(src)) {
+      copyRecursive(src, resolve(destRoot, dir))
+    }
+  }
+
+  // loader.js is required.
+  copyRecursive(resolve(sourceRoot, "loader.js"), resolve(destRoot, "loader.js"))
+
+  // Copy baseline rich language packages + workers.
+  for (const lang of ["typescript", "html", "json", "css"]) {
+    const src = resolve(sourceRoot, "language", lang)
+    if (fs.existsSync(src)) {
+      copyRecursive(src, resolve(destRoot, "language", lang))
+    }
+  }
+
+  // Copy baseline basic tokenizers.
+  for (const lang of ["python", "markdown", "cpp", "kotlin"]) {
+    const src = resolve(sourceRoot, "basic-languages", lang)
+    if (fs.existsSync(src)) {
+      copyRecursive(src, resolve(destRoot, "basic-languages", lang))
+    }
+  }
+
+  // Copy monaco.contribution.js entrypoints (needed by some loads).
+  const monacoContribution = resolve(sourceRoot, "basic-languages", "monaco.contribution.js")
+  if (fs.existsSync(monacoContribution)) {
+    copyRecursive(monacoContribution, resolve(destRoot, "basic-languages", "monaco.contribution.js"))
+  }
+  const underscoreContribution = resolve(sourceRoot, "basic-languages", "_.contribution.js")
+  if (fs.existsSync(underscoreContribution)) {
+    copyRecursive(underscoreContribution, resolve(destRoot, "basic-languages", "_.contribution.js"))
+  }
+}

packages/ui/src/App.tsx

@@ -10,6 +10,7 @@ import InstanceShell from "./components/instance/instance-shell2"
 import { RemoteAccessOverlay } from "./components/remote-access-overlay"
 import { InstanceMetadataProvider } from "./lib/contexts/instance-metadata-context"
 import { initMarkdown } from "./lib/markdown"
+import { initGithubStars } from "./stores/github-stars"
 
 import { useTheme } from "./lib/theme"
 import { useCommands } from "./lib/hooks/use-commands"
@@ -17,6 +18,8 @@ import { useAppLifecycle } from "./lib/hooks/use-app-lifecycle"
 import { getLogger } from "./lib/logger"
 import { initReleaseNotifications } from "./stores/releases"
 import { runtimeEnv } from "./lib/runtime-env"
+import { useI18n } from "./lib/i18n"
+import { setWakeLockDesired } from "./lib/native/wake-lock"
 import {
   hasInstances,
   isSelectingFolder,
@@ -46,10 +49,13 @@ import {
   updateSessionModel,
 } from "./stores/sessions"
 
+import { getInstanceSessionIndicatorStatus } from "./stores/session-status"
+
 const log = getLogger("actions")
 
 const App: Component = () => {
   const { isDark } = useTheme()
+  const { t } = useI18n()
   const {
     preferences,
     recordWorkspaceLaunch,
@@ -57,6 +63,7 @@ const App: Component = () => {
     toggleShowTimelineTools,
     toggleAutoCleanupBlankSessions,
     toggleUsageMetrics,
+    togglePromptSubmitOnEnter,
     setDiffViewMode,
     setToolOutputExpansion,
     setDiagnosticsExpansion,
@@ -87,6 +94,26 @@ const App: Component = () => {
     initReleaseNotifications()
   })
 
+  const shouldHoldWakeLock = createMemo(() => {
+    const map = instances()
+    for (const id of map.keys()) {
+      const status = getInstanceSessionIndicatorStatus(id)
+      if (status !== "idle") {
+        return true
+      }
+    }
+    return false
+  })
+
+  createEffect(() => {
+    const hold = shouldHoldWakeLock()
+    void setWakeLockDesired(hold)
+  })
+
+  onCleanup(() => {
+    void setWakeLockDesired(false)
+  })
+
   createEffect(() => {
     instances()
     hasInstances()
@@ -94,6 +121,7 @@ const App: Component = () => {
   })
 
   onMount(() => {
+    void initGithubStars()
     updateInstanceTabBarHeight()
     const handleResize = () => updateInstanceTabBarHeight()
     window.addEventListener("resize", handleResize)
@@ -117,7 +145,7 @@ const App: Component = () => {
 
   const formatLaunchErrorMessage = (error: unknown): string => {
     if (!error) {
-      return "Failed to launch workspace"
+      return t("app.launchError.fallbackMessage")
     }
     const raw = typeof error === "string" ? error : error instanceof Error ? error.message : String(error)
     try {
@@ -200,12 +228,12 @@ const App: Component = () => {
 
   async function handleCloseInstance(instanceId: string) {
     const confirmed = await showConfirmDialog(
-      "Stop OpenCode instance? This will stop the server.",
+      t("app.stopInstance.confirmMessage"),
       {
-        title: "Stop instance",
+        title: t("app.stopInstance.title"),
         variant: "warning",
-        confirmLabel: "Stop",
-        cancelLabel: "Keep running",
+        confirmLabel: t("app.stopInstance.confirmLabel"),
+        cancelLabel: t("app.stopInstance.cancelLabel"),
       },
     )
 
@@ -267,6 +295,7 @@ const App: Component = () => {
     toggleShowThinkingBlocks,
     toggleShowTimelineTools,
     toggleUsageMetrics,
+    togglePromptSubmitOnEnter,
     setDiffViewMode,
     setToolOutputExpansion,
     setDiagnosticsExpansion,
@@ -325,40 +354,41 @@ const App: Component = () => {
       <Dialog open={Boolean(launchError())} modal>
         <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-md p-6 flex flex-col gap-6">
-              <div>
-                <Dialog.Title class="text-xl font-semibold text-primary">Unable to launch OpenCode</Dialog.Title>
-                <Dialog.Description class="text-sm text-secondary mt-2 break-words">
-                  We couldn't start the selected OpenCode binary. Review the error output below or choose a different
-                  binary from Advanced Settings.
-                </Dialog.Description>
-              </div>
+           <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
+             <Dialog.Content class="modal-surface w-full max-w-3xl p-6 flex flex-col gap-6 max-h-[80vh] min-h-0 overflow-hidden">
+               <div>
+                 <Dialog.Title class="text-xl font-semibold text-primary">{t("app.launchError.title")}</Dialog.Title>
+                 <Dialog.Description class="text-sm text-secondary mt-2 break-words">
+                   {t("app.launchError.description")}
+                 </Dialog.Description>
+               </div>
 
-              <div class="rounded-lg border border-base bg-surface-secondary p-4">
-                <p class="text-xs font-medium text-muted uppercase tracking-wide mb-1">Binary path</p>
-                <p class="text-sm font-mono text-primary break-all">{launchErrorPath()}</p>
-              </div>
+               <div class={`flex flex-col gap-4 ${launchErrorMessage() ? "flex-1 min-h-0" : ""}`}>
+                 <div class="rounded-lg border border-base bg-surface-secondary p-4 flex-shrink-0">
+                   <p class="text-xs font-medium text-muted uppercase tracking-wide mb-1">{t("app.launchError.binaryPathLabel")}</p>
+                   <p class="text-sm font-mono text-primary break-all">{launchErrorPath()}</p>
+                 </div>
+ 
+                 <Show when={launchErrorMessage()}>
+                   <div class="rounded-lg border border-base bg-surface-secondary p-4 flex flex-col gap-2 flex-1 min-h-0">
+                     <p class="text-xs font-medium text-muted uppercase tracking-wide">{t("app.launchError.errorOutputLabel")}</p>
+                     <pre class="text-sm font-mono text-primary whitespace-pre-wrap break-words overflow-auto flex-1 min-h-0">{launchErrorMessage()}</pre>
+                   </div>
+                 </Show>
+               </div>
 
-              <Show when={launchErrorMessage()}>
-                <div class="rounded-lg border border-base bg-surface-secondary p-4">
-                  <p class="text-xs font-medium text-muted uppercase tracking-wide mb-1">Error output</p>
-                  <pre class="text-sm font-mono text-primary whitespace-pre-wrap break-words max-h-48 overflow-y-auto">{launchErrorMessage()}</pre>
-                </div>
-              </Show>
-
-              <div class="flex justify-end gap-2">
-                <Show when={launchError()?.missingBinary}>
-                  <button
-                    type="button"
-                    class="selector-button selector-button-secondary"
+               <div class="flex justify-end gap-2">
+                 <Show when={launchError()?.missingBinary}>
+                   <button
+                     type="button"
+                     class="selector-button selector-button-secondary"
                     onClick={handleLaunchErrorAdvanced}
                   >
-                    Open Advanced Settings
+                    {t("app.launchError.openAdvancedSettings")}
                   </button>
                 </Show>
                 <button type="button" class="selector-button selector-button-primary" onClick={handleLaunchErrorClose}>
-                  Close
+                  {t("app.launchError.close")}
                 </button>
               </div>
             </Dialog.Content>
@@ -428,7 +458,7 @@ const App: Component = () => {
                   clearLaunchError()
                 }}
                 class="absolute top-4 right-4 z-10 p-2 bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
-                title="Close (Esc)"
+                title={t("app.launchError.closeTitle")}
               >
                 <svg class="w-5 h-5 text-gray-600 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />

packages/ui/src/components/advanced-settings-modal.tsx

@@ -2,6 +2,7 @@ import { Component } from "solid-js"
 import { Dialog } from "@kobalte/core/dialog"
 import OpenCodeBinarySelector from "./opencode-binary-selector"
 import EnvironmentVariablesEditor from "./environment-variables-editor"
+import { useI18n } from "../lib/i18n"
 
 interface AdvancedSettingsModalProps {
   open: boolean
@@ -12,6 +13,8 @@ interface AdvancedSettingsModalProps {
 }
 
 const AdvancedSettingsModal: Component<AdvancedSettingsModalProps> = (props) => {
+  const { t } = useI18n()
+
   return (
     <Dialog open={props.open} onOpenChange={(open) => !open && props.onClose()}>
       <Dialog.Portal>
@@ -19,7 +22,7 @@ const AdvancedSettingsModal: Component<AdvancedSettingsModalProps> = (props) =>
         <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
           <Dialog.Content class="modal-surface w-full max-w-5xl max-h-[90vh] flex flex-col overflow-hidden">
             <header class="px-6 py-4 border-b" style={{ "border-color": "var(--border-base)" }}>
-              <Dialog.Title class="text-xl font-semibold text-primary">Advanced Settings</Dialog.Title>
+              <Dialog.Title class="text-xl font-semibold text-primary">{t("advancedSettings.title")}</Dialog.Title>
             </header>
 
             <div class="flex-1 overflow-y-auto p-6 space-y-6">
@@ -32,8 +35,8 @@ const AdvancedSettingsModal: Component<AdvancedSettingsModalProps> = (props) =>
 
               <div class="panel">
                 <div class="panel-header">
-                  <h3 class="panel-title">Environment Variables</h3>
-                  <p class="panel-subtitle">Applied whenever a new OpenCode instance starts</p>
+                  <h3 class="panel-title">{t("advancedSettings.environmentVariables.title")}</h3>
+                  <p class="panel-subtitle">{t("advancedSettings.environmentVariables.subtitle")}</p>
                 </div>
                 <div class="panel-body">
                   <EnvironmentVariablesEditor disabled={Boolean(props.isLoading)} />
@@ -47,7 +50,7 @@ const AdvancedSettingsModal: Component<AdvancedSettingsModalProps> = (props) =>
                 class="selector-button selector-button-secondary"
                 onClick={props.onClose}
               >
-                Close
+                {t("advancedSettings.actions.close")}
               </button>
             </div>
           </Dialog.Content>

packages/ui/src/components/agent-selector.tsx

@@ -3,6 +3,7 @@ import { For, Show, createEffect, createMemo } from "solid-js"
 import { agents, fetchAgents, sessions } from "../stores/sessions"
 import { ChevronDown } from "lucide-solid"
 import type { Agent } from "../types/session"
+import { useI18n } from "../lib/i18n"
 import { getLogger } from "../lib/logger"
 const log = getLogger("session")
 
@@ -15,6 +16,7 @@ interface AgentSelectorProps {
 }
 
 export default function AgentSelector(props: AgentSelectorProps) {
+  const { t } = useI18n()
   const instanceAgents = () => agents().get(props.instanceId) || []
 
   const session = createMemo(() => {
@@ -71,7 +73,7 @@ export default function AgentSelector(props: AgentSelectorProps) {
         options={availableAgents()}
         optionValue="name"
         optionTextValue="name"
-        placeholder="Select agent..."
+        placeholder={t("agentSelector.placeholder")}
         itemComponent={(itemProps) => (
           <Select.Item
             item={itemProps.item}
@@ -81,7 +83,7 @@ export default function AgentSelector(props: AgentSelectorProps) {
               <Select.ItemLabel class="selector-option-label flex items-center gap-2">
                 <span>{itemProps.item.rawValue.name}</span>
                 <Show when={itemProps.item.rawValue.mode === "subagent"}>
-                  <span class="neutral-badge">subagent</span>
+                  <span class="neutral-badge">{t("agentSelector.badge.subagent")}</span>
                 </Show>
               </Select.ItemLabel>
               <Show when={itemProps.item.rawValue.description}>
@@ -99,15 +101,17 @@ export default function AgentSelector(props: AgentSelectorProps) {
           data-agent-selector
           class="selector-trigger"
         >
-          <Select.Value<Agent>>
-            {(state) => (
-              <div class="selector-trigger-label">
-                <span class="selector-trigger-primary">
-                  Agent: {state.selectedOption()?.name ?? "None"}
-                </span>
-              </div>
-            )}
-          </Select.Value>
+          <div class="flex-1 min-w-0">
+            <Select.Value<Agent>>
+              {(state) => (
+                <div class="selector-trigger-label selector-trigger-label--stacked">
+                  <span class="selector-trigger-primary selector-trigger-primary--align-left">
+                    {t("agentSelector.trigger.primary", { agent: state.selectedOption()?.name ?? t("agentSelector.none") })}
+                  </span>
+                </div>
+              )}
+            </Select.Value>
+          </div>
           <Select.Icon class="selector-trigger-icon">
             <ChevronDown class="w-3 h-3" />
           </Select.Icon>

packages/ui/src/components/alert-dialog.tsx

@@ -2,28 +2,26 @@ import { Dialog } from "@kobalte/core/dialog"
 import { Component, Show, createEffect, createSignal } from "solid-js"
 import { alertDialogState, dismissAlertDialog } from "../stores/alerts"
 import type { AlertVariant, AlertDialogState } from "../stores/alerts"
+import { useI18n } from "../lib/i18n"
 
-const variantAccent: Record<AlertVariant, { badgeBg: string; badgeBorder: string; badgeText: string; symbol: string; fallbackTitle: string }> = {
+const variantAccent: Record<AlertVariant, { badgeBg: string; badgeBorder: string; badgeText: string; symbol: string }> = {
   info: {
     badgeBg: "var(--badge-neutral-bg)",
     badgeBorder: "var(--border-base)",
     badgeText: "var(--accent-primary)",
     symbol: "i",
-    fallbackTitle: "Heads up",
   },
   warning: {
     badgeBg: "rgba(255, 152, 0, 0.14)",
     badgeBorder: "var(--status-warning)",
     badgeText: "var(--status-warning)",
     symbol: "!",
-    fallbackTitle: "Please review",
   },
   error: {
     badgeBg: "var(--danger-soft-bg)",
     badgeBorder: "var(--status-error)",
     badgeText: "var(--status-error)",
     symbol: "!",
-    fallbackTitle: "Something went wrong",
   },
 }
 
@@ -60,14 +58,22 @@ function dismiss(confirmed: boolean, payload?: AlertDialogState | null, promptVa
 }
 
 const AlertDialog: Component = () => {
+  const { t } = useI18n()
   let primaryButtonRef: HTMLButtonElement | undefined
+  let promptInputRef: HTMLInputElement | undefined
 
   createEffect(() => {
-    if (alertDialogState()) {
-      queueMicrotask(() => {
-        primaryButtonRef?.focus()
-      })
-    }
+    const state = alertDialogState()
+    if (!state) return
+
+    queueMicrotask(() => {
+      if (state.type === "prompt") {
+        promptInputRef?.focus()
+        promptInputRef?.select()
+        return
+      }
+      primaryButtonRef?.focus()
+    })
   })
 
   return (
@@ -75,11 +81,25 @@ const AlertDialog: Component = () => {
       {(payload) => {
         const variant = payload.variant ?? "info"
         const accent = variantAccent[variant]
-        const title = payload.title || accent.fallbackTitle
+
+        const fallbackTitle =
+          variant === "warning"
+            ? t("alertDialog.fallbackTitle.warning")
+            : variant === "error"
+              ? t("alertDialog.fallbackTitle.error")
+              : t("alertDialog.fallbackTitle.info")
+
+        const title = payload.title || fallbackTitle
         const isConfirm = payload.type === "confirm"
         const isPrompt = payload.type === "prompt"
-        const confirmLabel = payload.confirmLabel || (isConfirm ? "Confirm" : isPrompt ? "Run" : "OK")
-        const cancelLabel = payload.cancelLabel || "Cancel"
+        const confirmLabel =
+          payload.confirmLabel ||
+          (isConfirm
+            ? t("alertDialog.actions.confirm")
+            : isPrompt
+              ? t("alertDialog.actions.run")
+              : t("alertDialog.actions.ok"))
+        const cancelLabel = payload.cancelLabel || t("alertDialog.actions.cancel")
 
         const [inputValue, setInputValue] = createSignal(payload.inputDefaultValue ?? "")
 
@@ -118,25 +138,31 @@ const AlertDialog: Component = () => {
                     </div>
                   </div>
 
-                   <Show when={isPrompt}>
-                     <div class="mt-4">
-                       <label class="text-xs font-medium text-muted uppercase tracking-wide">
-                         {payload.inputLabel || "Arguments"}
-                       </label>
-                       <input
-                         class="modal-search-input mt-2"
-                         value={inputValue()}
-                         placeholder={payload.inputPlaceholder || ""}
-                         onInput={(e) => setInputValue(e.currentTarget.value)}
-                         onKeyDown={(e) => {
-                           if (e.key === "Enter") {
-                             e.preventDefault()
-                             dismiss(true, payload, inputValue())
-                           }
-                         }}
-                       />
-                     </div>
-                   </Show>
+                    <Show when={isPrompt}>
+                      <div class="mt-4">
+                        <label class="text-sm font-medium text-secondary">
+                          {payload.inputLabel || t("alertDialog.prompt.inputLabel")}
+                        </label>
+                        <input
+                          ref={(el) => {
+                            promptInputRef = el
+                          }}
+                          class="form-input mt-2"
+                          value={inputValue()}
+                          placeholder={payload.inputPlaceholder || ""}
+                          autocapitalize="off"
+                          autocorrect="off"
+                          spellcheck={false}
+                          onInput={(e) => setInputValue(e.currentTarget.value)}
+                          onKeyDown={(e) => {
+                            if (e.key === "Enter") {
+                              e.preventDefault()
+                              dismiss(true, payload, inputValue())
+                            }
+                          }}
+                        />
+                      </div>
+                    </Show>
 
                    <div class="mt-6 flex justify-end gap-3">
                      {(isConfirm || isPrompt) && (

packages/ui/src/components/attachment-chip.tsx

@@ -1,5 +1,6 @@
 import { Component } from "solid-js"
 import type { Attachment } from "../types/attachment"
+import { useI18n } from "../lib/i18n"
 
 interface AttachmentChipProps {
   attachment: Attachment
@@ -7,6 +8,7 @@ interface AttachmentChipProps {
 }
 
 const AttachmentChip: Component<AttachmentChipProps> = (props) => {
+  const { t } = useI18n()
   return (
     <div
       class="attachment-chip"
@@ -16,7 +18,7 @@ const AttachmentChip: Component<AttachmentChipProps> = (props) => {
       <button
         onClick={props.onRemove}
         class="attachment-remove"
-        aria-label="Remove attachment"
+        aria-label={t("attachmentChip.removeAriaLabel")}
       >
         ×
       </button>

packages/ui/src/components/background-process-output-dialog.tsx

@@ -3,6 +3,7 @@ import { Show, createEffect, createSignal, onCleanup } from "solid-js"
 import type { BackgroundProcess } from "../../../server/src/api-types"
 import { buildBackgroundProcessStreamUrl, serverApi } from "../lib/api-client"
 import { createAnsiStreamRenderer, hasAnsi } from "../lib/ansi"
+import { useI18n } from "../lib/i18n"
 
 interface BackgroundProcessOutputDialogProps {
   open: boolean
@@ -12,6 +13,7 @@ interface BackgroundProcessOutputDialogProps {
 }
 
 export function BackgroundProcessOutputDialog(props: BackgroundProcessOutputDialogProps) {
+  const { t } = useI18n()
   const [output, setOutput] = createSignal("")
   const [outputHtml, setOutputHtml] = createSignal("")
   const [ansiEnabled, setAnsiEnabled] = createSignal(false)
@@ -67,7 +69,7 @@ export function BackgroundProcessOutputDialog(props: BackgroundProcessOutputDial
       })
       .catch(() => {
         if (!active) return
-        setRawOutput("Failed to load output.")
+        setRawOutput(t("backgroundProcessOutputDialog.loadErrorFallback"))
         setAnsiEnabled(false)
         setOutputHtml("")
       })
@@ -121,7 +123,7 @@ export function BackgroundProcessOutputDialog(props: BackgroundProcessOutputDial
           <Dialog.Content class="modal-surface w-full max-w-5xl max-h-[90vh] flex flex-col overflow-hidden">
             <div class="flex items-start justify-between px-6 py-4 border-b border-base gap-4">
               <div class="flex-1 min-w-0">
-                <Dialog.Title class="text-lg font-semibold text-primary">Background Output</Dialog.Title>
+                <Dialog.Title class="text-lg font-semibold text-primary">{t("backgroundProcessOutputDialog.title")}</Dialog.Title>
                 <Show when={props.process}>
                   <span class="text-xs text-secondary block">
                     {props.process?.title} · {props.process?.id}
@@ -133,16 +135,16 @@ export function BackgroundProcessOutputDialog(props: BackgroundProcessOutputDial
               </div>
 
               <button type="button" class="button-tertiary flex-shrink-0" onClick={props.onClose}>
-                Close
+                {t("backgroundProcessOutputDialog.actions.close")}
               </button>
             </div>
             <div class="flex-1 overflow-auto p-6">
               <Show when={loading()}>
-                <p class="text-xs text-secondary">Loading output...</p>
+                <p class="text-xs text-secondary">{t("backgroundProcessOutputDialog.loading")}</p>
               </Show>
               <Show when={!loading()}>
                 <Show when={truncated()}>
-                  <p class="text-xs text-secondary mb-2">Output truncated for display.</p>
+                  <p class="text-xs text-secondary mb-2">{t("backgroundProcessOutputDialog.truncatedNotice")}</p>
                 </Show>
                 <Show
                   when={ansiEnabled()}

packages/ui/src/components/brand-icons.tsx

@@ -0,0 +1,38 @@
+import type { Component } from "solid-js"
+
+type BrandIconProps = {
+  class?: string
+  title?: string
+}
+
+export const GitHubMarkIcon: Component<BrandIconProps> = (props) => (
+  <svg
+    viewBox="0 0 98 96"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden={props.title ? undefined : "true"}
+    role={props.title ? "img" : "presentation"}
+    class={props.class}
+  >
+    {props.title ? <title>{props.title}</title> : null}
+    <path
+      fill="currentColor"
+      d="M41.4395 69.3848C28.8066 67.8535 19.9062 58.7617 19.9062 46.9902C19.9062 42.2051 21.6289 37.0371 24.5 33.5918C23.2559 30.4336 23.4473 23.7344 24.8828 20.959C28.7109 20.4805 33.8789 22.4902 36.9414 25.2656C40.5781 24.1172 44.4062 23.543 49.0957 23.543C53.7852 23.543 57.6133 24.1172 61.0586 25.1699C64.0254 22.4902 69.2891 20.4805 73.1172 20.959C74.457 23.543 74.6484 30.2422 73.4043 33.4961C76.4668 37.1328 78.0937 42.0137 78.0937 46.9902C78.0937 58.7617 69.1934 67.6621 56.3691 69.2891C59.623 71.3945 61.8242 75.9883 61.8242 81.252L61.8242 91.2051C61.8242 94.0762 64.2168 95.7031 67.0879 94.5547C84.4102 87.9512 98 70.6289 98 49.1914C98 22.1074 75.9883 0 48.9043 0C21.8203 0 0 22.1074 0 49.1914C0 70.4375 13.4941 88.0469 31.6777 94.6504C34.2617 95.6074 36.75 93.8848 36.75 91.3008L36.75 83.6445C35.4102 84.2188 33.6875 84.6016 32.1562 84.6016C25.8398 84.6016 22.1074 81.1563 19.4277 74.7441C18.375 72.1602 17.2266 70.6289 15.0254 70.3418C13.877 70.2461 13.4941 69.7676 13.4941 69.1934C13.4941 68.0449 15.4082 67.1836 17.3223 67.1836C20.0977 67.1836 22.4902 68.9063 24.9785 72.4473C26.8926 75.2227 28.9023 76.4668 31.2949 76.4668C33.6875 76.4668 35.2187 75.6055 37.4199 73.4043C39.0469 71.7773 40.291 70.3418 41.4395 69.3848Z"
+    />
+  </svg>
+)
+
+export const DiscordSymbolIcon: Component<BrandIconProps> = (props) => (
+  <svg
+    viewBox="0 0 64 48"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden={props.title ? undefined : "true"}
+    role={props.title ? "img" : "presentation"}
+    class={props.class}
+  >
+    {props.title ? <title>{props.title}</title> : null}
+    <path
+      fill="currentColor"
+      d="M40.575 0C39.9562 1.09866 39.4006 2.2352 38.8954 3.397C34.0967 2.67719 29.2096 2.67719 24.3982 3.397C23.9057 2.2352 23.3374 1.09866 22.7186 0C18.2104 0.770324 13.8157 2.12155 9.64839 4.02841C1.38951 16.2652 -0.845688 28.1863 0.265599 39.9432C5.10222 43.517 10.5197 46.2447 16.2909 47.9874C17.5916 46.2447 18.7407 44.3883 19.7257 42.4562C17.8568 41.7616 16.0509 40.8903 14.3208 39.88C14.7755 39.5517 15.2175 39.2107 15.6468 38.8824C25.7873 43.6559 37.5316 43.6559 47.6847 38.8824C48.1141 39.236 48.5561 39.577 49.0107 39.88C47.2806 40.9029 45.4748 41.7616 43.5931 42.4688C44.5781 44.4009 45.7273 46.2573 47.028 48C52.7991 46.2573 58.2167 43.5422 63.0533 39.9684C64.3666 26.3299 60.8055 14.5099 53.6452 4.04104C49.4905 2.13418 45.0959 0.782952 40.5876 0.0252565L40.575 0ZM21.1401 32.7072C18.0209 32.7072 15.4321 29.8785 15.4321 26.3804C15.4321 22.8824 17.9199 20.041 21.1275 20.041C24.3351 20.041 26.886 22.895 26.8354 26.3804C26.7849 29.8658 24.3224 32.7072 21.1401 32.7072ZM42.1788 32.7072C39.047 32.7072 36.4834 29.8785 36.4834 26.3804C36.4834 22.8824 38.9712 20.041 42.1788 20.041C45.3864 20.041 47.9246 22.895 47.8741 26.3804C47.8236 29.8658 45.3611 32.7072 42.1788 32.7072Z"
+    />
+  </svg>
+)

packages/ui/src/components/code-block-inline.tsx

@@ -3,6 +3,7 @@ import type { Highlighter } from "shiki/bundle/full"
 import { useTheme } from "../lib/theme"
 import { getSharedHighlighter, escapeHtml } from "../lib/markdown"
 import { copyToClipboard } from "../lib/clipboard"
+import { useI18n } from "../lib/i18n"
 
 const inlineLoadedLanguages = new Set<string>()
 
@@ -15,6 +16,7 @@ interface CodeBlockInlineProps {
 }
 
 export function CodeBlockInline(props: CodeBlockInlineProps) {
+  const { t } = useI18n()
   const { isDark } = useTheme()
   const [html, setHtml] = createSignal("")
   const [copied, setCopied] = createSignal(false)
@@ -53,7 +55,7 @@ export function CodeBlockInline(props: CodeBlockInlineProps) {
 
       const highlighted = highlighter.codeToHtml(props.code, {
         lang: props.language as CodeToHtmlOptions["lang"],
-        theme: isDark() ? "github-dark" : "github-light",
+        theme: isDark() ? "github-dark" : "github-light-high-contrast",
       })
       setHtml(highlighted)
     } catch {
@@ -97,8 +99,8 @@ export function CodeBlockInline(props: CodeBlockInlineProps) {
               <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
             </svg>
             <span class="copy-text">
-              <Show when={copied()} fallback="Copy">
-                Copied!
+              <Show when={copied()} fallback={t("codeBlockInline.actions.copy")}>
+                {t("codeBlockInline.actions.copied")}
               </Show>
             </span>
           </button>

packages/ui/src/components/command-palette.tsx

@@ -1,7 +1,8 @@
 import { Component, createSignal, For, Show, createEffect, createMemo } from "solid-js"
 import { Dialog } from "@kobalte/core/dialog"
-import type { Command } from "../lib/commands"
+import { resolveResolvable, type Command } from "../lib/commands"
 import Kbd from "./kbd"
+import { useI18n } from "../lib/i18n"
 
 interface CommandPaletteProps {
   open: boolean
@@ -24,6 +25,7 @@ function buildShortcutString(shortcut: Command["shortcut"]): string {
 }
 
 const CommandPalette: Component<CommandPaletteProps> = (props) => {
+  const { t } = useI18n()
   const [query, setQuery] = createSignal("")
   const [selectedCommandId, setSelectedCommandId] = createSignal<string | null>(null)
   const [isPointerSelecting, setIsPointerSelecting] = createSignal(false)
@@ -32,6 +34,27 @@ const CommandPalette: Component<CommandPaletteProps> = (props) => {
 
   const categoryOrder = ["Custom Commands", "Instance", "Session", "Agent & Model", "Input & Focus", "System", "Other"] as const
 
+  const categoryLabel = (category: string) => {
+    switch (category) {
+      case "Custom Commands":
+        return t("commandPalette.category.customCommands")
+      case "Instance":
+        return t("commandPalette.category.instance")
+      case "Session":
+        return t("commandPalette.category.session")
+      case "Agent & Model":
+        return t("commandPalette.category.agentModel")
+      case "Input & Focus":
+        return t("commandPalette.category.inputFocus")
+      case "System":
+        return t("commandPalette.category.system")
+      case "Other":
+        return t("commandPalette.category.other")
+      default:
+        return category
+    }
+  }
+
   type CommandGroup = { category: string; commands: Command[]; startIndex: number }
   type ProcessedCommands = { groups: CommandGroup[]; ordered: Command[] }
 
@@ -41,18 +64,21 @@ const CommandPalette: Component<CommandPaletteProps> = (props) => {
 
     const filtered = q
       ? source.filter((cmd) => {
-          const label = typeof cmd.label === "function" ? cmd.label() : cmd.label
+          const label = resolveResolvable(cmd.label)
+          const description = resolveResolvable(cmd.description)
+          const keywords = cmd.keywords ? resolveResolvable(cmd.keywords) : undefined
+          const category = cmd.category ? resolveResolvable(cmd.category) : undefined
           const labelMatch = label.toLowerCase().includes(q)
-          const descMatch = cmd.description.toLowerCase().includes(q)
-          const keywordMatch = cmd.keywords?.some((k) => k.toLowerCase().includes(q))
-          const categoryMatch = cmd.category?.toLowerCase().includes(q)
+          const descMatch = description.toLowerCase().includes(q)
+          const keywordMatch = keywords?.some((k) => k.toLowerCase().includes(q))
+          const categoryMatch = category?.toLowerCase().includes(q)
           return labelMatch || descMatch || keywordMatch || categoryMatch
         })
       : source
 
     const groupsMap = new Map<string, Command[]>()
     for (const cmd of filtered) {
-      const category = cmd.category || "Other"
+      const category = (cmd.category ? resolveResolvable(cmd.category) : undefined) || "Other"
       const list = groupsMap.get(category)
       if (list) {
         list.push(cmd)
@@ -189,12 +215,12 @@ const CommandPalette: Component<CommandPaletteProps> = (props) => {
       <Dialog.Portal>
         <Dialog.Overlay class="modal-overlay" />
         <div class="fixed inset-0 z-50 flex items-start justify-center pt-[20vh]">
-          <Dialog.Content
-            class="modal-surface w-full max-w-2xl max-h-[60vh]"
-            onKeyDown={handleKeyDown}
-          >
-            <Dialog.Title class="sr-only">Command Palette</Dialog.Title>
-            <Dialog.Description class="sr-only">Search and execute commands</Dialog.Description>
+            <Dialog.Content
+              class="modal-surface w-full max-w-2xl max-h-[60vh]"
+              onKeyDown={handleKeyDown}
+            >
+              <Dialog.Title class="sr-only">{t("commandPalette.title")}</Dialog.Title>
+              <Dialog.Description class="sr-only">{t("commandPalette.description")}</Dialog.Description>
 
             <div class="modal-search-container">
               <div class="flex items-center gap-3">
@@ -214,7 +240,7 @@ const CommandPalette: Component<CommandPaletteProps> = (props) => {
                     setQuery(e.currentTarget.value)
                     setSelectedCommandId(null)
                   }}
-                  placeholder="Type a command or search..."
+                  placeholder={t("commandPalette.searchPlaceholder")}
                   class="modal-search-input"
                 />
               </div>
@@ -228,13 +254,13 @@ const CommandPalette: Component<CommandPaletteProps> = (props) => {
             >
               <Show
                 when={orderedCommands().length > 0}
-                fallback={<div class="modal-empty-state">No commands found for "{query()}"</div>}
+                fallback={<div class="modal-empty-state">{t("commandPalette.empty", { query: query() })}</div>}
               >
                 <For each={groupedCommandList()}>
                   {(group) => (
                     <div class="py-2">
                       <div class="modal-section-header">
-                        {group.category}
+                        {categoryLabel(group.category)}
                       </div>
                       <For each={group.commands}>
                         {(command, localIndex) => {
@@ -257,10 +283,10 @@ const CommandPalette: Component<CommandPaletteProps> = (props) => {
                             >
                               <div class="flex-1 min-w-0">
                                 <div class="modal-item-label">
-                                  {typeof command.label === "function" ? command.label() : command.label}
+                                  {resolveResolvable(command.label)}
                                 </div>
                                 <div class="modal-item-description">
-                                  {command.description}
+                                  {resolveResolvable(command.description)}
                                 </div>
                               </div>
                               <Show when={command.shortcut}>

packages/ui/src/components/directory-browser-dialog.tsx

@@ -1,8 +1,10 @@
 import { Component, Show, For, createSignal, createMemo, createEffect, onCleanup } from "solid-js"
-import { ArrowUpLeft, Folder as FolderIcon, Loader2, X } from "lucide-solid"
+import { ArrowUpLeft, Folder as FolderIcon, FolderPlus, Loader2, X } from "lucide-solid"
 import type { FileSystemEntry, FileSystemListingMetadata } from "../../../server/src/api-types"
 import { WINDOWS_DRIVES_ROOT } from "../../../server/src/api-types"
 import { serverApi } from "../lib/api-client"
+import { showAlertDialog, showPromptDialog } from "../stores/alerts"
+import { useI18n } from "../lib/i18n"
 
 function normalizePathKey(input?: string | null) {
   if (!input || input === "." || input === "./") {
@@ -61,9 +63,11 @@ type FolderRow =
   | { type: "folder"; entry: FileSystemEntry }
 
 const DirectoryBrowserDialog: Component<DirectoryBrowserDialogProps> = (props) => {
+  const { t } = useI18n()
   const [rootPath, setRootPath] = createSignal("")
   const [loading, setLoading] = createSignal(false)
   const [error, setError] = createSignal<string | null>(null)
+  const [creatingFolder, setCreatingFolder] = createSignal(false)
   const [directoryChildren, setDirectoryChildren] = createSignal<Map<string, FileSystemEntry[]>>(new Map())
   const [loadingPaths, setLoadingPaths] = createSignal<Set<string>>(new Set())
   const [currentPathKey, setCurrentPathKey] = createSignal<string | null>(null)
@@ -108,7 +112,7 @@ const DirectoryBrowserDialog: Component<DirectoryBrowserDialogProps> = (props) =
       const metadata = await loadDirectory()
       applyMetadata(metadata)
     } catch (err) {
-      const message = err instanceof Error ? err.message : "Unable to load filesystem"
+      const message = err instanceof Error ? err.message : t("directoryBrowser.load.errorFallback")
       setError(message)
     } finally {
       setLoading(false)
@@ -198,7 +202,7 @@ const DirectoryBrowserDialog: Component<DirectoryBrowserDialogProps> = (props) =
       const metadata = await loadDirectory(path)
       applyMetadata(metadata)
     } catch (err) {
-      const message = err instanceof Error ? err.message : "Unable to load filesystem"
+      const message = err instanceof Error ? err.message : t("directoryBrowser.load.errorFallback")
       setError(message)
     }
   }
@@ -256,6 +260,52 @@ const DirectoryBrowserDialog: Component<DirectoryBrowserDialogProps> = (props) =
     props.onSelect(absolutePath)
   }
 
+  async function handleCreateFolder() {
+    if (creatingFolder()) return
+    const metadata = currentMetadata()
+    if (!metadata || metadata.pathKind === "drives") {
+      return
+    }
+
+    const name =
+      (await showPromptDialog(t("directoryBrowser.createFolder.promptMessage"), {
+        title: t("directoryBrowser.createFolder.title"),
+        inputLabel: t("directoryBrowser.createFolder.inputLabel"),
+        inputPlaceholder: t("directoryBrowser.createFolder.inputPlaceholder"),
+        confirmLabel: t("directoryBrowser.createFolder.confirmLabel"),
+        cancelLabel: t("directoryBrowser.createFolder.cancelLabel"),
+      }))?.trim() ?? ""
+    if (!name) return
+
+    if (name === "." || name === ".." || name.startsWith("~") || name.includes("/") || name.includes("\\")) {
+      showAlertDialog(t("directoryBrowser.createFolder.invalidNameMessage"), {
+        variant: "warning",
+        detail: t("directoryBrowser.createFolder.invalidNameDetail"),
+      })
+      return
+    }
+
+    setCreatingFolder(true)
+    try {
+      const parentKey = normalizePathKey(metadata.currentPath)
+      metadataCache.delete(parentKey)
+      inFlightRequests.delete(parentKey)
+      setDirectoryChildren((prev) => {
+        const next = new Map(prev)
+        next.delete(parentKey)
+        return next
+      })
+
+      const created = await serverApi.createFileSystemFolder(metadata.currentPath, name)
+      await navigateTo(created.path)
+    } catch (err) {
+      const message = err instanceof Error ? err.message : t("directoryBrowser.createFolder.errorFallback")
+      showAlertDialog(message, { variant: "error", title: t("directoryBrowser.createFolder.errorFallback") })
+    } finally {
+      setCreatingFolder(false)
+    }
+  }
+
   function isPathLoading(path: string) {
     return loadingPaths().has(normalizePathKey(path))
   }
@@ -275,10 +325,10 @@ const DirectoryBrowserDialog: Component<DirectoryBrowserDialogProps> = (props) =
               <div class="directory-browser-heading">
                 <h3 class="directory-browser-title">{props.title}</h3>
                 <p class="directory-browser-description">
-                  {props.description || "Browse folders under the configured workspace root."}
+                  {props.description || t("directoryBrowser.defaultDescription")}
                 </p>
               </div>
-              <button type="button" class="directory-browser-close" aria-label="Close" onClick={props.onClose}>
+              <button type="button" class="directory-browser-close" aria-label={t("directoryBrowser.close")} onClick={props.onClose}>
                 <X class="w-5 h-5" />
               </button>
             </div>
@@ -287,22 +337,35 @@ const DirectoryBrowserDialog: Component<DirectoryBrowserDialogProps> = (props) =
               <Show when={rootPath()}>
                 <div class="directory-browser-current">
                   <div class="directory-browser-current-meta">
-                    <span class="directory-browser-current-label">Current folder</span>
+                    <span class="directory-browser-current-label">{t("directoryBrowser.currentFolder")}</span>
                     <span class="directory-browser-current-path">{currentAbsolutePath()}</span>
                   </div>
-                  <button
-                    type="button"
-                    class="selector-button selector-button-secondary directory-browser-select directory-browser-current-select"
-                    disabled={!canSelectCurrent()}
-                    onClick={() => {
-                      const absolute = currentAbsolutePath()
-                      if (absolute) {
-                        props.onSelect(absolute)
-                      }
-                    }}
-                  >
-                    Select Current
-                  </button>
+                  <div class="directory-browser-current-actions">
+                    <button
+                      type="button"
+                      class="selector-button selector-button-secondary directory-browser-select directory-browser-current-select"
+                      disabled={!canSelectCurrent() || creatingFolder()}
+                      onClick={() => {
+                        const absolute = currentAbsolutePath()
+                        if (absolute) {
+                          props.onSelect(absolute)
+                        }
+                      }}
+                    >
+                      {t("directoryBrowser.selectCurrent")}
+                    </button>
+                    <button
+                      type="button"
+                      class="selector-button selector-button-secondary directory-browser-select"
+                      disabled={!canSelectCurrent() || creatingFolder()}
+                      onClick={() => void handleCreateFolder()}
+                    >
+                      <span class="inline-flex items-center gap-2">
+                        <FolderPlus class="w-4 h-4" />
+                        {creatingFolder() ? t("directoryBrowser.creating") : t("directoryBrowser.newFolder")}
+                      </span>
+                    </button>
+                  </div>
                 </div>
               </Show>
               <Show
@@ -312,7 +375,7 @@ const DirectoryBrowserDialog: Component<DirectoryBrowserDialogProps> = (props) =
                     <Show when={loading()} fallback={<span class="text-red-500">{error()}</span>}>
                       <div class="directory-browser-loading">
                         <Loader2 class="w-5 h-5 animate-spin" />
-                        <span>Loading folders…</span>
+                        <span>{t("directoryBrowser.loadingFolders")}</span>
                       </div>
                     </Show>
                   </div>
@@ -320,13 +383,13 @@ const DirectoryBrowserDialog: Component<DirectoryBrowserDialogProps> = (props) =
               >
                 <Show
                   when={folderRows().length > 0}
-                  fallback={<div class="panel-empty-state flex-1">No folders available.</div>}
+                  fallback={<div class="panel-empty-state flex-1">{t("directoryBrowser.noFolders")}</div>}
                 >
                   <div class="panel-list panel-list--fill flex-1 min-h-0 overflow-auto directory-browser-list" role="listbox">
                     <For each={folderRows()}>
                       {(item) => {
                         const isFolder = item.type === "folder"
-                        const label = isFolder ? item.entry.name || item.entry.path : "Up one level"
+                        const label = isFolder ? item.entry.name || item.entry.path : t("directoryBrowser.upOneLevel")
                         const navigate = () => (isFolder ? handleNavigateTo(item.entry.path) : handleNavigateUp())
                         return (
                           <div class="panel-list-item" role="option">
@@ -353,7 +416,7 @@ const DirectoryBrowserDialog: Component<DirectoryBrowserDialogProps> = (props) =
                                     handleEntrySelect(item.entry)
                                   }}
                                 >
-                                  Select
+                                  {t("directoryBrowser.select")}
                                 </button>
                               ) : null}
                             </div>

packages/ui/src/components/empty-state.tsx

@@ -1,5 +1,6 @@
 import { Component } from "solid-js"
 import { Loader2 } from "lucide-solid"
+import { useI18n } from "../lib/i18n"
 
 const codeNomadIcon = new URL("../images/CodeNomad-Icon.png", import.meta.url).href
 
@@ -9,15 +10,19 @@ interface EmptyStateProps {
 }
 
 const EmptyState: Component<EmptyStateProps> = (props) => {
+  const { t } = useI18n()
+  const modifier = typeof navigator !== "undefined" && navigator.platform.includes("Mac") ? "Cmd" : "Ctrl"
+  const shortcut = `${modifier}+N`
+
   return (
     <div class="flex h-full w-full items-center justify-center bg-surface-secondary">
       <div class="max-w-[500px] px-8 py-12 text-center">
         <div class="mb-8 flex justify-center">
-          <img src={codeNomadIcon} alt="CodeNomad logo" class="h-24 w-auto" loading="lazy" />
+          <img src={codeNomadIcon} alt={t("emptyState.logoAlt")} class="h-24 w-auto" loading="lazy" />
         </div>
 
-        <h1 class="mb-3 text-3xl font-semibold text-primary">CodeNomad</h1>
-        <p class="mb-8 text-base text-secondary">Select a folder to start coding with AI</p>
+        <h1 class="mb-3 text-3xl font-semibold text-primary">{t("emptyState.brandTitle")}</h1>
+        <p class="mb-8 text-base text-secondary">{t("emptyState.tagline")}</p>
 
 
         <button
@@ -28,20 +33,20 @@ const EmptyState: Component<EmptyStateProps> = (props) => {
           {props.isLoading ? (
             <>
               <Loader2 class="h-4 w-4 animate-spin" />
-              Selecting...
+              {t("emptyState.actions.selecting")}
             </>
           ) : (
-            "Select Folder"
+            t("emptyState.actions.selectFolder")
           )}
         </button>
 
         <p class="text-sm text-muted">
-          Keyboard shortcut: {navigator.platform.includes("Mac") ? "Cmd" : "Ctrl"}+N
+          {t("emptyState.keyboardShortcut", { shortcut })}
         </p>
 
         <div class="mt-6 space-y-1 text-sm text-muted">
-          <p>Examples: ~/projects/my-app</p>
-          <p>You can have multiple instances of the same folder</p>
+          <p>{t("emptyState.examples", { example: "~/projects/my-app" })}</p>
+          <p>{t("emptyState.multipleInstances")}</p>
         </div>
       </div>
     </div>

packages/ui/src/components/environment-variables-editor.tsx

@@ -1,12 +1,14 @@
 import { Component, createSignal, For, Show } from "solid-js"
 import { Plus, Trash2, Key, Globe } from "lucide-solid"
 import { useConfig } from "../stores/preferences"
+import { useI18n } from "../lib/i18n"
 
 interface EnvironmentVariablesEditorProps {
   disabled?: boolean
 }
 
 const EnvironmentVariablesEditor: Component<EnvironmentVariablesEditorProps> = (props) => {
+  const { t } = useI18n()
   const {
     preferences,
     addEnvironmentVariable,
@@ -54,9 +56,11 @@ const EnvironmentVariablesEditor: Component<EnvironmentVariablesEditorProps> = (
     <div class="space-y-3">
       <div class="flex items-center gap-2 mb-3">
         <Globe class="w-4 h-4 icon-muted" />
-        <span class="text-sm font-medium text-secondary">Environment Variables</span>
+        <span class="text-sm font-medium text-secondary">{t("envEditor.title")}</span>
         <span class="text-xs text-muted">
-          ({entries().length} variable{entries().length !== 1 ? "s" : ""})
+          {entries().length === 1
+            ? t("envEditor.count.one", { count: entries().length })
+            : t("envEditor.count.other", { count: entries().length })}
         </span>
       </div>
 
@@ -73,8 +77,8 @@ const EnvironmentVariablesEditor: Component<EnvironmentVariablesEditorProps> = (
                     value={key}
                     disabled={props.disabled}
                     class="flex-1 px-2.5 py-1.5 text-sm bg-surface-secondary border border-base rounded text-muted cursor-not-allowed"
-                    placeholder="Variable name"
-                    title="Variable name (read-only)"
+                    placeholder={t("envEditor.fields.name.placeholder")}
+                    title={t("envEditor.fields.name.readOnlyTitle")}
                   />
                   <input
                     type="text"
@@ -82,14 +86,14 @@ const EnvironmentVariablesEditor: Component<EnvironmentVariablesEditorProps> = (
                     disabled={props.disabled}
                     onInput={(e) => handleUpdateVariable(key, e.currentTarget.value)}
                     class="flex-1 px-2.5 py-1.5 text-sm bg-surface-base border border-base rounded text-primary focus-ring-accent disabled:opacity-50 disabled:cursor-not-allowed"
-                    placeholder="Variable value"
+                    placeholder={t("envEditor.fields.value.placeholder")}
                   />
                 </div>
                 <button
                   onClick={() => handleRemoveVariable(key)}
                   disabled={props.disabled}
                   class="p-1.5 icon-muted icon-danger-hover disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-                  title="Remove variable"
+                  title={t("envEditor.actions.remove.title")}
                 >
                   <Trash2 class="w-3.5 h-3.5" />
                 </button>
@@ -110,7 +114,7 @@ const EnvironmentVariablesEditor: Component<EnvironmentVariablesEditorProps> = (
             onKeyPress={handleKeyPress}
             disabled={props.disabled}
             class="flex-1 px-2.5 py-1.5 text-sm bg-surface-base border border-base rounded text-primary focus-ring-accent disabled:opacity-50 disabled:cursor-not-allowed"
-            placeholder="Variable name"
+            placeholder={t("envEditor.fields.name.placeholder")}
           />
           <input
             type="text"
@@ -119,14 +123,14 @@ const EnvironmentVariablesEditor: Component<EnvironmentVariablesEditorProps> = (
             onKeyPress={handleKeyPress}
             disabled={props.disabled}
             class="flex-1 px-2.5 py-1.5 text-sm bg-surface-base border border-base rounded text-primary focus-ring-accent disabled:opacity-50 disabled:cursor-not-allowed"
-            placeholder="Variable value"
+            placeholder={t("envEditor.fields.value.placeholder")}
           />
         </div>
         <button
           onClick={handleAddVariable}
           disabled={props.disabled || !newKey().trim()}
           class="p-1.5 icon-muted icon-accent-hover disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-          title="Add variable"
+          title={t("envEditor.actions.add.title")}
         >
           <Plus class="w-3.5 h-3.5" />
         </button>
@@ -134,12 +138,12 @@ const EnvironmentVariablesEditor: Component<EnvironmentVariablesEditorProps> = (
 
       <Show when={entries().length === 0}>
         <div class="text-xs text-muted text-center py-2">
-          No environment variables configured. Add variables above to customize the OpenCode environment.
+          {t("envEditor.empty")}
         </div>
       </Show>
 
       <div class="text-xs text-muted mt-2">
-        These variables will be available in the OpenCode environment when starting instances.
+        {t("envEditor.help")}
       </div>
     </div>
   )

packages/ui/src/components/expand-button.tsx

@@ -1,5 +1,6 @@
 import { Show } from "solid-js"
 import { Maximize2, Minimize2 } from "lucide-solid"
+import { useI18n } from "../lib/i18n"
 
 interface ExpandButtonProps {
   expandState: () => "normal" | "expanded"
@@ -7,6 +8,8 @@ interface ExpandButtonProps {
 }
 
 export default function ExpandButton(props: ExpandButtonProps) {
+  const { t } = useI18n()
+
   function handleClick() {
     const current = props.expandState()
     props.onToggleExpand(current === "normal" ? "expanded" : "normal")
@@ -17,7 +20,7 @@ export default function ExpandButton(props: ExpandButtonProps) {
       type="button"
       class="prompt-expand-button"
       onClick={handleClick}
-      aria-label="Toggle chat input height"
+      aria-label={t("expandButton.toggleAriaLabel")}
     >
       <Show
         when={props.expandState() === "normal"}

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

@@ -0,0 +1,116 @@
+import { createEffect, createSignal, onCleanup, onMount } from "solid-js"
+import { loadMonaco } from "../../lib/monaco/setup"
+import { getOrCreateTextModel } from "../../lib/monaco/model-cache"
+import { inferMonacoLanguageId } from "../../lib/monaco/language"
+import { ensureMonacoLanguageLoaded } from "../../lib/monaco/setup"
+import { useTheme } from "../../lib/theme"
+
+interface MonacoDiffViewerProps {
+  scopeKey: string
+  path: string
+  before: string
+  after: string
+  viewMode?: "split" | "unified"
+  contextMode?: "expanded" | "collapsed"
+}
+
+export function MonacoDiffViewer(props: MonacoDiffViewerProps) {
+  const { isDark } = useTheme()
+  let host: HTMLDivElement | undefined
+
+  let diffEditor: any = null
+  let monaco: any = null
+  const [ready, setReady] = createSignal(false)
+
+  const disposeEditor = () => {
+    try {
+      diffEditor?.setModel(null as any)
+    } catch {
+      // ignore
+    }
+    try {
+      diffEditor?.dispose()
+    } catch {
+      // ignore
+    }
+    diffEditor = null
+  }
+
+  onMount(() => {
+    let cancelled = false
+    void (async () => {
+      monaco = await loadMonaco()
+      if (cancelled) return
+      if (!host || !monaco) return
+
+      monaco.editor.setTheme(isDark() ? "vs-dark" : "vs")
+      diffEditor = monaco.editor.createDiffEditor(host, {
+        readOnly: true,
+        automaticLayout: true,
+        renderSideBySide: true,
+        renderSideBySideInlineBreakpoint: 0,
+        renderMarginRevertIcon: false,
+        minimap: { enabled: false },
+        scrollBeyondLastLine: false,
+        renderWhitespace: "selection",
+        fontSize: 13,
+        wordWrap: "off",
+        glyphMargin: false,
+        folding: false,
+        // Keep enough gutter space so unified diffs don't overlap `+`/`-` markers.
+        lineNumbersMinChars: 4,
+        lineDecorationsWidth: 12,
+      })
+
+      setReady(true)
+    })()
+
+    onCleanup(() => {
+      cancelled = true
+      setReady(false)
+      disposeEditor()
+    })
+  })
+
+  createEffect(() => {
+    if (!ready() || !monaco || !diffEditor) return
+    monaco.editor.setTheme(isDark() ? "vs-dark" : "vs")
+  })
+
+  createEffect(() => {
+    if (!ready() || !monaco || !diffEditor) return
+    const viewMode = props.viewMode === "unified" ? "unified" : "split"
+    const contextMode = props.contextMode === "collapsed" ? "collapsed" : "expanded"
+
+    diffEditor.updateOptions({
+      renderSideBySide: viewMode === "split",
+      renderSideBySideInlineBreakpoint: 0,
+      hideUnchangedRegions:
+        contextMode === "collapsed"
+          ? { enabled: true }
+          : { enabled: false },
+    })
+  })
+
+  createEffect(() => {
+    if (!ready() || !monaco || !diffEditor) return
+    const languageId = inferMonacoLanguageId(monaco, props.path)
+    const beforeKey = `${props.scopeKey}:diff:${props.path}:before`
+    const afterKey = `${props.scopeKey}:diff:${props.path}:after`
+
+    const original = getOrCreateTextModel({ monaco, cacheKey: beforeKey, value: props.before, languageId })
+    const modified = getOrCreateTextModel({ monaco, cacheKey: afterKey, value: props.after, languageId })
+    diffEditor.setModel({ original, modified })
+
+    void ensureMonacoLanguageLoaded(languageId).then(() => {
+      try {
+        monaco.editor.setModelLanguage(original, languageId)
+        monaco.editor.setModelLanguage(modified, languageId)
+      } catch {
+        // ignore
+      }
+    })
+  })
+
+  return <div class="monaco-viewer" ref={host} />
+}

packages/ui/src/components/file-viewer/monaco-file-viewer.tsx

@@ -0,0 +1,89 @@
+import { createEffect, createSignal, onCleanup, onMount } from "solid-js"
+import { loadMonaco } from "../../lib/monaco/setup"
+import { getOrCreateTextModel } from "../../lib/monaco/model-cache"
+import { inferMonacoLanguageId } from "../../lib/monaco/language"
+import { ensureMonacoLanguageLoaded } from "../../lib/monaco/setup"
+import { useTheme } from "../../lib/theme"
+
+interface MonacoFileViewerProps {
+  scopeKey: string
+  path: string
+  content: string
+}
+
+export function MonacoFileViewer(props: MonacoFileViewerProps) {
+  const { isDark } = useTheme()
+  let host: HTMLDivElement | undefined
+
+  let editor: any = null
+  let monaco: any = null
+  const [ready, setReady] = createSignal(false)
+
+  const disposeEditor = () => {
+    try {
+      editor?.setModel(null)
+    } catch {
+      // ignore
+    }
+    try {
+      editor?.dispose()
+    } catch {
+      // ignore
+    }
+    editor = null
+  }
+
+  onMount(() => {
+    let cancelled = false
+    void (async () => {
+      monaco = await loadMonaco()
+      if (cancelled) return
+      if (!host || !monaco) return
+
+      monaco.editor.setTheme(isDark() ? "vs-dark" : "vs")
+      editor = monaco.editor.create(host, {
+        value: "",
+        language: "plaintext",
+        readOnly: true,
+        automaticLayout: true,
+        lineNumbers: "on",
+        minimap: { enabled: false },
+        scrollBeyondLastLine: false,
+        wordWrap: "off",
+        renderWhitespace: "selection",
+        fontSize: 13,
+      })
+
+      setReady(true)
+    })()
+
+    onCleanup(() => {
+      cancelled = true
+      setReady(false)
+      disposeEditor()
+    })
+  })
+
+  createEffect(() => {
+    if (!ready() || !monaco || !editor) return
+    monaco.editor.setTheme(isDark() ? "vs-dark" : "vs")
+  })
+
+  createEffect(() => {
+    if (!ready() || !monaco || !editor) return
+    const languageId = inferMonacoLanguageId(monaco, props.path)
+    const cacheKey = `${props.scopeKey}:file:${props.path}`
+    const model = getOrCreateTextModel({ monaco, cacheKey, value: props.content, languageId })
+    editor.setModel(model)
+
+    void ensureMonacoLanguageLoaded(languageId).then(() => {
+      try {
+        monaco.editor.setModelLanguage(model, languageId)
+      } catch {
+        // ignore
+      }
+    })
+  })
+
+  return <div class="monaco-viewer" ref={host} />
+}

packages/ui/src/components/filesystem-browser-dialog.tsx

@@ -3,6 +3,7 @@ import { Folder as FolderIcon, File as FileIcon, Loader2, Search, X, ArrowUpLeft
 import type { FileSystemEntry, FileSystemListingMetadata } from "../../../server/src/api-types"
 import { serverApi } from "../lib/api-client"
 import { getLogger } from "../lib/logger"
+import { useI18n } from "../lib/i18n"
 const log = getLogger("actions")
 
 
@@ -49,6 +50,7 @@ interface FileSystemBrowserDialogProps {
 type FolderRow = { type: "up"; path: string } | { type: "entry"; entry: FileSystemEntry }
 
 const FileSystemBrowserDialog: Component<FileSystemBrowserDialogProps> = (props) => {
+  const { t } = useI18n()
   const [rootPath, setRootPath] = createSignal("")
   const [entries, setEntries] = createSignal<FileSystemEntry[]>([])
   const [currentMetadata, setCurrentMetadata] = createSignal<FileSystemListingMetadata | null>(null)
@@ -135,7 +137,7 @@ const FileSystemBrowserDialog: Component<FileSystemBrowserDialogProps> = (props)
       setRootPath(metadata.rootPath)
       setEntries(directoryCache.get(normalizeEntryPath(metadata.currentPath)) ?? [])
     } catch (err) {
-      const message = err instanceof Error ? err.message : "Unable to load filesystem"
+      const message = err instanceof Error ? err.message : t("filesystemBrowser.errors.loadFilesystemFallback")
       setError(message)
     }
   }
@@ -143,10 +145,10 @@ const FileSystemBrowserDialog: Component<FileSystemBrowserDialogProps> = (props)
   function describeLoadingPath() {
     const path = loadingPath()
     if (!path) {
-      return "filesystem"
+      return t("filesystemBrowser.loading.filesystem")
     }
     if (path === ".") {
-      return rootPath() || "workspace root"
+      return rootPath() || t("filesystemBrowser.loading.workspaceRoot")
     }
     return resolveAbsolutePath(rootPath(), path)
   }
@@ -176,7 +178,7 @@ const FileSystemBrowserDialog: Component<FileSystemBrowserDialogProps> = (props)
   function handleNavigateTo(path: string) {
     void fetchDirectory(path, true).catch((err) => {
       log.error("Failed to open directory", err)
-      setError(err instanceof Error ? err.message : "Unable to open directory")
+      setError(err instanceof Error ? err.message : t("filesystemBrowser.errors.openDirectoryFallback"))
     })
   }
 
@@ -277,19 +279,21 @@ const FileSystemBrowserDialog: Component<FileSystemBrowserDialogProps> = (props)
             <div class="panel-header flex items-start justify-between gap-4">
               <div>
                 <h3 class="panel-title">{props.title}</h3>
-                <p class="panel-subtitle">{props.description || "Search for a path under the configured workspace root."}</p>
+                <p class="panel-subtitle">{props.description || t("filesystemBrowser.descriptionFallback")}</p>
                 <Show when={rootPath()}>
-                  <p class="text-xs text-muted mt-1 font-mono break-all">Root: {rootPath()}</p>
+                  <p class="text-xs text-muted mt-1 font-mono break-all">
+                    {t("filesystemBrowser.rootLabel", { root: rootPath() })}
+                  </p>
                 </Show>
               </div>
               <button type="button" class="selector-button selector-button-secondary" onClick={props.onClose}>
                 <X class="w-4 h-4" />
-                Close
+                {t("filesystemBrowser.actions.close")}
               </button>
             </div>
 
             <div class="panel-body">
-              <label class="w-full text-sm text-secondary mb-2 block">Filter</label>
+              <label class="w-full text-sm text-secondary mb-2 block">{t("filesystemBrowser.filterLabel")}</label>
               <div class="selector-input-group">
                 <div class="flex items-center gap-2 px-3 text-muted">
                   <Search class="w-4 h-4" />
@@ -301,7 +305,11 @@ const FileSystemBrowserDialog: Component<FileSystemBrowserDialogProps> = (props)
                   type="text"
                   value={searchQuery()}
                   onInput={(event) => setSearchQuery(event.currentTarget.value)}
-                  placeholder={props.mode === "directories" ? "Search for folders" : "Search for files"}
+                  placeholder={
+                    props.mode === "directories"
+                      ? t("filesystemBrowser.search.placeholder.directories")
+                      : t("filesystemBrowser.search.placeholder.files")
+                  }
                   class="selector-input"
                 />
               </div>
@@ -311,7 +319,7 @@ const FileSystemBrowserDialog: Component<FileSystemBrowserDialogProps> = (props)
               <div class="px-4 pb-2">
                 <div class="flex items-center justify-between gap-3 rounded-md border border-border-subtle px-4 py-3">
                   <div>
-                    <p class="text-xs text-secondary uppercase tracking-wide">Current folder</p>
+                    <p class="text-xs text-secondary uppercase tracking-wide">{t("filesystemBrowser.currentFolder.label")}</p>
                     <p class="text-sm font-mono text-primary break-all">{currentAbsolutePath()}</p>
                   </div>
                   <button
@@ -319,7 +327,7 @@ const FileSystemBrowserDialog: Component<FileSystemBrowserDialogProps> = (props)
                     class="selector-button selector-button-secondary whitespace-nowrap"
                     onClick={() => props.onSelect(currentAbsolutePath())}
                   >
-                    Select Current
+                    {t("filesystemBrowser.currentFolder.selectCurrent")}
                   </button>
                 </div>
               </div>
@@ -336,7 +344,7 @@ const FileSystemBrowserDialog: Component<FileSystemBrowserDialogProps> = (props)
                     >
                       <div class="flex items-center gap-2">
                         <Loader2 class="w-4 h-4 animate-spin" />
-                        <span>Loading {describeLoadingPath()}…</span>
+                        <span>{t("filesystemBrowser.loading.loadingWithPath", { path: describeLoadingPath() })}</span>
                       </div>
                     </Show>
                   </div>
@@ -345,16 +353,16 @@ const FileSystemBrowserDialog: Component<FileSystemBrowserDialogProps> = (props)
                 <Show when={loadingPath()}>
                   <div class="flex items-center gap-2 px-4 py-2 text-xs text-secondary">
                     <Loader2 class="w-3.5 h-3.5 animate-spin" />
-                    <span>Loading {describeLoadingPath()}…</span>
+                    <span>{t("filesystemBrowser.loading.loadingWithPath", { path: describeLoadingPath() })}</span>
                   </div>
                 </Show>
                 <Show
                   when={folderRows().length > 0}
                   fallback={
                     <div class="flex flex-col items-center justify-center gap-2 py-10 text-sm text-secondary">
-                      <p>No entries found.</p>
+                      <p>{t("filesystemBrowser.empty.noEntries")}</p>
                       <button type="button" class="selector-button selector-button-secondary" onClick={refreshEntries}>
-                        Retry
+                        {t("filesystemBrowser.actions.retry")}
                       </button>
                     </div>
                   }
@@ -370,7 +378,7 @@ const FileSystemBrowserDialog: Component<FileSystemBrowserDialogProps> = (props)
                                   <ArrowUpLeft class="w-4 h-4" />
                                 </div>
                                 <div class="directory-browser-row-text">
-                                  <span class="directory-browser-row-name">Up one level</span>
+                                  <span class="directory-browser-row-name">{t("filesystemBrowser.navigation.upOneLevel")}</span>
                                 </div>
                               </button>
                             </div>
@@ -412,7 +420,7 @@ const FileSystemBrowserDialog: Component<FileSystemBrowserDialogProps> = (props)
                                 selectEntry()
                               }}
                             >
-                              Select
+                              {t("filesystemBrowser.actions.select")}
                             </button>
                           </div>
                         </div>
@@ -428,15 +436,15 @@ const FileSystemBrowserDialog: Component<FileSystemBrowserDialogProps> = (props)
                 <div class="flex items-center gap-1.5">
                   <kbd class="kbd">↑</kbd>
                   <kbd class="kbd">↓</kbd>
-                  <span>Navigate</span>
+                  <span>{t("filesystemBrowser.hints.navigate")}</span>
                 </div>
                 <div class="flex items-center gap-1.5">
                   <kbd class="kbd">Enter</kbd>
-                  <span>Select</span>
+                  <span>{t("filesystemBrowser.hints.select")}</span>
                 </div>
                 <div class="flex items-center gap-1.5">
                   <kbd class="kbd">Esc</kbd>
-                  <span>Close</span>
+                  <span>{t("filesystemBrowser.hints.close")}</span>
                 </div>
               </div>
             </div>
@@ -448,4 +456,3 @@ const FileSystemBrowserDialog: Component<FileSystemBrowserDialogProps> = (props)
 }
 
 export default FileSystemBrowserDialog
-

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

@@ -1,11 +1,17 @@
+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 } from "lucide-solid"
+import { Folder, Clock, Trash2, FolderPlus, Settings, ChevronRight, MonitorUp, Star, Languages, ChevronDown } from "lucide-solid"
 import { useConfig } from "../stores/preferences"
 import AdvancedSettingsModal from "./advanced-settings-modal"
 import DirectoryBrowserDialog from "./directory-browser-dialog"
 import Kbd from "./kbd"
+import { ThemeModeToggle } from "./theme-mode-toggle"
 import { openNativeFolderDialog, supportsNativeDialogs } from "../lib/native/native-functions"
 import VersionPill from "./version-pill"
+import { DiscordSymbolIcon, GitHubMarkIcon } from "./brand-icons"
+import { githubStars } from "../stores/github-stars"
+import { formatCompactCount } from "../lib/formatters"
+import { useI18n, type Locale } from "../lib/i18n"
 
 const codeNomadLogo = new URL("../images/CodeNomad-Icon.png", import.meta.url).href
 
@@ -20,13 +26,27 @@ interface FolderSelectionViewProps {
 }
 
 const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
-  const { recentFolders, removeRecentFolder, preferences } = useConfig()
+  const { recentFolders, removeRecentFolder, preferences, updatePreferences } = useConfig()
+  const { t, locale } = useI18n()
   const [selectedIndex, setSelectedIndex] = createSignal(0)
   const [focusMode, setFocusMode] = createSignal<"recent" | "new" | null>("recent")
   const [selectedBinary, setSelectedBinary] = createSignal(preferences().lastUsedBinary || "opencode")
   const [isFolderBrowserOpen, setIsFolderBrowserOpen] = createSignal(false)
   const nativeDialogsAvailable = supportsNativeDialogs()
   let recentListRef: HTMLDivElement | undefined
+
+  type LanguageOption = { value: Locale; label: string }
+
+  const languageOptions: LanguageOption[] = [
+    { value: "en", label: "English" },
+    { value: "es", label: "Español" },
+    { value: "fr", label: "Français" },
+    { value: "ru", label: "Русский" },
+    { value: "ja", label: "日本語" },
+    { value: "zh-Hans", label: "简体中文" },
+  ]
+
+  const selectedLanguageOption = () => languageOptions.find((opt) => opt.value === locale()) ?? languageOptions[0]
  
   const folders = () => recentFolders()
   const isLoading = () => Boolean(props.isLoading)
@@ -57,6 +77,19 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
 
 
   function handleKeyDown(e: KeyboardEvent) {
+    let activeElement: HTMLElement | null = null
+    if (typeof document !== "undefined") {
+      activeElement = document.activeElement as HTMLElement | null
+    }
+    const insideModal = activeElement?.closest(".modal-surface") || activeElement?.closest("[role='dialog']")
+    const isEditingField =
+      activeElement &&
+      (["INPUT", "TEXTAREA", "SELECT"].includes(activeElement.tagName) || activeElement.isContentEditable || Boolean(insideModal))
+
+    if (isEditingField) {
+      return
+    }
+
     const normalizedKey = e.key.toLowerCase()
     const isBrowseShortcut = (e.metaKey || e.ctrlKey) && !e.shiftKey && normalizedKey === "n"
     const blockedKeys = [
@@ -165,16 +198,21 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
     const hours = Math.floor(minutes / 60)
     const days = Math.floor(hours / 24)
 
-    if (days > 0) return `${days}d ago`
-    if (hours > 0) return `${hours}h ago`
-    if (minutes > 0) return `${minutes}m ago`
-    return "just now"
+    if (days > 0) return t("time.relative.daysAgoShort", { count: days })
+    if (hours > 0) return t("time.relative.hoursAgoShort", { count: hours })
+    if (minutes > 0) return t("time.relative.minutesAgoShort", { count: minutes })
+    return t("time.relative.justNow")
   }
 
   function handleFolderSelect(path: string) {
     if (isLoading()) return
     props.onSelectFolder(path, selectedBinary())
   }
+
+  const openExternalLink = (url: string) => {
+    if (typeof window === "undefined") return
+    window.open(url, "_blank", "noopener,noreferrer")
+  }
  
   async function handleBrowse() {
     if (isLoading()) return
@@ -182,7 +220,7 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
     if (nativeDialogsAvailable) {
       const fallbackPath = folders()[0]?.path
       const selected = await openNativeFolderDialog({
-        title: "Select Workspace",
+        title: t("folderSelection.dialog.title"),
         defaultPath: fallbackPath,
       })
       if (selected) {
@@ -216,12 +254,63 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
 
 
   function getDisplayPath(path: string): string {
+    if (!path) return path
+
+    // macOS: /Users/<name>/...
     if (path.startsWith("/Users/")) {
       return path.replace(/^\/Users\/[^/]+/, "~")
     }
+
+    // Linux: /home/<name>/...
+    if (path.startsWith("/home/")) {
+      return path.replace(/^\/home\/[^/]+/, "~")
+    }
+
+    // Windows: C:\Users\<name>\... (and the forward-slash variant)
+    if (/^[A-Za-z]:\\Users\\/.test(path)) {
+      return path.replace(/^[A-Za-z]:\\Users\\[^\\]+/, "~")
+    }
+    if (/^[A-Za-z]:\/Users\//.test(path)) {
+      return path.replace(/^[A-Za-z]:\/Users\/[^/]+/, "~")
+    }
+
     return path
   }
 
+  function looksLikeWindowsPath(value: string): boolean {
+    if (!value) return false
+    // Drive letter (C:\...) or UNC (\\server\share\...)
+    return /^[A-Za-z]:[\\/]/.test(value) || /^\\\\[^\\]+\\[^\\]+/.test(value)
+  }
+
+  function splitFolderPath(rawPath: string): { baseName: string; dirName: string } {
+    if (!rawPath) return { baseName: "", dirName: "" }
+
+    const isWindows = looksLikeWindowsPath(rawPath)
+    const trimmed = rawPath.replace(/[\\/]+$/, "")
+
+    // Root edge-cases ("/", "C:\\", "\\\\server\\share\\")
+    if (!trimmed) {
+      return { baseName: rawPath, dirName: "" }
+    }
+
+    if (isWindows && /^[A-Za-z]:$/.test(trimmed)) {
+      return { baseName: `${trimmed}\\`, dirName: "" }
+    }
+
+    const lastSlash = trimmed.lastIndexOf("/")
+    const lastBackslash = isWindows ? trimmed.lastIndexOf("\\") : -1
+    const lastSep = Math.max(lastSlash, lastBackslash)
+
+    if (lastSep < 0) {
+      return { baseName: trimmed, dirName: "" }
+    }
+
+    const baseName = trimmed.slice(lastSep + 1) || trimmed
+    const dirName = trimmed.slice(0, lastSep)
+    return { baseName, dirName }
+  }
+
   return (
     <>
       <div
@@ -229,170 +318,282 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
         style="background-color: var(--surface-secondary)"
       >
         <div
-          class="w-full max-w-3xl h-full px-4 sm:px-8 pb-2 flex flex-col overflow-hidden"
+          class="w-full max-w-5xl h-full px-4 sm:px-8 pb-2 flex flex-col overflow-hidden"
           aria-busy={isLoading() ? "true" : "false"}
         >
-          <Show when={props.onOpenRemoteAccess}>
-            <div class="absolute top-4 right-6">
+          <div class="absolute top-4 left-6">
+            <Select<LanguageOption>
+              value={selectedLanguageOption()}
+              onChange={(value) => {
+                if (!value) return
+                if (value.value === locale()) return
+                updatePreferences({ locale: value.value })
+              }}
+              options={languageOptions}
+              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("folderSelection.language.ariaLabel")}
+                title={t("folderSelection.language.ariaLabel")}
+              >
+                <Languages class="w-4 h-4 icon-muted" aria-hidden="true" />
+                <div class="flex-1 min-w-0">
+                  <Select.Value<LanguageOption>>
+                    {(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 min-w-[180px]">
+                  <Select.Listbox class="selector-listbox" />
+                </Select.Content>
+              </Select.Portal>
+            </Select>
+          </div>
+          <div class="absolute top-4 right-6 flex items-center gap-2">
+            <ThemeModeToggle class="selector-button selector-button-secondary w-auto p-2 inline-flex items-center justify-center" />
+            <Show when={props.onOpenRemoteAccess}>
               <button
                 type="button"
-                class="selector-button selector-button-secondary inline-flex items-center justify-center"
+                class="selector-button selector-button-secondary w-auto p-2 inline-flex items-center justify-center"
                 onClick={() => props.onOpenRemoteAccess?.()}
               >
                 <MonitorUp class="w-4 h-4" />
               </button>
-            </div>
-          </Show>
-        <div class="mb-6 text-center shrink-0">
-          <div class="mb-3 flex justify-center">
-            <img src={codeNomadLogo} alt="CodeNomad logo" class="h-32 w-auto sm:h-48" loading="lazy" />
-          </div>
-          <h1 class="mb-2 text-3xl font-semibold text-primary">CodeNomad</h1>
-          <p class="text-base text-secondary">Select a folder to start coding with AI</p>
-          <div class="mt-2 flex justify-center">
-            <VersionPill />
-          </div>
-        </div>
-
- 
-          <div class="space-y-4 flex-1 min-h-0 overflow-hidden flex flex-col">
-
-            <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">No Recent Folders</p>
-                  <p class="panel-empty-state-description">Browse for a folder to get started</p>
-                </div>
-              }
-            >
-              <div class="panel flex flex-col flex-1 min-h-0">
-                <div class="panel-header">
-                  <h2 class="panel-title">Recent Folders</h2>
-                  <p class="panel-subtitle">
-                    {folders().length} {folders().length === 1 ? "folder" : "folders"} available
-                  </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-folder-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">
-                                    {folder.path.split("/").pop()}
-                                  </span>
-                                </div>
-                                <div class="text-xs font-mono truncate pl-6 text-muted">
-                                  {getDisplayPath(folder.path)}
-                                </div>
-                                <div class="text-xs mt-1 pl-6 text-muted">
-                                  {formatRelativeTime(folder.lastAccessed)}
-                                </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="Remove from recent"
-                          >
-                            <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>
-              </div>
             </Show>
-
-            <div class="panel shrink-0">
-              <div class="panel-header hidden sm:block">
-                <h2 class="panel-title">Browse for Folder</h2>
-                <p class="panel-subtitle">Select any folder on your computer</p>
-              </div>
-
-              <div class="panel-body">
-                <button
-                  onClick={() => void handleBrowse()}
-                  disabled={props.isLoading}
-                  class="button-primary w-full flex items-center justify-center text-sm disabled:cursor-not-allowed"
-                  onMouseEnter={() => setFocusMode("new")}
-                >
-                  <div class="flex items-center gap-2">
-                    <FolderPlus class="w-4 h-4" />
-                    <span>{props.isLoading ? "Opening..." : "Browse Folders"}</span>
-                  </div>
-                  <Kbd shortcut="cmd+n" class="ml-2" />
-                </button>
-              </div>
-
-              {/* Advanced settings section */}
-              <div class="panel-section w-full">
-                <button
-                  onClick={() => props.onAdvancedSettingsOpen?.()}
-                  class="panel-section-header w-full justify-between"
-                >
-                  <div class="flex items-center gap-2">
-                    <Settings class="w-4 h-4 icon-muted" />
-                    <span class="text-sm font-medium text-secondary">Advanced Settings</span>
-                  </div>
-                  <ChevronRight class="w-4 h-4 icon-muted" />
-                </button>
-              </div>
+          </div>
+          <div class="mb-6 text-center shrink-0">
+            <div class="mb-3 flex justify-center">
+              <img src={codeNomadLogo} alt={t("folderSelection.logoAlt")} class="h-32 w-auto sm:h-48" loading="lazy" />
             </div>
+            <h1 class="mb-2 text-3xl font-semibold text-primary">CodeNomad</h1>
+            <div class="mt-3 flex justify-center gap-2">
+              <a
+                href="https://github.com/NeuralNomadsAI/CodeNomad"
+                target="_blank"
+                rel="noreferrer"
+                class="selector-button selector-button-secondary w-auto p-2 inline-flex items-center justify-center"
+                aria-label={t("folderSelection.links.github")}
+                title={t("folderSelection.links.github")}
+                onClick={(event) => {
+                  event.preventDefault()
+                  openExternalLink("https://github.com/NeuralNomadsAI/CodeNomad")
+                }}
+              >
+                <GitHubMarkIcon class="w-4 h-4" />
+              </a>
+              <a
+                href="https://github.com/NeuralNomadsAI/CodeNomad"
+                target="_blank"
+                rel="noreferrer"
+                class="selector-button selector-button-secondary w-auto px-3 py-1.5 inline-flex items-center justify-center gap-1.5"
+                aria-label={t("folderSelection.links.githubStars")}
+                title={t("folderSelection.links.githubStars")}
+                onClick={(event) => {
+                  event.preventDefault()
+                  openExternalLink("https://github.com/NeuralNomadsAI/CodeNomad")
+                }}
+              >
+                <Star class="w-4 h-4" />
+                <Show when={githubStars() !== null}>
+                  <span class="text-xs font-medium">{formatCompactCount(githubStars()!)}</span>
+                </Show>
+              </a>
+              <a
+                href="https://discord.com/channels/1391832426048651334/1458412028325793887/1464701235683917945"
+                target="_blank"
+                rel="noreferrer"
+                class="selector-button selector-button-secondary w-auto p-2 inline-flex items-center justify-center"
+                aria-label={t("folderSelection.links.discord")}
+                title={t("folderSelection.links.discord")}
+                onClick={(event) => {
+                  event.preventDefault()
+                  openExternalLink(
+                    "https://discord.com/channels/1391832426048651334/1458412028325793887/1464701235683917945",
+                  )
+                }}
+              >
+                <DiscordSymbolIcon class="w-4 h-4" />
+              </a>
+            </div>
+            <p class="mt-3 text-base text-secondary">{t("folderSelection.tagline")}</p>
           </div>
 
-          <div class="mt-1 panel panel-footer shrink-0 hidden sm:block">
-            <div class="panel-footer-hints">
-              <Show when={folders().length > 0}>
-                <div class="flex items-center gap-1.5">
-                  <kbd class="kbd">↑</kbd>
-                  <kbd class="kbd">↓</kbd>
-                  <span>Navigate</span>
-                </div>
-                <div class="flex items-center gap-1.5">
-                  <kbd class="kbd">Enter</kbd>
-                  <span>Select</span>
-                </div>
-                <div class="flex items-center gap-1.5">
-                  <kbd class="kbd">Del</kbd>
-                  <span>Remove</span>
+          <div class="flex-1 min-h-0 overflow-hidden flex flex-col gap-4">
+            <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-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-folder-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>
                 </div>
               </Show>
-              <div class="flex items-center gap-1.5">
-                <Kbd shortcut="cmd+n" />
-                <span>Browse</span>
+
+              </div>
+
+              {/* Left column: version + browse + advanced settings */}
+              <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>
+                </div>
+
+                <div class="panel-body">
+                  <button
+                    onClick={() => void handleBrowse()}
+                    disabled={props.isLoading}
+                    class="button-primary w-full flex items-center justify-center text-sm disabled:cursor-not-allowed"
+                    onMouseEnter={() => setFocusMode("new")}
+                  >
+                    <div class="flex items-center gap-2">
+                      <FolderPlus class="w-4 h-4" />
+                      <span>
+                        {props.isLoading
+                          ? t("folderSelection.browse.buttonOpening")
+                          : t("folderSelection.browse.button")}
+                      </span>
+                    </div>
+                    <Kbd shortcut="cmd+n" class="ml-2" />
+                  </button>
+                </div>
+
+                {/* Advanced settings section */}
+                <div class="panel-section w-full">
+                  <button onClick={() => props.onAdvancedSettingsOpen?.()} class="panel-section-header w-full justify-between">
+                    <div class="flex items-center gap-2">
+                      <Settings class="w-4 h-4 icon-muted" />
+                      <span class="text-sm font-medium text-secondary">{t("folderSelection.advancedSettings")}</span>
+                    </div>
+                    <ChevronRight class="w-4 h-4 icon-muted" />
+                  </button>
+                </div>
+              </div>
+
+              <div class="panel shrink-0">
+                <div class="panel-body flex items-center justify-center">
+                  <VersionPill />
+                </div>
+              </div>
+            </div>
+
+            </div>
+
+            <div class="panel panel-footer shrink-0 hidden sm:block">
+              <div class="panel-footer-hints">
+                <Show when={folders().length > 0}>
+                  <div class="flex items-center gap-1.5">
+                    <kbd class="kbd">↑</kbd>
+                    <kbd class="kbd">↓</kbd>
+                    <span>{t("folderSelection.hints.navigate")}</span>
+                  </div>
+                  <div class="flex items-center gap-1.5">
+                    <kbd class="kbd">Enter</kbd>
+                    <span>{t("folderSelection.hints.select")}</span>
+                  </div>
+                  <div class="flex items-center gap-1.5">
+                    <kbd class="kbd">Del</kbd>
+                    <span>{t("folderSelection.hints.remove")}</span>
+                  </div>
+                </Show>
+                <div class="flex items-center gap-1.5">
+                  <Kbd shortcut="cmd+n" />
+                  <span>{t("folderSelection.hints.browse")}</span>
+                </div>
               </div>
             </div>
           </div>
@@ -401,8 +602,8 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
           <div class="folder-loading-overlay">
             <div class="folder-loading-indicator">
               <div class="spinner" />
-              <p class="folder-loading-text">Starting instance…</p>
-              <p class="folder-loading-subtext">Hang tight while we prepare your workspace.</p>
+              <p class="folder-loading-text">{t("folderSelection.loading.title")}</p>
+              <p class="folder-loading-subtext">{t("folderSelection.loading.subtitle")}</p>
             </div>
           </div>
         </Show>
@@ -418,8 +619,8 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
 
       <DirectoryBrowserDialog
         open={isFolderBrowserOpen()}
-        title="Select Workspace"
-        description="Select workspace to start coding."
+        title={t("folderSelection.dialog.title")}
+        description={t("folderSelection.dialog.description")}
         onClose={() => setIsFolderBrowserOpen(false)}
         onSelect={handleBrowserSelect}
       />

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

@@ -2,6 +2,7 @@ import { Component, For, createSignal, createEffect, Show, onMount, onCleanup, c
 import { instances, getInstanceLogs, isInstanceLogStreaming, setInstanceLogStreaming } from "../stores/instances"
 import { ChevronDown } from "lucide-solid"
 import InstanceInfo from "./instance-info"
+import { useI18n } from "../lib/i18n"
 
 interface InfoViewProps {
   instanceId: string
@@ -10,6 +11,7 @@ interface InfoViewProps {
 const logsScrollState = new Map<string, { scrollTop: number; autoScroll: boolean }>()
 
 const InfoView: Component<InfoViewProps> = (props) => {
+  const { t } = useI18n()
   let scrollRef: HTMLDivElement | undefined
   const savedState = logsScrollState.get(props.instanceId)
   const [autoScroll, setAutoScroll] = createSignal(savedState?.autoScroll ?? false)
@@ -90,18 +92,18 @@ const InfoView: Component<InfoViewProps> = (props) => {
 
         <div class="panel flex-1 flex flex-col min-h-0 overflow-hidden">
           <div class="log-header">
-            <h2 class="panel-title">Server Logs</h2>
+            <h2 class="panel-title">{t("infoView.logs.title")}</h2>
             <div class="flex items-center gap-2">
               <Show
                 when={streamingEnabled()}
                 fallback={
                   <button type="button" class="button-tertiary" onClick={handleEnableLogs}>
-                    Show server logs
+                    {t("infoView.logs.actions.show")}
                   </button>
                 }
               >
                 <button type="button" class="button-tertiary" onClick={handleDisableLogs}>
-                  Hide server logs
+                  {t("infoView.logs.actions.hide")}
                 </button>
               </Show>
             </div>
@@ -116,17 +118,17 @@ const InfoView: Component<InfoViewProps> = (props) => {
               when={streamingEnabled()}
               fallback={
                 <div class="log-paused-state">
-                  <p class="log-paused-title">Server logs are paused</p>
-                  <p class="log-paused-description">Enable streaming to watch your OpenCode server activity.</p>
+                  <p class="log-paused-title">{t("infoView.logs.paused.title")}</p>
+                  <p class="log-paused-description">{t("infoView.logs.paused.description")}</p>
                   <button type="button" class="button-primary" onClick={handleEnableLogs}>
-                    Show server logs
+                    {t("infoView.logs.actions.show")}
                   </button>
                 </div>
               }
             >
               <Show
                 when={logs().length > 0}
-                fallback={<div class="log-empty-state">Waiting for server output...</div>}
+                fallback={<div class="log-empty-state">{t("infoView.logs.empty.waiting")}</div>}
               >
                 <For each={logs()}>
                   {(entry) => (
@@ -148,7 +150,7 @@ const InfoView: Component<InfoViewProps> = (props) => {
               class="scroll-to-bottom"
             >
               <ChevronDown class="w-4 h-4" />
-              Scroll to bottom
+              {t("infoView.logs.scrollToBottom")}
             </button>
           </Show>
         </div>

packages/ui/src/components/instance-disconnected-modal.tsx

@@ -1,4 +1,5 @@
 import { Dialog } from "@kobalte/core/dialog"
+import { useI18n } from "../lib/i18n"
 
 interface InstanceDisconnectedModalProps {
   open: boolean
@@ -8,8 +9,10 @@ interface InstanceDisconnectedModalProps {
 }
 
 export default function InstanceDisconnectedModal(props: InstanceDisconnectedModalProps) {
-  const folderLabel = props.folder || "this workspace"
-  const reasonLabel = props.reason || "The server stopped responding"
+  const { t } = useI18n()
+
+  const folderLabel = () => props.folder || t("instanceDisconnected.folderFallback")
+  const reasonLabel = () => props.reason || t("instanceDisconnected.reasonFallback")
 
   return (
     <Dialog open={props.open} modal>
@@ -18,25 +21,25 @@ export default function InstanceDisconnectedModal(props: InstanceDisconnectedMod
         <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
           <Dialog.Content class="modal-surface w-full max-w-md p-6 flex flex-col gap-6">
             <div>
-              <Dialog.Title class="text-xl font-semibold text-primary">Instance Disconnected</Dialog.Title>
+              <Dialog.Title class="text-xl font-semibold text-primary">{t("instanceDisconnected.title")}</Dialog.Title>
               <Dialog.Description class="text-sm text-secondary mt-2 break-words">
-                {folderLabel} can no longer be reached. Close the tab to continue working.
+                {t("instanceDisconnected.description", { folder: folderLabel() })}
               </Dialog.Description>
             </div>
 
             <div class="rounded-lg border border-base bg-surface-secondary p-4 text-sm text-secondary">
-              <p class="font-medium text-primary">Details</p>
-              <p class="mt-2 text-secondary">{reasonLabel}</p>
+              <p class="font-medium text-primary">{t("instanceDisconnected.details.title")}</p>
+              <p class="mt-2 text-secondary">{reasonLabel()}</p>
               {props.folder && (
                 <p class="mt-2 text-secondary">
-                  Folder: <span class="font-mono text-primary break-all">{props.folder}</span>
+                  {t("instanceDisconnected.details.folderLabel")} <span class="font-mono text-primary break-all">{props.folder}</span>
                 </p>
               )}
             </div>
 
             <div class="flex justify-end">
               <button type="button" class="selector-button selector-button-primary" onClick={props.onClose}>
-                Close Instance
+                {t("instanceDisconnected.actions.closeInstance")}
               </button>
             </div>
           </Dialog.Content>

packages/ui/src/components/instance-info.tsx

@@ -2,6 +2,7 @@ import { Component, For, Show, createMemo } from "solid-js"
 import type { Instance } from "../types/instance"
 import { useOptionalInstanceMetadataContext } from "../lib/contexts/instance-metadata-context"
 import InstanceServiceStatus from "./instance-service-status"
+import { useI18n } from "../lib/i18n"
 
 interface InstanceInfoProps {
   instance: Instance
@@ -9,6 +10,7 @@ interface InstanceInfoProps {
 }
 
 const InstanceInfo: Component<InstanceInfoProps> = (props) => {
+  const { t } = useI18n()
   const metadataContext = useOptionalInstanceMetadataContext()
   const isLoadingMetadata = metadataContext?.isLoading ?? (() => false)
   const instanceAccessor = metadataContext?.instance ?? (() => props.instance)
@@ -26,11 +28,11 @@ const InstanceInfo: Component<InstanceInfoProps> = (props) => {
   return (
     <div class="panel">
       <div class="panel-header">
-        <h2 class="panel-title">Instance Information</h2>
+        <h2 class="panel-title">{t("instanceInfo.title")}</h2>
       </div>
       <div class="panel-body space-y-3">
         <div>
-          <div class="text-xs font-medium text-muted uppercase tracking-wide mb-1">Folder</div>
+          <div class="text-xs font-medium text-muted uppercase tracking-wide mb-1">{t("instanceInfo.labels.folder")}</div>
           <div class="text-xs text-primary font-mono break-all px-2 py-1.5 rounded border bg-surface-secondary border-base">
             {currentInstance().folder}
           </div>
@@ -41,7 +43,7 @@ const InstanceInfo: Component<InstanceInfoProps> = (props) => {
             <>
               <div>
                 <div class="text-xs font-medium text-muted uppercase tracking-wide mb-1">
-                  Project
+                  {t("instanceInfo.labels.project")}
                 </div>
                 <div class="text-xs font-mono px-2 py-1.5 rounded border truncate bg-surface-secondary border-base text-primary">
                   {project().id}
@@ -51,7 +53,7 @@ const InstanceInfo: Component<InstanceInfoProps> = (props) => {
               <Show when={project().vcs}>
                 <div>
                   <div class="text-xs font-medium text-muted uppercase tracking-wide mb-1">
-                    Version Control
+                    {t("instanceInfo.labels.versionControl")}
                   </div>
                   <div class="flex items-center gap-2 text-xs text-primary">
                     <svg
@@ -73,7 +75,7 @@ const InstanceInfo: Component<InstanceInfoProps> = (props) => {
         <Show when={binaryVersion()}>
           <div>
             <div class="text-xs font-medium text-muted uppercase tracking-wide mb-1">
-              OpenCode Version
+              {t("instanceInfo.labels.opencodeVersion")}
             </div>
             <div class="text-xs px-2 py-1.5 rounded border bg-surface-secondary border-base text-primary">
               v{binaryVersion()}
@@ -84,7 +86,7 @@ const InstanceInfo: Component<InstanceInfoProps> = (props) => {
         <Show when={currentInstance().binaryPath}>
           <div>
             <div class="text-xs font-medium text-muted uppercase tracking-wide mb-1">
-              Binary Path
+              {t("instanceInfo.labels.binaryPath")}
             </div>
             <div class="text-xs font-mono break-all px-2 py-1.5 rounded border bg-surface-secondary border-base text-primary">
               {currentInstance().binaryPath}
@@ -95,7 +97,7 @@ const InstanceInfo: Component<InstanceInfoProps> = (props) => {
         <Show when={environmentEntries().length > 0}>
           <div>
             <div class="text-xs font-medium text-muted uppercase tracking-wide mb-1.5">
-              Environment Variables ({environmentEntries().length})
+              {t("instanceInfo.labels.environmentVariables", { count: environmentEntries().length })}
             </div>
             <div class="space-y-1">
               <For each={environmentEntries()}>
@@ -127,24 +129,24 @@ const InstanceInfo: Component<InstanceInfoProps> = (props) => {
                   d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                 />
               </svg>
-              Loading...
+              {t("instanceInfo.loading")}
             </div>
           </div>
         </Show>
 
         <div>
-          <div class="text-xs font-medium text-muted uppercase tracking-wide mb-1.5">Server</div>
+          <div class="text-xs font-medium text-muted uppercase tracking-wide mb-1.5">{t("instanceInfo.server.title")}</div>
           <div class="space-y-1 text-xs">
             <div class="flex justify-between items-center">
-              <span class="text-secondary">Port:</span>
+              <span class="text-secondary">{t("instanceInfo.server.port")}</span>
               <span class="text-primary font-mono">{currentInstance().port}</span>
             </div>
             <div class="flex justify-between items-center">
-              <span class="text-secondary">PID:</span>
+              <span class="text-secondary">{t("instanceInfo.server.pid")}</span>
               <span class="text-primary font-mono">{currentInstance().pid}</span>
             </div>
             <div class="flex justify-between items-center">
-              <span class="text-secondary">Status:</span>
+              <span class="text-secondary">{t("instanceInfo.server.status")}</span>
               <span class={`status-badge ${currentInstance().status}`}>
                 <div
                   class={`status-dot ${currentInstance().status === "ready" ? "ready" : currentInstance().status === "starting" ? "starting" : currentInstance().status === "error" ? "error" : "stopped"} ${currentInstance().status === "ready" || currentInstance().status === "starting" ? "animate-pulse" : ""}`}

packages/ui/src/components/instance-service-status.tsx

@@ -2,6 +2,7 @@ import { For, Show, createMemo, createSignal, type Component } from "solid-js"
 import Switch from "@suid/material/Switch"
 import type { Instance, RawMcpStatus } from "../types/instance"
 import { useOptionalInstanceMetadataContext } from "../lib/contexts/instance-metadata-context"
+import { useI18n } from "../lib/i18n"
 import { getLogger } from "../lib/logger"
 
 const log = getLogger("session")
@@ -42,6 +43,7 @@ function parseMcpStatus(status?: RawMcpStatus): ParsedMcpStatus[] {
 }
 
 const InstanceServiceStatus: Component<InstanceServiceStatusProps> = (props) => {
+  const { t } = useI18n()
   const metadataContext = useOptionalInstanceMetadataContext()
   const instance = metadataContext?.instance ?? (() => {
     if (props.initialInstance) {
@@ -112,12 +114,12 @@ const InstanceServiceStatus: Component<InstanceServiceStatusProps> = (props) =>
     <section class="space-y-1.5">
       <Show when={showHeadings()}>
         <div class="text-xs font-medium text-muted uppercase tracking-wide">
-          LSP Servers
+          {t("instanceServiceStatus.sections.lsp")}
         </div>
       </Show>
       <Show
         when={!isLspLoading() && lspServers().length > 0}
-        fallback={renderEmptyState(isLspLoading() ? "Loading LSP servers..." : "No LSP servers detected.")}
+        fallback={renderEmptyState(isLspLoading() ? t("instanceServiceStatus.lsp.loading") : t("instanceServiceStatus.lsp.empty"))}
       >
         <div class="space-y-1.5">
           <For each={lspServers()}>
@@ -132,7 +134,11 @@ const InstanceServiceStatus: Component<InstanceServiceStatusProps> = (props) =>
                   </div>
                   <div class="flex items-center gap-1.5 flex-shrink-0 text-xs text-secondary">
                     <div class={`status-dot ${server.status === "connected" ? "ready animate-pulse" : "error"}`} />
-                    <span>{server.status === "connected" ? "Connected" : "Error"}</span>
+                    <span>
+                      {server.status === "connected"
+                        ? t("instanceServiceStatus.lsp.status.connected")
+                        : t("instanceServiceStatus.lsp.status.error")}
+                    </span>
                   </div>
                 </div>
               </div>
@@ -147,12 +153,12 @@ const InstanceServiceStatus: Component<InstanceServiceStatusProps> = (props) =>
     <section class="space-y-1.5">
       <Show when={showHeadings()}>
         <div class="text-xs font-medium text-muted uppercase tracking-wide">
-          MCP Servers
+          {t("instanceServiceStatus.sections.mcp")}
         </div>
       </Show>
       <Show
         when={!isMcpLoading() && mcpServers().length > 0}
-        fallback={renderEmptyState(isMcpLoading() ? "Loading MCP servers..." : "No MCP servers detected.")}
+        fallback={renderEmptyState(isMcpLoading() ? t("instanceServiceStatus.mcp.loading") : t("instanceServiceStatus.mcp.empty"))}
       >
         <div class="space-y-1.5">
           <For each={mcpServers()}>
@@ -192,7 +198,7 @@ const InstanceServiceStatus: Component<InstanceServiceStatusProps> = (props) =>
                             disabled={switchDisabled()}
                             color="success"
                             size="small"
-                            inputProps={{ "aria-label": `Toggle ${server.name} MCP server` }}
+                            inputProps={{ "aria-label": t("instanceServiceStatus.mcp.toggleAriaLabel", { name: server.name }) }}
                             onChange={(_, checked) => {
                               if (switchDisabled()) return
                               void toggleMcpServer(server.name, Boolean(checked))
@@ -222,12 +228,12 @@ const InstanceServiceStatus: Component<InstanceServiceStatusProps> = (props) =>
     <section class="space-y-1.5">
       <Show when={showHeadings()}>
         <div class="text-xs font-medium text-muted uppercase tracking-wide">
-          Plugins
+          {t("instanceServiceStatus.sections.plugins")}
         </div>
       </Show>
       <Show
         when={!isPluginsLoading() && plugins().length > 0}
-        fallback={renderEmptyState(isPluginsLoading() ? "Loading plugins..." : "No plugins configured.")}
+        fallback={renderEmptyState(isPluginsLoading() ? t("instanceServiceStatus.plugins.loading") : t("instanceServiceStatus.plugins.empty"))}
       >
         <div class="space-y-1.5">
           <For each={plugins()}>

packages/ui/src/components/instance-tab.tsx

@@ -2,6 +2,7 @@ import { Component, createMemo } from "solid-js"
 import type { Instance } from "../types/instance"
 import { getInstanceSessionIndicatorStatus } from "../stores/session-status"
 import { FolderOpen, ShieldAlert, X } from "lucide-solid"
+import { useI18n } from "../lib/i18n"
 
 interface InstanceTabProps {
   instance: Instance
@@ -27,6 +28,7 @@ function formatFolderName(path: string, instances: Instance[], currentInstance:
 }
 
 const InstanceTab: Component<InstanceTabProps> = (props) => {
+  const { t } = useI18n()
   const aggregatedStatus = createMemo(() => getInstanceSessionIndicatorStatus(props.instance.id))
   const statusClassName = createMemo(() => {
     const status = aggregatedStatus()
@@ -35,13 +37,13 @@ const InstanceTab: Component<InstanceTabProps> = (props) => {
   const statusTitle = createMemo(() => {
     switch (aggregatedStatus()) {
       case "permission":
-        return "Waiting on permission"
+        return t("instanceTab.status.permission")
       case "compacting":
-        return "Compacting"
+        return t("instanceTab.status.compacting")
       case "working":
-        return "Working"
+        return t("instanceTab.status.working")
       default:
-        return "Idle"
+        return t("instanceTab.status.idle")
     }
   })
 
@@ -61,7 +63,7 @@ const InstanceTab: Component<InstanceTabProps> = (props) => {
         <span
           class={`status-indicator session-status ml-auto ${statusClassName()}`}
           title={statusTitle()}
-          aria-label={`Instance status: ${statusTitle()}`}
+          aria-label={t("instanceTab.status.ariaLabel", { status: statusTitle() })}
         >
           {aggregatedStatus() === "permission" ? (
             <ShieldAlert class="w-3.5 h-3.5" aria-hidden="true" />
@@ -77,7 +79,7 @@ const InstanceTab: Component<InstanceTabProps> = (props) => {
           }}
           role="button"
           tabIndex={0}
-          aria-label="Close instance"
+          aria-label={t("instanceTab.actions.close.ariaLabel")}
         >
           <X class="w-3 h-3" />
         </span>

packages/ui/src/components/instance-tabs.tsx

@@ -1,9 +1,15 @@
-import { Component, For, Show } from "solid-js"
+import { Component, For, Show, createMemo, createSignal } 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 } from "lucide-solid"
+import { Plus, MonitorUp, Bell, BellOff } from "lucide-solid"
 import { keyboardRegistry } from "../lib/keyboard-registry"
+import { useI18n } from "../lib/i18n"
+import { ThemeModeToggle } from "./theme-mode-toggle"
+import NotificationsSettingsModal from "./notifications-settings-modal"
+import { isOsNotificationSupportedSync } from "../lib/os-notifications"
+import { useConfig } from "../stores/preferences"
 
 interface InstanceTabsProps {
   instances: Map<string, Instance>
@@ -15,6 +21,22 @@ interface InstanceTabsProps {
 }
 
 const InstanceTabs: Component<InstanceTabsProps> = (props) => {
+  const { t } = useI18n()
+  const { preferences } = useConfig()
+  const [notificationsOpen, setNotificationsOpen] = createSignal(false)
+
+  const notificationsSupported = createMemo(() => isOsNotificationSupportedSync())
+  const notificationsEnabled = createMemo(() => Boolean(preferences().osNotificationsEnabled))
+  const notificationIcon = createMemo(() => {
+    if (!notificationsSupported()) return BellOff
+    return notificationsEnabled() ? Bell : BellOff
+  })
+
+  const notificationTitle = createMemo(() => {
+    if (!notificationsSupported()) return "Notifications unsupported"
+    return notificationsEnabled() ? "Notifications enabled" : "Notifications disabled"
+  })
+
   return (
     <div class="tab-bar tab-bar-instance">
       <div class="tab-container" role="tablist">
@@ -34,8 +56,8 @@ const InstanceTabs: Component<InstanceTabsProps> = (props) => {
               <button
                 class="new-tab-button"
                 onClick={props.onNew}
-                title="New instance (Cmd/Ctrl+N)"
-                aria-label="New instance"
+                title={t("instanceTabs.new.title")}
+                aria-label={t("instanceTabs.new.ariaLabel")}
               >
                 <Plus class="w-4 h-4" />
               </button>
@@ -50,12 +72,23 @@ const InstanceTabs: Component<InstanceTabsProps> = (props) => {
                 />
               </div>
             </Show>
+            <ThemeModeToggle class="new-tab-button" />
+
+            <button
+              class={`new-tab-button ${!notificationsSupported() ? "opacity-50" : ""}`}
+              onClick={() => setNotificationsOpen(true)}
+              title={notificationTitle()}
+              aria-label={notificationTitle()}
+            >
+              <Dynamic component={notificationIcon()} class="w-4 h-4" />
+            </button>
+
             <Show when={Boolean(props.onOpenRemoteAccess)}>
               <button
                 class="new-tab-button tab-remote-button"
                 onClick={() => props.onOpenRemoteAccess?.()}
-                title="Remote connect"
-                aria-label="Remote connect"
+                title={t("instanceTabs.remote.title")}
+                aria-label={t("instanceTabs.remote.ariaLabel")}
               >
                 <MonitorUp class="w-4 h-4" />
               </button>
@@ -63,6 +96,8 @@ const InstanceTabs: Component<InstanceTabsProps> = (props) => {
           </div>
         </div>
       </div>
+
+      <NotificationsSettingsModal open={notificationsOpen()} onClose={() => setNotificationsOpen(false)} />
     </div>
 
   )

packages/ui/src/components/instance-welcome-view.tsx

@@ -9,6 +9,7 @@ import SessionRenameDialog from "./session-rename-dialog"
 import { keyboardRegistry, type KeyboardShortcut } from "../lib/keyboard-registry"
 import { isMac } from "../lib/keyboard-utils"
 import { showToastNotification } from "../lib/notifications"
+import { useI18n } from "../lib/i18n"
 import { getLogger } from "../lib/logger"
 const log = getLogger("actions")
 
@@ -19,6 +20,7 @@ interface InstanceWelcomeViewProps {
 }
 
 const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
+  const { t } = useI18n()
   const [isCreating, setIsCreating] = createSignal(false)
   const [selectedIndex, setSelectedIndex] = createSignal(0)
   const [focusMode, setFocusMode] = createSignal<"sessions" | "new-session" | null>("sessions")
@@ -47,7 +49,7 @@ const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
         ctrl: !isMac(),
       },
       handler: () => {},
-      description: "New Session",
+      description: t("instanceWelcome.shortcuts.newSession"),
       context: "global",
     }
   })
@@ -248,10 +250,10 @@ const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
     const hours = Math.floor(minutes / 60)
     const days = Math.floor(hours / 24)
 
-    if (days > 0) return `${days}d ago`
-    if (hours > 0) return `${hours}h ago`
-    if (minutes > 0) return `${minutes}m ago`
-    return "just now"
+    if (days > 0) return t("time.relative.daysAgoShort", { count: days })
+    if (hours > 0) return t("time.relative.hoursAgoShort", { count: hours })
+    if (minutes > 0) return t("time.relative.minutesAgoShort", { count: minutes })
+    return t("time.relative.justNow")
   }
 
   function formatTimestamp(timestamp: number): string {
@@ -291,7 +293,7 @@ const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
       setRenameTarget(null)
     } catch (error) {
       log.error("Failed to rename session:", error)
-      showToastNotification({ message: "Unable to rename session", variant: "error" })
+      showToastNotification({ message: t("instanceWelcome.toasts.renameError"), variant: "error" })
     } finally {
       setIsRenaming(false)
     }
@@ -333,11 +335,11 @@ const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
                         />
                       </svg>
                     </div>
-                    <p class="panel-empty-state-title">No Previous Sessions</p>
-                    <p class="panel-empty-state-description">Create a new session below to get started</p>
+                    <p class="panel-empty-state-title">{t("instanceWelcome.empty.title")}</p>
+                    <p class="panel-empty-state-description">{t("instanceWelcome.empty.description")}</p>
                     <Show when={!isDesktopLayout() && !showInstanceInfoOverlay()}>
                       <button type="button" class="button-tertiary mt-4 lg:hidden" onClick={openInstanceInfoOverlay}>
-                        View Instance Info
+                        {t("instanceWelcome.actions.viewInstanceInfo")}
                       </button>
                     </Show>
                   </div>
@@ -347,8 +349,8 @@ const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
                   <div class="panel-empty-state-icon">
                     <Loader2 class="w-12 h-12 mx-auto animate-spin text-muted" />
                   </div>
-                  <p class="panel-empty-state-title">Loading Sessions</p>
-                  <p class="panel-empty-state-description">Fetching your previous sessions...</p>
+                  <p class="panel-empty-state-title">{t("instanceWelcome.loading.title")}</p>
+                  <p class="panel-empty-state-description">{t("instanceWelcome.loading.description")}</p>
                 </div>
               </Show>
             }
@@ -357,9 +359,11 @@ const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
               <div class="panel-header">
                 <div class="flex flex-row flex-wrap items-center gap-2 justify-between">
                   <div>
-                    <h2 class="panel-title">Resume Session</h2>
+                    <h2 class="panel-title">{t("instanceWelcome.resume.title")}</h2>
                     <p class="panel-subtitle">
-                      {parentSessions().length} {parentSessions().length === 1 ? "session" : "sessions"} available
+                      {parentSessions().length === 1
+                        ? t("instanceWelcome.resume.subtitle.one", { count: parentSessions().length })
+                        : t("instanceWelcome.resume.subtitle.other", { count: parentSessions().length })}
                     </p>
                   </div>
                   <Show when={!isDesktopLayout() && !showInstanceInfoOverlay()}>
@@ -368,7 +372,7 @@ const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
                       class="button-tertiary lg:hidden flex-shrink-0"
                       onClick={openInstanceInfoOverlay}
                     >
-                      View Instance Info
+                      {t("instanceWelcome.actions.viewInstanceInfo")}
                     </button>
                   </Show>
                 </div>
@@ -404,7 +408,7 @@ const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
                                       "text-accent": isFocused(),
                                     }}
                                   >
-                                    {session.title || "Untitled Session"}
+                                    {session.title || t("instanceWelcome.session.untitled")}
                                   </span>
                                 </div>
                                 <div class="flex items-center gap-3 text-xs text-muted mt-0.5">
@@ -421,7 +425,7 @@ const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
                               <button
                                 type="button"
                                 class="p-1.5 rounded transition-colors text-muted hover:text-primary focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
-                                title="Rename session"
+                                title={t("instanceWelcome.actions.renameTitle")}
                                 onClick={(event) => {
                                   event.preventDefault()
                                   event.stopPropagation()
@@ -433,7 +437,7 @@ const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
                               <button
                                 type="button"
                                 class="p-1.5 rounded transition-colors text-muted hover:text-red-500 dark:hover:text-red-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
-                                title="Delete session"
+                                title={t("instanceWelcome.actions.deleteTitle")}
                                 disabled={isSessionDeleting(session.id)}
                                 onClick={(event) => {
                                   event.preventDefault()
@@ -470,8 +474,8 @@ const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
 
           <div class="panel flex-shrink-0">
             <div class="panel-header">
-              <h2 class="panel-title">Start New Session</h2>
-              <p class="panel-subtitle">We’ll reuse your last agent/model automatically</p>
+              <h2 class="panel-title">{t("instanceWelcome.new.title")}</h2>
+              <p class="panel-subtitle">{t("instanceWelcome.new.subtitle")}</p>
             </div>
             <div class="panel-body">
               <div class="space-y-3">
@@ -496,7 +500,7 @@ const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                       </svg>
                     )}
-                    <span>Create Session</span>
+                    <span>{t("instanceWelcome.new.createButton")}</span>
                   </div>
                   <Kbd shortcut={newSessionShortcutString()} class="ml-2" />
                 </button>
@@ -524,7 +528,7 @@ const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
             >
               <div class="flex justify-end">
                 <button type="button" class="button-tertiary" onClick={closeInstanceInfoOverlay}>
-                  Close
+                  {t("instanceWelcome.overlay.close")}
                 </button>
               </div>
               <div class="max-h-[85vh] overflow-y-auto pr-1">
@@ -541,25 +545,25 @@ const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
           <div class="flex items-center gap-1.5">
             <kbd class="kbd">↑</kbd>
             <kbd class="kbd">↓</kbd>
-            <span>Navigate</span>
+            <span>{t("instanceWelcome.hints.navigate")}</span>
           </div>
           <div class="flex items-center gap-1.5">
             <kbd class="kbd">PgUp</kbd>
             <kbd class="kbd">PgDn</kbd>
-            <span>Jump</span>
+            <span>{t("instanceWelcome.hints.jump")}</span>
           </div>
           <div class="flex items-center gap-1.5">
             <kbd class="kbd">Home</kbd>
             <kbd class="kbd">End</kbd>
-            <span>First/Last</span>
+            <span>{t("instanceWelcome.hints.firstLast")}</span>
           </div>
           <div class="flex items-center gap-1.5">
             <kbd class="kbd">Enter</kbd>
-            <span>Resume</span>
+            <span>{t("instanceWelcome.hints.resume")}</span>
           </div>
           <div class="flex items-center gap-1.5">
             <kbd class="kbd">Del</kbd>
-            <span>Delete</span>
+            <span>{t("instanceWelcome.hints.delete")}</span>
           </div>
         </div>
       </div>

packages/ui/src/components/instance/shell/SessionSidebar.tsx

@@ -0,0 +1,168 @@
+import { Show, type Accessor, type Component } from "solid-js"
+import type { SessionThread } from "../../../stores/session-state"
+import type { Session } from "../../../types/session"
+import type { KeyboardShortcut } from "../../../lib/keyboard-registry"
+import type { DrawerViewState } from "./types"
+
+import { Search } from "lucide-solid"
+import IconButton from "@suid/material/IconButton"
+import MenuOpenIcon from "@suid/icons-material/MenuOpen"
+import PushPinIcon from "@suid/icons-material/PushPin"
+import PushPinOutlinedIcon from "@suid/icons-material/PushPinOutlined"
+import InfoOutlinedIcon from "@suid/icons-material/InfoOutlined"
+
+import SessionList from "../../session-list"
+import KeyboardHint from "../../keyboard-hint"
+import Kbd from "../../kbd"
+import WorktreeSelector from "../../worktree-selector"
+import AgentSelector from "../../agent-selector"
+import ModelSelector from "../../model-selector"
+import ThinkingSelector from "../../thinking-selector"
+import { getLogger } from "../../../lib/logger"
+
+const log = getLogger("session")
+
+interface SessionSidebarProps {
+  t: (key: string) => string
+  instanceId: string
+  threads: Accessor<SessionThread[]>
+  activeSessionId: Accessor<string | null>
+  activeSession: Accessor<Session | null>
+
+  showSearch: Accessor<boolean>
+  onToggleSearch: () => void
+
+  keyboardShortcuts: Accessor<KeyboardShortcut[]>
+  isPhoneLayout: Accessor<boolean>
+  drawerState: Accessor<DrawerViewState>
+  leftPinned: Accessor<boolean>
+
+  onSelectSession: (sessionId: string) => void
+  onNewSession: () => Promise<void> | void
+  onSidebarAgentChange: (sessionId: string, agent: string) => Promise<void>
+  onSidebarModelChange: (sessionId: string, model: { providerId: string; modelId: string }) => Promise<void>
+  onPinLeftDrawer: () => void
+  onUnpinLeftDrawer: () => void
+  onCloseLeftDrawer: () => void
+
+  setContentEl: (el: HTMLElement | null) => void
+}
+
+const SessionSidebar: Component<SessionSidebarProps> = (props) => (
+  <div class="flex flex-col h-full min-h-0" ref={props.setContentEl}>
+    <div class="flex flex-col gap-2 px-4 py-3 border-b border-base">
+      <div class="flex items-center justify-between gap-2">
+        <span class="session-sidebar-title text-sm font-semibold uppercase text-primary">
+          {props.t("instanceShell.leftPanel.sessionsTitle")}
+        </span>
+        <div class="flex items-center gap-2 text-primary">
+          <IconButton
+            size="small"
+            color="inherit"
+            aria-label={props.t("sessionList.filter.ariaLabel")}
+            title={props.t("sessionList.filter.ariaLabel")}
+            aria-pressed={props.showSearch()}
+            onClick={props.onToggleSearch}
+            sx={{
+              color: props.showSearch() ? "var(--text-primary)" : "inherit",
+              backgroundColor: props.showSearch() ? "var(--surface-hover)" : "transparent",
+              "&:hover": {
+                backgroundColor: "var(--surface-hover)",
+              },
+            }}
+          >
+            <Search class={props.showSearch() ? "w-4 h-4" : "w-4 h-4 opacity-70"} />
+          </IconButton>
+          <IconButton
+            size="small"
+            color="inherit"
+            aria-label={props.t("instanceShell.leftPanel.instanceInfo")}
+            title={props.t("instanceShell.leftPanel.instanceInfo")}
+            onClick={() => props.onSelectSession("info")}
+          >
+            <InfoOutlinedIcon fontSize="small" />
+          </IconButton>
+          <Show when={!props.isPhoneLayout()}>
+            <IconButton
+              size="small"
+              color="inherit"
+              aria-label={props.leftPinned() ? props.t("instanceShell.leftDrawer.unpin") : props.t("instanceShell.leftDrawer.pin")}
+              onClick={() => (props.leftPinned() ? props.onUnpinLeftDrawer() : props.onPinLeftDrawer())}
+            >
+              {props.leftPinned() ? <PushPinIcon fontSize="small" /> : <PushPinOutlinedIcon fontSize="small" />}
+            </IconButton>
+          </Show>
+          <Show when={props.drawerState() === "floating-open"}>
+            <IconButton
+              size="small"
+              color="inherit"
+              aria-label={props.t("instanceShell.leftDrawer.toggle.close")}
+              title={props.t("instanceShell.leftDrawer.toggle.close")}
+              onClick={props.onCloseLeftDrawer}
+            >
+              <MenuOpenIcon fontSize="small" />
+            </IconButton>
+          </Show>
+        </div>
+      </div>
+      <div class="session-sidebar-shortcuts">
+        <Show when={props.keyboardShortcuts().length}>
+          <KeyboardHint shortcuts={props.keyboardShortcuts()} separator=" " showDescription={false} />
+        </Show>
+      </div>
+    </div>
+
+    <div class="session-sidebar flex flex-col flex-1 min-h-0">
+      <SessionList
+        instanceId={props.instanceId}
+        threads={props.threads()}
+        activeSessionId={props.activeSessionId()}
+        onSelect={props.onSelectSession}
+        onNew={() => {
+          const result = props.onNewSession()
+          if (result instanceof Promise) {
+            void result.catch((error) => log.error("Failed to create session:", error))
+          }
+        }}
+        enableFilterBar={props.showSearch()}
+        showHeader={false}
+        showFooter={false}
+      />
+
+      <div class="session-sidebar-separator" />
+      <Show when={props.activeSession()}>
+        {(activeSession) => (
+          <>
+            <div class="session-sidebar-controls px-4 py-4 border-t border-base flex flex-col gap-3">
+              <WorktreeSelector instanceId={props.instanceId} sessionId={activeSession().id} />
+
+              <AgentSelector
+                instanceId={props.instanceId}
+                sessionId={activeSession().id}
+                currentAgent={activeSession().agent}
+                onAgentChange={(agent) => props.onSidebarAgentChange(activeSession().id, agent)}
+              />
+
+              <ModelSelector
+                instanceId={props.instanceId}
+                sessionId={activeSession().id}
+                currentModel={activeSession().model}
+                onModelChange={(model) => props.onSidebarModelChange(activeSession().id, model)}
+              />
+
+              <ThinkingSelector instanceId={props.instanceId} currentModel={activeSession().model} />
+
+              <div class="session-sidebar-selector-hints" aria-hidden="true">
+                <Kbd shortcut="cmd+shift+a" />
+                <Kbd shortcut="cmd+shift+m" />
+                <Kbd shortcut="cmd+shift+t" />
+              </div>
+            </div>
+          </>
+        )}
+      </Show>
+    </div>
+  </div>
+)
+
+export default SessionSidebar

packages/ui/src/components/instance/shell/right-panel/RightPanel.tsx

@@ -0,0 +1,829 @@
+import {
+  Show,
+  createEffect,
+  createMemo,
+  createSignal,
+  onCleanup,
+  type Accessor,
+  type Component,
+} from "solid-js"
+import type { ToolState } from "@opencode-ai/sdk"
+import type { FileContent, FileNode, File as GitFileStatus } from "@opencode-ai/sdk/v2/client"
+import IconButton from "@suid/material/IconButton"
+import MenuOpenIcon from "@suid/icons-material/MenuOpen"
+import PushPinIcon from "@suid/icons-material/PushPin"
+import PushPinOutlinedIcon from "@suid/icons-material/PushPinOutlined"
+
+import type { Instance } from "../../../../types/instance"
+import type { BackgroundProcess } from "../../../../../../server/src/api-types"
+import type { Session } from "../../../../types/session"
+import type { DrawerViewState } from "../types"
+import type { DiffContextMode, DiffViewMode, RightPanelTab } from "./types"
+
+import ChangesTab from "./tabs/ChangesTab"
+import FilesTab from "./tabs/FilesTab"
+import GitChangesTab from "./tabs/GitChangesTab"
+import StatusTab from "./tabs/StatusTab"
+
+import { getDefaultWorktreeSlug, getOrCreateWorktreeClient, getWorktreeSlugForSession } from "../../../../stores/worktrees"
+import { requestData } from "../../../../lib/opencode-api"
+import { buildUnifiedDiffFromSdkPatch, tryReverseApplyUnifiedDiff } from "../../../../lib/unified-diff-reverse"
+import { useGlobalPointerDrag } from "../useGlobalPointerDrag"
+import {
+  RIGHT_PANEL_CHANGES_DIFF_CONTEXT_MODE_KEY,
+  RIGHT_PANEL_CHANGES_DIFF_VIEW_MODE_KEY,
+  RIGHT_PANEL_CHANGES_LIST_OPEN_NONPHONE_KEY,
+  RIGHT_PANEL_CHANGES_LIST_OPEN_PHONE_KEY,
+  RIGHT_PANEL_CHANGES_SPLIT_WIDTH_KEY,
+  RIGHT_PANEL_FILES_LIST_OPEN_NONPHONE_KEY,
+  RIGHT_PANEL_FILES_LIST_OPEN_PHONE_KEY,
+  RIGHT_PANEL_FILES_SPLIT_WIDTH_KEY,
+  RIGHT_PANEL_GIT_CHANGES_LIST_OPEN_NONPHONE_KEY,
+  RIGHT_PANEL_GIT_CHANGES_LIST_OPEN_PHONE_KEY,
+  RIGHT_PANEL_GIT_CHANGES_SPLIT_WIDTH_KEY,
+  RIGHT_PANEL_TAB_STORAGE_KEY,
+  readStoredBool,
+  readStoredEnum,
+  readStoredPanelWidth,
+  readStoredRightPanelTab,
+} from "../storage"
+
+interface RightPanelProps {
+  t: (key: string, vars?: Record<string, any>) => string
+
+  instanceId: string
+  instance: Instance
+
+  activeSessionId: Accessor<string | null>
+  activeSession: Accessor<Session | null>
+  activeSessionDiffs: Accessor<any[] | undefined>
+
+  latestTodoState: Accessor<ToolState | null>
+  backgroundProcessList: Accessor<BackgroundProcess[]>
+  onOpenBackgroundOutput: (process: BackgroundProcess) => void
+  onStopBackgroundProcess: (processId: string) => Promise<void> | void
+  onTerminateBackgroundProcess: (processId: string) => Promise<void> | void
+
+  isPhoneLayout: Accessor<boolean>
+  rightDrawerWidth: Accessor<number>
+  rightDrawerWidthInitialized: Accessor<boolean>
+  rightDrawerState: Accessor<DrawerViewState>
+  rightPinned: Accessor<boolean>
+  onCloseRightDrawer: () => void
+  onPinRightDrawer: () => void
+  onUnpinRightDrawer: () => void
+
+  setContentEl: (el: HTMLElement | null) => void
+}
+
+const RightPanel: Component<RightPanelProps> = (props) => {
+  const [rightPanelTab, setRightPanelTab] = createSignal<RightPanelTab>(readStoredRightPanelTab("changes"))
+  const [rightPanelExpandedItems, setRightPanelExpandedItems] = createSignal<string[]>([
+    "plan",
+    "background-processes",
+    "mcp",
+    "lsp",
+    "plugins",
+  ])
+  const [selectedFile, setSelectedFile] = createSignal<string | null>(null)
+
+  const [browserPath, setBrowserPath] = createSignal(".")
+  const [browserEntries, setBrowserEntries] = createSignal<FileNode[] | null>(null)
+  const [browserLoading, setBrowserLoading] = createSignal(false)
+  const [browserError, setBrowserError] = createSignal<string | null>(null)
+  const [browserSelectedPath, setBrowserSelectedPath] = createSignal<string | null>(null)
+  const [browserSelectedContent, setBrowserSelectedContent] = createSignal<string | null>(null)
+  const [browserSelectedLoading, setBrowserSelectedLoading] = createSignal(false)
+  const [browserSelectedError, setBrowserSelectedError] = createSignal<string | null>(null)
+
+  const [diffViewMode, setDiffViewMode] = createSignal<DiffViewMode>(
+    readStoredEnum(RIGHT_PANEL_CHANGES_DIFF_VIEW_MODE_KEY, ["split", "unified"] as const) ?? "unified",
+  )
+  const [diffContextMode, setDiffContextMode] = createSignal<DiffContextMode>(
+    readStoredEnum(RIGHT_PANEL_CHANGES_DIFF_CONTEXT_MODE_KEY, ["expanded", "collapsed"] as const) ?? "collapsed",
+  )
+
+  const [changesSplitWidth, setChangesSplitWidth] = createSignal(320)
+  const [filesSplitWidth, setFilesSplitWidth] = createSignal(320)
+  const [gitChangesSplitWidth, setGitChangesSplitWidth] = createSignal(320)
+  const [activeSplitResize, setActiveSplitResize] = createSignal<"changes" | "git-changes" | "files" | null>(null)
+  const [splitResizeStartX, setSplitResizeStartX] = createSignal(0)
+  const [splitResizeStartWidth, setSplitResizeStartWidth] = createSignal(0)
+
+  const [filesListOpen, setFilesListOpen] = createSignal(true)
+  const [filesListTouched, setFilesListTouched] = createSignal(false)
+  const [changesListOpen, setChangesListOpen] = createSignal(true)
+  const [changesListTouched, setChangesListTouched] = createSignal(false)
+  const [gitChangesListOpen, setGitChangesListOpen] = createSignal(true)
+  const [gitChangesListTouched, setGitChangesListTouched] = createSignal(false)
+
+  const listLayoutKey = createMemo(() => (props.isPhoneLayout() ? "phone" : "nonphone"))
+
+  const listOpenStorageKey = (tab: "changes" | "git-changes" | "files") => {
+    const layout = listLayoutKey()
+    if (tab === "changes") {
+      return layout === "phone" ? RIGHT_PANEL_CHANGES_LIST_OPEN_PHONE_KEY : RIGHT_PANEL_CHANGES_LIST_OPEN_NONPHONE_KEY
+    }
+    if (tab === "git-changes") {
+      return layout === "phone"
+        ? RIGHT_PANEL_GIT_CHANGES_LIST_OPEN_PHONE_KEY
+        : RIGHT_PANEL_GIT_CHANGES_LIST_OPEN_NONPHONE_KEY
+    }
+    return layout === "phone" ? RIGHT_PANEL_FILES_LIST_OPEN_PHONE_KEY : RIGHT_PANEL_FILES_LIST_OPEN_NONPHONE_KEY
+  }
+
+  const persistListOpen = (tab: "changes" | "git-changes" | "files", value: boolean) => {
+    if (typeof window === "undefined") return
+    window.localStorage.setItem(listOpenStorageKey(tab), value ? "true" : "false")
+  }
+
+  createEffect(() => {
+    // Refresh persisted visibility when layout changes (phone vs non-phone).
+    const layout = listLayoutKey()
+    layout
+
+    const filesPersisted = readStoredBool(listOpenStorageKey("files"))
+    if (filesPersisted !== null) {
+      setFilesListOpen(filesPersisted)
+      setFilesListTouched(true)
+    } else {
+      setFilesListOpen(true)
+      setFilesListTouched(false)
+    }
+
+    const changesPersisted = readStoredBool(listOpenStorageKey("changes"))
+    if (changesPersisted !== null) {
+      setChangesListOpen(changesPersisted)
+      setChangesListTouched(true)
+    } else {
+      setChangesListOpen(true)
+      setChangesListTouched(false)
+    }
+
+    const gitPersisted = readStoredBool(listOpenStorageKey("git-changes"))
+    if (gitPersisted !== null) {
+      setGitChangesListOpen(gitPersisted)
+      setGitChangesListTouched(true)
+    } else {
+      setGitChangesListOpen(true)
+      setGitChangesListTouched(false)
+    }
+  })
+
+  createEffect(() => {
+    // Default behavior: when nothing is selected, keep the file list open.
+    // Once the user explicitly toggles it, we stop auto-opening.
+    if (rightPanelTab() !== "files") return
+    if (filesListTouched()) return
+    if (!browserSelectedPath()) {
+      setFilesListOpen(true)
+    }
+  })
+
+  createEffect(() => {
+    if (typeof window === "undefined") return
+    window.localStorage.setItem(RIGHT_PANEL_TAB_STORAGE_KEY, rightPanelTab())
+  })
+
+  createEffect(() => {
+    if (typeof window === "undefined") return
+    window.localStorage.setItem(RIGHT_PANEL_CHANGES_DIFF_VIEW_MODE_KEY, diffViewMode())
+  })
+
+  createEffect(() => {
+    if (typeof window === "undefined") return
+    window.localStorage.setItem(RIGHT_PANEL_CHANGES_DIFF_CONTEXT_MODE_KEY, diffContextMode())
+  })
+
+  const clampSplitWidth = (value: number) => {
+    const min = 200
+    const maxByDrawer = Math.max(min, Math.floor(props.rightDrawerWidth() * 0.65))
+    const max = Math.min(560, maxByDrawer)
+    return Math.min(max, Math.max(min, Math.floor(value)))
+  }
+
+  const [splitWidthsInitialized, setSplitWidthsInitialized] = createSignal(false)
+
+  createEffect(() => {
+    if (splitWidthsInitialized()) return
+    if (!props.rightDrawerWidthInitialized()) return
+    setSplitWidthsInitialized(true)
+    setChangesSplitWidth(clampSplitWidth(readStoredPanelWidth(RIGHT_PANEL_CHANGES_SPLIT_WIDTH_KEY, 320)))
+    setFilesSplitWidth(clampSplitWidth(readStoredPanelWidth(RIGHT_PANEL_FILES_SPLIT_WIDTH_KEY, 320)))
+    setGitChangesSplitWidth(clampSplitWidth(readStoredPanelWidth(RIGHT_PANEL_GIT_CHANGES_SPLIT_WIDTH_KEY, 320)))
+  })
+
+  const persistSplitWidth = (mode: "changes" | "git-changes" | "files", width: number) => {
+    if (typeof window === "undefined") return
+    const key =
+      mode === "changes"
+        ? RIGHT_PANEL_CHANGES_SPLIT_WIDTH_KEY
+        : mode === "git-changes"
+          ? RIGHT_PANEL_GIT_CHANGES_SPLIT_WIDTH_KEY
+          : RIGHT_PANEL_FILES_SPLIT_WIDTH_KEY
+    window.localStorage.setItem(key, String(width))
+  }
+
+  function stopSplitResize() {
+    setActiveSplitResize(null)
+    if (typeof document === "undefined") return
+    splitPointerDrag.stop()
+  }
+
+  function splitMouseMove(event: MouseEvent) {
+    const mode = activeSplitResize()
+    if (!mode) return
+    event.preventDefault()
+    const delta = event.clientX - splitResizeStartX()
+    const next = clampSplitWidth(splitResizeStartWidth() + delta)
+    if (mode === "changes") setChangesSplitWidth(next)
+    else if (mode === "git-changes") setGitChangesSplitWidth(next)
+    else setFilesSplitWidth(next)
+  }
+
+  function splitMouseUp() {
+    const mode = activeSplitResize()
+    if (mode) {
+      const width =
+        mode === "changes" ? changesSplitWidth() : mode === "git-changes" ? gitChangesSplitWidth() : filesSplitWidth()
+      persistSplitWidth(mode, width)
+    }
+    stopSplitResize()
+  }
+
+  function splitTouchMove(event: TouchEvent) {
+    const mode = activeSplitResize()
+    if (!mode) return
+    const touch = event.touches[0]
+    if (!touch) return
+    event.preventDefault()
+    const delta = touch.clientX - splitResizeStartX()
+    const next = clampSplitWidth(splitResizeStartWidth() + delta)
+    if (mode === "changes") setChangesSplitWidth(next)
+    else if (mode === "git-changes") setGitChangesSplitWidth(next)
+    else setFilesSplitWidth(next)
+  }
+
+  function splitTouchEnd() {
+    const mode = activeSplitResize()
+    if (mode) {
+      const width =
+        mode === "changes" ? changesSplitWidth() : mode === "git-changes" ? gitChangesSplitWidth() : filesSplitWidth()
+      persistSplitWidth(mode, width)
+    }
+    stopSplitResize()
+  }
+
+  const splitPointerDrag = useGlobalPointerDrag({
+    onMouseMove: splitMouseMove,
+    onMouseUp: splitMouseUp,
+    onTouchMove: splitTouchMove,
+    onTouchEnd: splitTouchEnd,
+  })
+
+  const startSplitResize = (mode: "changes" | "git-changes" | "files", clientX: number) => {
+    if (typeof document === "undefined") return
+    setActiveSplitResize(mode)
+    setSplitResizeStartX(clientX)
+    setSplitResizeStartWidth(
+      mode === "changes" ? changesSplitWidth() : mode === "git-changes" ? gitChangesSplitWidth() : filesSplitWidth(),
+    )
+    splitPointerDrag.start()
+  }
+
+  const handleSplitResizeMouseDown = (mode: "changes" | "git-changes" | "files") => (event: MouseEvent) => {
+    event.preventDefault()
+    startSplitResize(mode, event.clientX)
+  }
+
+  const handleSplitResizeTouchStart = (mode: "changes" | "git-changes" | "files") => (event: TouchEvent) => {
+    const touch = event.touches[0]
+    if (!touch) return
+    event.preventDefault()
+    startSplitResize(mode, touch.clientX)
+  }
+
+  onCleanup(() => {
+    stopSplitResize()
+  })
+
+  const worktreeSlugForViewer = createMemo(() => {
+    const sessionId = props.activeSessionId()
+    if (sessionId && sessionId !== "info") {
+      return getWorktreeSlugForSession(props.instanceId, sessionId)
+    }
+    return getDefaultWorktreeSlug(props.instanceId)
+  })
+
+  const browserClient = createMemo(() => getOrCreateWorktreeClient(props.instanceId, worktreeSlugForViewer()))
+
+  const [gitStatusEntries, setGitStatusEntries] = createSignal<GitFileStatus[] | null>(null)
+  const [gitStatusLoading, setGitStatusLoading] = createSignal(false)
+  const [gitStatusError, setGitStatusError] = createSignal<string | null>(null)
+  const [gitSelectedPath, setGitSelectedPath] = createSignal<string | null>(null)
+  const [gitSelectedLoading, setGitSelectedLoading] = createSignal(false)
+  const [gitSelectedError, setGitSelectedError] = createSignal<string | null>(null)
+  const [gitSelectedBefore, setGitSelectedBefore] = createSignal<string | null>(null)
+  const [gitSelectedAfter, setGitSelectedAfter] = createSignal<string | null>(null)
+
+  const gitMostChangedPath = createMemo<string | null>(() => {
+    const entries = gitStatusEntries()
+    if (!Array.isArray(entries) || entries.length === 0) return null
+    const candidates = entries.filter((item) => item && item.status !== "deleted")
+    if (candidates.length === 0) return null
+    const best = candidates.reduce((currentBest, item) => {
+      const bestScore = (currentBest?.added ?? 0) + (currentBest?.removed ?? 0)
+      const score = (item?.added ?? 0) + (item?.removed ?? 0)
+      if (score > bestScore) return item
+      if (score < bestScore) return currentBest
+      return String(item.path || "").localeCompare(String(currentBest?.path || "")) < 0 ? item : currentBest
+    }, candidates[0])
+    return typeof best?.path === "string" ? best.path : null
+  })
+
+  createEffect(() => {
+    // Reset tab state when worktree context changes.
+    worktreeSlugForViewer()
+    setBrowserPath(".")
+    setBrowserEntries(null)
+    setBrowserError(null)
+    setBrowserSelectedPath(null)
+    setBrowserSelectedContent(null)
+    setBrowserSelectedError(null)
+    setBrowserSelectedLoading(false)
+
+    setGitStatusEntries(null)
+    setGitStatusError(null)
+    setGitStatusLoading(false)
+    setGitSelectedPath(null)
+    setGitSelectedLoading(false)
+    setGitSelectedError(null)
+    setGitSelectedBefore(null)
+    setGitSelectedAfter(null)
+  })
+
+  const loadGitStatus = async (force = false) => {
+    if (!force && gitStatusEntries() !== null) return
+    setGitStatusLoading(true)
+    setGitStatusError(null)
+    try {
+      const list = await requestData<GitFileStatus[]>(browserClient().file.status(), "file.status")
+      setGitStatusEntries(Array.isArray(list) ? list : [])
+    } catch (error) {
+      setGitStatusError(error instanceof Error ? error.message : "Failed to load git status")
+      setGitStatusEntries([])
+    } finally {
+      setGitStatusLoading(false)
+    }
+  }
+
+  async function openGitFile(path: string) {
+    setGitSelectedPath(path)
+    setGitSelectedLoading(true)
+    setGitSelectedError(null)
+    setGitSelectedBefore(null)
+    setGitSelectedAfter(null)
+
+    const list = gitStatusEntries() || []
+    const entry = list.find((item) => item.path === path) || null
+    if (entry?.status === "deleted") {
+      setGitSelectedError("Deleted file diff is not available yet")
+      setGitSelectedLoading(false)
+      return
+    }
+
+    // Phone: treat file selection as a commit action and close the overlay.
+    if (props.isPhoneLayout()) {
+      setGitChangesListOpen(false)
+    }
+
+    try {
+      const content = await requestData<FileContent>(browserClient().file.read({ path }), "file.read")
+      const type = (content as any)?.type
+      const encoding = (content as any)?.encoding
+      if (type && type !== "text") {
+        throw new Error("Binary file cannot be displayed")
+      }
+      if (encoding === "base64") {
+        throw new Error("Binary file cannot be displayed")
+      }
+      const afterText = typeof (content as any)?.content === "string" ? ((content as any).content as string) : null
+      if (afterText === null) {
+        throw new Error("Unsupported file type")
+      }
+
+      setGitSelectedAfter(afterText)
+
+      if (entry?.status === "added") {
+        setGitSelectedBefore("")
+        return
+      }
+
+      const diffText =
+        typeof (content as any)?.diff === "string" && String((content as any).diff).trim().length > 0
+          ? String((content as any).diff)
+          : (content as any)?.patch
+            ? buildUnifiedDiffFromSdkPatch((content as any).patch)
+            : ""
+
+      const beforeText = tryReverseApplyUnifiedDiff(afterText, diffText)
+      if (beforeText === null) {
+        throw new Error("Unable to calculate diff for this file")
+      }
+      setGitSelectedBefore(beforeText)
+    } catch (error) {
+      setGitSelectedError(error instanceof Error ? error.message : "Failed to load file changes")
+    } finally {
+      setGitSelectedLoading(false)
+    }
+  }
+
+  createEffect(() => {
+    if (rightPanelTab() !== "git-changes") return
+    const entries = gitStatusEntries()
+    if (entries === null) return
+    if (gitSelectedPath()) return
+    const next = gitMostChangedPath()
+    if (!next) return
+    void openGitFile(next)
+  })
+
+  const refreshGitStatus = async () => {
+    await loadGitStatus(true)
+    const selected = gitSelectedPath()
+    if (selected) {
+      void openGitFile(selected)
+    }
+  }
+
+  const bestDiffFile = createMemo<string | null>(() => {
+    const diffs = props.activeSessionDiffs()
+    if (!Array.isArray(diffs) || diffs.length === 0) return null
+    const best = diffs.reduce((currentBest, item) => {
+      const bestAdd = typeof (currentBest as any)?.additions === "number" ? (currentBest as any).additions : 0
+      const bestDel = typeof (currentBest as any)?.deletions === "number" ? (currentBest as any).deletions : 0
+      const bestScore = bestAdd + bestDel
+
+      const add = typeof (item as any)?.additions === "number" ? (item as any).additions : 0
+      const del = typeof (item as any)?.deletions === "number" ? (item as any).deletions : 0
+      const score = add + del
+
+      if (score > bestScore) return item
+      if (score < bestScore) return currentBest
+      return String(item.file || "").localeCompare(String((currentBest as any)?.file || "")) < 0 ? item : currentBest
+    }, diffs[0])
+    return typeof (best as any)?.file === "string" ? (best as any).file : null
+  })
+
+  createEffect(() => {
+    const next = bestDiffFile()
+    if (!next) return
+    const diffs = props.activeSessionDiffs()
+    if (!Array.isArray(diffs) || diffs.length === 0) return
+
+    const current = selectedFile()
+    if (current && diffs.some((d) => d.file === current)) return
+    setSelectedFile(next)
+  })
+
+  const normalizeBrowserPath = (input: string) => {
+    const raw = String(input || ".").trim()
+    if (!raw || raw === "./") return "."
+    const cleaned = raw.replace(/\\/g, "/").replace(/\/+$/, "")
+    return cleaned === "" ? "." : cleaned
+  }
+
+  const getParentPath = (path: string): string | null => {
+    const current = normalizeBrowserPath(path)
+    if (current === ".") return null
+    const parts = current.split("/").filter(Boolean)
+    parts.pop()
+    return parts.length ? parts.join("/") : "."
+  }
+
+  const loadBrowserEntries = async (path: string) => {
+    const normalized = normalizeBrowserPath(path)
+    setBrowserLoading(true)
+    setBrowserError(null)
+    try {
+      const nodes = await requestData<FileNode[]>(browserClient().file.list({ path: normalized }), "file.list")
+      setBrowserPath(normalized)
+      setBrowserEntries(Array.isArray(nodes) ? nodes : [])
+    } catch (error) {
+      setBrowserError(error instanceof Error ? error.message : "Failed to load files")
+      setBrowserEntries([])
+    } finally {
+      setBrowserLoading(false)
+    }
+  }
+
+  const openBrowserFile = async (path: string) => {
+    setBrowserSelectedPath(path)
+    setBrowserSelectedLoading(true)
+    setBrowserSelectedError(null)
+    setBrowserSelectedContent(null)
+
+    // Phone: treat file selection as a commit action and close the overlay.
+    if (props.isPhoneLayout()) {
+      setFilesListOpen(false)
+    }
+    try {
+      const content = await requestData<FileContent>(browserClient().file.read({ path }), "file.read")
+      const type = (content as any)?.type
+      const encoding = (content as any)?.encoding
+      if (type && type !== "text") {
+        throw new Error("Binary file cannot be displayed")
+      }
+      if (encoding === "base64") {
+        throw new Error("Binary file cannot be displayed")
+      }
+      const text = (content as any)?.content
+      if (typeof text !== "string") {
+        throw new Error("Unsupported file type")
+      }
+      setBrowserSelectedContent(text)
+    } catch (error) {
+      setBrowserSelectedError(error instanceof Error ? error.message : "Failed to read file")
+    } finally {
+      setBrowserSelectedLoading(false)
+    }
+  }
+
+  createEffect(() => {
+    if (rightPanelTab() !== "files") return
+    if (browserLoading()) return
+    if (browserEntries() !== null) return
+    void loadBrowserEntries(browserPath())
+  })
+
+  createEffect(() => {
+    if (rightPanelTab() !== "git-changes") return
+    if (gitStatusLoading()) return
+    if (gitStatusEntries() !== null) return
+    void loadGitStatus()
+  })
+
+  const handleSelectChangesFile = (file: string, closeList: boolean) => {
+    setSelectedFile(file)
+    if (closeList) {
+      setChangesListOpen(false)
+    }
+  }
+
+  const toggleChangesList = () => {
+    setChangesListTouched(true)
+    setChangesListOpen((current) => {
+      const next = !current
+      persistListOpen("changes", next)
+      return next
+    })
+  }
+
+  const toggleFilesList = () => {
+    setFilesListTouched(true)
+    setFilesListOpen((current) => {
+      const next = !current
+      persistListOpen("files", next)
+      return next
+    })
+  }
+
+  const toggleGitList = () => {
+    setGitChangesListTouched(true)
+    setGitChangesListOpen((current) => {
+      const next = !current
+      persistListOpen("git-changes", next)
+      return next
+    })
+  }
+
+  const refreshFilesTab = async () => {
+    void loadBrowserEntries(browserPath())
+    const selected = browserSelectedPath()
+    if (selected) {
+      // Refresh file content without altering overlay state.
+      setBrowserSelectedLoading(true)
+      setBrowserSelectedError(null)
+      try {
+        const content = await requestData<FileContent>(browserClient().file.read({ path: selected }), "file.read")
+        const type = (content as any)?.type
+        const encoding = (content as any)?.encoding
+        if (type && type !== "text") {
+          throw new Error("Binary file cannot be displayed")
+        }
+        if (encoding === "base64") {
+          throw new Error("Binary file cannot be displayed")
+        }
+        const text = (content as any)?.content
+        if (typeof text !== "string") {
+          throw new Error("Unsupported file type")
+        }
+        setBrowserSelectedContent(text)
+      } catch (error) {
+        setBrowserSelectedError(error instanceof Error ? error.message : "Failed to read file")
+      } finally {
+        setBrowserSelectedLoading(false)
+      }
+    }
+  }
+
+  const browserParentPath = createMemo(() => getParentPath(browserPath()))
+  const browserScopeKey = createMemo(() => `${props.instanceId}:${worktreeSlugForViewer()}`)
+  const gitScopeKey = createMemo(() => `${props.instanceId}:git:${worktreeSlugForViewer()}`)
+
+  const openChangesTabFromStatus = (file?: string) => {
+    if (file) {
+      setSelectedFile(file)
+    }
+    setRightPanelTab("changes")
+  }
+
+  const statusSectionIds = ["session-changes", "plan", "background-processes", "mcp", "lsp", "plugins"]
+
+  createEffect(() => {
+    const currentExpanded = new Set(rightPanelExpandedItems())
+    if (statusSectionIds.every((id) => currentExpanded.has(id))) return
+    setRightPanelExpandedItems(statusSectionIds)
+  })
+
+  const handleAccordionChange = (values: string[]) => {
+    setRightPanelExpandedItems(values)
+  }
+
+  const tabClass = (tab: RightPanelTab) =>
+    `right-panel-tab ${rightPanelTab() === tab ? "right-panel-tab-active" : "right-panel-tab-inactive"}`
+
+  return (
+    <div class="flex flex-col h-full" ref={props.setContentEl}>
+      <div class="right-panel-tab-bar">
+        <div class="tab-container">
+          <div class="tab-strip-shortcuts text-primary">
+            <Show when={props.rightDrawerState() === "floating-open"}>
+              <IconButton
+                size="small"
+                color="inherit"
+                aria-label={props.t("instanceShell.rightDrawer.toggle.close")}
+                title={props.t("instanceShell.rightDrawer.toggle.close")}
+                onClick={props.onCloseRightDrawer}
+              >
+                <MenuOpenIcon fontSize="small" sx={{ transform: "scaleX(-1)" }} />
+              </IconButton>
+            </Show>
+            <Show when={!props.isPhoneLayout()}>
+              <IconButton
+                size="small"
+                color="inherit"
+                aria-label={props.rightPinned() ? props.t("instanceShell.rightDrawer.unpin") : props.t("instanceShell.rightDrawer.pin")}
+                onClick={() => (props.rightPinned() ? props.onUnpinRightDrawer() : props.onPinRightDrawer())}
+              >
+                {props.rightPinned() ? <PushPinIcon fontSize="small" /> : <PushPinOutlinedIcon fontSize="small" />}
+              </IconButton>
+            </Show>
+          </div>
+          <div class="tab-scroll">
+            <div class="tab-strip">
+              <div class="tab-strip-tabs" role="tablist" aria-label={props.t("instanceShell.rightPanel.tabs.ariaLabel")}> 
+                <button
+                  type="button"
+                  role="tab"
+                  class={tabClass("changes")}
+                  aria-selected={rightPanelTab() === "changes"}
+                  onClick={() => setRightPanelTab("changes")}
+                >
+                  <span class="tab-label">{props.t("instanceShell.rightPanel.tabs.changes")}</span>
+                </button>
+                <button
+                  type="button"
+                  role="tab"
+                  class={tabClass("git-changes")}
+                  aria-selected={rightPanelTab() === "git-changes"}
+                  onClick={() => setRightPanelTab("git-changes")}
+                >
+                  <span class="tab-label">{props.t("instanceShell.rightPanel.tabs.gitChanges")}</span>
+                </button>
+                <button
+                  type="button"
+                  role="tab"
+                  class={tabClass("files")}
+                  aria-selected={rightPanelTab() === "files"}
+                  onClick={() => setRightPanelTab("files")}
+                >
+                  <span class="tab-label">{props.t("instanceShell.rightPanel.tabs.files")}</span>
+                </button>
+                <button
+                  type="button"
+                  role="tab"
+                  class={tabClass("status")}
+                  aria-selected={rightPanelTab() === "status"}
+                  onClick={() => setRightPanelTab("status")}
+                >
+                  <span class="tab-label">{props.t("instanceShell.rightPanel.tabs.status")}</span>
+                </button>
+              </div>
+
+              <div class="tab-strip-spacer" />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="flex-1 overflow-y-auto">
+        <Show when={rightPanelTab() === "changes"}>
+          <ChangesTab
+            t={props.t}
+            instanceId={props.instanceId}
+            activeSessionId={props.activeSessionId}
+            activeSessionDiffs={props.activeSessionDiffs}
+            selectedFile={selectedFile}
+            onSelectFile={handleSelectChangesFile}
+            diffViewMode={diffViewMode}
+            diffContextMode={diffContextMode}
+            onViewModeChange={setDiffViewMode}
+            onContextModeChange={setDiffContextMode}
+            listOpen={changesListOpen}
+            onToggleList={toggleChangesList}
+            splitWidth={changesSplitWidth}
+            onResizeMouseDown={handleSplitResizeMouseDown("changes")}
+            onResizeTouchStart={handleSplitResizeTouchStart("changes")}
+            isPhoneLayout={props.isPhoneLayout}
+          />
+        </Show>
+
+        <Show when={rightPanelTab() === "git-changes"}>
+          <GitChangesTab
+            t={props.t}
+            activeSessionId={props.activeSessionId}
+            entries={gitStatusEntries}
+            statusLoading={gitStatusLoading}
+            statusError={gitStatusError}
+            selectedPath={gitSelectedPath}
+            selectedLoading={gitSelectedLoading}
+            selectedError={gitSelectedError}
+            selectedBefore={gitSelectedBefore}
+            selectedAfter={gitSelectedAfter}
+            mostChangedPath={gitMostChangedPath}
+            scopeKey={gitScopeKey}
+            diffViewMode={diffViewMode}
+            diffContextMode={diffContextMode}
+            onViewModeChange={setDiffViewMode}
+            onContextModeChange={setDiffContextMode}
+            onOpenFile={(path) => void openGitFile(path)}
+            onRefresh={() => void refreshGitStatus()}
+            listOpen={gitChangesListOpen}
+            onToggleList={toggleGitList}
+            splitWidth={gitChangesSplitWidth}
+            onResizeMouseDown={handleSplitResizeMouseDown("git-changes")}
+            onResizeTouchStart={handleSplitResizeTouchStart("git-changes")}
+            isPhoneLayout={props.isPhoneLayout}
+          />
+        </Show>
+
+        <Show when={rightPanelTab() === "files"}>
+          <FilesTab
+            t={props.t}
+            browserPath={browserPath}
+            browserEntries={browserEntries}
+            browserLoading={browserLoading}
+            browserError={browserError}
+            browserSelectedPath={browserSelectedPath}
+            browserSelectedContent={browserSelectedContent}
+            browserSelectedLoading={browserSelectedLoading}
+            browserSelectedError={browserSelectedError}
+            parentPath={browserParentPath}
+            scopeKey={browserScopeKey}
+            onLoadEntries={(path) => void loadBrowserEntries(path)}
+            onOpenFile={(path) => void openBrowserFile(path)}
+            onRefresh={() => void refreshFilesTab()}
+            listOpen={filesListOpen}
+            onToggleList={toggleFilesList}
+            splitWidth={filesSplitWidth}
+            onResizeMouseDown={handleSplitResizeMouseDown("files")}
+            onResizeTouchStart={handleSplitResizeTouchStart("files")}
+            isPhoneLayout={props.isPhoneLayout}
+          />
+        </Show>
+
+        <Show when={rightPanelTab() === "status"}>
+          <StatusTab
+            t={props.t}
+            instanceId={props.instanceId}
+            instance={props.instance}
+            activeSessionId={props.activeSessionId}
+            activeSession={props.activeSession}
+            activeSessionDiffs={props.activeSessionDiffs}
+            latestTodoState={props.latestTodoState}
+            backgroundProcessList={props.backgroundProcessList}
+            onOpenBackgroundOutput={props.onOpenBackgroundOutput}
+            onStopBackgroundProcess={props.onStopBackgroundProcess}
+            onTerminateBackgroundProcess={props.onTerminateBackgroundProcess}
+            expandedItems={rightPanelExpandedItems}
+            onExpandedItemsChange={handleAccordionChange}
+            onOpenChangesTab={openChangesTabFromStatus}
+          />
+        </Show>
+      </div>
+    </div>
+  )
+}
+
+export default RightPanel

packages/ui/src/components/instance/shell/right-panel/components/DiffToolbar.tsx

@@ -0,0 +1,53 @@
+import type { Component } from "solid-js"
+
+import type { DiffContextMode, DiffViewMode } from "../types"
+
+interface DiffToolbarProps {
+  viewMode: DiffViewMode
+  contextMode: DiffContextMode
+  onViewModeChange: (mode: DiffViewMode) => void
+  onContextModeChange: (mode: DiffContextMode) => void
+}
+
+const DiffToolbar: Component<DiffToolbarProps> = (props) => {
+  return (
+    <div class="file-viewer-toolbar">
+      <button
+        type="button"
+        class={`file-viewer-toolbar-button${props.viewMode === "split" ? " active" : ""}`}
+        aria-pressed={props.viewMode === "split"}
+        onClick={() => props.onViewModeChange("split")}
+      >
+        Split
+      </button>
+      <button
+        type="button"
+        class={`file-viewer-toolbar-button${props.viewMode === "unified" ? " active" : ""}`}
+        aria-pressed={props.viewMode === "unified"}
+        onClick={() => props.onViewModeChange("unified")}
+      >
+        Unified
+      </button>
+      <button
+        type="button"
+        class={`file-viewer-toolbar-button${props.contextMode === "collapsed" ? " active" : ""}`}
+        aria-pressed={props.contextMode === "collapsed"}
+        onClick={() => props.onContextModeChange("collapsed")}
+        title="Hide unchanged regions"
+      >
+        Collapsed
+      </button>
+      <button
+        type="button"
+        class={`file-viewer-toolbar-button${props.contextMode === "expanded" ? " active" : ""}`}
+        aria-pressed={props.contextMode === "expanded"}
+        onClick={() => props.onContextModeChange("expanded")}
+        title="Show full file"
+      >
+        Expanded
+      </button>
+    </div>
+  )
+}
+
+export default DiffToolbar

packages/ui/src/components/instance/shell/right-panel/components/OverlayList.tsx

@@ -0,0 +1,16 @@
+import type { Component, JSX } from "solid-js"
+
+interface OverlayListProps {
+  ariaLabel: string
+  children: JSX.Element
+}
+
+const OverlayList: Component<OverlayListProps> = (props) => {
+  return (
+    <div class="file-list-overlay" role="dialog" aria-label={props.ariaLabel}>
+      <div class="file-list-scroll">{props.children}</div>
+    </div>
+  )
+}
+
+export default OverlayList

packages/ui/src/components/instance/shell/right-panel/components/SplitFilePanel.tsx

@@ -0,0 +1,70 @@
+import { Show, type Component, type JSX } from "solid-js"
+
+import OverlayList from "./OverlayList"
+
+type SplitFilePanelList = {
+  panel: () => JSX.Element
+  overlay: () => JSX.Element
+}
+
+interface SplitFilePanelProps {
+  header: JSX.Element
+  list: SplitFilePanelList
+  viewer: JSX.Element
+
+  listOpen: boolean
+  onToggleList: () => void
+
+  splitWidth: number
+  onResizeMouseDown: (event: MouseEvent) => void
+  onResizeTouchStart: (event: TouchEvent) => void
+
+  isPhoneLayout: boolean
+  overlayAriaLabel: string
+}
+
+const SplitFilePanel: Component<SplitFilePanelProps> = (props) => {
+  return (
+    <div class="files-tab-container">
+      <div class="files-tab-header">
+        <div class="files-tab-header-row">
+          <button type="button" class="files-toggle-button" onClick={props.onToggleList}>
+            {props.listOpen ? "Hide files" : "Show files"}
+          </button>
+
+          {props.header}
+        </div>
+      </div>
+
+      <div class="files-tab-body">
+        <Show
+          when={!props.isPhoneLayout && props.listOpen}
+          fallback={props.viewer}
+        >
+          <div class="files-split" style={{ "--files-pane-width": `${props.splitWidth}px` }}>
+            <div class="file-list-panel">
+              <div class="file-list-scroll">{props.list.panel()}</div>
+            </div>
+            <div
+              class="file-split-handle"
+              role="separator"
+              aria-orientation="vertical"
+              aria-label="Resize file list"
+              onMouseDown={props.onResizeMouseDown}
+              onTouchStart={props.onResizeTouchStart}
+            />
+            {props.viewer}
+          </div>
+        </Show>
+
+        <Show when={props.isPhoneLayout}>
+          <Show when={props.listOpen}>
+            <OverlayList ariaLabel={props.overlayAriaLabel}>{props.list.overlay()}</OverlayList>
+          </Show>
+        </Show>
+      </div>
+    </div>
+  )
+}
+
+export default SplitFilePanel

packages/ui/src/components/instance/shell/right-panel/tabs/ChangesTab.tsx

@@ -0,0 +1,203 @@
+import { For, Show, type Accessor, type Component, type JSX } from "solid-js"
+
+import { MonacoDiffViewer } from "../../../../file-viewer/monaco-diff-viewer"
+
+import DiffToolbar from "../components/DiffToolbar"
+import SplitFilePanel from "../components/SplitFilePanel"
+import type { DiffContextMode, DiffViewMode } from "../types"
+
+interface ChangesTabProps {
+  t: (key: string, vars?: Record<string, any>) => string
+
+  instanceId: string
+  activeSessionId: Accessor<string | null>
+  activeSessionDiffs: Accessor<any[] | undefined>
+
+  selectedFile: Accessor<string | null>
+  onSelectFile: (file: string, closeList: boolean) => void
+
+  diffViewMode: Accessor<DiffViewMode>
+  diffContextMode: Accessor<DiffContextMode>
+  onViewModeChange: (mode: DiffViewMode) => void
+  onContextModeChange: (mode: DiffContextMode) => void
+
+  listOpen: Accessor<boolean>
+  onToggleList: () => void
+  splitWidth: Accessor<number>
+  onResizeMouseDown: (event: MouseEvent) => void
+  onResizeTouchStart: (event: TouchEvent) => void
+  isPhoneLayout: Accessor<boolean>
+}
+
+const ChangesTab: Component<ChangesTabProps> = (props) => {
+  const renderContent = (): JSX.Element => {
+    const sessionId = props.activeSessionId()
+
+    const hasSession = Boolean(sessionId && sessionId !== "info")
+    const diffs = hasSession ? props.activeSessionDiffs() : null
+
+    const sorted = Array.isArray(diffs) ? [...diffs].sort((a, b) => String(a.file || "").localeCompare(String(b.file || ""))) : []
+    const totals = sorted.reduce(
+      (acc, item) => {
+        acc.additions += typeof item.additions === "number" ? item.additions : 0
+        acc.deletions += typeof item.deletions === "number" ? item.deletions : 0
+        return acc
+      },
+      { additions: 0, deletions: 0 },
+    )
+
+    const mostChanged = sorted.length
+      ? sorted.reduce((best, item) => {
+          const bestAdd = typeof (best as any)?.additions === "number" ? (best as any).additions : 0
+          const bestDel = typeof (best as any)?.deletions === "number" ? (best as any).deletions : 0
+          const bestScore = bestAdd + bestDel
+
+          const add = typeof (item as any)?.additions === "number" ? (item as any).additions : 0
+          const del = typeof (item as any)?.deletions === "number" ? (item as any).deletions : 0
+          const score = add + del
+
+          if (score > bestScore) return item
+          if (score < bestScore) return best
+          return String(item.file || "").localeCompare(String((best as any)?.file || "")) < 0 ? item : best
+        }, sorted[0])
+      : null
+
+    // Auto-select the most-changed file if none selected.
+    const currentSelected = props.selectedFile()
+    const selectedFileData = sorted.find((f) => f.file === currentSelected) || mostChanged
+
+    const scopeKey = `${props.instanceId}:${hasSession ? sessionId : "no-session"}`
+
+    const emptyViewerMessage = () => {
+      if (!hasSession) return props.t("instanceShell.sessionChanges.noSessionSelected")
+      if (diffs === undefined) return props.t("instanceShell.sessionChanges.loading")
+      if (!Array.isArray(diffs) || diffs.length === 0) return props.t("instanceShell.sessionChanges.empty")
+      return props.t("instanceShell.filesShell.viewerEmpty")
+    }
+
+    const renderViewer = () => (
+      <div class="file-viewer-panel flex-1">
+        <div class="file-viewer-header">
+          <DiffToolbar
+            viewMode={props.diffViewMode()}
+            contextMode={props.diffContextMode()}
+            onViewModeChange={props.onViewModeChange}
+            onContextModeChange={props.onContextModeChange}
+          />
+        </div>
+        <div class="file-viewer-content file-viewer-content--monaco">
+          <Show
+            when={selectedFileData && hasSession && Array.isArray(diffs) && diffs.length > 0 ? selectedFileData : null}
+            fallback={
+              <div class="file-viewer-empty">
+                <span class="file-viewer-empty-text">{emptyViewerMessage()}</span>
+              </div>
+            }
+          >
+            {(file) => (
+              <MonacoDiffViewer
+                scopeKey={scopeKey}
+                path={String(file().file || "")}
+                before={String((file() as any).before || "")}
+                after={String((file() as any).after || "")}
+                viewMode={props.diffViewMode()}
+                contextMode={props.diffContextMode()}
+              />
+            )}
+          </Show>
+        </div>
+      </div>
+    )
+
+    const renderEmptyList = () => (
+      <div class="p-3 text-xs text-secondary">{emptyViewerMessage()}</div>
+    )
+
+    const renderListPanel = () => (
+      <Show when={sorted.length > 0} fallback={renderEmptyList()}>
+        <For each={sorted}>
+          {(item) => (
+            <div
+              class={`file-list-item ${selectedFileData?.file === item.file ? "file-list-item-active" : ""}`}
+              onClick={() => {
+                props.onSelectFile(item.file, props.isPhoneLayout())
+              }}
+            >
+              <div class="file-list-item-content">
+                <div class="file-list-item-path" title={item.file}>
+                  <span class="file-path-text">{item.file}</span>
+                </div>
+                <div class="file-list-item-stats">
+                  <span class="file-list-item-additions">+{item.additions}</span>
+                  <span class="file-list-item-deletions">-{item.deletions}</span>
+                </div>
+              </div>
+            </div>
+          )}
+        </For>
+      </Show>
+    )
+
+    const renderListOverlay = () => (
+      <Show when={sorted.length > 0} fallback={renderEmptyList()}>
+        <For each={sorted}>
+          {(item) => (
+            <div
+              class={`file-list-item ${selectedFileData?.file === item.file ? "file-list-item-active" : ""}`}
+              onClick={() => {
+                props.onSelectFile(item.file, true)
+              }}
+              title={item.file}
+            >
+              <div class="file-list-item-content">
+                <div class="file-list-item-path" title={item.file}>
+                  <span class="file-path-text">{item.file}</span>
+                </div>
+                <div class="file-list-item-stats">
+                  <span class="file-list-item-additions">+{item.additions}</span>
+                  <span class="file-list-item-deletions">-{item.deletions}</span>
+                </div>
+              </div>
+            </div>
+          )}
+        </For>
+      </Show>
+    )
+
+    const headerPath = () => (selectedFileData?.file ? selectedFileData.file : props.t("instanceShell.rightPanel.tabs.changes"))
+
+    return (
+      <SplitFilePanel
+        header={
+          <>
+            <span class="files-tab-selected-path" title={headerPath()}>
+              <span class="file-path-text">{headerPath()}</span>
+            </span>
+
+            <div class="files-tab-stats" style={{ flex: "0 0 auto" }}>
+              <span class="files-tab-stat files-tab-stat-additions">
+                <span class="files-tab-stat-value">+{totals.additions}</span>
+              </span>
+              <span class="files-tab-stat files-tab-stat-deletions">
+                <span class="files-tab-stat-value">-{totals.deletions}</span>
+              </span>
+            </div>
+          </>
+        }
+        list={{ panel: renderListPanel, overlay: renderListOverlay }}
+        viewer={renderViewer()}
+        listOpen={props.listOpen()}
+        onToggleList={props.onToggleList}
+        splitWidth={props.splitWidth()}
+        onResizeMouseDown={props.onResizeMouseDown}
+        onResizeTouchStart={props.onResizeTouchStart}
+        isPhoneLayout={props.isPhoneLayout()}
+        overlayAriaLabel="Changes"
+      />
+    )
+  }
+
+  return <>{renderContent()}</>
+}
+
+export default ChangesTab

packages/ui/src/components/instance/shell/right-panel/tabs/FilesTab.tsx

@@ -0,0 +1,191 @@
+import { For, Show, type Accessor, type Component, type JSX } from "solid-js"
+import type { FileNode } from "@opencode-ai/sdk/v2/client"
+
+import { RefreshCw } from "lucide-solid"
+
+import { MonacoFileViewer } from "../../../../file-viewer/monaco-file-viewer"
+
+import SplitFilePanel from "../components/SplitFilePanel"
+
+interface FilesTabProps {
+  t: (key: string, vars?: Record<string, any>) => string
+
+  browserPath: Accessor<string>
+  browserEntries: Accessor<FileNode[] | null>
+  browserLoading: Accessor<boolean>
+  browserError: Accessor<string | null>
+
+  browserSelectedPath: Accessor<string | null>
+  browserSelectedContent: Accessor<string | null>
+  browserSelectedLoading: Accessor<boolean>
+  browserSelectedError: Accessor<string | null>
+
+  parentPath: Accessor<string | null>
+  scopeKey: Accessor<string>
+
+  onLoadEntries: (path: string) => void
+  onOpenFile: (path: string) => void
+  onRefresh: () => void
+
+  listOpen: Accessor<boolean>
+  onToggleList: () => void
+  splitWidth: Accessor<number>
+  onResizeMouseDown: (event: MouseEvent) => void
+  onResizeTouchStart: (event: TouchEvent) => void
+  isPhoneLayout: Accessor<boolean>
+}
+
+const FilesTab: Component<FilesTabProps> = (props) => {
+  const renderContent = (): JSX.Element => {
+    const entriesValue = props.browserEntries()
+    const entries = entriesValue || []
+    const sorted = [...entries].sort((a, b) => {
+      const aDir = a.type === "directory" ? 0 : 1
+      const bDir = b.type === "directory" ? 0 : 1
+      if (aDir !== bDir) return aDir - bDir
+      return String(a.name || "").localeCompare(String(b.name || ""))
+    })
+
+    const parent = props.parentPath()
+
+    const headerDisplayedPath = () => props.browserSelectedPath() || props.browserPath()
+
+    const emptyViewerMessage = () => {
+      if (props.browserLoading() && entriesValue === null) return "Loading files..."
+      return "Select a file to preview"
+    }
+
+    const renderViewer = () => (
+      <div class="file-viewer-panel flex-1">
+        <div class="file-viewer-content file-viewer-content--monaco">
+          <Show
+            when={props.browserSelectedLoading()}
+            fallback={
+              <Show
+                when={props.browserSelectedError()}
+                fallback={
+                  <Show
+                    when={
+                      props.browserSelectedPath() && props.browserSelectedContent() !== null
+                        ? { path: props.browserSelectedPath() as string, content: props.browserSelectedContent() as string }
+                        : null
+                    }
+                    fallback={
+                      <div class="file-viewer-empty">
+                        <span class="file-viewer-empty-text">{emptyViewerMessage()}</span>
+                      </div>
+                    }
+                  >
+                    {(payload) => (
+                      <MonacoFileViewer scopeKey={props.scopeKey()} path={payload().path} content={payload().content} />
+                    )}
+                  </Show>
+                }
+              >
+                {(err) => (
+                  <div class="file-viewer-empty">
+                    <span class="file-viewer-empty-text">{err()}</span>
+                  </div>
+                )}
+              </Show>
+            }
+          >
+            <div class="file-viewer-empty">
+              <span class="file-viewer-empty-text">Loading…</span>
+            </div>
+          </Show>
+        </div>
+      </div>
+    )
+
+    const renderList = () => (
+      <>
+        <Show when={parent}>
+          {(p) => (
+            <div class="file-list-item" onClick={() => props.onLoadEntries(p())}>
+              <div class="file-list-item-content">
+                <div class="file-list-item-path" title={p()}>
+                  <span class="file-path-text">..</span>
+                </div>
+              </div>
+            </div>
+          )}
+        </Show>
+
+        <Show when={props.browserLoading() && entriesValue === null}>
+          <div class="p-3 text-xs text-secondary">Loading files...</div>
+        </Show>
+
+        <For each={sorted}>
+          {(item) => (
+            <div
+              class={`file-list-item ${props.browserSelectedPath() === item.path ? "file-list-item-active" : ""}`}
+              onClick={() => {
+                if (item.type === "directory") {
+                  props.onLoadEntries(item.path)
+                  return
+                }
+                props.onOpenFile(item.path)
+              }}
+              title={item.path}
+            >
+              <div class="file-list-item-content">
+                <div class="file-list-item-path" title={item.path}>
+                  <span class="file-path-text">{item.name}</span>
+                </div>
+                <div class="file-list-item-stats">
+                  <span class="text-[10px] text-secondary">{item.type}</span>
+                </div>
+              </div>
+            </div>
+          )}
+        </For>
+      </>
+    )
+
+    return (
+      <SplitFilePanel
+        header={
+          <>
+            <div class="files-tab-stats">
+              <span class="files-tab-stat">
+                <span class="files-tab-selected-path" title={headerDisplayedPath()}>
+                  <span class="file-path-text">{headerDisplayedPath()}</span>
+                </span>
+              </span>
+              <Show when={props.browserLoading()}>
+                <span>Loading…</span>
+              </Show>
+              <Show when={props.browserError()}>{(err) => <span class="text-error">{err()}</span>}</Show>
+            </div>
+
+            <button
+              type="button"
+              class="files-header-icon-button"
+              title={props.t("instanceShell.rightPanel.actions.refresh")}
+              aria-label={props.t("instanceShell.rightPanel.actions.refresh")}
+              disabled={props.browserLoading()}
+              style={{ "margin-left": "auto" }}
+              onClick={() => props.onRefresh()}
+            >
+              <RefreshCw class={`h-4 w-4${props.browserLoading() ? " animate-spin" : ""}`} />
+            </button>
+          </>
+        }
+        list={{ panel: renderList, overlay: renderList }}
+        viewer={renderViewer()}
+        listOpen={props.listOpen()}
+        onToggleList={props.onToggleList}
+        splitWidth={props.splitWidth()}
+        onResizeMouseDown={props.onResizeMouseDown}
+        onResizeTouchStart={props.onResizeTouchStart}
+        isPhoneLayout={props.isPhoneLayout()}
+        overlayAriaLabel="Files"
+      />
+    )
+  }
+
+  return <>{renderContent()}</>
+}
+
+export default FilesTab

packages/ui/src/components/instance/shell/right-panel/tabs/GitChangesTab.tsx

@@ -0,0 +1,258 @@
+import { For, Show, type Accessor, type Component, type JSX } from "solid-js"
+import type { File as GitFileStatus } from "@opencode-ai/sdk/v2/client"
+
+import { RefreshCw } from "lucide-solid"
+
+import { MonacoDiffViewer } from "../../../../file-viewer/monaco-diff-viewer"
+
+import DiffToolbar from "../components/DiffToolbar"
+import SplitFilePanel from "../components/SplitFilePanel"
+import type { DiffContextMode, DiffViewMode } from "../types"
+
+interface GitChangesTabProps {
+  t: (key: string, vars?: Record<string, any>) => string
+
+  activeSessionId: Accessor<string | null>
+
+  entries: Accessor<GitFileStatus[] | null>
+  statusLoading: Accessor<boolean>
+  statusError: Accessor<string | null>
+
+  selectedPath: Accessor<string | null>
+  selectedLoading: Accessor<boolean>
+  selectedError: Accessor<string | null>
+  selectedBefore: Accessor<string | null>
+  selectedAfter: Accessor<string | null>
+  mostChangedPath: Accessor<string | null>
+
+  scopeKey: Accessor<string>
+
+  diffViewMode: Accessor<DiffViewMode>
+  diffContextMode: Accessor<DiffContextMode>
+  onViewModeChange: (mode: DiffViewMode) => void
+  onContextModeChange: (mode: DiffContextMode) => void
+
+  onOpenFile: (path: string) => void
+  onRefresh: () => void
+
+  listOpen: Accessor<boolean>
+  onToggleList: () => void
+  splitWidth: Accessor<number>
+  onResizeMouseDown: (event: MouseEvent) => void
+  onResizeTouchStart: (event: TouchEvent) => void
+  isPhoneLayout: Accessor<boolean>
+}
+
+const GitChangesTab: Component<GitChangesTabProps> = (props) => {
+  const renderContent = (): JSX.Element => {
+    const sessionId = props.activeSessionId()
+
+    const hasSession = Boolean(sessionId && sessionId !== "info")
+    const entries = hasSession ? props.entries() : null
+
+    const sorted = Array.isArray(entries)
+      ? [...entries].sort((a, b) => String(a.path || "").localeCompare(String(b.path || "")))
+      : []
+
+    const totals = sorted.reduce(
+      (acc, item) => {
+        acc.additions += typeof item.added === "number" ? item.added : 0
+        acc.deletions += typeof item.removed === "number" ? item.removed : 0
+        return acc
+      },
+      { additions: 0, deletions: 0 },
+    )
+
+    const nonDeleted = sorted.filter((item) => item && item.status !== "deleted")
+
+    const emptyViewerMessage = () => {
+      if (!hasSession) return "Select a session to view changes."
+      if (entries === null) return "Loading git changes…"
+      if (nonDeleted.length === 0) return "No git changes yet."
+      return "No file selected."
+    }
+
+    const selectedPath = props.selectedPath()
+    const fallbackPath = props.mostChangedPath()
+    const selectedEntry =
+      sorted.find((item) => item.path === selectedPath) ||
+      (fallbackPath ? sorted.find((item) => item.path === fallbackPath) : null)
+
+    const renderViewer = () => (
+      <div class="file-viewer-panel flex-1">
+        <div class="file-viewer-header">
+          <DiffToolbar
+            viewMode={props.diffViewMode()}
+            contextMode={props.diffContextMode()}
+            onViewModeChange={props.onViewModeChange}
+            onContextModeChange={props.onContextModeChange}
+          />
+        </div>
+        <div class="file-viewer-content file-viewer-content--monaco">
+          <Show
+            when={props.selectedLoading()}
+            fallback={
+              <Show
+                when={props.selectedError()}
+                fallback={
+                  <Show
+                    when={
+                      selectedEntry &&
+                      props.selectedBefore() !== null &&
+                      props.selectedAfter() !== null &&
+                      selectedEntry.status !== "deleted"
+                        ? {
+                            path: selectedEntry.path,
+                            before: props.selectedBefore() as string,
+                            after: props.selectedAfter() as string,
+                          }
+                        : null
+                    }
+                    fallback={
+                      <div class="file-viewer-empty">
+                        <span class="file-viewer-empty-text">{emptyViewerMessage()}</span>
+                      </div>
+                    }
+                  >
+                    {(file) => (
+                      <MonacoDiffViewer
+                        scopeKey={props.scopeKey()}
+                        path={String(file().path || "")}
+                        before={String((file() as any).before || "")}
+                        after={String((file() as any).after || "")}
+                        viewMode={props.diffViewMode()}
+                        contextMode={props.diffContextMode()}
+                      />
+                    )}
+                  </Show>
+                }
+              >
+                {(err) => (
+                  <div class="file-viewer-empty">
+                    <span class="file-viewer-empty-text">{err()}</span>
+                  </div>
+                )}
+              </Show>
+            }
+          >
+            <div class="file-viewer-empty">
+              <span class="file-viewer-empty-text">Loading…</span>
+            </div>
+          </Show>
+        </div>
+      </div>
+    )
+
+    const renderEmptyList = () => <div class="p-3 text-xs text-secondary">{emptyViewerMessage()}</div>
+
+    const renderListPanel = () => (
+      <Show when={nonDeleted.length > 0} fallback={renderEmptyList()}>
+        <For each={sorted}>
+          {(item) => (
+            <div
+              class={`file-list-item ${props.selectedPath() === item.path ? "file-list-item-active" : ""}`}
+              onClick={() => {
+                props.onOpenFile(item.path)
+              }}
+            >
+              <div class="file-list-item-content">
+                <div class="file-list-item-path" title={item.path}>
+                  <span class="file-path-text">{item.path}</span>
+                </div>
+                <div class="file-list-item-stats">
+                  <Show when={item.status === "deleted"}>
+                    <span class="text-[10px] text-secondary">deleted</span>
+                  </Show>
+                  <Show when={item.status !== "deleted"}>
+                    <>
+                      <span class="file-list-item-additions">+{item.added}</span>
+                      <span class="file-list-item-deletions">-{item.removed}</span>
+                    </>
+                  </Show>
+                </div>
+              </div>
+            </div>
+          )}
+        </For>
+      </Show>
+    )
+
+    const renderListOverlay = () => (
+      <Show when={nonDeleted.length > 0} fallback={renderEmptyList()}>
+        <For each={sorted}>
+          {(item) => (
+            <div
+              class={`file-list-item ${props.selectedPath() === item.path ? "file-list-item-active" : ""}`}
+              onClick={() => props.onOpenFile(item.path)}
+              title={item.path}
+            >
+              <div class="file-list-item-content">
+                <div class="file-list-item-path" title={item.path}>
+                  <span class="file-path-text">{item.path}</span>
+                </div>
+                <div class="file-list-item-stats">
+                  <Show when={item.status === "deleted"}>
+                    <span class="text-[10px] text-secondary">deleted</span>
+                  </Show>
+                  <Show when={item.status !== "deleted"}>
+                    <>
+                      <span class="file-list-item-additions">+{item.added}</span>
+                      <span class="file-list-item-deletions">-{item.removed}</span>
+                    </>
+                  </Show>
+                </div>
+              </div>
+            </div>
+          )}
+        </For>
+      </Show>
+    )
+
+    return (
+      <SplitFilePanel
+        header={
+          <>
+            <span class="files-tab-selected-path" title={selectedEntry?.path || "Git Changes"}>
+              <span class="file-path-text">{selectedEntry?.path || "Git Changes"}</span>
+            </span>
+
+            <div class="files-tab-stats" style={{ flex: "0 0 auto" }}>
+              <span class="files-tab-stat files-tab-stat-additions">
+                <span class="files-tab-stat-value">+{totals.additions}</span>
+              </span>
+              <span class="files-tab-stat files-tab-stat-deletions">
+                <span class="files-tab-stat-value">-{totals.deletions}</span>
+              </span>
+              <Show when={props.statusError()}>{(err) => <span class="text-error">{err()}</span>}</Show>
+            </div>
+
+            <button
+              type="button"
+              class="files-header-icon-button"
+              title={props.t("instanceShell.rightPanel.actions.refresh")}
+              aria-label={props.t("instanceShell.rightPanel.actions.refresh")}
+              disabled={!hasSession || props.statusLoading() || entries === null}
+              style={{ "margin-left": "auto" }}
+              onClick={() => props.onRefresh()}
+            >
+              <RefreshCw class={`h-4 w-4${props.statusLoading() ? " animate-spin" : ""}`} />
+            </button>
+          </>
+        }
+        list={{ panel: renderListPanel, overlay: renderListOverlay }}
+        viewer={renderViewer()}
+        listOpen={props.listOpen()}
+        onToggleList={props.onToggleList}
+        splitWidth={props.splitWidth()}
+        onResizeMouseDown={props.onResizeMouseDown}
+        onResizeTouchStart={props.onResizeTouchStart}
+        isPhoneLayout={props.isPhoneLayout()}
+        overlayAriaLabel="Git Changes"
+      />
+    )
+  }
+
+  return <>{renderContent()}</>
+}
+
+export default GitChangesTab

packages/ui/src/components/instance/shell/right-panel/tabs/StatusTab.tsx

@@ -0,0 +1,294 @@
+import { For, Show, type Accessor, type Component } from "solid-js"
+import type { ToolState } from "@opencode-ai/sdk"
+import { Accordion } from "@kobalte/core"
+
+import { ChevronDown, TerminalSquare, Trash2, XOctagon } from "lucide-solid"
+
+import type { Instance } from "../../../../../types/instance"
+import type { BackgroundProcess } from "../../../../../../../server/src/api-types"
+import type { Session } from "../../../../../types/session"
+
+import ContextUsagePanel from "../../../../session/context-usage-panel"
+import { TodoListView } from "../../../../tool-call/renderers/todo"
+import InstanceServiceStatus from "../../../../instance-service-status"
+
+interface StatusTabProps {
+  t: (key: string, vars?: Record<string, any>) => string
+
+  instanceId: string
+  instance: Instance
+
+  activeSessionId: Accessor<string | null>
+  activeSession: Accessor<Session | null>
+  activeSessionDiffs: Accessor<any[] | undefined>
+
+  latestTodoState: Accessor<ToolState | null>
+
+  backgroundProcessList: Accessor<BackgroundProcess[]>
+  onOpenBackgroundOutput: (process: BackgroundProcess) => void
+  onStopBackgroundProcess: (processId: string) => Promise<void> | void
+  onTerminateBackgroundProcess: (processId: string) => Promise<void> | void
+
+  expandedItems: Accessor<string[]>
+  onExpandedItemsChange: (values: string[]) => void
+
+  onOpenChangesTab: (file?: string) => void
+}
+
+const StatusTab: Component<StatusTabProps> = (props) => {
+  const isSectionExpanded = (id: string) => props.expandedItems().includes(id)
+
+  const renderStatusSessionChanges = () => {
+    const sessionId = props.activeSessionId()
+    if (!sessionId || sessionId === "info") {
+      return (
+        <div class="right-panel-empty right-panel-empty--left">
+          <span class="text-xs">{props.t("instanceShell.sessionChanges.noSessionSelected")}</span>
+        </div>
+      )
+    }
+
+    const diffs = props.activeSessionDiffs()
+    if (diffs === undefined) {
+      return (
+        <div class="right-panel-empty right-panel-empty--left">
+          <span class="text-xs">{props.t("instanceShell.sessionChanges.loading")}</span>
+        </div>
+      )
+    }
+
+    if (!Array.isArray(diffs) || diffs.length === 0) {
+      return (
+        <div class="right-panel-empty right-panel-empty--left">
+          <span class="text-xs">{props.t("instanceShell.sessionChanges.empty")}</span>
+        </div>
+      )
+    }
+
+    const sorted = [...diffs].sort((a, b) => String(a.file || "").localeCompare(String(b.file || "")))
+    const totals = sorted.reduce(
+      (acc, item) => {
+        acc.additions += typeof item.additions === "number" ? item.additions : 0
+        acc.deletions += typeof item.deletions === "number" ? item.deletions : 0
+        return acc
+      },
+      { additions: 0, deletions: 0 },
+    )
+
+    return (
+      <div class="flex flex-col gap-3 min-h-0">
+        <div class="flex items-center justify-between gap-2 text-[11px] text-secondary">
+          <span>{props.t("instanceShell.sessionChanges.filesChanged", { count: sorted.length })}</span>
+          <span class="flex items-center gap-2">
+            <span style={{ color: "var(--session-status-idle-fg)" }}>{`+${totals.additions}`}</span>
+            <span style={{ color: "var(--session-status-working-fg)" }}>{`-${totals.deletions}`}</span>
+          </span>
+        </div>
+
+        <div class="rounded-md border border-base bg-surface-secondary p-2 max-h-[40vh] overflow-y-auto">
+          <div class="flex flex-col">
+            <For each={sorted}>
+              {(item) => (
+                <button
+                  type="button"
+                  class="border-b border-base last:border-b-0 text-left hover:bg-surface-muted rounded-sm"
+                  onClick={() => props.onOpenChangesTab(item.file)}
+                  title={props.t("instanceShell.sessionChanges.actions.show")}
+                >
+                  <div class="flex items-center justify-between gap-3">
+                    <div
+                      class="text-xs font-mono text-primary min-w-0 flex-1 overflow-hidden whitespace-nowrap"
+                      title={item.file}
+                      style="text-overflow: ellipsis; direction: rtl; text-align: left; unicode-bidi: plaintext;"
+                    >
+                      {item.file}
+                    </div>
+                    <div class="flex items-center gap-2 text-[11px] flex-shrink-0">
+                      <span style={{ color: "var(--session-status-idle-fg)" }}>{`+${item.additions}`}</span>
+                      <span style={{ color: "var(--session-status-working-fg)" }}>{`-${item.deletions}`}</span>
+                    </div>
+                  </div>
+                </button>
+              )}
+            </For>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  const renderPlanSectionContent = () => {
+    const sessionId = props.activeSessionId()
+    if (!sessionId || sessionId === "info") {
+      return (
+        <div class="right-panel-empty right-panel-empty--left">
+          <span class="text-xs">{props.t("instanceShell.plan.noSessionSelected")}</span>
+        </div>
+      )
+    }
+    const todoState = props.latestTodoState()
+    if (!todoState) {
+      return (
+        <div class="right-panel-empty right-panel-empty--left">
+          <span class="text-xs">{props.t("instanceShell.plan.empty")}</span>
+        </div>
+      )
+    }
+    return <TodoListView state={todoState} emptyLabel={props.t("instanceShell.plan.empty")} showStatusLabel={false} />
+  }
+
+  const renderBackgroundProcesses = () => {
+    const processes = props.backgroundProcessList()
+    if (processes.length === 0) {
+      return (
+        <div class="right-panel-empty right-panel-empty--left">
+          <span class="text-xs">{props.t("instanceShell.backgroundProcesses.empty")}</span>
+        </div>
+      )
+    }
+
+    return (
+      <div class="flex flex-col gap-2">
+        <For each={processes}>
+          {(process) => (
+            <div class="status-process-card">
+              <div class="status-process-header">
+                <span class="status-process-title">{process.title}</span>
+                <div class="status-process-meta">
+                  <span>{props.t("instanceShell.backgroundProcesses.status", { status: process.status })}</span>
+                  <Show when={typeof process.outputSizeBytes === "number"}>
+                    <span>
+                      {props.t("instanceShell.backgroundProcesses.output", {
+                        sizeKb: Math.round((process.outputSizeBytes ?? 0) / 1024),
+                      })}
+                    </span>
+                  </Show>
+                </div>
+              </div>
+              <div class="status-process-actions">
+                <button
+                  type="button"
+                  class="button-tertiary w-full p-1 inline-flex items-center justify-center"
+                  onClick={() => props.onOpenBackgroundOutput(process)}
+                  aria-label={props.t("instanceShell.backgroundProcesses.actions.output")}
+                  title={props.t("instanceShell.backgroundProcesses.actions.output")}
+                >
+                  <TerminalSquare class="h-4 w-4" />
+                </button>
+                <button
+                  type="button"
+                  class="button-tertiary w-full p-1 inline-flex items-center justify-center"
+                  disabled={process.status !== "running"}
+                  onClick={() => props.onStopBackgroundProcess(process.id)}
+                  aria-label={props.t("instanceShell.backgroundProcesses.actions.stop")}
+                  title={props.t("instanceShell.backgroundProcesses.actions.stop")}
+                >
+                  <XOctagon class="h-4 w-4" />
+                </button>
+                <button
+                  type="button"
+                  class="button-tertiary w-full p-1 inline-flex items-center justify-center"
+                  onClick={() => props.onTerminateBackgroundProcess(process.id)}
+                  aria-label={props.t("instanceShell.backgroundProcesses.actions.terminate")}
+                  title={props.t("instanceShell.backgroundProcesses.actions.terminate")}
+                >
+                  <Trash2 class="h-4 w-4" />
+                </button>
+              </div>
+            </div>
+          )}
+        </For>
+      </div>
+    )
+  }
+
+  const statusSections = [
+    {
+      id: "session-changes",
+      labelKey: "instanceShell.rightPanel.sections.sessionChanges",
+      render: renderStatusSessionChanges,
+    },
+    {
+      id: "plan",
+      labelKey: "instanceShell.rightPanel.sections.plan",
+      render: renderPlanSectionContent,
+    },
+    {
+      id: "background-processes",
+      labelKey: "instanceShell.rightPanel.sections.backgroundProcesses",
+      render: renderBackgroundProcesses,
+    },
+    {
+      id: "mcp",
+      labelKey: "instanceShell.rightPanel.sections.mcp",
+      render: () => (
+        <InstanceServiceStatus
+          initialInstance={props.instance}
+          sections={["mcp"]}
+          showSectionHeadings={false}
+          class="space-y-2"
+        />
+      ),
+    },
+    {
+      id: "lsp",
+      labelKey: "instanceShell.rightPanel.sections.lsp",
+      render: () => (
+        <InstanceServiceStatus
+          initialInstance={props.instance}
+          sections={["lsp"]}
+          showSectionHeadings={false}
+          class="space-y-2"
+        />
+      ),
+    },
+    {
+      id: "plugins",
+      labelKey: "instanceShell.rightPanel.sections.plugins",
+      render: () => (
+        <InstanceServiceStatus
+          initialInstance={props.instance}
+          sections={["plugins"]}
+          showSectionHeadings={false}
+          class="space-y-2"
+        />
+      ),
+    },
+  ]
+
+  return (
+    <div class="status-tab-container">
+      <Show when={props.activeSession()}>
+        {(activeSession) => (
+          <ContextUsagePanel instanceId={props.instanceId} sessionId={activeSession().id} class="status-tab-context-panel" />
+        )}
+      </Show>
+
+      <Accordion.Root
+        class="right-panel-accordion"
+        collapsible
+        multiple
+        value={props.expandedItems()}
+        onChange={props.onExpandedItemsChange}
+      >
+        <For each={statusSections}>
+          {(section) => (
+            <Accordion.Item value={section.id} class="right-panel-accordion-item">
+              <Accordion.Header>
+                <Accordion.Trigger class="right-panel-accordion-trigger">
+                  <span>{props.t(section.labelKey)}</span>
+                  <ChevronDown
+                    class={`right-panel-accordion-chevron ${isSectionExpanded(section.id) ? "right-panel-accordion-chevron-expanded" : ""}`}
+                  />
+                </Accordion.Trigger>
+              </Accordion.Header>
+              <Accordion.Content class="right-panel-accordion-content">{section.render()}</Accordion.Content>
+            </Accordion.Item>
+          )}
+        </For>
+      </Accordion.Root>
+    </div>
+  )
+}
+
+export default StatusTab

packages/ui/src/components/instance/shell/right-panel/types.ts

@@ -0,0 +1,5 @@
+export type RightPanelTab = "changes" | "git-changes" | "files" | "status"
+
+export type DiffViewMode = "split" | "unified"
+
+export type DiffContextMode = "expanded" | "collapsed"

packages/ui/src/components/instance/shell/storage.ts

@@ -0,0 +1,92 @@
+export const DEFAULT_SESSION_SIDEBAR_WIDTH = 340
+export const MIN_SESSION_SIDEBAR_WIDTH = 220
+export const MAX_SESSION_SIDEBAR_WIDTH = 400
+
+export const RIGHT_DRAWER_WIDTH = 260
+export const MIN_RIGHT_DRAWER_WIDTH = 200
+export const MAX_RIGHT_DRAWER_WIDTH = 1200
+
+export const LEFT_DRAWER_STORAGE_KEY = "opencode-session-sidebar-width-v8"
+export const RIGHT_DRAWER_STORAGE_KEY = "opencode-session-right-drawer-width-v1"
+export const LEFT_PIN_STORAGE_KEY = "opencode-session-left-drawer-pinned-v1"
+export const RIGHT_PIN_STORAGE_KEY = "opencode-session-right-drawer-pinned-v1"
+export const RIGHT_PANEL_TAB_STORAGE_KEY = "opencode-session-right-panel-tab-v2"
+export const LEGACY_RIGHT_PANEL_TAB_STORAGE_KEY = "opencode-session-right-panel-tab-v1"
+export const RIGHT_PANEL_CHANGES_SPLIT_WIDTH_KEY = "opencode-session-right-panel-changes-split-width-v1"
+export const RIGHT_PANEL_FILES_SPLIT_WIDTH_KEY = "opencode-session-right-panel-files-split-width-v1"
+export const RIGHT_PANEL_GIT_CHANGES_SPLIT_WIDTH_KEY = "opencode-session-right-panel-git-changes-split-width-v1"
+export const RIGHT_PANEL_CHANGES_LIST_OPEN_NONPHONE_KEY = "opencode-session-right-panel-changes-list-open-nonphone-v1"
+export const RIGHT_PANEL_CHANGES_LIST_OPEN_PHONE_KEY = "opencode-session-right-panel-changes-list-open-phone-v1"
+export const RIGHT_PANEL_FILES_LIST_OPEN_NONPHONE_KEY = "opencode-session-right-panel-files-list-open-nonphone-v1"
+export const RIGHT_PANEL_FILES_LIST_OPEN_PHONE_KEY = "opencode-session-right-panel-files-list-open-phone-v1"
+export const RIGHT_PANEL_GIT_CHANGES_LIST_OPEN_NONPHONE_KEY = "opencode-session-right-panel-git-changes-list-open-nonphone-v1"
+export const RIGHT_PANEL_GIT_CHANGES_LIST_OPEN_PHONE_KEY = "opencode-session-right-panel-git-changes-list-open-phone-v1"
+export const RIGHT_PANEL_CHANGES_DIFF_VIEW_MODE_KEY = "opencode-session-right-panel-changes-diff-view-mode-v1"
+export const RIGHT_PANEL_CHANGES_DIFF_CONTEXT_MODE_KEY = "opencode-session-right-panel-changes-diff-context-mode-v1"
+
+export const clampWidth = (value: number) =>
+  Math.min(MAX_SESSION_SIDEBAR_WIDTH, Math.max(MIN_SESSION_SIDEBAR_WIDTH, value))
+
+export const clampRightWidth = (value: number) => {
+  const windowMax = typeof window !== "undefined" ? Math.floor(window.innerWidth * 0.7) : MAX_RIGHT_DRAWER_WIDTH
+  const max = Math.max(MIN_RIGHT_DRAWER_WIDTH, windowMax)
+  return Math.min(max, Math.max(MIN_RIGHT_DRAWER_WIDTH, value))
+}
+
+const getPinStorageKey = (side: "left" | "right") => (side === "left" ? LEFT_PIN_STORAGE_KEY : RIGHT_PIN_STORAGE_KEY)
+
+export function readStoredPinState(side: "left" | "right", defaultValue: boolean) {
+  if (typeof window === "undefined") return defaultValue
+  const stored = window.localStorage.getItem(getPinStorageKey(side))
+  if (stored === "true") return true
+  if (stored === "false") return false
+  return defaultValue
+}
+
+export function persistPinState(side: "left" | "right", value: boolean) {
+  if (typeof window === "undefined") return
+  window.localStorage.setItem(getPinStorageKey(side), value ? "true" : "false")
+}
+
+export function readStoredRightPanelTab(
+  defaultValue: "changes" | "git-changes" | "files" | "status",
+): "changes" | "git-changes" | "files" | "status" {
+  if (typeof window === "undefined") return defaultValue
+
+  const stored = window.localStorage.getItem(RIGHT_PANEL_TAB_STORAGE_KEY)
+  if (stored === "status") return "status"
+  if (stored === "changes") return "changes"
+  if (stored === "git-changes") return "git-changes"
+  if (stored === "files") return "files"
+
+  // Migrate from v1 (where the stored values were the internal tab ids).
+  const legacy = window.localStorage.getItem(LEGACY_RIGHT_PANEL_TAB_STORAGE_KEY)
+  if (legacy === "status") return "status"
+  if (legacy === "browser") return "files"
+  if (legacy === "files") return "changes"
+
+  return defaultValue
+}
+
+export function readStoredPanelWidth(key: string, fallback: number) {
+  if (typeof window === "undefined") return fallback
+  const stored = window.localStorage.getItem(key)
+  if (!stored) return fallback
+  const parsed = Number.parseInt(stored, 10)
+  return Number.isFinite(parsed) ? parsed : fallback
+}
+
+export function readStoredBool(key: string): boolean | null {
+  if (typeof window === "undefined") return null
+  const stored = window.localStorage.getItem(key)
+  if (stored === "true") return true
+  if (stored === "false") return false
+  return null
+}
+
+export function readStoredEnum<T extends string>(key: string, allowed: readonly T[]): T | null {
+  if (typeof window === "undefined") return null
+  const stored = window.localStorage.getItem(key)
+  if (!stored) return null
+  return (allowed as readonly string[]).includes(stored) ? (stored as T) : null
+}

packages/ui/src/components/instance/shell/types.ts

@@ -0,0 +1,3 @@
+export type LayoutMode = "desktop" | "tablet" | "phone"
+
+export type DrawerViewState = "pinned" | "floating-open" | "floating-closed"

packages/ui/src/components/instance/shell/useDrawerChrome.ts

@@ -0,0 +1,260 @@
+import {
+  batch,
+  createComponent,
+  createEffect,
+  createMemo,
+  createSignal,
+  onCleanup,
+  onMount,
+  type Accessor,
+  type JSX,
+  type Setter,
+} from "solid-js"
+import MenuIcon from "@suid/icons-material/Menu"
+
+import type { TranslateParams } from "../../../lib/i18n"
+
+import type { DrawerViewState, LayoutMode } from "./types"
+import { persistPinState, readStoredPinState } from "./storage"
+
+export interface UseDrawerChromeOptions {
+  t: (key: string, params?: TranslateParams) => string
+  layoutMode: Accessor<LayoutMode>
+  leftPinningSupported: Accessor<boolean>
+  rightPinningSupported: Accessor<boolean>
+  leftDrawerContentEl: Accessor<HTMLElement | null>
+  rightDrawerContentEl: Accessor<HTMLElement | null>
+  leftToggleButtonEl: Accessor<HTMLElement | null>
+  rightToggleButtonEl: Accessor<HTMLElement | null>
+  measureDrawerHost?: () => void
+}
+
+export interface DrawerChromeApi {
+  leftPinned: Accessor<boolean>
+  leftOpen: Accessor<boolean>
+  rightPinned: Accessor<boolean>
+  rightOpen: Accessor<boolean>
+  setLeftOpen: Setter<boolean>
+  setRightOpen: Setter<boolean>
+  leftDrawerState: Accessor<DrawerViewState>
+  rightDrawerState: Accessor<DrawerViewState>
+  pinLeft: () => void
+  unpinLeft: () => void
+  pinRight: () => void
+  unpinRight: () => void
+  closeLeft: () => void
+  closeRight: () => void
+  leftAppBarButtonLabel: Accessor<string>
+  rightAppBarButtonLabel: Accessor<string>
+  leftAppBarButtonIcon: Accessor<JSX.Element>
+  rightAppBarButtonIcon: Accessor<JSX.Element>
+  handleLeftAppBarButtonClick: () => void
+  handleRightAppBarButtonClick: () => void
+}
+
+export function useDrawerChrome(options: UseDrawerChromeOptions): DrawerChromeApi {
+  const [leftPinned, setLeftPinned] = createSignal(true)
+  const [leftOpen, setLeftOpen] = createSignal(true)
+  const [rightPinned, setRightPinned] = createSignal(true)
+  const [rightOpen, setRightOpen] = createSignal(true)
+
+  const measureDrawerHost = () => options.measureDrawerHost?.()
+
+  const focusTarget = (element: HTMLElement | null) => {
+    if (!element) return
+    requestAnimationFrame(() => {
+      element.focus()
+    })
+  }
+
+  const blurIfInside = (element: HTMLElement | null) => {
+    if (typeof document === "undefined" || !element) return
+    const active = document.activeElement as HTMLElement | null
+    if (active && element.contains(active)) {
+      active.blur()
+    }
+  }
+
+  const persistPinIfSupported = (side: "left" | "right", value: boolean) => {
+    if (side === "left" && !options.leftPinningSupported()) return
+    if (side === "right" && !options.rightPinningSupported()) return
+    persistPinState(side, value)
+  }
+
+  createEffect(() => {
+    switch (options.layoutMode()) {
+      case "desktop": {
+        const leftSaved = readStoredPinState("left", true)
+        const rightSaved = readStoredPinState("right", true)
+        setLeftPinned(leftSaved)
+        setLeftOpen(leftSaved)
+        setRightPinned(rightSaved)
+        setRightOpen(rightSaved)
+        break
+      }
+      case "tablet": {
+        setLeftPinned(true)
+        setLeftOpen(true)
+        setRightPinned(false)
+        setRightOpen(false)
+        break
+      }
+      default:
+        setLeftPinned(false)
+        setLeftOpen(false)
+        setRightPinned(false)
+        setRightOpen(false)
+        break
+    }
+  })
+
+  const leftDrawerState = createMemo<DrawerViewState>(() => {
+    if (leftPinned()) return "pinned"
+    return leftOpen() ? "floating-open" : "floating-closed"
+  })
+
+  const rightDrawerState = createMemo<DrawerViewState>(() => {
+    if (rightPinned()) return "pinned"
+    return rightOpen() ? "floating-open" : "floating-closed"
+  })
+
+  const leftAppBarButtonLabel = () => {
+    const state = leftDrawerState()
+    if (state === "pinned") return options.t("instanceShell.leftDrawer.toggle.pinned")
+    return options.t("instanceShell.leftDrawer.toggle.open")
+  }
+
+  const rightAppBarButtonLabel = () => {
+    const state = rightDrawerState()
+    if (state === "pinned") return options.t("instanceShell.rightDrawer.toggle.pinned")
+    return options.t("instanceShell.rightDrawer.toggle.open")
+  }
+
+  const leftAppBarButtonIcon = () => {
+    return createComponent(MenuIcon, { fontSize: "small" })
+  }
+
+  const rightAppBarButtonIcon = () => {
+    return createComponent(MenuIcon, { fontSize: "small", sx: { transform: "scaleX(-1)" } })
+  }
+
+  const pinLeft = () => {
+    blurIfInside(options.leftDrawerContentEl())
+    batch(() => {
+      setLeftPinned(true)
+      setLeftOpen(true)
+    })
+    persistPinIfSupported("left", true)
+    measureDrawerHost()
+  }
+
+  const unpinLeft = () => {
+    blurIfInside(options.leftDrawerContentEl())
+    batch(() => {
+      setLeftPinned(false)
+      setLeftOpen(true)
+    })
+    persistPinIfSupported("left", false)
+    measureDrawerHost()
+  }
+
+  const pinRight = () => {
+    blurIfInside(options.rightDrawerContentEl())
+    batch(() => {
+      setRightPinned(true)
+      setRightOpen(true)
+    })
+    persistPinIfSupported("right", true)
+    measureDrawerHost()
+  }
+
+  const unpinRight = () => {
+    blurIfInside(options.rightDrawerContentEl())
+    batch(() => {
+      setRightPinned(false)
+      setRightOpen(true)
+    })
+    persistPinIfSupported("right", false)
+    measureDrawerHost()
+  }
+
+  const handleLeftAppBarButtonClick = () => {
+    const state = leftDrawerState()
+    if (state !== "floating-closed") return
+    setLeftOpen(true)
+    measureDrawerHost()
+  }
+
+  const handleRightAppBarButtonClick = () => {
+    const state = rightDrawerState()
+    if (state !== "floating-closed") return
+    setRightOpen(true)
+    measureDrawerHost()
+  }
+
+  const closeLeft = () => {
+    if (leftDrawerState() === "pinned") return
+    blurIfInside(options.leftDrawerContentEl())
+    setLeftOpen(false)
+    focusTarget(options.leftToggleButtonEl())
+  }
+
+  const closeRight = () => {
+    if (rightDrawerState() === "pinned") return
+    blurIfInside(options.rightDrawerContentEl())
+    setRightOpen(false)
+    focusTarget(options.rightToggleButtonEl())
+  }
+
+  const closeFloatingDrawersIfAny = () => {
+    let handled = false
+    if (!leftPinned() && leftOpen()) {
+      setLeftOpen(false)
+      blurIfInside(options.leftDrawerContentEl())
+      focusTarget(options.leftToggleButtonEl())
+      handled = true
+    }
+    if (!rightPinned() && rightOpen()) {
+      setRightOpen(false)
+      blurIfInside(options.rightDrawerContentEl())
+      focusTarget(options.rightToggleButtonEl())
+      handled = true
+    }
+    return handled
+  }
+
+  onMount(() => {
+    if (typeof window === "undefined") return
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key !== "Escape") return
+      if (!closeFloatingDrawersIfAny()) return
+      event.preventDefault()
+      event.stopPropagation()
+    }
+    window.addEventListener("keydown", handleEscape, true)
+    onCleanup(() => window.removeEventListener("keydown", handleEscape, true))
+  })
+
+  return {
+    leftPinned,
+    leftOpen,
+    rightPinned,
+    rightOpen,
+    setLeftOpen,
+    setRightOpen,
+    leftDrawerState,
+    rightDrawerState,
+    pinLeft,
+    unpinLeft,
+    pinRight,
+    unpinRight,
+    closeLeft,
+    closeRight,
+    leftAppBarButtonLabel,
+    rightAppBarButtonLabel,
+    leftAppBarButtonIcon,
+    rightAppBarButtonIcon,
+    handleLeftAppBarButtonClick,
+    handleRightAppBarButtonClick,
+  }
+}

packages/ui/src/components/instance/shell/useDrawerHostMeasure.ts

@@ -0,0 +1,65 @@
+import { createEffect, createSignal, type Accessor } from "solid-js"
+
+type DrawerHostMeasure = {
+  setDrawerHost: (element: HTMLElement) => void
+  drawerContainer: () => HTMLElement | undefined
+  measureDrawerHost: () => void
+  floatingTopPx: () => string
+  floatingHeight: () => string
+}
+
+export function useDrawerHostMeasure(tabBarOffset: Accessor<number>): DrawerHostMeasure {
+  const [drawerHost, setDrawerHost] = createSignal<HTMLElement | null>(null)
+  const [floatingDrawerTop, setFloatingDrawerTop] = createSignal(0)
+  const [floatingDrawerHeight, setFloatingDrawerHeight] = createSignal(0)
+
+  const storeDrawerHost = (element: HTMLElement) => {
+    setDrawerHost(element)
+  }
+
+  const measureDrawerHost = () => {
+    if (typeof window === "undefined") return
+    const host = drawerHost()
+    if (!host) return
+    const rect = host.getBoundingClientRect()
+    setFloatingDrawerTop(rect.top)
+    setFloatingDrawerHeight(Math.max(0, rect.height))
+  }
+
+  createEffect(() => {
+    tabBarOffset()
+    if (typeof window === "undefined") return
+    requestAnimationFrame(() => measureDrawerHost())
+  })
+
+  const drawerContainer = () => {
+    const host = drawerHost()
+    if (host) return host
+    if (typeof document !== "undefined") {
+      return document.body
+    }
+    return undefined
+  }
+
+  const fallbackDrawerTop = () => tabBarOffset()
+  const floatingTop = () => {
+    const measured = floatingDrawerTop()
+    if (measured > 0) return measured
+    return fallbackDrawerTop()
+  }
+
+  const floatingTopPx = () => `${floatingTop()}px`
+  const floatingHeight = () => {
+    const measured = floatingDrawerHeight()
+    if (measured > 0) return `${measured}px`
+    return `calc(100% - ${floatingTop()}px)`
+  }
+
+  return {
+    setDrawerHost: storeDrawerHost,
+    drawerContainer,
+    measureDrawerHost,
+    floatingTopPx,
+    floatingHeight,
+  }
+}

packages/ui/src/components/instance/shell/useDrawerResize.ts

@@ -0,0 +1,113 @@
+import { createSignal, onCleanup, type Accessor, type Setter } from "solid-js"
+
+import { useGlobalPointerDrag } from "./useGlobalPointerDrag"
+
+type DrawerResizeSide = "left" | "right"
+
+type DrawerResizeOptions = {
+  sessionSidebarWidth: Accessor<number>
+  rightDrawerWidth: Accessor<number>
+  setSessionSidebarWidth: Setter<number>
+  setRightDrawerWidth: Setter<number>
+  clampLeft: (width: number) => number
+  clampRight: (width: number) => number
+  measureDrawerHost: () => void
+}
+
+type DrawerResizeApi = {
+  handleDrawerResizeMouseDown: (side: DrawerResizeSide) => (event: MouseEvent) => void
+  handleDrawerResizeTouchStart: (side: DrawerResizeSide) => (event: TouchEvent) => void
+}
+
+export function useDrawerResize(options: DrawerResizeOptions): DrawerResizeApi {
+  const [activeResizeSide, setActiveResizeSide] = createSignal<DrawerResizeSide | null>(null)
+  const [resizeStartX, setResizeStartX] = createSignal(0)
+  const [resizeStartWidth, setResizeStartWidth] = createSignal(0)
+
+  const scheduleDrawerMeasure = () => {
+    if (typeof window === "undefined") {
+      options.measureDrawerHost()
+      return
+    }
+    requestAnimationFrame(() => options.measureDrawerHost())
+  }
+
+  const applyDrawerWidth = (side: DrawerResizeSide, width: number) => {
+    if (side === "left") {
+      options.setSessionSidebarWidth(width)
+    } else {
+      options.setRightDrawerWidth(width)
+    }
+    scheduleDrawerMeasure()
+  }
+
+  const handleDrawerPointerMove = (clientX: number) => {
+    const side = activeResizeSide()
+    if (!side) return
+    const startWidth = resizeStartWidth()
+    const clamp = side === "left" ? options.clampLeft : options.clampRight
+    const delta = side === "left" ? clientX - resizeStartX() : resizeStartX() - clientX
+    const nextWidth = clamp(startWidth + delta)
+    applyDrawerWidth(side, nextWidth)
+  }
+
+  function drawerMouseMove(event: MouseEvent) {
+    event.preventDefault()
+    handleDrawerPointerMove(event.clientX)
+  }
+
+  function drawerMouseUp() {
+    stopDrawerResize()
+  }
+
+  function drawerTouchMove(event: TouchEvent) {
+    const touch = event.touches[0]
+    if (!touch) return
+    event.preventDefault()
+    handleDrawerPointerMove(touch.clientX)
+  }
+
+  function drawerTouchEnd() {
+    stopDrawerResize()
+  }
+
+  const drawerPointerDrag = useGlobalPointerDrag({
+    onMouseMove: drawerMouseMove,
+    onMouseUp: drawerMouseUp,
+    onTouchMove: drawerTouchMove,
+    onTouchEnd: drawerTouchEnd,
+  })
+
+  function stopDrawerResize() {
+    setActiveResizeSide(null)
+    drawerPointerDrag.stop()
+  }
+
+  const startDrawerResize = (side: DrawerResizeSide, clientX: number) => {
+    setActiveResizeSide(side)
+    setResizeStartX(clientX)
+    setResizeStartWidth(side === "left" ? options.sessionSidebarWidth() : options.rightDrawerWidth())
+    drawerPointerDrag.start()
+  }
+
+  const handleDrawerResizeMouseDown = (side: DrawerResizeSide) => (event: MouseEvent) => {
+    event.preventDefault()
+    startDrawerResize(side, event.clientX)
+  }
+
+  const handleDrawerResizeTouchStart = (side: DrawerResizeSide) => (event: TouchEvent) => {
+    const touch = event.touches[0]
+    if (!touch) return
+    event.preventDefault()
+    startDrawerResize(side, touch.clientX)
+  }
+
+  onCleanup(() => {
+    stopDrawerResize()
+  })
+
+  return {
+    handleDrawerResizeMouseDown,
+    handleDrawerResizeTouchStart,
+  }
+}

packages/ui/src/components/instance/shell/useGlobalPointerDrag.ts

@@ -0,0 +1,29 @@
+type GlobalPointerDragHandlers = {
+  onMouseMove: (event: MouseEvent) => void
+  onMouseUp: (event: MouseEvent) => void
+  onTouchMove: (event: TouchEvent) => void
+  onTouchEnd: (event: TouchEvent) => void
+}
+
+type GlobalPointerDrag = {
+  start: () => void
+  stop: () => void
+}
+
+export function useGlobalPointerDrag(handlers: GlobalPointerDragHandlers): GlobalPointerDrag {
+  const start = () => {
+    document.addEventListener("mousemove", handlers.onMouseMove)
+    document.addEventListener("mouseup", handlers.onMouseUp)
+    document.addEventListener("touchmove", handlers.onTouchMove, { passive: false })
+    document.addEventListener("touchend", handlers.onTouchEnd)
+  }
+
+  const stop = () => {
+    document.removeEventListener("mousemove", handlers.onMouseMove)
+    document.removeEventListener("mouseup", handlers.onMouseUp)
+    document.removeEventListener("touchmove", handlers.onTouchMove)
+    document.removeEventListener("touchend", handlers.onTouchEnd)
+  }
+
+  return { start, stop }
+}

packages/ui/src/components/instance/shell/useInstanceSessionContext.ts

@@ -0,0 +1,173 @@
+import { batch, createMemo, type Accessor } from "solid-js"
+import type { ToolState } from "@opencode-ai/sdk"
+import type { Session } from "../../../types/session"
+import {
+  activeParentSessionId,
+  activeSessionId as activeSessionMap,
+  getSessionFamily,
+  getSessionInfo,
+  getSessionThreads,
+  sessions,
+  setActiveParentSession,
+  setActiveSession,
+} from "../../../stores/sessions"
+import { messageStoreBus } from "../../../stores/message-v2/bus"
+import { getBackgroundProcesses } from "../../../stores/background-processes"
+import type { LatestTodoSnapshot, SessionUsageState } from "../../../stores/message-v2/types"
+
+type InstanceSessionContextOptions = {
+  instanceId: Accessor<string>
+}
+
+type InstanceSessionContextState = {
+  // Session collections and selections
+  allInstanceSessions: Accessor<Map<string, Session>>
+  sessionThreads: Accessor<ReturnType<typeof getSessionThreads>>
+  activeSessions: Accessor<Map<string, SessionFamilyMember>>
+  activeSessionIdForInstance: Accessor<string | null>
+  parentSessionIdForInstance: Accessor<string | null>
+  activeSessionForInstance: Accessor<SessionFamilyMember | null>
+  activeSessionDiffs: Accessor<SessionFamilyMember["diff"] | undefined>
+
+  // Usage / info summaries
+  activeSessionUsage: Accessor<SessionUsageState | null>
+  activeSessionInfoDetails: Accessor<ReturnType<typeof getSessionInfo> | null>
+  tokenStats: Accessor<{ used: number; avail: number | null }>
+
+  // Todo state
+  latestTodoSnapshot: Accessor<LatestTodoSnapshot | null>
+  latestTodoState: Accessor<ToolState | null>
+
+  // Background processes
+  backgroundProcessList: Accessor<ReturnType<typeof getBackgroundProcesses>>
+
+  // Controller
+  handleSessionSelect: (sessionId: string) => void
+}
+
+type SessionFamilyMember = ReturnType<typeof getSessionFamily>[number]
+
+export function useInstanceSessionContext(options: InstanceSessionContextOptions): InstanceSessionContextState {
+  const messageStore = createMemo(() => messageStoreBus.getOrCreate(options.instanceId()))
+
+  const allInstanceSessions = createMemo<Map<string, Session>>(() => {
+    return sessions().get(options.instanceId()) ?? new Map()
+  })
+
+  const sessionThreads = createMemo(() => getSessionThreads(options.instanceId()))
+
+  const activeSessions = createMemo(() => {
+    const parentId = activeParentSessionId().get(options.instanceId())
+    if (!parentId) return new Map<string, ReturnType<typeof getSessionFamily>[number]>()
+    const sessionFamily = getSessionFamily(options.instanceId(), parentId)
+    return new Map(sessionFamily.map((s) => [s.id, s]))
+  })
+
+  const activeSessionIdForInstance = createMemo(() => {
+    return activeSessionMap().get(options.instanceId()) || null
+  })
+
+  const parentSessionIdForInstance = createMemo(() => {
+    return activeParentSessionId().get(options.instanceId()) || null
+  })
+
+  const activeSessionForInstance = createMemo(() => {
+    const sessionId = activeSessionIdForInstance()
+    if (!sessionId || sessionId === "info") return null
+    return activeSessions().get(sessionId) ?? null
+  })
+
+  const activeSessionDiffs = createMemo(() => {
+    const session = activeSessionForInstance()
+    return session?.diff
+  })
+
+  const activeSessionUsage = createMemo(() => {
+    const sessionId = activeSessionIdForInstance()
+    if (!sessionId) return null
+    const store = messageStore()
+    return store?.getSessionUsage(sessionId) ?? null
+  })
+
+  const activeSessionInfoDetails = createMemo(() => {
+    const sessionId = activeSessionIdForInstance()
+    if (!sessionId) return null
+    return getSessionInfo(options.instanceId(), sessionId) ?? null
+  })
+
+  const tokenStats = createMemo(() => {
+    const usage = activeSessionUsage()
+    const info = activeSessionInfoDetails()
+    return {
+      used: usage?.actualUsageTokens ?? info?.actualUsageTokens ?? 0,
+      avail: info?.contextAvailableTokens ?? null,
+    }
+  })
+
+  const latestTodoSnapshot = createMemo(() => {
+    const sessionId = activeSessionIdForInstance()
+    if (!sessionId || sessionId === "info") return null
+    const store = messageStore()
+    if (!store) return null
+    const snapshot = store.state.latestTodos[sessionId]
+    return snapshot ?? null
+  })
+
+  const latestTodoState = createMemo<ToolState | null>(() => {
+    const snapshot = latestTodoSnapshot()
+    if (!snapshot) return null
+    const store = messageStore()
+    if (!store) return null
+    const message = store.getMessage(snapshot.messageId)
+    if (!message) return null
+    const partRecord = message.parts?.[snapshot.partId]
+    const part = partRecord?.data as { type?: string; tool?: string; state?: ToolState }
+    if (!part || part.type !== "tool" || part.tool !== "todowrite") return null
+    const state = part.state
+    if (!state || state.status !== "completed") return null
+    return state
+  })
+
+  const backgroundProcessList = createMemo(() => getBackgroundProcesses(options.instanceId()))
+
+  const handleSessionSelect = (sessionId: string) => {
+    const instanceId = options.instanceId()
+    if (sessionId === "info") {
+      setActiveSession(instanceId, sessionId)
+      return
+    }
+
+    const session = allInstanceSessions().get(sessionId)
+    if (!session) return
+
+    if (session.parentId === null) {
+      setActiveParentSession(instanceId, sessionId)
+      return
+    }
+
+    const parentId = session.parentId
+    if (!parentId) return
+
+    batch(() => {
+      setActiveParentSession(instanceId, parentId)
+      setActiveSession(instanceId, sessionId)
+    })
+  }
+
+  return {
+    allInstanceSessions,
+    sessionThreads,
+    activeSessions,
+    activeSessionIdForInstance,
+    parentSessionIdForInstance,
+    activeSessionForInstance,
+    activeSessionDiffs,
+    activeSessionUsage,
+    activeSessionInfoDetails,
+    tokenStats,
+    latestTodoSnapshot,
+    latestTodoState,
+    backgroundProcessList,
+    handleSessionSelect,
+  }
+}