fix: remove thinking mode

Update model version in OPTIONS description
feat(chat): auto-detect text direction for RTL languages (#729 )
2026-06-06 13:15:38 +08:00 · 2026-06-05 15:28:58 +03:00 · 2026-06-04 23:43:48 +02:00 · 2026-06-04 22:24:07 +03:00 · 2026-06-04 22:07:59 +03:00 · 2026-06-04 20:57:24 +03:00
40 changed files with 623 additions and 849 deletions
--- a/CHANGELOG.md
+++ b/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
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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",
--- a/public/modelConstants.js
+++ b/public/modelConstants.js
@@ -11,7 +11,7 @@ export const CLAUDE_MODELS = {
    {
      value: "default",
      label: "Default (recommended)",
-      description: "Use the default model (currently Opus 4.7 (1M context)) · $5/$25 per Mtok",
+      description: "Use the default model (currently Opus 4.8 (1M context)) · $5/$25 per Mtok",
    },
    {
      value: "sonnet",
--- a/server/modules/providers/list/claude/claude-auth.provider.ts
+++ b/server/modules/providers/list/claude/claude-auth.provider.ts
@@ -16,6 +16,10 @@ type ClaudeCredentialsStatus = {
  error?: string;
 };

+const hasErrorCode = (error: unknown, code: string): boolean => (
+  error instanceof Error && 'code' in error && error.code === code
+);
+
 export class ClaudeProviderAuth implements IProviderAuth {
  /**
   * Checks whether the Claude Code CLI is available on this host.
@@ -77,6 +81,12 @@ export class ClaudeProviderAuth implements IProviderAuth {
   * Checks Claude credentials in the same priority order used by Claude Code.
   */
  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' };
    }
@@ -110,15 +120,33 @@ export class ClaudeProviderAuth implements IProviderAuth {

        return {
          authenticated: false,
-          email,
-          method: 'credentials_file',
-          error: 'OAuth token has expired. Please re-authenticate with claude login',
+          email: null,
+          method: null,
+          error: 'Claude login has expired. Run claude /login again.',
        };
      }

-      return { authenticated: false, email: null, method: null };
-    } catch {
-      return { authenticated: false, email: null, method: null };
+      return {
+        authenticated: false,
+        email: null,
+        method: null,
+        error: missingCredentialsError,
+      };
+    } catch (error) {
+      let errorMessage = 'Unable to read Claude credentials. Run claude /login again.';
+
+      if (hasErrorCode(error, 'ENOENT')) {
+        errorMessage = missingCredentialsError;
+      } else if (error instanceof SyntaxError) {
+        errorMessage = 'Claude credentials are unreadable. Run claude /login again.';
+      }
+
+      return {
+        authenticated: false,
+        email: null,
+        method: null,
+        error: errorMessage,
+      };
    }
  }
 }
--- a/server/modules/providers/list/claude/claude-models.provider.ts
+++ b/server/modules/providers/list/claude/claude-models.provider.ts
@@ -36,7 +36,7 @@ export const CLAUDE_FALLBACK_MODELS: ProviderModelsDefinition = {
      description: 'Haiku 4.5 · Fastest for quick answers · $1/$5 per Mtok',
    },
  ],
-  DEFAULT: 'sonnet',
+  DEFAULT: 'default',
 };
 type ClaudeInitEvent = {
  sessionId?: string;
--- a/server/modules/websocket/services/plugin-websocket-proxy.service.ts
+++ b/server/modules/websocket/services/plugin-websocket-proxy.service.ts
@@ -26,15 +26,15 @@ export function handlePluginWsProxy(
    console.log(`[Plugins] WS proxy connected to "${pluginName}" on port ${port}`);
  });

