feat(version): warn when the server was updated but not restarted (#898)

When the package is updated on disk but the long-lived server process is
not restarted, the new frontend bundle (served from disk) talks to the
old running backend. New DB-backed features then fail silently — e.g.
deleting/archiving a session appears to do nothing — because the new
schema/routes only take effect on restart.

Nothing currently detects this skew: useVersionCheck only compares the
frontend's build-time version against the latest GitHub release.

This exposes the running server's version (captured once at startup) via
/health, compares it to the frontend's build-time version in
useVersionCheck, and shows a "restart required" banner in the sidebar
(and a small indicator in the collapsed sidebar) when they differ.

- server: add `version` (RUNNING_VERSION, read once at startup) to /health
- useVersionCheck: return `restartRequired` / `runningVersion`
- SidebarFooter / SidebarCollapsed: surface a restart-required banner
- i18n: add `version.restartRequired` to all 10 sidebar locales

Verified with `tsc --noEmit` (client + server) and eslint.

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-authored-by: Simos Mikelatos <simosmik@gmail.com>

package.json

@@ -1,6 +1,7 @@
 {
   "name": "@cloudcli-ai/cloudcli",
   "version": "1.34.0",
+  "productName": "CloudCLI",
   "description": "A web-based UI for Claude Code CLI",
   "type": "module",
   "main": "dist-server/server/index.js",
@@ -8,6 +9,7 @@
     "cloudcli": "dist-server/server/cli.js"
   },
   "files": [
+    "electron/",
     "server/",
     "shared/",
     "public/api-docs.html",
@@ -30,6 +32,10 @@
     "server:dev": "tsx --tsconfig server/tsconfig.json server/index.js",
     "server:dev-watch": "tsx watch --tsconfig server/tsconfig.json server/index.js",
     "client": "vite",
+    "desktop": "electron electron/main.js",
+    "desktop:dev": "cross-env ELECTRON_DEV_URL=http://127.0.0.1:5173 electron electron/main.js",
+    "desktop:pack": "npm run build && electron-builder --dir",
+    "desktop:dist:mac": "npm run build && electron-builder --mac dmg zip",
     "build": "npm run build:client && npm run build:server",
     "build:client": "vite build",
     "prebuild:server": "node -e \"require('node:fs').rmSync('dist-server', { recursive: true, force: true })\"",
@@ -45,6 +51,53 @@
     "prepare": "husky",
     "update:platform": "./update-platform.sh"
   },
+  "build": {
+    "appId": "ai.cloudcli.desktop",
+    "productName": "CloudCLI",
+    "artifactName": "CloudCLI-${version}-${arch}.${ext}",
+    "directories": {
+      "output": "release"
+    },
+    "extraMetadata": {
+      "main": "electron/main.js"
+    },
+    "files": [
+      "electron/",
+      "public/",
+      "dist/",
+      "dist-server/",
+      "shared/",
+      "server/",
+      "package.json"
+    ],
+    "protocols": [
+      {
+        "name": "CloudCLI",
+        "schemes": [
+          "cloudcli"
+        ]
+      }
+    ],
+    "mac": {
+      "category": "public.app-category.developer-tools",
+      "target": [
+        "dmg",
+        "zip"
+      ],
+      "extendInfo": {
+        "CFBundleName": "CloudCLI",
+        "CFBundleDisplayName": "CloudCLI",
+        "CFBundleURLTypes": [
+          {
+            "CFBundleURLName": "CloudCLI",
+            "CFBundleURLSchemes": [
+              "cloudcli"
+            ]
+          }
+        ]
+      }
+    }
+  },
   "keywords": [
     "claude code",
     "claude-code",
@@ -141,6 +194,9 @@
     "auto-changelog": "^2.5.0",
     "autoprefixer": "^10.4.16",
     "concurrently": "^8.2.2",
+    "cross-env": "^10.1.0",
+    "electron": "^38.0.0",
+    "electron-builder": "^26.15.3",
     "eslint": "^9.39.3",
     "eslint-import-resolver-typescript": "^4.4.4",
     "eslint-plugin-boundaries": "^6.0.2",

server/browser-use-mcp.ts

@@ -0,0 +1,384 @@
+#!/usr/bin/env node
+import './load-env.js';
+
+type JsonRpcRequest = {
+  jsonrpc: '2.0';
+  id?: string | number | null;
+  method: string;
+  params?: Record<string, unknown>;
+};
+
+type ToolDefinition = {
+  name: string;
+  description: string;
+  inputSchema: Record<string, unknown>;
+};
+
+const textResponse = (text: string) => ({
+  content: [{ type: 'text', text }],
+});
+
+const jsonResponse = (value: unknown) => textResponse(JSON.stringify(value, null, 2));
+
+const readString = (value: unknown, name: string): string => {
+  if (typeof value !== 'string' || value.trim() === '') {
+    throw new Error(`${name} is required.`);
+  }
+  return value.trim();
+};
+
+const readOptionalString = (value: unknown): string | undefined =>
+  typeof value === 'string' && value.trim() ? value.trim() : undefined;
+
+const readNumber = (value: unknown): number | undefined =>
+  typeof value === 'number' && Number.isFinite(value) ? value : undefined;
+
+const apiUrl = (process.env.CLOUDCLI_BROWSER_USE_API_URL || 'http://127.0.0.1:3001/api/browser-use-mcp').replace(/\/$/, '');
+const apiToken = process.env.CLOUDCLI_BROWSER_USE_MCP_TOKEN || '';
+const API_TIMEOUT_MS = Number.parseInt(process.env.CLOUDCLI_BROWSER_USE_API_TIMEOUT_MS || '60000', 10);
+
+async function callBrowserUseApi(toolName: string, input: Record<string, unknown>) {
+  if (!apiToken) {
+    throw new Error('CLOUDCLI_BROWSER_USE_MCP_TOKEN is not configured.');
+  }
+
+  const response = await fetch(`${apiUrl}/tools/${encodeURIComponent(toolName)}`, {
+    method: 'POST',
+    headers: {
+      Authorization: `Bearer ${apiToken}`,
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(input),
+    signal: AbortSignal.timeout(API_TIMEOUT_MS),
+  });
+  const data = await response.json() as { success?: boolean; data?: unknown; error?: string };
+  if (!response.ok || data.success === false) {
+    throw new Error(data.error || `Browser API request failed (${response.status})`);
+  }
+  return data.data;
+}
+
+const sessionIdSchema = {
+  type: 'object',
+  properties: {
+    sessionId: { type: 'string', description: 'Browser session id.' },
+  },
+  required: ['sessionId'],
+};
+
+const tools: ToolDefinition[] = [
+  {
+    name: 'browser_create_session',
+    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: {
+        profileName: { type: 'string', description: 'Optional background profile name for persistent browser storage.' },
+      },
+    },
+  },
+  {
+    name: 'browser_list_sessions',
+    description: 'List Browser sessions currently available to agents.',
+    inputSchema: { type: 'object', properties: {} },
+  },
+  {
+    name: 'browser_snapshot',
+    description: 'Capture current page metadata, screenshot data URL, and visible body text for a Browser session.',
+    inputSchema: sessionIdSchema,
+  },
+  {
+    name: 'browser_take_screenshot',
+    description: 'Capture the latest screenshot for a Browser session.',
+    inputSchema: sessionIdSchema,
+  },
+  {
+    name: 'browser_navigate',
+    description: 'Navigate a Browser session to an HTTP or HTTPS URL.',
+    inputSchema: {
+      type: 'object',
+      properties: {
+        sessionId: { type: 'string' },
+        url: { type: 'string' },
+      },
+      required: ['sessionId', 'url'],
+    },
+  },
+  {
+    name: 'browser_click',
+    description: 'Click an element by CSS selector, visible text, or x/y coordinates.',
+    inputSchema: {
+      type: 'object',
+      properties: {
+        sessionId: { type: 'string' },
+        selector: { type: 'string' },
+        text: { type: 'string' },
+        x: { type: 'number' },
+        y: { type: 'number' },
+      },
+      required: ['sessionId'],
+    },
+  },
+  {
+    name: 'browser_type',
+    description: 'Type text into the focused page or fill a CSS selector. Set submit to press Enter after typing.',
+    inputSchema: {
+      type: 'object',
+      properties: {
+        sessionId: { type: 'string' },
+        selector: { type: 'string' },
+        text: { type: 'string' },
+        submit: { type: 'boolean' },
+      },
+      required: ['sessionId', 'text'],
+    },
+  },
+  {
+    name: 'browser_fill_form',
+    description: 'Fill multiple form fields using CSS selectors.',
+    inputSchema: {
+      type: 'object',
+      properties: {
+        sessionId: { type: 'string' },
+        fields: {
+          type: 'array',
+          items: {
+            type: 'object',
+            properties: {
+              selector: { type: 'string' },
+              value: { type: 'string' },
+            },
+            required: ['selector', 'value'],
+          },
+        },
+      },
+      required: ['sessionId', 'fields'],
+    },
+  },
+  {
+    name: 'browser_press_key',
+    description: 'Press a keyboard key, for example Enter, Escape, Tab, or Control+A.',
+    inputSchema: {
+      type: 'object',
+      properties: {
+        sessionId: { type: 'string' },
+        key: { type: 'string' },
+      },
+      required: ['sessionId', 'key'],
+    },
+  },
+  {
+    name: 'browser_select_option',
+    description: 'Select option values in a select element found by CSS selector.',
+    inputSchema: {
+      type: 'object',
+      properties: {
+        sessionId: { type: 'string' },
+        selector: { type: 'string' },
+        values: { type: 'array', items: { type: 'string' } },
+      },
+      required: ['sessionId', 'selector', 'values'],
+    },
+  },
+  {
+    name: 'browser_wait_for',
+    description: 'Wait for visible text, a URL pattern, or a short timeout.',
+    inputSchema: {
+      type: 'object',
+      properties: {
+        sessionId: { type: 'string' },
+        text: { type: 'string' },
+        url: { type: 'string' },
+        timeoutMs: { type: 'number' },
+      },
+      required: ['sessionId'],
+    },
+  },
+  {
+    name: 'browser_tabs',
+    description: 'List, open, select, or close tabs in a Browser session.',
+    inputSchema: {
+      type: 'object',
+      properties: {
+        sessionId: { type: 'string' },
+        action: { type: 'string', enum: ['list', 'new', 'select', 'close'] },
+        index: { type: 'number' },
+        url: { type: 'string' },
+      },
+      required: ['sessionId'],
+    },
+  },
+  {
+    name: 'browser_close_session',
+    description: 'Stop a Browser session controlled by agents.',
+    inputSchema: sessionIdSchema,
+  },
+];
+
+async function callTool(name: string, args: Record<string, unknown>) {
+  switch (name) {
+    case 'browser_create_session':
+      return jsonResponse(await callBrowserUseApi(name, {
+        profileName: readOptionalString(args.profileName),
+      }));
+    case 'browser_list_sessions':
+      return jsonResponse(await callBrowserUseApi(name, {}));
+    case 'browser_snapshot':
+      return jsonResponse(await callBrowserUseApi(name, { sessionId: readString(args.sessionId, 'sessionId') }));
+    case 'browser_take_screenshot': {
+      return jsonResponse(await callBrowserUseApi(name, { sessionId: readString(args.sessionId, 'sessionId') }));
+    }
+    case 'browser_navigate':
+      return jsonResponse(await callBrowserUseApi(name, {
+        sessionId: readString(args.sessionId, 'sessionId'),
+        url: readString(args.url, 'url'),
+      }));
+    case 'browser_click':
+      return jsonResponse(await callBrowserUseApi(name, {
+        sessionId: readString(args.sessionId, 'sessionId'),
+        selector: readOptionalString(args.selector),
+        text: readOptionalString(args.text),
+        x: readNumber(args.x),
+        y: readNumber(args.y),
+      }));
+    case 'browser_type':
+      return jsonResponse(await callBrowserUseApi(name, {
+        sessionId: readString(args.sessionId, 'sessionId'),
+        selector: readOptionalString(args.selector),
+        text: readString(args.text, 'text'),
+        submit: args.submit === true,
+      }));
+    case 'browser_fill_form': {
+      const fields = Array.isArray(args.fields)
+        ? args.fields.map((field) => {
+          const record = field as Record<string, unknown>;
+          return {
+            selector: readString(record.selector, 'field.selector'),
+            value: readString(record.value, 'field.value'),
+          };
+        })
+        : [];
+      return jsonResponse(await callBrowserUseApi(name, {
+        sessionId: readString(args.sessionId, 'sessionId'),
+        fields,
+      }));
+    }
+    case 'browser_press_key':
+      return jsonResponse(await callBrowserUseApi(name, {
+        sessionId: readString(args.sessionId, 'sessionId'),
+        key: readString(args.key, 'key'),
+      }));
+    case 'browser_select_option':
+      return jsonResponse(await callBrowserUseApi(name, {
+        sessionId: readString(args.sessionId, 'sessionId'),
+        selector: readString(args.selector, 'selector'),
+        values: Array.isArray(args.values) ? args.values.filter((value): value is string => typeof value === 'string') : [],
+      }));
+    case 'browser_wait_for':
+      return jsonResponse(await callBrowserUseApi(name, {
+        sessionId: readString(args.sessionId, 'sessionId'),
+        text: readOptionalString(args.text),
+        url: readOptionalString(args.url),
+        timeoutMs: readNumber(args.timeoutMs),
+      }));
+    case 'browser_tabs':
+      return jsonResponse(await callBrowserUseApi(name, {
+        sessionId: readString(args.sessionId, 'sessionId'),
+        action: args.action === 'new' || args.action === 'select' || args.action === 'close' || args.action === 'list'
+          ? args.action
+          : undefined,
+        index: readNumber(args.index),
+        url: readOptionalString(args.url),
+      }));
+    case 'browser_close_session':
+      return jsonResponse(await callBrowserUseApi(name, { sessionId: readString(args.sessionId, 'sessionId') }));
+    default:
+      throw new Error(`Unknown tool: ${name}`);
+  }
+}
+
+async function handleMessage(message: JsonRpcRequest) {
+  if (message.method === 'initialize') {
+    return {
+      protocolVersion: '2024-11-05',
+      capabilities: { tools: {} },
+      serverInfo: { name: 'cloudcli-browser', version: '1.0.0' },
+    };
+  }
+
+  if (message.method === 'tools/list') {
+    return { tools };
+  }
+
+  if (message.method === 'tools/call') {
+    const params = message.params || {};
+    const name = readString(params.name, 'name');
+    const args = (params.arguments && typeof params.arguments === 'object'
+      ? params.arguments
+      : {}) as Record<string, unknown>;
+    return callTool(name, args);
+  }
+
+  if (message.method.startsWith('notifications/')) {
+    return undefined;
+  }
+
+  throw new Error(`Unsupported method: ${message.method}`);
+}
+
+function writeMessage(message: Record<string, unknown>) {
+  // MCP stdio transport uses newline-delimited JSON (one JSON-RPC message per line,
+  // no embedded newlines). This is NOT the LSP Content-Length framing.
+  process.stdout.write(`${JSON.stringify(message)}\n`);
+}
+
+function sendResult(id: string | number | null | undefined, result: unknown) {
+  if (id === undefined) {
+    return;
+  }
+  writeMessage({ jsonrpc: '2.0', id, result });
+}
+
+function sendError(id: string | number | null | undefined, error: unknown) {
+  if (id === undefined) {
+    return;
+  }
+  writeMessage({
+    jsonrpc: '2.0',
+    id,
+    error: {
+      code: -32000,
+      message: error instanceof Error ? error.message : String(error),
+    },
+  });
+}
+
+let buffer = '';
+
+process.stdin.on('data', (chunk) => {
+  buffer += chunk.toString('utf8');
+  let newlineIndex: number;
+  while ((newlineIndex = buffer.indexOf('\n')) !== -1) {
+    const rawMessage = buffer.slice(0, newlineIndex).trim();
+    buffer = buffer.slice(newlineIndex + 1);
+    if (!rawMessage) {
+      continue;
+    }
+
+    void (async () => {
+      let request: JsonRpcRequest;
+      try {
+        request = JSON.parse(rawMessage) as JsonRpcRequest;
+      } catch (error) {
+        sendError(null, error);
+        return;
+      }
+      try {
+        const result = await handleMessage(request);
+        sendResult(request.id, result);
+      } catch (error) {
+        sendError(request.id, error);
+      }
+    })();
+  }
+});

server/cli.js

@@ -8,6 +8,7 @@
  *   (no args)     - Start the server (default)
  *   start         - Start the server
  *   sandbox       - Manage Docker sandbox environments
+ *   browser-use-mcp - Run Browser MCP stdio server
  *   status        - Show configuration and data locations
  *   help          - Show help information
  *   version       - Show version information
@@ -154,12 +155,13 @@ Usage:
   cloudcli [command] [options]
 
 Commands:
-  start          Start the CloudCLI server (default)
+  start            Start the CloudCLI server (default)
-  sandbox        Manage Docker sandbox environments
+  sandbox          Manage Docker sandbox environments
-  status         Show configuration and data locations
+  browser-use-mcp  Run the Browser MCP stdio server
-  update         Update to the latest version
+  status           Show configuration and data locations
-  help           Show this help information
+  update           Update to the latest version
-  version        Show version information
+  help             Show this help information
+  version          Show version information
 
 Options:
   -p, --port <port>           Set server port (default: 3001)
@@ -605,6 +607,10 @@ async function startServer() {
     await import('./index.js');
 }
 
+async function startBrowserUseMcp() {
+    await import('./browser-use-mcp.js');
+}
+
 // Parse CLI arguments
 function parseArgs(args) {
     const parsed = { command: 'start', options: {} };
@@ -658,6 +664,9 @@ async function main() {
         case 'sandbox':
             await sandboxCommand(remainingArgs || []);
             break;
+        case 'browser-use-mcp':
+            await startBrowserUseMcp();
+            break;
         case 'status':
         case 'info':
             showStatus();

server/index.js

@@ -61,6 +61,9 @@ import userRoutes from './routes/user.js';
 import geminiRoutes from './routes/gemini.js';
 import pluginsRoutes from './routes/plugins.js';
 import providerRoutes from './modules/providers/provider.routes.js';
+import browserUseRoutes from './modules/browser-use/browser-use.routes.js';
+import browserUseMcpRoutes from './modules/browser-use/browser-use-mcp.routes.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';
@@ -73,6 +76,19 @@ const __dirname = getModuleDir(import.meta.url);
 // Resolving the app root once keeps every repo-level lookup below aligned across both layouts.
 const APP_ROOT = findAppRoot(__dirname);
 const installMode = fs.existsSync(path.join(APP_ROOT, '.git')) ? 'git' : 'npm';
+// Version of the code that is actually running, captured once at process
+// startup. This intentionally does NOT re-read package.json per request: after
+// an update replaces the files on disk, package.json reflects the NEW version
+// while this long-lived process still runs the OLD code. The frontend bundle is
+// rebuilt on update, so a mismatch between this value and the frontend's
+// build-time version means the server was updated but not restarted.
+const RUNNING_VERSION = (() => {
+    try {
+        return JSON.parse(fs.readFileSync(path.join(APP_ROOT, 'package.json'), 'utf8')).version || null;
+    } catch {
+        return null;
+    }
+})();
 const MAX_FILE_UPLOAD_SIZE_MB = 200;
 const MAX_FILE_UPLOAD_SIZE_BYTES = MAX_FILE_UPLOAD_SIZE_MB * 1024 * 1024;
 const MAX_FILE_UPLOAD_COUNT = 20;
@@ -153,7 +169,8 @@ app.get('/health', (req, res) => {
     res.json({
         status: 'ok',
         timestamp: new Date().toISOString(),
-        installMode
+        installMode,
+        version: RUNNING_VERSION
     });
 });
 
@@ -193,6 +210,12 @@ app.use('/api/gemini', authenticateToken, geminiRoutes);
 // Plugins API Routes (protected)
 app.use('/api/plugins', authenticateToken, pluginsRoutes);
 
+// Browser MCP bridge API (local token protected)
+app.use('/api/browser-use-mcp', browserUseMcpRoutes);
+
+// Browser API Routes (protected)
+app.use('/api/browser-use', authenticateToken, browserUseRoutes);
+
 // Unified provider MCP routes (protected)
 app.use('/api/providers', authenticateToken, providerRoutes);
 
@@ -1704,12 +1727,21 @@ async function startServer() {
 
         await closeSessionsWatcher();
         // Clean up plugin processes on shutdown
-        const shutdownPlugins = async () => {
+        const shutdownRuntimeServices = async () => {
-            await stopAllPlugins();
+            try {
+                await browserUseService.stopAllSessions();
+            } catch (err) {
+                console.error('[Browser] Error stopping sessions during shutdown:', err?.message || err);
+            }
+            try {
+                await stopAllPlugins();
+            } catch (err) {
+                console.error('[Plugins] Error stopping plugins during shutdown:', err?.message || err);
+            }
             process.exit(0);
         };
-        process.on('SIGTERM', () => void shutdownPlugins());
+        process.on('SIGTERM', () => void shutdownRuntimeServices());
-        process.on('SIGINT', () => void shutdownPlugins());
+        process.on('SIGINT', () => void shutdownRuntimeServices());
     } catch (error) {
         console.error('[ERROR] Failed to start server:', error);
         process.exit(1);

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

@@ -0,0 +1,120 @@
+import express from 'express';
+
+import { browserUseService } from '@/modules/browser-use/browser-use.service.js';
+
+const router = express.Router();
+
+function readBearerToken(header: unknown): string | null {
+  if (typeof header !== 'string') {
+    return null;
+  }
+  const match = /^Bearer\s+(\S.*)$/i.exec(header.trim());
+  return match?.[1]?.trim() || null;
+}
+
+router.use((req, res, next) => {
+  const expected = browserUseService.getMcpToken();
+  const token = readBearerToken(req.headers.authorization) || String(req.headers['x-browser-use-mcp-token'] || '');
+  if (!token || token !== expected) {
+    res.status(401).json({ success: false, error: 'Invalid Browser MCP token.' });
+    return;
+  }
+  next();
+});
+
+router.post('/tools/:toolName', async (req, res) => {
+  try {
+    const input = (req.body && typeof req.body === 'object' ? req.body : {}) as Record<string, unknown>;
+    const sessionId = typeof input.sessionId === 'string' ? input.sessionId : '';
+    const toolName = req.params.toolName;
+    let result: unknown;
+
+    switch (toolName) {
+      case 'browser_create_session':
+        result = await browserUseService.createAgentSession({
+          profileName: typeof input.profileName === 'string' ? input.profileName : null,
+        });
+        break;
+      case 'browser_list_sessions':
+        result = await browserUseService.listAgentSessions();
+        break;
+      case 'browser_snapshot':
+      case 'browser_take_screenshot':
+        result = await browserUseService.agentSnapshot(sessionId);
+        break;
+      case 'browser_navigate':
+        result = await browserUseService.agentNavigate(sessionId, String(input.url || ''));
+        break;
+      case 'browser_click':
+        result = await browserUseService.agentClick(sessionId, {
+          selector: typeof input.selector === 'string' ? input.selector : undefined,
+          text: typeof input.text === 'string' ? input.text : undefined,
+          x: typeof input.x === 'number' ? input.x : undefined,
+          y: typeof input.y === 'number' ? input.y : undefined,
+        });
+        break;
+      case 'browser_type':
+        result = await browserUseService.agentType(sessionId, {
+          selector: typeof input.selector === 'string' ? input.selector : undefined,
+          text: String(input.text || ''),
+          submit: input.submit === true,
+        });
+        break;
+      case 'browser_fill_form':
+        result = await browserUseService.agentFillForm(
+          sessionId,
+          Array.isArray(input.fields)
+            ? input.fields.map((field) => {
+              const record = field as Record<string, unknown>;
+              return {
+                selector: String(record.selector || ''),
+                value: String(record.value || ''),
+              };
+            })
+            : [],
+        );
+        break;
+      case 'browser_press_key':
+        result = await browserUseService.agentPressKey(sessionId, String(input.key || ''));
+        break;
+      case 'browser_select_option':
+        result = await browserUseService.agentSelectOption(
+          sessionId,
+          String(input.selector || ''),
+          Array.isArray(input.values) ? input.values.filter((value): value is string => typeof value === 'string') : [],
+        );
+        break;
+      case 'browser_wait_for':
+        result = await browserUseService.agentWaitFor(sessionId, {
+          text: typeof input.text === 'string' ? input.text : undefined,
+          url: typeof input.url === 'string' ? input.url : undefined,
+          timeoutMs: typeof input.timeoutMs === 'number' ? input.timeoutMs : undefined,
+        });
+        break;
+      case 'browser_tabs':
+        result = await browserUseService.agentTabs(sessionId, {
+          action: input.action === 'new' || input.action === 'select' || input.action === 'close' || input.action === 'list'
+            ? input.action
+            : undefined,
+          index: typeof input.index === 'number' ? input.index : undefined,
+          url: typeof input.url === 'string' ? input.url : undefined,
+        });
+        break;
+      case 'browser_close_session':
+        result = await browserUseService.agentStopSession(sessionId);
+        break;
+      default:
+        res.status(404).json({ success: false, error: `Unknown Browser MCP tool "${toolName}".` });
+        return;
+    }
+
+    res.json({ success: true, data: result });
+  } catch (error) {
+    res.status(400).json({
+      success: false,
+      error: error instanceof Error ? error.message : 'Browser MCP tool failed.',
+    });
+  }
+});
+
+export default router;

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

@@ -0,0 +1,96 @@
+import express from 'express';
+
+import { browserUseService } from '@/modules/browser-use/browser-use.service.js';
+
+const router = express.Router();
+
+function readParam(value: string | string[] | undefined): string {
+  return Array.isArray(value) ? value[0] || '' : value || '';
+}
+
+router.get('/status', async (_req, res) => {
+  try {
+    res.json({ success: true, data: await browserUseService.getStatus() });
+  } catch (error) {
+    res.status(500).json({
+      success: false,
+      error: error instanceof Error ? error.message : 'Failed to load Browser status.',
+    });
+  }
+});
+
+router.get('/settings', async (_req, res) => {
+  try {
+    res.json({ success: true, data: { settings: await browserUseService.getSettings() } });
+  } catch (error) {
+    res.status(500).json({
+      success: false,
+      error: error instanceof Error ? error.message : 'Failed to load Browser settings.',
+    });
+  }
+});
+
+router.put('/settings', async (req, res) => {
+  try {
+    const settings = await browserUseService.updateSettings(req.body || {});
+    res.json({ success: true, data: { settings } });
+  } catch (error) {
+    res.status(400).json({
+      success: false,
+      error: error instanceof Error ? error.message : 'Failed to save Browser settings.',
+    });
+  }
+});
+
+router.post('/runtime/install', async (_req, res) => {
+  try {
+    const result = await browserUseService.installRuntime();
+    res.status(result.success ? 200 : 500).json({
+      success: result.success,
+      data: result,
+      error: result.success ? undefined : result.message,
+    });
+  } catch (error) {
+    res.status(500).json({
+      success: false,
+      error: error instanceof Error ? error.message : 'Failed to install Browser runtime.',
+    });
+  }
+});
+
+router.get('/sessions', async (_req, res) => {
+  try {
+    res.json({ success: true, data: { sessions: await browserUseService.listSessions() } });
+  } catch (error) {
+    res.status(401).json({
+      success: false,
+      error: error instanceof Error ? error.message : 'Failed to list browser sessions.',
+    });
+  }
+});
+
+router.post('/sessions/:sessionId/stop', async (req, res) => {
+  try {
+    const result = await browserUseService.stopSession(readParam(req.params.sessionId));
+    res.json({ success: true, data: result });
+  } catch (error) {
+    res.status(400).json({
+      success: false,
+      error: error instanceof Error ? error.message : 'Failed to stop browser session.',
+    });
+  }
+});
+
+router.delete('/sessions/:sessionId', async (req, res) => {
+  try {
+    const result = await browserUseService.deleteSession(readParam(req.params.sessionId));
+    res.json({ success: true, data: result });
+  } catch (error) {
+    res.status(400).json({
+      success: false,
+      error: error instanceof Error ? error.message : 'Failed to delete browser session.',
+    });
+  }
+});
+
+export default router;

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

@@ -0,0 +1,836 @@
+import { createRequire } from 'node:module';
+import { randomBytes, randomUUID } from 'node:crypto';
+import { spawn } from 'node:child_process';
+import fs from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+
+import { appConfigDb } from '@/modules/database/index.js';
+import { providerMcpService } from '@/modules/providers/index.js';
+import { getModuleDir } from '@/utils/runtime-paths.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>();
+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;
+
+function getRuntime(): BrowserUseRuntime {
+  return IS_PLATFORM ? 'cloud' : 'local';
+}
+
+function readSettings(): BrowserUseSettings {
+  try {
+    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.';
+  }
+
+  if (!readiness.playwrightInstalled) {
+    return 'Install Playwright and Chromium to use browser sessions.';
+  }
+
+  if (!readiness.chromiumInstalled) {
+    return 'Playwright is installed, but Chromium is missing. Install the Chromium runtime to continue.';
+  }
+
+  return readiness.installMessage || 'Browser runtime is not ready.';
+}
+
+function getPlaywright(): any | null {
+  try {
+    return require('playwright');
+  } catch {
+    return null;
+  }
+}
+
+function getMcpCommand(): { command: string; args: string[] } {
+  const serverDir = path.resolve(__dirname, '..', '..');
+  const mcpScriptPath = path.join(serverDir, 'browser-use-mcp.js');
+  if (fs.existsSync(mcpScriptPath)) {
+    return {
+      command: process.execPath,
+      args: [mcpScriptPath],
+    };
+  }
+
+  return {
+    command: 'cloudcli',
+    args: ['browser-use-mcp'],
+  };
+}
+
+function getMcpApiUrl(): string {
+  const port = process.env.SERVER_PORT || process.env.PORT || '3001';
+  return `http://127.0.0.1:${port}/api/browser-use-mcp`;
+}
+
+async function removeMcpServerFromAllProviders(name: string) {
+  const results = await providerMcpService.removeMcpServerFromAllProviders({
+    name,
+    scope: 'user',
+  });
+  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 = {
+    playwright,
+    playwrightInstalled: Boolean(playwright),
+    chromiumInstalled: false,
+    chromiumExecutablePath: null,
+  };
+
+  if (!playwright) {
+    return readiness;
+  }
+
+  try {
+    const executablePath = playwright.chromium.executablePath();
+    readiness.chromiumExecutablePath = executablePath;
+    readiness.chromiumInstalled = Boolean(executablePath && fs.existsSync(executablePath));
+  } catch {
+    readiness.chromiumInstalled = false;
+  }
+
+  return readiness;
+}
+
+function getRuntimeReadiness(options: { force?: boolean } = {}): RuntimeReadiness {
+  const now = Date.now();
+  const cachedProbe = runtimeProbeCache;
+  const canUseCache = !options.force
+    && !installPromise
+    && cachedProbe
+    && now - cachedProbe.updatedAt < RUNTIME_READINESS_CACHE_TTL_MS;
+  const probe = canUseCache ? cachedProbe.value : probeRuntime();
+
+  if (!canUseCache && !installPromise) {
+    runtimeProbeCache = { value: probe, updatedAt: now };
+  }
+
+  return {
+    ...probe,
+    installInProgress: Boolean(installPromise),
+    installMessage: lastInstallMessage,
+  };
+}
+
+const INSTALL_COMMAND_TIMEOUT_MS = Number.parseInt(
+  process.env.CLOUDCLI_BROWSER_USE_INSTALL_TIMEOUT_MS || String(10 * 60 * 1000),
+  10,
+);
+
+function runCommand(command: string, args: string[]): Promise<void> {
+  return new Promise((resolve, reject) => {
+    const child = spawn(command, args, {
+      cwd: process.cwd(),
+      env: process.env,
+      shell: false,
+      stdio: ['ignore', 'pipe', 'pipe'],
+    });
+    const output: string[] = [];
+    let settled = false;
+    const finish = (fn: () => void) => {
+      if (settled) {
+        return;
+      }
+      settled = true;
+      clearTimeout(timer);
+      fn();
+    };
+
+    const timer = setTimeout(() => {
+      child.kill('SIGKILL');
+      finish(() => reject(new Error(
+        `${command} ${args.join(' ')} timed out after ${INSTALL_COMMAND_TIMEOUT_MS}ms.`,
+      )));
+    }, INSTALL_COMMAND_TIMEOUT_MS);
+    timer.unref?.();
+
+    child.stdout.on('data', (chunk) => output.push(String(chunk)));
+    child.stderr.on('data', (chunk) => output.push(String(chunk)));
+    child.on('error', (error) => finish(() => reject(error)));
+    child.on('close', (code) => finish(() => {
+      if (code === 0) {
+        resolve();
+        return;
+      }
+
+      reject(new Error(output.join('').trim() || `${command} ${args.join(' ')} exited with code ${code}`));
+    }));
+  });
+}
+
+function formatInstallError(error: unknown): string {
+  const message = error instanceof Error ? error.message : String(error);
+  if (message.includes('sudo') && message.includes('password')) {
+    return 'Installing Chromium system dependencies requires administrator privileges. Run `npx playwright install-deps chromium` on the machine where CloudCLI runs, then try again.';
+  }
+  return message || 'Failed to install Browser runtime.';
+}
+
+async function installRuntime(): Promise<{ success: boolean; message: string }> {
+  if (installPromise) {
+    return installPromise;
+  }
+
+  const npmCommand = process.platform === 'win32' ? 'npm.cmd' : 'npm';
+  runtimeProbeCache = null;
+  installPromise = (async () => {
+    try {
+      lastInstallMessage = 'Installing Playwright package...';
+      await runCommand(npmCommand, ['install', '--no-save', '--no-package-lock', 'playwright']);
+
+      if (process.platform === 'linux') {
+        lastInstallMessage = 'Installing Chromium system dependencies...';
+        await runCommand(npmCommand, ['exec', '--', 'playwright', 'install-deps', 'chromium']);
+      }
+
+      lastInstallMessage = 'Installing Chromium runtime...';
+      await runCommand(npmCommand, ['exec', '--', 'playwright', 'install', 'chromium']);
+
+      lastInstallMessage = 'Browser runtime installed.';
+      return { success: true, message: lastInstallMessage };
+    } catch (error) {
+      lastInstallMessage = formatInstallError(error);
+      return { success: false, message: lastInstallMessage };
+    }
+  })();
+
+  try {
+    return await installPromise;
+  } finally {
+    installPromise = null;
+    runtimeProbeCache = null;
+  }
+}
+
+function normalizeUrl(rawUrl: string): string {
+  const trimmed = rawUrl.trim();
+  if (!trimmed) {
+    throw new Error('URL is required.');
+  }
+
+  const withProtocol = /^[a-zA-Z][a-zA-Z\d+\-.]*:/.test(trimmed)
+    ? trimmed
+    : `https://${trimmed}`;
+  const parsed = new URL(withProtocol);
+  if (!['http:', 'https:'].includes(parsed.protocol)) {
+    throw new Error('Only http and https URLs are supported.');
+  }
+
+  return parsed.toString();
+}
+
+function publicSession(session: BrowserUseSession): PublicBrowserUseSession {
+  const { ownerId: _ownerId, ...publicFields } = session;
+  return publicFields;
+}
+
+function ownerSessions(ownerId: string): BrowserUseSession[] {
+  return [...sessions.values()].filter((session) => session.ownerId === ownerId);
+}
+
+async function closeHandle(sessionId: string): Promise<void> {
+  const handle = handles.get(sessionId);
+  handles.delete(sessionId);
+  await handle?.context?.close?.().catch(() => undefined);
+  await handle?.browser?.close().catch(() => undefined);
+}
+
+async function expireStaleSessions(now = Date.now()): Promise<void> {
+  await Promise.all([...sessions.values()].map(async (session) => {
+    if (session.status !== 'ready') {
+      return;
+    }
+
+    const updatedAt = Date.parse(session.updatedAt);
+    if (!Number.isFinite(updatedAt) || now - updatedAt <= SESSION_TTL_MS) {
+      return;
+    }
+
+    await closeHandle(session.id);
+    session.status = 'stopped';
+    session.updatedAt = new Date(now).toISOString();
+    session.lastAction = 'expire';
+    session.message = 'Browser session expired after inactivity.';
+  }));
+}
+
+async function captureSession(session: BrowserUseSession, page: any): Promise<void> {
+  const screenshot = await page.screenshot({ type: 'jpeg', quality: 72, fullPage: false });
+  session.screenshotDataUrl = `data:image/jpeg;base64,${Buffer.from(screenshot).toString('base64')}`;
+  session.title = await page.title().catch(() => null);
+  session.url = page.url() || session.url;
+  session.viewport = page.viewportSize?.() || session.viewport;
+  session.updatedAt = new Date().toISOString();
+}
+
+async function getActionPoint(page: any, input: { selector?: string; text?: string; x?: number; y?: number }) {
+  if (typeof input.x === 'number' && typeof input.y === 'number') {
+    return { x: input.x, y: input.y };
+  }
+
+  const locator = input.selector
+    ? page.locator(input.selector).first()
+    : input.text
+      ? page.getByText(input.text, { exact: false }).first()
+      : null;
+
+  if (!locator) {
+    return null;
+  }
+
+  const box = await locator.boundingBox().catch(() => null);
+  if (!box) {
+    return null;
+  }
+
+  return {
+    x: Math.round(box.x + box.width / 2),
+    y: Math.round(box.y + box.height / 2),
+  };
+}
+
+export const browserUseService = {
+  async getSettings() {
+    return readSettings();
+  },
+
+  async updateSettings(settings: Partial<BrowserUseSettings>) {
+    const current = readSettings();
+    const nextSettings = {
+      enabled: typeof settings.enabled === 'boolean' ? settings.enabled : current.enabled,
+    };
+
+    const next = writeSettings(nextSettings);
+    if (next.enabled) {
+      await this.registerAgentMcp();
+    } else if (current.enabled) {
+      await this.unregisterAgentMcp();
+      await this.stopAllSessions();
+    }
+    return next;
+  },
+
+  async getStatus() {
+    const settings = readSettings();
+    const readiness = getRuntimeReadiness();
+    const available = settings.enabled && readiness.playwrightInstalled && readiness.chromiumInstalled;
+
+    return {
+      enabled: settings.enabled,
+      runtime: getRuntime(),
+      available,
+      playwrightInstalled: readiness.playwrightInstalled,
+      chromiumInstalled: readiness.chromiumInstalled,
+      installInProgress: readiness.installInProgress,
+      sessionCount: sessions.size,
+      message: available
+        ? 'Browser runtime is available.'
+        : getSetupMessage(settings, readiness),
+    };
+  },
+
+  async registerAgentMcp() {
+    const { command, args } = getMcpCommand();
+    await Promise.all(LEGACY_MCP_SERVER_NAMES.map((name) => removeMcpServerFromAllProviders(name)));
+    const results = await providerMcpService.addMcpServerToAllProviders({
+      name: MCP_SERVER_NAME,
+      scope: 'user',
+      transport: 'stdio',
+      command,
+      args,
+      env: {
+        CLOUDCLI_BROWSER_USE_MCP_TOKEN: getOrCreateMcpToken(),
+        CLOUDCLI_BROWSER_USE_API_URL: getMcpApiUrl(),
+      },
+    });
+    return { name: MCP_SERVER_NAME, command, args, results };
+  },
+
+  getMcpToken() {
+    return getOrCreateMcpToken();
+  },
+
+  async unregisterAgentMcp() {
+    const results = (await Promise.all(
+      [MCP_SERVER_NAME, ...LEGACY_MCP_SERVER_NAMES].map((name) => removeMcpServerFromAllProviders(name)),
+    )).flat();
+    return { name: MCP_SERVER_NAME, results };
+  },
+
+  async installRuntime() {
+    const result = await installRuntime();
+    return {
+      ...result,
+      status: await this.getStatus(),
+    };
+  },
+
+  async listSessions() {
+    await expireStaleSessions();
+    return [...sessions.values()]
+      .filter((session) => session.ownerId === AGENT_OWNER_ID)
+      .map(publicSession);
+  },
+
+  async createAgentSession(options?: { profileName?: string | null }) {
+    const settings = readSettings();
+    if (!settings.enabled) {
+      throw new Error('Browser agent tools are disabled.');
+    }
+
+    await expireStaleSessions();
+    const profileName = normalizeProfileName(options?.profileName);
+
+    const now = new Date().toISOString();
+    const session: BrowserUseSession = {
+      id: randomUUID(),
+      ownerId: AGENT_OWNER_ID,
+      createdBy: 'agent',
+      runtime: getRuntime(),
+      status: 'unavailable',
+      url: null,
+      title: null,
+      screenshotDataUrl: null,
+      createdAt: now,
+      updatedAt: now,
+      lastAction: 'create',
+      message: null,
+      profileName,
+      viewport: { width: 1440, height: 900 },
+      cursor: null,
+    };
+
+    const activeOwnerSessions = ownerSessions(AGENT_OWNER_ID).filter((item) => item.status === 'ready');
+    if (activeOwnerSessions.length >= MAX_SESSIONS_PER_OWNER) {
+      throw new Error(`Browser is limited to ${MAX_SESSIONS_PER_OWNER} active agent sessions.`);
+    }
+
+    const readiness = getRuntimeReadiness();
+    if (!settings.enabled || !readiness.playwrightInstalled || !readiness.chromiumInstalled || !readiness.playwright) {
+      session.message = getSetupMessage(settings, readiness);
+      sessions.set(session.id, session);
+      return publicSession(session);
+    }
+
+    let browser: any | undefined;
+    let context: any | undefined;
+    let page: any;
+    const launchOptions = {
+      headless: true,
+      args: ['--disable-dev-shm-usage'],
+    };
+    const contextOptions = {
+      viewport: { width: 1440, height: 900 },
+      serviceWorkers: 'block',
+    };
+
+    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 });
+    await captureSession(session, page);
+    return publicSession(session);
+  },
+
+  async listAgentSessions() {
+    const settings = readSettings();
+    if (!settings.enabled) {
+      return [];
+    }
+    await expireStaleSessions();
+    return [...sessions.values()]
+      .filter((session) => session.ownerId === AGENT_OWNER_ID)
+      .map(publicSession);
+  },
+
+  async getAgentSession(sessionId: string) {
+    const settings = readSettings();
+    if (!settings.enabled) {
+      throw new Error('Browser agent tools are disabled.');
+    }
+    const session = sessions.get(sessionId);
+    if (!session || session.ownerId !== AGENT_OWNER_ID) {
+      throw new Error('Browser session not found.');
+    }
+    return session;
+  },
+
+  async agentNavigate(sessionId: string, rawUrl: string) {
+    await this.getAgentSession(sessionId);
+    await expireStaleSessions();
+
+    const session = sessions.get(sessionId);
+    if (!session || session.ownerId !== AGENT_OWNER_ID) {
+      throw new Error('Browser session not found.');
+    }
+
+    if (session.status !== 'ready') {
+      throw new Error(session.message || 'Browser session is not available.');
+    }
+
+    const handle = handles.get(sessionId);
+    if (!handle?.page) {
+      throw new Error('Browser runtime handle is not available.');
+    }
+
+    const url = normalizeUrl(rawUrl);
+    await handle.page.goto(url, { waitUntil: 'domcontentloaded', timeout: 30_000 });
+    session.lastAction = `navigate:${url}`;
+    session.cursor = null;
+    await captureSession(session, handle.page);
+    return publicSession(session);
+  },
+
+  async agentSnapshot(sessionId: string) {
+    const session = await this.getAgentSession(sessionId);
+    const handle = handles.get(sessionId);
+    if (!handle?.page) {
+      throw new Error('Browser runtime handle is not available.');
+    }
+    await captureSession(session, handle.page);
+    const text = await handle.page.locator('body').innerText({ timeout: 5_000 }).catch(() => '');
+    return {
+      session: publicSession(session),
+      text: text.slice(0, 30_000),
+    };
+  },
+
+  async agentClick(sessionId: string, input: { selector?: string; text?: string; x?: number; y?: number }) {
+    const session = await this.getAgentSession(sessionId);
+    const handle = handles.get(sessionId);
+    if (!handle?.page) {
+      throw new Error('Browser runtime handle is not available.');
+    }
+    const point = await getActionPoint(handle.page, input);
+
+    if (input.selector) {
+      await handle.page.locator(input.selector).first().click({ timeout: 10_000 });
+    } else if (input.text) {
+      await handle.page.getByText(input.text, { exact: false }).first().click({ timeout: 10_000 });
+    } else if (typeof input.x === 'number' && typeof input.y === 'number') {
+      await handle.page.mouse.click(input.x, input.y);
+    } else {
+      throw new Error('Provide selector, text, or x/y coordinates.');
+    }
+
+    session.lastAction = 'click';
+    session.cursor = point ? { ...point, actor: 'agent' } : null;
+    await captureSession(session, handle.page);
+    return publicSession(session);
+  },
+
+  async agentType(sessionId: string, input: { selector?: string; text: string; submit?: boolean }) {
+    const session = await this.getAgentSession(sessionId);
+    const handle = handles.get(sessionId);
+    if (!handle?.page) {
+      throw new Error('Browser runtime handle is not available.');
+    }
+
+    if (input.selector) {
+      await handle.page.locator(input.selector).first().fill(input.text, { timeout: 10_000 });
+      session.cursor = await getActionPoint(handle.page, input).then((point) => (
+        point ? { ...point, actor: 'agent' as const } : null
+      ));
+    } else {
+      await handle.page.keyboard.type(input.text);
+    }
+    if (input.submit) {
+      await handle.page.keyboard.press('Enter');
+    }
+
+    session.lastAction = 'type';
+    await captureSession(session, handle.page);
+    return publicSession(session);
+  },
+
+  async agentFillForm(sessionId: string, fields: Array<{ selector: string; value: string }>) {
+    const session = await this.getAgentSession(sessionId);
+    const handle = handles.get(sessionId);
+    if (!handle?.page) {
+      throw new Error('Browser runtime handle is not available.');
+    }
+    for (const field of fields) {
+      await handle.page.locator(field.selector).first().fill(field.value, { timeout: 10_000 });
+    }
+    session.lastAction = 'fill_form';
+    if (fields[0]) {
+      session.cursor = await getActionPoint(handle.page, { selector: fields[0].selector }).then((point) => (
+        point ? { ...point, actor: 'agent' as const } : null
+      ));
+    }
+    await captureSession(session, handle.page);
+    return publicSession(session);
+  },
+
+  async agentPressKey(sessionId: string, key: string) {
+    const session = await this.getAgentSession(sessionId);
+    const handle = handles.get(sessionId);
+    if (!handle?.page) {
+      throw new Error('Browser runtime handle is not available.');
+    }
+    await handle.page.keyboard.press(key);
+    session.lastAction = `press_key:${key}`;
+    await captureSession(session, handle.page);
+    return publicSession(session);
+  },
+
+  async agentSelectOption(sessionId: string, selector: string, values: string[]) {
+    const session = await this.getAgentSession(sessionId);
+    const handle = handles.get(sessionId);
+    if (!handle?.page) {
+      throw new Error('Browser runtime handle is not available.');
+    }
+    await handle.page.locator(selector).first().selectOption(values, { timeout: 10_000 });
+    session.lastAction = 'select_option';
+    session.cursor = await getActionPoint(handle.page, { selector }).then((point) => (
+      point ? { ...point, actor: 'agent' as const } : null
+    ));
+    await captureSession(session, handle.page);
+    return publicSession(session);
+  },
+
+  async agentWaitFor(sessionId: string, input: { text?: string; url?: string; timeoutMs?: number }) {
+    const session = await this.getAgentSession(sessionId);
+    const handle = handles.get(sessionId);
+    if (!handle?.page) {
+      throw new Error('Browser runtime handle is not available.');
+    }
+    const timeout = Math.max(250, Math.min(input.timeoutMs || 5_000, 30_000));
+    if (input.text) {
+      await handle.page.getByText(input.text, { exact: false }).first().waitFor({ timeout });
+    } else if (input.url) {
+      await handle.page.waitForURL(input.url, { timeout });
+    } else {
+      await handle.page.waitForTimeout(timeout);
+    }
+    session.lastAction = 'wait_for';
+    await captureSession(session, handle.page);
+    return publicSession(session);
+  },
+
+  async agentTabs(sessionId: string, input: { action?: 'list' | 'new' | 'select' | 'close'; index?: number; url?: string }) {
+    const session = await this.getAgentSession(sessionId);
+    const handle = handles.get(sessionId);
+    if (!handle?.context || !handle?.page) {
+      throw new Error('Browser runtime handle is not available.');
+    }
+    const action = input.action || 'list';
+    if (action === 'new') {
+      const page = await handle.context.newPage();
+      handles.set(sessionId, { ...handle, page });
+      if (input.url) {
+        await this.agentNavigate(sessionId, input.url);
+      }
+    } else if (action === 'select') {
+      const page = handle.context.pages()[input.index || 0];
+      if (!page) {
+        throw new Error('Tab not found.');
+      }
+      handles.set(sessionId, { ...handle, page });
+    } else if (action === 'close') {
+      const pages = handle.context.pages();
+      const page = pages[input.index ?? pages.indexOf(handle.page)];
+      if (!page) {
+        throw new Error('Tab not found.');
+      }
+      await page.close();
+      handles.set(sessionId, { ...handle, page: handle.context.pages()[0] || await handle.context.newPage() });
+    }
+    const updatedHandle = handles.get(sessionId);
+    await captureSession(session, updatedHandle?.page || handle.page);
+    return {
+      session: publicSession(session),
+      tabs: handle.context.pages().map((page: any, index: number) => ({
+        index,
+        url: page.url(),
+        active: page === (updatedHandle?.page || handle.page),
+      })),
+    };
+  },
+
+  async stopSession(sessionId: string) {
+    const session = sessions.get(sessionId);
+    if (!session || session.ownerId !== AGENT_OWNER_ID) {
+      return { stopped: false };
+    }
+
+    await closeHandle(sessionId);
+
+    session.status = 'stopped';
+    session.updatedAt = new Date().toISOString();
+    session.lastAction = 'stop';
+    session.message = 'Browser session stopped. Create a new session to continue browsing.';
+    return { stopped: true, session: publicSession(session) };
+  },
+
+  async deleteSession(sessionId: string) {
+    const session = sessions.get(sessionId);
+    if (!session || session.ownerId !== AGENT_OWNER_ID) {
+      return { deleted: false };
+    }
+
+    await closeHandle(sessionId);
+    sessions.delete(sessionId);
+    return { deleted: true, sessionId };
+  },
+
+  async agentStopSession(sessionId: string) {
+    await this.getAgentSession(sessionId);
+    return this.stopSession(sessionId);
+  },
+
+  async stopAllSessions() {
+    await Promise.all([...sessions.keys()].map(async (sessionId) => {
+      await closeHandle(sessionId);
+      const session = sessions.get(sessionId);
+      if (session) {
+        session.status = 'stopped';
+        session.updatedAt = new Date().toISOString();
+        session.lastAction = 'shutdown';
+        session.message = 'Browser session stopped during server shutdown.';
+      }
+    }));
+  },
+};
+
+process.once('beforeExit', () => {
+  void browserUseService.stopAllSessions();
+});

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

@@ -0,0 +1,10 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+
+import { browserUseService } from '@/modules/browser-use/browser-use.service.js';
+
+test('browser monitor list starts empty without agent sessions', async () => {
+  const sessions = await browserUseService.listSessions();
+
+  assert.deepEqual(sessions, []);
+});

server/modules/providers/index.ts

@@ -1,5 +1,6 @@
 export { sessionSynchronizerService } from './services/session-synchronizer.service.js';
 export { providerSkillsService } from './services/skills.service.js';
+export { providerMcpService } from './services/mcp.service.js';
 
 export { initializeSessionsWatcher } from './services/sessions-watcher.service.js';
 export { closeSessionsWatcher } from './services/sessions-watcher.service.js';

server/modules/providers/list/claude/claude-session-synchronizer.provider.ts

@@ -25,6 +25,21 @@ export class ClaudeSessionSynchronizer implements IProviderSessionSynchronizer {
   private readonly provider = 'claude' as const;
   private readonly claudeHome = path.join(os.homedir(), '.claude');
 
+  /**
+   * Returns true when a JSONL file is a subagent transcript rather than a
+   * top-level session.
+   *
+   * Claude stores subagent transcripts under a `subagents/` directory, e.g.
+   * `~/.claude/projects/<encoded-cwd>/<session-id>/subagents/agent-<id>.jsonl`.
+   * Those files repeat the parent session's `sessionId`, so indexing them as
+   * standalone sessions overwrites the parent row's `jsonl_path` and corrupts
+   * the main session record. The recursive scan in `synchronize()` reaches
+   * them, so both entry points must skip them.
+   */
+  private isSubagentTranscript(filePath: string): boolean {
+    return path.normalize(filePath).split(path.sep).includes('subagents');
+  }
+
   /**
    * Scans ~/.claude/projects and upserts discovered sessions into DB.
    */
@@ -38,6 +53,10 @@ export class ClaudeSessionSynchronizer implements IProviderSessionSynchronizer {
 
     let processed = 0;
     for (const filePath of files) {
+      if (this.isSubagentTranscript(filePath)) {
+        continue;
+      }
+
       const parsed = await this.processSessionFile(filePath, nameMap);
       if (!parsed) {
         continue;
@@ -66,6 +85,9 @@ export class ClaudeSessionSynchronizer implements IProviderSessionSynchronizer {
     if (!filePath.endsWith('.jsonl')) {
       return null;
     }
+    if (this.isSubagentTranscript(filePath)) {
+      return null;
+    }
 
     const nameMap = await buildLookupMap(path.join(this.claudeHome, 'history.jsonl'), 'sessionId', 'display');
     const parsed = await this.processSessionFile(filePath, nameMap);

server/modules/providers/list/claude/claude-skills.provider.ts

@@ -99,6 +99,14 @@ export class ClaudeSkillsProvider extends SkillsProvider {
     ];
   }
 
+  protected async getGlobalSkillSource(): Promise<ProviderSkillSource> {
+    return {
+      scope: 'user',
+      rootDir: path.join(getClaudeHomePath(), 'skills'),
+      commandPrefix: '/',
+    };
+  }
+
   private async listPluginSkills(claudeHomePath: string): Promise<ProviderSkill[]> {
     const settings = await readJsonConfig(path.join(claudeHomePath, 'settings.json'));
     const enabledPlugins = readObjectRecord(settings.enabledPlugins);

server/modules/providers/list/codex/codex-skills.provider.ts

@@ -57,4 +57,12 @@ export class CodexSkillsProvider extends SkillsProvider {
 
     return sources;
   }
+
+  protected async getGlobalSkillSource(): Promise<ProviderSkillSource> {
+    return {
+      scope: 'user',
+      rootDir: path.join(os.homedir(), '.agents', 'skills'),
+      commandPrefix: '$',
+    };
+  }
 }

server/modules/providers/list/cursor/cursor-skills.provider.ts

@@ -28,4 +28,12 @@ export class CursorSkillsProvider extends SkillsProvider {
       },
     ];
   }
+
+  protected async getGlobalSkillSource(): Promise<ProviderSkillSource> {
+    return {
+      scope: 'user',
+      rootDir: path.join(os.homedir(), '.cursor', 'skills'),
+      commandPrefix: '/',
+    };
+  }
 }

server/modules/providers/list/gemini/gemini-skills.provider.ts

@@ -33,4 +33,12 @@ export class GeminiSkillsProvider extends SkillsProvider {
       },
     ];
   }
+
+  protected async getGlobalSkillSource(): Promise<ProviderSkillSource> {
+    return {
+      scope: 'user',
+      rootDir: path.join(os.homedir(), '.gemini', 'skills'),
+      commandPrefix: '/',
+    };
+  }
 }

server/modules/providers/provider.routes.ts

@@ -12,6 +12,8 @@ import type {
   McpScope,
   McpTransport,
   ProviderChangeActiveModelInput,
+  ProviderSkillCreateFile,
+  ProviderSkillCreateInput,
   UpsertProviderMcpServerInput,
 } from '@/shared/types.js';
 import { AppError, asyncHandler, createApiSuccessResponse } from '@/shared/utils.js';
@@ -179,6 +181,104 @@ const parseMcpUpsertPayload = (payload: unknown): UpsertProviderMcpServerInput =
   };
 };
 
