chore: use montserrat as app font

* fix(security)(components): unsanitized svg content injected via `dangerouslys

The plugin icon renderer fetches SVG text from `/api/plugins/.../assets/...` and injects it directly into the DOM using `dangerouslySetInnerHTML` after only checking that the payload starts with `<svg`. This does not remove malicious attributes/elements (e.g., event handlers, scriptable SVG payloads), enabling DOM-based XSS if a plugin asset is malicious or compromised.

Affected files: PluginIcon.tsx

Signed-off-by: tuanaiseo <221258316+tuanaiseo@users.noreply.github.com>

* fix: sanitize plugin svg icons

---------

Signed-off-by: tuanaiseo <221258316+tuanaiseo@users.noreply.github.com>
Co-authored-by: tuanaiseo <tuanaiseo@gmail.com>
Co-authored-by: Simos Mikelatos <simosmik@gmail.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

index.html

@@ -5,6 +5,9 @@
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <link rel="icon" type="image/png" href="/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
     <title>CloudCLI UI</title>
     
     <!-- PWA Manifest -->

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/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' };
     }

src/App.tsx

@@ -1,5 +1,6 @@
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import { I18nextProvider } from 'react-i18next';
+
 import { ThemeProvider } from './contexts/ThemeContext';
 import { AuthProvider, ProtectedRoute } from './components/auth';
 import { TaskMasterProvider } from './contexts/TaskMasterContext';
@@ -9,7 +10,99 @@ import { PluginsProvider } from './contexts/PluginsContext';
 import AppContent from './components/app/AppContent';
 import i18n from './i18n/config.js';
 
+const DEPLOYMENT_ASSET_DIRECTORIES = new Set(['assets', 'static', 'icons', 'images']);
+
+/**
+ * Detect the router basename from explicit runtime config or deployment hints.
+ *
+ * CloudCLI can be served from a path prefix by a reverse proxy, for example:
+ *   /ai/manifest.json
+ *   /ai/assets/index-abc123.js
+ *   /ai/icons/icon-192x192.png
+ *
+ * React Router needs that prefix as its basename, but the packaged app should
+ * also keep working when served directly from the domain root. The direct-root
+ * case is easy to misread because asset URLs such as /icons/icon-192x192.png
+ * contain a directory even though there is no application basename.
+ */
+function detectRouterBasename() {
+  const explicitBasename = typeof window !== 'undefined' ? window.__ROUTER_BASENAME__ || '' : '';
+  if (explicitBasename) {
+    // Keep the deployment escape hatch authoritative. A trailing slash is
+    // harmless for humans but React Router expects a normalized basename.
+    return explicitBasename.replace(/\/+$/, '');
+  }
+
+  if (typeof window === 'undefined' || typeof document === 'undefined') {
+    return '';
+  }
+
+  const candidatePaths = [
+    { kind: 'manifest' as const, value: document.querySelector('link[rel="manifest"]')?.getAttribute('href') },
+    { kind: 'script' as const, value: document.querySelector('script[type="module"][src]')?.getAttribute('src') },
+    ...Array.from(
+      document.querySelectorAll(
+        'link[rel~="icon"][href], link[rel="apple-touch-icon"][href], link[rel="apple-touch-icon-precomposed"][href], link[rel="mask-icon"][href]'
+      )
+    ).map((node) => ({
+      kind: 'icon' as const,
+      value: node.getAttribute('href'),
+    })),
+  ].filter((candidate): candidate is { kind: 'manifest' | 'script' | 'icon'; value: string } => Boolean(candidate.value));
+
+  let detectedBasename = '';
+  for (const candidate of candidatePaths) {
+    try {
+      const candidateUrl = new URL(candidate.value, document.baseURI || window.location.href);
+      if (candidateUrl.origin !== window.location.origin) {
+        continue;
+      }
+
+      const pathname = candidateUrl.pathname;
+      const normalizedPathname = pathname.replace(/\/+$/, '');
+
+      let normalized = '';
+      if (candidate.kind === 'script') {
+        const match = normalizedPathname.match(/^(.*)\/assets\//);
+        normalized = match?.[1] ? match[1].replace(/\/+$/, '') : '';
+      } else {
+        const manifestMatch = normalizedPathname.match(/^(.*)\/(?:manifest\.json|site\.webmanifest)$/);
+        const iconMatch = normalizedPathname.match(
+          /^(.*)\/(?:favicon(?:\.[^/]+)?|apple-touch-icon(?:-[^/]+)?(?:\.[^/]+)?|mask-icon(?:\.[^/]+)?|[^/]*icon[^/]*)$/
+        );
+        const match = candidate.kind === 'manifest' ? manifestMatch : iconMatch;
+        if (match?.[1]) {
+          const segments = match[1].split('/').filter(Boolean);
+
+          // Strip directories that describe where static files live, not where
+          // the app is mounted. This must also run for a single segment:
+          //   /icons/icon-192x192.png       -> ''
+          //   /ai/icons/icon-192x192.png    -> '/ai'
+          // The previous implementation only stripped while more than one
+          // segment remained, which incorrectly turned root deployments into a
+          // Router basename of /icons and caused a blank page after login.
+          while (segments.length > 0 && DEPLOYMENT_ASSET_DIRECTORIES.has(segments[segments.length - 1])) {
+            segments.pop();
+          }
+
+          normalized = segments.length > 0 ? `/${segments.join('/')}` : '';
+        }
+      }
+
+      if (normalized.length > detectedBasename.length) {
+        detectedBasename = normalized;
+      }
+    } catch {
+      // Ignore invalid candidate URLs and continue checking other hints.
+    }
+  }
+
+  return detectedBasename;
+}
+
 export default function App() {
+  const routerBasename = detectRouterBasename();
+
   return (
     <I18nextProvider i18n={i18n}>
       <ThemeProvider>
@@ -19,7 +112,7 @@ export default function App() {
               <TasksSettingsProvider>
                 <TaskMasterProvider>
                 <ProtectedRoute>
-                  <Router basename={window.__ROUTER_BASENAME__ || ''}>
+                  <Router basename={routerBasename}>
                     <Routes>
                       <Route path="/" element={<AppContent />} />
                       <Route path="/session/:sessionId" element={<AppContent />} />

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/index.css

@@ -128,7 +128,7 @@
   
   body {
     @apply bg-background text-foreground;
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
     margin: 0;
     padding: 0;
   }