-  upstream.on('message', (data) => {
+  upstream.on('message', (data, isBinary) => {
    if (clientWs.readyState === WebSocket.OPEN) {
-      clientWs.send(data);
+      clientWs.send(data, { binary: isBinary });
    }
  });

-  clientWs.on('message', (data) => {
+  clientWs.on('message', (data, isBinary) => {
    if (upstream.readyState === WebSocket.OPEN) {
-      upstream.send(data);
+      upstream.send(data, { binary: isBinary });
    }
  });

--- a/server/modules/websocket/services/websocket-server.service.ts
+++ b/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;
--- a/src/App.tsx
+++ b/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 />} />
--- a/src/components/chat/constants/thinkingModes.ts
+++ b/src/components/chat/constants/thinkingModes.ts
@@ -1,44 +0,0 @@
-import { Brain, Zap, Sparkles, Atom } from 'lucide-react';
-
-export const thinkingModes = [
-  {
-    id: 'none',
-    name: 'Standard',
-    description: 'Regular Claude response',
-    icon: null,
-    prefix: '',
-    color: 'text-gray-600'
-  },
-  {
-    id: 'think',
-    name: 'Think',
-    description: 'Basic extended thinking',
-    icon: Brain,
-    prefix: 'think',
-    color: 'text-blue-600'
-  },
-  {
-    id: 'think-hard',
-    name: 'Think Hard',
-    description: 'More thorough evaluation',
-    icon: Zap,
-    prefix: 'think hard',
-    color: 'text-purple-600'
-  },
-  {
-    id: 'think-harder',
-    name: 'Think Harder',
-    description: 'Deep analysis with alternatives',
-    icon: Sparkles,
-    prefix: 'think harder',
-    color: 'text-indigo-600'
-  },
-  {
-    id: 'ultrathink',
-    name: 'Ultrathink',
-    description: 'Maximum thinking budget',
-    icon: Atom,
-    prefix: 'ultrathink',
-    color: 'text-red-600'
-  }
-];
--- a/src/components/chat/hooks/useChatComposerState.ts
+++ b/src/components/chat/hooks/useChatComposerState.ts
@@ -12,7 +12,6 @@ import type {
 import { useDropzone } from 'react-dropzone';

 import { authenticatedFetch } from '../../../utils/api';
-import { thinkingModes } from '../constants/thinkingModes';
 import { grantClaudeToolPermission } from '../utils/chatPermissions';
 import { safeLocalStorage } from '../utils/chatStorage';
 import type {
@@ -204,7 +203,6 @@ export function useChatComposerState({
  const [uploadingImages, setUploadingImages] = useState<Map<string, number>>(new Map());
  const [imageErrors, setImageErrors] = useState<Map<string, string>>(new Map());
  const [isTextareaExpanded, setIsTextareaExpanded] = useState(false);
-  const [thinkingMode, setThinkingMode] = useState('none');
  const [commandModalPayload, setCommandModalPayload] = useState<CommandModalPayload | null>(null);

  const textareaRef = useRef<HTMLTextAreaElement>(null);
@@ -562,11 +560,7 @@ export function useChatComposerState({
        }
      }

-      let messageContent = currentInput;
-      const selectedThinkingMode = thinkingModes.find((mode: { id: string; prefix?: string }) => mode.id === thinkingMode);
-      if (selectedThinkingMode && selectedThinkingMode.prefix) {
-        messageContent = `${selectedThinkingMode.prefix}: ${currentInput}`;
-      }
+      const messageContent = currentInput;

      let uploadedImages: unknown[] = [];
      if (attachedImages.length > 0) {
@@ -749,7 +743,6 @@ export function useChatComposerState({
      setUploadingImages(new Map());
      setImageErrors(new Map());
      setIsTextareaExpanded(false);
-      setThinkingMode('none');

      if (textareaRef.current) {
        textareaRef.current.style.height = 'auto';
@@ -783,7 +776,6 @@ export function useChatComposerState({
      setIsLoading,
      setIsUserScrolledUp,
      slashCommands,
-      thinkingMode,
    ],
  );

@@ -1020,8 +1012,6 @@ export function useChatComposerState({
    textareaRef,
    inputHighlightRef,
    isTextareaExpanded,
-    thinkingMode,
-    setThinkingMode,
    slashCommandsCount,
    filteredCommands,
    frequentCommands,
--- a/src/components/chat/view/ChatInterface.tsx
+++ b/src/components/chat/view/ChatInterface.tsx
@@ -141,8 +141,6 @@ function ChatInterface({
    textareaRef,
    inputHighlightRef,
    isTextareaExpanded,
-    thinkingMode,
-    setThinkingMode,
    slashCommandsCount,
    filteredCommands,
    frequentCommands,
@@ -369,8 +367,6 @@ function ChatInterface({
          provider={provider}
          permissionMode={permissionMode}
          onModeSwitch={cyclePermissionMode}
-          thinkingMode={thinkingMode}
-          setThinkingMode={setThinkingMode}
          tokenBudget={tokenBudget}
          slashCommandsCount={slashCommandsCount}
          onToggleCommandMenu={handleToggleCommandMenu}
--- a/src/components/chat/view/subcomponents/ChatComposer.tsx
+++ b/src/components/chat/view/subcomponents/ChatComposer.tsx
@@ -2,23 +2,16 @@ import { useTranslation } from 'react-i18next';
 import type {
  ChangeEvent,
  ClipboardEvent,
-  Dispatch,
  FormEvent,
  KeyboardEvent,
  MouseEvent,
  ReactNode,
  RefObject,
-  SetStateAction,
  TouchEvent,
 } from 'react';
 import { ImageIcon, MessageSquareIcon, XIcon, ArrowDownIcon } from 'lucide-react';
+
 import type { PendingPermissionRequest, PermissionMode, Provider } from '../../types/types';
-import CommandMenu from './CommandMenu';
-import ClaudeStatus from './ClaudeStatus';
-import ImageAttachment from './ImageAttachment';
-import PermissionRequestsBanner from './PermissionRequestsBanner';
-import ThinkingModeSelector from './ThinkingModeSelector';
-import TokenUsageSummary from './TokenUsageSummary';
 import {
  PromptInput,
  PromptInputHeader,
@@ -30,6 +23,12 @@ import {
  PromptInputSubmit,
 } from '../../../../shared/view/ui';

+import CommandMenu from './CommandMenu';
+import ClaudeStatus from './ClaudeStatus';
+import ImageAttachment from './ImageAttachment';
+import PermissionRequestsBanner from './PermissionRequestsBanner';
+import TokenUsageSummary from './TokenUsageSummary';
+
 interface MentionableFile {
  name: string;
  path: string;
@@ -58,8 +57,6 @@ interface ChatComposerProps {
  provider: Provider | string;
  permissionMode: PermissionMode | string;
  onModeSwitch: () => void;
-  thinkingMode: string;
-  setThinkingMode: Dispatch<SetStateAction<string>>;
  tokenBudget: Record<string, unknown> | null;
  slashCommandsCount: number;
  onToggleCommandMenu: () => void;
@@ -113,8 +110,6 @@ export default function ChatComposer({
  provider,
  permissionMode,
  onModeSwitch,
-  thinkingMode,
-  setThinkingMode,
  tokenBudget,
  slashCommandsCount,
  onToggleCommandMenu,
@@ -295,6 +290,7 @@ export default function ChatComposer({

            <PromptInputTextarea
              ref={textareaRef}
+              dir="auto"
              value={input}
              onChange={onInputChange}
              onClick={onTextareaClick}
@@ -357,10 +353,6 @@ export default function ChatComposer({
              </div>
            </button>

-            {provider === 'claude' && (
-              <ThinkingModeSelector selectedMode={thinkingMode} onModeChange={setThinkingMode} onClose={() => {}} className="" />
-            )}
-
            <TokenUsageSummary usage={tokenBudget} />

            <PromptInputButton
@@ -382,7 +374,7 @@ export default function ChatComposer({
              <PromptInputButton
                tooltip={{ content: t('input.clearInput', { defaultValue: 'Clear input' }) }}
                onClick={onClearInput}
-                className="hidden sm:No-flex"
+                className="hidden sm:flex"
              >
                <XIcon />
              </PromptInputButton>
@@ -399,16 +391,9 @@ export default function ChatComposer({
              {sendByCtrlEnter ? t('input.hintText.ctrlEnter') : t('input.hintText.enter')}
            </div>
            <PromptInputSubmit
-              disabled={!input.trim() || isLoading}
+              onClick={isLoading ? onAbortSession : undefined}
+              disabled={!isLoading && !input.trim()}
              className="h-10 w-10 sm:h-10 sm:w-10"
-              onMouseDown={(event) => {
-                event.preventDefault();
-                onSubmit(event as unknown as MouseEvent<HTMLButtonElement>);
-              }}
-              onTouchStart={(event) => {
-                event.preventDefault();
-                onSubmit(event as unknown as TouchEvent<HTMLButtonElement>);
-              }}
            />
          </div>
        </PromptInputFooter>
--- a/src/components/chat/view/subcomponents/MessageComponent.tsx
+++ b/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}>
--- a/src/components/chat/view/subcomponents/ThinkingModeSelector.tsx
+++ b/src/components/chat/view/subcomponents/ThinkingModeSelector.tsx
@@ -1,244 +0,0 @@
-import { useState, useRef, useEffect, useCallback, type CSSProperties } from 'react';
-import { createPortal } from 'react-dom';
-import { Brain, X } from 'lucide-react';
-import { useTranslation } from 'react-i18next';
-import { thinkingModes } from '../../constants/thinkingModes';
-
-type ThinkingModeSelectorProps = {
-  selectedMode: string;
-  onModeChange: (modeId: string) => void;
-  onClose?: () => void;
-  className?: string;
-};
-
-function ThinkingModeSelector({ selectedMode, onModeChange, onClose, className = '' }: ThinkingModeSelectorProps) {
-  const { t } = useTranslation('chat');
-  const [isOpen, setIsOpen] = useState(false);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const triggerRef = useRef<HTMLButtonElement>(null);
-  const dropdownRef = useRef<HTMLDivElement>(null);
-  const [dropdownStyle, setDropdownStyle] = useState<CSSProperties | null>(null);
-
-  // Mapping from mode ID to translation key
-  const modeKeyMap: Record<string, string> = {
-    'think-hard': 'thinkHard',
-    'think-harder': 'thinkHarder'
-  };
-  // Create translated modes for display
-  const translatedModes = thinkingModes.map(mode => {
-    const modeKey = modeKeyMap[mode.id] || mode.id;
-    return {
-      ...mode,
-      name: t(`thinkingMode.modes.${modeKey}.name`),
-      description: t(`thinkingMode.modes.${modeKey}.description`),
-      prefix: t(`thinkingMode.modes.${modeKey}.prefix`)
-    };
-  });
-
-  const closeDropdown = useCallback(() => {
-    setIsOpen(false);
-    onClose?.();
-  }, [onClose]);
-
-  const updateDropdownPosition = useCallback(() => {
-    const trigger = triggerRef.current;
-    const dropdown = dropdownRef.current;
-    if (!trigger || !dropdown || typeof window === 'undefined') {
-      return;
-    }
-
-    const triggerRect = trigger.getBoundingClientRect();
-    const viewportPadding = window.innerWidth < 640 ? 12 : 16;
-    const spacing = 8;
-    const width = Math.min(window.innerWidth - viewportPadding * 2, window.innerWidth < 640 ? 320 : 256);
-    let left = triggerRect.left + triggerRect.width / 2 - width / 2;
-    left = Math.max(viewportPadding, Math.min(left, window.innerWidth - width - viewportPadding));
-
-    const measuredHeight = dropdown.offsetHeight || 0;
-    const spaceBelow = window.innerHeight - triggerRect.bottom - spacing - viewportPadding;
-    const spaceAbove = triggerRect.top - spacing - viewportPadding;
-    const openBelow = spaceBelow >= Math.min(measuredHeight || 320, 320) || spaceBelow >= spaceAbove;
-    const availableHeight = Math.min(
-      window.innerHeight - viewportPadding * 2,
-      Math.max(180, openBelow ? spaceBelow : spaceAbove),
-    );
-    const panelHeight = Math.min(measuredHeight || availableHeight, availableHeight);
-    const top = openBelow
-      ? Math.min(triggerRect.bottom + spacing, window.innerHeight - viewportPadding - panelHeight)
-      : Math.max(viewportPadding, triggerRect.top - spacing - panelHeight);
-
-    setDropdownStyle({
-      position: 'fixed',
-      top,
-      left,
-      width,
-      maxHeight: availableHeight,
-      zIndex: 80,
-    });
-  }, []);
-
-  useEffect(() => {
-    if (!isOpen) {
-      setDropdownStyle(null);
-      return;
-    }
-
-    const rafId = window.requestAnimationFrame(updateDropdownPosition);
-    const handleViewportChange = () => updateDropdownPosition();
-
-    window.addEventListener('resize', handleViewportChange);
-    window.addEventListener('scroll', handleViewportChange, true);
-
-    return () => {
-      window.cancelAnimationFrame(rafId);
-      window.removeEventListener('resize', handleViewportChange);
-      window.removeEventListener('scroll', handleViewportChange, true);
-    };
-  }, [isOpen, updateDropdownPosition]);
-
-  useEffect(() => {
-    if (!isOpen) {
-      return;
-    }
-
-    const handlePointerDown = (event: PointerEvent) => {
-      const target = event.target;
-      if (!(target instanceof Node)) {
-        return;
-      }
-
-      if (containerRef.current?.contains(target) || dropdownRef.current?.contains(target)) {
-        return;
-      }
-
-      closeDropdown();
-    };
-
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        closeDropdown();
-      }
-    };
-
-    document.addEventListener('pointerdown', handlePointerDown, true);
-    document.addEventListener('keydown', handleKeyDown);
-
-    return () => {
-      document.removeEventListener('pointerdown', handlePointerDown, true);
-      document.removeEventListener('keydown', handleKeyDown);
-    };
-  }, [isOpen, closeDropdown]);
-
-  const currentMode = translatedModes.find(mode => mode.id === selectedMode) || translatedModes[0];
-  const IconComponent = currentMode.icon || Brain;
-
-  return (
-    <div className={`relative ${className}`} ref={containerRef}>
-      <button
-        ref={triggerRef}
-        type="button"
-        onClick={() => {
-          if (isOpen) {
-            closeDropdown();
-            return;
-          }
-
-          setIsOpen(true);
-        }}
-        className={`flex h-10 w-10 items-center justify-center rounded-full transition-all duration-200 sm:h-10 sm:w-10 ${selectedMode === 'none'
-            ? 'bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600'
-            : 'bg-blue-100 hover:bg-blue-200 dark:bg-blue-900 dark:hover:bg-blue-800'
-          }`}
-        title={t('thinkingMode.buttonTitle', { mode: currentMode.name })}
-        aria-haspopup="dialog"
-        aria-expanded={isOpen}
-      >
-        <IconComponent className={`h-5 w-5 ${currentMode.color}`} />
-      </button>
-
-      {isOpen && typeof document !== 'undefined' && createPortal(
-        <div
-          ref={dropdownRef}
-          style={dropdownStyle || { position: 'fixed', top: 0, left: 0, visibility: 'hidden' }}
-          className="flex flex-col overflow-hidden rounded-xl border border-gray-200 bg-white shadow-xl dark:border-gray-700 dark:bg-gray-800"
-          role="dialog"
-          aria-modal="false"
-        >
-          <div className="border-b border-gray-200 p-3 dark:border-gray-700">
-            <div className="flex items-center justify-between">
-              <h3 className="text-sm font-semibold text-gray-900 dark:text-white">
-                {t('thinkingMode.selector.title')}
-              </h3>
-              <button
-                type="button"
-                onClick={closeDropdown}
-                className="rounded p-1 hover:bg-gray-100 dark:hover:bg-gray-700"
-              >
-                <X className="h-4 w-4 text-gray-500" />
-              </button>
-            </div>
-            <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
-              {t('thinkingMode.selector.description')}
-            </p>
-          </div>
-
-          <div className="min-h-0 overflow-y-auto py-1">
-            {translatedModes.map((mode) => {
-              const ModeIcon = mode.icon;
-              const isSelected = mode.id === selectedMode;
-
-              return (
-                <button
-                  key={mode.id}
-                  type="button"
-                  onClick={() => {
-                    onModeChange(mode.id);
-                    closeDropdown();
-                  }}
-                  className={`w-full px-4 py-3 text-left transition-colors hover:bg-gray-50 dark:hover:bg-gray-700 ${isSelected ? 'bg-gray-50 dark:bg-gray-700' : ''
-                    }`}
-                >
-                  <div className="flex items-start gap-3">
-                    <div className={`mt-0.5 ${mode.icon ? mode.color : 'text-gray-400'}`}>
-                      {ModeIcon ? <ModeIcon className="h-5 w-5" /> : <div className="h-5 w-5" />}
-                    </div>
-                    <div className="min-w-0 flex-1">
-                      <div className="flex items-center gap-2">
-                        <span className={`text-sm font-medium ${isSelected ? 'text-gray-900 dark:text-white' : 'text-gray-700 dark:text-gray-300'
-                          }`}>
-                          {mode.name}
-                        </span>
-                        {isSelected && (
-                          <span className="rounded bg-blue-100 px-2 py-0.5 text-xs text-blue-700 dark:bg-blue-900 dark:text-blue-300">
-                            {t('thinkingMode.selector.active')}
-                          </span>
-                        )}
-                      </div>
-                      <p className="mt-0.5 text-xs text-gray-500 dark:text-gray-400">
-                        {mode.description}
-                      </p>
-                      {mode.prefix && (
-                        <code className="mt-1 inline-block rounded bg-gray-100 px-1.5 py-0.5 text-xs dark:bg-gray-700">
-                          {mode.prefix}
-                        </code>
-                      )}
-                    </div>
-                  </div>
-                </button>
-              );
-            })}
-          </div>
-
-          <div className="border-t border-gray-200 bg-gray-50 p-3 dark:border-gray-700 dark:bg-gray-900">
-            <p className="text-xs text-gray-600 dark:text-gray-400">
-              <strong>Tip:</strong> {t('thinkingMode.selector.tip')}
-            </p>
-          </div>
-        </div>,
-        document.body
-      )}
-    </div>
-  );
-}
-
-export default ThinkingModeSelector;
--- a/src/components/plugins/view/PluginIcon.tsx
+++ b/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 }} />
  );
 }
--- a/src/components/plugins/view/PluginSettingsTab.tsx
+++ b/src/components/plugins/view/PluginSettingsTab.tsx
@@ -1,12 +1,93 @@
-import { useState } from 'react';
+import { useState, type ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Trash2, RefreshCw, GitBranch, Loader2, ServerCrash, ShieldAlert, ExternalLink, BookOpen, Download, BarChart3 } from 'lucide-react';
+import {
+  Activity,
+  BarChart3,
+  BookOpen,
+  Clock,
+  Download,
+  ExternalLink,
+  GitBranch,
+  Loader2,
+  RefreshCw,
+  ServerCrash,
+  ShieldAlert,
+  Terminal,
+  Trash2,
+  type LucideIcon,
+} from 'lucide-react';
+
 import { usePlugins } from '../../../contexts/PluginsContext';
 import type { Plugin } from '../../../contexts/PluginsContext';
+
 import PluginIcon from './PluginIcon';

 const STARTER_PLUGIN_URL = 'https://github.com/cloudcli-ai/cloudcli-plugin-starter';
 const TERMINAL_PLUGIN_URL = 'https://github.com/cloudcli-ai/cloudcli-plugin-terminal';
+const SCHEDULED_PROMPT_PLUGIN_URL = 'https://github.com/grostim/cloudcli-cron';
+const CLAUDE_WATCH_PLUGIN_URL = 'https://github.com/satsuki19980613/cloudcli-claude-watch';
+
+type PluginRecommendation = {
+  id: string;
+  translationKey: string;
+  repoUrl: string;
+  installedNames: string[];
+  icon: LucideIcon;
+  source: 'official' | 'unofficial';
+};
+
+const OFFICIAL_PLUGIN_RECOMMENDATIONS: PluginRecommendation[] = [
+  {
+    id: 'project-stats',
+    translationKey: 'starterPlugin',
+    repoUrl: STARTER_PLUGIN_URL,
+    installedNames: ['project-stats'],
+    icon: BarChart3,
+    source: 'official',
+  },
+  {
+    id: 'web-terminal',
+    translationKey: 'terminalPlugin',
+    repoUrl: TERMINAL_PLUGIN_URL,
+    installedNames: ['web-terminal'],
+    icon: Terminal,
+    source: 'official',
+  },
+];
+
+const UNOFFICIAL_PLUGIN_RECOMMENDATIONS: PluginRecommendation[] = [
+  {
+    id: 'cloudcli-claude-watch',
+    translationKey: 'claudeWatchPlugin',
+    repoUrl: CLAUDE_WATCH_PLUGIN_URL,
+    installedNames: ['cloudcli-claude-watch'],
+    icon: Activity,
+    source: 'unofficial',
+  },
+  {
+    id: 'workspace-scheduled-prompts',
+    translationKey: 'scheduledPromptPlugin',
+    repoUrl: SCHEDULED_PROMPT_PLUGIN_URL,
+    installedNames: ['workspace-scheduled-prompts'],
+    icon: Clock,
+    source: 'unofficial',
+  },
+];
+
+function repoSlug(repoUrl: string) {
+  return repoUrl.replace(/^https?:\/\/(www\.)?github\.com\//, '');
+}
+
+function normalizeRepoUrl(repoUrl: string | null) {
+  return repoUrl?.replace(/\.git$/, '').replace(/\/$/, '').toLowerCase() ?? null;
+}
+
+function pluginMatchesRecommendation(plugin: Plugin, recommendation: PluginRecommendation) {
+  return (
+    recommendation.installedNames.includes(plugin.name)
+    || normalizeRepoUrl(plugin.repoUrl) === normalizeRepoUrl(recommendation.repoUrl)
+  );
+}

 /* ─── Toggle Switch ─────────────────────────────────────────────────────── */
 function ToggleSwitch({ checked, onChange, ariaLabel }: { checked: boolean; onChange: (v: boolean) => void; ariaLabel: string }) {
@@ -208,117 +289,95 @@ function PluginCard({
  );
 }

-/* ─── Starter Plugin Card ───────────────────────────────────────────────── */
-function StarterPluginCard({ onInstall, installing }: { onInstall: () => void; installing: boolean }) {
-  const { t } = useTranslation('settings');
-
+/* ─── Recommendation Section ────────────────────────────────────────────── */
+function RecommendationSection({
+  title,
+  description,
+  children,
+}: {
+  title: string;
+  description: string;
+  children: ReactNode;
+}) {
  return (
-    <div className="relative flex overflow-hidden rounded-lg border border-dashed border-border bg-card transition-all duration-200 hover:border-blue-400 dark:hover:border-blue-500">
-      <div className="w-[3px] flex-shrink-0 bg-blue-500/30" />
-      <div className="min-w-0 flex-1 p-4">
-        <div className="flex items-start justify-between gap-3">
-          <div className="flex min-w-0 items-center gap-2.5">
-            <div className="h-5 w-5 flex-shrink-0 text-blue-500">
-              <BarChart3 className="h-5 w-5" />
-            </div>
-            <div className="min-w-0">
-              <div className="flex flex-wrap items-center gap-2">
-                <span className="text-sm font-semibold leading-none text-foreground">
-                  {t('pluginSettings.starterPlugin.name')}
-                </span>
-                <span className="rounded bg-blue-50 px-1.5 py-0.5 text-[10px] font-medium text-blue-600 dark:bg-blue-950/50 dark:text-blue-400">
-                  {t('pluginSettings.starterPlugin.badge')}
-                </span>
-                <span className="rounded bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground">
-                  {t('pluginSettings.tab')}
-                </span>
-              </div>
-              <p className="mt-1 text-sm leading-snug text-muted-foreground">
-                {t('pluginSettings.starterPlugin.description')}
-              </p>
-              <a
-                href={STARTER_PLUGIN_URL}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="mt-1 inline-flex items-center gap-1 text-xs text-muted-foreground/60 transition-colors hover:text-foreground"
-              >
-                <GitBranch className="h-3 w-3" />
-                cloudcli-ai/cloudcli-plugin-starter
-              </a>
-            </div>
-          </div>
-          <button
-            onClick={onInstall}
-            disabled={installing}
-            className="flex flex-shrink-0 items-center gap-1.5 rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 disabled:opacity-50"
-          >
-            {installing ? (
-              <Loader2 className="h-3.5 w-3.5 animate-spin" />
-            ) : (
-              <Download className="h-3.5 w-3.5" />
-            )}
-            {installing ? t('pluginSettings.installing') : t('pluginSettings.starterPlugin.install')}
-          </button>
-        </div>
+    <section className="space-y-2">
+      <div>
+        <h4 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+          {title}
+        </h4>
+        <p className="mt-0.5 text-xs text-muted-foreground/70">
+          {description}
+        </p>
      </div>
-    </div>
+      <div className="space-y-2">
+        {children}
+      </div>
+    </section>
  );
 }

-/* ─── Terminal Plugin Card ──────────────────────────────────────────────── */
-function TerminalPluginCard({ onInstall, installing }: { onInstall: () => void; installing: boolean }) {
+/* ─── Plugin Recommendation Card ────────────────────────────────────────── */
+function PluginRecommendationCard({
+  recommendation,
+  onInstall,
+  disabled,
+  installing,
+}: {
+  recommendation: PluginRecommendation;
+  onInstall: () => void;
+  disabled: boolean;
+  installing: boolean;
+}) {
  const { t } = useTranslation('settings');
+  const Icon = recommendation.icon;
+  const isOfficial = recommendation.source === 'official';
+  const accentClass = isOfficial ? 'bg-blue-500/30' : 'bg-amber-500/40';
+  const hoverClass = isOfficial ? 'hover:border-blue-400 dark:hover:border-blue-500' : 'hover:border-amber-400 dark:hover:border-amber-500';
+  const iconClass = isOfficial ? 'text-blue-500' : 'text-amber-500';

  return (
-    <div className="relative flex overflow-hidden rounded-lg border border-dashed border-border bg-card transition-all duration-200 hover:border-blue-400 dark:hover:border-blue-500">
-      <div className="w-[3px] flex-shrink-0 bg-blue-500/30" />
+    <div className={`relative flex overflow-hidden rounded-lg border border-dashed border-border bg-card transition-all duration-200 ${hoverClass}`}>
+      <div className={`w-[3px] flex-shrink-0 ${accentClass}`} />
      <div className="min-w-0 flex-1 p-4">
        <div className="flex items-start justify-between gap-3">
          <div className="flex min-w-0 items-center gap-2.5">
-            <div className="h-5 w-5 flex-shrink-0 text-blue-500">
-              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-5 w-5">
-                <rect x="3" y="3" width="18" height="18" rx="2"/>
-                <path d="M7 8l4 4-4 4"/>
-                <line x1="13" y1="16" x2="17" y2="16"/>
-              </svg>
+            <div className={`h-5 w-5 flex-shrink-0 ${iconClass}`}>
+              <Icon className="h-5 w-5" />
            </div>
            <div className="min-w-0">
              <div className="flex flex-wrap items-center gap-2">
                <span className="text-sm font-semibold leading-none text-foreground">
-                  {t('pluginSettings.terminalPlugin.name')}
-                </span>
-                <span className="rounded bg-blue-50 px-1.5 py-0.5 text-[10px] font-medium text-blue-600 dark:bg-blue-950/50 dark:text-blue-400">
-                  {t('pluginSettings.terminalPlugin.badge')}
+                  {t(`pluginSettings.${recommendation.translationKey}.name`)}
                </span>
                <span className="rounded bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground">
                  {t('pluginSettings.tab')}
                </span>
              </div>
              <p className="mt-1 text-sm leading-snug text-muted-foreground">
-                {t('pluginSettings.terminalPlugin.description')}
+                {t(`pluginSettings.${recommendation.translationKey}.description`)}
              </p>
              <a
-                href={TERMINAL_PLUGIN_URL}
+                href={recommendation.repoUrl}
                target="_blank"
                rel="noopener noreferrer"
                className="mt-1 inline-flex items-center gap-1 text-xs text-muted-foreground/60 transition-colors hover:text-foreground"
              >
                <GitBranch className="h-3 w-3" />
-                cloudcli-ai/cloudcli-plugin-terminal
+                {repoSlug(recommendation.repoUrl)}
              </a>
            </div>
          </div>
          <button
            onClick={onInstall}
-            disabled={installing}
-            className="flex flex-shrink-0 items-center gap-1.5 rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 disabled:opacity-50"
+            disabled={disabled}
+            className="flex flex-shrink-0 items-center gap-1.5 rounded-md bg-foreground px-4 py-2 text-sm font-medium text-background transition-opacity hover:opacity-90 disabled:opacity-50"
          >
            {installing ? (
              <Loader2 className="h-3.5 w-3.5 animate-spin" />
            ) : (
              <Download className="h-3.5 w-3.5" />
            )}
-            {installing ? t('pluginSettings.installing') : t('pluginSettings.terminalPlugin.install')}
+            {installing ? t('pluginSettings.installing') : t(`pluginSettings.${recommendation.translationKey}.install`)}
          </button>
        </div>
      </div>
@@ -334,8 +393,7 @@ export default function PluginSettingsTab() {

  const [gitUrl, setGitUrl] = useState('');
  const [installing, setInstalling] = useState(false);
-  const [installingStarter, setInstallingStarter] = useState(false);
-  const [installingTerminal, setInstallingTerminal] = useState(false);
+  const [installingRecommendation, setInstallingRecommendation] = useState<string | null>(null);
  const [installError, setInstallError] = useState<string | null>(null);
  const [confirmUninstall, setConfirmUninstall] = useState<string | null>(null);
  const [updatingPlugins, setUpdatingPlugins] = useState<Set<string>>(new Set());
@@ -364,24 +422,18 @@ export default function PluginSettingsTab() {
    setInstalling(false);
  };

-  const handleInstallStarter = async () => {
-    setInstallingStarter(true);
+  const handleInstallRecommendation = async (recommendation: PluginRecommendation) => {
+    if (installingRecommendation) return;
+    setInstallingRecommendation(recommendation.id);
    setInstallError(null);
-    const result = await installPlugin(STARTER_PLUGIN_URL);
-    if (!result.success) {
-      setInstallError(result.error || t('pluginSettings.installFailed'));
+    try {
+      const result = await installPlugin(recommendation.repoUrl);
+      if (!result.success) {
+        setInstallError(result.error || t('pluginSettings.installFailed'));
+      }
+    } finally {
+      setInstallingRecommendation(null);
    }
-    setInstallingStarter(false);
-  };
-
-  const handleInstallTerminal = async () => {
-    setInstallingTerminal(true);
-    setInstallError(null);
-    const result = await installPlugin(TERMINAL_PLUGIN_URL);
-    if (!result.success) {
-      setInstallError(result.error || t('pluginSettings.installFailed'));
-    }
-    setInstallingTerminal(false);
  };

  const handleUninstall = async (name: string) => {
@@ -398,8 +450,50 @@ export default function PluginSettingsTab() {
    }
  };

-  const hasStarterInstalled = plugins.some((p) => p.name === 'project-stats');
-  const hasTerminalInstalled = plugins.some((p) => p.name === 'web-terminal');
+  const isRecommendationInstalled = (recommendation: PluginRecommendation) => {
+    return plugins.some((plugin) => pluginMatchesRecommendation(plugin, recommendation));
+  };
+
+  const isOfficialPlugin = (plugin: Plugin) => {
+    return OFFICIAL_PLUGIN_RECOMMENDATIONS.some((recommendation) => (
+      pluginMatchesRecommendation(plugin, recommendation)
+    ));
+  };
+
+  const officialPlugins = plugins.filter(isOfficialPlugin);
+  const otherPlugins = plugins.filter((plugin) => !isOfficialPlugin(plugin));
+  const officialRecommendations = OFFICIAL_PLUGIN_RECOMMENDATIONS.filter(
+    (recommendation) => !isRecommendationInstalled(recommendation),
+  );
+  const unofficialRecommendations = UNOFFICIAL_PLUGIN_RECOMMENDATIONS.filter(
+    (recommendation) => !isRecommendationInstalled(recommendation),
+  );
+  const hasOfficialSection = officialPlugins.length > 0 || officialRecommendations.length > 0;
+  const hasOtherSection = otherPlugins.length > 0 || unofficialRecommendations.length > 0;
+
+  const renderPluginCard = (plugin: Plugin, index: number) => {
+    const handleToggle = async (enabled: boolean) => {
+      const r = await togglePlugin(plugin.name, enabled);
+      if (!r.success) {
+        setInstallError(r.error || t('pluginSettings.toggleFailed'));
+      }
+    };
+
+    return (
+      <PluginCard
+        key={plugin.name}
+        plugin={plugin}
+        index={index}
+        onToggle={(enabled) => void handleToggle(enabled)}
+        onUpdate={() => void handleUpdate(plugin.name)}
+        onUninstall={() => void handleUninstall(plugin.name)}
+        updating={updatingPlugins.has(plugin.name)}
+        confirmingUninstall={confirmUninstall === plugin.name}
+        onCancelUninstall={() => setConfirmUninstall(null)}
+        updateError={updateErrors[plugin.name] ?? null}
+      />
+    );
+  };

  return (
    <div className="space-y-6">
@@ -456,51 +550,49 @@ export default function PluginSettingsTab() {
        </span>
      </p>

-      {/* Official plugin suggestions — above the list */}
-      {!loading && (!hasStarterInstalled || !hasTerminalInstalled) && (
-        <div className="space-y-2">
-          {!hasStarterInstalled && (
-            <StarterPluginCard onInstall={handleInstallStarter} installing={installingStarter} />
-          )}
-          {!hasTerminalInstalled && (
-            <TerminalPluginCard onInstall={handleInstallTerminal} installing={installingTerminal} />
-          )}
-        </div>
-      )}
-
-      {/* Plugin List */}
+      {/* Plugin sections */}
      {loading ? (
        <div className="flex items-center justify-center gap-2 py-10 text-sm text-muted-foreground">
          <Loader2 className="h-4 w-4 animate-spin" />
          {t('pluginSettings.scanningPlugins')}
        </div>
-      ) : plugins.length === 0 ? (
-        <p className="py-8 text-center text-sm text-muted-foreground">{t('pluginSettings.noPluginsInstalled')}</p>
      ) : (
-        <div className="space-y-2">
-          {plugins.map((plugin, index) => {
-            const handleToggle = async (enabled: boolean) => {
-              const r = await togglePlugin(plugin.name, enabled);
-              if (!r.success) {
-                setInstallError(r.error || t('pluginSettings.toggleFailed'));
-              }
-            };
+        <div className="space-y-4">
+          {hasOfficialSection && (
+            <RecommendationSection
+              title={t('pluginSettings.sections.officialTitle')}
+              description={t('pluginSettings.sections.officialDescription')}
+            >
+              {officialPlugins.map((plugin, index) => renderPluginCard(plugin, index))}
+              {officialRecommendations.map((recommendation) => (
+                <PluginRecommendationCard
+                  key={recommendation.id}
+                  recommendation={recommendation}
+                  onInstall={() => void handleInstallRecommendation(recommendation)}
+                  disabled={!!installingRecommendation}
+                  installing={installingRecommendation === recommendation.id}
+                />
+              ))}
+            </RecommendationSection>
+          )}

-            return (
-              <PluginCard
-                key={plugin.name}
-                plugin={plugin}
-                index={index}
-                onToggle={(enabled) => void handleToggle(enabled)}
-                onUpdate={() => void handleUpdate(plugin.name)}
-                onUninstall={() => void handleUninstall(plugin.name)}
-                updating={updatingPlugins.has(plugin.name)}
-                confirmingUninstall={confirmUninstall === plugin.name}
-                onCancelUninstall={() => setConfirmUninstall(null)}
-                updateError={updateErrors[plugin.name] ?? null}
-              />
-            );
-          })}
+          {hasOtherSection && (
+            <RecommendationSection
+              title={t('pluginSettings.sections.unofficialTitle')}
+              description={t('pluginSettings.sections.unofficialDescription')}
+            >
+              {otherPlugins.map((plugin, index) => renderPluginCard(plugin, officialPlugins.length + index))}
+              {unofficialRecommendations.map((recommendation) => (
+                <PluginRecommendationCard
+                  key={recommendation.id}
+                  recommendation={recommendation}
+                  onInstall={() => void handleInstallRecommendation(recommendation)}
+                  disabled={!!installingRecommendation}
+                  installing={installingRecommendation === recommendation.id}
+                />
+              ))}
+            </RecommendationSection>
+          )}
        </div>
      )}

--- a/src/components/provider-auth/hooks/useProviderAuthStatus.ts
+++ b/src/components/provider-auth/hooks/useProviderAuthStatus.ts
@@ -70,34 +70,39 @@ export function useProviderAuthStatus(
    }));
  }, []);

-  const checkProviderAuthStatus = useCallback(async (provider: LLMProvider) => {
+  const checkProviderAuthStatus = useCallback(async (provider: LLMProvider): Promise<ProviderAuthStatus> => {
    setProviderLoading(provider);

    try {
      const response = await authenticatedFetch(PROVIDER_AUTH_STATUS_ENDPOINTS[provider]);

      if (!response.ok) {
-        setProviderStatus(provider, {
+        const status: ProviderAuthStatus = {
          authenticated: false,
          email: null,
          method: null,
          loading: false,
          error: FALLBACK_STATUS_ERROR,
-        });
-        return;
+        };
+        setProviderStatus(provider, status);
+        return status;
      }

      const payload = (await response.json()) as ProviderAuthStatusApiResponse;
-      setProviderStatus(provider, toProviderAuthStatus(payload.data));
+      const status = toProviderAuthStatus(payload.data);
+      setProviderStatus(provider, status);
+      return status;
    } catch (caughtError) {
      console.error(`Error checking ${provider} auth status:`, caughtError);
-      setProviderStatus(provider, {
+      const status: ProviderAuthStatus = {
        authenticated: false,
        email: null,
        method: null,
        loading: false,
        error: toErrorMessage(caughtError),
-      });
+      };
+      setProviderStatus(provider, status);
+      return status;
    }
  }, [setProviderLoading, setProviderStatus]);

--- a/src/components/settings/hooks/useSettingsController.ts
+++ b/src/components/settings/hooks/useSettingsController.ts
@@ -213,12 +213,19 @@ export function useSettingsController({ isOpen, initialTab }: UseSettingsControl
  }, []);

  const handleLoginComplete = useCallback((exitCode: number) => {
-    if (exitCode !== 0 || !loginProvider) {
+    if (!loginProvider) {
      return;
    }

-    setSaveStatus('success');
-    void checkProviderAuthStatus(loginProvider);
+    void (async () => {
+      const authStatus = await checkProviderAuthStatus(loginProvider);
+
+      if (exitCode !== 0) {
+        console.warn(`Login process exited with code ${exitCode}; refreshing auth status before setting save status.`);
+      }
+
+      setSaveStatus(authStatus.authenticated ? 'success' : 'error');
+    })();
  }, [checkProviderAuthStatus, loginProvider]);

  const saveSettings = useCallback(async () => {
--- a/src/components/sidebar/view/subcomponents/SidebarProjectItem.tsx
+++ b/src/components/sidebar/view/subcomponents/SidebarProjectItem.tsx
@@ -1,4 +1,4 @@
-import { Check, ChevronDown, ChevronRight, Edit3, Folder, FolderOpen, Star, Trash2, X } from 'lucide-react';
+import { Check, ChevronDown, ChevronRight, Edit3, Star, Trash2, X } from 'lucide-react';
 import type { TFunction } from 'i18next';

 import { Button } from '../../../../shared/view/ui';
@@ -131,18 +131,28 @@ export default function SidebarProjectItem({
          >
            <div className="flex items-center justify-between">
              <div className="flex min-w-0 flex-1 items-center gap-3">
-                <div
+                <button
                  className={cn(
-                    'w-8 h-8 rounded-lg flex items-center justify-center transition-colors',
-                    isExpanded ? 'bg-primary/10' : 'bg-muted',
+                    'w-8 h-8 rounded-lg flex items-center justify-center active:scale-90 transition-all duration-150 border',
+                    isStarred
+                      ? 'bg-yellow-500/10 dark:bg-yellow-900/30 border-yellow-200 dark:border-yellow-800'
+                      : 'bg-gray-500/10 dark:bg-gray-900/30 border-gray-200 dark:border-gray-800',
                  )}
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    toggleStarProject();
+                  }}
+                  title={isStarred ? t('tooltips.removeFromFavorites') : t('tooltips.addToFavorites')}
                >
-                  {isExpanded ? (
-                    <FolderOpen className="h-4 w-4 text-primary" />
-                  ) : (
-                    <Folder className="h-4 w-4 text-muted-foreground" />
-                  )}
-                </div>
+                  <Star
+                    className={cn(
+                      'w-4 h-4 transition-colors',
+                      isStarred
+                        ? 'text-yellow-600 dark:text-yellow-400 fill-current'
+                        : 'text-gray-600 dark:text-gray-400',
+                    )}
+                  />
+                </button>

                <div className="min-w-0 flex-1">
                  {isEditing ? (
@@ -212,29 +222,6 @@ export default function SidebarProjectItem({
                  </>
                ) : (
                  <>
-                    <button
-                      className={cn(
-                        'w-8 h-8 rounded-lg flex items-center justify-center active:scale-90 transition-all duration-150 border',
-                        isStarred
-                          ? 'bg-yellow-500/10 dark:bg-yellow-900/30 border-yellow-200 dark:border-yellow-800'
-                          : 'bg-gray-500/10 dark:bg-gray-900/30 border-gray-200 dark:border-gray-800',
-                      )}
-                      onClick={(event) => {
-                        event.stopPropagation();
-                        toggleStarProject();
-                      }}
-                      title={isStarred ? t('tooltips.removeFromFavorites') : t('tooltips.addToFavorites')}
-                    >
-                      <Star
-                        className={cn(
-                          'w-4 h-4 transition-colors',
-                          isStarred
-                            ? 'text-yellow-600 dark:text-yellow-400 fill-current'
-                            : 'text-gray-600 dark:text-gray-400',
-                        )}
-                      />
-                    </button>
-
                    <button
                      className="flex h-8 w-8 items-center justify-center rounded-lg border border-red-200 bg-red-500/10 active:scale-90 dark:border-red-800 dark:bg-red-900/30"
                      onClick={(event) => {
@@ -281,11 +268,28 @@ export default function SidebarProjectItem({
          onClick={selectAndToggleProject}
        >
          <div className="flex min-w-0 flex-1 items-center gap-3">
-            {isExpanded ? (
-              <FolderOpen className="h-4 w-4 flex-shrink-0 text-primary" />
-            ) : (
-              <Folder className="h-4 w-4 flex-shrink-0 text-muted-foreground" />
-            )}
+            <div
+              className={cn(
+                'w-6 h-6 flex items-center justify-center rounded cursor-pointer transition-all duration-200',
+                isStarred
+                  ? 'hover:bg-yellow-50 dark:hover:bg-yellow-900/20'
+                  : 'opacity-40 hover:opacity-100 hover:bg-accent',
+              )}
+              onClick={(event) => {
+                event.stopPropagation();
+                toggleStarProject();
+              }}
+              title={isStarred ? t('tooltips.removeFromFavorites') : t('tooltips.addToFavorites')}
+            >
+              <Star
+                className={cn(
+                  'w-3 h-3 transition-colors',
+                  isStarred
+                    ? 'text-yellow-600 dark:text-yellow-400 fill-current'
+                    : 'text-muted-foreground',
+                )}
+              />
+            </div>
            <div className="min-w-0 flex-1 text-left">
              {isEditing ? (
                <div className="space-y-1">
@@ -352,26 +356,6 @@ export default function SidebarProjectItem({
              </>
            ) : (
              <>
-                <div
-                  className={cn(
-                    'w-6 h-6 opacity-0 group-hover:opacity-100 transition-all duration-200 flex items-center justify-center rounded cursor-pointer touch:opacity-100',
-                    isStarred ? 'hover:bg-yellow-50 dark:hover:bg-yellow-900/20 opacity-100' : 'hover:bg-accent',
-                  )}
-                  onClick={(event) => {
-                    event.stopPropagation();
-                    toggleStarProject();
-                  }}
-                  title={isStarred ? t('tooltips.removeFromFavorites') : t('tooltips.addToFavorites')}
-                >
-                  <Star
-                    className={cn(
-                      'w-3 h-3 transition-colors',
-                      isStarred
-                        ? 'text-yellow-600 dark:text-yellow-400 fill-current'
-                        : 'text-muted-foreground',
-                    )}
-                  />
-                </div>
                <div
                  className="touch:opacity-100 flex h-6 w-6 cursor-pointer items-center justify-center rounded opacity-0 transition-all duration-200 hover:bg-accent group-hover:opacity-100"
                  onClick={(event) => {
--- a/src/components/sidebar/view/subcomponents/SidebarSessionItem.tsx
+++ b/src/components/sidebar/view/subcomponents/SidebarSessionItem.tsx
@@ -1,7 +1,8 @@
+import { useEffect, useRef } from 'react';
 import { Check, Edit2, Trash2, X } from 'lucide-react';
 import type { TFunction } from 'i18next';

-import { Badge, Button } from '../../../../shared/view/ui';
+import { Badge, Button, Tooltip } from '../../../../shared/view/ui';
 import { cn } from '../../../../lib/utils';
 import type { Project, ProjectSession, LLMProvider } from '../../../../types/app';
 import type { SessionWithProvider } from '../../types/types';
@@ -76,7 +77,28 @@ export default function SidebarSessionItem({
 }: SidebarSessionItemProps) {
  const sessionView = createSessionViewModel(session, currentTime, t);
  const isSelected = selectedSession?.id === session.id;
+  const isEditing = editingSession === session.id;
  const compactSessionAge = formatCompactSessionAge(sessionView.sessionTime, currentTime);
+  const editingContainerRef = useRef<HTMLDivElement>(null);
+
+  // The rename panel sits inside a group-hover opacity wrapper, so leaving the row
+  // would visually hide it. While editing, dismiss only when the user clicks outside
+  // the panel (matches Escape / cancel-button behaviour).
+  useEffect(() => {
+    if (!isEditing) {
+      return;
+    }
+
+    const handlePointerDown = (event: MouseEvent) => {
+      const container = editingContainerRef.current;
+      if (container && !container.contains(event.target as Node)) {
+        onCancelEditingSession();
+      }
+    };
+
+    document.addEventListener('mousedown', handlePointerDown);
+    return () => document.removeEventListener('mousedown', handlePointerDown);
+  }, [isEditing, onCancelEditingSession]);

  // Sessions are owned by a project identified by `projectId` (DB primary key)
  // after the projectName → projectId migration.
@@ -97,7 +119,13 @@ export default function SidebarSessionItem({
    <div className="group relative">
      {sessionView.isActive && (
        <div className="absolute left-0 top-1/2 -translate-x-1 -translate-y-1/2 transform">
-          <div className="h-2 w-2 animate-pulse rounded-full bg-green-500" />
+          <Tooltip content={t('tooltips.activeSessionIndicator')} position="right">
+            <div
+              role="status"
+              aria-label={t('tooltips.activeSessionIndicator')}
+              className="h-2 w-2 animate-pulse rounded-full bg-green-500"
+            />
+          </Tooltip>
        </div>
      )}

@@ -168,7 +196,12 @@ export default function SidebarSessionItem({
              <div className="flex items-center gap-2">
                <div className="truncate text-xs font-medium text-foreground">{sessionView.sessionName}</div>
                {compactSessionAge && (
-                  <span className="ml-auto flex-shrink-0 text-[11px] text-muted-foreground transition-opacity duration-200 group-hover:opacity-0">
+                  <span
+                    className={cn(
+                      'ml-auto flex-shrink-0 text-[11px] text-muted-foreground transition-opacity duration-200',
+                      isEditing ? 'opacity-0' : 'group-hover:opacity-0',
+                    )}
+                  >
                    {compactSessionAge}
                  </span>
                )}
@@ -180,8 +213,14 @@ export default function SidebarSessionItem({
          </div>
        </Button>

-        <div className="absolute right-2 top-1/2 flex -translate-y-1/2 transform items-center gap-1 opacity-0 transition-all duration-200 group-hover:opacity-100">
-            {editingSession === session.id ? (
+        <div
+          ref={editingContainerRef}
+          className={cn(
+            'absolute right-2 top-1/2 flex -translate-y-1/2 transform items-center gap-1 transition-all duration-200',
+            isEditing ? 'opacity-100' : 'opacity-0 group-hover:opacity-100',
+          )}
+        >
+            {isEditing ? (
              <>
                <input
                  type="text"
--- a/src/contexts/WebSocketContext.tsx
+++ b/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) {
--- a/src/i18n/locales/de/chat.json
+++ b/src/i18n/locales/de/chat.json
@@ -138,42 +138,6 @@
    "clearInput": "Eingabe leeren",
    "scrollToBottom": "Nach unten scrollen"
  },
-  "thinkingMode": {
-    "selector": {
-      "title": "Denkmodus",
-      "description": "Erweitertes Denken gibt Claude mehr Zeit, Alternativen zu evaluieren",
-      "active": "Aktiv",
-      "tip": "Höhere Denkmodi brauchen mehr Zeit, liefern aber eine gründlichere Analyse"
-    },
-    "modes": {
-      "none": {
-        "name": "Standard",
-        "description": "Reguläre Claude-Antwort",
-        "prefix": ""
-      },
-      "think": {
-        "name": "Denken",
-        "description": "Grundlegendes erweitertes Denken",
-        "prefix": "think"
-      },
-      "thinkHard": {
-        "name": "Intensiv denken",
-        "description": "Gründlichere Auswertung",
-        "prefix": "think hard"
-      },
-      "thinkHarder": {
-        "name": "Sehr intensiv denken",
-        "description": "Tiefgehende Analyse mit Alternativen",
-        "prefix": "think harder"
-      },
-      "ultrathink": {
-        "name": "Ultradenken",
-        "description": "Maximales Denkbudget",
-        "prefix": "ultrathink"
-      }
-    },
-    "buttonTitle": "Denkmodus: {{mode}}"
-  },
  "providerSelection": {
    "title": "KI-Assistent wählen",
    "description": "Anbieter auswählen, um eine neue Unterhaltung zu starten",
--- a/src/i18n/locales/de/sidebar.json
+++ b/src/i18n/locales/de/sidebar.json
@@ -45,6 +45,7 @@
    "removeFromFavorites": "Aus Favoriten entfernen",
    "editSessionName": "Sitzungsname manuell bearbeiten",
    "deleteSession": "Diese Sitzung dauerhaft löschen",
+    "activeSessionIndicator": "Kürzlich aktive Sitzung (letzte 10 Minuten)",
    "save": "Speichern",
    "cancel": "Abbrechen",
    "clearSearch": "Suche leeren",
--- a/src/i18n/locales/en/chat.json
+++ b/src/i18n/locales/en/chat.json
@@ -139,42 +139,6 @@
    "clearInput": "Clear input",
    "scrollToBottom": "Scroll to bottom"
  },
-  "thinkingMode": {
-    "selector": {
-      "title": "Thinking Mode",
-      "description": "Extended thinking gives Claude more time to evaluate alternatives",
-      "active": "Active",
-      "tip": "Higher thinking modes take more time but provide more thorough analysis"
-    },
-    "modes": {
-      "none": {
-        "name": "Standard",
-        "description": "Regular Claude response",
-        "prefix": ""
-      },
-      "think": {
-        "name": "Think",
-        "description": "Basic extended thinking",
-        "prefix": "think"
-      },
-      "thinkHard": {
-        "name": "Think Hard",
-        "description": "More thorough evaluation",
-        "prefix": "think hard"
-      },
-      "thinkHarder": {
-        "name": "Think Harder",
-        "description": "Deep analysis with alternatives",
-        "prefix": "think harder"
-      },
-      "ultrathink": {
-        "name": "Ultrathink",
-        "description": "Maximum thinking budget",
-        "prefix": "ultrathink"
-      }
-    },
-    "buttonTitle": "Thinking mode: {{mode}}"
-  },
  "providerSelection": {
    "title": "Choose Your AI Assistant",
    "description": "Select a provider to start a new conversation",
--- a/src/i18n/locales/en/settings.json
+++ b/src/i18n/locales/en/settings.json
@@ -472,6 +472,12 @@
    "starterPluginLabel": "Starter Plugin",
    "starter": "Starter",
    "docs": "Docs",
+    "sections": {
+      "officialTitle": "Official Plugins",
+      "officialDescription": "Maintained by the CloudCLI team and ready for direct install.",
+      "unofficialTitle": "Other Plugins",
+      "unofficialDescription": "Unofficial plugins and integrations from other users. Review the source before installing."
+    },
    "starterPlugin": {
      "name": "Project Stats",
      "badge": "starter",
@@ -484,6 +490,18 @@
      "description": "Integrated terminal with full shell access directly within the interface.",
      "install": "Install"
    },
+    "scheduledPromptPlugin": {
+      "name": "Scheduled Prompts",
+      "badge": "unofficial",
+      "description": "Schedule workspace prompts, review run history, and manage recurring local tasks.",
+      "install": "Install"
+    },
+    "claudeWatchPlugin": {
+      "name": "Claude Watch",
+      "badge": "unofficial",
+      "description": "Watch long-running Claude Code sessions for hangs and expose process controls.",
+      "install": "Install"
+    },
    "morePlugins": "More",
    "enable": "Enable",
    "disable": "Disable",
--- a/src/i18n/locales/en/sidebar.json
+++ b/src/i18n/locales/en/sidebar.json
@@ -45,6 +45,7 @@
    "removeFromFavorites": "Remove from favorites",
    "editSessionName": "Manually edit session name",
    "deleteSession": "Delete this session permanently",
+    "activeSessionIndicator": "Recently active session (last 10 minutes)",
    "save": "Save",
    "cancel": "Cancel",
    "clearSearch": "Clear search",
--- a/src/i18n/locales/it/chat.json
+++ b/src/i18n/locales/it/chat.json
@@ -138,42 +138,6 @@
    "clearInput": "Cancella input",
    "scrollToBottom": "Scorri in basso"
  },
-  "thinkingMode": {
-    "selector": {
-      "title": "Modalità ragionamento",
-      "description": "Il ragionamento esteso dà a Claude più tempo per valutare le alternative",
-      "active": "Attivo",
-      "tip": "Modalità di ragionamento più elevate richiedono più tempo ma forniscono un'analisi più approfondita"
-    },
-    "modes": {
-      "none": {
-        "name": "Standard",
-        "description": "Risposta Claude normale",
-        "prefix": ""
-      },
-      "think": {
-        "name": "Pensa",
-        "description": "Ragionamento esteso base",
-        "prefix": "think"
-      },
-      "thinkHard": {
-        "name": "Pensa di più",
-        "description": "Valutazione più approfondita",
-        "prefix": "think hard"
-      },
-      "thinkHarder": {
-        "name": "Pensa ancora",
-        "description": "Analisi profonda con alternative",
-        "prefix": "think harder"
-      },
-      "ultrathink": {
-        "name": "Ultrapensiero",
-        "description": "Budget massimo di ragionamento",
-        "prefix": "ultrathink"
-      }
-    },
-    "buttonTitle": "Modalità ragionamento: {{mode}}"
-  },
  "providerSelection": {
    "title": "Scegli il tuo assistente AI",
    "description": "Seleziona un provider per iniziare una nuova conversazione",
--- a/src/i18n/locales/it/sidebar.json
+++ b/src/i18n/locales/it/sidebar.json
@@ -45,6 +45,7 @@
    "removeFromFavorites": "Rimuovi dai preferiti",
    "editSessionName": "Modifica manualmente il nome della sessione",
    "deleteSession": "Elimina questa sessione permanentemente",
+    "activeSessionIndicator": "Sessione attiva di recente (ultimi 10 minuti)",
    "save": "Salva",
    "cancel": "Annulla",
    "clearSearch": "Cancella ricerca",
--- a/src/i18n/locales/ja/chat.json
+++ b/src/i18n/locales/ja/chat.json
@@ -117,42 +117,6 @@
    "clickToChangeMode": "クリックで権限モードを変更（または入力欄でTab）",
    "showAllCommands": "すべてのコマンドを表示"
  },
-  "thinkingMode": {
-    "selector": {
-      "title": "思考モード",
-      "description": "拡張思考によりClaudeがより多くの選択肢を検討できます",
-      "active": "有効",
-      "tip": "高い思考モードは時間がかかりますが、より深い分析が得られます"
-    },
-    "modes": {
-      "none": {
-        "name": "標準",
-        "description": "通常のClaudeの応答",
-        "prefix": ""
-      },
-      "think": {
-        "name": "Think",
-        "description": "基本的な拡張思考",
-        "prefix": "think"
-      },
-      "thinkHard": {
-        "name": "Think Hard",
-        "description": "より深い検討",
-        "prefix": "think hard"
-      },
-      "thinkHarder": {
-        "name": "Think Harder",
-        "description": "代替案を含む深い分析",
-        "prefix": "think harder"
-      },
-      "ultrathink": {
-        "name": "Ultrathink",
-        "description": "最大限の思考予算",
-        "prefix": "ultrathink"
-      }
-    },
-    "buttonTitle": "思考モード: {{mode}}"
-  },
  "providerSelection": {
    "title": "AIアシスタントを選択",
    "description": "新しい会話を始めるプロバイダーを選択してください",
--- a/src/i18n/locales/ja/sidebar.json
+++ b/src/i18n/locales/ja/sidebar.json
@@ -45,6 +45,7 @@
    "removeFromFavorites": "お気に入りから削除",
    "editSessionName": "セッション名を手動で編集",
    "deleteSession": "このセッションを完全に削除",
+    "activeSessionIndicator": "最近アクティブなセッション（過去10分以内）",
    "save": "保存",
    "cancel": "キャンセル",
    "openCommandPalette": "コマンドパレットを開く"
--- a/src/i18n/locales/ko/chat.json
+++ b/src/i18n/locales/ko/chat.json
@@ -120,42 +120,6 @@
    "clearInput": "입력 지우기",
    "scrollToBottom": "맨 아래로 스크롤"
  },
-  "thinkingMode": {
-    "selector": {
-      "title": "Thinking 모드",
-      "description": "확장된 thinking은 Claude에게 대안을 평가할 시간을 더 줍니다",
-      "active": "활성",
-      "tip": "높은 thinking 모드는 시간이 더 걸리지만 더 철저한 분석을 제공합니다"
-    },
-    "modes": {
-      "none": {
-        "name": "Standard",
-        "description": "일반 Claude 응답",
-        "prefix": ""
-      },
-      "think": {
-        "name": "Think",
-        "description": "기본 확장 thinking",
-        "prefix": "think"
-      },
-      "thinkHard": {
-        "name": "Think Hard",
-        "description": "더 철저한 평가",
-        "prefix": "think hard"
-      },
-      "thinkHarder": {
-        "name": "Think Harder",
-        "description": "대안을 포함한 심층 분석",
-        "prefix": "think harder"
-      },
-      "ultrathink": {
-        "name": "Ultrathink",
-        "description": "최대 thinking 예산",
-        "prefix": "ultrathink"
-      }
-    },
-    "buttonTitle": "Thinking 모드: {{mode}}"
-  },
  "providerSelection": {
    "title": "AI 어시스턴트 선택",
    "description": "새 대화를 시작할 프로바이더를 선택하세요",
--- a/src/i18n/locales/ko/sidebar.json
+++ b/src/i18n/locales/ko/sidebar.json
@@ -45,6 +45,7 @@
    "removeFromFavorites": "즐겨찾기에서 제거",
    "editSessionName": "세션 이름 직접 편집",
    "deleteSession": "이 세션 영구 삭제",
+    "activeSessionIndicator": "최근 활성 세션 (지난 10분)",
    "save": "저장",
    "cancel": "취소",
    "openCommandPalette": "명령 팔레트 열기"
--- a/src/i18n/locales/ru/chat.json
+++ b/src/i18n/locales/ru/chat.json
@@ -138,42 +138,6 @@
    "clearInput": "Очистить ввод",
    "scrollToBottom": "Прокрутить вниз"
  },
-  "thinkingMode": {
-    "selector": {
-      "title": "Режим размышления",
-      "description": "Расширенное размышление дает Claude больше времени для оценки альтернатив",
-      "active": "Активен",
-      "tip": "Более высокие режимы размышления занимают больше времени, но обеспечивают более тщательный анализ"
-    },
-    "modes": {
-      "none": {
-        "name": "Стандартный",
-        "description": "Обычный ответ Claude",
-        "prefix": ""
-      },
-      "think": {
-        "name": "Думать",
-        "description": "Базовое расширенное размышление",
-        "prefix": "думать"
-      },
-      "thinkHard": {
-        "name": "Думать усердно",
-        "description": "Более тщательная оценка",
-        "prefix": "думать усердно"
-      },
-      "thinkHarder": {
-        "name": "Думать еще усерднее",
-        "description": "Глубокий анализ с альтернативами",
-        "prefix": "думать еще усерднее"
-      },
-      "ultrathink": {
-        "name": "Ультра-размышление",
-        "description": "Максимальный бюджет размышления",
-        "prefix": "ультра-размышление"
-      }
-    },
-    "buttonTitle": "Режим размышления: {{mode}}"
-  },
  "providerSelection": {
    "title": "Выберите вашего AI-ассистента",
    "description": "Выберите провайдера для начала нового разговора",
--- a/src/i18n/locales/ru/sidebar.json
+++ b/src/i18n/locales/ru/sidebar.json
@@ -45,6 +45,7 @@
    "removeFromFavorites": "Удалить из избранного",
    "editSessionName": "Вручную редактировать имя сеанса",
    "deleteSession": "Удалить этот сеанс навсегда",
+    "activeSessionIndicator": "Недавно активный сеанс (последние 10 минут)",
    "save": "Сохранить",
    "cancel": "Отмена",
    "clearSearch": "Очистить поиск",
--- a/src/i18n/locales/tr/chat.json
+++ b/src/i18n/locales/tr/chat.json
@@ -138,42 +138,6 @@
    "clearInput": "Girdiyi temizle",
    "scrollToBottom": "En alta git"
  },
-  "thinkingMode": {
-    "selector": {
-      "title": "Düşünme Modu",
-      "description": "Uzatılmış düşünme, Claude'a alternatifleri değerlendirmek için daha fazla zaman verir",
-      "active": "Aktif",
-      "tip": "Daha yüksek düşünme modları daha fazla zaman alır ama daha kapsamlı analiz sağlar"
-    },
-    "modes": {
-      "none": {
-        "name": "Standart",
-        "description": "Normal Claude yanıtı",
-        "prefix": ""
-      },
-      "think": {
-        "name": "Düşün",
-        "description": "Temel uzatılmış düşünme",
-        "prefix": "think"
-      },
-      "thinkHard": {
-        "name": "Daha Fazla Düşün",
-        "description": "Daha kapsamlı değerlendirme",
-        "prefix": "think hard"
-      },
-      "thinkHarder": {
-        "name": "Derin Düşün",
-        "description": "Alternatiflerle derin analiz",
-        "prefix": "think harder"
-      },
-      "ultrathink": {
-        "name": "Ultra Düşün",
-        "description": "Maksimum düşünme bütçesi",
-        "prefix": "ultrathink"
-      }
-    },
-    "buttonTitle": "Düşünme modu: {{mode}}"
-  },
  "providerSelection": {
    "title": "AI Asistanını Seç",
    "description": "Yeni bir konuşma başlatmak için bir sağlayıcı seç",
--- a/src/i18n/locales/tr/sidebar.json
+++ b/src/i18n/locales/tr/sidebar.json
@@ -45,6 +45,7 @@
    "removeFromFavorites": "Favorilerden çıkar",
    "editSessionName": "Oturum adını elle düzenle",
    "deleteSession": "Bu oturumu kalıcı olarak sil",
+    "activeSessionIndicator": "Yakın zamanda etkin oturum (son 10 dakika)",
    "save": "Kaydet",
    "cancel": "İptal",
    "clearSearch": "Aramayı temizle",
--- a/src/i18n/locales/zh-CN/chat.json
+++ b/src/i18n/locales/zh-CN/chat.json
@@ -120,42 +120,6 @@
    "clearInput": "清空输入",
    "scrollToBottom": "滚动到底部"
  },
-  "thinkingMode": {
-    "selector": {
-      "title": "思考模式",
-      "description": "扩展思考给 Claude 更多时间来评估替代方案",
-      "active": "激活",
-      "tip": "更高的思考模式需要更多时间，但提供更彻底的分析"
-    },
-    "modes": {
-      "none": {
-        "name": "标准",
-        "description": "常规 Claude 响应",
-        "prefix": ""
-      },
-      "think": {
-        "name": "思考",
-        "description": "基本扩展思考",
-        "prefix": "思考"
-      },
-      "thinkHard": {
-        "name": "深入思考",
-        "description": "更彻底的评估",
-        "prefix": "深入思考"
-      },
-      "thinkHarder": {
-        "name": "更深入思考",
-        "description": "考虑替代方案的深度分析",
-        "prefix": "更深入思考"
-      },
-      "ultrathink": {
-        "name": "超级思考",
-        "description": "最大思考预算",
-        "prefix": "超级思考"
-      }
-    },
-    "buttonTitle": "思考模式：{{mode}}"
-  },
  "providerSelection": {
    "title": "选择您的 AI 助手",
    "description": "选择一个供应商以开始新对话",
--- a/src/i18n/locales/zh-CN/sidebar.json
+++ b/src/i18n/locales/zh-CN/sidebar.json
@@ -45,6 +45,7 @@
    "removeFromFavorites": "从收藏移除",
    "editSessionName": "手动编辑会话名称",
    "deleteSession": "永久删除此会话",
+    "activeSessionIndicator": "最近活跃的会话（最近 10 分钟）",
    "save": "保存",
    "cancel": "取消",
    "clearSearch": "清除搜索",
--- a/vite.config.js
+++ b/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
        }
      }
    },
Author	SHA1	Message	Date
Haileyesus	3576662e25	fix: remove thinking mode	2026-06-05 15:28:58 +03:00
Simos Mikelatos	c667b6a179	Update model version in OPTIONS description	2026-06-04 23:43:48 +02:00
Reza Moghaddam	fa9eaf5573	feat(chat): auto-detect text direction for RTL languages (#729 ) 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>	2026-06-04 22:24:07 +03:00
Vojtech	2edfef2e3f	fix(websocket): add 30s server-side heartbeat to prevent proxy idle disconnects (#770 ) The WebSocket gateway never sent ping frames, so any reverse proxy with an idle timeout (Cloudflare Tunnel ~100s, AWS ALB 60s, nginx 60s, etc.) would silently tear down /shell, /ws and /plugin-ws/* connections after the idle window. The UI reconnects automatically but users see a "Connecting to shell" toast every 1–3 minutes during normal use and any in-flight PTY/chat traffic can race the reconnect. Schedule a 30s ws.ping() per connection at the gateway level, cleared on close/error. ping/pong counts as protocol activity for all proxies that implement WebSocket correctly, so this single change covers every deployment topology without per-proxy tuning. Fixes #769 Co-authored-by: Haile <118998054+blackmammoth@users.noreply.github.com>	2026-06-04 22:07:59 +03:00
ehsanmim	96b16b42e4	fix(vite): proxy /plugin-ws WebSocket requests to the backend in dev (#757 ) Plugin WebSocket connections (e.g. the official Terminal plugin) hang in `npm run dev` because Vite proxies /api, /ws, and /shell but not /plugin-ws/*. Production is unaffected because the same Express server serves both the frontend and the WS gateway. Co-authored-by: Haile <118998054+blackmammoth@users.noreply.github.com>	2026-06-04 20:57:24 +03:00
Peter Buchegger	f082cdc63b	fix(websocket): reset unmountedRef on each effect re-run so token refresh reconnects (#721 ) The effect cleanup sets unmountedRef.current = true to prevent reconnects after the provider unmounts. Without an inverse reset at the start of the effect, re-running the effect (e.g. when the auth token rotates) leaves the ref true, and connect() short-circuits at its unmounted guard. The socket then stays permanently disconnected for the lifetime of the provider. Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com> Co-authored-by: Haile <118998054+blackmammoth@users.noreply.github.com>	2026-06-04 20:50:02 +03:00
Haile	d9e9df183f	fix: plugin svg icon sanitization (#817 ) * 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>	2026-06-02 13:24:38 +02:00
Haile	43c33d5cb1	fix: recognize claude auth token env (#818 )	2026-06-02 13:23:30 +02:00
viper151	b988e0da51	chore(release): v1.33.0	2026-06-01 20:57:51 +00:00
Haile	f132a21cd7	Fix/router basename root prefix (#815 ) * fix: harden router basename detection * fix: broaden icon basename detection * fix: ignore cross-origin basename hints * fix: keep root deployments from inheriting asset basenames Router basename detection must support root hosting and path-prefix hosting at runtime. The icon fallback used /icons/icon-192x192.png as a basename on root deployments. After login, React Router mounted at /icons while the current URL was /. That mismatch made authenticated root deployments render a blank page. Strip known asset directories even when they are the only path segment. Root icon URLs now keep basename ''. Prefixed /ai/icons/... URLs still resolve to /ai. --------- Co-authored-by: JohnGenri <myname945@gmail.com> Co-authored-by: Simos Mikelatos <simosmik@gmail.com>	2026-06-01 22:45:57 +02:00
CoderLuii	36b860e322	fix: preserve WebSocket frame type in plugin proxy (#594 ) * fix: preserve WebSocket frame type in plugin proxy The plugin WebSocket proxy relays all messages as binary frames regardless of the original frame type. This causes text-based ready messages to be forwarded as binary, so the browser never processes them and plugin UIs (like web-terminal) show a spinner indefinitely. Pass the isBinary flag through in both relay directions so the original frame type is preserved. Fixes CoderLuii/HolyClaude#11 * fix(plugins): preserve websocket frame type in proxy Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai> --------- Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>	2026-06-01 20:56:51 +03:00
CoderLuii	1e125f3db5	fix: refresh Claude auth status after login flow (#617 ) * fix: refresh Claude auth status after login flow * fix: rely on refreshed auth status after login --------- Co-authored-by: HolyCode User <noreply@holycode.local>	2026-05-31 14:17:27 +03:00
Peter Buchegger	dbc41dc91d	fix(chat): prevent double send on mobile by removing redundant submit handlers (#719 ) PromptInputSubmit already has type="submit" via the parent form, so the button's click triggers handleSubmit through the form's onSubmit path. The added onMouseDown/onTouchStart handlers created two extra paths that both invoked handleSubmit; on iOS Safari a single tap could fire both touchstart and a synthetic mousedown before isLoading state propagated, producing two messages and two image-upload roundtrips. Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	2026-05-30 15:50:45 +03:00
Haile	38bf21ddf5	fix: refine token usage reporting (#807 )	2026-05-30 10:09:27 +02:00
Haile	86948097aa	fix - group plugin settings by source (#808 )	2026-05-30 10:09:06 +02:00
Alex Navarro	951f58751c	fix(sidebar): keep session rename input visible while editing (#781 ) The rename input shares a parent div that uses `group-hover:opacity-100`, so moving the cursor off the row visually hid the input mid-edit. While editing, force the action panel to `opacity-100` and dismiss it via an outside-click listener instead of mouseleave. Also hide the relative-time badge so it does not overlap the input.	2026-05-29 18:04:35 +03:00
Alex Navarro	27e509a9b8	feat(sidebar): tooltip for the active-session indicator dot (#782 ) The pulsing green dot next to a session row signals that the session had activity in the last 10 minutes, but the meaning was undocumented. Hovering it now shows a translated tooltip, and an aria-label exposes the same text to screen readers. Uses the existing shared Tooltip component (portal-positioned, so it is not clipped by the sidebar overflow). Translation key added to all eight sidebar locale files (en, de, it, ja, ko, ru, tr, zh-CN).	2026-05-29 18:02:20 +03:00
Tim McNulty	295bad9c00	style: fix project star button location by replacing folder icon (#793 )	2026-05-29 17:54:56 +03:00
Haile	3b79aab958	Fix/use fallback models for claude (#806 ) * fix: remove the hide cursor on windows logic * feat(cursor): update fallback models * fix(claude): force fallback models and disable supportedModels lookup	2026-05-29 13:33:13 +02:00