+const parseProviderSkillCreatePayload = (payload: unknown): ProviderSkillCreateInput => {
+  if (!payload || typeof payload !== 'object') {
+    throw new AppError('Request body must be an object.', {
+      code: 'INVALID_REQUEST_BODY',
+      statusCode: 400,
+    });
+  }
+
+  const body = payload as Record<string, unknown>;
+  const rawEntries = Array.isArray(body.entries)
+    ? body.entries
+    : typeof body.content === 'string'
+      ? [{
+          content: body.content,
+          directoryName: body.directoryName,
+          fileName: body.fileName,
+          files: body.files,
+        }]
+      : null;
+
+  if (!rawEntries || rawEntries.length === 0) {
+    throw new AppError('At least one skill entry is required.', {
+      code: 'PROVIDER_SKILLS_REQUIRED',
+      statusCode: 400,
+    });
+  }
+
+  const entries = rawEntries.map((entry, index) => {
+    if (!entry || typeof entry !== 'object') {
+      throw new AppError(`Skill entry ${index + 1} must be an object.`, {
+        code: 'INVALID_REQUEST_BODY',
+        statusCode: 400,
+      });
+    }
+
+    const record = entry as Record<string, unknown>;
+    const content = typeof record.content === 'string' ? record.content : '';
+    const directoryName = readOptionalQueryString(record.directoryName);
+    const fileName = readOptionalQueryString(record.fileName);
+    const rawFiles = record.files;
+
+    if (!content.trim()) {
+      throw new AppError(`Skill entry ${index + 1} must include markdown content.`, {
+        code: 'PROVIDER_SKILL_CONTENT_REQUIRED',
+        statusCode: 400,
+      });
+    }
+
+    if (rawFiles !== undefined && !Array.isArray(rawFiles)) {
+      throw new AppError(`Skill entry ${index + 1} files must be an array.`, {
+        code: 'INVALID_REQUEST_BODY',
+        statusCode: 400,
+      });
+    }
+
+    const files: ProviderSkillCreateFile[] | undefined = rawFiles?.map((file, fileIndex) => {
+      if (!file || typeof file !== 'object') {
+        throw new AppError(`Skill entry ${index + 1} file ${fileIndex + 1} must be an object.`, {
+          code: 'INVALID_REQUEST_BODY',
+          statusCode: 400,
+        });
+      }
+
+      const fileRecord = file as Record<string, unknown>;
+      const relativePath = readOptionalQueryString(fileRecord.relativePath);
+      const fileContent = typeof fileRecord.content === 'string' ? fileRecord.content : null;
+      const encoding = fileRecord.encoding === 'utf8' || fileRecord.encoding === 'base64'
+        ? fileRecord.encoding
+        : null;
+
+      if (!relativePath || fileContent === null || !encoding) {
+        throw new AppError(
+          `Skill entry ${index + 1} file ${fileIndex + 1} requires relativePath, content, and encoding.`,
+          {
+            code: 'INVALID_REQUEST_BODY',
+            statusCode: 400,
+          },
+        );
+      }
+
+      return {
+        relativePath,
+        content: fileContent,
+        encoding,
+      };
+    });
+
+    return {
+      content,
+      directoryName,
+      fileName,
+      files,
+    };
+  });
+
+  return { entries };
+};
+
 const parseProvider = (value: unknown): LLMProvider => {
   const normalized = normalizeProviderParam(value);
   if (
@@ -320,6 +420,16 @@ router.get(
   }),
 );
 
