Merge branch 'dev' of github.com:NeuralNomadsAI/CodeNomad into dev

Implement shared compact split and unified tool-call diff layout (#270 )
# PR Title Implement shared compact split and unified tool-call diff layout --- Fixes #268 # PR Description ## Summary This PR makes tool-call diffs more compact in both `Unified` and `Split` views by reducing wasted horizontal space in line-number gutters and content indentation. ## What changed - introduced a shared compact-diff framework for tool-call diffs - kept mobile-specific policy limited to: - forcing unified mode below the breakpoint - enabling wrap only in mobile unified mode - added mode-specific compact applicators in the diff viewer: - unified applicator - split applicator - reduced gutter width waste by measuring rendered line-number text and tightening column width around it - removed unnecessary right-side content padding - aligned `+` / `-` markers closer to the left edge across both views - simplified cleanup after gatekeeper review by removing extra plumbing and residue ## Screenshots ### Before <img width="581" height="341" alt="image" src="https://github.com/user-attachments/assets/ec47b256-749a-4afc-8879-aaf33f0b46b6" /> ### After <img width="470" height="586" alt="image" src="https://github.com/user-attachments/assets/7258a5a2-47c4-408d-84bc-1b497761c7ad" /> ## Architectural approach This change intentionally uses: - shared policy in `packages/ui/src/components/tool-call/diff-render.tsx` - shared helper/measurement logic in `packages/ui/src/components/diff-viewer.tsx` - mode-specific applicators where unified and split DOM differ - CSS for shared visual spacing and alignment cleanup The goal was to keep the implementation architecturally clean and avoid building separate duplicated compact-diff features for: - mobile vs desktop - unified vs split Instead, the feature shares one compact-diff concept and only diverges where the upstream diff DOM requires separate handling. ## Files changed - `packages/ui/src/components/tool-call/diff-render.tsx` - `packages/ui/src/components/diff-viewer.tsx` - `packages/ui/src/styles/messaging/tool-call.css` - `packages/ui/src/types/message.ts` ## Validation Manual validation was performed in the running UI. Verified manually: - compact unified gutters on mobile - compact unified gutters on desktop - compact split gutters on desktop - tighter operator alignment in both modes Also verified: - `npm run typecheck` passes ## Notes - This PR is intended to address the compact diff layout problem described in the related issue. - Diff-specific CSS still lives in `tool-call.css`; future extraction into a smaller dedicated stylesheet is possible but not required for this change. --------- Co-authored-by: Shantur Rathore <i@shantur.com>
2026-04-01 23:16:33 +01:00 · 2026-04-01 23:13:32 +01:00 · 2026-04-01 23:11:25 +01:00 · 2026-04-01 22:13:57 +01:00 · 2026-04-01 22:12:28 +01:00 · 2026-04-01 21:35:09 +01:00
41 changed files with 1071 additions and 201 deletions
--- a/.github/workflows/comment-pr-artifacts.yml
+++ b/.github/workflows/comment-pr-artifacts.yml
@@ -4,6 +4,7 @@ on:
  pull_request_target:
    types:
      - opened
+      - edited
      - synchronize
      - reopened
      - ready_for_review
@@ -19,7 +20,7 @@ jobs:
    runs-on: ubuntu-latest
    env:
      ALLOWED_ACTORS: ${{ vars.ALLOWED_NON_DEV_PR_ACTORS }}
-      ACTOR: ${{ github.actor }}
+      PR_AUTHOR: ${{ github.event.pull_request.user.login }}
      BASE_REF: ${{ github.event.pull_request.base.ref }}
      IS_DRAFT: ${{ github.event.pull_request.draft }}
      PR_NUMBER: ${{ github.event.pull_request.number }}
@@ -37,7 +38,7 @@ jobs:
          fi

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

          normalized=",${ALLOWED_ACTORS},"
-          if [[ "$normalized" == *",${ACTOR},"* ]]; then
+          if [[ "$normalized" == *",${PR_AUTHOR},"* ]]; then
            echo "allowed=true" >> "$GITHUB_OUTPUT"
          else
            echo "allowed=false" >> "$GITHUB_OUTPUT"
-            echo "Skipping builds for unauthorized PR targeting $BASE_REF" >&2
+            echo "Skipping builds for PR by unauthorized author targeting $BASE_REF" >&2
          fi

  build:
--- a/.github/workflows/restrict-non-dev-prs.yml
+++ b/.github/workflows/restrict-non-dev-prs.yml
@@ -4,6 +4,7 @@ on:
  pull_request_target:
    types:
      - opened
+      - edited
      - reopened
      - synchronize

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

-## A fast, multi-instance workspace for running OpenCode sessions.
+## The AI Coding Cockpit for OpenCode

-CodeNomad is built for people who live inside OpenCode for hours on end and need a cockpit, not a kiosk. It delivers a premium, low-latency workspace that favors speed, clarity, and direct control.
+CodeNomad transforms OpenCode from a terminal tool into a **premium desktop workspace** — built for developers who live inside AI coding sessions for hours and need control, speed, and clarity.
+
+> OpenCode gives you the engine. CodeNomad gives you the cockpit.

 ![Multi-instance workspace](docs/screenshots/newSession.png)
-_Manage multiple OpenCode sessions side-by-side._

-<details>
-<summary>📸 More Screenshots</summary>
+---

-![Command palette overlay](docs/screenshots/command-palette.png)
-_Global command palette for keyboard-first control._
+## Features

-![Image Previews](docs/screenshots/image-previews.png)
-_Rich media previews for images and assets._
+- **🚀 Multi-Instance Workspace**
+- **🌐 Remote Access**
+- **🧠 Session Management**
+- **🎙️ Voice Input & Speech**
+- **🌳 Git Worktrees**
+- **💬 Rich Message Experience**
+- **⌨️ Command Palette**
+- **📁 File System Browser**
+- **🔐 Authentication & Security**
+- **🔔 Notifications**
+- **🎨 Theming**
+- **🌍 Internationalization**

-![Browser Support](docs/screenshots/browser-support.png)
-_Browser support via CodeNomad Server._
-
-</details>
+---

 ## Getting Started

-Choose the way that fits your workflow:
+### 🖥️ Desktop App

-### 🖥️ Desktop App (Recommended)
-The best experience. A native application (Electron-based) with global shortcuts, deeper system integration, and a dedicated window.
+Available as both Electron and Tauri builds — choose based on your preference.

- **Download**: Grab the latest installer for macOS, Windows, or Linux from the [Releases Page](https://github.com/shantur/CodeNomad/releases).
- **Run**: Install and launch like any other app.
+Download the latest installer for your platform from [Releases](https://github.com/shantur/CodeNomad/releases).

-### 🦀 Tauri App (Experimental)
-We are also working on a lightweight, high-performance version built with [Tauri](https://tauri.app). It is currently in active development.
-
- **Download**: Experimental builds are available on the [Releases Page](https://github.com/shantur/CodeNomad/releases).
- **Source**: Check out `packages/tauri-app` if you're interested in contributing.
+| Platform | Formats |
+|----------|---------|
+| macOS | DMG, ZIP (Universal: Intel + Apple Silicon) |
+| Windows | NSIS Installer, ZIP (x64, ARM64) |
+| Linux | AppImage, deb, tar.gz (x64, ARM64) |

 ### 💻 CodeNomad Server
-Run CodeNomad as a local server and access it via your web browser. Perfect for remote development (SSH/VPN) or running as a service.
+
+Run as a local server and access via browser. Perfect for remote development.

 ```bash
 npx @neuralnomads/codenomad --launch
 ```

-Full server/CLI documentation (flags + env vars, TLS, auth, remote access):
- [packages/server/README.md](packages/server/README.md)
-
-To see all available options:
-
-```bash
-npx @neuralnomads/codenomad --help
-```
+See [Server Documentation](packages/server/README.md) for flags, TLS, auth, and remote access.

 ### 🧪 Dev Releases
-Bleeding-edge builds are published as GitHub pre-releases and are generated automatically from the `dev` branch.
+
+Bleeding-edge builds from the `dev` branch:

 ```bash
 npx @neuralnomads/codenomad-dev --launch
 ```

-## Highlights
-
- **Multi-Instance**: Juggle several OpenCode sessions side-by-side with tabs.
- **Long-Session Native**: Scroll through massive transcripts without hitches.
- **Command Palette**: A single global palette to jump tabs, launch tools, and control everything.
- **Deep Task Awareness**: Monitor background tasks and child sessions without losing flow.
+---

 ## Requirements

- **[OpenCode CLI](https://opencode.ai)**: Must be installed and available in your `PATH`.
- **Node.js 18+**: Required if running the CLI server or building from source.
+- **[OpenCode CLI](https://opencode.ai)** — must be installed and in your `PATH`
+- **Node.js 18+** — for server mode or building from source

-## Troubleshooting
+---

-### macOS says the app is damaged
-If macOS reports that "CodeNomad.app is damaged and can't be opened," Gatekeeper flagged the download because the app is not yet notarized. You can clear the quarantine flag after moving CodeNomad into `/Applications`:
+## Development

-```bash
-xattr -l /Applications/CodeNomad.app
-xattr -dr com.apple.quarantine /Applications/CodeNomad.app
-```
-
-After removing the quarantine attribute, launch the app normally. On Intel Macs you may also need to approve CodeNomad from **System Settings → Privacy & Security** the first time you run it.
-
-### Linux (Wayland + NVIDIA): Tauri AppImage closes immediately
-On some Wayland compositor + NVIDIA driver setups, WebKitGTK can fail to initialize its DMA-BUF/GBM path and the Tauri build may exit right away.
-
-Try running with one of these environment variables:
-
-```bash
-# Most reliable workaround (can reduce rendering performance)
-WEBKIT_DISABLE_DMABUF_RENDERER=1 codenomad
-
-# Alternative for some Wayland setups
-__NV_DISABLE_EXPLICIT_SYNC=1 codenomad
-```
-
-If you're running the Tauri AppImage and want the workaround applied every time, create a tiny wrapper script on your `PATH`:
-
-```bash
-#!/bin/bash
-export WEBKIT_DISABLE_DMABUF_RENDERER=1
-exec ~/.local/share/bauh/appimage/installed/codenomad/CodeNomad-Tauri-0.4.0-linux-x64.AppImage "$@"
-```
-
-Upstream tracking: https://github.com/tauri-apps/tauri/issues/10702
-
-## Architecture & Development
-
-CodeNomad is a monorepo split into specialized packages. If you want to contribute or build from source, check out the individual package documentation:
+CodeNomad is a monorepo built with:

 | Package | Description |
 |---------|-------------|
-| **[packages/electron-app](packages/electron-app/README.md)** | The native desktop application shell. Wraps the UI and Server. |
-| **[packages/server](packages/server/README.md)** | The core logic and CLI. Manages workspaces, proxies OpenCode, and serves the API. |
-| **[packages/ui](packages/ui/README.md)** | The SolidJS-based frontend. Fast, reactive, and beautiful. |
+| **[packages/server](packages/server/README.md)** | Core logic & CLI — workspaces, OpenCode proxy, API, auth, speech |
+| **[packages/ui](packages/ui/README.md)** | SolidJS frontend — reactive, fast, beautiful |
+| **[packages/electron-app](packages/electron-app/README.md)** | Desktop shell — process management, IPC, native dialogs |
+| **[packages/tauri-app](packages/tauri-app)** | Tauri desktop shell (experimental) |

-### Quick Build
-To build the Desktop App from source:
+### Quick Start

-1.  Clone the repo.
-2.  Run `npm install` (requires pnpm or npm 7+ for workspaces).
-3.  Run `npm run build --workspace @neuralnomads/codenomad-electron-app`.
+```bash
+git clone https://github.com/NeuralNomadsAI/CodeNomad.git
+cd CodeNomad
+npm install
+npm run dev
+```

-[![Star History Chart](https://api.star-history.com/svg?repos=NeuralNomadsAI/CodeNomad&type=Date)](https://star-history.com/#NeuralNomadsAI/CodeNomad&Date)
+---

+## Troubleshooting
+
+<details>
+<summary><strong>macOS: "CodeNomad.app is damaged and can't be opened"</strong></summary>
+
+Gatekeeper flag due to missing notarization. Clear the quarantine attribute:
+
+```bash
+xattr -dr com.apple.quarantine /Applications/CodeNomad.app
+```
+
+On Intel Macs, also check **System Settings → Privacy & Security** on first launch.
+</details>
+
+<details>
+<summary><strong>Linux (Wayland + NVIDIA): Tauri App closes immediately</strong></summary>
+
+WebKitGTK DMA-BUF/GBM issue. Run with:
+
+```bash
+WEBKIT_DISABLE_DMABUF_RENDERER=1 codenomad
+```
+
+See full workaround in the original README.
+</details>
+
+---
+
+## Community
+
+[![Star History](https://api.star-history.com/svg?repos=NeuralNomadsAI/CodeNomad&type=Date)](https://star-history.com/#NeuralNomadsAI/CodeNomad&Date)
+
+---
+
+**Built with ♥ by [Neural Nomads](https://github.com/NeuralNomadsAI)** · [MIT License](LICENSE)
--- a/docs/screenshots/browser-support.png
+++ b/docs/screenshots/browser-support.png
--- a/docs/screenshots/command-palette.png
+++ b/docs/screenshots/command-palette.png
--- a/docs/screenshots/image-previews.png
+++ b/docs/screenshots/image-previews.png
--- a/docs/screenshots/newSession.png
+++ b/docs/screenshots/newSession.png
--- a/packages/cloudflare/src/index.ts
+++ b/packages/cloudflare/src/index.ts
@@ -4,6 +4,23 @@ export interface Env {

 export default {
  async fetch(request: Request, env: Env): Promise<Response> {
+    const url = new URL(request.url)
+
+    if (url.pathname === "/version.json") {
+      const response = await env.ASSETS.fetch(request)
+
+      const newHeaders = new Headers(response.headers)
+      newHeaders.set("Cache-Control", "no-store, no-cache, must-revalidate, proxy-revalidate")
+      newHeaders.set("Pragma", "no-cache")
+      newHeaders.set("Expires", "0")
+
+      return new Response(response.body, {
+        status: response.status,
+        statusText: response.statusText,
+        headers: newHeaders,
+      })
+    }
+
    return env.ASSETS.fetch(request)
  },
 }
--- a/packages/electron-app/electron/main/main.ts
+++ b/packages/electron-app/electron/main/main.ts
@@ -328,7 +328,6 @@ function finalizeCliSwap(url: string) {
  mainWindow.loadURL(url).catch((error) => console.error("[cli] failed to load CLI view:", error))
 }

-const SESSION_COOKIE_NAME = "codenomad_session"
 let bootstrapExchangeInFlight = false

 function extractCookieValue(setCookieHeader: string | string[] | undefined, name: string): string | null {
@@ -351,6 +350,7 @@ function extractCookieValue(setCookieHeader: string | string[] | undefined, name
 }

 async function exchangeBootstrapToken(baseUrl: string, token: string): Promise<boolean> {
+  const sessionCookieName = cliManager.getAuthCookieName()
  const target = new URL("/api/auth/token", baseUrl)
  const body = JSON.stringify({ token })

@@ -381,14 +381,14 @@ async function exchangeBootstrapToken(baseUrl: string, token: string): Promise<b
    return false
  }

-  const sessionId = extractCookieValue(result.setCookie, SESSION_COOKIE_NAME)
+  const sessionId = extractCookieValue(result.setCookie, sessionCookieName)
  if (!sessionId) {
    return false
  }

  await session.defaultSession.cookies.set({
    url: baseUrl,
-    name: SESSION_COOKIE_NAME,
+    name: sessionCookieName,
    value: sessionId,
    httpOnly: true,
    path: "/",
--- a/packages/electron-app/electron/main/process-manager.ts
+++ b/packages/electron-app/electron/main/process-manager.ts
@@ -14,6 +14,7 @@ const mainFilename = fileURLToPath(import.meta.url)
 const mainDirname = path.dirname(mainFilename)

 const BOOTSTRAP_TOKEN_PREFIX = "CODENOMAD_BOOTSTRAP_TOKEN:"
+const SESSION_COOKIE_NAME_PREFIX = "codenomad_session"

 type CliState = "starting" | "ready" | "error" | "stopped"
 type ListeningMode = "local" | "all"
@@ -129,6 +130,7 @@ export class CliProcessManager extends EventEmitter {
  private stdoutBuffer = ""
  private stderrBuffer = ""
  private bootstrapToken: string | null = null
+  private authCookieName = `${SESSION_COOKIE_NAME_PREFIX}_${process.pid}_${Date.now()}`
  private requestedStop = false

  async start(options: StartOptions): Promise<CliStatus> {
@@ -139,6 +141,7 @@ export class CliProcessManager extends EventEmitter {
    this.stdoutBuffer = ""
    this.stderrBuffer = ""
    this.bootstrapToken = null
+    this.authCookieName = `${SESSION_COOKIE_NAME_PREFIX}_${process.pid}_${Date.now()}`
    this.requestedStop = false
    this.updateStatus({ state: "starting", port: undefined, pid: undefined, url: undefined, error: undefined })

@@ -436,6 +439,10 @@ export class CliProcessManager extends EventEmitter {
    return { ...this.status }
  }

+  getAuthCookieName(): string {
+    return this.authCookieName
+  }
+
  private resolveListeningMode(): ListeningMode {
    return readListeningModeFromConfig()
  }
@@ -532,7 +539,7 @@ export class CliProcessManager extends EventEmitter {
  }

  private buildCliArgs(options: StartOptions, host: string): string[] {
-    const args = ["serve", "--host", host, "--generate-token"]
+    const args = ["serve", "--host", host, "--generate-token", "--auth-cookie-name", this.authCookieName]

    if (options.dev) {
      // Dev: run plain HTTP + Vite dev server proxy.
--- a/packages/server/src/auth/manager.ts
+++ b/packages/server/src/auth/manager.ts
@@ -16,16 +16,18 @@ export interface AuthManagerInit {
  password?: string
  generateToken: boolean
  dangerouslySkipAuth?: boolean
+  cookieName?: string
 }

 export class AuthManager {
  private readonly authStore: AuthStore | null
  private readonly tokenManager: TokenManager | null
  private readonly sessionManager = new SessionManager()
-  private readonly cookieName = DEFAULT_AUTH_COOKIE_NAME
+  private readonly cookieName: string
  private readonly authEnabled: boolean

  constructor(private readonly init: AuthManagerInit, private readonly logger: Logger) {
+    this.cookieName = sanitizeCookieName(init.cookieName)
    this.authEnabled = !Boolean(init.dangerouslySkipAuth)

    if (!this.authEnabled) {
@@ -139,6 +141,16 @@ export class AuthManager {
  }
 }

+function sanitizeCookieName(value: string | undefined): string {
+  const trimmed = value?.trim()
+  if (!trimmed) {
+    return DEFAULT_AUTH_COOKIE_NAME
+  }
+
+  const sanitized = trimmed.replace(/[^A-Za-z0-9_-]/g, "_")
+  return sanitized.length > 0 ? sanitized : DEFAULT_AUTH_COOKIE_NAME
+}
+
 function resolveAuthFilePath(configPath: string) {
  const resolvedConfigPath = resolvePath(configPath)
  return path.join(path.dirname(resolvedConfigPath), "auth.json")
--- a/packages/server/src/index.ts
+++ b/packages/server/src/index.ts
@@ -19,9 +19,9 @@ import { InstanceEventBridge } from "./workspaces/instance-events"
 import { createLogger } from "./logger"
 import { launchInBrowser } from "./launcher"
 import { resolveUi } from "./ui/remote-ui"
-import { AuthManager, BOOTSTRAP_TOKEN_STDOUT_PREFIX, DEFAULT_AUTH_USERNAME } from "./auth/manager"
+import { AuthManager, BOOTSTRAP_TOKEN_STDOUT_PREFIX, DEFAULT_AUTH_COOKIE_NAME, DEFAULT_AUTH_USERNAME } from "./auth/manager"
 import { resolveHttpsOptions } from "./server/tls"
-import { resolveNetworkAddresses } from "./server/network-addresses"
+import { resolveNetworkAddresses, resolveRemoteAddresses } from "./server/network-addresses"
 import { startDevReleaseMonitor } from "./releases/dev-release-monitor"
 import { SpeechService } from "./speech/service"

@@ -55,6 +55,7 @@ interface CliOptions {
  launch: boolean
  authUsername: string
  authPassword?: string
+  authCookieName: string
  generateToken: boolean
  dangerouslySkipAuth: boolean
 }
@@ -100,6 +101,11 @@ function parseCliOptions(argv: string[]): CliOptions {
        .default(DEFAULT_AUTH_USERNAME),
    )
    .addOption(new Option("--password <password>", "Password for server authentication").env("CODENOMAD_SERVER_PASSWORD"))
+    .addOption(
+      new Option("--auth-cookie-name <name>", "Cookie name for server authentication")
+        .env("CODENOMAD_AUTH_COOKIE_NAME")
+        .default(DEFAULT_AUTH_COOKIE_NAME),
+    )
    .addOption(
      new Option("--generate-token", "Emit a one-time bootstrap token for desktop")
        .env("CODENOMAD_GENERATE_TOKEN")
@@ -139,6 +145,7 @@ function parseCliOptions(argv: string[]): CliOptions {
    launch?: boolean
    username: string
    password?: string
+    authCookieName: string
    generateToken?: boolean
    dangerouslySkipAuth?: boolean
  }>()
@@ -185,6 +192,7 @@ function parseCliOptions(argv: string[]): CliOptions {
    launch: Boolean(parsed.launch),
    authUsername: parsed.username,
    authPassword: parsed.password,
+    authCookieName: parsed.authCookieName,
    generateToken: Boolean(parsed.generateToken),
    dangerouslySkipAuth: Boolean(parsed.dangerouslySkipAuth),
  }
@@ -266,6 +274,7 @@ async function main() {
      configPath: configLocation.configYamlPath,
      username: options.authUsername,
      password: options.authPassword,
+      cookieName: options.authCookieName,
      generateToken: options.generateToken,
      dangerouslySkipAuth: options.dangerouslySkipAuth,
    },
@@ -442,18 +451,22 @@ async function main() {
  // which can lead clients to talk to the wrong process.
  const localUrl = `${localProtocol}://127.0.0.1:${localStart.port}`
  let remoteUrl: string | undefined
+  let remoteAddresses = [] as ReturnType<typeof resolveNetworkAddresses>
  if (remoteStart) {
    const wantsAll = options.host === "0.0.0.0" || !isLoopbackHost(options.host)
    let remoteHost = options.host
    if (wantsAll) {
      if (options.host === "0.0.0.0") {
-        const candidates = resolveNetworkAddresses({ host: options.host, protocol: remoteProtocol, port: remoteStart.port })
-        remoteHost = candidates.find((addr) => addr.scope === "external")?.ip ?? "localhost"
+        const resolved = resolveRemoteAddresses({ host: options.host, protocol: remoteProtocol, port: remoteStart.port })
+        remoteAddresses = resolved.userVisible
+        remoteUrl = resolved.primaryRemoteUrl ?? `${remoteProtocol}://localhost:${remoteStart.port}`
      }
    } else {
      remoteHost = "localhost"
    }
-    remoteUrl = `${remoteProtocol}://${remoteHost}:${remoteStart.port}`
+    if (!remoteUrl) {
+      remoteUrl = `${remoteProtocol}://${remoteHost}:${remoteStart.port}`
+    }
  }

  serverMeta.localUrl = localUrl
@@ -464,7 +477,9 @@ async function main() {
  serverMeta.listeningMode = options.host === "0.0.0.0" || !isLoopbackHost(options.host) ? "all" : "local"

  if (serverMeta.remotePort && remoteUrl) {
-    serverMeta.addresses = resolveNetworkAddresses({ host: options.host, protocol: remoteProtocol, port: serverMeta.remotePort })
+    serverMeta.addresses = remoteAddresses.length
+      ? remoteAddresses
+      : resolveNetworkAddresses({ host: options.host, protocol: remoteProtocol, port: serverMeta.remotePort })
  } else {
    serverMeta.addresses = []
  }
@@ -472,6 +487,16 @@ async function main() {
  console.log(`Local Connection URL : ${serverMeta.localUrl}`)
  if (serverMeta.remoteUrl) {
    console.log(`Remote Connection URL : ${serverMeta.remoteUrl}`)
+    const additionalRemoteUrls = serverMeta.addresses
+      .map((addr) => addr.remoteUrl)
+      .filter((url) => url !== serverMeta.remoteUrl)
+
+    if (additionalRemoteUrls.length > 0) {
+      console.log("Other Accessible URLs:")
+      for (const url of additionalRemoteUrls) {
+        console.log(`  - ${url}`)
+      }
+    }
  }

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

+export interface ResolvedRemoteAddresses {
+  all: NetworkAddress[]
+  userVisible: NetworkAddress[]
+  primaryRemoteUrl?: string
+}
+
 export function resolveNetworkAddresses(args: {
  host: string
  protocol: "http" | "https"
@@ -58,10 +64,57 @@ export function resolveNetworkAddresses(args: {
  return results.sort((a, b) => {
    const scopeDelta = scopeWeight[a.scope] - scopeWeight[b.scope]
    if (scopeDelta !== 0) return scopeDelta
-    return a.ip.localeCompare(b.ip)
+
+    return 0
  })
 }

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

 interface RouteDeps {
  serverMeta: ServerMeta
@@ -13,14 +13,12 @@ export function registerMetaRoutes(app: FastifyInstance, deps: RouteDeps) {
 function buildMetaResponse(meta: ServerMeta): ServerMeta {
  const localPort = resolveLocalPort(meta)
  const remote = resolveRemote(meta)
-  const addresses = remote && remote.port > 0 ? resolveNetworkAddresses({ host: meta.host, protocol: remote.protocol, port: remote.port }) : []

  return {
    ...meta,
    localPort,
    remotePort: remote?.port,
    listeningMode: meta.host === "0.0.0.0" || !isLoopbackHost(meta.host) ? "all" : "local",
-    addresses,
  }
 }

--- a/packages/tauri-app/src-tauri/src/cli_manager.rs
+++ b/packages/tauri-app/src-tauri/src/cli_manager.rs
@@ -16,7 +16,7 @@ use std::process::{Child, Command, Stdio};
 use std::sync::atomic::{AtomicBool, Ordering};
 use std::sync::Arc;
 use std::thread;
-use std::time::{Duration, Instant};
+use std::time::{Duration, Instant, SystemTime, UNIX_EPOCH};
 use tauri::{webview::cookie::Cookie, AppHandle, Emitter, Manager, Url};

 #[cfg(windows)]
@@ -48,7 +48,7 @@ fn workspace_root() -> Option<PathBuf> {
    })
 }

-const SESSION_COOKIE_NAME: &str = "codenomad_session";
+const SESSION_COOKIE_NAME_PREFIX: &str = "codenomad_session";

 const CLI_STOP_GRACE_SECS: u64 = 30;
 #[cfg(windows)]
@@ -124,7 +124,11 @@ fn extract_cookie_value(set_cookie: &str, name: &str) -> Option<String> {
    Some(value.to_string())
 }

-fn exchange_bootstrap_token(base_url: &str, token: &str) -> anyhow::Result<Option<String>> {
+fn exchange_bootstrap_token(
+    base_url: &str,
+    token: &str,
+    cookie_name: &str,
+) -> anyhow::Result<Option<String>> {
    let parsed = Url::parse(base_url)?;
    let host = parsed.host_str().unwrap_or("127.0.0.1");
    let port = parsed.port_or_known_default().unwrap_or(80);
@@ -159,11 +163,11 @@ fn exchange_bootstrap_token(base_url: &str, token: &str) -> anyhow::Result<Optio
    for line in lines {
        // handle case-insensitive header name
        if let Some(value) = line.strip_prefix("Set-Cookie:") {
-            if let Some(session_id) = extract_cookie_value(value.trim(), SESSION_COOKIE_NAME) {
+            if let Some(session_id) = extract_cookie_value(value.trim(), cookie_name) {
                return Ok(Some(session_id));
            }
        } else if let Some(value) = line.strip_prefix("set-cookie:") {
-            if let Some(session_id) = extract_cookie_value(value.trim(), SESSION_COOKIE_NAME) {
+            if let Some(session_id) = extract_cookie_value(value.trim(), cookie_name) {
                return Ok(Some(session_id));
            }
        }
@@ -172,11 +176,16 @@ fn exchange_bootstrap_token(base_url: &str, token: &str) -> anyhow::Result<Optio
    Ok(None)
 }

-fn set_session_cookie(app: &AppHandle, base_url: &str, session_id: &str) -> anyhow::Result<()> {
+fn set_session_cookie(
+    app: &AppHandle,
+    base_url: &str,
+    cookie_name: &str,
+    session_id: &str,
+) -> anyhow::Result<()> {
    let parsed = Url::parse(base_url)?;
    let domain = parsed.host_str().unwrap_or("127.0.0.1").to_string();

-    let cookie = Cookie::build((SESSION_COOKIE_NAME, session_id))
+    let cookie = Cookie::build((cookie_name.to_string(), session_id.to_string()))
        .domain(domain)
        .path("/")
        .http_only(true)
@@ -190,6 +199,16 @@ fn set_session_cookie(app: &AppHandle, base_url: &str, session_id: &str) -> anyh
    Ok(())
 }

+fn generate_auth_cookie_name() -> String {
+    let pid = std::process::id();
+    let timestamp = SystemTime::now()
+        .duration_since(UNIX_EPOCH)
+        .map(|duration| duration.as_millis())
+        .unwrap_or(0);
+
+    format!("{SESSION_COOKIE_NAME_PREFIX}_{pid}_{timestamp}")
+}
+
 const DEFAULT_CONFIG_PATH: &str = "~/.config/codenomad/config.json";

 #[derive(Debug, Deserialize)]
@@ -503,7 +522,8 @@ impl CliProcessManager {
            "resolved CLI entry runner={:?} entry={} host={}",
            resolution.runner, resolution.entry, host
        ));
-        let args = resolution.build_args(dev, &host);
+        let auth_cookie_name = Arc::new(generate_auth_cookie_name());
+        let args = resolution.build_args(dev, &host, auth_cookie_name.as_str());
        log_line(&format!("CLI args: {:?}", args));
        if dev {
            log_line("development mode: will prefer tsx + source if present");
@@ -584,6 +604,7 @@ impl CliProcessManager {
        let app_clone = app.clone();
        let ready_clone = ready.clone();
        let token_clone = bootstrap_token.clone();
+        let auth_cookie_name_clone = auth_cookie_name.clone();

        thread::spawn(move || {
            let stdout = child_clone
@@ -605,6 +626,7 @@ impl CliProcessManager {
                    &status_clone,
                    &ready_clone,
                    &token_clone,
+                    auth_cookie_name_clone.as_str(),
                );
            }
            if let Some(reader) = stderr {
@@ -615,6 +637,7 @@ impl CliProcessManager {
                    &status_clone,
                    &ready_clone,
                    &token_clone,
+                    auth_cookie_name_clone.as_str(),
                );
            }
        });
@@ -731,6 +754,7 @@ impl CliProcessManager {
        status: &Arc<Mutex<CliStatus>>,
        ready: &Arc<AtomicBool>,
        bootstrap_token: &Arc<Mutex<Option<String>>>,
+        auth_cookie_name: &str,
    ) {
        let mut buffer = String::new();
        let local_url_regex = Regex::new(r"^Local\s+Connection\s+URL\s*:\s*(https?://\S+)").ok();
@@ -766,7 +790,14 @@ impl CliProcessManager {
                            .and_then(|re| re.captures(line).and_then(|c| c.get(1)))
                            .map(|m| m.as_str().to_string())
                        {
-                            Self::mark_ready(app, status, ready, bootstrap_token, url);
+                            Self::mark_ready(
+                                app,
+                                status,
+                                ready,
+                                bootstrap_token,
+                                auth_cookie_name,
+                                url,
+                            );
                            continue;
                        }

@@ -781,6 +812,7 @@ impl CliProcessManager {
                                    status,
                                    ready,
                                    bootstrap_token,
+                                    auth_cookie_name,
                                    format!("http://localhost:{port}"),
                                );
                                continue;
@@ -793,6 +825,7 @@ impl CliProcessManager {
                                        status,
                                        ready,
                                        bootstrap_token,
+                                        auth_cookie_name,
                                        format!("http://localhost:{}", port),
                                    );
                                    continue;
@@ -811,6 +844,7 @@ impl CliProcessManager {
        status: &Arc<Mutex<CliStatus>>,
        ready: &Arc<AtomicBool>,
        bootstrap_token: &Arc<Mutex<Option<String>>>,
+        auth_cookie_name: &str,
        base_url: String,
    ) {
        ready.store(true, Ordering::SeqCst);
@@ -834,9 +868,11 @@ impl CliProcessManager {
            if scheme.as_deref() != Some("http") {
                navigate_main(app, &base_url);
            } else {
-                match exchange_bootstrap_token(&base_url, &token) {
+                match exchange_bootstrap_token(&base_url, &token, &auth_cookie_name) {
                    Ok(Some(session_id)) => {
-                        if let Err(err) = set_session_cookie(app, &base_url, &session_id) {
+                        if let Err(err) =
+                            set_session_cookie(app, &base_url, &auth_cookie_name, &session_id)
+                        {
                            log_line(&format!("failed to set session cookie: {err}"));
                            navigate_main(app, &format!("{base_url}/login"));
                        } else {
@@ -932,11 +968,13 @@ impl CliEntry {
        ))
    }

-    fn build_args(&self, dev: bool, host: &str) -> Vec<String> {
+    fn build_args(&self, dev: bool, host: &str, auth_cookie_name: &str) -> Vec<String> {
        let mut args = vec![
            "serve".to_string(),
            "--host".to_string(),
            host.to_string(),
+            "--auth-cookie-name".to_string(),
+            auth_cookie_name.to_string(),
            "--generate-token".to_string(),
        ];

--- a/packages/ui/src/components/diff-viewer.tsx
+++ b/packages/ui/src/components/diff-viewer.tsx
@@ -1,4 +1,4 @@
-import { createMemo, Show, createEffect, onCleanup } from "solid-js"
+import { createMemo, Show, createEffect } from "solid-js"
 import { DiffView, DiffModeEnum } from "@git-diff-view/solid"
 import "@git-diff-view/solid/styles/diff-view-pure.css"
 import { disableCache } from "@git-diff-view/core"
@@ -20,6 +20,7 @@ interface ToolCallDiffViewerProps {
  filePath?: string
  theme: "light" | "dark"
  mode: DiffViewMode
+  wrap?: boolean
  onRendered?: () => void
  cachedHtml?: string
  cacheEntryParams?: CacheEntryParams
@@ -31,11 +32,183 @@ type DiffData = {
  hunks: string[]
 }

-type CaptureContext = {
-  theme: ToolCallDiffViewerProps["theme"]
-  mode: DiffViewMode
-  diffText: string
-  cacheEntryParams?: CacheEntryParams
+function measureTextWidth(container: HTMLElement, text: string, source: HTMLElement) {
+  const computed = window.getComputedStyle(source)
+  const probe = document.createElement("span")
+  probe.textContent = text || ""
+  probe.style.position = "absolute"
+  probe.style.visibility = "hidden"
+  probe.style.pointerEvents = "none"
+  probe.style.display = "inline-block"
+  probe.style.width = "auto"
+  probe.style.maxWidth = "none"
+  probe.style.whiteSpace = "nowrap"
+  probe.style.fontFamily = computed.fontFamily
+  probe.style.fontSize = computed.fontSize
+  probe.style.fontWeight = computed.fontWeight
+  probe.style.fontStyle = computed.fontStyle
+  probe.style.letterSpacing = computed.letterSpacing
+  probe.style.fontVariant = computed.fontVariant
+  probe.style.textTransform = computed.textTransform
+  probe.style.lineHeight = computed.lineHeight
+  container.appendChild(probe)
+  const width = Math.ceil(probe.getBoundingClientRect().width)
+  probe.remove()
+  return width
+}
+
+function computeCompactWidth(
+  container: HTMLElement,
+  entries: Array<{ text: string; source: HTMLElement }>,
+  maxWidthPx = 40,
+) {
+  const measuredLabelWidthPx = entries.reduce((max, entry) => {
+    return Math.max(max, measureTextWidth(container, entry.text, entry.source))
+  }, 0)
+  const fallbackTextLength = entries.reduce((max, entry) => Math.max(max, entry.text.length), 1)
+  const fallbackWidthPx = Math.round(fallbackTextLength * 7 + 4)
+  return Math.max(2, Math.min(maxWidthPx, measuredLabelWidthPx > 0 ? measuredLabelWidthPx + 2 : fallbackWidthPx))
+}
+
+function applyCompactUnifiedGutter(container: HTMLElement, wrap: boolean) {
+  const tableWrapper = container.querySelector<HTMLElement>(".unified-diff-table-wrapper")
+  const table = container.querySelector<HTMLTableElement>(".unified-diff-table")
+  const numberCol = container.querySelector<HTMLTableColElement>(".unified-diff-table-num-col")
+  const gutterRows = container.querySelectorAll<HTMLElement>(".diff-line-num")
+  const hunkGutters = container.querySelectorAll<HTMLElement>(".diff-line-hunk-action, .diff-line-widget-wrapper, .diff-line-extend-wrapper")
+  const entries: Array<{ gutter: HTMLElement; label: HTMLElement; text: string }> = []
+
+  if (table) {
+    if (wrap) {
+      table.classList.add("table-fixed")
+      table.style.tableLayout = "fixed"
+      table.style.width = "100%"
+      table.style.minWidth = "100%"
+    } else {
+      table.classList.remove("table-fixed")
+      table.style.tableLayout = "auto"
+      table.style.width = "max-content"
+      table.style.minWidth = "100%"
+    }
+  }
+
+  gutterRows.forEach((gutter) => {
+    const oldSpan = gutter.querySelector<HTMLElement>("[data-line-old-num]")
+    const newSpan = gutter.querySelector<HTMLElement>("[data-line-new-num]")
+    const spacer = gutter.querySelector<HTMLElement>(".shrink-0")
+    const flexWrapper = gutter.querySelector<HTMLElement>(":scope > .flex")
+    const currentLabel = gutter.querySelector<HTMLElement>(":scope > .tool-call-diff-compact-line-number")
+
+    const oldText = oldSpan?.textContent?.trim() ?? ""
+    const newText = newSpan?.textContent?.trim() ?? ""
+    const hasUsableNew = newText.length > 0 && newText !== "0"
+    const hasUsableOld = oldText.length > 0 && oldText !== "0"
+    const visibleText = hasUsableNew ? newText : hasUsableOld ? oldText : newText || oldText
+
+    if (flexWrapper) flexWrapper.style.display = "none"
+    if (spacer) spacer.style.display = "none"
+    if (oldSpan) { oldSpan.style.display = "none"; oldSpan.style.width = "auto" }
+    if (newSpan) { newSpan.style.display = "none"; newSpan.style.width = "auto" }
+
+    gutter.style.paddingLeft = "1px"
+    gutter.style.paddingRight = "1px"
+    gutter.style.textAlign = "left"
+
+    const label = currentLabel ?? document.createElement("span")
+    label.className = "tool-call-diff-compact-line-number"
+    label.textContent = visibleText
+    label.setAttribute("aria-hidden", visibleText ? "false" : "true")
+    if (!currentLabel) gutter.appendChild(label)
+
+    entries.push({ gutter, label, text: visibleText })
+  })
+
+  const gutterWidthPx = computeCompactWidth(container, entries.map((entry) => ({ text: entry.text, source: entry.label })))
+  const gutterWidth = `${gutterWidthPx}px`
+  const compactAsideWidth = `${Math.max(8, gutterWidthPx - 10)}px`
+
+  if (tableWrapper) {
+    tableWrapper.style.setProperty("--diff-aside-width", compactAsideWidth)
+    tableWrapper.style.setProperty("--diff-aside-width--", compactAsideWidth)
+  }
+  if (numberCol) {
+    numberCol.style.width = gutterWidth
+  }
+
+  entries.forEach(({ gutter, label }) => {
+    gutter.style.width = gutterWidth
+    gutter.style.minWidth = gutterWidth
+    gutter.style.maxWidth = gutterWidth
+    label.style.width = "auto"
+    label.style.maxWidth = "none"
+  })
+
+  hunkGutters.forEach((gutter) => {
+    gutter.style.width = gutterWidth
+    gutter.style.minWidth = gutterWidth
+    gutter.style.maxWidth = gutterWidth
+    gutter.style.paddingLeft = "0"
+    gutter.style.paddingRight = "0"
+  })
+}
+
+function applyCompactSplitGutter(container: HTMLElement) {
+  const oldWrapper = container.querySelector<HTMLElement>(".old-diff-table-wrapper")
+  const newWrapper = container.querySelector<HTMLElement>(".new-diff-table-wrapper")
+  const numberCells = Array.from(container.querySelectorAll<HTMLElement>(".diff-line-old-num, .diff-line-new-num"))
+  const hunkActions = Array.from(container.querySelectorAll<HTMLElement>(".diff-line-hunk-action, .diff-line-widget-wrapper, .diff-line-extend-wrapper"))
+  const numberSpans = numberCells
+    .map((cell) => ({ cell, span: cell.querySelector<HTMLElement>("[data-line-num]") }))
+    .filter((entry): entry is { cell: HTMLElement; span: HTMLElement } => Boolean(entry.span))
+
+  const gutterWidthPx = computeCompactWidth(
+    container,
+    numberSpans.map(({ span }) => ({ text: span.textContent?.trim() ?? "", source: span })),
+    64,
+  )
+  const gutterWidth = `${gutterWidthPx}px`
+
+  ;[oldWrapper, newWrapper].forEach((wrapper) => {
+    if (wrapper) {
+      wrapper.style.setProperty("--diff-aside-width", gutterWidth)
+    }
+  })
+
+  numberCells.forEach((cell) => {
+    cell.style.width = gutterWidth
+    cell.style.minWidth = gutterWidth
+    cell.style.maxWidth = gutterWidth
+    cell.style.paddingLeft = "2px"
+    cell.style.paddingRight = "2px"
+    cell.style.textAlign = "left"
+    cell.style.whiteSpace = "nowrap"
+    cell.style.overflowWrap = "normal"
+    cell.style.wordBreak = "normal"
+  })
+
+  numberSpans.forEach(({ span }) => {
+    span.style.whiteSpace = "nowrap"
+    span.style.overflowWrap = "normal"
+    span.style.wordBreak = "normal"
+  })
+
+  hunkActions.forEach((cell) => {
+    cell.style.width = gutterWidth
+    cell.style.minWidth = gutterWidth
+    cell.style.maxWidth = gutterWidth
+    cell.style.paddingLeft = "0"
+    cell.style.paddingRight = "0"
+  })
+}
+
+function applyCompactDiffLayout(container: HTMLElement, mode: DiffViewMode, wrap = false) {
+  if (mode === "unified") {
+    applyCompactUnifiedGutter(container, wrap)
+    return
+  }
+  if (mode === "split") {
+    applyCompactSplitGutter(container)
+  }
 }

 export function ToolCallDiffViewer(props: ToolCallDiffViewerProps) {
@@ -67,12 +240,15 @@ export function ToolCallDiffViewer(props: ToolCallDiffViewerProps) {
  const contextKey = createMemo(() => {
    const data = diffData()
    if (!data) return ""
-    return `${props.theme}|${props.mode}|${props.diffText}`
+    return `${props.theme}|${props.mode}|${props.wrap ? "wrap" : "nowrap"}|${props.diffText}`
  })
 
  createEffect(() => {
    const cachedHtml = props.cachedHtml
    if (cachedHtml) {
+      if (diffContainerRef) {
+        applyCompactDiffLayout(diffContainerRef, props.mode, Boolean(props.wrap))
+      }
      // When we are given cached HTML, we rely on the caller's cache
      // and simply notify once rendered.
      props.onRendered?.()
@@ -83,9 +259,10 @@ export function ToolCallDiffViewer(props: ToolCallDiffViewerProps) {
    if (!key) return
    if (!diffContainerRef) return
    if (lastCapturedKey === key) return
- 
+
    requestAnimationFrame(() => {
      if (!diffContainerRef) return
+      applyCompactDiffLayout(diffContainerRef, props.mode, Boolean(props.wrap))
      const markup = diffContainerRef.innerHTML
      if (!markup) return
      lastCapturedKey = key
@@ -95,6 +272,7 @@ export function ToolCallDiffViewer(props: ToolCallDiffViewerProps) {
          html: markup,
          theme: props.theme,
          mode: props.mode,
+          wrap: props.wrap,
        })
      }
      props.onRendered?.()
@@ -122,7 +300,7 @@ export function ToolCallDiffViewer(props: ToolCallDiffViewerProps) {
                    diffViewMode={props.mode === "split" ? DiffModeEnum.Split : DiffModeEnum.Unified}
                    diffViewTheme={props.theme}
                    diffViewHighlight
-                    diffViewWrap={false}
+                    diffViewWrap={Boolean(props.wrap)}
                    diffViewFontSize={13}
                  />
                </ErrorBoundary>
@@ -131,7 +309,7 @@ export function ToolCallDiffViewer(props: ToolCallDiffViewerProps) {
          </div>
        }
      >
-        <div innerHTML={props.cachedHtml} />
+        <div ref={diffContainerRef} innerHTML={props.cachedHtml} />
      </Show>
    </div>
  )
--- a/packages/ui/src/components/remote-access-overlay.tsx
+++ b/packages/ui/src/components/remote-access-overlay.tsx
@@ -2,7 +2,7 @@ import { Dialog } from "@kobalte/core/dialog"
 import { Switch } from "@kobalte/core/switch"
 import { For, Show, createEffect, createMemo, createSignal } from "solid-js"
 import { toDataURL } from "qrcode"
-import { ExternalLink, Link2, Loader2, RefreshCw, Shield, Wifi } from "lucide-solid"
+import { ChevronDown, ExternalLink, Link2, Loader2, RefreshCw, Shield, Wifi } from "lucide-solid"
 import type { NetworkAddress, ServerMeta } from "../../../server/src/api-types"
 import { serverApi } from "../lib/api-client"
 import { restartCli } from "../lib/native/cli"
@@ -10,6 +10,7 @@ import { serverSettings, setListeningMode } from "../stores/preferences"
 import { showConfirmDialog } from "../stores/alerts"
 import { getLogger } from "../lib/logger"
 import { useI18n } from "../lib/i18n"
+import { splitRemoteAddresses, type RemoteAddressGroups } from "../lib/remote-access-addresses"
 const log = getLogger("actions")


@@ -32,17 +33,17 @@ export function RemoteAccessOverlay(props: RemoteAccessOverlayProps) {
  const [passwordConfirm, setPasswordConfirm] = createSignal("")
  const [passwordError, setPasswordError] = createSignal<string | null>(null)
  const [savingPassword, setSavingPassword] = createSignal(false)
+  const [showAllAddresses, setShowAllAddresses] = createSignal(false)

  const addresses = createMemo<NetworkAddress[]>(() => meta()?.addresses ?? [])
  const currentMode = createMemo(() => meta()?.listeningMode ?? serverSettings().listeningMode)
  const allowExternalConnections = createMemo(() => currentMode() === "all")
-  const displayAddresses = createMemo(() => {
+  const displayAddresses = createMemo<RemoteAddressGroups>(() => {
    const list = addresses()
    if (!allowExternalConnections()) {
-      return []
+      return { recommended: null, hidden: [] }
    }
-    // Local URL is displayed separately; list only remote-friendly addresses.
-    return list.filter((address) => address.scope !== "loopback")
+    return splitRemoteAddresses(list)
  })

  const refreshMeta = async () => {
@@ -53,6 +54,7 @@ export function RemoteAccessOverlay(props: RemoteAccessOverlayProps) {
      const [metaResult, authResult] = await Promise.all([serverApi.fetchServerMeta(), serverApi.fetchAuthStatus()])
      setMeta(metaResult)
      setAuthStatus(authResult)
+      setShowAllAddresses(false)
    } catch (err) {
      setError(err instanceof Error ? err.message : String(err))
    } finally {
@@ -326,7 +328,7 @@ export function RemoteAccessOverlay(props: RemoteAccessOverlayProps) {

                <Show when={!loading()} fallback={<div class="remote-card">{t("remoteAccess.addresses.loading")}</div>}>
                  <Show when={!error()} fallback={<div class="remote-error">{error()}</div>}>
-                    <Show when={displayAddresses().length > 0} fallback={<div class="remote-card">{t("remoteAccess.addresses.none")}</div>}>
+                    <Show when={displayAddresses().recommended || meta()?.localUrl} fallback={<div class="remote-card">{t("remoteAccess.addresses.none")}</div>}>
                      <div class="remote-address-list">
                        <Show when={meta()?.localUrl}>
                          {(url) => {
@@ -373,8 +375,9 @@ export function RemoteAccessOverlay(props: RemoteAccessOverlayProps) {
                            )
                          }}
                        </Show>
-                        <For each={displayAddresses()}>
-                          {(address) => {
+                        <Show when={displayAddresses().recommended}>
+                          {(addressAccessor) => {
+                            const address = addressAccessor()
                            const url = address.remoteUrl
                            const expandedState = () => expandedUrl() === url
                            const qr = () => qrCodes()[url]
@@ -384,13 +387,14 @@ export function RemoteAccessOverlay(props: RemoteAccessOverlayProps) {
                                : address.scope === "loopback"
                                  ? t("remoteAccess.address.scope.loopback")
                                  : t("remoteAccess.address.scope.internal")
+
                            return (
                              <div class="remote-address">
                                <div class="remote-address-main">
                                  <div>
                                    <p class="remote-address-url">{url}</p>
                                    <p class="remote-address-meta">
-                                      {address.family.toUpperCase()} • {scopeLabel()} • {address.ip}
+                                      {address.family.toUpperCase()} - {scopeLabel()} - {address.ip}
                                    </p>
                                  </div>
                                  <div class="remote-actions">
@@ -425,7 +429,83 @@ export function RemoteAccessOverlay(props: RemoteAccessOverlayProps) {
                              </div>
                            )
                          }}
-                        </For>
+                        </Show>
+
+                        <Show when={displayAddresses().hidden.length > 0}>
+                          <div class="remote-address-disclosure" data-expanded={showAllAddresses()}>
+                            <button
+                              class="remote-address-disclosure-trigger"
+                              type="button"
+                              onClick={() => setShowAllAddresses(!showAllAddresses())}
+                              aria-expanded={showAllAddresses()}
+                            >
+                              <span class="remote-address-disclosure-label">
+                                {showAllAddresses()
+                                  ? t("remoteAccess.addresses.actions.hideOther")
+                                  : t("remoteAccess.addresses.actions.showOther", { count: String(displayAddresses().hidden.length) })}
+                              </span>
+                              <ChevronDown class={`remote-address-disclosure-chevron ${showAllAddresses() ? "is-expanded" : ""}`} />
+                            </button>
+
+                            <Show when={showAllAddresses()}>
+                              <div class="remote-address-disclosure-content">
+                                <For each={displayAddresses().hidden}>
+                                {(address) => {
+                                  const url = address.remoteUrl
+                                  const expandedState = () => expandedUrl() === url
+                                  const qr = () => qrCodes()[url]
+                                  const scopeLabel = () =>
+                                    address.scope === "external"
+                                      ? t("remoteAccess.address.scope.network")
+                                      : address.scope === "loopback"
+                                        ? t("remoteAccess.address.scope.loopback")
+                                        : t("remoteAccess.address.scope.internal")
+                                  return (
+                                    <div class="remote-address">
+                                      <div class="remote-address-main">
+                                        <div>
+                                          <p class="remote-address-url">{url}</p>
+                                          <p class="remote-address-meta">
+                                            {address.family.toUpperCase()} • {scopeLabel()} • {address.ip}
+                                          </p>
+                                        </div>
+                                        <div class="remote-actions">
+                                          <button class="remote-pill" type="button" onClick={() => handleOpenUrl(url)}>
+                                            <ExternalLink class="remote-icon" />
+                                            {t("remoteAccess.address.open")}
+                                          </button>
+                                          <button
+                                            class="remote-pill"
+                                            type="button"
+                                            onClick={() => void toggleExpanded(url)}
+                                            aria-expanded={expandedState()}
+                                          >
+                                            <Link2 class="remote-icon" />
+                                            {expandedState() ? t("remoteAccess.address.hideQr") : t("remoteAccess.address.showQr")}
+                                          </button>
+                                        </div>
+                                      </div>
+                                      <Show when={expandedState()}>
+                                        <div class="remote-qr">
+                                          <Show when={qr()} fallback={<Loader2 class="remote-icon remote-spin" aria-hidden="true" />}>
+                                            {(dataUrl) => (
+                                              <img
+                                                src={dataUrl()}
+                                                alt={t("remoteAccess.address.qrAlt", { url })}
+                                                class="remote-qr-img"
+                                              />
+                                            )}
+                                          </Show>
+                                        </div>
+                                      </Show>
+                                    </div>
+                                  )
+                                }}
+                                </For>
+                              </div>
+                            </Show>
+                          </div>
+                        </Show>
                      </div>
                    </Show>
                  </Show>
--- a/packages/ui/src/components/settings/remote-access-settings-section.tsx
+++ b/packages/ui/src/components/settings/remote-access-settings-section.tsx
@@ -1,7 +1,7 @@
 import { Switch } from "@kobalte/core/switch"
 import { For, Show, createMemo, createSignal, type Component, onMount } from "solid-js"
 import { toDataURL } from "qrcode"
-import { ExternalLink, Link2, Loader2, RefreshCw, Shield, Wifi } from "lucide-solid"
+import { ChevronDown, ExternalLink, Link2, Loader2, RefreshCw, Shield, Wifi } from "lucide-solid"
 import type { NetworkAddress, ServerMeta } from "../../../../server/src/api-types"
 import { serverApi } from "../../lib/api-client"
 import { restartCli } from "../../lib/native/cli"
@@ -9,6 +9,7 @@ import { serverSettings, setListeningMode } from "../../stores/preferences"
 import { showConfirmDialog } from "../../stores/alerts"
 import { getLogger } from "../../lib/logger"
 import { useI18n } from "../../lib/i18n"
+import { splitRemoteAddresses, type RemoteAddressGroups } from "../../lib/remote-access-addresses"

 const log = getLogger("actions")

@@ -30,14 +31,15 @@ export const RemoteAccessSettingsSection: Component = () => {
  const [passwordConfirm, setPasswordConfirm] = createSignal("")
  const [passwordError, setPasswordError] = createSignal<string | null>(null)
  const [savingPassword, setSavingPassword] = createSignal(false)
+  const [showAllAddresses, setShowAllAddresses] = createSignal(false)

  const addresses = createMemo<NetworkAddress[]>(() => meta()?.addresses ?? [])
  const currentMode = createMemo(() => meta()?.listeningMode ?? serverSettings().listeningMode)
  const allowExternalConnections = createMemo(() => currentMode() === "all")
-  const displayAddresses = createMemo(() => {
+  const displayAddresses = createMemo<RemoteAddressGroups>(() => {
    const list = addresses()
-    if (!allowExternalConnections()) return []
-    return list.filter((address) => address.scope !== "loopback")
+    if (!allowExternalConnections()) return { recommended: null, hidden: [] }
+    return splitRemoteAddresses(list)
  })

  const refreshMeta = async () => {
@@ -48,6 +50,7 @@ export const RemoteAccessSettingsSection: Component = () => {
      const [metaResult, authResult] = await Promise.all([serverApi.fetchServerMeta(), serverApi.fetchAuthStatus()])
      setMeta(metaResult)
      setAuthStatus(authResult)
+      setShowAllAddresses(false)
    } catch (err) {
      setError(err instanceof Error ? err.message : String(err))
    } finally {
@@ -218,31 +221,35 @@ export const RemoteAccessSettingsSection: Component = () => {
          fallback={<div class="settings-card-message">{t("remoteAccess.authStatus.unavailable")}</div>}
        >
          <div class="settings-card-content">
-                <p class="settings-help-text">{t("remoteAccess.username", { username: authStatus()!.username ?? "codenomad" })}</p>
-                <p class="settings-help-text">
-                  {authStatus()!.passwordUserProvided
-                    ? t("remoteAccess.password.status.set")
-                    : t("remoteAccess.password.status.unset")}
-                </p>
+                <div class="settings-password-summary-row">
+                  <div class="settings-password-summary-copy">
+                 <p class="settings-help-text">{t("remoteAccess.username", { username: authStatus()!.username ?? "codenomad" })}</p>
+                 <p class="settings-help-text">
+                   {authStatus()!.passwordUserProvided
+                     ? t("remoteAccess.password.status.set")
+                     : t("remoteAccess.password.status.unset")}
+                 </p>
+                  </div>

-                <div class="settings-password-actions">
-                  <button
-                    class="settings-pill-button"
-                    type="button"
-                    onClick={() => {
-                      setPasswordFormOpen(!passwordFormOpen())
-                      setPasswordError(null)
-                    }}
-                  >
-                    {passwordFormOpen()
-                      ? t("remoteAccess.password.actions.cancel")
-                      : authStatus()!.passwordUserProvided
-                        ? t("remoteAccess.password.actions.change")
-                        : t("remoteAccess.password.actions.set")}
-                  </button>
+                  <div class="settings-password-actions">
+                    <button
+                      class="settings-pill-button"
+                      type="button"
+                      onClick={() => {
+                        setPasswordFormOpen(!passwordFormOpen())
+                        setPasswordError(null)
+                      }}
+                    >
+                      {passwordFormOpen()
+                        ? t("remoteAccess.password.actions.cancel")
+                        : authStatus()!.passwordUserProvided
+                          ? t("remoteAccess.password.actions.change")
+                          : t("remoteAccess.password.actions.set")}
+                    </button>
+                  </div>
                </div>

-                <Show when={passwordFormOpen()}>
+                 <Show when={passwordFormOpen()}>
                  <div class="settings-form-group">
                    <label class="settings-form-label">{t("remoteAccess.password.form.newPassword")}</label>
                    <input
@@ -292,7 +299,7 @@ export const RemoteAccessSettingsSection: Component = () => {
        <Show when={!loading()} fallback={<div class="remote-card">{t("remoteAccess.addresses.loading")}</div>}>
          <Show when={!error()} fallback={<div class="remote-error">{error()}</div>}>
            <Show
-              when={displayAddresses().length > 0 || meta()?.localUrl}
+              when={Boolean(displayAddresses().recommended) || meta()?.localUrl}
              fallback={<div class="remote-card">{t("remoteAccess.addresses.none")}</div>}
            >
              <div class="remote-address-list">
@@ -342,8 +349,9 @@ export const RemoteAccessSettingsSection: Component = () => {
                  }}
                </Show>

-                <For each={displayAddresses()}>
-                  {(address) => {
+                <Show when={displayAddresses().recommended}>
+                  {(addressAccessor) => {
+                    const address = addressAccessor()
                    const url = address.remoteUrl
                    const expandedState = () => expandedUrl() === url
                    const qr = () => qrCodes()[url]
@@ -383,7 +391,11 @@ export const RemoteAccessSettingsSection: Component = () => {
                          <div class="remote-qr">
                            <Show when={qr()} fallback={<Loader2 class="remote-icon remote-spin" aria-hidden="true" />}>
                              {(dataUrl) => (
-                                <img src={dataUrl()} alt={t("remoteAccess.address.qrAlt", { url })} class="remote-qr-img" />
+                                <img
+                                  src={dataUrl()}
+                                  alt={t("remoteAccess.address.qrAlt", { url })}
+                                  class="remote-qr-img"
+                                />
                              )}
                            </Show>
                          </div>
@@ -391,7 +403,80 @@ export const RemoteAccessSettingsSection: Component = () => {
                      </div>
                    )
                  }}
-                </For>
+                </Show>
+
+                <Show when={displayAddresses().hidden.length > 0}>
+                  <div class="remote-address-disclosure" data-expanded={showAllAddresses()}>
+                    <button
+                      class="remote-address-disclosure-trigger"
+                      type="button"
+                      onClick={() => setShowAllAddresses(!showAllAddresses())}
+                      aria-expanded={showAllAddresses()}
+                    >
+                      <span class="remote-address-disclosure-label">
+                        {showAllAddresses()
+                          ? t("remoteAccess.addresses.actions.hideOther")
+                          : t("remoteAccess.addresses.actions.showOther", { count: String(displayAddresses().hidden.length) })}
+                      </span>
+                      <ChevronDown class={`remote-address-disclosure-chevron ${showAllAddresses() ? "is-expanded" : ""}`} />
+                    </button>
+
+                    <Show when={showAllAddresses()}>
+                      <div class="remote-address-disclosure-content">
+                        <For each={displayAddresses().hidden}>
+                        {(address) => {
+                          const url = address.remoteUrl
+                          const expandedState = () => expandedUrl() === url
+                          const qr = () => qrCodes()[url]
+                          const scopeLabel = () =>
+                            address.scope === "external"
+                              ? t("remoteAccess.address.scope.network")
+                              : address.scope === "loopback"
+                                ? t("remoteAccess.address.scope.loopback")
+                                : t("remoteAccess.address.scope.internal")
+
+                          return (
+                            <div class="remote-address">
+                              <div class="remote-address-main">
+                                <div>
+                                  <p class="remote-address-url">{url}</p>
+                                  <p class="remote-address-meta">
+                                    {address.family.toUpperCase()} - {scopeLabel()} - {address.ip}
+                                  </p>
+                                </div>
+                                <div class="remote-actions">
+                                  <button class="remote-pill" type="button" onClick={() => handleOpenUrl(url)}>
+                                    <ExternalLink class="remote-icon" />
+                                    {t("remoteAccess.address.open")}
+                                  </button>
+                                  <button
+                                    class="remote-pill"
+                                    type="button"
+                                    onClick={() => void toggleExpanded(url)}
+                                    aria-expanded={expandedState()}
+                                  >
+                                    <Link2 class="remote-icon" />
+                                    {expandedState() ? t("remoteAccess.address.hideQr") : t("remoteAccess.address.showQr")}
+                                  </button>
+                                </div>
+                              </div>
+                              <Show when={expandedState()}>
+                                <div class="remote-qr">
+                                  <Show when={qr()} fallback={<Loader2 class="remote-icon remote-spin" aria-hidden="true" />}>
+                                    {(dataUrl) => (
+                                      <img src={dataUrl()} alt={t("remoteAccess.address.qrAlt", { url })} class="remote-qr-img" />
+                                    )}
+                                  </Show>
+                                </div>
+                              </Show>
+                            </div>
+                          )
+                        }}
+                        </For>
+                      </div>
+                    </Show>
+                  </div>
+                </Show>
              </div>
            </Show>
          </Show>
--- a/packages/ui/src/components/tool-call/diff-render.tsx
+++ b/packages/ui/src/components/tool-call/diff-render.tsx
@@ -1,10 +1,13 @@
-import { Suspense, lazy, onMount, type Accessor, type JSXElement } from "solid-js"
+import { Suspense, createEffect, createMemo, createSignal, lazy, onMount, type Accessor, type JSXElement } from "solid-js"
 import type { ToolState } from "@opencode-ai/sdk/v2"
+import useMediaQuery from "@suid/material/useMediaQuery"
+import { AlignJustify, Copy, Split, WrapText } from "lucide-solid"
 import type { RenderCache } from "../../types/message"
 import type { DiffViewMode } from "../../stores/preferences"
 import type { DiffPayload, DiffRenderOptions, ToolScrollHelpers } from "./types"
 import { getRelativePath } from "./utils"
 import { getCacheEntry } from "../../lib/global-cache"
+import { copyToClipboard } from "../../lib/clipboard"

 const LazyToolCallDiffViewer = lazy(() =>
  import("../diff-viewer").then((module) => ({ default: module.ToolCallDiffViewer })),
@@ -43,6 +46,16 @@ export function createDiffContentRenderer(params: {
  handleScrollRendered: () => void
  onContentRendered?: () => void
 }) {
+  const compactDiffQuery = useMediaQuery("(max-width: 640px)")
+  const [mobileModeOverride, setMobileModeOverride] = createSignal<DiffViewMode | undefined>(undefined)
+  const [wordWrapEnabled, setWordWrapEnabled] = createSignal(true)
+
+  createEffect(() => {
+    if (!compactDiffQuery()) {
+      setMobileModeOverride(undefined)
+    }
+  })
+
  const registerTracked = (element: HTMLDivElement | null) => {
    params.scrollHelpers.registerContainer(element)
  }
@@ -58,7 +71,12 @@ export function createDiffContentRenderer(params: {
      : params.t("toolCall.diff.label"))
    const selectedVariant = options?.variant === "permission-diff" ? "permission-diff" : "diff"
    const cacheHandle = selectedVariant === "permission-diff" ? params.permissionDiffCache : params.diffCache
-    const diffMode = () => (params.preferences().diffViewMode || "split") as DiffViewMode
+    const preferredMode = () => (params.preferences().diffViewMode || "split") as DiffViewMode
+    const effectiveMode = () => {
+      if (!compactDiffQuery()) return preferredMode()
+      return mobileModeOverride() || "unified"
+    }
+    const shouldWrap = () => wordWrapEnabled()
    const themeKey = params.isDark() ? "dark" : "light"
    const state = params.toolState()
    const disableScrollTracking = Boolean(
@@ -76,17 +94,40 @@ export function createDiffContentRenderer(params: {
      }
    })()

-    let cachedHtml: string | undefined
-    const cached = getCacheEntry<RenderCache>(cacheEntryParams)
-    const currentMode = diffMode()
-    if (cached && cached.text === payload.diffText && cached.theme === themeKey && cached.mode === currentMode) {
-      cachedHtml = cached.html
-    }
+    const currentMode = createMemo(() => effectiveMode())
+    const currentWrap = createMemo(() => shouldWrap())
+    const cachedHtml = createMemo(() => {
+      const cached = getCacheEntry<RenderCache>(cacheEntryParams)
+      if (
+        cached
+        && cached.text === payload.diffText
+        && cached.theme === themeKey
+        && cached.mode === currentMode()
+        && cached.wrap === currentWrap()
+      ) {
+        return cached.html
+      }
+      return undefined
+    })

    const handleModeChange = (mode: DiffViewMode) => {
+      if (compactDiffQuery()) {
+        setMobileModeOverride(mode)
+      }
      params.setDiffViewMode(mode)
    }

+    const nextViewMode = (): DiffViewMode => (currentMode() === "split" ? "unified" : "split")
+    const viewModeTitle = () =>
+      nextViewMode() === "split"
+        ? params.t("toolCall.diff.switchToSplit")
+        : params.t("toolCall.diff.switchToUnified")
+    const wordWrapTitle = () =>
+      wordWrapEnabled()
+        ? params.t("toolCall.diff.disableWordWrap")
+        : params.t("toolCall.diff.enableWordWrap")
+    const copyPatchTitle = () => params.t("toolCall.diff.copyPatch")
+
    const handleDiffRendered = () => {
      if (!disableScrollTracking) {
        params.handleScrollRendered()
@@ -95,41 +136,54 @@ export function createDiffContentRenderer(params: {
    }

    return (
-      <div
-        class="message-text tool-call-markdown tool-call-markdown-large tool-call-diff-shell"
-        ref={registerRef}
-        onScroll={disableScrollTracking ? undefined : params.scrollHelpers.handleScroll}
-      >
+        <div
+          class="message-text tool-call-markdown tool-call-markdown-large tool-call-diff-shell"
+          data-diff-mode={currentMode()}
+          ref={registerRef}
+          onScroll={disableScrollTracking ? undefined : params.scrollHelpers.handleScroll}
+        >
        <div class="tool-call-diff-toolbar" role="group" aria-label={params.t("toolCall.diff.viewMode.ariaLabel")}>
          <span class="tool-call-diff-toolbar-label">{toolbarLabel}</span>
-          <div class="tool-call-diff-toggle">
+          <div class="file-viewer-toolbar">
            <button
              type="button"
-              class={`tool-call-diff-mode-button${diffMode() === "split" ? " active" : ""}`}
-              aria-pressed={diffMode() === "split"}
-              onClick={() => handleModeChange("split")}
+              class="file-viewer-toolbar-icon-button"
+              onClick={() => void copyToClipboard(payload.diffText)}
+              aria-label={copyPatchTitle()}
+              title={copyPatchTitle()}
            >
-              {params.t("toolCall.diff.viewMode.split")}
+              <Copy class="h-4 w-4" aria-hidden="true" />
            </button>
            <button
              type="button"
-              class={`tool-call-diff-mode-button${diffMode() === "unified" ? " active" : ""}`}
-              aria-pressed={diffMode() === "unified"}
-              onClick={() => handleModeChange("unified")}
+              class="file-viewer-toolbar-icon-button"
+              onClick={() => handleModeChange(nextViewMode())}
+              aria-label={viewModeTitle()}
+              title={viewModeTitle()}
            >
-              {params.t("toolCall.diff.viewMode.unified")}
+              {nextViewMode() === "split" ? <Split class="h-4 w-4" aria-hidden="true" /> : <AlignJustify class="h-4 w-4" aria-hidden="true" />}
+            </button>
+            <button
+              type="button"
+              class={`file-viewer-toolbar-icon-button${wordWrapEnabled() ? " active" : ""}`}
+              onClick={() => setWordWrapEnabled((enabled) => !enabled)}
+              aria-label={wordWrapTitle()}
+              title={wordWrapTitle()}
+            >
+              <WrapText class="h-4 w-4" aria-hidden="true" />
            </button>
          </div>
        </div>
-        {cachedHtml ? (
-          <CachedDiffMarkup html={cachedHtml} onRendered={handleDiffRendered} />
+        {cachedHtml() ? (
+          <CachedDiffMarkup html={cachedHtml()!} onRendered={handleDiffRendered} />
        ) : (
          <Suspense fallback={<pre class="tool-call-diff-fallback">{payload.diffText}</pre>}>
            <LazyToolCallDiffViewer
              diffText={payload.diffText}
              filePath={payload.filePath}
              theme={themeKey}
-              mode={diffMode()}
+              mode={currentMode()}
+              wrap={currentWrap()}
              cacheEntryParams={cacheEntryParams as any}
              onRendered={handleDiffRendered}
            />
--- a/packages/ui/src/lib/i18n/messages/en/remoteAccess.ts
+++ b/packages/ui/src/lib/i18n/messages/en/remoteAccess.ts
@@ -41,6 +41,8 @@ export const remoteAccessMessages = {
  "remoteAccess.sections.addresses.help": "Launch or scan from another machine to hand over control.",
  "remoteAccess.addresses.loading": "Loading addresses…",
  "remoteAccess.addresses.none": "No addresses available yet.",
+  "remoteAccess.addresses.actions.showOther": "Show {count} other addresses",
+  "remoteAccess.addresses.actions.hideOther": "Hide other addresses",
  "remoteAccess.address.scope.network": "Network",
  "remoteAccess.address.scope.loopback": "Loopback",
  "remoteAccess.address.scope.internal": "Internal",
--- a/packages/ui/src/lib/i18n/messages/en/toolCall.ts
+++ b/packages/ui/src/lib/i18n/messages/en/toolCall.ts
@@ -18,6 +18,11 @@ export const toolCallMessages = {
  "toolCall.diff.viewMode.ariaLabel": "Diff view mode",
  "toolCall.diff.viewMode.split": "Split",
  "toolCall.diff.viewMode.unified": "Unified",
+  "toolCall.diff.switchToSplit": "Switch to split view",
+  "toolCall.diff.switchToUnified": "Switch to unified view",
+  "toolCall.diff.enableWordWrap": "Enable word wrap",
+  "toolCall.diff.disableWordWrap": "Disable word wrap",
+  "toolCall.diff.copyPatch": "Copy patch",

  "toolCall.diagnostics.title": "Diagnostics",
  "toolCall.diagnostics.ariaLabel": "Diagnostics",
--- a/packages/ui/src/lib/i18n/messages/es/remoteAccess.ts
+++ b/packages/ui/src/lib/i18n/messages/es/remoteAccess.ts
@@ -41,6 +41,8 @@ export const remoteAccessMessages = {
  "remoteAccess.sections.addresses.help": "Abre o escanea desde otra máquina para transferir el control.",
  "remoteAccess.addresses.loading": "Cargando direcciones…",
  "remoteAccess.addresses.none": "Aún no hay direcciones disponibles.",
+  "remoteAccess.addresses.actions.showOther": "Mostrar {count} direcciones más",
+  "remoteAccess.addresses.actions.hideOther": "Ocultar otras direcciones",
  "remoteAccess.address.scope.network": "Red",
  "remoteAccess.address.scope.loopback": "Loopback",
  "remoteAccess.address.scope.internal": "Interna",
--- a/packages/ui/src/lib/i18n/messages/es/toolCall.ts
+++ b/packages/ui/src/lib/i18n/messages/es/toolCall.ts
@@ -18,6 +18,11 @@ export const toolCallMessages = {
  "toolCall.diff.viewMode.ariaLabel": "Modo de vista de diff",
  "toolCall.diff.viewMode.split": "Dividida",
  "toolCall.diff.viewMode.unified": "Unificada",
+  "toolCall.diff.switchToSplit": "Cambiar a vista dividida",
+  "toolCall.diff.switchToUnified": "Cambiar a vista unificada",
+  "toolCall.diff.enableWordWrap": "Activar ajuste de línea",
+  "toolCall.diff.disableWordWrap": "Desactivar ajuste de línea",
+  "toolCall.diff.copyPatch": "Copiar patch",

  "toolCall.diagnostics.title": "Diagnósticos",
  "toolCall.diagnostics.ariaLabel": "Diagnósticos",
--- a/packages/ui/src/lib/i18n/messages/fr/remoteAccess.ts
+++ b/packages/ui/src/lib/i18n/messages/fr/remoteAccess.ts
@@ -41,6 +41,8 @@ export const remoteAccessMessages = {
  "remoteAccess.sections.addresses.help": "Lancez ou scannez depuis une autre machine pour passer le contrôle.",
  "remoteAccess.addresses.loading": "Chargement des adresses…",
  "remoteAccess.addresses.none": "Aucune adresse disponible pour le moment.",
+  "remoteAccess.addresses.actions.showOther": "Afficher {count} autres adresses",
+  "remoteAccess.addresses.actions.hideOther": "Masquer les autres adresses",
  "remoteAccess.address.scope.network": "Réseau",
  "remoteAccess.address.scope.loopback": "Boucle locale",
  "remoteAccess.address.scope.internal": "Interne",
--- a/packages/ui/src/lib/i18n/messages/fr/toolCall.ts
+++ b/packages/ui/src/lib/i18n/messages/fr/toolCall.ts
@@ -18,6 +18,11 @@ export const toolCallMessages = {
  "toolCall.diff.viewMode.ariaLabel": "Mode d'affichage du diff",
  "toolCall.diff.viewMode.split": "Côte à côte",
  "toolCall.diff.viewMode.unified": "Unifié",
+  "toolCall.diff.switchToSplit": "Passer à la vue côte à côte",
+  "toolCall.diff.switchToUnified": "Passer à la vue unifiée",
+  "toolCall.diff.enableWordWrap": "Activer le retour à la ligne",
+  "toolCall.diff.disableWordWrap": "Désactiver le retour à la ligne",
+  "toolCall.diff.copyPatch": "Copier le patch",

  "toolCall.diagnostics.title": "Diagnostics",
  "toolCall.diagnostics.ariaLabel": "Diagnostics",
--- a/packages/ui/src/lib/i18n/messages/he/remoteAccess.ts
+++ b/packages/ui/src/lib/i18n/messages/he/remoteAccess.ts
@@ -41,6 +41,8 @@ export const remoteAccessMessages = {
  "remoteAccess.sections.addresses.help": "הפעל או סרוק ממכונה אחרת להעברת שליטה.",
  "remoteAccess.addresses.loading": "טוען כתובות…",
  "remoteAccess.addresses.none": "אין כתובות זמינות עדיין.",
+  "remoteAccess.addresses.actions.showOther": "הצג עוד {count} כתובות",
+  "remoteAccess.addresses.actions.hideOther": "הסתר כתובות נוספות",
  "remoteAccess.address.scope.network": "רשת",
  "remoteAccess.address.scope.loopback": "לולאה מקומית",
  "remoteAccess.address.scope.internal": "פנימי",
--- a/packages/ui/src/lib/i18n/messages/he/toolCall.ts
+++ b/packages/ui/src/lib/i18n/messages/he/toolCall.ts
@@ -18,6 +18,11 @@ export const toolCallMessages = {
  "toolCall.diff.viewMode.ariaLabel": "מצב תצוגת diff",
  "toolCall.diff.viewMode.split": "מפוצל",
  "toolCall.diff.viewMode.unified": "מאוחד",
+  "toolCall.diff.switchToSplit": "עבור לתצוגה מפוצלת",
+  "toolCall.diff.switchToUnified": "עבור לתצוגה מאוחדת",
+  "toolCall.diff.enableWordWrap": "הפעל גלישת מילים",
+  "toolCall.diff.disableWordWrap": "כבה גלישת מילים",
+  "toolCall.diff.copyPatch": "העתק patch",

  "toolCall.diagnostics.title": "אבחון",
  "toolCall.diagnostics.ariaLabel": "אבחון",
--- a/packages/ui/src/lib/i18n/messages/ja/remoteAccess.ts
+++ b/packages/ui/src/lib/i18n/messages/ja/remoteAccess.ts
@@ -41,6 +41,8 @@ export const remoteAccessMessages = {
  "remoteAccess.sections.addresses.help": "別の端末から起動またはスキャンして操作を引き継ぎます。",
  "remoteAccess.addresses.loading": "アドレスを読み込み中…",
  "remoteAccess.addresses.none": "まだ利用可能なアドレスがありません。",
+  "remoteAccess.addresses.actions.showOther": "他の {count} 件のアドレスを表示",
+  "remoteAccess.addresses.actions.hideOther": "他のアドレスを隠す",
  "remoteAccess.address.scope.network": "ネットワーク",
  "remoteAccess.address.scope.loopback": "ループバック",
  "remoteAccess.address.scope.internal": "内部",
--- a/packages/ui/src/lib/i18n/messages/ja/toolCall.ts
+++ b/packages/ui/src/lib/i18n/messages/ja/toolCall.ts
@@ -18,6 +18,11 @@ export const toolCallMessages = {
  "toolCall.diff.viewMode.ariaLabel": "diff 表示モード",
  "toolCall.diff.viewMode.split": "分割",
  "toolCall.diff.viewMode.unified": "ユニファイド",
+  "toolCall.diff.switchToSplit": "分割表示に切り替え",
+  "toolCall.diff.switchToUnified": "ユニファイド表示に切り替え",
+  "toolCall.diff.enableWordWrap": "折り返しを有効化",
+  "toolCall.diff.disableWordWrap": "折り返しを無効化",
+  "toolCall.diff.copyPatch": "パッチをコピー",

  "toolCall.diagnostics.title": "診断",
  "toolCall.diagnostics.ariaLabel": "診断",
--- a/packages/ui/src/lib/i18n/messages/ru/remoteAccess.ts
+++ b/packages/ui/src/lib/i18n/messages/ru/remoteAccess.ts
@@ -41,6 +41,8 @@ export const remoteAccessMessages = {
  "remoteAccess.sections.addresses.help": "Откройте или отсканируйте с другой машины, чтобы передать управление.",
  "remoteAccess.addresses.loading": "Загрузка адресов…",
  "remoteAccess.addresses.none": "Пока нет доступных адресов.",
+  "remoteAccess.addresses.actions.showOther": "Показать еще {count} адресов",
+  "remoteAccess.addresses.actions.hideOther": "Скрыть остальные адреса",
  "remoteAccess.address.scope.network": "Сеть",
  "remoteAccess.address.scope.loopback": "Loopback",
  "remoteAccess.address.scope.internal": "Внутренний",
--- a/packages/ui/src/lib/i18n/messages/ru/toolCall.ts
+++ b/packages/ui/src/lib/i18n/messages/ru/toolCall.ts
@@ -18,6 +18,11 @@ export const toolCallMessages = {
  "toolCall.diff.viewMode.ariaLabel": "Режим просмотра diff",
  "toolCall.diff.viewMode.split": "Раздельный",
  "toolCall.diff.viewMode.unified": "Единый",
+  "toolCall.diff.switchToSplit": "Переключить на раздельный вид",
+  "toolCall.diff.switchToUnified": "Переключить на единый вид",
+  "toolCall.diff.enableWordWrap": "Включить перенос слов",
+  "toolCall.diff.disableWordWrap": "Выключить перенос слов",
+  "toolCall.diff.copyPatch": "Скопировать patch",

  "toolCall.diagnostics.title": "Диагностика",
  "toolCall.diagnostics.ariaLabel": "Диагностика",
--- a/packages/ui/src/lib/i18n/messages/zh-Hans/remoteAccess.ts
+++ b/packages/ui/src/lib/i18n/messages/zh-Hans/remoteAccess.ts
@@ -41,6 +41,8 @@ export const remoteAccessMessages = {
  "remoteAccess.sections.addresses.help": "从另一台设备打开或扫描，以接管控制权。",
  "remoteAccess.addresses.loading": "正在加载地址…",
  "remoteAccess.addresses.none": "暂时没有可用地址。",
+  "remoteAccess.addresses.actions.showOther": "显示另外 {count} 个地址",
+  "remoteAccess.addresses.actions.hideOther": "隐藏其他地址",
  "remoteAccess.address.scope.network": "网络",
  "remoteAccess.address.scope.loopback": "回环",
  "remoteAccess.address.scope.internal": "内部",
--- a/packages/ui/src/lib/i18n/messages/zh-Hans/toolCall.ts
+++ b/packages/ui/src/lib/i18n/messages/zh-Hans/toolCall.ts
@@ -18,6 +18,11 @@ export const toolCallMessages = {
  "toolCall.diff.viewMode.ariaLabel": "Diff 视图模式",
  "toolCall.diff.viewMode.split": "分栏",
  "toolCall.diff.viewMode.unified": "统一",
+  "toolCall.diff.switchToSplit": "切换到分栏视图",
+  "toolCall.diff.switchToUnified": "切换到统一视图",
+  "toolCall.diff.enableWordWrap": "启用自动换行",
+  "toolCall.diff.disableWordWrap": "禁用自动换行",
+  "toolCall.diff.copyPatch": "复制补丁",

  "toolCall.diagnostics.title": "诊断",
  "toolCall.diagnostics.ariaLabel": "诊断",
--- a/packages/ui/src/lib/remote-access-addresses.test.ts
+++ b/packages/ui/src/lib/remote-access-addresses.test.ts
@@ -0,0 +1,17 @@
+import assert from "node:assert/strict"
+import { describe, it } from "node:test"
+
+import { splitRemoteAddresses } from "./remote-access-addresses"
+
+describe("splitRemoteAddresses", () => {
+  it("keeps the first remote address visible and collapses the rest", () => {
+    const result = splitRemoteAddresses([
+      { ip: "127.0.0.1", family: "ipv4", scope: "loopback", remoteUrl: "https://127.0.0.1:9898" },
+      { ip: "192.168.1.128", family: "ipv4", scope: "external", remoteUrl: "https://192.168.1.128:9898" },
+      { ip: "172.24.96.1", family: "ipv4", scope: "external", remoteUrl: "https://172.24.96.1:9898" },
+    ])
+
+    assert.equal(result.recommended?.ip, "192.168.1.128")
+    assert.deepEqual(result.hidden.map((address) => address.ip), ["172.24.96.1"])
+  })
+})
--- a/packages/ui/src/lib/remote-access-addresses.ts
+++ b/packages/ui/src/lib/remote-access-addresses.ts
@@ -0,0 +1,14 @@
+import type { NetworkAddress } from "../../../server/src/api-types"
+
+export interface RemoteAddressGroups {
+  recommended: NetworkAddress | null
+  hidden: NetworkAddress[]
+}
+
+export function splitRemoteAddresses(addresses: NetworkAddress[]): RemoteAddressGroups {
+  const remoteAddresses = addresses.filter((address) => address.scope !== "loopback")
+  return {
+    recommended: remoteAddresses[0] ?? null,
+    hidden: remoteAddresses.slice(1),
+  }
+}
--- a/packages/ui/src/styles/components/remote-access.css
+++ b/packages/ui/src/styles/components/remote-access.css
@@ -256,6 +256,55 @@
  cursor: pointer;
 }

+.remote-address-disclosure {
+  border: 1px solid var(--border-base);
+  border-radius: 12px;
+  background: var(--surface-primary);
+  overflow: hidden;
+}
+
+.remote-address-disclosure-trigger {
+  width: 100%;
+  min-height: 40px;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  padding: 8px 12px;
+  border: 0;
+  background: transparent;
+  color: var(--text-primary);
+  cursor: pointer;
+}
+
+.remote-address-disclosure-label {
+  grid-column: 2;
+  justify-self: center;
+  text-align: center;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.remote-address-disclosure-chevron {
+  grid-column: 3;
+  justify-self: end;
+  width: 16px;
+  height: 16px;
+  color: var(--text-secondary);
+  transition: transform 0.2s ease;
+}
+
+.remote-address-disclosure-chevron.is-expanded {
+  transform: rotate(180deg);
+}
+
+.remote-address-disclosure-content {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 0 10px 10px;
+  border-top: 1px solid var(--border-base);
+}
+
 .remote-qr {
  margin-top: 12px;
  display: flex;
--- a/packages/ui/src/styles/components/settings-screen.css
+++ b/packages/ui/src/styles/components/settings-screen.css
@@ -1,11 +1,12 @@
 .settings-screen-frame {
-  @apply fixed inset-0 z-50 flex items-center justify-center p-4;
+  @apply fixed inset-0 z-50 flex items-center justify-center px-4;
+  padding-block: 5dvh;
 }

 /* Override .modal-surface (defined later in panels.css). */
 .modal-surface.settings-screen-shell {
  width: min(1120px, 100%);
-  height: min(88vh, 920px);
+  height: 100%;
  max-height: none;
  display: grid;
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
@@ -278,10 +279,25 @@
  font-size: var(--font-size-sm);
 }

+.settings-password-summary-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.settings-password-summary-copy {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  min-width: 0;
+}
+
 .settings-password-actions {
  display: flex;
-  justify-content: flex-start;
-  margin-top: 0.75rem;
+  justify-content: flex-end;
+  margin-top: 0;
 }

 .settings-form-group {
--- a/packages/ui/src/styles/messaging/tool-call.css
+++ b/packages/ui/src/styles/messaging/tool-call.css
@@ -321,6 +321,7 @@

 .tool-call-diff-shell {
  padding: 0;
+  scrollbar-gutter: auto;
 }

 .tool-call-diff-viewer {
@@ -343,6 +344,8 @@
 .tool-call-diff-shell .tool-call-diff-viewer {
  max-height: none;
  overflow: visible;
+  width: 100%;
+  min-width: 100%;
 }

 .tool-call-diff-toolbar-label {
@@ -513,6 +516,84 @@
  font-size: var(--font-size-xs);
 }

+.tool-call-diff-shell .tool-call-diff-viewer .diff-line-content,
+.tool-call-diff-shell .tool-call-diff-viewer .diff-line-hunk-content,
+.tool-call-diff-shell .tool-call-diff-viewer .diff-line-old-content,
+.tool-call-diff-shell .tool-call-diff-viewer .diff-line-new-content {
+  padding-right: 0 !important;
+}
+
+.tool-call-diff-shell[data-diff-mode="unified"] .tool-call-diff-viewer .diff-line-num {
+  padding-left: 1px !important;
+  padding-right: 1px !important;
+  text-align: left !important;
+}
+
+.tool-call-diff-shell[data-diff-mode="unified"] .tool-call-diff-viewer .unified-diff-table {
+  table-layout: fixed;
+}
+
+.tool-call-diff-shell[data-diff-mode="unified"] .tool-call-diff-viewer .unified-diff-table-num-col {
+  width: auto !important;
+}
+
+.tool-call-diff-shell[data-diff-mode="unified"] .tool-call-diff-viewer .tool-call-diff-compact-line-number {
+  display: block;
+  width: 100%;
+  overflow: hidden;
+  text-align: left;
+  white-space: nowrap;
+}
+
+.tool-call-diff-shell[data-diff-mode="split"] .tool-call-diff-viewer .diff-line-old-num,
+.tool-call-diff-shell[data-diff-mode="split"] .tool-call-diff-viewer .diff-line-new-num,
+.tool-call-diff-shell[data-diff-mode="split"] .tool-call-diff-viewer .diff-line-hunk-action {
+  padding-left: 2px !important;
+  padding-right: 2px !important;
+  text-align: left !important;
+}
+
+.tool-call-diff-shell[data-diff-mode="split"] .tool-call-diff-viewer .diff-line-old-num,
+.tool-call-diff-shell[data-diff-mode="split"] .tool-call-diff-viewer .diff-line-new-num,
+.tool-call-diff-shell[data-diff-mode="split"] .tool-call-diff-viewer .diff-line-old-num [data-line-num],
+.tool-call-diff-shell[data-diff-mode="split"] .tool-call-diff-viewer .diff-line-new-num [data-line-num] {
+  white-space: nowrap !important;
+  word-break: normal !important;
+  overflow-wrap: normal !important;
+}
+
+.tool-call-diff-shell[data-diff-mode="split"] .tool-call-diff-viewer .diff-line-hunk-action {
+  padding-top: 1px !important;
+  padding-bottom: 1px !important;
+}
+
+.tool-call-diff-shell .tool-call-diff-viewer .diff-line-content-item {
+  padding-left: 1.1em !important;
+}
+
+.tool-call-diff-shell .tool-call-diff-viewer .diff-line-content-operator {
+  margin-left: -1.1em !important;
+  width: 0.9em !important;
+  min-width: 0.9em !important;
+  text-indent: 0 !important;
+}
+
+@media (max-width: 640px) {
+  .tool-call-diff-shell[data-diff-mode="unified"] .tool-call-diff-viewer .unified-diff-table-wrapper {
+    --diff-aside-width: 18px;
+  }
+
+  .tool-call-diff-shell .tool-call-diff-viewer .diff-line-content-item {
+    padding-left: 1.5em !important;
+  }
+
+  .tool-call-diff-shell .tool-call-diff-viewer .diff-line-content-operator {
+    margin-left: -1.5em !important;
+    width: 1.1em !important;
+    min-width: 1.1em !important;
+  }
+}
+
 .tool-call-markdown .markdown-code-block {
  margin: 0;
  border-radius: 0;
--- a/packages/ui/src/types/message.ts
+++ b/packages/ui/src/types/message.ts
@@ -40,6 +40,7 @@ export interface RenderCache {
  html: string
  theme?: string
  mode?: string
+  wrap?: boolean
 }

 export interface PendingPermissionState {
Author	SHA1	Message	Date
Shantur Rathore	e82e529a8f	Merge branch 'dev' of github.com:NeuralNomadsAI/CodeNomad into dev	2026-04-01 23:16:33 +01:00
VooDisss	4f236ce36f	Implement shared compact split and unified tool-call diff layout (#270 ) # PR Title Implement shared compact split and unified tool-call diff layout --- Fixes #268 # PR Description ## Summary This PR makes tool-call diffs more compact in both `Unified` and `Split` views by reducing wasted horizontal space in line-number gutters and content indentation. ## What changed - introduced a shared compact-diff framework for tool-call diffs - kept mobile-specific policy limited to: - forcing unified mode below the breakpoint - enabling wrap only in mobile unified mode - added mode-specific compact applicators in the diff viewer: - unified applicator - split applicator - reduced gutter width waste by measuring rendered line-number text and tightening column width around it - removed unnecessary right-side content padding - aligned `+` / `-` markers closer to the left edge across both views - simplified cleanup after gatekeeper review by removing extra plumbing and residue ## Screenshots ### Before <img width="581" height="341" alt="image" src="https://github.com/user-attachments/assets/ec47b256-749a-4afc-8879-aaf33f0b46b6" /> ### After <img width="470" height="586" alt="image" src="https://github.com/user-attachments/assets/7258a5a2-47c4-408d-84bc-1b497761c7ad" /> ## Architectural approach This change intentionally uses: - shared policy in `packages/ui/src/components/tool-call/diff-render.tsx` - shared helper/measurement logic in `packages/ui/src/components/diff-viewer.tsx` - mode-specific applicators where unified and split DOM differ - CSS for shared visual spacing and alignment cleanup The goal was to keep the implementation architecturally clean and avoid building separate duplicated compact-diff features for: - mobile vs desktop - unified vs split Instead, the feature shares one compact-diff concept and only diverges where the upstream diff DOM requires separate handling. ## Files changed - `packages/ui/src/components/tool-call/diff-render.tsx` - `packages/ui/src/components/diff-viewer.tsx` - `packages/ui/src/styles/messaging/tool-call.css` - `packages/ui/src/types/message.ts` ## Validation Manual validation was performed in the running UI. Verified manually: - compact unified gutters on mobile - compact unified gutters on desktop - compact split gutters on desktop - tighter operator alignment in both modes Also verified: - `npm run typecheck` passes ## Notes - This PR is intended to address the compact diff layout problem described in the related issue. - Diff-specific CSS still lives in `tool-call.css`; future extraction into a smaller dedicated stylesheet is possible but not required for this change. --------- Co-authored-by: Shantur Rathore <i@shantur.com>	2026-04-01 23:13:32 +01:00
Shantur Rathore	2ffeb45a9c	fix(workflows): recheck non-dev PR authorization by author	2026-04-01 23:11:25 +01:00
Shantur Rathore	df16b64a95	Merge remote-tracking branch 'origin/main' into dev	2026-04-01 22:13:57 +01:00
VooDisss	f3c54df283	fix(server): show sane remote URLs for 0.0.0.0 binds (#262 ) Closes #261 ## Summary - improve startup remote URL selection when the server binds to `0.0.0.0` - print additional reachable remote URLs instead of advertising only the first external address - add targeted tests for address ordering and advertisability behavior ## Problem When CodeNomad was started with `--host 0.0.0.0`, the CLI chose the first external IPv4 address it discovered and displayed only that one as the remote URL. On Windows machines with WSL, Hyper-V, Docker, or other virtual adapters, that often surfaced a virtual `172.x.x.x` address even though a more useful LAN address such as `192.168.x.x` was also reachable and usable from other devices. That made remote access look broken or confusing even though the server itself was accessible. ## What changed - reuse the resolved network-address list for both: - primary remote URL selection - startup logging of additional reachable URLs - choose the primary remote URL from the advertisable external addresses instead of any external address - print `Other Accessible URLs` when multiple useful remote URLs are available - avoid hard-coding a preference like `192.168 > 10 > 172` - suppress link-local `169.254.*` addresses from user-facing advertised URLs - add tests covering: - stable ordering across RFC1918 address ranges - link-local addresses being non-advertisable - link-local-first discovery not stealing the primary LAN URL ## Why this approach This keeps address derivation in the network-address resolver layer and limits `index.ts` to startup wiring and presentation. It also fixes the misleading terminal output without redesigning binding behavior, TLS behavior, or the server API contract. ## Validation - `npm run typecheck --workspace @neuralnomads/codenomad` - `npx tsx --test '.\\src\\server\\__tests__\\network-addresses.test.ts'` ## Notes - this change is intentionally focused on selection and presentation of reachable addresses - it does not attempt a broader virtual-adapter classification policy beyond suppressing clearly low-value link-local addresses in user-facing output --------- Co-authored-by: Shantur Rathore <i@shantur.com>	2026-04-01 22:12:28 +01:00
Shantur Rathore	5658a9f62d	Merge remote-tracking branch 'origin/main' into dev	2026-04-01 21:35:09 +01:00
Shantur Rathore	9d6a5bcdc0	Refresh README with modern marketing-focused layout	2026-03-31 22:53:58 +01:00
Shantur Rathore	514b187b00	Update Worker caching	2026-03-31 22:51:04 +01:00
Shantur Rathore	240acb7729	Update README	2026-03-31 22:50:40 +01:00
Shantur Rathore	278b563c1a	Release 0.13.3 - Voice conversation mode, File editing, YOLO mode (#264 ) ## Thanks for contributions - PR #252 “feat: Enable file editing and saving” by @jchadwick - PR #256 “feat(ui): add session yolo mode controls” by @pascalandr - PR #257 “fix(tauri): sync native app version with package releases” by @pascalandr - PR #258 “fix(tauri): stop stale UI assets from shadowing desktop builds” by @pascalandr - PR #260 “fix(ui): escape raw HTML in user prompt messages” by @app/codenomadbot ## Highlights - Edit and save files directly in CodeNomad: Update workspace files in the built-in editor, save them without leaving the app, and get safer handling for unsaved changes or edit conflicts. - More control over session automation: Turn on per-session YOLO mode from the Status tab, keep it visible with a clear badge, and let long-running sessions continue auto-accepting prompts as expected. - Better voice conversation options: Use spoken summary mode for replies and keep conversation speech settings isolated per client, so one device’s voice preferences do not unexpectedly affect another. - Faster session recovery: Reload a session transcript from the sidebar and see when a session is retrying, including live status feedback. ## What’s Improved - Smoother desktop setup: Desktop builds now bundle the right CLI resources and handle microphone access more cleanly. - More reliable cross-platform desktop behavior: Windows process handling and npm invocation are safer, reducing environment-specific issues. - Clearer session status visibility: Retrying sessions now show more useful state in the sidebar and header, so it is easier to tell what is happening. - Cleaner in-app feedback: Long toast messages wrap properly, GitHub star counts display more cleanly, and message/code rendering behaves more predictably. ## Fixes - Safer prompt rendering: Raw HTML in user prompts is escaped so messages display safely instead of being interpreted. - More reliable code previews: Incomplete syntax highlighting results are no longer cached, which helps prevent broken-looking file views. - Better voice handoff: Conversation playback stops when voice input starts, avoiding overlapping speech. - More dependable desktop releases: Native app versions now stay aligned with package releases, and stale UI assets no longer shadow new desktop builds. ### Contributors - @jchadwick - @pascalandr	2026-03-31 20:33:43 +01:00
Shantur Rathore	27bccb8d6b	Release v0.13.1 - Voice mode, Super speedy streaming, and a lot more (#255 ) ## Thanks for contributions - PR [#249](https://github.com/NeuralNomadsAI/CodeNomad/pull/249) "feat(speech): add prompt voice input" by [@shantur](https://github.com/shantur) - PR [#243](https://github.com/NeuralNomadsAI/CodeNomad/pull/243) "feat(i18n): Hebrew locale + full RTL support" by [@MusiCode1](https://github.com/MusiCode1) - PR [#241](https://github.com/NeuralNomadsAI/CodeNomad/pull/241) "feat(lazy loading): Implement virtual list with virtua" by [@pixellos](https://github.com/pixellos) - PR [#240](https://github.com/NeuralNomadsAI/CodeNomad/pull/240) "fix(tauri): force Windows process tree shutdown" by [@pascalandr](https://github.com/pascalandr) - PR [#239](https://github.com/NeuralNomadsAI/CodeNomad/pull/239) "perf(ui): split right panel and secondary viewer chunks" by [@pascalandr](https://github.com/pascalandr) - PR [#238](https://github.com/NeuralNomadsAI/CodeNomad/pull/238) "perf(ui): defer locale and overlay bundles" by [@pascalandr](https://github.com/pascalandr) - PR [#236](https://github.com/NeuralNomadsAI/CodeNomad/pull/236) "Suppress OS notifications for subagent (child) sessions" by `@app/codenomadbot` - PR [#235](https://github.com/NeuralNomadsAI/CodeNomad/pull/235) "fix(ui): unwrap pasted placeholders in slash commands" by `@app/codenomadbot` - PR [#232](https://github.com/NeuralNomadsAI/CodeNomad/pull/232) "fix(tauri): stop CLI process group on exit" by `@app/codenomadbot` - PR [#229](https://github.com/NeuralNomadsAI/CodeNomad/pull/229) "feat(ui): add RTL support for Hebrew/Arabic text" by [@MusiCode1](https://github.com/MusiCode1) - PR [#227](https://github.com/NeuralNomadsAI/CodeNomad/pull/227) "fix(tauri): improve Windows desktop runtime behavior" by [@pascalandr](https://github.com/pascalandr) - PR [#226](https://github.com/NeuralNomadsAI/CodeNomad/pull/226) "fix(tauri): restore desktop menu controls and fullscreen shortcut" by [@pascalandr](https://github.com/pascalandr) - PR [#225](https://github.com/NeuralNomadsAI/CodeNomad/pull/225) "fix(tauri): restore external links in the folder picker" by [@pascalandr](https://github.com/pascalandr) - PR [#224](https://github.com/NeuralNomadsAI/CodeNomad/pull/224) "fix(tauri): sync server UI bundle during prebuild" by [@pascalandr](https://github.com/pascalandr) - PR [#215](https://github.com/NeuralNomadsAI/CodeNomad/pull/215) "perf(ui): lazy-load markdown and defer diff rendering" by [@pascalandr](https://github.com/pascalandr) ## Highlights - Voice-first conversations: Start prompts with voice input, configure speech behavior from settings, and listen back to assistant responses with message playback and conversation playback controls. - A complete Hebrew + RTL experience: CodeNomad now ships with a full Hebrew locale and much broader right-to-left support, making the app feel natural for Hebrew users while improving Arabic text rendering too. - A much faster experience in long chats: The new virtualized message list, deferred markdown and diff rendering, and more selective loading for heavy UI surfaces make large sessions feel noticeably smoother. ## What's Improved - More flexible speech controls: Speech settings and playback modes now adapt better to different browsers and platform capabilities. - Cleaner prompt workflow: The prompt includes a quick clear action, a simpler recording indicator, and a more polished mic control layout. - Faster startup and lighter heavy views: Locale bundles, overlays, right-panel viewers, picker flows, markdown, and diff surfaces all load more lazily to reduce upfront UI work. - Less notification spam: Subagent sessions no longer fire OS notifications, so important interruptions are easier to notice. - Better RTL behavior across the whole interface: Session names, tool outputs, markdown blocks, file views, selectors, and layout controls behave more consistently in right-to-left contexts. ## Fixes - More reliable Windows desktop behavior: Process cleanup is stronger during app shutdown, background CLI process trees are terminated more reliably, desktop identity/metadata is aligned more cleanly, and stray console windows are hidden during startup and exit. - Cleaner shutdown on macOS and Linux: Desktop quit/close now stops the spawned CLI process group more reliably, reducing leftover background processes after exit. - Restored desktop actions: External links in the folder picker work again, and the desktop View/Window controls plus the fullscreen shortcut are back. - More stable streaming and scrolling: Reasoning streams stay pinned more consistently, follow behavior is less jumpy, spacing is cleaner in virtualized conversations, and session switching retains position more smoothly. - Safer slash command pasting: Pasted placeholders are resolved correctly before slash commands run, so long pasted inputs behave like normal prompts. - More dependable desktop packaging: Tauri prebuild now refreshes the server UI bundle correctly, which avoids packaged desktop builds picking up stale UI assets. - Clearer speech compatibility handling: Streaming playback limitations are surfaced more cleanly instead of failing in a confusing way. ### Contributors - [@pascalandr](https://github.com/pascalandr) - [@MusiCode1](https://github.com/MusiCode1) - [@pixellos](https://github.com/pixellos)	2026-03-27 19:58:35 +00:00
Shantur Rathore	153065d025	Merge pull request #214 from Pagecran/ready/tauri-auth-cookie-isolation fix(tauri): isolate desktop auth cookies per app	2026-03-15 17:53:06 +00:00
Pascal André	2abda0e6b4	fix(desktop): isolate Electron auth cookies per app Make the legacy Electron desktop client generate and pass a per-launch auth cookie name too, so parallel desktop instances stop clobbering each other's localhost session cookie just like the Tauri client.	2026-03-15 09:38:00 +01:00
Pascal André	800133361d	fix(tauri): remove stray perf emission from auth cookie PR Drop the startup instrumentation call that leaked into the auth-cookie isolation branch. The helper is not defined on this PR branch, and the PR does not need to serialize the generated cookie name to fix the multi-instance auth collision.	2026-03-15 01:10:05 +01:00
Pascal André	034cb5dea9	fix(tauri): isolate desktop auth cookies per app	2026-03-14 23:31:46 +01:00
Shantur Rathore	d7ab84f245	Merge pull request #213 from NeuralNomadsAI/dev Release v0.12.3	2026-03-13 21:27:30 +00:00
Shantur Rathore	201988b97c	Merge pull request #205 from NeuralNomadsAI/dev Release v0.12.1 - Histogram, bulk delete, snappier long sessions and more	2026-03-04 10:42:43 +00:00
Shantur Rathore	6a6fcff2c8	Merge pull request #195 from NeuralNomadsAI/dev Release v0.11.4 - Mobile Fullscreen mode and lots of improvements	2026-02-22 17:15:22 +00:00
Shantur Rathore	f29f197b9a	Merge pull request #177 from NeuralNomadsAI/dev v0.11.1 Release - Latest OC Support, Improved file/folder picker, Dev Releases and lot more	2026-02-16 16:31:17 +00:00
Shantur Rathore	dbde403b3e	Merge pull request #150 from NeuralNomadsAI/dev Release v0.10.3 - Viewer for Changes, Git Diff and workspace files along with UX fixes	2026-02-11 16:09:49 +00:00
Shantur Rathore	230c981cc2	Merge pull request #134 from NeuralNomadsAI/dev Release v0.10.2	2026-02-09 01:08:06 +00:00
Shantur Rathore	34978c87fb	Merge pull request #125 from NeuralNomadsAI/dev Release v0.10.1 - Worktrees, HTTPS, PWA and more	2026-02-08 18:07:08 +00:00
Shantur Rathore	3e6d0a402c	Merge pull request #116 from NeuralNomadsAI/dev Release v0.9.4 - Context manipulation, Session search, Themes and more	2026-02-03 20:26:17 +00:00
Shantur Rathore	e81c5f6443	Merge pull request #105 from NeuralNomadsAI/dev Release v0.9.3 - Tauri fixes, Skip Auth, Better Question tool and more	2026-01-30 09:18:20 +00:00
Shantur Rathore	b0d27bd127	Merge pull request #99 from NeuralNomadsAI/dev Release v0.9.2 - Model Favourites and Multi-Lang UI	2026-01-26 21:02:29 +00:00
Shantur Rathore	7576470295	Merge pull request #96 from NeuralNomadsAI/dev Release v0.9.1 - Thinking variant, Robust process cleanup	2026-01-25 18:08:18 +00:00
Shantur Rathore	6d32e09db0	Merge pull request #94 from NeuralNomadsAI/dev Release 0.9.0	2026-01-24 16:47:37 +00:00
Shantur Rathore	503cb3a02e	Merge pull request #91 from NeuralNomadsAI/dev Release v0.8.1 - Support apply_patch tool	2026-01-22 23:07:37 +00:00
Shantur Rathore	0250c6350f	Merge pull request #89 from NeuralNomadsAI/dev Change minVersion to 0.8.0	2026-01-22 19:17:20 +00:00
Shantur Rathore	24cc8fe939	Merge pull request #88 from NeuralNomadsAI/dev Release v0.8.0 - Auto update UI and more fixes	2026-01-22 18:58:51 +00:00
Shantur Rathore	282b234a7c	Merge pull request #87 from NeuralNomadsAI/dev Release 0.7.6 - Question tool fixes + Split test	2026-01-22 17:20:19 +00:00
Shantur Rathore	4ba088a876	Merge pull request #82 from NeuralNomadsAI/dev Release 0.7.5	2026-01-21 12:27:47 +00:00
Shantur Rathore	7b1817d606	Merge pull request #80 from NeuralNomadsAI/dev Release 0.7.4	2026-01-20 19:30:19 +00:00
Shantur Rathore	5bc3c23ec5	Merge pull request #79 from NeuralNomadsAI/dev Release 0.7.3 - Bug fixes and minor improvements	2026-01-20 18:53:39 +00:00
Shantur Rathore	127a51e3c3	Merge pull request #72 from NeuralNomadsAI/dev Release v0.7.2 - Test1	2026-01-15 20:59:06 +00:00
Shantur Rathore	daa22b6d8c	Merge pull request #68 from NeuralNomadsAI/dev Release v0.7.1	2026-01-15 08:42:55 +00:00
Shantur Rathore	23f2de2d7e	Merge pull request #66 from NeuralNomadsAI/dev Actually Release 0.7.0	2026-01-14 21:56:13 +00:00
Shantur Rathore	80c9b76709	Merge pull request #65 from NeuralNomadsAI/dev Release v0.7.0	2026-01-14 21:46:38 +00:00
Shantur Rathore	a29b77d60b	Merge pull request #59 from NeuralNomadsAI/dev v0.6.0 Release	2026-01-09 21:55:50 +00:00