fix(chat): stop orphaned tool results rendering as raw text during pagination

Sessions load in pages from the bottom up, so a loaded page often contains
a tool_result whose tool_use sits in an older, not-yet-loaded page. That
result wasn't recognized as attached, so it was pushed as a standalone
assistant message and its raw output rendered as unstyled Markdown. It only
"fixed itself" once the user scrolled up far enough to load the page with
the matching tool_use.

Skip results that have a toolId but no matching tool_use in the loaded set —
they attach and render correctly (inside their command row/group) once the
older page loads. Results with no toolId still render as before.

server/browser-use-mcp.ts

@@ -69,7 +69,7 @@ const sessionIdSchema = {
 const tools: ToolDefinition[] = [
   {
     name: 'browser_create_session',
-    description: 'Create a Browser session that the agent can control. Provide profileName to use a specific persistent profile; when omitted, the configured persistent profile is used only if session persistence is enabled, otherwise a temporary session is created.',
+    description: 'Create a temporary Browser session that the agent can control. Optionally provide a background profileName to reuse cookies and storage.',
     inputSchema: {
       type: 'object',
       properties: {

server/index.js

@@ -64,7 +64,7 @@ import providerRoutes from './modules/providers/provider.routes.js';
 import voiceRoutes from './voice-proxy.js';
 import browserUseRoutes from './modules/browser-use/browser-use.routes.js';
 import browserUseMcpRoutes from './modules/browser-use/browser-use-mcp.routes.js';
-import { browserUseService, VIEWER_COOKIE_NAME } from './modules/browser-use/index.js';
+import { browserUseService } from './modules/browser-use/browser-use.service.js';
 import { startEnabledPluginServers, stopAllPlugins, getPluginPort } from './utils/plugin-process-manager.js';
 import { initializeDatabase, projectsDb, sessionsDb } from './modules/database/index.js';
 import { configureWebPush } from './services/vapid-keys.js';
@@ -146,8 +146,6 @@ const wss = createWebSocketServer(server, {
         shouldAutoOpenUrlFromOutput,
     },
     getPluginPort,
-    browserUseViewer: (ws, pathname) => browserUseService.handleViewerWebSocket(ws, pathname),
-    authenticateBrowserUseViewer: authenticateBrowserUseViewerPath,
 });
 
 // Make WebSocket server available to routes
@@ -213,42 +211,11 @@ app.use('/api/gemini', authenticateToken, geminiRoutes);
 // Plugins API Routes (protected)
 app.use('/api/plugins', authenticateToken, pluginsRoutes);
 
-function readCookieValue(header, name) {
-    if (!header) return null;
-    const prefix = `${name}=`;
-    const cookie = String(header).split(';').map((part) => part.trim()).find((part) => part.startsWith(prefix));
-    return cookie ? decodeURIComponent(cookie.slice(prefix.length)) : null;
-}
-
-function authenticateBrowserUseViewerPath(pathname, token) {
-    const parts = String(pathname || '').split('/');
-    const sessionId = parts[4];
-    if (parts[1] !== 'api' || parts[2] !== 'browser-use' || parts[3] !== 'sessions' || parts[5] !== 'viewer' || parts[6] !== 'websockify') {
-        return false;
-    }
-    return browserUseService.validateViewerToken(decodeURIComponent(sessionId), token);
-}
-
-function authenticateBrowserUse(req, res, next) {
-    const match = /^\/sessions\/([^/]+)\/viewer(?:\/|$)/.exec(req.path || '');
-    if (match) {
-        const sessionId = decodeURIComponent(match[1]);
-        const token = typeof req.query.viewerToken === 'string'
-            ? req.query.viewerToken
-            : readCookieValue(req.headers.cookie, VIEWER_COOKIE_NAME);
-        if (browserUseService.validateViewerToken(sessionId, token)) {
-            return next();
-        }
-        return res.status(401).json({ error: 'Browser viewer access requires a valid session token.' });
-    }
-    return authenticateToken(req, res, next);
-}
-
 // Browser MCP bridge API (local token protected)
 app.use('/api/browser-use-mcp', browserUseMcpRoutes);
 
 // Browser API Routes (protected)
-app.use('/api/browser-use', authenticateBrowserUse, browserUseRoutes);
+app.use('/api/browser-use', authenticateToken, browserUseRoutes);
 
 // Unified provider MCP routes (protected)
 app.use('/api/providers', authenticateToken, providerRoutes);

server/modules/browser-use/browser-use.routes.ts

@@ -1,7 +1,6 @@
 import express from 'express';
 
 import { browserUseService } from '@/modules/browser-use/browser-use.service.js';
-import { VIEWER_COOKIE_NAME, VIEWER_TOKEN_TTL_MS } from '@/modules/browser-use/browser-use.viewer.js';
 
 const router = express.Router();
 
@@ -9,45 +8,6 @@ function readParam(value: string | string[] | undefined): string {
   return Array.isArray(value) ? value[0] || '' : value || '';
 }
 
-const SAFE_VIEWER_ROOT_FILES = new Set(['vnc.html', 'favicon.ico', 'manifest.json']);
-const SAFE_VIEWER_ROOT_DIRS = new Set(['app', 'core', 'vendor', 'assets', 'images', 'utils']);
-
-function isSafeViewerPath(viewerPath: string): boolean {
-  if (!viewerPath || viewerPath.startsWith('/') || viewerPath.includes('..') || viewerPath.includes('\\')) {
-    return false;
-  }
-
-  if (!/^[A-Za-z0-9][A-Za-z0-9._~/-]*$/.test(viewerPath)) {
-    return false;
-  }
-
-  if (SAFE_VIEWER_ROOT_FILES.has(viewerPath)) {
-    return true;
-  }
-
-  const [rootDir] = viewerPath.split('/');
-  return Boolean(rootDir && SAFE_VIEWER_ROOT_DIRS.has(rootDir));
-}
-
-function isSecureRequest(req: express.Request): boolean {
-  const forwardedProto = String(req.headers['x-forwarded-proto'] || '')
-    .split(',')[0]
-    .trim()
-    .toLowerCase();
-  return req.secure || forwardedProto === 'https';
-}
-
-function readQueryString(originalUrl: string): string {
-  const queryIndex = originalUrl.indexOf('?');
-  if (queryIndex < 0) {
-    return '';
-  }
-  const params = new URLSearchParams(originalUrl.slice(queryIndex + 1));
-  params.delete('viewerToken');
-  const nextQuery = params.toString();
-  return nextQuery ? `?${nextQuery}` : '';
-}
-
 router.get('/status', async (_req, res) => {
   try {
     res.json({ success: true, data: await browserUseService.getStatus() });
@@ -102,60 +62,13 @@ router.get('/sessions', async (_req, res) => {
   try {
     res.json({ success: true, data: { sessions: await browserUseService.listSessions() } });
   } catch (error) {
-    res.status(500).json({
+    res.status(401).json({
       success: false,
       error: error instanceof Error ? error.message : 'Failed to list browser sessions.',
     });
   }
 });
 
-router.get('/sessions/:sessionId/viewer/*', async (req, res) => {
-  try {
-    const sessionId = readParam(req.params.sessionId);
-    const originalPath = req.originalUrl.split('?')[0] || '';
-    const viewerMarker = `/sessions/${sessionId}/viewer/`;
-    const markerIndex = originalPath.indexOf(viewerMarker);
-    const rawViewerPath = markerIndex >= 0 ? originalPath.slice(markerIndex + viewerMarker.length) : 'vnc.html';
-    const viewerPath = decodeURIComponent(rawViewerPath).replace(/^\/+/, '') || 'vnc.html';
-    if (!isSafeViewerPath(viewerPath)) {
-      res.status(400).json({ success: false, error: 'Invalid Browser viewer path.' });
-      return;
-    }
-
-    const viewerToken = readParam(req.query.viewerToken as string | string[] | undefined);
-    if (viewerPath === 'vnc.html' && browserUseService.validateViewerToken(sessionId, viewerToken)) {
-      res.cookie(VIEWER_COOKIE_NAME, viewerToken, {
-        httpOnly: true,
-        sameSite: 'lax',
-        secure: isSecureRequest(req),
-        maxAge: VIEWER_TOKEN_TTL_MS,
-        path: '/api/browser-use/sessions/' + encodeURIComponent(sessionId) + '/viewer',
-      });
-    }
-    const target = browserUseService.getViewerProxyTarget(sessionId);
-    const query = readQueryString(req.originalUrl);
-    const upstream = await fetch(`http://127.0.0.1:${target.websockifyPort}/${viewerPath}${query}`, {
-      headers: {
-        accept: String(req.headers.accept || '*/*'),
-      },
-    });
-    const contentType = upstream.headers.get('content-type');
-    if (contentType) {
-      res.setHeader('content-type', contentType);
-    }
-    const cacheControl = viewerPath === 'vnc.html' ? 'no-store' : 'public, max-age=3600';
-    res.setHeader('cache-control', cacheControl);
-    res.status(upstream.status);
-    const body = Buffer.from(await upstream.arrayBuffer());
-    res.send(body);
-  } catch (error) {
-    res.status(404).json({
-      success: false,
-      error: error instanceof Error ? error.message : 'Browser viewer is not available.',
-    });
-  }
-});
-
 router.post('/sessions/:sessionId/stop', async (req, res) => {
   try {
     const result = await browserUseService.stopSession(readParam(req.params.sessionId));

server/modules/browser-use/browser-use.service.ts

@@ -1,86 +1,128 @@
 import { createRequire } from 'node:module';
-import { randomUUID } from 'node:crypto';
-import { execFileSync, spawn } from 'node:child_process';
+import { randomBytes, randomUUID } from 'node:crypto';
+import { spawn } from 'node:child_process';
 import fs from 'node:fs';
-import net from 'node:net';
 import os from 'node:os';
 import path from 'node:path';
 
-import { WebSocket } from 'ws';
-
+import { appConfigDb } from '@/modules/database/index.js';
 import { providerMcpService } from '@/modules/providers/index.js';
 import { getModuleDir } from '@/utils/runtime-paths.js';
 
-import {
-  getOrCreateMcpToken,
-  getProfilePath,
-  normalizeBrowserBackend,
-  PROFILE_ROOT,
-  readSettings,
-  resolveSessionProfileName,
-  useVisibleCamoufoxBackend,
-  writeSettings,
-} from './browser-use.settings.js';
-import type {
-  BrowserUseSession,
-  BrowserUseSettings,
-  PublicBrowserUseSession,
-  RuntimeHandle,
-  RuntimeProbe,
-  RuntimeReadiness,
-} from './browser-use.types.js';
-import { getViewerUrl, handleViewerWebSocket, VIEWER_TOKEN_TTL_MS } from './browser-use.viewer.js';
-
 const require = createRequire(import.meta.url);
 const __dirname = getModuleDir(import.meta.url);
 const IS_PLATFORM = process.env.VITE_IS_PLATFORM === 'true';
 const MAX_SESSIONS_PER_OWNER = Number.parseInt(process.env.CLOUDCLI_BROWSER_USE_MAX_SESSIONS_PER_OWNER || '3', 10);
 const SESSION_TTL_MS = Number.parseInt(process.env.CLOUDCLI_BROWSER_USE_SESSION_TTL_MS || String(30 * 60 * 1000), 10);
+const BROWSER_USE_SETTINGS_KEY = 'browser_use_settings';
+const BROWSER_USE_MCP_TOKEN_KEY = 'browser_use_mcp_token';
+
+type BrowserUseRuntime = 'cloud' | 'local';
+type BrowserUseSessionStatus = 'ready' | 'stopped' | 'unavailable';
+
+type BrowserUseSession = {
+  id: string;
+  ownerId: string;
+  createdBy: 'agent';
+  runtime: BrowserUseRuntime;
+  status: BrowserUseSessionStatus;
+  url: string | null;
+  title: string | null;
+  screenshotDataUrl: string | null;
+  createdAt: string;
+  updatedAt: string;
+  lastAction: string | null;
+  message: string | null;
+  profileName: string | null;
+  viewport: {
+    width: number;
+    height: number;
+  } | null;
+  cursor: {
+    x: number;
+    y: number;
+    actor: 'agent';
+  } | null;
+};
+
+type PublicBrowserUseSession = Omit<BrowserUseSession, 'ownerId'>;
+
+type RuntimeHandle = {
+  browser?: any;
+  context?: any;
+  page?: any;
+};
+
+type BrowserUseSettings = {
+  enabled: boolean;
+};
+
+type RuntimeReadiness = {
+  playwright: any | null;
+  playwrightInstalled: boolean;
+  chromiumInstalled: boolean;
+  chromiumExecutablePath: string | null;
+  installInProgress: boolean;
+  installMessage: string | null;
+};
+
+type RuntimeProbe = Omit<RuntimeReadiness, 'installInProgress' | 'installMessage'>;
 
 const sessions = new Map<string, BrowserUseSession>();
 const handles = new Map<string, RuntimeHandle>();
-const reservedDisplays = new Set<string>();
-const viewerTokens = new Map<string, { token: string; expiresAt: number }>();
 let installPromise: Promise<{ success: boolean; message: string }> | null = null;
 let lastInstallMessage: string | null = null;
 let runtimeProbeCache: { value: RuntimeProbe; updatedAt: number } | null = null;
 
+const DEFAULT_SETTINGS: BrowserUseSettings = {
+  enabled: false,
+};
 const AGENT_OWNER_ID = 'agent';
+const PROFILE_ROOT = path.join(os.homedir(), '.cloudcli', 'browser-use', 'profiles');
 const MCP_SERVER_NAME = 'cloudcli-browser';
 const LEGACY_MCP_SERVER_NAMES = ['cloudcli-browser-use'];
 const RUNTIME_READINESS_CACHE_TTL_MS = 30_000;
-const VISIBLE_BROWSER_ENABLED = process.env.CLOUDCLI_BROWSER_USE_VISIBLE !== 'false';
-const RUNTIME_ROOT = process.env.CLOUDCLI_BROWSER_USE_RUNTIME_ROOT || '/opt/claudecodeui/.runtime-browser';
-const NOVNC_ROOT = process.env.CLOUDCLI_BROWSER_USE_NOVNC_ROOT || path.join(RUNTIME_ROOT, 'novnc');
-const X11VNC_BIN = process.env.CLOUDCLI_BROWSER_USE_X11VNC_BIN || path.join(RUNTIME_ROOT, 'rootfs/usr/bin/x11vnc');
-const X11VNC_LIB_DIR = process.env.CLOUDCLI_BROWSER_USE_X11VNC_LIB_DIR || path.join(RUNTIME_ROOT, 'rootfs/usr/lib/x86_64-linux-gnu');
-const X11VNC_EXTRA_LIB_DIR = process.env.CLOUDCLI_BROWSER_USE_X11VNC_EXTRA_LIB_DIR || path.join(RUNTIME_ROOT, 'rootfs/lib/x86_64-linux-gnu');
-const LOG_RUNTIME_PROCESS_OUTPUT = process.env.CLOUDCLI_BROWSER_USE_RUNTIME_LOGS === 'true';
 
-function getRuntime(): 'cloud' | 'local' {
+function getRuntime(): BrowserUseRuntime {
   return IS_PLATFORM ? 'cloud' : 'local';
 }
 
-function getCamoufoxExecutablePath(): string | null {
-  const configured = process.env.CLOUDCLI_BROWSER_USE_CAMOUFOX_EXECUTABLE;
-  if (configured && fs.existsSync(configured)) {
-    return configured;
-  }
-
+function readSettings(): BrowserUseSettings {
   try {
-    const output = execFileSync(path.join(os.homedir(), '.local/bin/camoufox'), ['path'], {
-      encoding: 'utf8',
-      stdio: ['ignore', 'pipe', 'ignore'],
-    }).trim();
-    const executablePath = fs.statSync(output).isDirectory()
-      ? path.join(output, 'camoufox')
-      : output;
-    return fs.existsSync(executablePath) ? executablePath : null;
-  } catch {
-    return null;
+    const raw = appConfigDb.get(BROWSER_USE_SETTINGS_KEY);
+    if (!raw) {
+      return DEFAULT_SETTINGS;
+    }
+
+    const parsed = JSON.parse(raw) as Partial<BrowserUseSettings>;
+    return {
+      enabled: parsed.enabled === true,
+    };
+  } catch (error: any) {
+    console.warn('[Browser] Failed to read settings:', error?.message || error);
+    return DEFAULT_SETTINGS;
   }
 }
 
+function writeSettings(settings: BrowserUseSettings): BrowserUseSettings {
+  const normalized = {
+    enabled: settings.enabled === true,
+  };
+
+  appConfigDb.set(BROWSER_USE_SETTINGS_KEY, JSON.stringify(normalized));
+  return normalized;
+}
+
+function getOrCreateMcpToken(): string {
+  const existing = appConfigDb.get(BROWSER_USE_MCP_TOKEN_KEY);
+  if (existing) {
+    return existing;
+  }
+  const token = randomBytes(32).toString('hex');
+  appConfigDb.set(BROWSER_USE_MCP_TOKEN_KEY, token);
+  return token;
+}
+
 function getSetupMessage(settings: BrowserUseSettings, readiness: RuntimeReadiness): string {
   if (!settings.enabled) {
     return 'Browser is disabled in settings.';
@@ -90,26 +132,6 @@ function getSetupMessage(settings: BrowserUseSettings, readiness: RuntimeReadine
     return 'Install Playwright and Chromium to use browser sessions.';
   }
 
-  if (settings.browserBackend === 'camoufox-vnc' && !getCamoufoxExecutablePath()) {
-    return 'Camoufox is selected, but Camoufox is not installed.';
-  }
-
-  if (useVisibleCamoufoxBackend(settings)) {
-    if (!VISIBLE_BROWSER_ENABLED) {
-      return 'Camoufox is selected, but visible browser sessions are disabled.';
-    }
-    if (!getCamoufoxExecutablePath()) {
-      return 'Camoufox is selected, but Camoufox is not installed.';
-    }
-    if (!fs.existsSync(X11VNC_BIN)) {
-      return 'Camoufox is selected, but x11vnc is missing.';
-    }
-    if (!fs.existsSync(path.join(NOVNC_ROOT, 'vnc.html'))) {
-      return 'Camoufox is selected, but noVNC is missing.';
-    }
-    return readiness.installMessage || 'Camoufox runtime is not ready.';
-  }
-
   if (!readiness.chromiumInstalled) {
     return 'Playwright is installed, but Chromium is missing. Install the Chromium runtime to continue.';
   }
@@ -154,6 +176,24 @@ async function removeMcpServerFromAllProviders(name: string) {
   return results.map((result) => ({ ...result, name }));
 }
 
+function normalizeProfileName(profileName?: string | null): string | null {
+  const normalized = String(profileName || '').trim();
+  if (!normalized) {
+    return null;
+  }
+
+  return normalized.slice(0, 80);
+}
+
+function getProfilePath(profileName: string): string {
+  const safeName = profileName
+    .toLowerCase()
+    .replace(/[^a-z0-9._-]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+    .slice(0, 80) || 'default';
+  return path.join(PROFILE_ROOT, safeName);
+}
+
 function probeRuntime(): RuntimeProbe {
   const playwright = getPlaywright();
   const readiness: RuntimeProbe = {
@@ -198,175 +238,6 @@ function getRuntimeReadiness(options: { force?: boolean } = {}): RuntimeReadines
   };
 }
 
-function findAvailablePort(): Promise<number> {
-  return new Promise((resolve, reject) => {
-    const server = net.createServer();
-    server.on('error', reject);
-    server.listen(0, '127.0.0.1', () => {
-      const address = server.address();
-      server.close(() => {
-        if (typeof address === 'object' && address?.port) {
-          resolve(address.port);
-        } else {
-          reject(new Error('Failed to reserve a browser runtime port.'));
-        }
-      });
-    });
-  });
-}
-
-function delay(ms: number): Promise<void> {
-  return new Promise((resolve) => setTimeout(resolve, ms));
-}
-
-function isRuntimeProcessAlive(child: ReturnType<typeof spawn>): boolean {
-  return child.exitCode === null && child.signalCode === null && !child.killed;
-}
-
-function assertRuntimeProcessesAlive(processes: Array<ReturnType<typeof spawn>>, label: string) {
-  const exited = processes.find((child) => !isRuntimeProcessAlive(child));
-  if (exited) {
-    throw new Error(`${label} exited before the Browser viewer runtime was ready.`);
-  }
-}
-
-async function isPortListening(port: number): Promise<boolean> {
-  return new Promise((resolve) => {
-    const socket = net.createConnection({ host: '127.0.0.1', port });
-    let settled = false;
-    const finish = (listening: boolean) => {
-      if (settled) {
-        return;
-      }
-      settled = true;
-      socket.destroy();
-      resolve(listening);
-    };
-    socket.setTimeout(250);
-    socket.once('connect', () => finish(true));
-    socket.once('timeout', () => finish(false));
-    socket.once('error', () => finish(false));
-  });
-}
-
-async function waitForRuntimePort(
-  port: number,
-  label: string,
-  processes: Array<ReturnType<typeof spawn>>,
-  timeoutMs = 5_000,
-) {
-  const deadline = Date.now() + timeoutMs;
-  while (Date.now() < deadline) {
-    assertRuntimeProcessesAlive(processes, label);
-    if (await isPortListening(port)) {
-      return;
-    }
-    await delay(100);
-  }
-  assertRuntimeProcessesAlive(processes, label);
-  throw new Error(`${label} did not start listening on 127.0.0.1:${port}.`);
-}
-
-function killRuntimeProcesses(processes?: Array<ReturnType<typeof spawn>>) {
-  processes?.forEach((child) => child.kill('SIGTERM'));
-}
-
-function reserveDisplay(): string {
-  for (let index = 90; index < 140; index += 1) {
-    const display = `:${index}`;
-    if (!reservedDisplays.has(display)) {
-      reservedDisplays.add(display);
-      return display;
-    }
-  }
-
-  throw new Error('No browser display slots are available.');
-}
-
-function spawnRuntimeProcess(command: string, args: string[], options: { env?: NodeJS.ProcessEnv } = {}) {
-  const child = spawn(command, args, {
-    env: { ...process.env, ...options.env },
-    stdio: ['ignore', 'ignore', 'pipe'],
-  });
-  child.stderr?.on('data', (chunk) => {
-    if (!LOG_RUNTIME_PROCESS_OUTPUT) {
-      return;
-    }
-    const text = String(chunk).trim();
-    if (text) {
-      console.warn(`[Browser runtime] ${path.basename(command)}: ${text}`);
-    }
-  });
-  child.on('error', (error) => {
-    console.warn(`[Browser runtime] ${path.basename(command)} failed:`, error.message);
-  });
-  return child;
-}
-
-async function startVisibleRuntime(): Promise<NonNullable<RuntimeHandle['viewer']> & { processes: Array<ReturnType<typeof spawn>> }> {
-  const display = reserveDisplay();
-  const vncPort = await findAvailablePort();
-  const websockifyPort = await findAvailablePort();
-  const processes: Array<ReturnType<typeof spawn>> = [];
-
-  try {
-    processes.push(spawnRuntimeProcess('Xvfb', [
-      display,
-      '-screen',
-      '0',
-      '1440x900x24',
-      '-ac',
-      '-nolisten',
-      'tcp',
-    ]));
-    await delay(700);
-    assertRuntimeProcessesAlive(processes, 'Xvfb');
-
-    if (!fs.existsSync(X11VNC_BIN)) {
-      throw new Error(`x11vnc is missing at ${X11VNC_BIN}.`);
-    }
-    processes.push(spawnRuntimeProcess(X11VNC_BIN, [
-      '-display',
-      display,
-      '-localhost',
-      '-forever',
-      '-shared',
-      '-rfbport',
-      String(vncPort),
-      '-nopw',
-      '-quiet',
-    ], {
-      env: {
-        LD_LIBRARY_PATH: `${X11VNC_LIB_DIR}:${X11VNC_EXTRA_LIB_DIR}:${process.env.LD_LIBRARY_PATH || ''}`,
-      },
-    }));
-    await waitForRuntimePort(vncPort, 'x11vnc', processes);
-
-    if (!fs.existsSync(path.join(NOVNC_ROOT, 'vnc.html'))) {
-      throw new Error(`noVNC is missing at ${NOVNC_ROOT}.`);
-    }
-    processes.push(spawnRuntimeProcess(path.join(os.homedir(), '.local/bin/websockify'), [
-      '--web',
-      NOVNC_ROOT,
-      `127.0.0.1:${websockifyPort}`,
-      `127.0.0.1:${vncPort}`,
-    ]));
-    await waitForRuntimePort(websockifyPort, 'websockify', processes);
-
-    return {
-      display,
-      vncPort,
-      websockifyPort,
-      noVncRoot: NOVNC_ROOT,
-      processes,
-    };
-  } catch (error) {
-    killRuntimeProcesses(processes);
-    reservedDisplays.delete(display);
-    throw error;
-  }
-}
-
 const INSTALL_COMMAND_TIMEOUT_MS = Number.parseInt(
   process.env.CLOUDCLI_BROWSER_USE_INSTALL_TIMEOUT_MS || String(10 * 60 * 1000),
   10,
@@ -479,45 +350,6 @@ function publicSession(session: BrowserUseSession): PublicBrowserUseSession {
   return publicFields;
 }
 
-function getSessionViewer(sessionId: string): RuntimeHandle['viewer'] | null {
-  const session = sessions.get(sessionId);
-  if (!session || session.ownerId !== AGENT_OWNER_ID || session.status !== 'ready') {
-    return null;
-  }
-  return handles.get(sessionId)?.viewer || null;
-}
-
-function createViewerToken(sessionId: string): string {
-  const token = randomUUID();
-  viewerTokens.set(sessionId, {
-    token,
-    expiresAt: Date.now() + VIEWER_TOKEN_TTL_MS,
-  });
-  return token;
-}
-
-function deleteViewerToken(sessionId: string) {
-  viewerTokens.delete(sessionId);
-}
-
-function validateViewerTokenForSession(sessionId: string, token: string | null | undefined): boolean {
-  if (!token) {
-    return false;
-  }
-  const session = sessions.get(sessionId);
-  const viewer = session?.ownerId === AGENT_OWNER_ID && session.status === 'ready'
-    ? handles.get(sessionId)?.viewer || null
-    : null;
-  const stored = viewerTokens.get(sessionId);
-  if (!viewer || !stored || stored.token !== token || stored.expiresAt < Date.now()) {
-    if (stored?.expiresAt && stored.expiresAt < Date.now()) {
-      viewerTokens.delete(sessionId);
-    }
-    return false;
-  }
-  return true;
-}
-
 function ownerSessions(ownerId: string): BrowserUseSession[] {
   return [...sessions.values()].filter((session) => session.ownerId === ownerId);
 }
@@ -525,13 +357,8 @@ function ownerSessions(ownerId: string): BrowserUseSession[] {
 async function closeHandle(sessionId: string): Promise<void> {
   const handle = handles.get(sessionId);
   handles.delete(sessionId);
-  deleteViewerToken(sessionId);
   await handle?.context?.close?.().catch(() => undefined);
   await handle?.browser?.close().catch(() => undefined);
-  killRuntimeProcesses(handle?.processes);
-  if (handle?.viewer?.display) {
-    reservedDisplays.delete(handle.viewer.display);
-  }
 }
 
 async function expireStaleSessions(now = Date.now()): Promise<void> {
@@ -597,11 +424,6 @@ export const browserUseService = {
     const current = readSettings();
     const nextSettings = {
       enabled: typeof settings.enabled === 'boolean' ? settings.enabled : current.enabled,
-      persistSessions: typeof settings.persistSessions === 'boolean' ? settings.persistSessions : current.persistSessions,
-      defaultProfileName: typeof settings.defaultProfileName === 'string'
-        ? settings.defaultProfileName
-        : current.defaultProfileName,
-      browserBackend: settings.browserBackend ? normalizeBrowserBackend(settings.browserBackend) : current.browserBackend,
     };
 
     const next = writeSettings(nextSettings);
@@ -617,28 +439,14 @@ export const browserUseService = {
   async getStatus() {
     const settings = readSettings();
     const readiness = getRuntimeReadiness();
-    const useVisibleBackend = useVisibleCamoufoxBackend(settings);
-    const visibleCamoufoxReady = useVisibleBackend
-      && VISIBLE_BROWSER_ENABLED
-      && readiness.playwrightInstalled
-      && Boolean(getCamoufoxExecutablePath())
-      && fs.existsSync(X11VNC_BIN)
-      && fs.existsSync(path.join(NOVNC_ROOT, 'vnc.html'));
-    const available = settings.enabled
-      && readiness.playwrightInstalled
-      && (useVisibleBackend ? visibleCamoufoxReady : readiness.chromiumInstalled);
+    const available = settings.enabled && readiness.playwrightInstalled && readiness.chromiumInstalled;
 
     return {
       enabled: settings.enabled,
       runtime: getRuntime(),
-      backend: useVisibleBackend ? 'camoufox-vnc' : 'playwright',
-      browserBackend: settings.browserBackend,
       available,
       playwrightInstalled: readiness.playwrightInstalled,
       chromiumInstalled: readiness.chromiumInstalled,
-      camoufoxInstalled: Boolean(getCamoufoxExecutablePath()),
-      noVncInstalled: fs.existsSync(path.join(NOVNC_ROOT, 'vnc.html')),
-      x11vncInstalled: fs.existsSync(X11VNC_BIN),
       installInProgress: readiness.installInProgress,
       sessionCount: sessions.size,
       message: available
@@ -697,7 +505,7 @@ export const browserUseService = {
     }
 
     await expireStaleSessions();
-    const profileName = resolveSessionProfileName(settings, options?.profileName);
+    const profileName = normalizeProfileName(options?.profileName);
 
     const now = new Date().toISOString();
     const session: BrowserUseSession = {
@@ -713,9 +521,6 @@ export const browserUseService = {
       updatedAt: now,
       lastAction: 'create',
       message: null,
-      backend: useVisibleCamoufoxBackend(settings) ? 'camoufox-vnc' : 'playwright',
-      viewerUrl: null,
-      viewerEmbedUrl: null,
       profileName,
       viewport: { width: 1440, height: 900 },
       cursor: null,
@@ -727,13 +532,7 @@ export const browserUseService = {
     }
 
     const readiness = getRuntimeReadiness();
-    const useVisibleBackend = useVisibleCamoufoxBackend(settings);
-    const visibleCamoufoxReady = useVisibleBackend
-      && VISIBLE_BROWSER_ENABLED
-      && Boolean(getCamoufoxExecutablePath())
-      && fs.existsSync(X11VNC_BIN)
-      && fs.existsSync(path.join(NOVNC_ROOT, 'vnc.html'));
-    if (!settings.enabled || !readiness.playwrightInstalled || !readiness.playwright || (useVisibleBackend ? !visibleCamoufoxReady : !readiness.chromiumInstalled)) {
+    if (!settings.enabled || !readiness.playwrightInstalled || !readiness.chromiumInstalled || !readiness.playwright) {
       session.message = getSetupMessage(settings, readiness);
       sessions.set(session.id, session);
       return publicSession(session);
@@ -742,73 +541,31 @@ export const browserUseService = {
     let browser: any | undefined;
     let context: any | undefined;
     let page: any;
-    let viewer: RuntimeHandle['viewer'];
-    let processes: RuntimeHandle['processes'];
-    const launchOptions: Record<string, unknown> = {
-      headless: !useVisibleBackend,
+    const launchOptions = {
+      headless: true,
       args: ['--disable-dev-shm-usage'],
     };
-    const contextOptions = useVisibleBackend
-      ? { viewport: null }
-      : {
-        viewport: { width: 1440, height: 900 },
-        serviceWorkers: 'block',
-      };
+    const contextOptions = {
+      viewport: { width: 1440, height: 900 },
+      serviceWorkers: 'block',
+    };
 
-    try {
-      if (useVisibleBackend) {
-        const camoufoxExecutable = getCamoufoxExecutablePath();
-        if (!camoufoxExecutable) {
-          throw new Error('Camoufox is not installed.');
-        }
-        const runtime = await startVisibleRuntime();
-        viewer = {
-          display: runtime.display,
-          vncPort: runtime.vncPort,
-          websockifyPort: runtime.websockifyPort,
-          noVncRoot: runtime.noVncRoot,
-        };
-        processes = runtime.processes;
-        launchOptions.executablePath = camoufoxExecutable;
-        launchOptions.env = {
-          ...process.env,
-          DISPLAY: runtime.display,
-          LD_LIBRARY_PATH: `${X11VNC_LIB_DIR}:${X11VNC_EXTRA_LIB_DIR}:${process.env.LD_LIBRARY_PATH || ''}`,
-        };
-        launchOptions.args = [];
-        session.backend = 'camoufox-vnc';
-        const viewerToken = createViewerToken(session.id);
-        session.viewerUrl = getViewerUrl(session.id, viewerToken);
-        session.viewerEmbedUrl = session.viewerUrl;
-      }
-
-      if (profileName) {
-        fs.mkdirSync(PROFILE_ROOT, { recursive: true });
-        const browserType = useVisibleBackend ? readiness.playwright.firefox : readiness.playwright.chromium;
-        context = await browserType.launchPersistentContext(getProfilePath(profileName), {
-          ...launchOptions,
-          ...contextOptions,
-        });
-        page = context.pages()[0] || await context.newPage();
-      } else {
-        const browserType = useVisibleBackend ? readiness.playwright.firefox : readiness.playwright.chromium;
-        browser = await browserType.launch(launchOptions);
-        context = await browser.newContext(contextOptions);
-        page = await context.newPage();
-      }
-    } catch (error) {
-      await context?.close?.().catch(() => undefined);
-      await browser?.close?.().catch(() => undefined);
-      killRuntimeProcesses(processes);
-      if (viewer?.display) {
-        reservedDisplays.delete(viewer.display);
-      }
-      throw error;
+    if (profileName) {
+      fs.mkdirSync(PROFILE_ROOT, { recursive: true });
+      context = await readiness.playwright.chromium.launchPersistentContext(getProfilePath(profileName), {
+        ...launchOptions,
+        ...contextOptions,
+      });
+      page = context.pages()[0] || await context.newPage();
+    } else {
+      browser = await readiness.playwright.chromium.launch(launchOptions);
+      context = await browser.newContext(contextOptions);
+      page = await context.newPage();
     }
     session.status = 'ready';
     session.message = 'Browser session is ready.';
     sessions.set(session.id, session);
-    handles.set(session.id, { browser, context, page, processes, viewer });
+    handles.set(session.id, { browser, context, page });
     await captureSession(session, page);
     return publicSession(session);
   },
@@ -1055,25 +812,6 @@ export const browserUseService = {
     return { deleted: true, sessionId };
   },
 
-  getViewerProxyTarget(sessionId: string) {
-    const viewer = getSessionViewer(sessionId);
-    if (!viewer) {
-      throw new Error('Browser viewer is not available for this session.');
-    }
-    return {
-      websockifyPort: viewer.websockifyPort,
-      noVncRoot: viewer.noVncRoot,
-    };
-  },
-
-  validateViewerToken(sessionId: string, token: string | null | undefined) {
-    return validateViewerTokenForSession(sessionId, token);
-  },
-
-  handleViewerWebSocket(clientWs: WebSocket, pathname: string) {
-    handleViewerWebSocket(clientWs, pathname, getSessionViewer);
-  },
-
   async agentStopSession(sessionId: string) {
     await this.getAgentSession(sessionId);
     return this.stopSession(sessionId);

server/modules/browser-use/browser-use.settings.ts

@@ -1,147 +0,0 @@
-import { randomBytes } from 'node:crypto';
-import fs from 'node:fs';
-import os from 'node:os';
-import path from 'node:path';
-
-import { appConfigDb } from '@/modules/database/index.js';
-
-import type { BrowserUseBackend, BrowserUseSettings } from './browser-use.types.js';
-
-const IS_PLATFORM = process.env.VITE_IS_PLATFORM === 'true';
-const BROWSER_USE_SETTINGS_KEY = 'browser_use_settings';
-const BROWSER_USE_MCP_TOKEN_KEY = 'browser_use_mcp_token';
-const MAX_PROFILE_NAME_LENGTH = 80;
-
-export const DEFAULT_BROWSER_USE_SETTINGS: BrowserUseSettings = {
-  enabled: false,
-  persistSessions: false,
-  defaultProfileName: 'default',
-  browserBackend: IS_PLATFORM ? 'camoufox-vnc' : 'playwright',
-};
-
-export const PROFILE_ROOT = process.env.CLOUDCLI_BROWSER_USE_PROFILE_ROOT
-  || path.join(os.homedir(), '.cloudcli', 'browser-use', 'profiles');
-
-export function normalizeBrowserBackend(value: unknown): BrowserUseBackend {
-  return value === 'playwright' || value === 'camoufox-vnc'
-    ? value
-    : DEFAULT_BROWSER_USE_SETTINGS.browserBackend;
-}
-
-function trimEdgeDashes(value: string): string {
-  let start = 0;
-  let end = value.length;
-  while (start < end && value[start] === '-') {
-    start += 1;
-  }
-  while (end > start && value[end - 1] === '-') {
-    end -= 1;
-  }
-  return value.slice(start, end);
-}
-
-export function normalizeProfileName(profileName?: string | null): string | null {
-  const sanitized = trimEdgeDashes(String(profileName || '')
-    .trim()
-    .toLowerCase()
-    .replace(/[^a-z0-9._-]+/g, '-'));
-  const normalized = sanitized
-    .slice(0, MAX_PROFILE_NAME_LENGTH)
-    .replace(/^-+|-+$/g, '');
-  if (!normalized) {
-    return null;
-  }
-
-  return /[a-z0-9]/.test(normalized) ? normalized : null;
-}
-
-export function normalizeDefaultProfileName(profileName?: string | null): string {
-  return normalizeProfileName(profileName) || DEFAULT_BROWSER_USE_SETTINGS.defaultProfileName;
-}
-
-export function resolveSessionProfileName(settings: BrowserUseSettings, profileName?: string | null): string | null {
-  const requestedProfileName = normalizeProfileName(profileName);
-  if (String(profileName || '').trim() && !requestedProfileName) {
-    throw new Error('Browser profile name must include at least one letter or number.');
-  }
-  if (requestedProfileName) {
-    validateRequestedProfileName(profileName, requestedProfileName);
-    return requestedProfileName;
-  }
-  return settings.persistSessions ? normalizeDefaultProfileName(settings.defaultProfileName) : null;
-}
-
-export function getProfilePath(profileName: string): string {
-  return path.join(PROFILE_ROOT, normalizeDefaultProfileName(profileName));
-}
-
-function validateRequestedProfileName(profileName: string | null | undefined, normalizedProfileName: string): void {
-  const requestedProfileName = String(profileName || '').trim();
-  const existingProfileName = findExistingProfileName(normalizedProfileName);
-  if (
-    existingProfileName
-    && (requestedProfileName !== normalizedProfileName || existingProfileName !== normalizedProfileName)
-  ) {
-    throw new Error(`Browser profile "${requestedProfileName}" resolves to existing profile "${existingProfileName}". Use "${normalizedProfileName}" instead.`);
-  }
-}
-
-function findExistingProfileName(normalizedProfileName: string): string | null {
-  try {
-    if (!fs.existsSync(PROFILE_ROOT)) {
-      return null;
-    }
-
-    const entries = fs.readdirSync(PROFILE_ROOT, { withFileTypes: true });
-    const match = entries.find((entry) => entry.isDirectory() && normalizeProfileName(entry.name) === normalizedProfileName);
-    return match?.name || null;
-  } catch {
-    return null;
-  }
-}
-
-export function useVisibleCamoufoxBackend(settings: BrowserUseSettings): boolean {
-  return settings.browserBackend === 'camoufox-vnc';
-}
-
-export function readSettings(): BrowserUseSettings {
-  try {
-    const raw = appConfigDb.get(BROWSER_USE_SETTINGS_KEY);
-    if (!raw) {
-      return DEFAULT_BROWSER_USE_SETTINGS;
-    }
-
-    const parsed = JSON.parse(raw) as Partial<BrowserUseSettings>;
-    return {
-      enabled: parsed.enabled === true,
-      persistSessions: parsed.persistSessions === true,
-      defaultProfileName: normalizeDefaultProfileName(parsed.defaultProfileName),
-      browserBackend: normalizeBrowserBackend(parsed.browserBackend),
-    };
-  } catch (error: any) {
-    console.warn('[Browser] Failed to read settings:', error?.message || error);
-    return DEFAULT_BROWSER_USE_SETTINGS;
-  }
-}
-
-export function writeSettings(settings: BrowserUseSettings): BrowserUseSettings {
-  const normalized = {
-    enabled: settings.enabled === true,
-    persistSessions: settings.persistSessions === true,
-    defaultProfileName: normalizeDefaultProfileName(settings.defaultProfileName),
-    browserBackend: normalizeBrowserBackend(settings.browserBackend),
-  };
-
-  appConfigDb.set(BROWSER_USE_SETTINGS_KEY, JSON.stringify(normalized));
-  return normalized;
-}
-
-export function getOrCreateMcpToken(): string {
-  const existing = appConfigDb.get(BROWSER_USE_MCP_TOKEN_KEY);
-  if (existing) {
-    return existing;
-  }
-  const token = randomBytes(32).toString('hex');
-  appConfigDb.set(BROWSER_USE_MCP_TOKEN_KEY, token);
-  return token;
-}

server/modules/browser-use/browser-use.types.ts

@@ -1,66 +0,0 @@
-import type { spawn } from 'node:child_process';
-
-export type BrowserUseRuntime = 'cloud' | 'local';
-export type BrowserUseBackend = 'playwright' | 'camoufox-vnc';
-export type BrowserUseSessionStatus = 'ready' | 'stopped' | 'unavailable';
-
-export type BrowserUseSession = {
-  id: string;
-  ownerId: string;
-  createdBy: 'agent';
-  runtime: BrowserUseRuntime;
-  status: BrowserUseSessionStatus;
-  url: string | null;
-  title: string | null;
-  screenshotDataUrl: string | null;
-  createdAt: string;
-  updatedAt: string;
-  lastAction: string | null;
-  message: string | null;
-  backend: BrowserUseBackend;
-  viewerUrl: string | null;
-  viewerEmbedUrl: string | null;
-  profileName: string | null;
-  viewport: {
-    width: number;
-    height: number;
-  } | null;
-  cursor: {
-    x: number;
-    y: number;
-    actor: 'agent';
-  } | null;
-};
-
-export type PublicBrowserUseSession = Omit<BrowserUseSession, 'ownerId'>;
-
-export type RuntimeHandle = {
-  browser?: any;
-  context?: any;
-  page?: any;
-  processes?: Array<ReturnType<typeof spawn>>;
-  viewer?: {
-    display: string;
-    vncPort: number;
-    websockifyPort: number;
-    noVncRoot: string;
-  };
-};
-
-export type BrowserUseSettings = {
-  enabled: boolean;
-  persistSessions: boolean;
-  defaultProfileName: string;
-  browserBackend: BrowserUseBackend;
-};
-
-export type RuntimeReadiness = {
-  playwright: any | null;
-  playwrightInstalled: boolean;
-  chromiumInstalled: boolean;
-  chromiumExecutablePath: string | null;
-  installInProgress: boolean;
-  installMessage: string | null;
-};
-
-export type RuntimeProbe = Omit<RuntimeReadiness, 'installInProgress' | 'installMessage'>;

server/modules/browser-use/browser-use.viewer.ts

@@ -1,76 +0,0 @@
-import { WebSocket } from 'ws';
-
-import type { RuntimeHandle } from './browser-use.types.js';
-
-type BrowserUseViewer = NonNullable<RuntimeHandle['viewer']>;
-
-export const VIEWER_COOKIE_NAME = 'browser_use_viewer_token';
-const DEFAULT_VIEWER_TOKEN_TTL_MS = 30 * 60 * 1000;
-const parsedViewerTokenTtlMs = Number.parseInt(
-  process.env.CLOUDCLI_BROWSER_USE_VIEWER_TOKEN_TTL_MS || String(DEFAULT_VIEWER_TOKEN_TTL_MS),
-  10,
-);
-export const VIEWER_TOKEN_TTL_MS =
-  Number.isFinite(parsedViewerTokenTtlMs) && parsedViewerTokenTtlMs > 0
-    ? parsedViewerTokenTtlMs
-    : DEFAULT_VIEWER_TOKEN_TTL_MS;
-
-export function getViewerUrl(sessionId: string, viewerToken?: string): string {
-  const basePath = `/api/browser-use/sessions/${encodeURIComponent(sessionId)}/viewer`;
-  const websockifyPath = viewerToken
-    ? `${basePath}/websockify?viewerToken=${encodeURIComponent(viewerToken)}`
-    : `${basePath}/websockify`;
-  const params = new URLSearchParams({
-    autoconnect: '1',
-    resize: 'scale',
-    reconnect: '1',
-    path: websockifyPath,
-  });
-  if (viewerToken) {
-    params.set('viewerToken', viewerToken);
-  }
-  return `${basePath}/vnc.html?${params.toString()}`;
-}
-
-export function handleViewerWebSocket(
-  clientWs: WebSocket,
-  pathname: string,
-  getSessionViewer: (sessionId: string) => BrowserUseViewer | null | undefined,
-) {
-  const match = /^\/api\/browser-use\/sessions\/([^/]+)\/viewer\/websockify\/?$/.exec(pathname);
-  const sessionId = match ? decodeURIComponent(match[1]) : '';
-  const viewer = sessionId ? getSessionViewer(sessionId) : null;
-  if (!viewer) {
-    clientWs.close(4404, 'Browser viewer not found');
-    return;
-  }
-
-  const upstream = new WebSocket(`ws://127.0.0.1:${viewer.websockifyPort}`);
-  upstream.on('open', () => {
-    clientWs.on('message', (data) => {
-      if (upstream.readyState === WebSocket.OPEN) {
-        upstream.send(data);
-      }
-    });
-    upstream.on('message', (data) => {
-      if (clientWs.readyState === WebSocket.OPEN) {
-        clientWs.send(data);
-      }
-    });
-  });
-  upstream.on('close', (code, reason) => {
-    if (clientWs.readyState === WebSocket.OPEN) {
-      clientWs.close(code, reason);
-    }
-  });
-  upstream.on('error', () => {
-    if (clientWs.readyState === WebSocket.OPEN) {
-      clientWs.close(4502, 'Browser viewer upstream error');
-    }
-  });
-  clientWs.on('close', () => {
-    if (upstream.readyState === WebSocket.OPEN) {
-      upstream.close();
-    }
-  });
-}

server/modules/browser-use/index.ts

@@ -1,2 +0,0 @@
-export { browserUseService } from './browser-use.service.js';
-export { VIEWER_COOKIE_NAME } from './browser-use.viewer.js';

server/modules/browser-use/tests/browser-use.settings.test.ts

@@ -1,73 +0,0 @@
-import assert from 'node:assert/strict';
-import fs from 'node:fs';
-import os from 'node:os';
-import path from 'node:path';
-import test from 'node:test';
-
-const originalProfileRoot = process.env.CLOUDCLI_BROWSER_USE_PROFILE_ROOT;
-const testProfileRoot = fs.mkdtempSync(path.join(os.tmpdir(), 'browser-use-profiles-'));
-process.env.CLOUDCLI_BROWSER_USE_PROFILE_ROOT = testProfileRoot;
-
-const {
-  getProfilePath,
-  normalizeDefaultProfileName,
-  normalizeProfileName,
-  PROFILE_ROOT,
-  resolveSessionProfileName,
-} = await import('@/modules/browser-use/browser-use.settings.js');
-
-test.after(() => {
-  if (originalProfileRoot === undefined) {
-    delete process.env.CLOUDCLI_BROWSER_USE_PROFILE_ROOT;
-  } else {
-    process.env.CLOUDCLI_BROWSER_USE_PROFILE_ROOT = originalProfileRoot;
-  }
-  fs.rmSync(testProfileRoot, { recursive: true, force: true });
-});
-
-test('browser profile names are canonicalized before storage and path resolution', () => {
-  assert.equal(normalizeProfileName(' Work Profile!! '), 'work-profile');
-  assert.equal(normalizeProfileName(`${'-'.repeat(100)}Work Profile`), 'work-profile');
-  assert.equal(normalizeDefaultProfileName(' Work Profile!! '), 'work-profile');
-  assert.equal(
-    getProfilePath(' Work Profile!! '),
-    `${PROFILE_ROOT}/work-profile`,
-  );
-  assert.equal(
-    resolveSessionProfileName({
-      enabled: true,
-      persistSessions: true,
-      defaultProfileName: ' Work Profile!! ',
-      browserBackend: 'playwright',
-    }),
-    'work-profile',
-  );
-});
-
-test('browser profile aliases are rejected when the normalized profile already exists', () => {
-  const profileName = `alias-test-${Date.now()}`;
-  fs.mkdirSync(getProfilePath(profileName), { recursive: true });
-
-  try {
-    assert.throws(
-      () => resolveSessionProfileName({
-        enabled: true,
-        persistSessions: false,
-        defaultProfileName: 'default',
-        browserBackend: 'playwright',
-      }, profileName.toUpperCase()),
-      /resolves to existing profile/,
-    );
-    assert.equal(
-      resolveSessionProfileName({
-        enabled: true,
-        persistSessions: false,
-        defaultProfileName: 'default',
-        browserBackend: 'playwright',
-      }, profileName),
-      profileName,
-    );
-  } finally {
-    fs.rmSync(getProfilePath(profileName), { recursive: true, force: true });
-  }
-});

server/modules/websocket/services/websocket-server.service.ts

@@ -1,9 +1,8 @@
 import type { Server as HttpServer } from 'node:http';
 
-import { WebSocket, WebSocketServer, type VerifyClientCallbackSync } from 'ws';
+import { WebSocketServer, type VerifyClientCallbackSync } from 'ws';
 
 import { handleChatConnection } from '@/modules/websocket/services/chat-websocket.service.js';
-import { VIEWER_COOKIE_NAME } from '@/modules/browser-use/index.js';
 import { verifyWebSocketClient } from '@/modules/websocket/services/websocket-auth.service.js';
 import { handlePluginWsProxy } from '@/modules/websocket/services/plugin-websocket-proxy.service.js';
 import { handleShellConnection } from '@/modules/websocket/services/shell-websocket.service.js';
@@ -14,21 +13,8 @@ type WebSocketServerDependencies = {
   chat: Parameters<typeof handleChatConnection>[2];
   shell: Parameters<typeof handleShellConnection>[1];
   getPluginPort: Parameters<typeof handlePluginWsProxy>[2];
-  browserUseViewer?: (ws: WebSocket, pathname: string) => void;
-  authenticateBrowserUseViewer?: (pathname: string, token: string | null) => boolean;
 };
 
-function readCookieValue(header: unknown, name: string): string | null {
-  if (!header) return null;
-  const prefix = `${name}=`;
-  const cookie = String(header).split(';').map((part) => part.trim()).find((part) => part.startsWith(prefix));
-  return cookie ? decodeURIComponent(cookie.slice(prefix.length)) : null;
-}
-
-function getBrowserUseViewerToken(url: URL, headers: Record<string, unknown>): string | null {
-  return url.searchParams.get('viewerToken') || readCookieValue(headers.cookie, VIEWER_COOKIE_NAME);
-}
-
 /**
  * Creates and wires the server-wide websocket gateway used for chat, shell, and
  * plugin proxy routes.
@@ -41,17 +27,7 @@ export function createWebSocketServer(
     server,
     verifyClient: ((
       info: Parameters<VerifyClientCallbackSync<AuthenticatedWebSocketRequest>>[0]
-    ) => {
-      const requestUrl = new URL(info.req.url ?? '/', 'http://localhost');
-      if (
-        requestUrl.pathname.startsWith('/api/browser-use/sessions/')
-        && requestUrl.pathname.endsWith('/viewer/websockify')
-      ) {
-        const token = getBrowserUseViewerToken(requestUrl, info.req.headers as Record<string, unknown>);
-        return Boolean(dependencies.authenticateBrowserUseViewer?.(requestUrl.pathname, token));
-      }
-      return verifyWebSocketClient(info, dependencies.verifyClient);
-    }),
+    ) => verifyWebSocketClient(info, dependencies.verifyClient)),
   });
 
   wss.on('connection', (ws, request) => {
@@ -92,11 +68,6 @@ export function createWebSocketServer(
       return;
     }
 
-    if (pathname.startsWith('/api/browser-use/sessions/') && pathname.endsWith('/viewer/websockify')) {
-      dependencies.browserUseViewer?.(ws, pathname);
-      return;
-    }
-
     console.log('[WARN] Unknown WebSocket path:', pathname);
     ws.close();
   });

src/components/browser-use/view/BrowserUsePanel.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import {
   Bot,
   Clock3,
@@ -7,7 +7,6 @@ import {
   ExternalLink,
   Loader2,
   MonitorPlay,
-  MousePointer2,
   RefreshCw,
   Settings,
   Square,
@@ -20,14 +19,9 @@ import { Badge, Button } from '../../../shared/view/ui';
 import { authenticatedFetch } from '../../../utils/api';
 import type { SettingsMainTab } from '../../settings/types/types';
 
-const BROWSER_USE_GUIDE_URL = 'https://cloudcli.ai/docs/browser-use';
-const BROWSER_USE_CACHE_TTL_MS = 30_000;
-
 type BrowserUseStatus = {
   enabled: boolean;
   available: boolean;
-  backend: 'playwright' | 'camoufox-vnc';
-  browserBackend: 'playwright' | 'camoufox-vnc';
   playwrightInstalled: boolean;
   chromiumInstalled: boolean;
   installInProgress: boolean;
@@ -45,9 +39,6 @@ type BrowserUseSession = {
   updatedAt: string;
   lastAction: string | null;
   message: string | null;
-  backend?: 'playwright' | 'camoufox-vnc';
-  viewerUrl?: string | null;
-  viewerEmbedUrl?: string | null;
   createdBy: 'agent';
   profileName: string | null;
   viewport: {
@@ -63,48 +54,17 @@ type BrowserUseSession = {
 
 type BrowserUsePanelProps = {
   isVisible: boolean;
-  projectId?: string | null;
   onShowSettings?: (tab?: SettingsMainTab) => void;
 };
 
-type BrowserUsePanelCacheEntry = {
-  status: BrowserUseStatus | null;
-  sessions: BrowserUseSession[];
-  selectedSessionId: string | null;
-  updatedAt: number;
-};
-
-const browserUsePanelCache = new Map<string, BrowserUsePanelCacheEntry>();
-
 async function readJson<T>(response: Response): Promise<T> {
-  const text = await response.text();
-  let data: any = {};
-  if (text) {
-    try {
-      data = JSON.parse(text);
-    } catch {
-      throw new Error(response.ok ? 'Received an invalid Browser response.' : `Browser request failed (${response.status}).`);
-    }
-  }
+  const data = await response.json();
   if (!response.ok || data.success === false) {
     throw new Error(data.error || data.details || `Request failed (${response.status})`);
   }
   return data as T;
 }
 
-async function fetchBrowserPanelData() {
-  const [statusResponse, sessionsResponse] = await Promise.all([
-    authenticatedFetch('/api/browser-use/status'),
-    authenticatedFetch('/api/browser-use/sessions'),
-  ]);
-  const statusData = await readJson<{ data: BrowserUseStatus }>(statusResponse);
-  const sessionsData = await readJson<{ data: { sessions: BrowserUseSession[] } }>(sessionsResponse);
-  return {
-    status: statusData.data,
-    sessions: [...sessionsData.data.sessions].sort((a, b) => Date.parse(b.createdAt) - Date.parse(a.createdAt)),
-  };
-}
-
 function formatRelativeTime(value: string | null): string {
   if (!value) return 'Never';
 
@@ -159,42 +119,20 @@ function getStatusDot(status: BrowserUseSession['status']): string {
   return 'bg-border';
 }
 
-function getEngineLabel(backend?: BrowserUseStatus['backend'] | BrowserUseSession['backend']): string {
-  return backend === 'camoufox-vnc' ? 'Visible browser' : 'Playwright';
-}
-
 const PROMPTS = [
   'Use Browser to inspect the checkout flow and report any broken UI states.',
   'Open <url> with Browser, interact with the page, and summarize what changed after each step.',
 ];
 
-function getBrowserUseCacheKey(projectId?: string | null): string {
-  return projectId ? `browser-use:project:${projectId}` : 'browser-use:global';
-}
-
-function getFreshCacheEntry(cacheKey: string): BrowserUsePanelCacheEntry | null {
-  const entry = browserUsePanelCache.get(cacheKey);
-  if (!entry || Date.now() - entry.updatedAt > BROWSER_USE_CACHE_TTL_MS) {
-    return null;
-  }
-  return entry;
-}
-
-export default function BrowserUsePanel({ isVisible, projectId, onShowSettings }: BrowserUsePanelProps) {
-  const cacheKey = getBrowserUseCacheKey(projectId);
-  const initialCacheEntry = getFreshCacheEntry(cacheKey);
-  const [status, setStatus] = useState<BrowserUseStatus | null>(() => initialCacheEntry?.status ?? null);
-  const [sessions, setSessions] = useState<BrowserUseSession[]>(() => initialCacheEntry?.sessions ?? []);
-  const [selectedSessionId, setSelectedSessionId] = useState<string | null>(() => (
-    initialCacheEntry?.selectedSessionId || initialCacheEntry?.sessions[0]?.id || null
-  ));
-  const [hasLoadedOnce, setHasLoadedOnce] = useState(Boolean(initialCacheEntry));
+export default function BrowserUsePanel({ isVisible, onShowSettings }: BrowserUsePanelProps) {
+  const [status, setStatus] = useState<BrowserUseStatus | null>(null);
+  const [sessions, setSessions] = useState<BrowserUseSession[]>([]);
+  const [selectedSessionId, setSelectedSessionId] = useState<string | null>(null);
   const [isRefreshing, setIsRefreshing] = useState(false);
   const [isBusy, setIsBusy] = useState(false);
   const [isInstalling, setIsInstalling] = useState(false);
   const [isFullscreen, setIsFullscreen] = useState(false);
   const [error, setError] = useState<string | null>(null);
-  const activeLoadIdRef = useRef(0);
 
   const selectedSession = useMemo(
     () => sessions.find((session) => session.id === selectedSessionId) || sessions[0] || null,
@@ -202,12 +140,8 @@ export default function BrowserUsePanel({ isVisible, projectId, onShowSettings }
   );
 
   const activeSessions = sessions.filter((session) => session.status === 'ready');
-  const isInitialLoading = isRefreshing && !hasLoadedOnce && sessions.length === 0;
-  const isBackgroundRefreshing = isRefreshing && !isInitialLoading;
-  const needsBrowserBinaries = Boolean(status?.enabled && !status.available);
-  const runtimeLabel = isInitialLoading
-    ? 'Loading'
-    : !status?.enabled
+  const needsBrowserBinaries = Boolean(status?.enabled && (!status.playwrightInstalled || !status.chromiumInstalled));
+  const runtimeLabel = !status?.enabled
     ? 'Disabled'
     : status.available
       ? 'Ready'
@@ -223,72 +157,29 @@ export default function BrowserUsePanel({ isVisible, projectId, onShowSettings }
     : null;
 
   const refresh = useCallback(async () => {
-    const loadId = activeLoadIdRef.current + 1;
-    activeLoadIdRef.current = loadId;
     setIsRefreshing(true);
     try {
-      let nextData: Awaited<ReturnType<typeof fetchBrowserPanelData>>;
-      try {
-        nextData = await fetchBrowserPanelData();
-      } catch (error) {
-        if (loadId !== activeLoadIdRef.current) {
-          return;
-        }
-        await new Promise((resolve) => setTimeout(resolve, 350));
-        nextData = await fetchBrowserPanelData();
-      }
-      if (activeLoadIdRef.current !== loadId) {
-        return;
-      }
-      const nextSessions = nextData.sessions;
-      setStatus(nextData.status);
+      const [statusResponse, sessionsResponse] = await Promise.all([
+        authenticatedFetch('/api/browser-use/status'),
+        authenticatedFetch('/api/browser-use/sessions'),
+      ]);
+      const statusData = await readJson<{ data: BrowserUseStatus }>(statusResponse);
+      const sessionsData = await readJson<{ data: { sessions: BrowserUseSession[] } }>(sessionsResponse);
+      const nextSessions = sessionsData.data.sessions;
+      setStatus(statusData.data);
       setSessions(nextSessions);
-      setHasLoadedOnce(true);
-      let nextSelectedSessionId: string | null = null;
-      setSelectedSessionId((current) => {
-        nextSelectedSessionId = current && nextSessions.some((session) => session.id === current)
+      setSelectedSessionId((current) => (
+        current && nextSessions.some((session) => session.id === current)
           ? current
-          : nextSessions[0]?.id || null;
-        return nextSelectedSessionId;
-      });
-      browserUsePanelCache.set(cacheKey, {
-        status: nextData.status,
-        sessions: nextSessions,
-        selectedSessionId: nextSelectedSessionId,
-        updatedAt: Date.now(),
-      });
+          : nextSessions[0]?.id || null
+      ));
       setError(null);
     } catch (err) {
-      if (activeLoadIdRef.current !== loadId) {
-        return;
-      }
-      setHasLoadedOnce(true);
       setError(err instanceof Error ? err.message : 'Failed to load Browser');
     } finally {
-      if (activeLoadIdRef.current === loadId) {
-        setIsRefreshing(false);
-      }
+      setIsRefreshing(false);
     }
-  }, [cacheKey]);
-
-  useEffect(() => {
-    const cachedEntry = browserUsePanelCache.get(cacheKey);
-    if (!cachedEntry) return;
-    browserUsePanelCache.set(cacheKey, {
-      ...cachedEntry,
-      selectedSessionId,
-    });
-  }, [cacheKey, selectedSessionId]);
-
-  useEffect(() => {
-    const cachedEntry = getFreshCacheEntry(cacheKey);
-    setStatus(cachedEntry?.status ?? null);
-    setSessions(cachedEntry?.sessions ?? []);
-    setSelectedSessionId(cachedEntry?.selectedSessionId || cachedEntry?.sessions[0]?.id || null);
-    setHasLoadedOnce(Boolean(cachedEntry));
-    setError(null);
-    activeLoadIdRef.current += 1;
-  }, [cacheKey]);
+  }, []);
 
   useEffect(() => {
     if (!isVisible) return;
@@ -362,10 +253,6 @@ export default function BrowserUsePanel({ isVisible, projectId, onShowSettings }
           <span>{formatRelativeTime(session.updatedAt)}</span>
           <span className="truncate">- {formatAction(session.lastAction)}</span>
         </div>
-        <div className="mt-2 flex flex-wrap gap-1.5 pl-3.5 text-[10px] text-muted-foreground">
-          <span className="rounded border border-border/70 bg-background/70 px-1.5 py-0.5">{getEngineLabel(session.backend)}</span>
-          <span className="rounded border border-border/70 bg-background/70 px-1.5 py-0.5">{session.profileName || 'Temporary'}</span>
-        </div>
       </button>
     );
   };
@@ -383,18 +270,9 @@ export default function BrowserUsePanel({ isVisible, projectId, onShowSettings }
             </div>
             <p className="mt-1 max-w-xl text-sm leading-6 text-muted-foreground">
               {status?.enabled
-                ? 'When an agent opens a browser, you can watch the latest screenshot, take control in a new tab, or end the running session.'
-                : 'Enable Browser to let agents open websites, test flows, capture screenshots, and debug UI from a real page.'}
+                ? 'Agent browser sessions appear here while an AI task is using Browser.'
+                : 'Enable Browser in settings to let agents open monitored browser sessions.'}
             </p>
-            <a
-              href={BROWSER_USE_GUIDE_URL}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="mt-2 inline-flex items-center gap-1.5 text-sm font-medium text-primary hover:underline"
-            >
-              Read the Browser guide
-              <ExternalLink className="h-3.5 w-3.5" />
-            </a>
           </div>
         </div>
 
@@ -434,19 +312,10 @@ export default function BrowserUsePanel({ isVisible, projectId, onShowSettings }
     </div>
   );
 
-  const renderLoadingState = () => (
-    <div className="flex min-h-0 flex-1 items-center justify-center p-6">
-      <div className="flex items-center gap-3 rounded-md border border-border bg-card/40 px-4 py-3 text-sm text-muted-foreground shadow-sm">
-        <Loader2 className="h-4 w-4 animate-spin text-primary" />
-        Loading browser sessions...
-      </div>
-    </div>
-  );
-
   const renderBrowserSurface = (fullscreen = false) => (
     <div className={cn('flex flex-1 items-center justify-center bg-neutral-950', fullscreen ? 'min-h-[80vh]' : 'min-h-[420px]')}>
       {selectedSession?.screenshotDataUrl ? (
-        <div className="group relative inline-block max-h-full">
+        <div className="relative inline-block max-h-full">
           <img
             src={selectedSession.screenshotDataUrl}
             alt="Browser session screenshot"
@@ -460,18 +329,6 @@ export default function BrowserUsePanel({ isVisible, projectId, onShowSettings }
               <div className="absolute left-1/2 top-1/2 h-2 w-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white" />
             </div>
           )}
-          {selectedSession?.viewerEmbedUrl && selectedSession.status === 'ready' && (
-            <button
-              type="button"
-              onClick={() => window.open(selectedSession.viewerUrl || selectedSession.viewerEmbedUrl || '', '_blank', 'noopener,noreferrer')}
-              className="absolute inset-0 flex items-center justify-center bg-black/0 opacity-0 transition focus-visible:bg-black/30 focus-visible:opacity-100 focus-visible:outline-none group-hover:bg-black/30 group-hover:opacity-100"
-            >
-              <span className="inline-flex items-center gap-2 rounded-md border border-white/20 bg-black/80 px-3 py-2 text-sm font-medium text-white shadow-lg">
-                <MousePointer2 className="h-4 w-4" />
-                Take control
-              </span>
-            </button>
-          )}
         </div>
       ) : (
         <div className="px-6 text-center">
@@ -493,29 +350,10 @@ export default function BrowserUsePanel({ isVisible, projectId, onShowSettings }
             <Badge variant="outline" className={cn('text-[10px]', getRuntimeTone(status, isInstalling))}>
               {runtimeLabel}
             </Badge>
-            <Badge variant="outline" className="border-border bg-background text-[10px] text-muted-foreground">
-              {getEngineLabel(status?.backend)}
-            </Badge>
           </div>
-          <p className="mt-0.5 text-xs text-muted-foreground">Watch and manage browser sessions agents use to test real websites.</p>
-          {isBackgroundRefreshing && (
-            <div className="mt-1 flex items-center gap-1.5 text-xs text-muted-foreground">
-              <RefreshCw className="h-3 w-3 animate-spin" />
-              Refreshing sessions...
-            </div>
-          )}
+          <p className="mt-0.5 text-xs text-muted-foreground">Monitor browser sessions opened by AI agents.</p>
         </div>
         <div className="flex items-center gap-1.5">
-          <Button
-            variant="ghost"
-            size="sm"
-            className="h-7 w-7 p-0"
-            onClick={() => window.open(BROWSER_USE_GUIDE_URL, '_blank', 'noopener,noreferrer')}
-            title="Open Browser guide"
-            aria-label="Open Browser guide"
-          >
-            <ExternalLink className="h-3.5 w-3.5" />
-          </Button>
           {onShowSettings && (
             <Button
               variant="ghost"
@@ -587,7 +425,7 @@ export default function BrowserUsePanel({ isVisible, projectId, onShowSettings }
           </div>
 
           {sessions.length === 0 ? (
-            isInitialLoading ? renderLoadingState() : renderEmptyState()
+            renderEmptyState()
           ) : (
             <div className="min-h-0 flex-1 overflow-auto bg-muted/20 p-4">
               <div className="mx-auto flex min-h-[500px] max-w-7xl flex-col overflow-hidden rounded-md border border-border bg-background shadow-sm">
@@ -603,32 +441,14 @@ export default function BrowserUsePanel({ isVisible, projectId, onShowSettings }
                       <ExternalLink className="h-3.5 w-3.5 shrink-0" />
                       <span className="truncate">{selectedSession?.url || 'No page loaded'}</span>
                     </div>
-                    <div className="mt-1 flex flex-wrap gap-1.5 text-[10px] text-muted-foreground">
-                      <span className="rounded border border-border/70 bg-muted/30 px-1.5 py-0.5">{getEngineLabel(selectedSession?.backend || status?.backend)}</span>
-                      <span className="rounded border border-border/70 bg-muted/30 px-1.5 py-0.5">Profile: {selectedSession?.profileName || 'Temporary'}</span>
-                      <span className="rounded border border-border/70 bg-muted/30 px-1.5 py-0.5">Updated {formatRelativeTime(selectedSession?.updatedAt || null)}</span>
-                    </div>
                   </div>
                   <div className="hidden text-xs text-muted-foreground md:block">
                     {formatAction(selectedSession?.lastAction || null)}
                   </div>
-                  {selectedSession?.viewerUrl && selectedSession.status === 'ready' && (
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      className="h-8"
-                      onClick={() => window.open(selectedSession.viewerUrl || '', '_blank', 'noopener,noreferrer')}
-                      title="Open live browser control in a new tab"
-                      aria-label="Open live browser control in a new tab"
-                    >
-                      <MousePointer2 className="h-4 w-4" />
-                      Take control
-                    </Button>
-                  )}
                   <Button variant="ghost" size="sm" className="h-8 w-8 p-0" onClick={() => setIsFullscreen(true)} disabled={!selectedSession?.screenshotDataUrl} title="Full screen" aria-label="Full screen">
                     <Expand className="h-4 w-4" />
                   </Button>
-                  <Button variant="ghost" size="sm" className="h-8 w-8 p-0 lg:hidden" onClick={stopSession} disabled={isBusy || !selectedSession || selectedSession.status !== 'ready'} title="End session" aria-label="End session">
+                  <Button variant="ghost" size="sm" className="h-8 w-8 p-0 lg:hidden" onClick={stopSession} disabled={isBusy || !selectedSession || selectedSession.status !== 'ready'} title="Stop session" aria-label="Stop session">
                     <Square className="h-4 w-4" />
                   </Button>
                   <Button variant="ghost" size="sm" className="h-8 w-8 p-0 lg:hidden" onClick={deleteSession} disabled={isBusy || !selectedSession} title="Delete session" aria-label="Delete session">
@@ -655,11 +475,6 @@ export default function BrowserUsePanel({ isVisible, projectId, onShowSettings }
           <div className="min-h-0 flex-1 overflow-y-auto p-3">
             {sessions.length > 0 ? (
               <div className="space-y-2">{sessions.map(renderSessionItem)}</div>
-            ) : isInitialLoading ? (
-              <div className="flex items-center justify-center gap-2 rounded-md border border-dashed border-border/70 px-3 py-8 text-center text-xs text-muted-foreground">
-                <Loader2 className="h-3.5 w-3.5 animate-spin" />
-                Loading sessions...
-              </div>
             ) : (
               <div className="rounded-md border border-dashed border-border/70 px-3 py-8 text-center text-xs text-muted-foreground">
                 No agent browser sessions.
@@ -690,7 +505,7 @@ export default function BrowserUsePanel({ isVisible, projectId, onShowSettings }
               <div className="mt-3 grid grid-cols-2 gap-2">
                 <Button variant="outline" size="sm" onClick={stopSession} disabled={isBusy || !selectedSession || selectedSession.status !== 'ready'}>
                   <Square className="h-4 w-4" />
-                  End
+                  Stop
                 </Button>
                 <Button variant="outline" size="sm" onClick={deleteSession} disabled={isBusy || !selectedSession}>
                   <Trash2 className="h-4 w-4" />

src/components/chat/hooks/useChatMessages.ts

@@ -207,6 +207,15 @@ export function normalizedToChatMessages(messages: NormalizedMessage[]): ChatMes
           break;
         }
 
+        // A result with a toolId but no matching tool_use in the loaded set is
+        // almost always a tool_use/tool_result pair split across a pagination
+        // boundary (older page not loaded yet). Rendering its raw content here
+        // produces an unstyled dump that "fixes itself" once the older page
+        // loads; skip it and let it attach to its tool_use when that arrives.
+        if (msg.toolId) {
+          break;
+        }
+
         const content = formatToolResultContent(msg.content || '');
         if (!content.trim()) {
           break;

src/components/chat/tools/ToolRenderer.tsx

@@ -4,7 +4,7 @@ import type { Project } from '../../../types/app';
 import type { SubagentChildTool } from '../types/types';
 
 import { getToolConfig } from './configs/toolConfigs';
-import { OneLineDisplay, CollapsibleDisplay, ToolDiffViewer, MarkdownContent, FileListContent, TodoListContent, TaskListContent, TextContent, QuestionAnswerContent, SubagentContainer } from './components';
+import { OneLineDisplay, BashCommandDisplay, CollapsibleDisplay, ToolDiffViewer, MarkdownContent, FileListContent, TodoListContent, TaskListContent, TextContent, QuestionAnswerContent, SubagentContainer } from './components';
 import { PlanDisplay } from './components/PlanDisplay';
 import { ToolStatusBadge } from './components/ToolStatusBadge';
 import type { ToolStatus } from './components/ToolStatusBadge';
@@ -125,6 +125,31 @@ export const ToolRenderer: React.FC<ToolRendererProps> = memo(({
 
   if (!displayConfig) return null;
 
+  // Bash renders as a Codex-style command row: the command on a single line with
+  // a chevron that expands to show the output inline. The combined view lives on
+  // the input render; the separate result section is suppressed in MessageComponent.
+  if (toolName === 'Bash' && mode === 'input') {
+    const command = parsedData?.command || '';
+    const description = parsedData?.description;
+    const output = typeof toolResult?.content === 'string'
+      ? toolResult.content
+      : toolResult?.content != null
+        ? String(toolResult.content)
+        : '';
+    return (
+      <BashCommandDisplay
+        command={command}
+        description={description}
+        output={output}
+        isError={Boolean(toolResult?.isError)}
+        status={toolStatus !== 'completed' ? toolStatus : undefined}
+        // Commands stay collapsed by default (even consecutive ones); only
+        // failures auto-expand so they remain visible.
+        defaultOpen={false}
+      />
+    );
+  }
+
   if (displayConfig.type === 'one-line') {
     const value = displayConfig.getValue?.(parsedData) || '';
     const secondary = displayConfig.getSecondary?.(parsedData);

src/components/chat/tools/components/BashCommandDisplay.tsx

@@ -0,0 +1,155 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { ChevronRight, Copy, Check } from 'lucide-react';
+
+import { cn } from '../../../../lib/utils';
+import { copyTextToClipboard } from '../../../../utils/clipboard';
+import { ToolStatusBadge } from './ToolStatusBadge';
+import type { ToolStatus } from './ToolStatusBadge';
+
+interface BashCommandDisplayProps {
+  command: string;
+  description?: string;
+  /** Combined stdout/stderr from the tool result (empty while running). */
+  output?: string;
+  isError?: boolean;
+  status?: ToolStatus;
+  defaultOpen?: boolean;
+}
+
+/**
+ * Codex-in-VSCode style command row: a compact, single-line command with a
+ * chevron on the left. When the command produced output, the row becomes a
+ * dropdown that expands to reveal the output inline. Theme-integrated surfaces
+ * keep it clean in both light and dark mode; consecutive commands stack tightly
+ * into a clean list.
+ */
+export const BashCommandDisplay: React.FC<BashCommandDisplayProps> = ({
+  command,
+  description,
+  output,
+  isError = false,
+  status,
+  defaultOpen = false,
+}) => {
+  const trimmedOutput = (output || '').replace(/\s+$/, '');
+  const hasOutput = trimmedOutput.length > 0;
+  const outputLineCount = hasOutput ? trimmedOutput.split('\n').length : 0;
+  const isRunning = status === 'running';
+  const [open, setOpen] = useState(false);
+  const [copied, setCopied] = useState(false);
+
+  // Output (and errors) often arrive after this component first mounts, so apply
+  // the auto-open intent once when there is finally something to show. After that
+  // the user is in control of the toggle.
+  const autoAppliedRef = useRef(false);
+  useEffect(() => {
+    if (!autoAppliedRef.current && hasOutput && (defaultOpen || isError)) {
+      autoAppliedRef.current = true;
+      setOpen(true);
+    }
+  }, [hasOutput, defaultOpen, isError]);
+
+  const toggle = () => {
+    if (hasOutput) {
+      setOpen((prev) => !prev);
+    }
+  };
+
+  const handleCopy = async (event: React.MouseEvent) => {
+    event.stopPropagation();
+    const didCopy = await copyTextToClipboard(command);
+    if (!didCopy) return;
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <div
+      className={cn(
+        'group/cmd overflow-hidden rounded-lg border bg-muted/40 backdrop-blur-sm transition-all duration-200',
+        isError ? 'border-red-500/30' : 'border-border/60',
+        hasOutput && !open && 'hover:border-border hover:bg-muted/60',
+        open && 'bg-muted/50 shadow-sm',
+      )}
+    >
+      {/* Command header — clickable when there is output to expand */}
+      <div
+        role={hasOutput ? 'button' : undefined}
+        tabIndex={hasOutput ? 0 : undefined}
+        aria-expanded={hasOutput ? open : undefined}
+        onClick={toggle}
+        onKeyDown={(event) => {
+          if (hasOutput && (event.key === 'Enter' || event.key === ' ')) {
+            event.preventDefault();
+            toggle();
+          }
+        }}
+        className={cn(
+          'flex items-center gap-2 px-2.5 py-1.5 outline-none',
+          hasOutput && 'cursor-pointer focus-visible:ring-1 focus-visible:ring-ring',
+        )}
+      >
+        <ChevronRight
+          className={cn(
+            'h-3.5 w-3.5 flex-shrink-0 text-muted-foreground/70 transition-transform duration-200',
+            open && 'rotate-90',
+            !hasOutput && 'opacity-0',
+          )}
+        />
+        <span className="flex-shrink-0 select-none font-mono text-xs font-semibold text-emerald-500 dark:text-emerald-400">
+          $
+        </span>
+        <code
+          className={cn(
+            'min-w-0 flex-1 font-mono text-xs text-foreground',
+            open ? 'whitespace-pre-wrap break-all' : 'truncate',
+          )}
+        >
+          {command}
+        </code>
+
+        {isRunning && (
+          <span className="h-2.5 w-2.5 flex-shrink-0 animate-spin rounded-full border-[1.5px] border-muted-foreground/30 border-t-emerald-400" />
+        )}
+        {status && status !== 'running' && <ToolStatusBadge status={status} className="flex-shrink-0" />}
+        {!open && hasOutput && !isRunning && (
+          <span className="flex-shrink-0 text-[10px] tabular-nums text-muted-foreground/70 transition-opacity group-hover/cmd:opacity-0">
+            {outputLineCount} {outputLineCount === 1 ? 'line' : 'lines'}
+          </span>
+        )}
+
+        <button
+          onClick={handleCopy}
+          className="flex-shrink-0 rounded p-0.5 text-muted-foreground/60 opacity-0 transition-all hover:bg-foreground/10 hover:text-foreground focus:opacity-100 group-hover/cmd:opacity-100"
+          title="Copy command"
+          aria-label="Copy command"
+        >
+          {copied ? <Check className="h-3.5 w-3.5 text-emerald-500" /> : <Copy className="h-3.5 w-3.5" />}
+        </button>
+      </div>
+
+      {description && !open && (
+        <div className="truncate px-2.5 pb-1.5 pl-[2.4rem] text-[11px] italic text-muted-foreground/70">
+          {description}
+        </div>
+      )}
+
+      {/* Expanded output */}
+      {open && hasOutput && (
+        <div className="settings-content-enter border-t border-border/50 bg-background/50">
+          {description && (
+            <div className="px-3 pt-2 text-[11px] italic text-muted-foreground/70">{description}</div>
+          )}
+          <pre
+            className={cn(
+              'max-h-80 overflow-auto whitespace-pre-wrap break-all px-3 py-2 font-mono text-xs leading-relaxed',
+              isError ? 'text-red-600 dark:text-red-400' : 'text-muted-foreground',
+            )}
+          >
+            {trimmedOutput}
+          </pre>
+        </div>
+      )}
+    </div>
+  );
+};

src/components/chat/tools/components/CommandRunGroup.tsx

@@ -0,0 +1,124 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { ChevronRight, Terminal } from 'lucide-react';
+
+import { cn } from '../../../../lib/utils';
+import type { ChatMessage } from '../../types/types';
+import { BashCommandDisplay } from './BashCommandDisplay';
+import { ToolStatusBadge } from './ToolStatusBadge';
+import type { ToolStatus } from './ToolStatusBadge';
+
+interface CommandRunGroupProps {
+  messages: ChatMessage[];
+}
+
+type ExtractedCommand = {
+  key: string;
+  command: string;
+  description?: string;
+  output: string;
+  isError: boolean;
+  status: ToolStatus;
+};
+
+function extractCommand(message: ChatMessage, index: number): ExtractedCommand {
+  let command = '';
+  let description: string | undefined;
+  try {
+    const parsed =
+      typeof message.toolInput === 'string' ? JSON.parse(message.toolInput) : message.toolInput;
+    command = parsed?.command || '';
+    description = parsed?.description;
+  } catch {
+    command = typeof message.toolInput === 'string' ? message.toolInput : '';
+  }
+
+  const result = message.toolResult;
+  const rawContent = result?.content;
+  const output =
+    typeof rawContent === 'string' ? rawContent : rawContent != null ? String(rawContent) : '';
+  const isError = Boolean(result?.isError);
+  const status: ToolStatus = !result ? 'running' : isError ? 'error' : 'completed';
+
+  return {
+    key: message.toolId || `${command}-${index}`,
+    command,
+    description,
+    output,
+    isError,
+    status,
+  };
+}
+
+/**
+ * Groups a run of consecutive shell commands under a single collapsible header
+ * (Codex-in-VSCode style). Collapsed by default so long command runs stay tidy;
+ * expanding reveals every command in the run, each independently expandable for
+ * its own output.
+ */
+export const CommandRunGroup: React.FC<CommandRunGroupProps> = ({ messages }) => {
+  const commands = messages.map(extractCommand);
+  const count = commands.length;
+  const anyRunning = commands.some((c) => c.status === 'running');
+  const anyError = commands.some((c) => c.isError);
+
+  const [open, setOpen] = useState(false);
+
+  // Surface failed runs without a click: open once when an error first appears.
+  const autoAppliedRef = useRef(false);
+  useEffect(() => {
+    if (!autoAppliedRef.current && anyError) {
+      autoAppliedRef.current = true;
+      setOpen(true);
+    }
+  }, [anyError]);
+
+  return (
+    <div
+      className={cn(
+        'overflow-hidden rounded-xl border bg-muted/30 transition-all duration-200',
+        anyError ? 'border-red-500/30' : 'border-border/60',
+        open && 'shadow-sm',
+      )}
+    >
+      <button
+        type="button"
+        aria-expanded={open}
+        onClick={() => setOpen((prev) => !prev)}
+        className="flex w-full items-center gap-2.5 px-3 py-2 text-left outline-none transition-colors hover:bg-muted/50 focus-visible:ring-1 focus-visible:ring-ring"
+      >
+        <ChevronRight
+          className={cn(
+            'h-4 w-4 flex-shrink-0 text-muted-foreground/70 transition-transform duration-200',
+            open && 'rotate-90',
+          )}
+        />
+        <span className="grid h-6 w-6 flex-shrink-0 place-items-center rounded-md bg-emerald-500/10 text-emerald-600 dark:text-emerald-400">
+          <Terminal className="h-3.5 w-3.5" />
+        </span>
+        <span className="flex-1 text-xs font-medium text-foreground">
+          {anyRunning ? 'Running' : 'Ran'} <span className="text-muted-foreground">{count} commands</span>
+        </span>
+        {anyRunning && (
+          <span className="h-2.5 w-2.5 flex-shrink-0 animate-spin rounded-full border-[1.5px] border-muted-foreground/30 border-t-emerald-400" />
+        )}
+        {anyError && <ToolStatusBadge status="error" className="flex-shrink-0" />}
+      </button>
+
+      {open && (
+        <div className="settings-content-enter space-y-1 border-t border-border/50 p-2">
+          {commands.map((cmd) => (
+            <BashCommandDisplay
+              key={cmd.key}
+              command={cmd.command}
+              description={cmd.description}
+              output={cmd.output}
+              isError={cmd.isError}
+              status={cmd.status !== 'completed' ? cmd.status : undefined}
+              defaultOpen={false}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};

src/components/chat/tools/components/ContentRenderers/QuestionAnswerContent.test.tsx

@@ -0,0 +1,77 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { QuestionAnswerContent } from './QuestionAnswerContent';
+
+// Regression coverage for the chat-interface crash where an AskUserQuestion
+// payload loaded from a session transcript arrives with a non-array `questions`
+// or a question missing its `options` array. Rendering must degrade gracefully
+// instead of throwing "TypeError: e.map is not a function".
+
+test('renders without throwing when questions is a non-array value', () => {
+  assert.doesNotThrow(() => {
+    renderToStaticMarkup(
+      React.createElement(QuestionAnswerContent, {
+        // Malformed: object instead of an array
+        questions: { 0: { question: 'q?', options: [{ label: 'a' }] } } as never,
+        answers: {},
+      }),
+    );
+  });
+});
+
+test('renders without throwing when a question is missing options[]', () => {
+  assert.doesNotThrow(() => {
+    renderToStaticMarkup(
+      React.createElement(QuestionAnswerContent, {
+        questions: [{ question: 'Pick one?', header: 'H' } as never],
+        answers: { 'Pick one?': 'X' },
+      }),
+    );
+  });
+});
+
+test('renders without throwing when options[] contains malformed entries', () => {
+  assert.doesNotThrow(() => {
+    renderToStaticMarkup(
+      React.createElement(QuestionAnswerContent, {
+        questions: [{ question: 'Pick one?', options: [null, 'oops', { label: 'A' }] } as never],
+        answers: { 'Pick one?': 'A, Custom' },
+      }),
+    );
+  });
+});
+
+test('renders without throwing when a questions entry is null/non-object', () => {
+  assert.doesNotThrow(() => {
+    renderToStaticMarkup(
+      React.createElement(QuestionAnswerContent, {
+        questions: [null, 'oops', { question: 'Ok?', options: [{ label: 'A' }] }] as never,
+        answers: {},
+      }),
+    );
+  });
+});
+
+test('renders without throwing when an answer is a non-string value', () => {
+  assert.doesNotThrow(() => {
+    renderToStaticMarkup(
+      React.createElement(QuestionAnswerContent, {
+        questions: [{ question: 'Pick one?', options: [{ label: 'A' }] }],
+        // Malformed: answer is an object instead of the expected string
+        answers: { 'Pick one?': { unexpected: true } } as never,
+      }),
+    );
+  });
+});
+
+test('still renders a well-formed question + answer', () => {
+  const html = renderToStaticMarkup(
+    React.createElement(QuestionAnswerContent, {
+      questions: [{ question: 'Pick one?', header: 'H', options: [{ label: 'A' }, { label: 'B' }] }],
+      answers: { 'Pick one?': 'A' },
+    }),
+  );
+  assert.ok(html.includes('Pick one?'));
+});

src/components/chat/tools/components/ContentRenderers/QuestionAnswerContent.tsx

@@ -15,7 +15,11 @@ export const QuestionAnswerContent: React.FC<QuestionAnswerContentProps> = ({
 }) => {
   const [expandedIdx, setExpandedIdx] = useState<number | null>(null);
 
-  if (!questions || questions.length === 0) {
+  // Tool inputs are runtime data loaded from session transcripts and may be
+  // malformed (e.g. `questions` arriving as a non-array). Guard with
+  // Array.isArray so a single bad payload can't crash the whole chat view
+  // with "e.map is not a function".
+  if (!Array.isArray(questions) || questions.length === 0) {
     return null;
   }
 
@@ -24,11 +28,23 @@ export const QuestionAnswerContent: React.FC<QuestionAnswerContentProps> = ({
 
   return (
     <div className={`space-y-2 ${className}`}>
-      {questions.map((q, idx) => {
+      {questions.map((rawQuestion, idx) => {
+        // Entries come from session transcripts and may be malformed; skip
+        // anything that isn't a proper question object with a string prompt.
+        if (!rawQuestion || typeof rawQuestion !== 'object' || typeof rawQuestion.question !== 'string') {
+          return null;
+        }
+        const q = rawQuestion;
         const answer = answers?.[q.question];
-        const answerLabels = answer ? answer.split(', ') : [];
+        // `answer` may be a non-string (or absent) in malformed payloads.
+        const answerLabels = typeof answer === 'string' ? answer.split(', ') : [];
         const skipped = !answer;
         const isExpanded = expandedIdx === idx;
+        // `options` is typed as an array but comes from untrusted runtime data;
+        // keep only valid entries so `.some`/`.map` below never throw.
+        const options = Array.isArray(q.options)
+          ? q.options.filter((opt) => opt && typeof opt === 'object' && typeof opt.label === 'string')
+          : [];
 
         return (
           <div
@@ -74,7 +90,7 @@ export const QuestionAnswerContent: React.FC<QuestionAnswerContentProps> = ({
                 {!isExpanded && answerLabels.length > 0 && (
                   <div className="mt-1.5 flex flex-wrap gap-1">
                     {answerLabels.map((lbl) => {
-                      const isCustom = !q.options.some(o => o.label === lbl);
+                      const isCustom = !options.some(o => o.label === lbl);
                       return (
                         <span
                           key={lbl}
@@ -110,7 +126,7 @@ export const QuestionAnswerContent: React.FC<QuestionAnswerContentProps> = ({
             {isExpanded && (
               <div className="border-t border-gray-100 px-3 pb-2.5 pt-0.5 dark:border-gray-700/40">
                 <div className="ml-6.5 space-y-1">
-                  {q.options.map((opt) => {
+                  {options.map((opt) => {
                     const wasSelected = answerLabels.includes(opt.label);
                     return (
                       <div
@@ -148,7 +164,7 @@ export const QuestionAnswerContent: React.FC<QuestionAnswerContentProps> = ({
                     );
                   })}
 
-                  {answerLabels.filter(lbl => !q.options.some(o => o.label === lbl)).map(lbl => (
+                  {answerLabels.filter(lbl => !options.some(o => o.label === lbl)).map(lbl => (
                     <div
                       key={lbl}
                       className="flex items-start gap-2 rounded-lg border border-blue-200/60 bg-blue-50/80 px-2.5 py-1.5 text-[12px] dark:border-blue-800/40 dark:bg-blue-900/20"

src/components/chat/tools/components/index.ts

@@ -1,6 +1,8 @@
 export { CollapsibleSection } from './CollapsibleSection';
 export { ToolDiffViewer } from './ToolDiffViewer';
 export { OneLineDisplay } from './OneLineDisplay';
+export { BashCommandDisplay } from './BashCommandDisplay';
+export { CommandRunGroup } from './CommandRunGroup';
 export { CollapsibleDisplay } from './CollapsibleDisplay';
 export { SubagentContainer } from './SubagentContainer';
 export * from './ContentRenderers';

src/components/chat/view/subcomponents/ChatMessagesPane.tsx

@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next';
 import { useCallback, useRef } from 'react';
-import type { Dispatch, RefObject, SetStateAction } from 'react';
+import type { Dispatch, ReactNode, RefObject, SetStateAction } from 'react';
 
 import type { ChatMessage } from '../../types/types';
 import type {
@@ -13,6 +13,7 @@ import { getIntrinsicMessageKey } from '../../utils/messageKeys';
 
 import MessageComponent from './MessageComponent';
 import ProviderSelectionEmptyState from './ProviderSelectionEmptyState';
+import { CommandRunGroup } from '../../tools';
 
 interface ChatMessagesPaneProps {
   scrollContainerRef: RefObject<HTMLDivElement>;
@@ -252,25 +253,81 @@ export default function ChatMessagesPane({
             </div>
           )}
 
-          {visibleMessages.map((message, index) => {
-            const prevMessage = index > 0 ? visibleMessages[index - 1] : null;
-            return (
-              <MessageComponent
-                key={getMessageKey(message)}
-                message={message}
-                prevMessage={prevMessage}
-                createDiff={createDiff}
-                onFileOpen={onFileOpen}
-                onShowSettings={onShowSettings}
-                onGrantToolPermission={onGrantToolPermission}
-                autoExpandTools={autoExpandTools}
-                showRawParameters={showRawParameters}
-                showThinking={showThinking}
-                selectedProject={selectedProject}
-                provider={provider}
-              />
-            );
-          })}
+          {(() => {
+            const isBashCommand = (m: ChatMessage | null | undefined) =>
+              Boolean(m && m.isToolUse && m.toolName === 'Bash' && !m.isSubagentContainer);
+            // Messages that render nothing (e.g. thinking hidden when showThinking
+            // is off) shouldn't break a visual run of commands.
+            const isRendered = (m: ChatMessage) => !(m.isThinking && !showThinking);
+
+            const items: ReactNode[] = [];
+
+            for (let index = 0; index < visibleMessages.length; index++) {
+              const message = visibleMessages[index];
+
+              // Collapse a run of 2+ consecutive shell commands under a single
+              // header so long command runs stay tidy (Codex-in-VSCode style).
+              // Skip over non-rendered messages (e.g. hidden reasoning that Codex
+              // interleaves between commands) so they don't split the run.
+              if (isBashCommand(message)) {
+                const runIndices = [index];
+                let cursor = index + 1;
+                while (cursor < visibleMessages.length) {
+                  const candidate = visibleMessages[cursor];
+                  if (!isRendered(candidate)) {
+                    cursor++;
+                    continue;
+                  }
+                  if (isBashCommand(candidate)) {
+                    runIndices.push(cursor);
+                    cursor++;
+                    continue;
+                  }
+                  break;
+                }
+                if (runIndices.length >= 2) {
+                  const groupMessages = runIndices.map((i) => visibleMessages[i]);
+                  items.push(
+                    <CommandRunGroup key={getMessageKey(groupMessages[0])} messages={groupMessages} />,
+                  );
+                  // Consume everything up to the last command in the run (any
+                  // trailing skipped messages render nothing anyway).
+                  index = runIndices[runIndices.length - 1];
+                  continue;
+                }
+              }
+
+              // Walk back past messages that are not actually rendered (e.g. thinking
+              // messages hidden when showThinking is off). Otherwise a hidden thinking
+              // message would make the following message look "grouped" and suppress its
+              // provider header/icon — which is why Claude turns lost their icon.
+              let prevMessage: ChatMessage | null = null;
+              for (let i = index - 1; i >= 0; i--) {
+                const candidate = visibleMessages[i];
+                if (candidate.isThinking && !showThinking) continue;
+                prevMessage = candidate;
+                break;
+              }
+              items.push(
+                <MessageComponent
+                  key={getMessageKey(message)}
+                  message={message}
+                  prevMessage={prevMessage}
+                  createDiff={createDiff}
+                  onFileOpen={onFileOpen}
+                  onShowSettings={onShowSettings}
+                  onGrantToolPermission={onGrantToolPermission}
+                  autoExpandTools={autoExpandTools}
+                  showRawParameters={showRawParameters}
+                  showThinking={showThinking}
+                  selectedProject={selectedProject}
+                  provider={provider}
+                />,
+              );
+            }
+
+            return items;
+          })()}
         </>
       )}
     </div>

src/components/chat/view/subcomponents/CommandResultModal.tsx

@@ -2,9 +2,7 @@ import { useMemo, useState } from 'react';
 import {
   Activity,
   BadgeCheck,
-  Check,
   CircleHelp,
-  Clipboard,
   Coins,
   Cpu,
   Gauge,
@@ -59,19 +57,6 @@ type ModelOption = {
   description?: string;
 };
 
-const formatUpdatedAt = (value?: string) => {
-  if (!value) {
-    return 'Not cached yet';
-  }
-
-  const parsed = new Date(value);
-  if (Number.isNaN(parsed.getTime())) {
-    return 'Not cached yet';
-  }
-
-  return parsed.toLocaleString();
-};
-
 const PROVIDER_LABELS: Record<string, string> = {
   claude: 'Claude',
   cursor: 'Cursor',
@@ -246,7 +231,6 @@ function HelpContent({ data }: { data: HelpCommandData }) {
 function ModelsContent({
   data,
   providerModelCatalog,
-  providerModelCacheCatalog,
   providerModelsRefreshing,
   onHardRefreshProviderModels,
   currentSessionId,
@@ -254,14 +238,12 @@ function ModelsContent({
 }: {
   data: ModelCommandData;
   providerModelCatalog: Partial<Record<LLMProvider, ProviderModelsDefinition>>;
-  providerModelCacheCatalog: Partial<Record<LLMProvider, ProviderModelsCacheInfo>>;
   providerModelsRefreshing: boolean;
   onHardRefreshProviderModels: () => void;
   currentSessionId: string | null;
   onSelectProviderModel: CommandResultModalProps['onSelectProviderModel'];
 }) {
   const [query, setQuery] = useState('');
-  const [copiedModel, setCopiedModel] = useState<string | null>(null);
   const [changingModel, setChangingModel] = useState<string | null>(null);
   const [pendingSessionModel, setPendingSessionModel] = useState<string | null>(null);
   const [selectionNotice, setSelectionNotice] = useState<string | null>(null);
@@ -269,7 +251,6 @@ function ModelsContent({
   const currentModel = data?.current?.model || 'Unknown';
   const providerLabel = data?.current?.providerLabel || getProviderLabel(currentProvider);
   const liveDefinition = providerModelCatalog[currentProvider];
-  const currentCache = providerModelCacheCatalog[currentProvider] ?? data?.cache;
   const availableOptions = useMemo<ModelOption[]>(() => {
     if (liveDefinition?.OPTIONS && liveDefinition.OPTIONS.length > 0) {
       return liveDefinition.OPTIONS;
@@ -282,7 +263,6 @@ function ModelsContent({
     const availableModels = Array.isArray(data?.availableModels) ? data.availableModels : [];
     return availableModels.map((model) => ({ value: model, label: model }));
   }, [data, liveDefinition]);
-  const defaultModel = liveDefinition?.DEFAULT || data?.defaultModel || currentModel;
 
   const filteredOptions = useMemo(() => {
     const normalized = query.trim().toLowerCase();
@@ -296,18 +276,8 @@ function ModelsContent({
     });
   }, [availableOptions, query]);
 
-  const activeOption = availableOptions.find((option) => option.value === currentModel);
   const hasConcreteSessionId = typeof currentSessionId === 'string' && currentSessionId.trim().length > 0;
-
-  const copyModel = (model: string) => {
-    if (typeof navigator !== 'undefined' && navigator.clipboard) {
-      void navigator.clipboard.writeText(model).catch(() => undefined);
-    }
-    setCopiedModel(model);
-    window.setTimeout(() => {
-      setCopiedModel((current) => (current === model ? null : current));
-    }, 1300);
-  };
+  const showSearch = availableOptions.length > 6;
 
   const handleSelectModel = async (model: string) => {
     setChangingModel(model);
@@ -330,162 +300,106 @@ function ModelsContent({
   };
 
   return (
-    <div className="flex h-full min-h-0 flex-col gap-2.5">
-      <div className="rounded-2xl border border-border/70 bg-muted/20 p-2.5">
-        <div className="grid gap-2.5 lg:grid-cols-[minmax(0,1.55fr)_minmax(12rem,0.7fr)_minmax(15rem,0.9fr)] lg:items-start">
-          <div className="min-w-0">
-            <div className="flex flex-wrap items-center gap-2">
-              <Badge variant="secondary" className="rounded-lg border border-primary/20 bg-primary/10 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.18em] text-primary">
-                {providerLabel}
-              </Badge>
-              <Badge variant="secondary" className="rounded-lg px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.18em] text-foreground">
-                {availableOptions.length} models
-              </Badge>
-            </div>
-
-            <div className="mt-2 rounded-xl border border-primary/15 bg-primary/[0.06] px-3 py-2">
-              <p className="text-[11px] font-bold uppercase tracking-[0.2em] text-primary">Active Model</p>
-              <p className="mt-1 break-all font-mono text-[0.98rem] font-semibold leading-5 text-foreground sm:text-[1.05rem]">
-                {currentModel}
-              </p>
-              {activeOption?.label && activeOption.label !== currentModel && (
-                <p className="mt-1 text-[11px] font-medium text-foreground/85">{activeOption.label}</p>
-              )}
-              {activeOption?.description && (
-                <p className="mt-0.5 line-clamp-1 text-[11px] text-muted-foreground">{activeOption.description}</p>
-              )}
-              {pendingSessionModel && pendingSessionModel !== currentModel && (
-                <p className="mt-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-primary">
-                  Next response: {pendingSessionModel}
-                </p>
-              )}
-            </div>
-          </div>
-
-          <div className="grid gap-2 sm:grid-cols-2 lg:grid-cols-1">
-            <div className="rounded-xl border border-border/60 bg-background/55 px-2.5 py-1.5">
-              <p className="text-[10px] font-bold uppercase tracking-[0.18em] text-foreground/80">Default</p>
-              <p className="mt-1 break-all font-mono text-[11px] font-medium text-foreground">{defaultModel}</p>
-            </div>
-            <div className="rounded-xl border border-border/60 bg-background/55 px-2.5 py-1.5">
-              <p className="text-[10px] font-bold uppercase tracking-[0.18em] text-foreground/80">Updated</p>
-              <p className="mt-1 text-[11px] font-medium text-foreground">{formatUpdatedAt(currentCache?.updatedAt)}</p>
-            </div>
-          </div>
-
-          <div className="rounded-xl border border-border/60 bg-background/55 p-2.5">
-            <div className="flex flex-wrap items-center gap-1.5">
-              <p className="text-[10px] font-bold uppercase tracking-[0.18em] text-foreground/80">
-                Catalog Refresh
-              </p>
-              <Badge variant="secondary" className="rounded-md px-1.5 py-0 text-[9px] uppercase tracking-[0.14em]">
-                All providers
-              </Badge>
-            </div>
-            <p className="mt-1.5 text-[11px] leading-4 text-muted-foreground">
-              Model lists are cached for 3 days. Refresh after CLI, auth, or config changes,
-              or when a new model is missing.
-            </p>
-            <Button
-              type="button"
-              variant="outline"
-              size="sm"
-              onClick={onHardRefreshProviderModels}
-              disabled={providerModelsRefreshing}
-              className="mt-2 h-8 w-full rounded-xl px-3"
-            >
-              <RefreshCw className={providerModelsRefreshing ? 'animate-spin' : ''} />
-              {providerModelsRefreshing ? 'Refreshing catalogs...' : 'Refresh from providers'}
-            </Button>
-          </div>
-        </div>
-
-        <div className="mt-2 border-t border-border/50 pt-1.5 text-[11px] text-muted-foreground">
-          {hasConcreteSessionId
-            ? 'Selecting a model stores a session override and applies it on the next response for this session.'
-            : 'Selecting a model updates the default model used for new turns in this provider.'}
-          {selectionNotice && <span className="ml-2 text-foreground">{selectionNotice}</span>}
+    <div className="flex h-full min-h-0 flex-col gap-3">
+      {/* Compact context bar: active model + refresh, no clutter */}
+      <div className="flex items-center justify-between gap-3 rounded-2xl border border-border/70 bg-muted/20 px-3.5 py-2.5">
+        <div className="min-w-0">
+          <p className="text-[10px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">
+            Active model · {providerLabel}
+          </p>
+          <p className="mt-0.5 flex flex-wrap items-center gap-x-2 gap-y-0.5">
+            <span className="break-all font-mono text-sm font-semibold text-foreground">{currentModel}</span>
+            {pendingSessionModel && pendingSessionModel !== currentModel && (
+              <span className="text-[11px] font-semibold uppercase tracking-[0.14em] text-emerald-500 dark:text-emerald-400">
+                → {pendingSessionModel} next
+              </span>
+            )}
+          </p>
         </div>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          onClick={onHardRefreshProviderModels}
+          disabled={providerModelsRefreshing}
+          title="Refresh model list from providers"
+          aria-label="Refresh model list from providers"
+          className="h-9 w-9 shrink-0 rounded-xl text-muted-foreground hover:text-foreground"
+        >
+          <RefreshCw className={`h-4 w-4 ${providerModelsRefreshing ? 'animate-spin' : ''}`} />
+        </Button>
       </div>
 
-      <div className="flex min-h-0 flex-1 flex-col rounded-3xl border border-border/70 bg-muted/15 p-3 sm:p-4">
-        <div className="mb-2.5 grid gap-2 sm:grid-cols-[1fr_auto] sm:items-center">
-          <div className="min-w-0">
-            <SearchField value={query} onChange={setQuery} placeholder={`Search ${providerLabel} models...`} />
-          </div>
-          <Badge variant="secondary" className="h-9 justify-center rounded-xl px-3 font-mono text-xs">
-            {filteredOptions.length} shown
-          </Badge>
-        </div>
+      {showSearch && (
+        <SearchField value={query} onChange={setQuery} placeholder={`Search ${providerLabel} models...`} />
+      )}
 
-        {filteredOptions.length > 0 ? (
-          <div className="scrollbar-thin min-h-0 flex-1 overflow-y-auto pr-1">
-            <div className="grid gap-2 md:grid-cols-2">
-              {filteredOptions.map((option, index) => {
-                const isCurrent = option.value === currentModel;
-                const wasCopied = copiedModel === option.value;
-                const isPendingSelection = option.value === pendingSessionModel;
-                const isChanging = option.value === changingModel;
-                return (
-                  <div
-                    key={option.value}
-                    className={`settings-content-enter group flex min-h-[4.5rem] items-start gap-3 rounded-2xl border p-3 shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md ${
-                      isCurrent
-                        ? 'border-primary/45 bg-primary/10'
-                        : isPendingSelection
-                          ? 'border-emerald-500/35 bg-emerald-500/10'
-                          : 'border-border/70 bg-background/80 hover:border-primary/30 hover:bg-background'
-                    }`}
-                    style={{ animationDelay: `${Math.min(index * 14, 180)}ms` }}
-                  >
-                    <button
-                      type="button"
-                      onClick={() => handleSelectModel(option.value)}
-                      disabled={Boolean(changingModel)}
-                      className="min-w-0 flex-1 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-                      aria-label={`Use model ${option.value}`}
-                    >
-                      <span className="flex items-center gap-2">
-                        <span className="break-all font-mono text-sm font-semibold text-foreground">{option.value}</span>
-                        {isCurrent && <BadgeCheck className="h-4 w-4 shrink-0 text-primary" />}
-                      </span>
-                      {option.label && option.label !== option.value && (
-                        <span className="mt-1 block text-xs text-muted-foreground">{option.label}</span>
-                      )}
-                      {option.description && (
-                        <span className="mt-1 block text-xs leading-5 text-muted-foreground">{option.description}</span>
-                      )}
-                      {isCurrent && <span className="mt-2 block text-[11px] font-semibold uppercase tracking-[0.16em] text-primary">Current selection</span>}
-                      {isPendingSelection && !isCurrent && (
-                        <span className="mt-2 block text-[11px] font-semibold uppercase tracking-[0.16em] text-emerald-400">
-                          Next response selection
-                        </span>
-                      )}
-                      {isChanging && (
-                        <span className="mt-2 block text-[11px] font-semibold uppercase tracking-[0.16em] text-primary">
-                          Applying...
-                        </span>
-                      )}
-                    </button>
-                    <button
-                      type="button"
-                      onClick={() => copyModel(option.value)}
-                      className="rounded-lg border border-border/70 bg-muted/30 p-2 text-muted-foreground transition-colors group-hover:text-primary"
-                      aria-label={`Copy model id ${option.value}`}
-                    >
-                      {wasCopied ? <Check className="h-4 w-4" /> : <Clipboard className="h-4 w-4" />}
-                    </button>
-                  </div>
-                );
-              })}
-            </div>
+      {filteredOptions.length > 0 ? (
+        <div className="scrollbar-thin -mr-1 min-h-0 flex-1 overflow-y-auto pr-1">
+          <div className="grid gap-2 md:grid-cols-2">
+            {filteredOptions.map((option, index) => {
+              const isCurrent = option.value === currentModel;
+              const isPendingSelection = option.value === pendingSessionModel;
+              const isChanging = option.value === changingModel;
+              return (
+                <button
+                  key={option.value}
+                  type="button"
+                  onClick={() => handleSelectModel(option.value)}
+                  disabled={Boolean(changingModel)}
+                  aria-label={`Select model ${option.value}`}
+                  className={`settings-content-enter group flex min-h-[4rem] flex-col rounded-2xl border p-3 text-left shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-default disabled:opacity-60 ${
+                    isCurrent
+                      ? 'border-primary/45 bg-primary/10'
+                      : isPendingSelection
+                        ? 'border-emerald-500/35 bg-emerald-500/10'
+                        : 'border-border/70 bg-background/80 hover:border-primary/30 hover:bg-background'
+                  }`}
+                  style={{ animationDelay: `${Math.min(index * 14, 180)}ms` }}
+                >
+                  <span className="flex items-center justify-between gap-2">
+                    <span className="break-all font-mono text-sm font-semibold text-foreground">{option.value}</span>
+                    {isCurrent ? (
+                      <BadgeCheck className="h-4 w-4 shrink-0 text-primary" />
+                    ) : isChanging ? (
+                      <RefreshCw className="h-4 w-4 shrink-0 animate-spin text-primary" />
+                    ) : null}
+                  </span>
+                  {option.label && option.label !== option.value && (
+                    <span className="mt-1 text-xs font-medium text-foreground/85">{option.label}</span>
+                  )}
+                  {option.description && (
+                    <span className="mt-1 text-xs leading-5 text-muted-foreground">{option.description}</span>
+                  )}
+                  {isCurrent && (
+                    <span className="mt-2 text-[11px] font-semibold uppercase tracking-[0.16em] text-primary">Current selection</span>
+                  )}
+                  {isPendingSelection && !isCurrent && (
+                    <span className="mt-2 text-[11px] font-semibold uppercase tracking-[0.16em] text-emerald-500 dark:text-emerald-400">
+                      Applies next response
+                    </span>
+                  )}
+                </button>
+              );
+            })}
           </div>
+        </div>
+      ) : (
+        <div className="rounded-2xl border border-dashed border-border bg-background/60 px-4 py-10 text-center text-sm text-muted-foreground">
+          No models match that search.
+        </div>
+      )}
+
+      {/* Single quiet line of guidance / feedback */}
+      <p className="shrink-0 text-[11px] leading-4 text-muted-foreground">
+        {selectionNotice ? (
+          <span className="text-foreground">{selectionNotice}</span>
+        ) : hasConcreteSessionId ? (
+          'Your choice applies to this session on the next response.'
         ) : (
-          <div className="rounded-2xl border border-dashed border-border bg-background/60 px-4 py-10 text-center text-sm text-muted-foreground">
-            No models match that search.
-          </div>
+          'Your choice becomes the default model for new turns.'
         )}
-      </div>
+      </p>
     </div>
   );
 }
@@ -606,7 +520,6 @@ export default function CommandResultModal({
   payload,
   onClose,
   providerModelCatalog,
-  providerModelCacheCatalog,
   providerModelsRefreshing,
   onHardRefreshProviderModels,
   currentSessionId,
@@ -624,9 +537,9 @@ export default function CommandResultModal({
       icon: CircleHelp,
     },
     models: {
-      eyebrow: 'Model inventory',
-      title: 'Available Models',
-      subtitle: 'Browse, search, and copy model IDs for the active provider.',
+      eyebrow: 'Model selection',
+      title: 'Choose a Model',
+      subtitle: 'Pick the model this provider should use.',
       icon: Cpu,
     },
     cost: {
@@ -700,7 +613,6 @@ export default function CommandResultModal({
             <ModelsContent
               data={payload.data as ModelCommandData}
               providerModelCatalog={providerModelCatalog}
-              providerModelCacheCatalog={providerModelCacheCatalog}
               providerModelsRefreshing={providerModelsRefreshing}
               onHardRefreshProviderModels={onHardRefreshProviderModels}
               currentSessionId={currentSessionId}

src/components/chat/view/subcomponents/Markdown.tsx

@@ -8,12 +8,48 @@ import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import { useTranslation } from 'react-i18next';
 import { normalizeInlineCodeFences } from '../../utils/chatFormatting';
 import { copyTextToClipboard } from '../../../../utils/clipboard';
+import { usePaletteOps } from '../../../../contexts/PaletteOpsContext';
 
 type MarkdownProps = {
   children: React.ReactNode;
   className?: string;
 };
 
+// Links to the wider web (or in-page anchors) keep normal browser navigation;
+// everything else is treated as a workspace file reference.
+const isExternalHref = (href?: string): boolean =>
+  !!href && (/^(https?:|mailto:|tel:|data:)/i.test(href) || href.startsWith('#'));
+
+// Strip a trailing `:line` / `:line:col` suffix (e.g. `src/foo.ts:130`).
+const stripLineSuffix = (value: string): string => value.replace(/:\d+(?::\d+)?$/, '');
+
+// A usable file path contains a separator or a filename with an extension.
+const looksLikeFilePath = (value?: string): value is string => {
+  if (!value) {
+    return false;
+  }
+  const cleaned = stripLineSuffix(value.trim());
+  if (!cleaned || cleaned === '#') {
+    return false;
+  }
+  return /[\\/]/.test(cleaned) || /\.[a-z0-9]+$/i.test(cleaned);
+};
+
+// Extract plain text from link children so a reference rendered only as link
+// text (e.g. `[src/foo.ts]()` with an empty href) can still be opened.
+const childrenToText = (children: React.ReactNode): string => {
+  if (typeof children === 'string' || typeof children === 'number') {
+    return String(children);
+  }
+  if (Array.isArray(children)) {
+    return children.map(childrenToText).join('');
+  }
+  if (React.isValidElement(children)) {
+    return childrenToText((children.props as { children?: React.ReactNode }).children);
+  }
+  return '';
+};
+
 type CodeBlockProps = {
   node?: any;
   inline?: boolean;
@@ -123,11 +159,6 @@ const markdownComponents = {
       {children}
     </blockquote>
   ),
-  a: ({ href, children }: { href?: string; children?: React.ReactNode }) => (
-    <a href={href} className="text-blue-600 hover:underline dark:text-blue-400" target="_blank" rel="noopener noreferrer">
-      {children}
-    </a>
-  ),
   p: ({ children }: { children?: React.ReactNode }) => <div className="mb-2 last:mb-0">{children}</div>,
   table: ({ children }: { children?: React.ReactNode }) => (
     <div className="my-2 overflow-x-auto">
@@ -147,10 +178,50 @@ export function Markdown({ children, className }: MarkdownProps) {
   const content = normalizeInlineCodeFences(String(children ?? ''));
   const remarkPlugins = useMemo(() => [remarkGfm, remarkMath], []);
   const rehypePlugins = useMemo(() => [rehypeKatex], []);
+  const { openFileInEditor } = usePaletteOps();
+
+  const components = useMemo(
+    () => ({
+      ...markdownComponents,
+      a: ({ href, children: linkChildren }: { href?: string; children?: React.ReactNode }) => {
+        // Prefer the href when it is a real path; otherwise fall back to the
+        // link text, since models often emit `[src/foo.ts]()` with an empty href.
+        const linkText = childrenToText(linkChildren);
+        const fileRef = looksLikeFilePath(href) ? href : looksLikeFilePath(linkText) ? linkText : undefined;
+
+        if (fileRef && !isExternalHref(href)) {
+          return (
+            <a
+              href={href || fileRef}
+              className="cursor-pointer text-blue-600 hover:underline dark:text-blue-400"
+              onClick={(event) => {
+                event.preventDefault();
+                openFileInEditor(stripLineSuffix(fileRef));
+              }}
+            >
+              {linkChildren}
+            </a>
+          );
+        }
+
+        return (
+          <a
+            href={href}
+            className="text-blue-600 hover:underline dark:text-blue-400"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {linkChildren}
+          </a>
+        );
+      },
+    }),
+    [openFileInEditor],
+  );
 
   return (
     <div className={className}>
-      <ReactMarkdown remarkPlugins={remarkPlugins} rehypePlugins={rehypePlugins} components={markdownComponents as any}>
+      <ReactMarkdown remarkPlugins={remarkPlugins} rehypePlugins={rehypePlugins} components={components as any}>
         {content}
       </ReactMarkdown>
     </div>

src/components/chat/view/subcomponents/MessageComponent.tsx

@@ -218,8 +218,8 @@ const MessageComponent = memo(({ message, prevMessage, createDiff, onFileOpen, a
                   />
                 )}
 
-                {/* Tool Result Section */}
-                {message.toolResult && !shouldHideToolResult(message.toolName || 'UnknownTool', message.toolResult) && (
+                {/* Tool Result Section — Bash renders its output inside the command row above. */}
+                {message.toolResult && message.toolName !== 'Bash' && !shouldHideToolResult(message.toolName || 'UnknownTool', message.toolResult) && (
                   message.toolResult.isError ? (
                     // Error results - red error box with content
                     <div

src/components/main-content/view/MainContent.tsx

@@ -11,6 +11,7 @@ import { useTaskMaster } from '../../../contexts/TaskMasterContext';
 import { usePaletteOpsRegister } from '../../../contexts/PaletteOpsContext';
 import { useTasksSettings } from '../../../contexts/TasksSettingsContext';
 import { useUiPreferences } from '../../../hooks/useUiPreferences';
+import { useFileOpenResolver } from '../../../hooks/useFileOpenResolver';
 import { authenticatedFetch } from '../../../utils/api';
 import { useEditorSidebar } from '../../code-editor/hooks/useEditorSidebar';
 import EditorSidebar from '../../code-editor/view/EditorSidebar';
@@ -77,6 +78,10 @@ function MainContent({
     isMobile,
   });
 
+  // Resolves bare/partial file references (e.g. links inside chat messages) to
+  // real project files before opening them in the in-app editor.
+  const resolvedFileOpen = useFileOpenResolver(selectedProject, handleFileOpen);
+
   useEffect(() => {
     // Identify projects by DB `projectId`; the TaskMaster context uses the
     // same identifier to key its internal maps.
@@ -121,6 +126,10 @@ function MainContent({
       setActiveTab('files');
       handleFileOpen(filePath);
     },
+    // Opens the editor side panel in place, keeping the current tab (e.g. chat).
+    openFileInEditor: (filePath: string) => {
+      resolvedFileOpen(filePath);
+    },
   });
 
   if (isLoading) {
@@ -200,11 +209,7 @@ function MainContent({
 
           {shouldShowBrowserTab && activeTab === 'browser' && (
             <div className="h-full overflow-hidden">
-              <BrowserUsePanel
-                isVisible={activeTab === 'browser'}
-                projectId={selectedProject.projectId}
-                onShowSettings={onShowSettings}
-              />
+              <BrowserUsePanel isVisible={activeTab === 'browser'} onShowSettings={onShowSettings} />
             </div>
           )}
 

src/components/main-content/view/subcomponents/MainContentTitle.tsx

@@ -73,15 +73,7 @@ export default function MainContentTitle({
             <h2 className="scrollbar-hide overflow-x-auto whitespace-nowrap text-sm font-semibold leading-tight text-foreground">
               {getSessionTitle(selectedSession)}
             </h2>
-            <div className="flex min-w-0 items-center gap-2 text-[11px] leading-tight text-muted-foreground">
-              <span className="min-w-0 truncate">{selectedProject.displayName}</span>
-              <span
-                className="hidden min-w-0 max-w-[45%] flex-shrink truncate border-l border-border/60 pl-2 font-mono text-[10px] sm:block"
-                title={selectedSession.id}
-              >
-                {selectedSession.id}
-              </span>
-            </div>
+            <div className="truncate text-[11px] leading-tight text-muted-foreground">{selectedProject.displayName}</div>
           </div>
         ) : showChatNewSession ? (
           <div className="min-w-0">

src/components/settings/view/tabs/browser-use-settings/BrowserUseSettingsTab.tsx

@@ -1,32 +1,22 @@
 import { useCallback, useEffect, useState } from 'react';
-import { Download, ExternalLink, Eye, Loader2, Zap } from 'lucide-react';
+import { Download, Loader2 } from 'lucide-react';
 
-import { Button, Input } from '../../../../../shared/view/ui';
+import { Button } from '../../../../../shared/view/ui';
 import { authenticatedFetch } from '../../../../../utils/api';
 import SettingsCard from '../../SettingsCard';
 import SettingsRow from '../../SettingsRow';
 import SettingsSection from '../../SettingsSection';
 import SettingsToggle from '../../SettingsToggle';
 
-const BROWSER_USE_GUIDE_URL = 'https://cloudcli.ai/docs/browser-use';
-
 type BrowserUseSettings = {
   enabled: boolean;
-  persistSessions: boolean;
-  defaultProfileName: string;
-  browserBackend: 'playwright' | 'camoufox-vnc';
 };
 
 type BrowserUseStatus = {
   enabled: boolean;
   available: boolean;
-  backend: 'playwright' | 'camoufox-vnc';
-  browserBackend: 'playwright' | 'camoufox-vnc';
   playwrightInstalled: boolean;
   chromiumInstalled: boolean;
-  camoufoxInstalled: boolean;
-  noVncInstalled: boolean;
-  x11vncInstalled: boolean;
   installInProgress: boolean;
   message: string;
 };
@@ -42,20 +32,16 @@ async function readJson<T>(response: Response): Promise<T> {
 export default function BrowserUseSettingsTab() {
   const [settings, setSettings] = useState<BrowserUseSettings | null>(null);
   const [status, setStatus] = useState<BrowserUseStatus | null>(null);
-  const [hasLoadedSettings, setHasLoadedSettings] = useState(false);
   const [isSettingsLoading, setIsSettingsLoading] = useState(true);
   const [isStatusLoading, setIsStatusLoading] = useState(true);
   const [isSaving, setIsSaving] = useState(false);
   const [isInstalling, setIsInstalling] = useState(false);
   const [error, setError] = useState<string | null>(null);
-  const [profileNameDraft, setProfileNameDraft] = useState('default');
 
   const loadSettings = useCallback(async () => {
     const settingsResponse = await authenticatedFetch('/api/browser-use/settings');
     const settingsData = await readJson<{ data: { settings: BrowserUseSettings } }>(settingsResponse);
     setSettings(settingsData.data.settings);
-    setHasLoadedSettings(true);
-    setProfileNameDraft(settingsData.data.settings.defaultProfileName || 'default');
   }, []);
 
   const loadStatus = useCallback(async () => {
@@ -66,7 +52,6 @@ export default function BrowserUseSettingsTab() {
 
   useEffect(() => {
     setError(null);
-    setHasLoadedSettings(false);
     setIsSettingsLoading(true);
     setIsStatusLoading(true);
 
@@ -89,7 +74,6 @@ export default function BrowserUseSettingsTab() {
       });
       const data = await readJson<{ data: { settings: BrowserUseSettings } }>(response);
       setSettings(data.data.settings);
-      setHasLoadedSettings(true);
       window.dispatchEvent(new Event('browserUseSettingsChanged'));
       setIsStatusLoading(true);
       await loadStatus();
@@ -117,21 +101,8 @@ export default function BrowserUseSettingsTab() {
     }
   };
 
-  const saveProfileName = async () => {
-    const nextName = profileNameDraft.trim() || 'default';
-    setProfileNameDraft(nextName);
-    if (nextName === settings?.defaultProfileName) {
-      return;
-    }
-    await updateSettings({ defaultProfileName: nextName });
-  };
-
   const browserEnabled = settings?.enabled === true;
-  const browserDisabled = hasLoadedSettings && settings?.enabled === false;
-  const persistSessions = settings?.persistSessions === true;
-  const selectedBackend = settings?.browserBackend || 'playwright';
-  const effectiveBackend = status?.backend || 'playwright';
-  const needsBrowserBinaries = Boolean(browserEnabled && status && !status.available);
+  const needsBrowserBinaries = Boolean(browserEnabled && status && (!status.playwrightInstalled || !status.chromiumInstalled));
   const runtimeLabel = (installed?: boolean) => {
     if (isStatusLoading && !status) {
       return 'checking...';
@@ -143,165 +114,33 @@ export default function BrowserUseSettingsTab() {
     <div className="space-y-8">
       <SettingsSection
         title="Browser"
-        description="Give coding agents a working browser so they can open websites, test flows, capture screenshots, and help debug what users actually see."
+        description="Allow agents to create guarded Playwright browser sessions that you can monitor from the Browser tab."
       >
         <SettingsCard divided>
           <SettingsRow
-            label="Give Agents Browser Access"
-            description="Let agents use a browser during coding tasks while you can watch live sessions, open them in a tab, and stop them at any time."
+            label="Enable Browser"
+            description="Registers Browser for supported agents. Agents can create browser sessions; you can watch, stop, and delete them."
           >
-            {isSettingsLoading && !hasLoadedSettings ? (
+            {isSettingsLoading && !settings ? (
               <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
-            ) : hasLoadedSettings ? (
+            ) : (
               <SettingsToggle
                 checked={browserEnabled}
                 onChange={(value) => void updateSettings({ enabled: value })}
-                ariaLabel="Give Agents Browser Access"
+                ariaLabel="Enable Browser"
                 disabled={isSaving}
               />
-            ) : (
-              <span className="text-sm text-muted-foreground">Unavailable</span>
             )}
           </SettingsRow>
 
-          {browserDisabled && (
-            <div className="px-4 py-4">
-              <a
-                href={BROWSER_USE_GUIDE_URL}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="inline-flex items-center gap-1.5 text-sm font-medium text-primary hover:underline"
-              >
-                Read the Browser guide
-                <ExternalLink className="h-3.5 w-3.5" />
-              </a>
-            </div>
-          )}
-
-          {error && (
-            <div className="px-4 py-4">
-              <div className="rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700 dark:border-red-900/50 dark:bg-red-950/30 dark:text-red-200">
-                {error}
-              </div>
-            </div>
-          )}
-
-          {browserEnabled && (
-            <>
-              <div className="space-y-3 px-4 py-4">
-                <div className="min-w-0">
-                  <div className="text-sm font-medium text-foreground">Browser Engine</div>
-                  <div className="mt-0.5 text-sm text-muted-foreground">
-                    Pick the kind of browser experience agents should use for new sessions.
-                  </div>
-                </div>
-                <div className="grid gap-2 sm:grid-cols-2">
-                  {([
-                    {
-                      value: 'playwright' as const,
-                      label: 'Playwright',
-                      description: 'Best for quick checks, screenshots, and automated page interaction when no manual login is needed.',
-                      icon: Zap,
-                    },
-                    {
-                      value: 'camoufox-vnc' as const,
-                      label: 'Camoufox + noVNC',
-                      description: 'Best when a person may need to log in, approve a step, or watch the browser session live.',
-                      icon: Eye,
-                    },
-                  ]).map((option) => {
-                    const Icon = option.icon;
-                    const selected = selectedBackend === option.value;
-                    return (
-                      <button
-                        key={option.value}
-                        type="button"
-                        onClick={() => void updateSettings({ browserBackend: option.value })}
-                        disabled={isSaving || isSettingsLoading}
-                        className={[
-                          'group flex min-h-[88px] items-start gap-3 rounded-lg border px-3 py-3 text-left transition-colors',
-                          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
-                          selected
-                            ? 'border-primary bg-primary/5 text-foreground shadow-sm'
-                            : 'border-border bg-background hover:border-foreground/20 hover:bg-muted/40',
-                          (isSaving || isSettingsLoading) ? 'cursor-not-allowed opacity-60' : '',
-                        ].join(' ')}
-                        aria-pressed={selected}
-                      >
-                        <span className={[
-                          'mt-0.5 flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md border',
-                          selected ? 'border-primary/30 bg-primary/10 text-primary' : 'border-border bg-muted/40 text-muted-foreground',
-                        ].join(' ')}
-                        >
-                          <Icon className="h-4 w-4" />
-                        </span>
-                        <span className="min-w-0">
-                          <span className="block text-sm font-medium">{option.label}</span>
-                          <span className="mt-1 block text-xs leading-relaxed text-muted-foreground">{option.description}</span>
-                        </span>
-                      </button>
-                    );
-                  })}
-                </div>
-              </div>
-
-              <SettingsRow
-                label="Remember Browser Logins"
-                description="Keep cookies and site storage in a named profile so agents can reuse signed-in sessions instead of starting from scratch."
-              >
-                {isSettingsLoading && !settings ? (
-                  <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
-                ) : (
-                  <SettingsToggle
-                    checked={persistSessions}
-                    onChange={(value) => void updateSettings({ persistSessions: value })}
-                    ariaLabel="Remember Browser Logins"
-                    disabled={isSaving}
-                  />
-                )}
-              </SettingsRow>
-
-              {persistSessions && (
-                <SettingsRow
-                  label="Default Browser Profile"
-                  description="New browser sessions use this profile by default, so saved logins stay tied to a predictable workspace."
-                >
-                  <Input
-                    value={profileNameDraft}
-                    onChange={(event) => setProfileNameDraft(event.target.value)}
-                    onBlur={() => void saveProfileName()}
-                    onKeyDown={(event) => {
-                      if (event.key === 'Enter') {
-                        event.currentTarget.blur();
-                      }
-                    }}
-                    disabled={isSaving || isSettingsLoading}
-                    className="w-40"
-                    aria-label="Default Browser Profile"
-                  />
-                </SettingsRow>
-              )}
-            </>
-          )}
-
-          {browserEnabled && (
           <div className="space-y-4 px-4 py-4">
             <div className="flex flex-wrap gap-2 text-xs text-muted-foreground">
-              <span className="rounded-md border border-border px-2 py-1">
-                Backend: {effectiveBackend === 'camoufox-vnc' ? 'Camoufox + noVNC' : 'Playwright'}
-              </span>
               <span className="rounded-md border border-border px-2 py-1">
                 Playwright: {runtimeLabel(status?.playwrightInstalled)}
               </span>
               <span className="rounded-md border border-border px-2 py-1">
                 Chromium: {runtimeLabel(status?.chromiumInstalled)}
               </span>
-              <span className="rounded-md border border-border px-2 py-1">
-                Camoufox: {runtimeLabel(status?.camoufoxInstalled)}
-              </span>
-              <span className="rounded-md border border-border px-2 py-1">
-                noVNC: {runtimeLabel(status?.noVncInstalled)}
-              </span>
               <span className="rounded-md border border-border px-2 py-1">
                 Status: {isStatusLoading && !status ? 'checking...' : status?.available ? 'ready' : browserEnabled ? 'setup required' : 'disabled'}
               </span>
@@ -333,17 +172,12 @@ export default function BrowserUseSettingsTab() {
               </div>
             )}
 
-            <a
-              href={BROWSER_USE_GUIDE_URL}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="inline-flex items-center gap-1.5 text-sm font-medium text-primary hover:underline"
-            >
-              Read the Browser guide
-              <ExternalLink className="h-3.5 w-3.5" />
-            </a>
+            {error && (
+              <div className="rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700 dark:border-red-900/50 dark:bg-red-950/30 dark:text-red-200">
+                {error}
+              </div>
+            )}
           </div>
-          )}
         </SettingsCard>
       </SettingsSection>
     </div>

src/components/sidebar/view/subcomponents/SidebarContent.tsx

@@ -32,7 +32,7 @@ function HighlightedSnippet({ snippet, highlights }: { snippet: string; highligh
     parts.push(snippet.slice(cursor));
   }
   return (
-    <span className="text-xs leading-relaxed text-muted-foreground">
+    <span className="min-w-0 flex-1 break-words text-xs leading-relaxed text-muted-foreground">
       {parts}
     </span>
   );

src/components/sidebar/view/subcomponents/SidebarSessionItem.tsx

@@ -2,7 +2,7 @@ import { useEffect, useRef } from 'react';
 import { Check, Edit2, Loader2, Trash2, X } from 'lucide-react';
 import type { TFunction } from 'i18next';
 
-import { Badge, Button, Tooltip } from '../../../../shared/view/ui';
+import { Badge, Tooltip, buttonVariants } from '../../../../shared/view/ui';
 import { cn } from '../../../../lib/utils';
 import type { Project, ProjectSession, LLMProvider } from '../../../../types/app';
 import type { SessionWithProvider } from '../../types/types';
@@ -195,9 +195,10 @@ export default function SidebarSessionItem({
       </div>
 
       <div className="hidden md:block">
-        <Button
-          variant="ghost"
+        <a
+          href={`/session/${session.id}`}
           className={cn(
+            buttonVariants({ variant: 'ghost' }),
             'h-auto w-full justify-start rounded-md border bg-card p-2 text-left font-normal transition-all duration-150',
             isSelected ? 'border-primary/20 bg-primary/5' : 'border-border/30',
             !isSelected && isProcessing
@@ -206,7 +207,13 @@ export default function SidebarSessionItem({
                 ? 'border-green-500/30 bg-green-50/5 hover:bg-green-50/10 dark:bg-green-900/5 dark:hover:bg-green-900/10'
                 : 'hover:bg-accent/50',
           )}
-          onClick={() => onSessionSelect(session, project.projectId)}
+          // Left-click keeps in-app navigation; Ctrl/Cmd/middle-click and the
+          // native right-click menu use the href to open a new tab/window.
+          onClick={(event) => {
+            if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+            event.preventDefault();
+            onSessionSelect(session, project.projectId);
+          }}
         >
           <div className="flex w-full min-w-0 items-center gap-2">
             <div
@@ -249,7 +256,7 @@ export default function SidebarSessionItem({
               </div>
             </div>
           </div>
-        </Button>
+        </a>
 
         <div
           ref={editingContainerRef}

src/contexts/PaletteOpsContext.tsx

@@ -3,6 +3,9 @@ import type { MutableRefObject, ReactNode } from 'react';
 
 export type PaletteOps = {
   openFile: (path: string) => void;
+  // Opens a file in the editor side panel without changing the active tab
+  // (used by in-chat file links so they behave like the inline edit view).
+  openFileInEditor: (path: string) => void;
   openSettings: (tab?: string) => void;
   refreshProjects: () => Promise<void> | void;
 };
@@ -13,6 +16,7 @@ const PaletteOpsContext = createContext<Registry | null>(null);
 
 const defaultOps: PaletteOps = {
   openFile: () => undefined,
+  openFileInEditor: () => undefined,
   openSettings: () => undefined,
   refreshProjects: () => undefined,
 };
@@ -27,6 +31,8 @@ export function usePaletteOps(): PaletteOps {
   return useMemo<PaletteOps>(
     () => ({
       openFile: (path) => (ref?.current.openFile ?? defaultOps.openFile)(path),
+      openFileInEditor: (path) =>
+        (ref?.current.openFileInEditor ?? defaultOps.openFileInEditor)(path),
       openSettings: (tab) => (ref?.current.openSettings ?? defaultOps.openSettings)(tab),
       refreshProjects: () => (ref?.current.refreshProjects ?? defaultOps.refreshProjects)(),
     }),
@@ -36,18 +42,20 @@ export function usePaletteOps(): PaletteOps {
 
 export function usePaletteOpsRegister(partial: Partial<PaletteOps>) {
   const ref = useContext(PaletteOpsContext);
-  const { openFile, openSettings, refreshProjects } = partial;
+  const { openFile, openFileInEditor, openSettings, refreshProjects } = partial;
 
   useEffect(() => {
     if (!ref) return undefined;
     const prev = { ...ref.current };
     if (openFile) ref.current.openFile = openFile;
+    if (openFileInEditor) ref.current.openFileInEditor = openFileInEditor;
     if (openSettings) ref.current.openSettings = openSettings;
     if (refreshProjects) ref.current.refreshProjects = refreshProjects;
     return () => {
       if (openFile && ref.current.openFile === openFile) ref.current.openFile = prev.openFile;
+      if (openFileInEditor && ref.current.openFileInEditor === openFileInEditor) ref.current.openFileInEditor = prev.openFileInEditor;
       if (openSettings && ref.current.openSettings === openSettings) ref.current.openSettings = prev.openSettings;
       if (refreshProjects && ref.current.refreshProjects === refreshProjects) ref.current.refreshProjects = prev.refreshProjects;
     };
-  }, [ref, openFile, openSettings, refreshProjects]);
+  }, [ref, openFile, openFileInEditor, openSettings, refreshProjects]);
 }

src/hooks/useFileOpenResolver.ts

@@ -0,0 +1,108 @@
+import { useCallback, useRef } from 'react';
+
+import { api } from '../utils/api';
+import type { Project } from '../types/app';
+
+type FileNode = {
+  type: 'file' | 'directory';
+  name: string;
+  path: string;
+  children?: FileNode[];
+};
+
+type FlatFile = {
+  name: string;
+  path: string;
+};
+
+// `diffInfo` is intentionally `any` so this resolver can wrap editor handlers
+// that expect a concrete diff payload type as well as generic callers.
+type OnFileOpen = (filePath: string, diffInfo?: any) => void;
+
+const normalize = (value: string): string => value.replace(/\\/g, '/');
+
+const flatten = (nodes: FileNode[], out: FlatFile[]): void => {
+  for (const node of nodes) {
+    if (node.type === 'file') {
+      out.push({ name: node.name, path: node.path });
+    } else if (node.children && node.children.length > 0) {
+      flatten(node.children, out);
+    }
+  }
+};
+
+// References inside chat messages are often bare basenames (`foo.ts`) or partial
+// paths (`utils/foo.ts`) rather than full paths, so match by path suffix and
+// fall back to filename equality.
+const findBestMatch = (files: FlatFile[], ref: string): string | null => {
+  const target = normalize(ref).replace(/^\.\//, '').replace(/^\/+/, '');
+  if (!target) {
+    return null;
+  }
+
+  const suffixMatch = files.find((file) => {
+    const filePath = normalize(file.path);
+    return filePath === target || filePath.endsWith(`/${target}`);
+  });
+  if (suffixMatch) {
+    return suffixMatch.path;
+  }
+
+  const base = target.split('/').pop() || target;
+  return files.find((file) => file.name === base)?.path ?? null;
+};
+
+/**
+ * Wraps an `onFileOpen` handler so a possibly bare/partial file reference is
+ * resolved against the project's file tree (cached per project) before the file
+ * is opened in the in-app editor.
+ */
+export function useFileOpenResolver(
+  selectedProject: Project | null | undefined,
+  onFileOpen: OnFileOpen,
+): OnFileOpen {
+  const projectId = selectedProject?.projectId;
+  const cacheRef = useRef<{ projectId?: string; files: Promise<FlatFile[]> | null }>({
+    projectId: undefined,
+    files: null,
+  });
+
+  const loadFiles = useCallback((): Promise<FlatFile[]> => {
+    if (!projectId) {
+      return Promise.resolve([]);
+    }
+    if (cacheRef.current.projectId === projectId && cacheRef.current.files) {
+      return cacheRef.current.files;
+    }
+
+    const filesPromise = (async () => {
+      try {
+        const response = await api.getFiles(projectId);
+        if (!response.ok) {
+          return [];
+        }
+        const data = await response.json();
+        const tree: FileNode[] = Array.isArray(data) ? data : [];
+        const flat: FlatFile[] = [];
+        flatten(tree, flat);
+        return flat;
+      } catch {
+        return [];
+      }
+    })();
+
+    cacheRef.current = { projectId, files: filesPromise };
+    return filesPromise;
+  }, [projectId]);
+
+  return useCallback(
+    (filePath: string, diffInfo?: any) => {
+      const ref = normalize(filePath).trim();
+      void loadFiles().then((files) => {
+        const match = findBestMatch(files, ref);
+        onFileOpen(match ?? filePath, diffInfo);
+      });
+    },
+    [loadFiles, onFileOpen],
+  );
+}

src/shared/view/ui/LanguageSelector.tsx

@@ -37,7 +37,7 @@ export default function LanguageSelector({ compact = false }: LanguageSelectorPr
         <select
           value={i18n.language}
           onChange={handleLanguageChange}
-          className="w-[100px] rounded-lg border border-input bg-card p-2 text-sm text-foreground focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary"
+          className="w-auto min-w-[120px] max-w-[160px] rounded-lg border border-input bg-card p-2 text-sm text-foreground focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary"
         >
           {languages.map((lang) => (
             <option key={lang.value} value={lang.value}>