+router.post(
+  '/:provider/skills',
+  asyncHandler(async (req: Request, res: Response) => {
+    const provider = parseProvider(req.params.provider);
+    const input = parseProviderSkillCreatePayload(req.body);
+    const skills = await providerSkillsService.addProviderSkills(provider, input);
+    res.json(createApiSuccessResponse({ provider, skills }));
+  }),
+);
+
 // ----------------- MCP routes -----------------
 router.get(
   '/:provider/mcp/servers',

server/modules/providers/services/mcp.service.ts

@@ -80,4 +80,30 @@ export const providerMcpService = {
 
     return results;
   },
+
+  /**
+   * Removes one MCP server from every provider. Mirrors `addMcpServerToAllProviders`
+   * by iterating the live provider registry, so callers stay in sync with which
+   * providers exist instead of maintaining their own provider list.
+   */
+  async removeMcpServerFromAllProviders(
+    input: { name: string; scope?: McpScope; workspacePath?: string },
+  ): Promise<Array<{ provider: LLMProvider; removed: boolean; error?: string }>> {
+    const results: Array<{ provider: LLMProvider; removed: boolean; error?: string }> = [];
+    const providers = providerRegistry.listProviders();
+    for (const provider of providers) {
+      try {
+        const result = await provider.mcp.removeServer(input);
+        results.push({ provider: provider.id, removed: result.removed });
+      } catch (error) {
+        results.push({
+          provider: provider.id,
+          removed: false,
+          error: error instanceof Error ? error.message : 'Unknown error',
+        });
+      }
+    }
+
+    return results;
+  },
 };

server/modules/providers/services/skills.service.ts

@@ -1,5 +1,9 @@
 import { providerRegistry } from '@/modules/providers/provider.registry.js';
-import type { ProviderSkill, ProviderSkillListOptions } from '@/shared/types.js';
+import type {
+  ProviderSkill,
+  ProviderSkillCreateInput,
+  ProviderSkillListOptions,
+} from '@/shared/types.js';
 
 export const providerSkillsService = {
   /**
@@ -12,4 +16,15 @@ export const providerSkillsService = {
     const provider = providerRegistry.resolveProvider(providerName);
     return provider.skills.listSkills(options);
   },
+
+  /**
+   * Writes one or more global skills for one provider.
+   */
+  async addProviderSkills(
+    providerName: string,
+    input: ProviderSkillCreateInput,
+  ): Promise<ProviderSkill[]> {
+    const provider = providerRegistry.resolveProvider(providerName);
+    return provider.skills.addSkills(input);
+  },
 };

server/modules/providers/shared/skills/skills.provider.ts

@@ -1,20 +1,86 @@
 import path from 'node:path';
+import { mkdir, rm, writeFile } from 'node:fs/promises';
 
 import type { IProviderSkills } from '@/shared/interfaces.js';
 import type {
   LLMProvider,
+  ProviderSkillCreateInput,
   ProviderSkill,
   ProviderSkillListOptions,
   ProviderSkillSource,
 } from '@/shared/types.js';
 import {
   findProviderSkillMarkdownFiles,
+  readOptionalString,
+  readProviderSkillMarkdownDefinitionFromContent,
   readProviderSkillMarkdownDefinition,
+  AppError,
 } from '@/shared/utils.js';
 
 const resolveWorkspacePath = (workspacePath?: string): string =>
   path.resolve(workspacePath ?? process.cwd());
 
+const stripMarkdownExtension = (value: string): string => value.replace(/\.md$/i, '');
+
+const normalizeSkillDirectoryName = (value: string): string => (
+  value
+    .trim()
+    .replace(/[\\/]+/g, '-')
+    .replace(/[<>:"|?*\x00-\x1F]/g, '-')
+    .replace(/\s+/g, '-')
+    .replace(/-+/g, '-')
+    .replace(/^\.+|\.+$/g, '')
+    .replace(/^-+|-+$/g, '')
+);
+
+type PendingSkillInstall = {
+  skillDirectoryPath: string;
+  skillPath: string;
+  content: string;
+  supportingFiles: Array<{
+    targetPath: string;
+    content: string | Buffer;
+  }>;
+  skill: ProviderSkill;
+};
+
+const resolveSkillSupportingFilePath = (
+  skillDirectoryPath: string,
+  relativePath: string,
+  entryIndex: number,
+): string => {
+  const normalizedRelativePath = relativePath.trim().replace(/\\/g, '/');
+  const pathSegments = normalizedRelativePath.split('/');
+  if (
+    !normalizedRelativePath
+    || path.isAbsolute(normalizedRelativePath)
+    || pathSegments.some((segment) => !segment || segment === '.' || segment === '..')
+    || normalizedRelativePath.toLowerCase() === 'skill.md'
+  ) {
+    throw new AppError(
+      `Skill entry ${entryIndex + 1} includes an invalid supporting file path "${relativePath}".`,
+      {
+        code: 'PROVIDER_SKILL_FILE_PATH_INVALID',
+        statusCode: 400,
+      },
+    );
+  }
+
+  const resolvedSkillDirectoryPath = path.resolve(skillDirectoryPath);
+  const resolvedFilePath = path.resolve(resolvedSkillDirectoryPath, ...pathSegments);
+  if (!resolvedFilePath.startsWith(`${resolvedSkillDirectoryPath}${path.sep}`)) {
+    throw new AppError(
+      `Skill entry ${entryIndex + 1} supporting files must stay inside the skill directory.`,
+      {
+        code: 'PROVIDER_SKILL_FILE_PATH_INVALID',
+        statusCode: 400,
+      },
+    );
+  }
+
+  return resolvedFilePath;
+};
+
 /**
  * Shared skills provider for provider-specific skill source discovery.
  */
@@ -60,5 +126,119 @@ export abstract class SkillsProvider implements IProviderSkills {
     return skills;
   }
 
+  async addSkills(input: ProviderSkillCreateInput): Promise<ProviderSkill[]> {
+    const globalSkillSource = await this.getGlobalSkillSource();
+    if (!globalSkillSource) {
+      throw new AppError(`${this.provider} does not support managed global skills.`, {
+        code: 'PROVIDER_SKILLS_WRITE_UNSUPPORTED',
+        statusCode: 400,
+      });
+    }
+
+    if (!Array.isArray(input.entries) || input.entries.length === 0) {
+      throw new AppError('At least one skill entry is required.', {
+        code: 'PROVIDER_SKILLS_REQUIRED',
+        statusCode: 400,
+      });
+    }
+
+    const seenSkillPaths = new Set<string>();
+    const pendingInstalls: PendingSkillInstall[] = [];
+
+    for (const [index, entry] of input.entries.entries()) {
+      const content = typeof entry.content === 'string' ? entry.content.trim() : '';
+      if (!content) {
+        throw new AppError(`Skill entry ${index + 1} must include markdown content.`, {
+          code: 'PROVIDER_SKILL_CONTENT_REQUIRED',
+          statusCode: 400,
+        });
+      }
+
+      const fileNameFallback = readOptionalString(entry.fileName);
+      const requestedDirectoryName = readOptionalString(entry.directoryName);
+      const fallbackSkillName = normalizeSkillDirectoryName(
+        requestedDirectoryName
+          ?? (fileNameFallback ? stripMarkdownExtension(fileNameFallback) : `skill-${index + 1}`),
+      );
+      const definition = readProviderSkillMarkdownDefinitionFromContent(content, fallbackSkillName);
+      const resolvedDirectoryName = normalizeSkillDirectoryName(
+        requestedDirectoryName ?? definition.name,
+      );
+
+      if (!resolvedDirectoryName) {
+        throw new AppError(`Skill entry ${index + 1} must include a valid skill name.`, {
+          code: 'PROVIDER_SKILL_NAME_REQUIRED',
+          statusCode: 400,
+        });
+      }
+
+      const skillDirectoryPath = path.join(globalSkillSource.rootDir, resolvedDirectoryName);
+      const skillPath = path.join(skillDirectoryPath, 'SKILL.md');
+      const normalizedSkillPath = path.resolve(skillPath);
+      if (seenSkillPaths.has(normalizedSkillPath)) {
+        throw new AppError(`Duplicate skill target "${resolvedDirectoryName}" in one request.`, {
+          code: 'PROVIDER_SKILL_DUPLICATE_TARGET',
+          statusCode: 400,
+        });
+      }
+
+      seenSkillPaths.add(normalizedSkillPath);
+      const supportingFiles = (entry.files ?? []).map((file) => ({
+        targetPath: resolveSkillSupportingFilePath(skillDirectoryPath, file.relativePath, index),
+        content: file.encoding === 'base64'
+          ? Buffer.from(file.content, 'base64')
+          : file.content,
+      }));
+      const seenSupportingPaths = new Set<string>();
+      for (const file of supportingFiles) {
+        if (seenSupportingPaths.has(file.targetPath)) {
+          throw new AppError(`Skill entry ${index + 1} includes a duplicate supporting file path.`, {
+            code: 'PROVIDER_SKILL_DUPLICATE_FILE',
+            statusCode: 400,
+          });
+        }
+        seenSupportingPaths.add(file.targetPath);
+      }
+
+      const command = globalSkillSource.commandForSkill
+        ? globalSkillSource.commandForSkill(definition.name)
+        : `${globalSkillSource.commandPrefix ?? '/'}${definition.name}`;
+
+      pendingInstalls.push({
+        skillDirectoryPath,
+        skillPath,
+        content,
+        supportingFiles,
+        skill: {
+          provider: this.provider,
+          name: definition.name,
+          description: definition.description,
+          command,
+          scope: globalSkillSource.scope,
+          sourcePath: skillPath,
+          pluginName: globalSkillSource.pluginName,
+          pluginId: globalSkillSource.pluginId,
+        },
+      });
+    }
+
+    for (const install of pendingInstalls) {
+      // Replace the complete skill directory so removed scripts or assets do not remain stale.
+      await rm(install.skillDirectoryPath, { recursive: true, force: true });
+      await mkdir(install.skillDirectoryPath, { recursive: true });
+      await writeFile(install.skillPath, `${install.content}\n`, 'utf8');
+      for (const file of install.supportingFiles) {
+        await mkdir(path.dirname(file.targetPath), { recursive: true });
+        await writeFile(file.targetPath, file.content);
+      }
+    }
+
+    return pendingInstalls.map((install) => install.skill);
+  }
+
   protected abstract getSkillSources(workspacePath: string): Promise<ProviderSkillSource[]>;
+
+  protected async getGlobalSkillSource(): Promise<ProviderSkillSource | null> {
+    return null;
+  }
 }

server/modules/providers/tests/skills.test.ts

@@ -510,3 +510,195 @@ test('providerSkillsService lists gemini and cursor skills from their configured
     await fs.rm(tempRoot, { recursive: true, force: true });
   }
 });
