Merge branch 'main' into fix/file-tree-concurrency

Add dir="auto" to chat message content and composer textarea so
Persian and Arabic text automatically renders right-to-left
while English and other LTR text remains unaffected.

Co-authored-by: Haile <118998054+blackmammoth@users.noreply.github.com>

CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to CloudCLI UI will be documented in this file.
 
 
+## [](https://github.com/siteboon/claudecodeui/compare/v1.32.0...vnull) (2026-06-01)
+
+### New Features
+
+* add opencode support ([#762](https://github.com/siteboon/claudecodeui/issues/762)) ([374e9de](https://github.com/siteboon/claudecodeui/commit/374e9de71934c41ce2c19c796e35a19234b240ec))
+* **sidebar:** tooltip for the active-session indicator dot ([#782](https://github.com/siteboon/claudecodeui/issues/782)) ([27e509a](https://github.com/siteboon/claudecodeui/commit/27e509a9b8bb25c35ae0abbda44c536e15c332c8))
+
+### Bug Fixes
+
+* **chat:** prevent double send on mobile by removing redundant submit handlers ([#719](https://github.com/siteboon/claudecodeui/issues/719)) ([dbc41dc](https://github.com/siteboon/claudecodeui/commit/dbc41dc91dbf1fb54f92f5536d64646b4e924f31))
+* preserve WebSocket frame type in plugin proxy ([#594](https://github.com/siteboon/claudecodeui/issues/594)) ([36b860e](https://github.com/siteboon/claudecodeui/commit/36b860e322454df62ebf5309018590b596e6b913)), closes [CoderLuii/HolyClaude#11](https://github.com/CoderLuii/HolyClaude/issues/11)
+* refine token usage reporting ([#807](https://github.com/siteboon/claudecodeui/issues/807)) ([38bf21d](https://github.com/siteboon/claudecodeui/commit/38bf21ddf554ed28676d86b5221c25adf6f07afd))
+* refresh Claude auth status after login flow ([#617](https://github.com/siteboon/claudecodeui/issues/617)) ([1e125f3](https://github.com/siteboon/claudecodeui/commit/1e125f3db5248399cd50dc3d40b1f8f44cf7ccb6))
+* **sidebar:** keep session rename input visible while editing ([#781](https://github.com/siteboon/claudecodeui/issues/781)) ([951f587](https://github.com/siteboon/claudecodeui/commit/951f58751c152fbbb3f8b3ce3c814c06c061de18))
+
+### Styling
+
+* fix project star button location by replacing folder icon ([#793](https://github.com/siteboon/claudecodeui/issues/793)) ([295bad9](https://github.com/siteboon/claudecodeui/commit/295bad9c006b669878cbf52940794f29f7370178))
+
 ## [1.32.0](https://github.com/siteboon/claudecodeui/compare/v1.31.5...v1.32.0) (2026-05-13)
 
 ### Bug Fixes

docs/nginx-subpath-template.conf

@@ -1,218 +0,0 @@
-# CloudCLI UI Nginx subpath deployment template.
-#
-# Purpose:
-#   Serve CloudCLI UI from a path prefix such as:
-#     http://localhost/ai/
-#     https://example.com/ai/
-#
-# CloudCLI itself still runs at the root of its own HTTP server, for example:
-#     http://127.0.0.1:3001/
-#
-# Nginx receives public requests under /ai, strips that prefix, and forwards the
-# remaining path to CloudCLI. For example:
-#     /ai/                  ->  /
-#     /ai/session/abc       ->  /session/abc
-#     /ai/assets/index.js   ->  /assets/index.js
-#
-# Important Nginx limitation:
-#   Nginx does not allow variables in `location` matchers or `rewrite` regexes.
-#   The configurable variables below are still useful for proxy/filter values,
-#   but if you change /ai to a different subpath, also update every line marked:
-#     [SUBPATH LITERAL]
-#
-# To use a different subpath, replace these literal matchers:
-#     location = /ai
-#     location ^~ /ai/
-#     rewrite ^/ai(?<cloudcli_path>/.*)$ ...
-#
-# Recommended deployment shape:
-#   CloudCLI is the only app using /ai, while root paths /api, /ws, and /shell
-#   are also proxied because the current frontend still calls those endpoints
-#   with root-relative URLs.
-
-worker_processes 1;
-
-events {
-    # Maximum simultaneous connections handled by each worker process.
-    # The default is enough for local testing and small self-hosted deployments.
-    worker_connections 1024;
-}
-
-http {
-    # WebSocket requests include an Upgrade header. Normal HTTP requests do not.
-    # This map gives us the right Connection header for both cases:
-    #   Upgrade present -> "upgrade"
-    #   Upgrade absent  -> "close"
-    map $http_upgrade $connection_upgrade {
-        default upgrade;
-        '' close;
-    }
-
-    server {
-        # For HTTPS deployments, replace this with `listen 443 ssl http2;` and
-        # add ssl_certificate / ssl_certificate_key lines.
-        listen 80 default_server;
-
-        # Use your real hostname in production, for example:
-        #   server_name cloudcli.example.com;
-        server_name localhost 127.0.0.1;
-
-        # ---- User settings -------------------------------------------------
-        #
-        # Public path prefix where users access CloudCLI.
-        # Do not add a trailing slash.
-        #
-        # This variable can be used in redirects and response rewrites. It
-        # cannot be used in `location` matchers, so update the [SUBPATH LITERAL]
-        # lines too if you change it.
-        set $cloudcli_subpath /ai;
-
-        # Private upstream URL where the CloudCLI server is listening.
-        # For a default local server this is usually http://127.0.0.1:3001.
-        set $cloudcli_upstream http://127.0.0.1:3001;
-
-        # Allow larger file uploads through the code editor/project file APIs.
-        client_max_body_size 100m;
-
-        # Redirect /ai to /ai/ so relative browser URL resolution is stable.
-        # [SUBPATH LITERAL] Change `/ai` if you change $cloudcli_subpath.
-        location = /ai {
-            return 301 $cloudcli_subpath/;
-        }
-
-        # Main prefixed CloudCLI UI route.
-        #
-        # [SUBPATH LITERAL] Change `/ai/` and the `^/ai` rewrite if you change
-        # $cloudcli_subpath.
-        location ^~ /ai/ {
-            # Strip the public subpath before proxying. CloudCLI expects to see
-            # root paths such as /, /session/:id, /assets/..., /manifest.json.
-            rewrite ^/ai(?<cloudcli_path>/.*)$ $cloudcli_path break;
-
-            # Forward the rewritten request to the private CloudCLI server.
-            proxy_pass $cloudcli_upstream;
-
-            # Use HTTP/1.1 so WebSocket upgrade requests can pass through if a
-            # browser reaches a socket endpoint under the subpath.
-            proxy_http_version 1.1;
-
-            # Preserve useful request metadata for logs and future app support.
-            proxy_set_header Host $host;
-            proxy_set_header X-Real-IP $remote_addr;
-            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-            proxy_set_header X-Forwarded-Proto $scheme;
-            proxy_set_header X-Forwarded-Prefix $cloudcli_subpath;
-
-            # WebSocket upgrade headers. Harmless for normal HTTP requests.
-            proxy_set_header Upgrade $http_upgrade;
-            proxy_set_header Connection $connection_upgrade;
-
-            # Long-running agent and terminal sessions can stay open for a long
-            # time, so avoid closing idle proxied connections too aggressively.
-            proxy_read_timeout 3600s;
-            proxy_send_timeout 3600s;
-
-            # Disable gzip from the upstream response so sub_filter can inspect
-            # and rewrite HTML/JSON/JS response bodies.
-            proxy_set_header Accept-Encoding "";
-
-            # Rewrite browser-visible root-relative URLs so the runtime can
-            # discover that the app is mounted under the subpath.
-            #
-            # Examples:
-            #   href="/manifest.json" -> href="/ai/manifest.json"
-            #   src="/assets/app.js"  -> src="/ai/assets/app.js"
-            #
-            # These rewrites are important for React Router basename detection.
-            sub_filter_once off;
-            sub_filter_types
-                application/json
-                application/manifest+json
-                application/javascript
-                text/javascript;
-
-            sub_filter 'href="/' 'href="$cloudcli_subpath/';
-            sub_filter 'src="/' 'src="$cloudcli_subpath/';
-
-            # The production HTML and JS register the service worker at /sw.js.
-            # Rewrite that registration so the worker is served from /ai/sw.js.
-            sub_filter "register('/sw.js')" "register('$cloudcli_subpath/sw.js')";
-            sub_filter 'register("/sw.js")' 'register("$cloudcli_subpath/sw.js")';
-
-            # The manifest and service worker contain root-relative paths too.
-            # Rewriting them keeps PWA metadata and cached manifest requests
-            # under the same public subpath.
-            sub_filter '"start_url": "/"' '"start_url": "$cloudcli_subpath/"';
-            sub_filter '"scope": "/"' '"scope": "$cloudcli_subpath/"';
-            sub_filter '"src": "/' '"src": "$cloudcli_subpath/';
-            sub_filter "'/manifest.json'" "'$cloudcli_subpath/manifest.json'";
-            sub_filter '"/manifest.json"' '"$cloudcli_subpath/manifest.json"';
-        }
-
-        # Root API proxy.
-        #
-        # The current CloudCLI frontend calls APIs with root-relative URLs such
-        # as /api/auth/login. Keep this location unless the frontend becomes
-        # fully prefix-aware for API requests.
-        location ^~ /api/ {
-            proxy_pass $cloudcli_upstream;
-
-            proxy_http_version 1.1;
-            proxy_set_header Host $host;
-            proxy_set_header X-Real-IP $remote_addr;
-            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-            proxy_set_header X-Forwarded-Proto $scheme;
-            proxy_set_header X-Forwarded-Prefix $cloudcli_subpath;
-
-            proxy_read_timeout 3600s;
-            proxy_send_timeout 3600s;
-        }
-
-        # Main app WebSocket proxy.
-        #
-        # The frontend opens /ws for realtime chat/session/task updates.
-        location /ws {
-            proxy_pass $cloudcli_upstream;
-
-            proxy_http_version 1.1;
-            proxy_set_header Host $host;
-            proxy_set_header Upgrade $http_upgrade;
-            proxy_set_header Connection $connection_upgrade;
-            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-            proxy_set_header X-Forwarded-Proto $scheme;
-            proxy_set_header X-Forwarded-Prefix $cloudcli_subpath;
-
-            proxy_read_timeout 3600s;
-            proxy_send_timeout 3600s;
-        }
-
-        # Shell WebSocket proxy.
-        #
-        # The browser terminal uses /shell. It requires the same WebSocket
-        # upgrade handling as /ws.
-        location /shell {
-            proxy_pass $cloudcli_upstream;
-
-            proxy_http_version 1.1;
-            proxy_set_header Host $host;
-            proxy_set_header Upgrade $http_upgrade;
-            proxy_set_header Connection $connection_upgrade;
-            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-            proxy_set_header X-Forwarded-Proto $scheme;
-            proxy_set_header X-Forwarded-Prefix $cloudcli_subpath;
-
-            proxy_read_timeout 3600s;
-            proxy_send_timeout 3600s;
-        }
-
-        # Optional health endpoint proxy used by the frontend version checker.
-        location = /health {
-            proxy_pass $cloudcli_upstream;
-
-            proxy_set_header Host $host;
-            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-            proxy_set_header X-Forwarded-Proto $scheme;
-            proxy_set_header X-Forwarded-Prefix $cloudcli_subpath;
-        }
-    }
-}

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@cloudcli-ai/cloudcli",
-  "version": "1.32.0",
+  "version": "1.33.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@cloudcli-ai/cloudcli",
-      "version": "1.32.0",
+      "version": "1.33.0",
       "hasInstallScript": true,
       "license": "AGPL-3.0-or-later",
       "dependencies": {
@@ -39,6 +39,7 @@
         "cmdk": "^1.1.1",
         "cors": "^2.8.5",
         "cross-spawn": "^7.0.3",
+        "dompurify": "^3.4.7",
         "express": "^4.18.2",
         "fuse.js": "^7.0.0",
         "gray-matter": "^4.0.3",
@@ -4580,6 +4581,13 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/@types/unist": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
@@ -7485,6 +7493,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/dompurify": {
+      "version": "3.4.7",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.4.7.tgz",
+      "integrity": "sha512-2jBxDJY4RR06tQNy4w5FlFH7kfxsQZlufd0sbv+chfHCxeJwrFw2baUDsSwvBISD4K4RDbd0PTfy3uNXsR6siA==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    },
     "node_modules/dot-prop": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudcli-ai/cloudcli",
-  "version": "1.32.0",
+  "version": "1.33.0",
   "description": "A web-based UI for Claude Code CLI",
   "type": "module",
   "main": "dist-server/server/index.js",
@@ -96,6 +96,7 @@
     "cmdk": "^1.1.1",
     "cors": "^2.8.5",
     "cross-spawn": "^7.0.3",
+    "dompurify": "^3.4.7",
     "express": "^4.18.2",
     "fuse.js": "^7.0.0",
     "gray-matter": "^4.0.3",

server/index.js

@@ -1483,74 +1483,133 @@ function permToRwx(perm) {
     return r + w + x;
 }
 
+// Directories that are almost never interesting for a project tree but can
+// contain tens of thousands of files. Skipping them before recursion keeps
+// traversal time bounded on large monorepos and high-latency filesystems
+// (NFS / SMB).
+const IGNORED_DIRS = new Set([
+    // JS / TS toolchains
+    'node_modules', 'dist', 'build', '.next', '.nuxt', '.cache', '.parcel-cache',
+    // VCS
+    '.git', '.svn', '.hg',
+    // Python
+    '__pycache__', '.pytest_cache', '.mypy_cache', '.tox', 'venv', '.venv',
+    // Rust / Go / Java / Ruby
+    'target', 'vendor',
+    // Build output / IDE
+    '.gradle', '.idea', 'coverage', '.nyc_output'
+]);
+
+const DEFAULT_FS_CONCURRENCY = 64;
+const parsedFsConcurrency = Number.parseInt(process.env.FS_CONCURRENCY || '', 10);
+const FS_CONCURRENCY = Number.isFinite(parsedFsConcurrency) && parsedFsConcurrency > 0
+    ? parsedFsConcurrency
+    : DEFAULT_FS_CONCURRENCY;
+let activeFsOperations = 0;
+const pendingFsOperations = [];
+
+async function acquire() {
+    if (activeFsOperations < FS_CONCURRENCY) {
+        activeFsOperations += 1;
+        return;
+    }
+
+    await new Promise((resolve) => {
+        pendingFsOperations.push(resolve);
+    });
+}
+
+function release() {
+    const next = pendingFsOperations.shift();
+    if (next) {
+        next();
+        return;
+    }
+
+    activeFsOperations = Math.max(0, activeFsOperations - 1);
+}
+
 async function getFileTree(dirPath, maxDepth = 3, currentDepth = 0, showHidden = true) {
     // Using fsPromises from import
-    const items = [];
-
+    let entries;
     try {
-        const entries = await fsPromises.readdir(dirPath, { withFileTypes: true });
-
-        for (const entry of entries) {
-            // Debug: log all entries including hidden files
-
-
-            // Skip heavy build directories and VCS directories
-            if (entry.name === 'node_modules' ||
-                entry.name === 'dist' ||
-                entry.name === 'build' ||
-                entry.name === '.git' ||
-                entry.name === '.svn' ||
-                entry.name === '.hg') continue;
-
-            const itemPath = path.join(dirPath, entry.name);
-            const item = {
-                name: entry.name,
-                path: itemPath,
-                type: entry.isDirectory() ? 'directory' : 'file'
-            };
-
-            // Get file stats for additional metadata
-            try {
-                const stats = await fsPromises.stat(itemPath);
-                item.size = stats.size;
-                item.modified = stats.mtime.toISOString();
-
-                // Convert permissions to rwx format
-                const mode = stats.mode;
-                const ownerPerm = (mode >> 6) & 7;
-                const groupPerm = (mode >> 3) & 7;
-                const otherPerm = mode & 7;
-                item.permissions = ((mode >> 6) & 7).toString() + ((mode >> 3) & 7).toString() + (mode & 7).toString();
-                item.permissionsRwx = permToRwx(ownerPerm) + permToRwx(groupPerm) + permToRwx(otherPerm);
-            } catch (statError) {
-                // If stat fails, provide default values
-                item.size = 0;
-                item.modified = null;
-                item.permissions = '000';
-                item.permissionsRwx = '---------';
-            }
-
-            if (entry.isDirectory() && currentDepth < maxDepth) {
-                // Recursively get subdirectories but limit depth
-                try {
-                    // Check if we can access the directory before trying to read it
-                    await fsPromises.access(item.path, fs.constants.R_OK);
-                    item.children = await getFileTree(item.path, maxDepth, currentDepth + 1, showHidden);
-                } catch (e) {
-                    // Silently skip directories we can't access (permission denied, etc.)
-                    item.children = [];
-                }
-            }
-
-            items.push(item);
+        await acquire();
+        try {
+            entries = await fsPromises.readdir(dirPath, { withFileTypes: true });
+        } finally {
+            release();
         }
     } catch (error) {
         // Only log non-permission errors to avoid spam
         if (error.code !== 'EACCES' && error.code !== 'EPERM') {
             console.error('Error reading directory:', error);
         }
+        return [];
     }
 
+    const filteredEntries = entries.filter((entry) => !(entry.isDirectory() && IGNORED_DIRS.has(entry.name)));
+
+    // Process every entry in parallel. On high-latency filesystems (NFS/SMB)
+    // serial stat() was the real bottleneck — issuing them concurrently lets
+    // the kernel pipeline the round-trips and the recursive calls overlap too.
+    const items = await Promise.all(filteredEntries.map(async (entry) => {
+        const itemPath = path.join(dirPath, entry.name);
+        const item = {
+            name: entry.name,
+            path: itemPath,
+            type: entry.isDirectory() ? 'directory' : 'file'
+        };
+
+        // Get file stats for additional metadata
+        try {
+            await acquire();
+            try {
+              const stats = await fsPromises.lstat(itemPath);
+              item.size = stats.size;
+              item.modified = stats.mtime.toISOString();
+
+              // Mark symlinks so UI can distinguish them
+              if (stats.isSymbolicLink()) {
+                item.isSymlink = true;
+              }
+
+              // Convert permissions to rwx format
+              const mode = stats.mode;
+              const ownerPerm = (mode >> 6) & 7;
+              const groupPerm = (mode >> 3) & 7;
+              const otherPerm = mode & 7;
+              item.permissions =
+                ((mode >> 6) & 7).toString() +
+                ((mode >> 3) & 7).toString() +
+                (mode & 7).toString();
+              item.permissionsRwx =
+                permToRwx(ownerPerm) +
+                permToRwx(groupPerm) +
+                permToRwx(otherPerm);
+            } finally {
+                release();
+            }
+        } catch (statError) {
+            // If stat fails, provide default values
+            item.size = 0;
+            item.modified = null;
+            item.permissions = '000';
+            item.permissionsRwx = '---------';
+        }
+
+        if (entry.isDirectory() && currentDepth < maxDepth) {
+            // Recurse. Let readdir's own EACCES bubble up through the catch in
+            // the recursive call rather than doing a separate access() probe
+            // (which doubled the round-trip count on SMB without adding info).
+            // The recursive call starts with a bounded readdir; holding a permit
+            // for the whole subtree can deadlock when sibling directories are
+            // waiting on their own children.
+            item.children = await getFileTree(itemPath, maxDepth, currentDepth + 1, showHidden);
+        }
+
+        return item;
+    }));
+
     return items.sort((a, b) => {
         if (a.type !== b.type) {
             return a.type === 'directory' ? -1 : 1;

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

@@ -83,6 +83,10 @@ export class ClaudeProviderAuth implements IProviderAuth {
   private async checkCredentials(): Promise<ClaudeCredentialsStatus> {
     const missingCredentialsError = 'Claude CLI is not authenticated. Run claude /login or configure ANTHROPIC_API_KEY.';
 
+    if (process.env.ANTHROPIC_AUTH_TOKEN?.trim()) {
+      return { authenticated: true, email: 'Auth Token', method: 'api_key' };
+    }
+
     if (process.env.ANTHROPIC_API_KEY?.trim()) {
       return { authenticated: true, email: 'API Key Auth', method: 'api_key' };
     }

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

@@ -31,6 +31,24 @@ export function createWebSocketServer(
   });
 
   wss.on('connection', (ws, request) => {
+    // Keep WebSocket alive across reverse-proxy idle timeouts (Cloudflare ~100s,
+    // AWS ALB 60s, nginx 60s, etc.). Without app-level pings these connections
+    // are silently torn down even when the UI is active, causing repeated
+    // reconnect cycles. ws library heartbeat is opt-in.
+    const HEARTBEAT_INTERVAL_MS = 30_000;
+    const heartbeat = setInterval(() => {
+      if (ws.readyState === ws.OPEN) {
+        try {
+          ws.ping();
+        } catch {
+          // socket may have been closed concurrently — interval will be cleared below
+        }
+      }
+    }, HEARTBEAT_INTERVAL_MS);
+    const stopHeartbeat = () => clearInterval(heartbeat);
+    ws.on('close', stopHeartbeat);
+    ws.on('error', stopHeartbeat);
+
     const incomingRequest = request as AuthenticatedWebSocketRequest;
     const url = incomingRequest.url ?? '/';
     const pathname = new URL(url, 'http://localhost').pathname;

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

@@ -295,6 +295,7 @@ export default function ChatComposer({
 
             <PromptInputTextarea
               ref={textareaRef}
+              dir="auto"
               value={input}
               onChange={onInputChange}
               onClick={onTextareaClick}

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

@@ -120,7 +120,7 @@ const MessageComponent = memo(({ message, prevMessage, createDiff, onFileOpen, o
         /* User message bubble on the right */
         <div className="flex w-full items-end space-x-0 sm:w-auto sm:max-w-[85%] sm:space-x-3 md:max-w-md lg:max-w-lg xl:max-w-xl">
           <div className="group flex-1 rounded-2xl rounded-br-md bg-blue-600 px-3 py-2 text-white shadow-sm sm:flex-initial sm:px-4">
-            <div className="whitespace-pre-wrap break-words text-sm">
+            <div dir="auto" className="whitespace-pre-wrap break-words text-sm">
               {message.content}
             </div>
             {message.images && message.images.length > 0 && (
@@ -405,7 +405,7 @@ const MessageComponent = memo(({ message, prevMessage, createDiff, onFileOpen, o
                 </ReasoningContent>
               </Reasoning>
             ) : (
-              <div className="text-sm text-gray-700 dark:text-gray-300">
+              <div dir="auto" className="text-sm text-gray-700 dark:text-gray-300">
                 {/* Reasoning accordion */}
                 {showThinking && message.reasoning && (
                   <Reasoning className="mb-3" defaultOpen={false}>

src/components/plugins/view/PluginIcon.tsx

@@ -1,4 +1,6 @@
 import { useState, useEffect } from 'react';
+import DOMPurify from 'dompurify';
+
 import { authenticatedFetch } from '../../../utils/api';
 
 type Props = {
@@ -10,6 +12,48 @@ type Props = {
 // Module-level cache so repeated renders don't re-fetch
 const svgCache = new Map<string, string>();
 
+const FORBIDDEN_SVG_TAGS = [
+  'script',
+  'foreignObject',
+  'iframe',
+  'object',
+  'embed',
+  'link',
+  'meta',
+  'style',
+  'animate',
+  'set',
+  'animateTransform',
+  'animateMotion',
+];
+
+const FORBIDDEN_SVG_ATTRS = [
+  'href',
+  'xlink:href',
+  'src',
+  'style',
+];
+
+function sanitizeSvg(svgText: string): string | null {
+  const sanitized = DOMPurify.sanitize(svgText, {
+    USE_PROFILES: { svg: true, svgFilters: true },
+    FORBID_TAGS: FORBIDDEN_SVG_TAGS,
+    FORBID_ATTR: FORBIDDEN_SVG_ATTRS,
+  });
+
+  if (!sanitized) return null;
+
+  try {
+    const doc = new DOMParser().parseFromString(sanitized, 'image/svg+xml');
+    const root = doc.documentElement;
+    if (!root || root.nodeName.toLowerCase() !== 'svg') return null;
+    if (doc.querySelector('parsererror')) return null;
+    return sanitized;
+  } catch {
+    return null;
+  }
+}
+
 export default function PluginIcon({ pluginName, iconFile, className }: Props) {
   const url = iconFile
     ? `/api/plugins/${encodeURIComponent(pluginName)}/assets/${encodeURIComponent(iconFile)}`
@@ -24,9 +68,11 @@ export default function PluginIcon({ pluginName, iconFile, className }: Props) {
         return r.text();
       })
       .then((text) => {
-        if (text && text.trimStart().startsWith('<svg')) {
-          svgCache.set(url, text);
-          setSvg(text);
+        if (!text) return;
+        const sanitized = sanitizeSvg(text);
+        if (sanitized) {
+          svgCache.set(url, sanitized);
+          setSvg(sanitized);
         }
       })
       .catch(() => {});
@@ -35,10 +81,6 @@ export default function PluginIcon({ pluginName, iconFile, className }: Props) {
   if (!svg) return <span className={className} />;
 
   return (
-    <span
-      className={className}
-      // SVG is fetched from the user's own installed plugin — same trust level as the plugin code itself
-      dangerouslySetInnerHTML={{ __html: svg }}
-    />
+    <span className={className} dangerouslySetInnerHTML={{ __html: svg }} />
   );
 }

src/contexts/WebSocketContext.tsx

@@ -36,8 +36,12 @@ const useWebSocketProviderState = (): WebSocketContextType => {
   const { token } = useAuth();
 
   useEffect(() => {
+    // The cleanup below sets unmountedRef = true. Without this reset, every
+    // re-run of the effect (e.g. on token refresh) would short-circuit connect()
+    // at its unmounted guard and leave the socket permanently disconnected.
+    unmountedRef.current = false;
     connect();
-    
+
     return () => {
       unmountedRef.current = true;
       if (reconnectTimeoutRef.current) {

vite.config.js

@@ -37,6 +37,10 @@ export default defineConfig(({ mode }) => {
         '/shell': {
           target: `ws://${proxyHost}:${serverPort}`,
           ws: true
+        },
+        '/plugin-ws': {
+          target: `ws://${proxyHost}:${serverPort}`,
+          ws: true
         }
       }
     },