+
+/**
+ * This test covers managed global skill creation for providers that own a
+ * writable user skill directory.
+ */
+test('providerSkillsService adds global skills for claude, codex, gemini, and cursor', { concurrency: false }, async () => {
+  const tempRoot = await fs.mkdtemp(path.join(os.tmpdir(), 'llm-skills-create-'));
+  const restoreHomeDir = patchHomeDir(tempRoot);
+
+  try {
+    const createdClaudeSkills = await providerSkillsService.addProviderSkills('claude', {
+      entries: [
+        {
+          directoryName: 'claude-global-dir',
+          content: '---\nname: claude-global\ndescription: Claude global skill\n---\n\nClaude body.\n',
+        },
+      ],
+    });
+    const createdClaudeSkill = createdClaudeSkills[0];
+    assert.ok(createdClaudeSkill);
+    assert.equal(createdClaudeSkill.command, '/claude-global');
+    assert.equal(
+      createdClaudeSkill.sourcePath.endsWith(path.join('.claude', 'skills', 'claude-global-dir', 'SKILL.md')),
+      true,
+    );
+    assert.match(
+      await fs.readFile(createdClaudeSkill.sourcePath, 'utf8'),
+      /Claude body\./,
+    );
+
+    const createdCodexSkills = await providerSkillsService.addProviderSkills('codex', {
+      entries: [
+        {
+          directoryName: 'uploaded-codex-folder',
+          fileName: 'SKILL.md',
+          content: '---\nname: codex-global\ndescription: Codex global skill\n---\n\nCodex body.\n',
+          files: [
+            {
+              relativePath: 'scripts/run.js',
+              content: Buffer.from('console.log("codex skill");\n').toString('base64'),
+              encoding: 'base64',
+            },
+          ],
+        },
+      ],
+    });
+    const createdCodexSkill = createdCodexSkills[0];
+    assert.ok(createdCodexSkill);
+    assert.equal(createdCodexSkill.command, '$codex-global');
+    assert.equal(
+      createdCodexSkill.sourcePath.endsWith(path.join('.agents', 'skills', 'uploaded-codex-folder', 'SKILL.md')),
+      true,
+    );
+    assert.equal(
+      await fs.readFile(path.join(path.dirname(createdCodexSkill.sourcePath), 'scripts', 'run.js'), 'utf8'),
+      'console.log("codex skill");\n',
+    );
+
+    const fallbackNamedSkills = await providerSkillsService.addProviderSkills('codex', {
+      entries: [
+        {
+          fileName: 'fallback / skill.md',
+          content: '---\ndescription: Normalized fallback skill\n---\n\nFallback body.\n',
+        },
+      ],
+    });
+    const fallbackNamedSkill = fallbackNamedSkills[0];
+    assert.ok(fallbackNamedSkill);
+    assert.equal(fallbackNamedSkill.name, 'fallback-skill');
+    assert.equal(fallbackNamedSkill.command, '$fallback-skill');
+    assert.equal(
+      fallbackNamedSkill.sourcePath.endsWith(path.join('.agents', 'skills', 'fallback-skill', 'SKILL.md')),
+      true,
+    );
+
+    const replacedCodexSkills = await providerSkillsService.addProviderSkills('codex', {
+      entries: [
+        {
+          directoryName: 'uploaded-codex-folder',
+          content: '---\nname: replacement\ndescription: Replacement skill\n---\n\nReplacement body.\n',
+        },
+      ],
+    });
+    assert.equal(replacedCodexSkills[0]?.command, '$replacement');
+    assert.match(await fs.readFile(createdCodexSkill.sourcePath, 'utf8'), /Replacement body\./);
+    await assert.rejects(
+      fs.stat(path.join(path.dirname(createdCodexSkill.sourcePath), 'scripts', 'run.js')),
+      { code: 'ENOENT' },
+    );
+
+    const pendingBatchSkillPath = path.join(tempRoot, '.agents', 'skills', 'pending-batch', 'SKILL.md');
+    await assert.rejects(
+      providerSkillsService.addProviderSkills('codex', {
+        entries: [
+          {
+            directoryName: 'pending-batch',
+            content: '---\nname: pending-batch\n---\n\nPending body.\n',
+          },
+          {
+            directoryName: 'pending-batch',
+            content: '---\nname: duplicate-batch\n---\n\nDuplicate body.\n',
+          },
+        ],
+      }),
+      /duplicate skill target/i,
+    );
+    await assert.rejects(fs.stat(pendingBatchSkillPath), { code: 'ENOENT' });
+
+    const createdGeminiSkills = await providerSkillsService.addProviderSkills('gemini', {
+      entries: [
+        {
+          directoryName: 'gemini-global-dir',
+          content: '---\nname: gemini-global\ndescription: Gemini global skill\n---\n\nGemini body.\n',
+        },
+      ],
+    });
+    const createdGeminiSkill = createdGeminiSkills[0];
+    assert.ok(createdGeminiSkill);
+    assert.equal(createdGeminiSkill.command, '/gemini-global');
+    assert.equal(
+      createdGeminiSkill.sourcePath.endsWith(path.join('.gemini', 'skills', 'gemini-global-dir', 'SKILL.md')),
+      true,
+    );
+
+    const createdCursorSkills = await providerSkillsService.addProviderSkills('cursor', {
+      entries: [
+        {
+          directoryName: 'cursor-global-dir',
+          content: '---\nname: cursor-global\ndescription: Cursor global skill\n---\n\nCursor body.\n',
+        },
+      ],
+    });
+    const createdCursorSkill = createdCursorSkills[0];
+    assert.ok(createdCursorSkill);
+    assert.equal(createdCursorSkill.command, '/cursor-global');
+    assert.equal(
+      createdCursorSkill.sourcePath.endsWith(path.join('.cursor', 'skills', 'cursor-global-dir', 'SKILL.md')),
+      true,
+    );
+
+    const listedClaudeSkills = await providerSkillsService.listProviderSkills('claude');
+    assert.equal(listedClaudeSkills.some((skill) => skill.name === 'claude-global'), true);
+
+    const listedCodexSkills = await providerSkillsService.listProviderSkills('codex');
+    assert.equal(listedCodexSkills.some((skill) => skill.name === 'replacement'), true);
+
+    const listedGeminiSkills = await providerSkillsService.listProviderSkills('gemini');
+    assert.equal(listedGeminiSkills.some((skill) => skill.name === 'gemini-global'), true);
+
+    const listedCursorSkills = await providerSkillsService.listProviderSkills('cursor');
+    assert.equal(listedCursorSkills.some((skill) => skill.name === 'cursor-global'), true);
+
+    await assert.rejects(
+      providerSkillsService.addProviderSkills('codex', {
+        entries: [
+          {
+            content: '---\nname: unsafe-skill\n---\n',
+            files: [
+              {
+                relativePath: '../outside.js',
+                content: '',
+                encoding: 'utf8',
+              },
+            ],
+          },
+        ],
+      }),
+      /invalid supporting file path/i,
+    );
+  } finally {
+    restoreHomeDir();
+    await fs.rm(tempRoot, { recursive: true, force: true });
+  }
+});
+
+/**
+ * OpenCode reuses other providers' skill folders, so it should not accept
+ * direct skill writes through the managed provider endpoint.
+ */
+test('providerSkillsService rejects managed skill creation for opencode', { concurrency: false }, async () => {
+  await assert.rejects(
+    providerSkillsService.addProviderSkills('opencode', {
+      entries: [
+        {
+          directoryName: 'opencode-global-dir',
+          content: '---\nname: opencode-global\ndescription: Unsupported skill\n---\n\nOpenCode body.\n',
+        },
+      ],
+    }),
+    /does not support managed global skills/i,
+  );
+});

server/shared/interfaces.ts

@@ -12,6 +12,7 @@ import type {
   ProviderModelsDefinition,
   ProviderMcpServer,
   ProviderSessionActiveModelChange,
+  ProviderSkillCreateInput,
   UpsertProviderMcpServerInput,
 } from '@/shared/types.js';
 
@@ -101,6 +102,15 @@ export interface IProviderSkills {
    * Lists all skills visible to this provider for the optional workspace.
    */
   listSkills(options?: ProviderSkillListOptions): Promise<ProviderSkill[]>;
+
+  /**
+   * Writes one or more global user-scoped skills for this provider.
+   *
+   * Implementations should install the supplied markdown entries into the
+   * provider's writable user skill folder and return the normalized skill
+   * records that were written.
+   */
+  addSkills(input: ProviderSkillCreateInput): Promise<ProviderSkill[]>;
 }
 
 // ---------------------------

server/shared/types.ts

@@ -320,6 +320,47 @@ export type ProviderSkillListOptions = {
   workspacePath?: string;
 };
 
+/**
+ * One supporting file bundled with an uploaded provider skill.
+ *
+ * `relativePath` is resolved below the installed skill directory and must never
+ * be absolute or contain traversal segments. Text files may use `utf8`; binary
+ * scripts and assets should use `base64` so JSON transport does not corrupt
+ * their bytes.
+ */
+export type ProviderSkillCreateFile = {
+  relativePath: string;
+  content: string;
+  encoding: 'utf8' | 'base64';
+};
+
+/**
+ * One skill markdown payload submitted for provider-managed installation.
+ *
+ * `content` is the raw markdown body that will be written to `SKILL.md`.
+ * `directoryName` lets callers control the target folder name explicitly when
+ * they want stable filesystem paths that differ from the markdown front matter
+ * `name` field. `fileName` is optional upload metadata used only as a final
+ * fallback when no directory name or front matter name is present. `files`
+ * carries scripts, references, and other files from a complete skill folder.
+ */
+export type ProviderSkillCreateEntry = {
+  content: string;
+  directoryName?: string;
+  fileName?: string;
+  files?: ProviderSkillCreateFile[];
+};
+
+/**
+ * Shared input accepted by provider skill creation operations.
+ *
+ * The service layer batches multiple skill definitions in one request. Each
+ * entry can contain only markdown or a complete skill folder.
+ */
+export type ProviderSkillCreateInput = {
+  entries: ProviderSkillCreateEntry[];
+};
+
 /**
  * Normalized skill record returned by provider skill adapters.
  *

server/shared/utils.ts

@@ -957,9 +957,25 @@ export async function readProviderSkillMarkdownDefinition(
   skillPath: string,
 ): Promise<{ name: string; description: string }> {
   const content = await readFile(skillPath, 'utf8');
+  return readProviderSkillMarkdownDefinitionFromContent(
+    content,
+    path.basename(path.dirname(skillPath)),
+  );
+}
+
+/**
+ * Reads the `name` and `description` fields from raw skill markdown content.
+ *
+ * This keeps filesystem discovery and newly uploaded skill creation aligned on
+ * the same front matter parsing rules. `fallbackName` is used when the markdown
+ * omits a `name` field so callers still get a stable, non-empty skill id.
+ */
+export function readProviderSkillMarkdownDefinitionFromContent(
+  content: string,
+  fallbackName: string,
+): { name: string; description: string } {
   const parsed = parseFrontMatter(content);
   const data = readObjectRecord(parsed.data) ?? {};
-  const fallbackName = path.basename(path.dirname(skillPath));
 
   return {
     name: readOptionalString(data.name) ?? fallbackName,

src/components/app/AppContent.tsx

@@ -71,7 +71,6 @@ function AppContentInner() {
     setActiveTab,
     setSidebarOpen,
     setIsInputFocused,
-    setShowSettings,
     openSettings,
     refreshProjectsSilently,
     registerOptimisticSession,
@@ -247,7 +246,7 @@ function AppContentInner() {
           onSessionEstablished={(targetSessionId, context) =>
             registerOptimisticSession({ sessionId: targetSessionId, ...context })
           }
-          onShowSettings={() => setShowSettings(true)}
+          onShowSettings={openSettings}
           externalMessageUpdate={externalMessageUpdate}
           newSessionTrigger={newSessionTrigger}
         />

src/components/browser-use/index.ts

@@ -0,0 +1 @@
+export { default as BrowserUsePanel } from './view/BrowserUsePanel';

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

@@ -0,0 +1,536 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+  Bot,
+  Clock3,
+  Download,
+  Expand,
+  ExternalLink,
+  Loader2,
+  MonitorPlay,
+  RefreshCw,
+  Settings,
+  Square,
+  Trash2,
+  X,
+} from 'lucide-react';
+
+import { cn } from '../../../lib/utils';
+import { Badge, Button } from '../../../shared/view/ui';
+import { authenticatedFetch } from '../../../utils/api';
+import type { SettingsMainTab } from '../../settings/types/types';
+
+type BrowserUseStatus = {
+  enabled: boolean;
+  available: boolean;
+  playwrightInstalled: boolean;
+  chromiumInstalled: boolean;
+  installInProgress: boolean;
+  sessionCount: number;
+  message: string;
+};
+
+type BrowserUseSession = {
+  id: string;
+  status: 'ready' | 'stopped' | 'unavailable';
+  url: string | null;
+  title: string | null;
+  screenshotDataUrl: string | null;
+  createdAt: string;
+  updatedAt: string;
+  lastAction: string | null;
+  message: string | null;
+  createdBy: 'agent';
+  profileName: string | null;
+  viewport: {
+    width: number;
+    height: number;
+  } | null;
+  cursor: {
+    x: number;
+    y: number;
+    actor: 'agent';
+  } | null;
+};
+
+type BrowserUsePanelProps = {
+  isVisible: boolean;
+  onShowSettings?: (tab?: SettingsMainTab) => void;
+};
+
+async function readJson<T>(response: Response): Promise<T> {
+  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;
+}
+
+function formatRelativeTime(value: string | null): string {
+  if (!value) return 'Never';
+
+  const timestamp = Date.parse(value);
+  if (!Number.isFinite(timestamp)) return 'Unknown';
+
+  const elapsedSeconds = Math.max(0, Math.round((Date.now() - timestamp) / 1000));
+  if (elapsedSeconds < 10) return 'Just now';
+  if (elapsedSeconds < 60) return `${elapsedSeconds}s ago`;
+  const elapsedMinutes = Math.round(elapsedSeconds / 60);
+  if (elapsedMinutes < 60) return `${elapsedMinutes}m ago`;
+  const elapsedHours = Math.round(elapsedMinutes / 60);
+  if (elapsedHours < 24) return `${elapsedHours}h ago`;
+  return `${Math.round(elapsedHours / 24)}d ago`;
+}
+
+function getDomain(url: string | null): string {
+  if (!url) return 'No page loaded';
+
+  try {
+    return new URL(url).hostname;
+  } catch {
+    return url;
+  }
+}
+
+function formatAction(action: string | null): string {
+  if (!action) return 'Waiting';
+  return action.replace(/_/g, ' ').replace(/:/g, ': ');
+}
+
+function getStatusTone(status: BrowserUseSession['status']): string {
+  if (status === 'ready') {
+    return 'border-primary/30 bg-primary/5 text-foreground';
+  }
+  if (status === 'stopped') {
+    return 'border-border bg-muted text-muted-foreground';
+  }
+  return 'border-border bg-background text-muted-foreground';
+}
+
+function getRuntimeTone(status: BrowserUseStatus | null, installing: boolean): string {
+  if (!status?.enabled) return 'border-border bg-muted text-muted-foreground';
+  if (status.available) return 'border-primary/30 bg-primary/5 text-foreground';
+  if (status.installInProgress || installing) return 'border-primary/30 bg-primary/5 text-foreground';
+  return 'border-border bg-background text-muted-foreground';
+}
+
+function getStatusDot(status: BrowserUseSession['status']): string {
+  if (status === 'ready') return 'bg-primary';
+  if (status === 'stopped') return 'bg-muted-foreground/50';
+  return 'bg-border';
+}
+
+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.',
+];
+
+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 selectedSession = useMemo(
+    () => sessions.find((session) => session.id === selectedSessionId) || sessions[0] || null,
+    [selectedSessionId, sessions],
+  );
+
+  const activeSessions = sessions.filter((session) => session.status === 'ready');
+  const needsBrowserBinaries = Boolean(status?.enabled && (!status.playwrightInstalled || !status.chromiumInstalled));
+  const runtimeLabel = !status?.enabled
+    ? 'Disabled'
+    : status.available
+      ? 'Ready'
+      : status.installInProgress || isInstalling
+        ? 'Installing'
+        : 'Setup required';
+
+  const cursorStyle = selectedSession?.cursor && selectedSession.viewport
+    ? {
+      left: `${(selectedSession.cursor.x / selectedSession.viewport.width) * 100}%`,
+      top: `${(selectedSession.cursor.y / selectedSession.viewport.height) * 100}%`,
+    }
+    : null;
+
+  const refresh = useCallback(async () => {
+    setIsRefreshing(true);
+    try {
+      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);
+      setSelectedSessionId((current) => (
+        current && nextSessions.some((session) => session.id === current)
+          ? current
+          : nextSessions[0]?.id || null
+      ));
+      setError(null);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load Browser');
+    } finally {
+      setIsRefreshing(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!isVisible) return;
+    void refresh();
+  }, [isVisible, refresh]);
+
+  const runAction = useCallback(async (action: () => Promise<void>) => {
+    setIsBusy(true);
+    setError(null);
+    try {
+      await action();
+      await refresh();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Browser action failed');
+    } finally {
+      setIsBusy(false);
+    }
+  }, [refresh]);
+
+  const stopSession = () => runAction(async () => {
+    if (!selectedSession) return;
+    const response = await authenticatedFetch(`/api/browser-use/sessions/${selectedSession.id}/stop`, { method: 'POST' });
+    await readJson(response);
+  });
+
+  const deleteSession = () => runAction(async () => {
+    if (!selectedSession) return;
+    const response = await authenticatedFetch(`/api/browser-use/sessions/${selectedSession.id}`, { method: 'DELETE' });
+    await readJson(response);
+    setIsFullscreen(false);
+  });
+
+  const installBrowserBinaries = () => runAction(async () => {
+    setIsInstalling(true);
+    try {
+      const response = await authenticatedFetch('/api/browser-use/runtime/install', { method: 'POST' });
+      await readJson(response);
+    } finally {
+      setIsInstalling(false);
+    }
+  });
+
+  const renderSessionItem = (session: BrowserUseSession) => {
+    const isSelected = selectedSession?.id === session.id;
+    return (
+      <button
+        key={session.id}
+        type="button"
+        onClick={() => setSelectedSessionId(session.id)}
+        className={cn(
+          'group w-full rounded-md border px-3 py-2.5 text-left transition-colors',
+          isSelected
+            ? 'border-primary/50 bg-primary/10 text-foreground'
+            : 'border-border/60 bg-card/30 text-muted-foreground hover:bg-muted/50',
+        )}
+      >
+        <div className="flex items-start justify-between gap-2">
+          <div className="min-w-0">
+            <div className="flex min-w-0 items-center gap-2">
+              <span className={cn('h-1.5 w-1.5 shrink-0 rounded-full', getStatusDot(session.status))} />
+              <div className="truncate text-sm font-medium">{session.title || getDomain(session.url)}</div>
+            </div>
+            <div className="mt-1 truncate pl-3.5 text-xs text-muted-foreground">{getDomain(session.url)}</div>
+          </div>
+          <Badge variant="outline" className="shrink-0 border-border bg-background text-[10px] text-muted-foreground">
+            {session.status}
+          </Badge>
+        </div>
+        <div className="mt-2 flex items-center gap-1.5 text-[11px] text-muted-foreground">
+          <Clock3 className="h-3 w-3" />
+          <span>{formatRelativeTime(session.updatedAt)}</span>
+          <span className="truncate">- {formatAction(session.lastAction)}</span>
+        </div>
+      </button>
+    );
+  };
+
+  const renderEmptyState = () => (
+    <div className="flex min-h-0 flex-1 items-center justify-center p-6">
+      <div className="w-full max-w-2xl rounded-md border border-border bg-card/40 p-5 shadow-sm">
+        <div className="flex items-start gap-3">
+          <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-md border border-border bg-background">
+            <MonitorPlay className="h-5 w-5 text-primary" />
+          </div>
+          <div className="min-w-0">
+            <div className="text-sm font-semibold text-foreground">
+              {status?.enabled ? 'No browser sessions yet' : 'Browser is disabled'}
+            </div>
+            <p className="mt-1 max-w-xl text-sm leading-6 text-muted-foreground">
+              {status?.enabled
+                ? 'Agent browser sessions appear here while an AI task is using Browser.'
+                : 'Enable Browser in settings to let agents open monitored browser sessions.'}
+            </p>
+          </div>
+        </div>
+
+        {needsBrowserBinaries && (
+          <div className="mt-4 rounded-md border border-border bg-muted/30 p-3">
+            <div className="text-sm font-medium text-foreground">Runtime setup required</div>
+            <p className="mt-1 text-sm text-muted-foreground">{status?.message}</p>
+            <Button
+              type="button"
+              size="sm"
+              className="mt-3"
+              onClick={installBrowserBinaries}
+              disabled={isBusy || isInstalling || status?.installInProgress}
+            >
+              {isInstalling || status?.installInProgress ? (
+                <Loader2 className="h-4 w-4 animate-spin" />
+              ) : (
+                <Download className="h-4 w-4" />
+              )}
+              {isInstalling || status?.installInProgress ? 'Installing...' : 'Install Runtime'}
+            </Button>
+          </div>
+        )}
+
+        <div className="mt-5 grid gap-2 sm:grid-cols-2">
+          {PROMPTS.map((prompt) => (
+            <div key={prompt} className="rounded-md border border-border/70 bg-background/70 p-3">
+              <div className="mb-2 flex items-center gap-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+                <Bot className="h-3.5 w-3.5" />
+                Prompt
+              </div>
+              <p className="text-sm leading-6 text-foreground">{prompt}</p>
+            </div>
+          ))}
+        </div>
+      </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="relative inline-block max-h-full">
+          <img
+            src={selectedSession.screenshotDataUrl}
+            alt="Browser session screenshot"
+            className={fullscreen ? 'block max-h-[80vh] w-auto max-w-full object-contain' : 'block max-h-[72vh] w-auto max-w-full object-contain'}
+          />
+          {cursorStyle && (
+            <div
+              className="pointer-events-none absolute h-5 w-5 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white/90 bg-primary/80 shadow-[0_0_0_6px_hsl(var(--primary)/0.18)]"
+              style={cursorStyle}
+            >
+              <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>
+          )}
+        </div>
+      ) : (
+        <div className="px-6 text-center">
+          <MonitorPlay className="mx-auto h-9 w-9 text-neutral-500" />
+          <div className="mt-3 text-sm font-medium text-neutral-100">{selectedSession?.message || 'Waiting for screenshot'}</div>
+          <p className="mt-1 text-xs text-neutral-400">The next agent browser snapshot will render here.</p>
+        </div>
+      )}
+    </div>
+  );
+
+  return (
+    <div className="flex h-full min-h-0 flex-col bg-background">
+      <div className="flex items-center justify-between gap-3 border-b border-border/60 px-4 py-3">
+        <div className="min-w-0">
+          <div className="flex items-center gap-2">
+            <MonitorPlay className="h-4 w-4 text-primary" />
+            <h3 className="text-sm font-semibold text-foreground">Browser</h3>
+            <Badge variant="outline" className={cn('text-[10px]', getRuntimeTone(status, isInstalling))}>
+              {runtimeLabel}
+            </Badge>
+          </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">
+          {onShowSettings && (
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-7 w-7 p-0"
+              onClick={() => onShowSettings('browser')}
+              title="Open Browser settings"
+              aria-label="Open Browser settings"
+            >
+              <Settings className="h-3.5 w-3.5" />
+            </Button>
+          )}
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-7 w-7 p-0"
+            onClick={() => void refresh()}
+            disabled={isRefreshing || isBusy}
+            title="Refresh browser sessions"
+            aria-label="Refresh browser sessions"
+          >
+            <RefreshCw className={cn('h-3.5 w-3.5', isRefreshing && 'animate-spin')} />
+          </Button>
+        </div>
+      </div>
+
+      {error && (
+        <div className="border-b border-destructive/20 bg-destructive/10 px-4 py-2 text-sm text-destructive">
+          {error}
+        </div>
+      )}
+
+      {sessions.length > 0 && (
+        <div className="border-b border-border/60 bg-muted/20 px-3 py-2 lg:hidden">
+          <div className="flex gap-2 overflow-x-auto">
+            {sessions.map((session) => (
+              <button
+                key={session.id}
+                type="button"
+                onClick={() => setSelectedSessionId(session.id)}
+                className={cn(
+                  'flex min-w-[180px] items-center gap-2 rounded-md border px-2.5 py-2 text-left',
+                  selectedSession?.id === session.id
+                    ? 'border-primary/40 bg-primary/5'
+                    : 'border-border bg-background',
+                )}
+              >
+                <span className={cn('h-1.5 w-1.5 shrink-0 rounded-full', getStatusDot(session.status))} />
+                <span className="min-w-0 flex-1 truncate text-xs font-medium text-foreground">
+                  {session.title || getDomain(session.url)}
+                </span>
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+
+      <div className="grid min-h-0 flex-1 grid-cols-1 lg:grid-cols-[minmax(0,1fr)_320px]">
+        <main className="flex min-h-0 flex-col overflow-hidden">
+          <div className="flex items-center justify-between gap-3 border-b border-border/60 bg-muted/20 px-4 py-2.5 text-xs text-muted-foreground">
+            <div className="min-w-0 truncate">
+              {activeSessions.length} active
+              <span className="px-1.5">/</span>
+              {sessions.length} total
+            </div>
+            <div className="min-w-0 truncate">
+              Updated {formatRelativeTime(selectedSession?.updatedAt || null)}
+            </div>
+          </div>
+
+          {sessions.length === 0 ? (
+            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">
+                <div className="flex flex-wrap items-center gap-2 border-b border-border/60 px-3 py-2">
+                  <Badge variant="outline" className={selectedSession ? cn('text-[10px]', getStatusTone(selectedSession.status)) : 'text-[10px]'}>
+                    {selectedSession?.status || 'empty'}
+                  </Badge>
+                  <div className="min-w-0 flex-1">
+                    <div className="truncate text-sm font-medium text-foreground">
+                      {selectedSession?.title || getDomain(selectedSession?.url || null)}
+                    </div>
+                    <div className="mt-0.5 flex min-w-0 items-center gap-1.5 text-xs text-muted-foreground">
+                      <ExternalLink className="h-3.5 w-3.5 shrink-0" />
+                      <span className="truncate">{selectedSession?.url || 'No page loaded'}</span>
+                    </div>
+                  </div>
+                  <div className="hidden text-xs text-muted-foreground md:block">
+                    {formatAction(selectedSession?.lastAction || null)}
+                  </div>
+                  <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="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">
+                    <Trash2 className="h-4 w-4" />
+                  </Button>
+                </div>
+                {renderBrowserSurface()}
+              </div>
+            </div>
+          )}
+        </main>
+
+        <aside className="hidden min-h-0 flex-col border-l border-border/60 bg-background lg:flex">
+          <div className="border-b border-border/60 px-4 py-3">
+            <div className="flex items-center justify-between gap-2">
+              <div>
+                <div className="text-sm font-semibold text-foreground">Sessions</div>
+                <div className="mt-0.5 text-xs text-muted-foreground">{sessions.length} total</div>
+              </div>
+              <Badge variant="outline" className="text-[10px]">{activeSessions.length} active</Badge>
+            </div>
+          </div>
+
+          <div className="min-h-0 flex-1 overflow-y-auto p-3">
+            {sessions.length > 0 ? (
+              <div className="space-y-2">{sessions.map(renderSessionItem)}</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.
+              </div>
+            )}
+          </div>
+
+          <div className="border-t border-border/60 p-3">
+            <div className="rounded-md border border-border/70 bg-muted/30 p-3">
+              <div className="flex items-center gap-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+                <Bot className="h-3.5 w-3.5" />
+                Selected
+              </div>
+              <div className="mt-3 space-y-2 text-xs text-muted-foreground">
+                <div className="flex items-center justify-between gap-3">
+                  <span>Status</span>
+                  <span className="font-medium text-foreground">{selectedSession?.status || 'None'}</span>
+                </div>
+                <div className="flex items-center justify-between gap-3">
+                  <span>Last action</span>
+                  <span className="truncate font-medium text-foreground">{formatAction(selectedSession?.lastAction || null)}</span>
+                </div>
+                <div className="flex items-center justify-between gap-3">
+                  <span>Profile</span>
+                  <span className="truncate font-medium text-foreground">{selectedSession?.profileName || 'Temporary'}</span>
+                </div>
+              </div>
+              <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" />
+                  Stop
+                </Button>
+                <Button variant="outline" size="sm" onClick={deleteSession} disabled={isBusy || !selectedSession}>
+                  <Trash2 className="h-4 w-4" />
+                  Delete
+                </Button>
+              </div>
+            </div>
+          </div>
+        </aside>
+      </div>
+
+      {isFullscreen && selectedSession && (
+        <div className="fixed inset-0 z-50 bg-black/90 p-6">
+          <div className="flex h-full flex-col rounded-md border border-white/10 bg-black">
+            <div className="flex items-center justify-between border-b border-white/10 px-4 py-3 text-sm text-white/80">
+              <div className="min-w-0 truncate">{selectedSession.title || selectedSession.url || 'Browser session'}</div>
+              <Button variant="outline" size="sm" onClick={() => setIsFullscreen(false)}>
+                <X className="h-4 w-4" />
+                Close
+              </Button>
+            </div>
+            {renderBrowserSurface(true)}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

src/components/chat/utils/chatFormatting.ts

@@ -11,7 +11,7 @@ export function decodeHtmlEntities(text: string) {
 export function normalizeInlineCodeFences(text: string) {
   if (!text || typeof text !== 'string') return text;
   try {
-    return text.replace(/```\s*([^\n\r]+?)\s*```/g, '`$1`');
+    return text.replace(/```[ \t]*([^\n\r]+?)[ \t]*```/g, '`$1`');
   } catch {
     return text;
   }

src/components/main-content/types/types.ts

@@ -7,6 +7,7 @@ import type {
   SessionActivityMap,
 } from '../../../hooks/useSessionProtection';
 import type { SessionEstablishedContext, SessionNavigationOptions } from '../../chat/types/types';
+import type { SettingsMainTab } from '../../settings/types/types';
 
 export type TaskMasterTask = {
   id: string | number;
@@ -53,7 +54,7 @@ export type MainContentProps = {
   processingSessions: SessionActivityMap;
   onNavigateToSession: (targetSessionId: string, options?: SessionNavigationOptions) => void;
   onSessionEstablished: (sessionId: string, context: SessionEstablishedContext) => void;
-  onShowSettings: () => void;
+  onShowSettings: (tab?: SettingsMainTab) => void;
   externalMessageUpdate: number;
   newSessionTrigger: number;
 };
@@ -64,6 +65,7 @@ export type MainContentHeaderProps = {
   selectedProject: Project;
   selectedSession: ProjectSession | null;
   shouldShowTasksTab: boolean;
+  shouldShowBrowserTab: boolean;
   isMobile: boolean;
   onMenuClick: () => void;
 };

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

@@ -1,15 +1,17 @@
-import React, { useEffect } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 
 import ChatInterface from '../../chat/view/ChatInterface';
 import FileTree from '../../file-tree/view/FileTree';
 import StandaloneShell from '../../standalone-shell/view/StandaloneShell';
 import GitPanel from '../../git-panel/view/GitPanel';
 import PluginTabContent from '../../plugins/view/PluginTabContent';
+import { BrowserUsePanel } from '../../browser-use';
 import type { MainContentProps } from '../types/types';
 import { useTaskMaster } from '../../../contexts/TaskMasterContext';
 import { usePaletteOpsRegister } from '../../../contexts/PaletteOpsContext';
 import { useTasksSettings } from '../../../contexts/TasksSettingsContext';
 import { useUiPreferences } from '../../../hooks/useUiPreferences';
+import { authenticatedFetch } from '../../../utils/api';
 import { useEditorSidebar } from '../../code-editor/hooks/useEditorSidebar';
 import EditorSidebar from '../../code-editor/view/EditorSidebar';
 import type { Project } from '../../../types/app';
@@ -55,8 +57,10 @@ function MainContent({
 
   const { currentProject, setCurrentProject } = useTaskMaster() as TaskMasterContextValue;
   const { tasksEnabled, isTaskMasterInstalled } = useTasksSettings() as TasksSettingsContextValue;
+  const [browserUseEnabled, setBrowserUseEnabled] = useState(false);
 
   const shouldShowTasksTab = Boolean(tasksEnabled && isTaskMasterInstalled);
+  const shouldShowBrowserTab = browserUseEnabled;
 
   const {
     editingFile,
@@ -90,6 +94,28 @@ function MainContent({
     }
   }, [shouldShowTasksTab, activeTab, setActiveTab]);
 
+  const loadBrowserUseSettings = useCallback(async () => {
+    try {
+      const response = await authenticatedFetch('/api/browser-use/settings');
+      const data = await response.json();
+      setBrowserUseEnabled(Boolean(response.ok && data?.success !== false && data?.data?.settings?.enabled));
+    } catch {
+      setBrowserUseEnabled(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void loadBrowserUseSettings();
+    window.addEventListener('browserUseSettingsChanged', loadBrowserUseSettings);
+    return () => window.removeEventListener('browserUseSettingsChanged', loadBrowserUseSettings);
+  }, [loadBrowserUseSettings]);
+
+  useEffect(() => {
+    if (!shouldShowBrowserTab && activeTab === 'browser') {
+      setActiveTab('chat');
+    }
+  }, [shouldShowBrowserTab, activeTab, setActiveTab]);
+
   usePaletteOpsRegister({
     openFile: (filePath: string) => {
       setActiveTab('files');
@@ -113,6 +139,7 @@ function MainContent({
         selectedProject={selectedProject}
         selectedSession={selectedSession}
         shouldShowTasksTab={shouldShowTasksTab}
+        shouldShowBrowserTab={shouldShowBrowserTab}
         isMobile={isMobile}
         onMenuClick={onMenuClick}
       />
@@ -171,7 +198,11 @@ function MainContent({
 
           {shouldShowTasksTab && <TaskMasterPanel isVisible={activeTab === 'tasks'} />}
 
-          <div className={`h-full overflow-hidden ${activeTab === 'preview' ? 'block' : 'hidden'}`} />
+          {shouldShowBrowserTab && activeTab === 'browser' && (
+            <div className="h-full overflow-hidden">
+              <BrowserUsePanel isVisible={activeTab === 'browser'} onShowSettings={onShowSettings} />
+            </div>
+          )}
 
           {activeTab.startsWith('plugin:') && (
             <div className="h-full overflow-hidden">

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

@@ -10,6 +10,7 @@ export default function MainContentHeader({
   selectedProject,
   selectedSession,
   shouldShowTasksTab,
+  shouldShowBrowserTab,
   isMobile,
   onMenuClick,
 }: MainContentHeaderProps) {
@@ -59,6 +60,7 @@ export default function MainContentHeader({
               activeTab={activeTab}
               setActiveTab={setActiveTab}
               shouldShowTasksTab={shouldShowTasksTab}
+              shouldShowBrowserTab={shouldShowBrowserTab}
             />
           </div>
           {canScrollRight && (

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

@@ -1,6 +1,7 @@
-import { MessageSquare, Terminal, Folder, GitBranch, ClipboardCheck, type LucideIcon } from 'lucide-react';
+import { MessageSquare, Terminal, Folder, GitBranch, ClipboardCheck, MonitorPlay, type LucideIcon } from 'lucide-react';
 import type { Dispatch, SetStateAction } from 'react';
 import { useTranslation } from 'react-i18next';
+
 import { Tooltip, PillBar, Pill } from '../../../../shared/view/ui';
 import type { AppTab } from '../../../../types/app';
 import { usePlugins } from '../../../../contexts/PluginsContext';
@@ -10,6 +11,7 @@ type MainContentTabSwitcherProps = {
   activeTab: AppTab;
   setActiveTab: Dispatch<SetStateAction<AppTab>>;
   shouldShowTasksTab: boolean;
+  shouldShowBrowserTab: boolean;
 };
 
 type BuiltInTab = {
@@ -36,6 +38,13 @@ const BASE_TABS: BuiltInTab[] = [
   { kind: 'builtin', id: 'git',   labelKey: 'tabs.git',   icon: GitBranch },
 ];
 
+const BROWSER_TAB: BuiltInTab = {
+  kind: 'builtin',
+  id: 'browser',
+  labelKey: 'tabs.browser',
+  icon: MonitorPlay,
+};
+
 const TASKS_TAB: BuiltInTab = {
   kind: 'builtin',
   id: 'tasks',
@@ -47,11 +56,16 @@ export default function MainContentTabSwitcher({
   activeTab,
   setActiveTab,
   shouldShowTasksTab,
+  shouldShowBrowserTab,
 }: MainContentTabSwitcherProps) {
   const { t } = useTranslation();
   const { plugins } = usePlugins();
 
-  const builtInTabs: BuiltInTab[] = shouldShowTasksTab ? [...BASE_TABS, TASKS_TAB] : BASE_TABS;
+  const builtInTabs: BuiltInTab[] = [
+    ...BASE_TABS,
+    ...(shouldShowBrowserTab ? [BROWSER_TAB] : []),
+    ...(shouldShowTasksTab ? [TASKS_TAB] : []),
+  ];
 
   const pluginTabs: PluginTab[] = plugins
     .filter((p) => p.enabled)

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

@@ -1,4 +1,5 @@
 import { useTranslation } from 'react-i18next';
+
 import SessionProviderLogo from '../../../llm-logo-provider/SessionProviderLogo';
 import type { AppTab, Project, ProjectSession } from '../../../../types/app';
 import { usePlugins } from '../../../../contexts/PluginsContext';
@@ -27,6 +28,10 @@ function getTabTitle(activeTab: AppTab, shouldShowTasksTab: boolean, t: (key: st
     return 'TaskMaster';
   }
 
+  if (activeTab === 'browser') {
+    return 'Browser';
+  }
+
   return 'Project';
 }
 

src/components/mcp/view/McpServers.tsx

@@ -52,6 +52,11 @@ const getServerKey = (server: ProviderMcpServer): string => (
   `${server.provider}:${server.scope}:${server.workspacePath || 'global'}:${server.name}`
 );
 
+// Servers prefixed with `cloudcli-` are written and removed automatically by a
+// CloudCLI feature toggle (e.g. the Browser tab), not added by the user. They are
+// shown read-only so users don't edit/delete them out of sync with the feature.
+const isManagedServer = (server: ProviderMcpServer): boolean => server.name.startsWith('cloudcli-');
+
 function ConfigLine({ label, children }: { label: string; children: string }) {
   if (!children) {
     return null;
@@ -177,65 +182,92 @@ export default function McpServers({ selectedProvider, currentProjects }: McpSer
           <div className="py-8 text-center text-muted-foreground">Loading MCP servers...</div>
         )}
 
-        {servers.map((server) => (
+        {servers.map((server) => {
-          <div key={getServerKey(server)} className="rounded-lg border border-border bg-card/50 p-4">
+          const managed = isManagedServer(server);
-            <div className="flex items-start justify-between">
+
-              <div className="min-w-0 flex-1">
+          return (
-                <div className="mb-2 flex flex-wrap items-center gap-2">
+            <div key={getServerKey(server)} className="rounded-lg border border-border bg-card/50 p-4">
-                  {getTransportIcon(server.transport)}
+              <div className="flex items-start justify-between">
-                  <span className="font-medium text-foreground">{server.name}</span>
+                <div className="min-w-0 flex-1">
-                  <Badge variant="outline" className="text-xs">
+                  <div className="mb-2 flex flex-wrap items-center gap-2">
-                    {server.transport || 'stdio'}
+                    {!managed && getTransportIcon(server.transport)}
-                  </Badge>
+                    <span className="font-medium text-foreground">{server.name}</span>
-                  <Badge variant="outline" className="text-xs">
+                    {!managed && (
-                    {getScopeLabel(server.scope)}
+                      <>
-                  </Badge>
+                        <Badge variant="outline" className="text-xs">
-                  {server.projectDisplayName && (
+                          {server.transport || 'stdio'}
-                    <Badge variant="outline" className="max-w-full truncate text-xs">
+                        </Badge>
-                      {server.projectDisplayName}
+                        <Badge variant="outline" className="text-xs">
-                    </Badge>
+                          {getScopeLabel(server.scope)}
-                  )}
+                        </Badge>
+                        {server.projectDisplayName && (
+                          <Badge variant="outline" className="max-w-full truncate text-xs">
+                            {server.projectDisplayName}
+                          </Badge>
+                        )}
+                      </>
+                    )}
+                    {managed && (
+                      <Badge variant="outline" className="gap-1 text-xs text-muted-foreground">
+                        <Lock className="h-3 w-3" />
+                        {t('mcpServers.managed.badge', { defaultValue: 'Managed' })}
+                      </Badge>
+                    )}
+                  </div>
+
+                  <div className="space-y-1 text-sm text-muted-foreground">
+                    {!managed && (
+                      <>
+                        <ConfigLine label={t('mcpServers.config.command')}>{server.command || ''}</ConfigLine>
+                        <ConfigLine label={t('mcpServers.config.url')}>{server.url || ''}</ConfigLine>
+                        <ConfigLine label={t('mcpServers.config.args')}>{(server.args || []).join(' ')}</ConfigLine>
+                        <ConfigLine label="Cwd">{server.cwd || ''}</ConfigLine>
+                        {server.env && Object.keys(server.env).length > 0 && (
+                          <ConfigLine label={t('mcpServers.config.environment')}>
+                            {Object.entries(server.env).map(([key, value]) => `${key}=${maskSecret(value)}`).join(', ')}
+                          </ConfigLine>
+                        )}
+                        {server.envVars && server.envVars.length > 0 && (
+                          <ConfigLine label="Env Vars">{server.envVars.join(', ')}</ConfigLine>
+                        )}
+                      </>
+                    )}
+                    {managed && (
+                      <div className="text-xs text-muted-foreground">
+                        {t('mcpServers.managed.hint', {
+                          defaultValue: 'Managed by CloudCLI.',
+                        })}
+                      </div>
+                    )}
+                  </div>
                 </div>
 
-                <div className="space-y-1 text-sm text-muted-foreground">
+                {!managed && (
-                  <ConfigLine label={t('mcpServers.config.command')}>{server.command || ''}</ConfigLine>
+                  <div className="ml-4 flex items-center gap-2">
-                  <ConfigLine label={t('mcpServers.config.url')}>{server.url || ''}</ConfigLine>
+                    <Button
-                  <ConfigLine label={t('mcpServers.config.args')}>{(server.args || []).join(' ')}</ConfigLine>
+                      onClick={() => openForm(server)}
-                  <ConfigLine label="Cwd">{server.cwd || ''}</ConfigLine>
+                      variant="ghost"
-                  {server.env && Object.keys(server.env).length > 0 && (
+                      size="sm"
-                    <ConfigLine label={t('mcpServers.config.environment')}>
+                      className="text-muted-foreground hover:text-foreground"
-                      {Object.entries(server.env).map(([key, value]) => `${key}=${maskSecret(value)}`).join(', ')}
+                      title={t('mcpServers.actions.edit')}
-                    </ConfigLine>
+                    >
-                  )}
+                      <Edit3 className="h-4 w-4" />
-                  {server.envVars && server.envVars.length > 0 && (
+                    </Button>
-                    <ConfigLine label="Env Vars">{server.envVars.join(', ')}</ConfigLine>
+                    <Button
-                  )}
+                      onClick={() => deleteServer(server)}
-                </div>
+                      variant="ghost"
-              </div>
+                      size="sm"
-
+                      className="text-red-600 hover:text-red-700"
-              <div className="ml-4 flex items-center gap-2">
+                      title={t('mcpServers.actions.delete')}
-                <Button
+                    >
-                  onClick={() => openForm(server)}
+                      <Trash2 className="h-4 w-4" />
-                  variant="ghost"
+                    </Button>
-                  size="sm"
+                  </div>
-                  className="text-muted-foreground hover:text-foreground"
+                )}
-                  title={t('mcpServers.actions.edit')}
-                >
-                  <Edit3 className="h-4 w-4" />
-                </Button>
-                <Button
-                  onClick={() => deleteServer(server)}
-                  variant="ghost"
-                  size="sm"
-                  className="text-red-600 hover:text-red-700"
-                  title={t('mcpServers.actions.delete')}
-                >
-                  <Trash2 className="h-4 w-4" />
-                </Button>
               </div>
             </div>
-          </div>
+          );
-        ))}
+        })}
 
         {!isLoading && !isLoadingProjectScopes && servers.length === 0 && (
           <div className="py-8 text-center text-muted-foreground">{t('mcpServers.empty')}</div>

src/components/settings/constants/constants.ts

@@ -6,6 +6,7 @@ import {
   Info,
   KeyRound,
   ListChecks,
+  MonitorPlay,
   Palette,
   Plug,
 } from 'lucide-react';
@@ -32,6 +33,7 @@ export const SETTINGS_MAIN_TABS: SettingsMainTabMeta[] = [
   { id: 'git', label: 'Git', keywords: 'git github commits', icon: GitBranch },
   { id: 'api', label: 'API Tokens', keywords: 'api tokens auth keys', icon: KeyRound },
   { id: 'tasks', label: 'Tasks', keywords: 'tasks taskmaster', icon: ListChecks },
+  { id: 'browser', label: 'Browser', keywords: 'browser playwright chromium automation', icon: MonitorPlay },
   { id: 'notifications', label: 'Notifications', keywords: 'notifications alerts push', icon: Bell },
   { id: 'plugins', label: 'Plugins', keywords: 'plugins extensions integrations', icon: Plug },
   { id: 'about', label: 'About', keywords: 'about version info', icon: Info },

src/components/settings/hooks/useSettingsController.ts

@@ -54,7 +54,7 @@ type NotificationPreferencesResponse = {
 
 type ActiveLoginProvider = AgentProvider | '';
 
-const KNOWN_MAIN_TABS: SettingsMainTab[] = ['agents', 'appearance', 'git', 'api', 'tasks', 'notifications', 'plugins'];
+const KNOWN_MAIN_TABS: SettingsMainTab[] = ['agents', 'appearance', 'git', 'api', 'tasks', 'browser', 'notifications', 'plugins', 'about'];
 
 const normalizeMainTab = (tab: string): SettingsMainTab => {
   // Keep backwards compatibility with older callers that still pass "tools".

src/components/settings/types/types.ts

@@ -3,9 +3,9 @@ import type { Dispatch, SetStateAction } from 'react';
 import type { LLMProvider } from '../../../types/app';
 import type { ProviderAuthStatus } from '../../provider-auth/types';
 
-export type SettingsMainTab = 'agents' | 'appearance' | 'git' | 'api' | 'tasks' | 'notifications' | 'plugins' | 'about';
+export type SettingsMainTab = 'agents' | 'appearance' | 'git' | 'api' | 'tasks' | 'browser' | 'notifications' | 'plugins' | 'about';
 export type AgentProvider = LLMProvider;
-export type AgentCategory = 'account' | 'permissions' | 'mcp';
+export type AgentCategory = 'account' | 'permissions' | 'mcp' | 'skills';
 export type ProjectSortOrder = 'name' | 'date';
 export type SaveStatus = 'success' | 'error' | null;
 export type CodexPermissionMode = 'default' | 'acceptEdits' | 'bypassPermissions';

src/components/settings/view/Settings.tsx

@@ -1,5 +1,6 @@
 import { X } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
+
 import ProviderLoginModal from '../../provider-auth/view/ProviderLoginModal';
 import { Button } from '../../../shared/view/ui';
 import SettingsSidebar from '../view/SettingsSidebar';
@@ -7,6 +8,7 @@ import AgentsSettingsTab from '../view/tabs/agents-settings/AgentsSettingsTab';
 import AppearanceSettingsTab from '../view/tabs/AppearanceSettingsTab';
 import CredentialsSettingsTab from '../view/tabs/api-settings/CredentialsSettingsTab';
 import GitSettingsTab from '../view/tabs/git-settings/GitSettingsTab';
+import BrowserUseSettingsTab from '../view/tabs/browser-use-settings/BrowserUseSettingsTab';
 import NotificationsSettingsTab from '../view/tabs/NotificationsSettingsTab';
 import TasksSettingsTab from '../view/tabs/tasks-settings/TasksSettingsTab';
 import PluginSettingsTab from '../../plugins/view/PluginSettingsTab';
@@ -100,12 +102,12 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }: Set
         </div>
 
         {/* Body: sidebar + content */}
-        <div className="flex min-h-0 flex-1 flex-col md:flex-row">
+        <div className="flex min-h-0 min-w-0 flex-1 flex-col md:flex-row">
           <SettingsSidebar activeTab={activeTab} onChange={setActiveTab} />
 
           {/* Content */}
-          <main className="flex-1 overflow-y-auto">
+          <main className="min-w-0 flex-1 overflow-y-auto overflow-x-hidden">
-            <div key={activeTab} className="settings-content-enter space-y-6 p-4 pb-safe-area-inset-bottom md:space-y-8 md:p-6">
+            <div key={activeTab} className="settings-content-enter min-w-0 space-y-6 overflow-x-hidden p-4 pb-safe-area-inset-bottom md:space-y-8 md:p-6">
               {activeTab === 'appearance' && (
                 <AppearanceSettingsTab
                   projectSortOrder={projectSortOrder}
@@ -139,17 +141,19 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }: Set
 
               {activeTab === 'tasks' && <TasksSettingsTab />}
 
-            {activeTab === 'notifications' && (
+              {activeTab === 'browser' && <BrowserUseSettingsTab />}
-              <NotificationsSettingsTab
+
-                notificationPreferences={notificationPreferences}
+              {activeTab === 'notifications' && (
-                onNotificationPreferencesChange={setNotificationPreferences}
+                <NotificationsSettingsTab
-                pushPermission={pushPermission}
+                  notificationPreferences={notificationPreferences}
-                isPushSubscribed={isPushSubscribed}
+                  onNotificationPreferencesChange={setNotificationPreferences}
-                isPushLoading={isPushLoading}
+                  pushPermission={pushPermission}
-                onEnablePush={handleEnablePush}
+                  isPushSubscribed={isPushSubscribed}
-                onDisablePush={handleDisablePush}
+                  isPushLoading={isPushLoading}
-              />
+                  onEnablePush={handleEnablePush}
-            )}
+                  onDisablePush={handleDisablePush}
+                />
+              )}
 
               {activeTab === 'api' && <CredentialsSettingsTab />}
 

src/components/settings/view/SettingsSidebar.tsx

@@ -1,4 +1,4 @@
-import { Bell, Bot, GitBranch, Info, Key, ListChecks, Palette, Puzzle } from 'lucide-react';
+import { Bell, Bot, GitBranch, Info, Key, ListChecks, MonitorPlay, Palette, Puzzle } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { cn } from '../../../lib/utils';
 import { PillBar, Pill } from '../../../shared/view/ui';
@@ -21,6 +21,7 @@ const NAV_ITEMS: NavItem[] = [
   { id: 'git', labelKey: 'mainTabs.git', icon: GitBranch },
   { id: 'api', labelKey: 'mainTabs.apiTokens', icon: Key },
   { id: 'tasks', labelKey: 'mainTabs.tasks', icon: ListChecks },
+  { id: 'browser', labelKey: 'mainTabs.browser', icon: MonitorPlay },
   { id: 'plugins', labelKey: 'mainTabs.plugins', icon: Puzzle },
   { id: 'notifications', labelKey: 'mainTabs.notifications', icon: Bell },
   { id: 'about', labelKey: 'mainTabs.about', icon: Info },

src/components/settings/view/tabs/agents-settings/AgentsSettingsTab.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 import type { AgentCategory, AgentProvider } from '../../../types/types';
 
@@ -22,6 +22,11 @@ export default function AgentsSettingsTab({
 }: AgentsSettingsTabProps) {
   const [selectedAgent, setSelectedAgent] = useState<AgentProvider>('claude');
   const [selectedCategory, setSelectedCategory] = useState<AgentCategory>('account');
+  const visibleCategories = useMemo<AgentCategory[]>(() => (
+    selectedAgent === 'opencode'
+      ? ['account', 'permissions', 'mcp']
+      : ['account', 'permissions', 'mcp', 'skills']
+  ), [selectedAgent]);
 
   const visibleAgents = useMemo<AgentProvider[]>(() => {
     return ['claude', 'cursor', 'codex', 'gemini', 'opencode'];
@@ -57,8 +62,14 @@ export default function AgentsSettingsTab({
     providerAuthStatus.opencode,
   ]);
 
+  useEffect(() => {
+    if (!visibleCategories.includes(selectedCategory)) {
+      setSelectedCategory(visibleCategories[0] ?? 'account');
+    }
+  }, [selectedCategory, visibleCategories]);
+
   return (
-    <div className="-mx-4 -mb-4 -mt-2 flex min-h-[300px] flex-col overflow-hidden md:-mx-6 md:-mb-6 md:-mt-2 md:min-h-[500px]">
+    <div className="-mx-4 -mb-4 -mt-2 flex min-h-[300px] min-w-0 flex-col overflow-hidden md:-mx-6 md:-mb-6 md:-mt-2 md:min-h-[500px]">
       <AgentSelectorSection
         agents={visibleAgents}
         selectedAgent={selectedAgent}
@@ -66,8 +77,10 @@ export default function AgentsSettingsTab({
         agentContextById={agentContextById}
       />
 
-      <div className="flex flex-1 flex-col overflow-hidden">
+      <div className="flex min-w-0 flex-1 flex-col overflow-hidden">
         <AgentCategoryTabsSection
+          categories={visibleCategories}
+          selectedAgent={selectedAgent}
           selectedCategory={selectedCategory}
           onSelectCategory={setSelectedCategory}
         />

src/components/settings/view/tabs/agents-settings/sections/AgentCategoryContentSection.tsx

@@ -1,6 +1,8 @@
 import type { AgentCategoryContentSectionProps } from '../types';
 import type { McpProject } from '../../../../../mcp/types';
 import { McpServers } from '../../../../../mcp';
+import type { SkillsProject } from '../../../../../skills/types';
+import { ProviderSkills } from '../../../../../skills';
 
 import AccountContent from './content/AccountContent';
 import PermissionsContent from './content/PermissionsContent';
@@ -18,7 +20,7 @@ export default function AgentCategoryContentSection({
   projects,
 }: AgentCategoryContentSectionProps) {
   return (
-    <div className="flex-1 overflow-y-auto p-3 md:p-4">
+    <div className="min-w-0 flex-1 overflow-y-auto overflow-x-hidden p-3 md:p-4">
       {selectedCategory === 'account' && (
         <AccountContent
           agent={selectedAgent}
@@ -84,6 +86,18 @@ export default function AgentCategoryContentSection({
           }))}
         />
       )}
+
+      {selectedCategory === 'skills' && selectedAgent !== 'opencode' && (
+        <ProviderSkills
+          selectedProvider={selectedAgent}
+          currentProjects={projects.map<SkillsProject>((project) => ({
+            projectId: project.name,
+            displayName: project.displayName,
+            fullPath: project.fullPath,
+            path: project.path,
+          }))}
+        />
+      )}
     </div>
   );
 }

src/components/settings/view/tabs/agents-settings/sections/AgentCategoryTabsSection.tsx

@@ -1,11 +1,11 @@
 import { useTranslation } from 'react-i18next';
+
 import { cn } from '../../../../../../lib/utils';
-import type { AgentCategory } from '../../../../types/types';
 import type { AgentCategoryTabsSectionProps } from '../types';
 
-const AGENT_CATEGORIES: AgentCategory[] = ['account', 'permissions', 'mcp'];
-
 export default function AgentCategoryTabsSection({
+  categories,
+  selectedAgent,
   selectedCategory,
   onSelectCategory,
 }: AgentCategoryTabsSectionProps) {
@@ -14,7 +14,7 @@ export default function AgentCategoryTabsSection({
   return (
     <div className="flex-shrink-0 border-b border-border">
       <div role="tablist" className="flex overflow-x-auto px-2 md:px-4">
-        {AGENT_CATEGORIES.map((category) => (
+        {categories.map((category) => (
           <button
             key={category}
             role="tab"
@@ -30,6 +30,9 @@ export default function AgentCategoryTabsSection({
             {category === 'account' && t('tabs.account')}
             {category === 'permissions' && t('tabs.permissions')}
             {category === 'mcp' && t('tabs.mcpServers')}
+            {category === 'skills' && t('tabs.skills', {
+              defaultValue: selectedAgent === 'opencode' ? 'Shared Skills' : 'Skills',
+            })}
           </button>
         ))}
       </div>

src/components/settings/view/tabs/agents-settings/types.ts

@@ -32,6 +32,8 @@ export type AgentsSettingsTabProps = {
 };
 
 export type AgentCategoryTabsSectionProps = {
+  categories: AgentCategory[];
+  selectedAgent: AgentProvider;
   selectedCategory: AgentCategory;
   onSelectCategory: (category: AgentCategory) => void;
 };

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

@@ -0,0 +1,185 @@
+import { useCallback, useEffect, useState } from 'react';
+import { Download, Loader2 } from 'lucide-react';
+
+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';
+
+type BrowserUseSettings = {
+  enabled: boolean;
+};
+
+type BrowserUseStatus = {
+  enabled: boolean;
+  available: boolean;
+  playwrightInstalled: boolean;
+  chromiumInstalled: boolean;
+  installInProgress: boolean;
+  message: string;
+};
+
+async function readJson<T>(response: Response): Promise<T> {
+  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;
+}
+
+export default function BrowserUseSettingsTab() {
+  const [settings, setSettings] = useState<BrowserUseSettings | null>(null);
+  const [status, setStatus] = useState<BrowserUseStatus | null>(null);
+  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 loadSettings = useCallback(async () => {
+    const settingsResponse = await authenticatedFetch('/api/browser-use/settings');
+    const settingsData = await readJson<{ data: { settings: BrowserUseSettings } }>(settingsResponse);
+    setSettings(settingsData.data.settings);
+  }, []);
+
+  const loadStatus = useCallback(async () => {
+    const statusResponse = await authenticatedFetch('/api/browser-use/status');
+    const statusData = await readJson<{ data: BrowserUseStatus }>(statusResponse);
+    setStatus(statusData.data);
+  }, []);
+
+  useEffect(() => {
+    setError(null);
+    setIsSettingsLoading(true);
+    setIsStatusLoading(true);
+
+    void loadSettings()
+      .catch((err) => setError(err instanceof Error ? err.message : 'Failed to load Browser settings'))
+      .finally(() => setIsSettingsLoading(false));
+
+    void loadStatus()
+      .catch((err) => setError(err instanceof Error ? err.message : 'Failed to load Browser status'))
+      .finally(() => setIsStatusLoading(false));
+  }, [loadSettings, loadStatus]);
+
+  const updateSettings = async (nextSettings: Partial<BrowserUseSettings>) => {
+    setIsSaving(true);
+    setError(null);
+    try {
+      const response = await authenticatedFetch('/api/browser-use/settings', {
+        method: 'PUT',
+        body: JSON.stringify(nextSettings),
+      });
+      const data = await readJson<{ data: { settings: BrowserUseSettings } }>(response);
+      setSettings(data.data.settings);
+      window.dispatchEvent(new Event('browserUseSettingsChanged'));
+      setIsStatusLoading(true);
+      await loadStatus();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to save Browser settings');
+    } finally {
+      setIsStatusLoading(false);
+      setIsSaving(false);
+    }
+  };
+
+  const installBrowserBinaries = async () => {
+    setIsInstalling(true);
+    setError(null);
+    try {
+      const response = await authenticatedFetch('/api/browser-use/runtime/install', { method: 'POST' });
+      await readJson(response);
+      setIsStatusLoading(true);
+      await loadStatus();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to install browser runtime');
+    } finally {
+      setIsStatusLoading(false);
+      setIsInstalling(false);
+    }
+  };
+
+  const browserEnabled = settings?.enabled === true;
+  const needsBrowserBinaries = Boolean(browserEnabled && status && (!status.playwrightInstalled || !status.chromiumInstalled));
+  const runtimeLabel = (installed?: boolean) => {
+    if (isStatusLoading && !status) {
+      return 'checking...';
+    }
+    return installed ? 'installed' : 'missing';
+  };
+
+  return (
+    <div className="space-y-8">
+      <SettingsSection
+        title="Browser"
+        description="Allow agents to create guarded Playwright browser sessions that you can monitor from the Browser tab."
+      >
+        <SettingsCard divided>
+          <SettingsRow
+            label="Enable Browser"
+            description="Registers Browser for supported agents. Agents can create browser sessions; you can watch, stop, and delete them."
+          >
+            {isSettingsLoading && !settings ? (
+              <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+            ) : (
+              <SettingsToggle
+                checked={browserEnabled}
+                onChange={(value) => void updateSettings({ enabled: value })}
+                ariaLabel="Enable Browser"
+                disabled={isSaving}
+              />
+            )}
+          </SettingsRow>
+
+          <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">
+                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">
+                Status: {isStatusLoading && !status ? 'checking...' : status?.available ? 'ready' : browserEnabled ? 'setup required' : 'disabled'}
+              </span>
+            </div>
+
+            {needsBrowserBinaries && (
+              <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+                <div className="min-w-0 space-y-1">
+                  <div className="text-sm font-medium text-foreground">Browser runtime required</div>
+                  <p className="text-sm text-muted-foreground">
+                    {status?.message || 'Install the browser runtime before agents can create Browser sessions.'}
+                  </p>
+                </div>
+
+                <Button
+                  type="button"
+                  size="sm"
+                  onClick={() => void installBrowserBinaries()}
+                  disabled={isInstalling || status?.installInProgress}
+                  className="flex-shrink-0"
+                >
+                  {isInstalling || status?.installInProgress ? (
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                  ) : (
+                    <Download className="h-4 w-4" />
+                  )}
+                  {isInstalling || status?.installInProgress ? 'Installing...' : 'Install Runtime'}
+                </Button>
+              </div>
+            )}
+
+            {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/Sidebar.tsx

@@ -43,7 +43,7 @@ function Sidebar({
 }: SidebarProps) {
   const { t } = useTranslation(['sidebar', 'common']);
   const { isPWA } = useDeviceSettings({ trackMobile: false });
-  const { updateAvailable, latestVersion, currentVersion, releaseInfo, installMode } = useVersionCheck(
+  const { updateAvailable, restartRequired, latestVersion, currentVersion, releaseInfo, installMode } = useVersionCheck(
     'siteboon',
     'claudecodeui',
   );
@@ -224,6 +224,7 @@ function Sidebar({
           onExpand={handleExpandSidebar}
           onShowSettings={onShowSettings}
           updateAvailable={updateAvailable}
+          restartRequired={restartRequired}
           onShowVersionModal={() => setShowVersionModal(true)}
           t={t}
         />
@@ -296,6 +297,7 @@ function Sidebar({
             onCreateProject={() => setShowNewProject(true)}
             onCollapseSidebar={handleCollapseSidebar}
             updateAvailable={updateAvailable}
+            restartRequired={restartRequired}
             releaseInfo={releaseInfo}
             latestVersion={latestVersion}
             currentVersion={currentVersion}

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

@@ -1,4 +1,4 @@
-import { Settings, Sparkles, PanelLeftOpen, Bug } from 'lucide-react';
+import { Settings, Sparkles, PanelLeftOpen, Bug, AlertTriangle } from 'lucide-react';
 import type { TFunction } from 'i18next';
 
 const DISCORD_INVITE_URL = 'https://discord.gg/buxwujPNRE';
@@ -16,6 +16,7 @@ type SidebarCollapsedProps = {
   onExpand: () => void;
   onShowSettings: () => void;
   updateAvailable: boolean;
+  restartRequired: boolean;
   onShowVersionModal: () => void;
   t: TFunction;
 };
@@ -24,6 +25,7 @@ export default function SidebarCollapsed({
   onExpand,
   onShowSettings,
   updateAvailable,
+  restartRequired,
   onShowVersionModal,
   t,
 }: SidebarCollapsedProps) {
@@ -75,6 +77,18 @@ export default function SidebarCollapsed({
         <DiscordIcon className="h-4 w-4 text-muted-foreground transition-colors group-hover:text-foreground" />
       </a>
 
+      {/* Restart-required indicator */}
+      {restartRequired && (
+        <div
+          className="relative flex h-8 w-8 items-center justify-center rounded-lg"
+          aria-label={t('version.restartRequired')}
+          title={t('version.restartRequired')}
+        >
+          <AlertTriangle className="h-4 w-4 text-amber-500" />
+          <span className="absolute right-1.5 top-1.5 h-1.5 w-1.5 animate-pulse rounded-full bg-amber-500" />
+        </div>
+      )}
+
       {/* Update indicator */}
       {updateAvailable && (
         <button

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

@@ -141,6 +141,7 @@ type SidebarContentProps = {
   onCreateProject: () => void;
   onCollapseSidebar: () => void;
   updateAvailable: boolean;
+  restartRequired: boolean;
   releaseInfo: ReleaseInfo | null;
   latestVersion: string | null;
   currentVersion: string;
@@ -178,6 +179,7 @@ export default function SidebarContent({
   onCreateProject,
   onCollapseSidebar,
   updateAvailable,
+  restartRequired,
   releaseInfo,
   latestVersion,
   currentVersion,
@@ -553,6 +555,7 @@ export default function SidebarContent({
 
       <SidebarFooter
         updateAvailable={updateAvailable}
+        restartRequired={restartRequired}
         releaseInfo={releaseInfo}
         latestVersion={latestVersion}
         currentVersion={currentVersion}

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

@@ -1,4 +1,4 @@
-import { Settings, ArrowUpCircle, Bug } from 'lucide-react';
+import { Settings, ArrowUpCircle, Bug, AlertTriangle } from 'lucide-react';
 import type { TFunction } from 'i18next';
 import { IS_PLATFORM } from '../../../../constants/config';
 import type { ReleaseInfo } from '../../../../types/sharedTypes';
@@ -18,6 +18,7 @@ function DiscordIcon({ className }: { className?: string }) {
 
 type SidebarFooterProps = {
   updateAvailable: boolean;
+  restartRequired: boolean;
   releaseInfo: ReleaseInfo | null;
   latestVersion: string | null;
   currentVersion: string;
@@ -28,6 +29,7 @@ type SidebarFooterProps = {
 
 export default function SidebarFooter({
   updateAvailable,
+  restartRequired,
   releaseInfo,
   latestVersion,
   currentVersion,
@@ -37,6 +39,22 @@ export default function SidebarFooter({
 }: SidebarFooterProps) {
   return (
     <div className="flex-shrink-0" style={{ paddingBottom: 'env(safe-area-inset-bottom, 0)' }}>
+      {/* Restart-required banner: the running server version differs from the
+          installed/frontend version (updated but not restarted). */}
+      {restartRequired && (
+        <>
+          <div className="nav-divider" />
+          <div className="px-2 py-1.5 md:px-2 md:py-1.5">
+            <div className="flex items-center gap-2.5 rounded-lg border border-amber-300/60 bg-amber-50/80 px-2.5 py-2 dark:border-amber-700/40 dark:bg-amber-900/15">
+              <AlertTriangle className="h-4 w-4 flex-shrink-0 text-amber-500 dark:text-amber-400" />
+              <span className="min-w-0 flex-1 text-xs font-medium text-amber-700 dark:text-amber-300">
+                {t('version.restartRequired')}
+              </span>
+            </div>
+          </div>
+        </>
+      )}
+
       {/* Update banner */}
       {updateAvailable && (
         <>
@@ -69,7 +87,7 @@ export default function SidebarFooter({
               onClick={onShowVersionModal}
             >
               <div className="relative flex-shrink-0">
-                <ArrowUpCircle className="w-4.5 h-4.5 text-blue-500 dark:text-blue-400" />
+                <ArrowUpCircle className="h-4 w-4 text-blue-500 dark:text-blue-400" />
                 <span className="absolute -right-0.5 -top-0.5 h-1.5 w-1.5 animate-pulse rounded-full bg-blue-500" />
               </div>
               <div className="min-w-0 flex-1 text-left">
@@ -145,12 +163,12 @@ export default function SidebarFooter({
           href={GITHUB_ISSUES_URL}
           target="_blank"
           rel="noopener noreferrer"
-          className="flex h-12 w-full items-center gap-3.5 rounded-xl bg-muted/40 px-4 transition-all hover:bg-muted/60 active:scale-[0.98]"
+          className="flex h-10 w-full items-center gap-3 rounded-xl bg-muted/40 px-3.5 transition-all hover:bg-muted/60 active:scale-[0.98]"
         >
-          <div className="flex h-8 w-8 items-center justify-center rounded-xl bg-background/80">
+          <div className="flex h-7 w-7 items-center justify-center rounded-lg bg-background/80">
-            <Bug className="w-4.5 h-4.5 text-muted-foreground" />
+            <Bug className="h-4 w-4 text-muted-foreground" />
           </div>
-          <span className="text-base font-medium text-foreground">{t('actions.reportIssue')}</span>
+          <span className="text-sm font-medium text-foreground">{t('actions.reportIssue')}</span>
         </a>
       </div>
 
@@ -160,25 +178,25 @@ export default function SidebarFooter({
           href={DISCORD_INVITE_URL}
           target="_blank"
           rel="noopener noreferrer"
-          className="flex h-12 w-full items-center gap-3.5 rounded-xl bg-muted/40 px-4 transition-all hover:bg-muted/60 active:scale-[0.98]"
+          className="flex h-10 w-full items-center gap-3 rounded-xl bg-muted/40 px-3.5 transition-all hover:bg-muted/60 active:scale-[0.98]"
         >
-          <div className="flex h-8 w-8 items-center justify-center rounded-xl bg-background/80">
+          <div className="flex h-7 w-7 items-center justify-center rounded-lg bg-background/80">
-            <DiscordIcon className="w-4.5 h-4.5 text-muted-foreground" />
+            <DiscordIcon className="h-4 w-4 text-muted-foreground" />
           </div>
-          <span className="text-base font-medium text-foreground">{t('actions.joinCommunity')}</span>
+          <span className="text-sm font-medium text-foreground">{t('actions.joinCommunity')}</span>
         </a>
       </div>
 
       {/* Mobile settings */}
       <div className="px-3 pb-3 pt-2 md:hidden">
         <button
-          className="flex h-12 w-full items-center gap-3.5 rounded-xl bg-muted/40 px-4 transition-all hover:bg-muted/60 active:scale-[0.98]"
+          className="flex h-10 w-full items-center gap-3 rounded-xl bg-muted/40 px-3.5 transition-all hover:bg-muted/60 active:scale-[0.98]"
           onClick={onShowSettings}
         >
-          <div className="flex h-8 w-8 items-center justify-center rounded-xl bg-background/80">
+          <div className="flex h-7 w-7 items-center justify-center rounded-lg bg-background/80">
-            <Settings className="w-4.5 h-4.5 text-muted-foreground" />
+            <Settings className="h-4 w-4 text-muted-foreground" />
           </div>
-          <span className="text-base font-medium text-foreground">{t('actions.settings')}</span>
+          <span className="text-sm font-medium text-foreground">{t('actions.settings')}</span>
         </button>
       </div>
     </div>

src/components/skills/hooks/useProviderSkills.ts

@@ -0,0 +1,348 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import { authenticatedFetch } from '../../../utils/api';
+import type {
+  ApiResponse,
+  ProviderSkill,
+  ProviderSkillCreatePayload,
+  ProviderSkillsResponse,
+  SkillsProject,
+  SkillsProvider,
+  SkillsScope,
+} from '../types';
+
+type SkillsCacheEntry = {
+  skills: ProviderSkill[];
+  updatedAt: number;
+};
+
+type ProjectTarget = {
+  projectId: string;
+  displayName: string;
+  path: string;
+};
+
+const SKILLS_CACHE_TTL_MS = 5 * 60_000;
+const skillsCache = new Map<string, SkillsCacheEntry>();
+
+const SKILL_SCOPE_ORDER: Record<SkillsScope, number> = {
+  user: 0,
+  plugin: 1,
+  repo: 2,
+  project: 3,
+  admin: 4,
+  system: 5,
+};
+
+const toResponseJson = async <T>(response: Response): Promise<T> => response.json() as Promise<T>;
+
+const getApiErrorMessage = (payload: unknown, fallback: string): string => {
+  if (!payload || typeof payload !== 'object') {
+    return fallback;
+  }
+
+  const record = payload as Record<string, unknown>;
+  const error = record.error;
+  if (error && typeof error === 'object') {
+    const message = (error as Record<string, unknown>).message;
+    if (typeof message === 'string' && message.trim()) {
+      return message;
+    }
+  }
+
+  if (typeof error === 'string' && error.trim()) {
+    return error;
+  }
+
+  const details = record.details;
+  if (typeof details === 'string' && details.trim()) {
+    return details;
+  }
+
+  return fallback;
+};
+
+const isSkillsScope = (value: unknown): value is SkillsScope => (
+  value === 'user'
+  || value === 'project'
+  || value === 'plugin'
+  || value === 'repo'
+  || value === 'admin'
+  || value === 'system'
+);
+
+const normalizeScope = (value: unknown): SkillsScope => (
+  isSkillsScope(value) ? value : 'user'
+);
+
+const createProjectTargets = (projects: SkillsProject[]): ProjectTarget[] => {
+  const seenPaths = new Set<string>();
+
+  return projects.reduce<ProjectTarget[]>((acc, project) => {
+    const projectPath = project.fullPath || project.path || '';
+    if (!projectPath || seenPaths.has(projectPath)) {
+      return acc;
+    }
+
+    seenPaths.add(projectPath);
+    acc.push({
+      projectId: project.projectId,
+      displayName: project.displayName || project.projectId,
+      path: projectPath,
+    });
+    return acc;
+  }, []);
+};
+
+const normalizeSkill = (
+  provider: SkillsProvider,
+  skill: Partial<ProviderSkill>,
+  project?: ProjectTarget,
+): ProviderSkill => {
+  const scope = normalizeScope(skill.scope);
+  const shouldAttachProject = scope === 'project' || scope === 'repo';
+
+  return {
+    provider,
+    name: String(skill.name ?? ''),
+    description: String(skill.description ?? ''),
+    command: String(skill.command ?? ''),
+    scope,
+    sourcePath: String(skill.sourcePath ?? ''),
+    pluginName: typeof skill.pluginName === 'string' ? skill.pluginName : undefined,
+    pluginId: typeof skill.pluginId === 'string' ? skill.pluginId : undefined,
+    projectDisplayName: shouldAttachProject
+      ? project?.displayName ?? skill.projectDisplayName
+      : skill.projectDisplayName,
+    projectPath: shouldAttachProject
+      ? project?.path ?? skill.projectPath
+      : skill.projectPath,
+  };
+};
+
+const getSkillIdentity = (skill: ProviderSkill): string => (
+  [
+    skill.provider,
+    skill.scope,
+    skill.command,
+    skill.sourcePath || 'no-source-path',
+    skill.projectPath || 'global',
+  ].join(':')
+);
+
+const sortSkills = (skills: ProviderSkill[]): ProviderSkill[] => (
+  [...skills].sort((left, right) => {
+    const scopeDelta = SKILL_SCOPE_ORDER[left.scope] - SKILL_SCOPE_ORDER[right.scope];
+    if (scopeDelta !== 0) {
+      return scopeDelta;
+    }
+
+    const projectDelta = (left.projectDisplayName || '').localeCompare(right.projectDisplayName || '');
+    if (projectDelta !== 0) {
+      return projectDelta;
+    }
+
+    return left.command.localeCompare(right.command);
+  })
+);
+
+const mergeSkills = (
+  existingSkills: ProviderSkill[],
+  incomingSkills: ProviderSkill[],
+): ProviderSkill[] => {
+  const skillsById = new Map<string, ProviderSkill>();
+  existingSkills.forEach((skill) => {
+    skillsById.set(getSkillIdentity(skill), skill);
+  });
+  incomingSkills.forEach((skill) => {
+    skillsById.set(getSkillIdentity(skill), skill);
+  });
+
+  return sortSkills([...skillsById.values()]);
+};
+
+const fetchProviderSkills = async (
+  provider: SkillsProvider,
+  project?: ProjectTarget,
+): Promise<ProviderSkill[]> => {
+  const params = new URLSearchParams();
+  if (project?.path) {
+    params.set('workspacePath', project.path);
+  }
+
+  const response = await authenticatedFetch(
+    `/api/providers/${provider}/skills${params.toString() ? `?${params.toString()}` : ''}`,
+  );
+  const data = await toResponseJson<ApiResponse<ProviderSkillsResponse>>(response);
+  if (!response.ok || !data.success) {
+    throw new Error(getApiErrorMessage(data, `Failed to load ${provider} skills`));
+  }
+
+  return (data.data.skills || []).map((skill) => normalizeSkill(provider, skill, project));
+};
+
+const saveProviderSkills = async (
+  provider: SkillsProvider,
+  payload: ProviderSkillCreatePayload,
+): Promise<ProviderSkill[]> => {
+  const response = await authenticatedFetch(`/api/providers/${provider}/skills`, {
+    method: 'POST',
+    body: JSON.stringify(payload),
+  });
+  const data = await toResponseJson<ApiResponse<ProviderSkillsResponse>>(response);
+  if (!response.ok || !data.success) {
+    throw new Error(getApiErrorMessage(data, 'Failed to save skills'));
+  }
+
+  return (data.data.skills || []).map((skill) => normalizeSkill(provider, skill));
+};
+
+const getCacheKey = (provider: SkillsProvider, projects: ProjectTarget[]): string => {
+  const projectKey = projects.map((project) => project.path).sort().join('|');
+  return `${provider}:${projectKey}`;
+};
+
+const clearProviderSkillCache = (provider: SkillsProvider): void => {
+  for (const cacheKey of [...skillsCache.keys()]) {
+    if (cacheKey.startsWith(`${provider}:`)) {
+      skillsCache.delete(cacheKey);
+    }
+  }
+};
+
+type UseProviderSkillsArgs = {
+  selectedProvider: SkillsProvider;
+  currentProjects: SkillsProject[];
+};
+
+export function useProviderSkills({ selectedProvider, currentProjects }: UseProviderSkillsArgs) {
+  const [skills, setSkills] = useState<ProviderSkill[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isLoadingProjectScopes, setIsLoadingProjectScopes] = useState(false);
+  const [loadError, setLoadError] = useState<string | null>(null);
+  const [saveStatus, setSaveStatus] = useState<'success' | 'error' | null>(null);
+  const activeLoadIdRef = useRef(0);
+
+  const projectTargets = useMemo(() => createProjectTargets(currentProjects), [currentProjects]);
+  const cacheKey = useMemo(() => getCacheKey(selectedProvider, projectTargets), [projectTargets, selectedProvider]);
+
+  const refreshSkills = useCallback(async (options: { force?: boolean } = {}) => {
+    const loadId = activeLoadIdRef.current + 1;
+    activeLoadIdRef.current = loadId;
+
+    const cachedEntry = skillsCache.get(cacheKey);
+    const canUseCache = !options.force && cachedEntry && Date.now() - cachedEntry.updatedAt < SKILLS_CACHE_TTL_MS;
+    if (canUseCache) {
+      setSkills(cachedEntry.skills);
+      setIsLoading(false);
+      setIsLoadingProjectScopes(false);
+      setLoadError(null);
+      return;
+    }
+
+    if (cachedEntry && !options.force) {
+      setSkills(cachedEntry.skills);
+    } else {
+      setSkills([]);
+    }
+
+    setIsLoading(!cachedEntry);
+    setIsLoadingProjectScopes(false);
+    setLoadError(null);
+
+    let nextSkills = cachedEntry && !options.force ? cachedEntry.skills : [];
+    let firstError: string | null = null;
+
+    try {
+      const globalSkills = await fetchProviderSkills(selectedProvider);
+      if (activeLoadIdRef.current !== loadId) {
+        return;
+      }
+
+      nextSkills = mergeSkills(nextSkills, globalSkills);
+      setSkills(nextSkills);
+    } catch (error) {
+      firstError = error instanceof Error ? error.message : 'Failed to load skills';
+    }
+
+    if (activeLoadIdRef.current !== loadId) {
+      return;
+    }
+
+    setIsLoading(false);
+
+    if (projectTargets.length === 0) {
+      const finalSkills = sortSkills(nextSkills);
+      skillsCache.set(cacheKey, { skills: finalSkills, updatedAt: Date.now() });
+      setSkills(finalSkills);
+      setLoadError(firstError);
+      return;
+    }
+
+    setIsLoadingProjectScopes(true);
+
+    await Promise.all(projectTargets.map(async (project) => {
+      try {
+        const projectSkills = await fetchProviderSkills(selectedProvider, project);
+        if (activeLoadIdRef.current !== loadId) {
+          return;
+        }
+
+        nextSkills = mergeSkills(nextSkills, projectSkills);
+        setSkills(nextSkills);
+      } catch (error) {
+        firstError = firstError || (error instanceof Error ? error.message : 'Failed to load skills');
+      }
+    }));
+
+    if (activeLoadIdRef.current !== loadId) {
+      return;
+    }
+
+    const finalSkills = sortSkills(nextSkills);
+    skillsCache.set(cacheKey, { skills: finalSkills, updatedAt: Date.now() });
+    setSkills(finalSkills);
+    setLoadError(firstError);
+    setIsLoadingProjectScopes(false);
+  }, [cacheKey, projectTargets, selectedProvider]);
+
+  const addSkills = useCallback(async (payload: ProviderSkillCreatePayload) => {
+    try {
+      const createdSkills = await saveProviderSkills(selectedProvider, payload);
+      clearProviderSkillCache(selectedProvider);
+      await refreshSkills({ force: true });
+      setSaveStatus('success');
+      return createdSkills;
+    } catch (error) {
+      setSaveStatus('error');
+      throw error;
+    }
+  }, [refreshSkills, selectedProvider]);
+
+  useEffect(() => {
+    void refreshSkills();
+  }, [refreshSkills]);
+
+  useEffect(() => {
+    setSaveStatus(null);
+  }, [selectedProvider]);
+
+  useEffect(() => {
+    if (saveStatus === null) {
+      return;
+    }
+
+    const timer = window.setTimeout(() => setSaveStatus(null), 6000);
+    return () => window.clearTimeout(timer);
+  }, [saveStatus]);
+
+  return {
+    skills,
+    isLoading,
+    isLoadingProjectScopes,
+    loadError,
+    saveStatus,
+    addSkills,
+    refreshSkills,
+  };
+}

src/components/skills/index.ts

@@ -0,0 +1 @@
+export { default as ProviderSkills } from './view/ProviderSkills';

src/components/skills/types.ts

@@ -0,0 +1,60 @@
+import type { LLMProvider } from '../../types/app';
+
+export type SkillsProvider = LLMProvider;
+export type SkillsScope = 'user' | 'project' | 'plugin' | 'repo' | 'admin' | 'system';
+
+export type SkillsProject = {
+  projectId: string;
+  displayName?: string;
+  fullPath?: string;
+  path?: string;
+};
+
+export type ProviderSkill = {
+  provider: SkillsProvider;
+  name: string;
+  description: string;
+  command: string;
+  scope: SkillsScope;
+  sourcePath: string;
+  pluginName?: string;
+  pluginId?: string;
+  projectDisplayName?: string;
+  projectPath?: string;
+};
+
+export type ProviderSkillCreateEntryPayload = {
+  content: string;
+  directoryName?: string;
+  fileName?: string;
+  files?: Array<{
+    relativePath: string;
+    content: string;
+    encoding: 'base64';
+  }>;
+};
+
+export type ProviderSkillCreatePayload = {
+  entries: ProviderSkillCreateEntryPayload[];
+};
+
+export type ProviderSkillsResponse = {
+  provider: SkillsProvider;
+  skills: Array<Partial<ProviderSkill>>;
+};
+
+export type ApiSuccessResponse<T> = {
+  success: true;
+  data: T;
+};
+
+export type ApiErrorResponse = {
+  success: false;
+  error?: {
+    code?: string;
+    message?: string;
+    details?: unknown;
+  };
+};
+
+export type ApiResponse<T> = ApiSuccessResponse<T> | ApiErrorResponse;

src/components/skills/view/ProviderSkills.tsx

@@ -0,0 +1,654 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useDropzone } from 'react-dropzone';
+import {
+  CheckCircle2,
+  FileCode2,
+  FileText,
+  FileUp,
+  FolderUp,
+  Loader2,
+  RefreshCw,
+  Search,
+  Upload,
+  X,
+} from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+
+import { cn } from '../../../lib/utils';
+import {
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Input,
+} from '../../../shared/view/ui';
+import { useProviderSkills } from '../hooks/useProviderSkills';
+import type {
+  ProviderSkill,
+  ProviderSkillCreateEntryPayload,
+  SkillsProject,
+  SkillsProvider,
+  SkillsScope,
+} from '../types';
+
+type ProviderSkillsProps = {
+  selectedProvider: SkillsProvider;
+  currentProjects: SkillsProject[];
+};
+
+type QueuedSkillSourceFile = {
+  file: File;
+  relativePath: string;
+};
+
+type QueuedSkillFile = {
+  id: string;
+  name: string;
+  size: number;
+  kind: 'markdown' | 'folder';
+  skillFile: File;
+  files: QueuedSkillSourceFile[];
+};
+
+const MAX_SKILL_FOLDER_FILES = 500;
+const MAX_SKILL_FOLDER_BYTES = 30 * 1024 * 1024;
+
+const PROVIDER_NAMES: Record<SkillsProvider, string> = {
+  claude: 'Claude',
+  codex: 'Codex',
+  cursor: 'Cursor',
+  gemini: 'Gemini',
+  opencode: 'OpenCode',
+};
+
+const PROVIDER_SKILL_PATHS: Record<Exclude<SkillsProvider, 'opencode'>, string> = {
+  claude: '~/.claude/skills/<skill-name>/SKILL.md',
+  codex: '~/.agents/skills/<skill-name>/SKILL.md',
+  cursor: '~/.cursor/skills/<skill-name>/SKILL.md',
+  gemini: '~/.gemini/skills/<skill-name>/SKILL.md',
+};
+
+const SCOPE_LABELS: Record<SkillsScope, string> = {
+  user: 'User',
+  plugin: 'Plugin',
+  repo: 'Repo',
+  project: 'Project',
+  admin: 'Admin',
+  system: 'System',
+};
+
+const SCOPE_BADGE_CLASSES: Record<SkillsScope, string> = {
+  user: 'border-emerald-500/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300',
+  plugin: 'border-sky-500/30 bg-sky-500/10 text-sky-700 dark:text-sky-300',
+  repo: 'border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-300',
+  project: 'border-orange-500/30 bg-orange-500/10 text-orange-700 dark:text-orange-300',
+  admin: 'border-rose-500/30 bg-rose-500/10 text-rose-700 dark:text-rose-300',
+  system: 'border-slate-500/30 bg-slate-500/10 text-slate-700 dark:text-slate-300',
+};
+
+const SCOPE_ORDER: SkillsScope[] = ['user', 'plugin', 'repo', 'project', 'admin', 'system'];
+
+const groupSkillsByScope = (skills: ProviderSkill[]): Array<{ scope: SkillsScope; skills: ProviderSkill[] }> => (
+  SCOPE_ORDER
+    .map((scope) => ({ scope, skills: skills.filter((skill) => skill.scope === scope) }))
+    .filter((group) => group.skills.length > 0)
+);
+
+const formatFileSize = (size: number): string => {
+  if (size < 1024) {
+    return `${size} B`;
+  }
+
+  if (size < 1024 * 1024) {
+    return `${(size / 1024).toFixed(1)} KB`;
+  }
+
+  return `${(size / (1024 * 1024)).toFixed(1)} MB`;
+};
+
+const getBrowserRelativePath = (file: File): string => {
+  const fileWithRelativePath = file as File & {
+    path?: string;
+    webkitRelativePath?: string;
+  };
+  return (
+    fileWithRelativePath.webkitRelativePath
+    || fileWithRelativePath.path
+    || file.name
+  )
+    .replace(/\\/g, '/')
+    .replace(/^\.\/+/, '')
+    .replace(/^\/+/, '');
+};
+
+const getParentPath = (filePath: string): string => {
+  const separatorIndex = filePath.lastIndexOf('/');
+  return separatorIndex >= 0 ? filePath.slice(0, separatorIndex) : '';
+};
+
+const getBaseName = (filePath: string): string => {
+  const segments = filePath.split('/').filter(Boolean);
+  return segments.at(-1) || 'skill';
+};
+
+const readFileAsBase64 = (file: File): Promise<string> => new Promise((resolve, reject) => {
+  const reader = new FileReader();
+  reader.onload = () => {
+    const result = typeof reader.result === 'string' ? reader.result : '';
+    const separatorIndex = result.indexOf(',');
+    resolve(separatorIndex >= 0 ? result.slice(separatorIndex + 1) : result);
+  };
+  reader.onerror = () => reject(reader.error ?? new Error(`Failed to read ${file.name}`));
+  reader.readAsDataURL(file);
+});
+
+const buildQueuedSkillFolders = (selectedFiles: File[]): QueuedSkillFile[] => {
+  if (selectedFiles.length > MAX_SKILL_FOLDER_FILES) {
+    throw new Error(`A skill folder can contain up to ${MAX_SKILL_FOLDER_FILES} files.`);
+  }
+
+  const totalSize = selectedFiles.reduce((size, file) => size + file.size, 0);
+  if (totalSize > MAX_SKILL_FOLDER_BYTES) {
+    throw new Error('Selected skill folders must be smaller than 30 MB in total.');
+  }
+
+  const files = selectedFiles.map((file) => ({
+    file,
+    relativePath: getBrowserRelativePath(file),
+  }));
+  const skillRoots = files
+    .filter(({ relativePath }) => getBaseName(relativePath).toLowerCase() === 'skill.md')
+    .map(({ relativePath }) => getParentPath(relativePath))
+    .sort((left, right) => right.length - left.length);
+
+  if (skillRoots.length === 0) {
+    throw new Error('The selected folder does not contain a SKILL.md file.');
+  }
+
+  return skillRoots.map((skillRoot) => {
+    const skillFiles = files.filter(({ relativePath }) => {
+      const owningRoot = skillRoots.find((candidateRoot) => {
+        const normalizedRelativePath = relativePath.toLowerCase();
+        const normalizedSkillPath = `${candidateRoot}/skill.md`.toLowerCase();
+        return normalizedRelativePath === normalizedSkillPath
+          || relativePath.startsWith(`${candidateRoot}/`);
+      });
+      return owningRoot === skillRoot;
+    });
+    const skillSourceFile = skillFiles.find(
+      ({ relativePath }) => (
+        relativePath.toLowerCase() === `${skillRoot}/skill.md`.toLowerCase()
+      ),
+    );
+    if (!skillSourceFile) {
+      throw new Error(`Could not read SKILL.md from ${getBaseName(skillRoot)}.`);
+    }
+
+    return {
+      id: `folder:${skillRoot}:${skillFiles.map(({ file }) => file.lastModified).join(':')}`,
+      name: getBaseName(skillRoot),
+      size: skillFiles.reduce((size, { file }) => size + file.size, 0),
+      kind: 'folder' as const,
+      skillFile: skillSourceFile.file,
+      files: skillFiles.map(({ file, relativePath }) => ({
+        file,
+        relativePath: skillRoot ? relativePath.slice(skillRoot.length + 1) : relativePath,
+      })),
+    };
+  });
+};
+
+export default function ProviderSkills({ selectedProvider, currentProjects }: ProviderSkillsProps) {
+  const { t } = useTranslation('settings');
+  const {
+    skills,
+    isLoading,
+    isLoadingProjectScopes,
+    loadError,
+    saveStatus,
+    addSkills,
+    refreshSkills,
+  } = useProviderSkills({ selectedProvider, currentProjects });
+  const [queuedFiles, setQueuedFiles] = useState<QueuedSkillFile[]>([]);
+  const [submitError, setSubmitError] = useState<string | null>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const folderInputRef = useRef<HTMLInputElement>(null);
+
+  const providerName = PROVIDER_NAMES[selectedProvider];
+  const providerPath = selectedProvider === 'opencode' ? null : PROVIDER_SKILL_PATHS[selectedProvider];
+
+  useEffect(() => {
+    setQueuedFiles([]);
+    setSubmitError(null);
+    setIsSubmitting(false);
+    setSearchQuery('');
+  }, [selectedProvider]);
+
+  useEffect(() => {
+    folderInputRef.current?.setAttribute('webkitdirectory', '');
+    folderInputRef.current?.setAttribute('directory', '');
+  }, []);
+
+  const filteredSkills = useMemo(() => {
+    const normalizedQuery = searchQuery.trim().toLocaleLowerCase();
+    if (!normalizedQuery) {
+      return skills;
+    }
+
+    return skills.filter((skill) => (
+      [
+        skill.command,
+        skill.name,
+        skill.description,
+        skill.scope,
+        skill.pluginName,
+        skill.projectDisplayName,
+        skill.sourcePath,
+      ]
+        .filter(Boolean)
+        .some((value) => value?.toLocaleLowerCase().includes(normalizedQuery))
+    ));
+  }, [searchQuery, skills]);
+
+  const groupedSkills = useMemo(() => groupSkillsByScope(filteredSkills), [filteredSkills]);
+
+  const queueSkillFolders = useCallback((selectedFiles: File[]) => {
+    const queuedFolders = buildQueuedSkillFolders(selectedFiles);
+    setQueuedFiles((previous) => {
+      const nextMap = new Map(previous.map((file) => [file.id, file]));
+      queuedFolders.forEach((folder) => nextMap.set(folder.id, folder));
+      return [...nextMap.values()].slice(0, 20);
+    });
+  }, []);
+
+  const handleDrop = useCallback((files: File[]) => {
+    const includesDirectory = files.some((file) => getBrowserRelativePath(file).includes('/'));
+    if (includesDirectory) {
+      try {
+        queueSkillFolders(files);
+        setSubmitError(null);
+      } catch (error) {
+        setSubmitError(error instanceof Error ? error.message : 'Failed to read skill folder');
+      }
+      return;
+    }
+
+    const acceptedFiles = files
+      .filter((file) => file.name.toLowerCase().endsWith('.md'))
+      .slice(0, 20);
+
+    if (acceptedFiles.length === 0) {
+      setSubmitError('Drop one or more markdown files or a folder containing SKILL.md.');
+      return;
+    }
+
+    setQueuedFiles((previous) => {
+      const nextMap = new Map(previous.map((file) => [file.id, file]));
+      acceptedFiles.forEach((file) => {
+        const id = `${file.name}:${file.size}:${file.lastModified}`;
+        nextMap.set(id, {
+          id,
+          name: file.name,
+          size: file.size,
+          kind: 'markdown',
+          skillFile: file,
+          files: [{ file, relativePath: 'SKILL.md' }],
+        });
+      });
+
+      return [...nextMap.values()].slice(0, 20);
+    });
+    setSubmitError(null);
+  }, [queueSkillFolders]);
+
+  const handleFolderSelection = useCallback((selectedFiles: File[]) => {
+    if (selectedFiles.length === 0) {
+      return;
+    }
+
+    try {
+      queueSkillFolders(selectedFiles);
+      setSubmitError(null);
+    } catch (error) {
+      setSubmitError(error instanceof Error ? error.message : 'Failed to read skill folder');
+    }
+  }, [queueSkillFolders]);
+
+  const { getRootProps, isDragActive } = useDropzone({
+    maxFiles: MAX_SKILL_FOLDER_FILES,
+    noClick: true,
+    noKeyboard: true,
+    onDrop: handleDrop,
+  });
+
+  const handleUploadInstall = useCallback(async () => {
+    if (queuedFiles.length === 0) {
+      setSubmitError('Add one or more markdown files first.');
+      return;
+    }
+
+    setIsSubmitting(true);
+    setSubmitError(null);
+
+    try {
+      const entries = await Promise.all<ProviderSkillCreateEntryPayload>(queuedFiles.map(async (queuedFile) => ({
+        fileName: queuedFile.kind === 'folder' ? `${queuedFile.name}.md` : queuedFile.name,
+        directoryName: queuedFile.kind === 'folder' ? queuedFile.name : undefined,
+        content: await queuedFile.skillFile.text(),
+        files: queuedFile.kind === 'folder'
+          ? await Promise.all(
+            queuedFile.files
+              .filter(({ relativePath }) => relativePath.toLowerCase() !== 'skill.md')
+              .map(async ({ file, relativePath }) => ({
+                relativePath,
+                content: await readFileAsBase64(file),
+                encoding: 'base64' as const,
+              })),
+          )
+          : undefined,
+      })));
+      await addSkills({ entries });
+      setQueuedFiles([]);
+    } catch (error) {
+      setSubmitError(error instanceof Error ? error.message : 'Failed to import skills');
+    } finally {
+      setIsSubmitting(false);
+    }
+  }, [addSkills, queuedFiles]);
+
+  return (
+    <div className="min-w-0 space-y-4 overflow-x-hidden">
+      <div className="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-start sm:justify-between">
+        <div className="flex min-w-0 items-start gap-3">
+          <div className="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-border/70 bg-muted/20 text-muted-foreground">
+            <FileCode2 className="h-4 w-4" strokeWidth={1.7} />
+          </div>
+          <div className="min-w-0 space-y-1">
+            <h3 className="text-lg font-medium text-foreground">{t('tabs.skills', { defaultValue: 'Skills' })}</h3>
+            <p className="text-sm text-muted-foreground">
+              Install global {providerName} skills from `.md` files or complete skill folders.
+            </p>
+          </div>
+        </div>
+
+        <Button
+          onClick={() => void refreshSkills({ force: true })}
+          variant="outline"
+          size="sm"
+          className="w-full sm:w-auto"
+          disabled={isLoading || isLoadingProjectScopes}
+        >
+          <RefreshCw className={cn('h-4 w-4', (isLoading || isLoadingProjectScopes) && 'animate-spin')} />
+          Refresh
+        </Button>
+      </div>
+
+      <Card className="min-w-0 overflow-hidden border-border/70 bg-background shadow-sm">
+        <CardHeader className="space-y-3 border-b border-border/60 bg-muted/20">
+          <div className="flex flex-col gap-2 sm:flex-row sm:flex-wrap sm:items-center">
+            <div className="text-sm font-medium text-foreground">Upload Skills</div>
+            <div className="min-w-0 rounded-2xl border border-border/60 bg-background/70 p-3">
+              <div className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">Install Path</div>
+              <code className="mt-1 block whitespace-normal break-all text-xs text-foreground">{providerPath}</code>
+            </div>
+          </div>
+        </CardHeader>
+
+        <CardContent className="space-y-4 p-4">
+          <div className="space-y-4">
+            <div
+              {...getRootProps()}
+              className={cn(
+                'rounded-3xl border border-dashed p-4 transition-colors sm:p-5',
+                isDragActive
+                  ? 'border-foreground/40 bg-muted/35'
+                  : 'border-border/70 bg-muted/15 hover:border-foreground/25 hover:bg-muted/25',
+              )}
+            >
+              <input
+                ref={fileInputRef}
+                type="file"
+                accept=".md,text/markdown"
+                multiple
+                className="hidden"
+                onChange={(event) => {
+                  handleDrop(Array.from(event.target.files ?? []));
+                  event.target.value = '';
+                }}
+              />
+              <input
+                ref={folderInputRef}
+                type="file"
+                multiple
+                className="hidden"
+                onChange={(event) => {
+                  handleFolderSelection(Array.from(event.target.files ?? []));
+                  event.target.value = '';
+                }}
+              />
+              <div className="flex flex-col items-center justify-center gap-3 py-4 text-center sm:py-6">
+                <FileUp className="h-7 w-7 text-muted-foreground" strokeWidth={1.5} />
+                <div className="space-y-1">
+                  <div className="text-sm font-medium text-foreground">Drop `.md` files or skill folders here</div>
+                  <div className="text-sm text-muted-foreground">
+                    Upload standalone definitions or choose a full folder to include its scripts, references, and assets.
+                  </div>
+                </div>
+                <div className="flex w-full flex-col gap-2 sm:w-auto sm:flex-row">
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    onClick={() => fileInputRef.current?.click()}
+                    className="w-full sm:w-auto"
+                  >
+                    <FileUp className="h-4 w-4" />
+                    Choose Files
+                  </Button>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    onClick={() => folderInputRef.current?.click()}
+                    className="w-full sm:w-auto"
+                  >
+                    <FolderUp className="h-4 w-4" />
+                    Choose Folder
+                  </Button>
+                </div>
+              </div>
+            </div>
+
+            {queuedFiles.length > 0 && (
+              <div className="space-y-2">
+                <div className="text-sm font-medium text-foreground">Queued Files</div>
+                <div className="grid gap-2">
+                  {queuedFiles.map((queuedFile) => (
+                    <div
+                      key={queuedFile.id}
+                      className="flex flex-col gap-3 rounded-2xl border border-border/70 bg-background/70 px-3 py-3 sm:flex-row sm:items-center sm:justify-between sm:py-2"
+                    >
+                      <div className="min-w-0">
+                        <div className="truncate text-sm font-medium text-foreground">{queuedFile.name}</div>
+                        <div className="text-xs text-muted-foreground">
+                          {queuedFile.kind === 'folder'
+                            ? `${queuedFile.files.length} files`
+                            : 'Markdown file'}
+                          {' · '}
+                          {formatFileSize(queuedFile.size)}
+                        </div>
+                      </div>
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        className="w-full sm:w-auto"
+                        onClick={() => {
+                          setQueuedFiles((previous) => previous.filter((file) => file.id !== queuedFile.id));
+                        }}
+                      >
+                        Remove
+                      </Button>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            <div className="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center">
+              <Button
+                type="button"
+                onClick={() => void handleUploadInstall()}
+                disabled={isSubmitting}
+                className="w-full sm:w-auto"
+              >
+                {isSubmitting ? <Loader2 className="h-4 w-4 animate-spin" /> : <Upload className="h-4 w-4" />}
+                Install {queuedFiles.length > 0 ? `${queuedFiles.length} Skill${queuedFiles.length === 1 ? '' : 's'}` : 'Skills'}
+              </Button>
+              <span className="text-xs text-muted-foreground">
+                Folder uploads keep the selected folder name; standalone files use the `name` in `SKILL.md`.
+              </span>
+            </div>
+          </div>
+
+          {(submitError || loadError) && (
+            <div className="rounded-2xl border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700 dark:border-red-800/60 dark:bg-red-900/20 dark:text-red-200">
+              {submitError || loadError}
+            </div>
+          )}
+
+          {saveStatus === 'success' && (
+            <div className="inline-flex items-center gap-2 rounded-full border border-emerald-500/30 bg-emerald-500/10 px-3 py-1 text-xs font-medium text-emerald-700 dark:text-emerald-300">
+              <CheckCircle2 className="h-4 w-4" />
+              Skills saved successfully.
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      <Card className="min-w-0 border-border/70 bg-background/80 shadow-sm">
+        <CardHeader className="border-b border-border/60">
+          <div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
+            <div className="min-w-0">
+              <CardTitle>Visible Skills</CardTitle>
+              <CardDescription>
+                The list below comes from the provider skill discovery API and includes global and project-aware locations.
+              </CardDescription>
+            </div>
+            <div className="relative w-full lg:w-72">
+              <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+              <Input
+                type="text"
+                value={searchQuery}
+                onChange={(event) => setSearchQuery(event.target.value)}
+                placeholder="Search skills..."
+                aria-label="Search visible skills"
+                className="h-9 w-full pl-9 pr-9"
+              />
+              {searchQuery && (
+                <button
+                  type="button"
+                  onClick={() => setSearchQuery('')}
+                  aria-label="Clear skill search"
+                  className="absolute right-1.5 top-1/2 flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+                >
+                  <X className="h-3.5 w-3.5" />
+                </button>
+              )}
+            </div>
+            {isLoadingProjectScopes && (
+              <div className="inline-flex items-center gap-2 text-xs text-muted-foreground">
+                <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                Scanning project skills…
+              </div>
+            )}
+          </div>
+        </CardHeader>
+
+        <CardContent className="space-y-5 p-4">
+          {isLoading && skills.length === 0 && (
+            <div className="flex min-h-[180px] items-center justify-center text-sm text-muted-foreground">
+              Loading {providerName} skills…
+            </div>
+          )}
+
+          {!isLoading && skills.length === 0 && (
+            <div className="rounded-3xl border border-dashed border-border/70 bg-muted/15 px-4 py-10 text-center">
+              <div className="mx-auto flex h-14 w-14 items-center justify-center rounded-2xl border border-border/60 bg-background/80 text-muted-foreground">
+                <FileText className="h-6 w-6" />
+              </div>
+              <div className="mt-4 text-sm font-medium text-foreground">No skills discovered yet</div>
+              <div className="mt-1 text-sm text-muted-foreground">
+                Add a global skill above or create project-specific skill folders in your workspace.
+              </div>
+            </div>
+          )}
+
+          {!isLoading && skills.length > 0 && filteredSkills.length === 0 && (
+            <div className="rounded-3xl border border-dashed border-border/70 bg-muted/15 px-4 py-10 text-center">
+              <Search className="mx-auto h-6 w-6 text-muted-foreground" />
+              <div className="mt-3 text-sm font-medium text-foreground">No matching skills</div>
+              <div className="mt-1 text-sm text-muted-foreground">
+                Try a different command, name, scope, project, or source path.
+              </div>
+            </div>
+          )}
+
+          {groupedSkills.map((group) => (
+            <section key={group.scope} className="min-w-0 space-y-3">
+              <div className="flex items-center gap-2">
+                <Badge variant="outline" className={cn('rounded-full px-2.5 py-1 text-xs', SCOPE_BADGE_CLASSES[group.scope])}>
+                  {SCOPE_LABELS[group.scope]}
+                </Badge>
+                <span className="text-xs uppercase tracking-[0.18em] text-muted-foreground">
+                  {group.skills.length} skill{group.skills.length === 1 ? '' : 's'}
+                </span>
+              </div>
+
+              <div className="grid min-w-0 gap-3 lg:grid-cols-2">
+                {group.skills.map((skill) => (
+                  <div
+                    key={`${skill.command}:${skill.sourcePath}:${skill.projectPath || 'global'}`}
+                    className="min-w-0 rounded-3xl border border-border/70 bg-gradient-to-br from-background via-background to-muted/25 p-4 shadow-sm"
+                  >
+                    <div className="min-w-0 space-y-1">
+                      <div className="break-all font-mono text-sm font-semibold text-foreground">{skill.command}</div>
+                      <div className="text-sm text-muted-foreground">{skill.name}</div>
+                    </div>
+
+                    <p className="mt-3 text-sm leading-relaxed text-muted-foreground">
+                      {skill.description || 'No description provided in the skill front matter.'}
+                    </p>
+
+                    <div className="mt-4 flex flex-wrap items-center gap-2">
+                      {skill.pluginName && (
+                        <Badge variant="outline" className="rounded-full bg-background/70">
+                          Plugin: {skill.pluginName}
+                        </Badge>
+                      )}
+                      {skill.projectDisplayName && (
+                        <Badge variant="outline" className="rounded-full bg-background/70">
+                          Project: {skill.projectDisplayName}
+                        </Badge>
+                      )}
+                    </div>
+
+                    <div className="mt-4 min-w-0 rounded-2xl border border-border/60 bg-muted/20 px-3 py-2">
+                      <div className="text-[11px] font-medium uppercase tracking-[0.18em] text-muted-foreground">Source</div>
+                      <code className="mt-1 block whitespace-normal break-all text-xs text-foreground">{skill.sourcePath}</code>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </section>
+          ))}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

src/hooks/useProjectsState.ts

@@ -324,7 +324,7 @@ const removeSessionFromProject = (project: Project, sessionIdToDelete: string):
   return updatedProject;
 };
 
-const VALID_TABS: Set<string> = new Set(['chat', 'files', 'shell', 'git', 'tasks', 'preview']);
+const VALID_TABS: Set<string> = new Set(['chat', 'files', 'shell', 'git', 'tasks', 'browser']);
 
 const isValidTab = (tab: string): tab is AppTab => {
   return VALID_TABS.has(tab) || tab.startsWith('plugin:');
@@ -776,7 +776,7 @@ export function useProjectsState({
     (session: ProjectSession) => {
       setSelectedSession(session);
 
-      if (activeTab === 'tasks' || activeTab === 'preview') {
+      if (activeTab === 'tasks' || activeTab === 'browser') {
         setActiveTab('chat');
       }
 

src/hooks/useVersionCheck.ts

@@ -28,20 +28,31 @@ export const useVersionCheck = (owner: string, repo: string) => {
   const [latestVersion, setLatestVersion] = useState<string | null>(null);
   const [releaseInfo, setReleaseInfo] = useState<ReleaseInfo | null>(null);
   const [installMode, setInstallMode] = useState<InstallMode>('git');
+  const [runningVersion, setRunningVersion] = useState<string | null>(null);
+  const [restartRequired, setRestartRequired] = useState(false);
 
   useEffect(() => {
-    const fetchInstallMode = async () => {
+    const fetchHealth = async () => {
       try {
         const response = await fetch('/health');
         const data = await response.json();
         if (data.installMode === 'npm' || data.installMode === 'git') {
           setInstallMode(data.installMode);
         }
+        // `data.version` is the version the server process is actually running.
+        // This module's `version` is baked into the frontend bundle at build
+        // time, so it reflects the installed (on-disk) package. If they differ,
+        // the package was updated but the server process was not restarted, and
+        // DB-backed actions may silently fail until it is.
+        if (typeof data.version === 'string' && data.version.length > 0) {
+          setRunningVersion(data.version);
+          setRestartRequired(data.version !== version);
+        }
       } catch {
-        // Default to git on error
+        // Default to git / no restart hint on error
       }
     };
-    fetchInstallMode();
+    fetchHealth();
   }, []);
 
   useEffect(() => {
@@ -84,5 +95,5 @@ export const useVersionCheck = (owner: string, repo: string) => {
     return () => clearInterval(interval);
   }, [owner, repo]);
 
-  return { updateAvailable, latestVersion, currentVersion: version, releaseInfo, installMode };
+  return { updateAvailable, latestVersion, currentVersion: version, releaseInfo, installMode, runningVersion, restartRequired };
 }; 

src/i18n/locales/de/common.json

@@ -22,7 +22,8 @@
     "shell": "Terminal",
     "files": "Dateien",
     "git": "Quellcodeverwaltung",
-    "tasks": "Aufgaben"
+    "tasks": "Aufgaben",
+    "browser": "Browser"
   },
   "status": {
     "loading": "Lädt...",

src/i18n/locales/de/sidebar.json

@@ -106,10 +106,17 @@
     "deleteProjectFailed": "Projekt konnte nicht entfernt werden. Bitte erneut versuchen.",
     "deleteProjectError": "Fehler beim Entfernen des Projekts. Bitte erneut versuchen.",
     "createProjectFailed": "Projekt konnte nicht erstellt werden. Bitte erneut versuchen.",
-    "createProjectError": "Fehler beim Erstellen des Projekts. Bitte erneut versuchen."
+    "createProjectError": "Fehler beim Erstellen des Projekts. Bitte erneut versuchen.",
+    "updateProjectError": "Fehler beim Aktualisieren des Projekts. Bitte erneut versuchen.",
+    "refreshError": "Aktualisierung fehlgeschlagen. Bitte erneut versuchen.",
+    "restoreProjectFailed": "Projekt konnte nicht wiederhergestellt werden. Bitte erneut versuchen.",
+    "restoreProjectError": "Fehler beim Wiederherstellen des Projekts. Bitte erneut versuchen.",
+    "restoreSessionFailed": "Sitzung konnte nicht wiederhergestellt werden. Bitte erneut versuchen.",
+    "restoreSessionError": "Fehler beim Wiederherstellen der Sitzung. Bitte erneut versuchen."
   },
   "version": {
-    "updateAvailable": "Update verfügbar"
+    "updateAvailable": "Update verfügbar",
+    "restartRequired": "Update installiert – zum Anwenden Server neu starten"
   },
   "search": {
     "modeProjects": "Projekte",

src/i18n/locales/en/common.json

@@ -22,7 +22,8 @@
     "shell": "Shell",
     "files": "Files",
     "git": "Source Control",
-    "tasks": "Tasks"
+    "tasks": "Tasks",
+    "browser": "Browser"
   },
   "status": {
     "loading": "Loading...",

src/i18n/locales/en/settings.json

@@ -4,6 +4,7 @@
     "account": "Account",
     "permissions": "Permissions",
     "mcpServers": "MCP Servers",
+    "skills": "Skills",
     "appearance": "Appearance"
   },
   "account": {
@@ -94,6 +95,7 @@
     "git": "Git",
     "apiTokens": "API & Tokens",
     "tasks": "Tasks",
+    "browser": "Browser",
     "notifications": "Notifications",
     "plugins": "Plugins",
     "about": "About"
@@ -450,6 +452,10 @@
       "edit": "Edit server",
       "delete": "Delete server"
     },
+    "managed": {
+      "badge": "Managed",
+      "hint": "Managed by CloudCLI."
+    },
     "help": {
       "title": "About Codex MCP",
       "description": "Codex supports stdio-based MCP servers. You can add servers that extend Codex's capabilities with additional tools and resources."

src/i18n/locales/en/sidebar.json

@@ -106,10 +106,17 @@
     "deleteProjectFailed": "Failed to remove project. Please try again.",
     "deleteProjectError": "Error removing project. Please try again.",
     "createProjectFailed": "Failed to create project. Please try again.",
-    "createProjectError": "Error creating project. Please try again."
+    "createProjectError": "Error creating project. Please try again.",
+    "updateProjectError": "Error updating project. Please try again.",
+    "refreshError": "Failed to refresh. Please try again.",
+    "restoreProjectFailed": "Failed to restore project. Please try again.",
+    "restoreProjectError": "Error restoring project. Please try again.",
+    "restoreSessionFailed": "Failed to restore session. Please try again.",
+    "restoreSessionError": "Error restoring session. Please try again."
   },
   "version": {
-    "updateAvailable": "Update available"
+    "updateAvailable": "Update available",
+    "restartRequired": "Update installed — restart the server to apply"
   },
   "search": {
     "modeProjects": "Projects",

src/i18n/locales/fr/sidebar.json

@@ -106,10 +106,17 @@
     "deleteProjectFailed": "Échec de la suppression du projet. Veuillez réessayer.",
     "deleteProjectError": "Erreur lors de la suppression du projet. Veuillez réessayer.",
     "createProjectFailed": "Échec de la création du projet. Veuillez réessayer.",
-    "createProjectError": "Erreur lors de la création du projet. Veuillez réessayer."
+    "createProjectError": "Erreur lors de la création du projet. Veuillez réessayer.",
+    "updateProjectError": "Erreur lors de la mise à jour du projet. Veuillez réessayer.",
+    "refreshError": "Échec de l'actualisation. Veuillez réessayer.",
+    "restoreProjectFailed": "Échec de la restauration du projet. Veuillez réessayer.",
+    "restoreProjectError": "Erreur lors de la restauration du projet. Veuillez réessayer.",
+    "restoreSessionFailed": "Échec de la restauration de la session. Veuillez réessayer.",
+    "restoreSessionError": "Erreur lors de la restauration de la session. Veuillez réessayer."
   },
   "version": {
-    "updateAvailable": "Mise à jour disponible"
+    "updateAvailable": "Mise à jour disponible",
+    "restartRequired": "Mise à jour installée — redémarrez le serveur pour l'appliquer"
   },
   "search": {
     "modeProjects": "Projets",

src/i18n/locales/it/common.json

@@ -22,7 +22,8 @@
     "shell": "Terminale",
     "files": "File",
     "git": "Controllo Versione",
-    "tasks": "Attività"
+    "tasks": "Attività",
+    "browser": "Browser"
   },
   "status": {
     "loading": "Caricamento...",

src/i18n/locales/it/sidebar.json

@@ -106,10 +106,17 @@
     "deleteProjectFailed": "Impossibile rimuovere il progetto. Riprova.",
     "deleteProjectError": "Errore durante la rimozione del progetto. Riprova.",
     "createProjectFailed": "Impossibile creare il progetto. Riprova.",
-    "createProjectError": "Errore durante la creazione del progetto. Riprova."
+    "createProjectError": "Errore durante la creazione del progetto. Riprova.",
+    "updateProjectError": "Errore durante l'aggiornamento del progetto. Riprova.",
+    "refreshError": "Aggiornamento non riuscito. Riprova.",
+    "restoreProjectFailed": "Impossibile ripristinare il progetto. Riprova.",
+    "restoreProjectError": "Errore durante il ripristino del progetto. Riprova.",
+    "restoreSessionFailed": "Impossibile ripristinare la sessione. Riprova.",
+    "restoreSessionError": "Errore durante il ripristino della sessione. Riprova."
   },
   "version": {
-    "updateAvailable": "Aggiornamento disponibile"
+    "updateAvailable": "Aggiornamento disponibile",
+    "restartRequired": "Aggiornamento installato — riavvia il server per applicarlo"
   },
   "search": {
     "modeProjects": "Progetti",

src/i18n/locales/ja/common.json

@@ -22,7 +22,8 @@
     "shell": "シェル",
     "files": "ファイル",
     "git": "ソース管理",
-    "tasks": "タスク"
+    "tasks": "タスク",
+    "browser": "Browser"
   },
   "status": {
     "loading": "読み込み中...",

src/i18n/locales/ja/sidebar.json

@@ -105,10 +105,17 @@
     "deleteProjectFailed": "プロジェクトの除去に失敗しました。もう一度お試しください。",
     "deleteProjectError": "プロジェクトの除去でエラーが発生しました。もう一度お試しください。",
     "createProjectFailed": "プロジェクトの作成に失敗しました。もう一度お試しください。",
-    "createProjectError": "プロジェクトの作成でエラーが発生しました。もう一度お試しください。"
+    "createProjectError": "プロジェクトの作成でエラーが発生しました。もう一度お試しください。",
+    "updateProjectError": "プロジェクトの更新でエラーが発生しました。もう一度お試しください。",
+    "refreshError": "更新に失敗しました。もう一度お試しください。",
+    "restoreProjectFailed": "プロジェクトの復元に失敗しました。もう一度お試しください。",
+    "restoreProjectError": "プロジェクトの復元でエラーが発生しました。もう一度お試しください。",
+    "restoreSessionFailed": "セッションの復元に失敗しました。もう一度お試しください。",
+    "restoreSessionError": "セッションの復元でエラーが発生しました。もう一度お試しください。"
   },
   "version": {
-    "updateAvailable": "アップデートあり"
+    "updateAvailable": "アップデートあり",
+    "restartRequired": "更新が適用されていません。サーバーを再起動してください"
   },
   "deleteConfirmation": {
     "deleteProject": "プロジェクトを除去",

src/i18n/locales/ko/common.json

@@ -22,7 +22,8 @@
     "shell": "Shell",
     "files": "파일",
     "git": "소스 관리",
-    "tasks": "작업"
+    "tasks": "작업",
+    "browser": "Browser"
   },
   "status": {
     "loading": "로딩 중...",

src/i18n/locales/ko/sidebar.json

@@ -105,10 +105,17 @@
     "deleteProjectFailed": "프로젝트 제거 실패. 다시 시도해주세요.",
     "deleteProjectError": "프로젝트 제거 오류. 다시 시도해주세요.",
     "createProjectFailed": "프로젝트 생성 실패. 다시 시도해주세요.",
-    "createProjectError": "프로젝트 생성 오류. 다시 시도해주세요."
+    "createProjectError": "프로젝트 생성 오류. 다시 시도해주세요.",
+    "updateProjectError": "프로젝트 업데이트 오류. 다시 시도해주세요.",
+    "refreshError": "새로고침 실패. 다시 시도해주세요.",
+    "restoreProjectFailed": "프로젝트 복원 실패. 다시 시도해주세요.",
+    "restoreProjectError": "프로젝트 복원 오류. 다시 시도해주세요.",
+    "restoreSessionFailed": "세션 복원 실패. 다시 시도해주세요.",
+    "restoreSessionError": "세션 복원 오류. 다시 시도해주세요."
   },
   "version": {
-    "updateAvailable": "업데이트 가능"
+    "updateAvailable": "업데이트 가능",
+    "restartRequired": "업데이트가 설치됨 — 적용하려면 서버를 재시작하세요"
   },
   "deleteConfirmation": {
     "deleteProject": "프로젝트 제거",

src/i18n/locales/ru/common.json

@@ -22,7 +22,8 @@
     "shell": "Терминал",
     "files": "Файлы",
     "git": "Система контроля версий",
-    "tasks": "Задачи"
+    "tasks": "Задачи",
+    "browser": "Browser"
   },
   "status": {
     "loading": "Загрузка...",

src/i18n/locales/ru/sidebar.json

@@ -106,10 +106,17 @@
     "deleteProjectFailed": "Не удалось убрать проект. Попробуйте снова.",
     "deleteProjectError": "Ошибка при удалении проекта из списка. Попробуйте снова.",
     "createProjectFailed": "Не удалось создать проект. Попробуйте снова.",
-    "createProjectError": "Ошибка при создании проекта. Попробуйте снова."
+    "createProjectError": "Ошибка при создании проекта. Попробуйте снова.",
+    "updateProjectError": "Ошибка при обновлении проекта. Попробуйте снова.",
+    "refreshError": "Не удалось обновить. Попробуйте снова.",
+    "restoreProjectFailed": "Не удалось восстановить проект. Попробуйте снова.",
+    "restoreProjectError": "Ошибка при восстановлении проекта. Попробуйте снова.",
+    "restoreSessionFailed": "Не удалось восстановить сеанс. Попробуйте снова.",
+    "restoreSessionError": "Ошибка при восстановлении сеанса. Попробуйте снова."
   },
   "version": {
-    "updateAvailable": "Доступно обновление"
+    "updateAvailable": "Доступно обновление",
+    "restartRequired": "Обновление установлено — перезапустите сервер для применения"
   },
   "search": {
     "modeProjects": "Проекты",

src/i18n/locales/tr/common.json

@@ -22,7 +22,8 @@
     "shell": "Shell",
     "files": "Dosyalar",
     "git": "Kaynak Kontrolü",
-    "tasks": "Görevler"
+    "tasks": "Görevler",
+    "browser": "Browser"
   },
   "status": {
     "loading": "Yükleniyor...",

src/i18n/locales/tr/sidebar.json

@@ -106,10 +106,17 @@
     "deleteProjectFailed": "Proje kaldırılamadı. Lütfen tekrar dene.",
     "deleteProjectError": "Proje kaldırılırken hata oluştu. Lütfen tekrar dene.",
     "createProjectFailed": "Proje oluşturulamadı. Lütfen tekrar dene.",
-    "createProjectError": "Proje oluşturulurken hata oluştu. Lütfen tekrar dene."
+    "createProjectError": "Proje oluşturulurken hata oluştu. Lütfen tekrar dene.",
+    "updateProjectError": "Proje güncellenirken hata oluştu. Lütfen tekrar dene.",
+    "refreshError": "Yenileme başarısız. Lütfen tekrar dene.",
+    "restoreProjectFailed": "Proje geri yüklenemedi. Lütfen tekrar dene.",
+    "restoreProjectError": "Proje geri yüklenirken hata oluştu. Lütfen tekrar dene.",
+    "restoreSessionFailed": "Oturum geri yüklenemedi. Lütfen tekrar dene.",
+    "restoreSessionError": "Oturum geri yüklenirken hata oluştu. Lütfen tekrar dene."
   },
   "version": {
-    "updateAvailable": "Güncelleme mevcut"
+    "updateAvailable": "Güncelleme mevcut",
+    "restartRequired": "Güncelleme yüklendi — uygulamak için sunucuyu yeniden başlatın"
   },
   "search": {
     "modeProjects": "Projeler",

src/i18n/locales/zh-CN/common.json

@@ -22,7 +22,8 @@
     "shell": "终端",
     "files": "文件",
     "git": "源代码管理",
-    "tasks": "任务"
+    "tasks": "任务",
+    "browser": "Browser"
   },
   "status": {
     "loading": "加载中...",

src/i18n/locales/zh-CN/sidebar.json

@@ -106,10 +106,17 @@
     "deleteProjectFailed": "移除项目失败，请重试。",
     "deleteProjectError": "移除项目时出错，请重试。",
     "createProjectFailed": "创建项目失败，请重试。",
-    "createProjectError": "创建项目时出错，请重试。"
+    "createProjectError": "创建项目时出错，请重试。",
+    "updateProjectError": "更新项目时出错，请重试。",
+    "refreshError": "刷新失败，请重试。",
+    "restoreProjectFailed": "恢复项目失败，请重试。",
+    "restoreProjectError": "恢复项目时出错，请重试。",
+    "restoreSessionFailed": "恢复会话失败，请重试。",
+    "restoreSessionError": "恢复会话时出错，请重试。"
   },
   "version": {
-    "updateAvailable": "有可用更新"
+    "updateAvailable": "有可用更新",
+    "restartRequired": "已安装更新 — 请重启服务器以生效"
   },
   "search": {
     "modeProjects": "项目",

src/i18n/locales/zh-TW/common.json

@@ -22,7 +22,8 @@
     "shell": "終端機",
     "files": "檔案",
     "git": "版本控制",
-    "tasks": "任務"
+    "tasks": "任務",
+    "browser": "Browser"
   },
   "status": {
     "loading": "載入中...",

src/i18n/locales/zh-TW/sidebar.json

@@ -105,10 +105,17 @@
     "deleteProjectFailed": "移除專案失敗，請重試。",
     "deleteProjectError": "移除專案時出錯，請重試。",
     "createProjectFailed": "建立專案失敗，請重試。",
-    "createProjectError": "建立專案時出錯，請重試。"
+    "createProjectError": "建立專案時出錯，請重試。",
+    "updateProjectError": "更新專案時出錯，請重試。",
+    "refreshError": "重新整理失敗，請重試。",
+    "restoreProjectFailed": "還原專案失敗，請重試。",
+    "restoreProjectError": "還原專案時出錯，請重試。",
+    "restoreSessionFailed": "還原工作階段失敗，請重試。",
+    "restoreSessionError": "還原工作階段時出錯，請重試。"
   },
   "version": {
-    "updateAvailable": "有可用更新"
+    "updateAvailable": "有可用更新",
+    "restartRequired": "已安裝更新 — 請重新啟動伺服器以套用"
   },
   "search": {
     "modeProjects": "專案",

src/types/app.ts

@@ -17,7 +17,7 @@ export type ProviderModelsCacheInfo = {
   source: 'memory' | 'disk' | 'fresh';
 };
 
-export type AppTab = 'chat' | 'files' | 'shell' | 'git' | 'tasks' | 'preview' | `plugin:${string}`;
+export type AppTab = 'chat' | 'files' | 'shell' | 'git' | 'tasks' | 'browser' | `plugin:${string}`;
 
 export interface ProjectSession {
   id: string;