docs: add nginx subpath deployment template

Users deploying behind a reverse proxy need a config they can adapt.

The template documents each proxy block and centralizes upstream/subpath values.

It also notes that Nginx location matchers still require literal subpath edits.

docs/nginx-subpath-template.conf

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

package.json

@@ -67,7 +67,7 @@
   "author": "CloudCLI UI Contributors",
   "license": "AGPL-3.0-or-later",
   "dependencies": {
-    "@anthropic-ai/claude-agent-sdk": "^0.3.165",
+    "@anthropic-ai/claude-agent-sdk": "^0.2.116",
     "@codemirror/lang-css": "^6.3.1",
     "@codemirror/lang-html": "^6.4.9",
     "@codemirror/lang-javascript": "^6.2.4",

public/modelConstants.js

@@ -11,7 +11,7 @@ export const CLAUDE_MODELS = {
     {
       value: "default",
       label: "Default (recommended)",
-      description: "Use the default model (currently Opus 4.8 (1M context)) · $5/$25 per Mtok",
+      description: "Use the default model (currently Opus 4.7 (1M context)) · $5/$25 per Mtok",
     },
     {
       value: "sonnet",

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

@@ -18,7 +18,6 @@ type ShellIncomingMessage = {
   provider?: string;
   initialCommand?: string;
   isPlainShell?: boolean;
-  forceRestart?: boolean;
 };
 
 type PtySessionEntry = {
@@ -181,7 +180,6 @@ export function handleShellConnection(
         const hasSession = readBoolean(data.hasSession);
         const provider = readString(data.provider, 'claude');
         const initialCommand = readString(data.initialCommand);
-        const forceRestart = readBoolean(data.forceRestart);
         const isPlainShell =
           readBoolean(data.isPlainShell) ||
           (!!initialCommand && !hasSession) ||
@@ -202,7 +200,7 @@ export function handleShellConnection(
             : '';
         ptySessionKey = `${projectPath}_${sessionId ?? 'default'}${commandSuffix}`;
 
-        if (isLoginCommand || forceRestart) {
+        if (isLoginCommand) {
           const oldSession = ptySessionsMap.get(ptySessionKey);
           if (oldSession) {
             if (oldSession.timeoutId) {
@@ -213,8 +211,7 @@ export function handleShellConnection(
           }
         }
 
-        const existingSession =
-          isLoginCommand || forceRestart ? null : ptySessionsMap.get(ptySessionKey);
+        const existingSession = isLoginCommand ? null : ptySessionsMap.get(ptySessionKey);
         if (existingSession) {
           shellProcess = existingSession.pty;
           if (existingSession.timeoutId) {
@@ -371,10 +368,6 @@ export function handleShellConnection(
           }
 
           const session = ptySessionsMap.get(ptySessionKey);
-          if (session && session.pty !== shellProcess) {
-            return;
-          }
-
           if (session && session.ws && session.ws.readyState === WebSocket.OPEN) {
             session.ws.send(
               JSON.stringify({
@@ -458,10 +451,6 @@ export function handleShellConnection(
 
     session.ws = null;
     session.timeoutId = setTimeout(() => {
-      if (ptySessionsMap.get(ptySessionKey as string) !== session) {
-        return;
-      }
-
       session.pty.kill();
       ptySessionsMap.delete(ptySessionKey as string);
     }, PTY_SESSION_TIMEOUT);

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

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

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

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

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

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

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

@@ -321,7 +321,6 @@ export default function ProviderSelectionEmptyState({
 
           <p className="mt-3 flex items-center justify-center gap-1.5 text-center text-xs text-muted-foreground/60">
             <Trans
-              ns="chat"
               i18nKey="providerSelection.pressToSearch"
               values={{ shortcut: MOD_KEY === "⌘" ? "⌘K" : "Ctrl+K" }}
               components={{

src/components/shell/hooks/useShellConnection.ts

@@ -2,7 +2,6 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import type { MutableRefObject } from 'react';
 import type { FitAddon } from '@xterm/addon-fit';
 import type { Terminal } from '@xterm/xterm';
-
 import type { Project, ProjectSession } from '../../../types/app';
 import { TERMINAL_INIT_DELAY_MS } from '../constants/constants';
 import { getShellWebSocketUrl, parseShellMessage, sendSocketMessage } from '../utils/socket';
@@ -32,8 +31,8 @@ type UseShellConnectionResult = {
   isConnected: boolean;
   isConnecting: boolean;
   closeSocket: () => void;
-  connectToShell: (options?: { forceRestart?: boolean }) => void;
-  disconnectFromShell: (options?: { suppressAutoConnect?: boolean }) => void;
+  connectToShell: () => void;
+  disconnectFromShell: () => void;
 };
 
 export function useShellConnection({
@@ -55,8 +54,6 @@ export function useShellConnection({
   const [isConnected, setIsConnected] = useState(false);
   const [isConnecting, setIsConnecting] = useState(false);
   const connectingRef = useRef(false);
-  const forceRestartOnInitRef = useRef(false);
-  const suppressAutoConnectRef = useRef(false);
 
   const handleProcessCompletion = useCallback(
     (output: string) => {
@@ -144,8 +141,6 @@ export function useShellConnection({
             }
 
             currentFitAddon.fit();
-            const forceRestart = forceRestartOnInitRef.current;
-            forceRestartOnInitRef.current = false;
 
             sendSocketMessage(socket, {
               type: 'init',
@@ -157,7 +152,6 @@ export function useShellConnection({
               rows: currentTerminal.rows,
               initialCommand: initialCommandRef.current,
               isPlainShell: isPlainShellRef.current,
-              forceRestart,
             });
           }, TERMINAL_INIT_DELAY_MS);
         };
@@ -183,7 +177,6 @@ export function useShellConnection({
         setIsConnected(false);
         setIsConnecting(false);
         connectingRef.current = false;
-        forceRestartOnInitRef.current = false;
       }
     },
     [
@@ -202,40 +195,27 @@ export function useShellConnection({
     ],
   );
 
-  const connectToShell = useCallback((options?: { forceRestart?: boolean }) => {
+  const connectToShell = useCallback(() => {
     if (!isInitialized || isConnected || isConnecting || connectingRef.current) {
       return;
     }
 
-    forceRestartOnInitRef.current = Boolean(options?.forceRestart);
-    suppressAutoConnectRef.current = false;
     connectingRef.current = true;
     setIsConnecting(true);
     connectWebSocket(true);
   }, [connectWebSocket, isConnected, isConnecting, isInitialized]);
 
-  const disconnectFromShell = useCallback((options?: { suppressAutoConnect?: boolean }) => {
-    if (options?.suppressAutoConnect) {
-      suppressAutoConnectRef.current = true;
-    }
-
+  const disconnectFromShell = useCallback(() => {
     closeSocket();
     clearTerminalScreen();
     setIsConnected(false);
     setIsConnecting(false);
     connectingRef.current = false;
-    forceRestartOnInitRef.current = false;
     setAuthUrl('');
   }, [clearTerminalScreen, closeSocket, setAuthUrl]);
 
   useEffect(() => {
-    if (
-      !autoConnect ||
-      suppressAutoConnectRef.current ||
-      !isInitialized ||
-      isConnecting ||
-      isConnected
-    ) {
+    if (!autoConnect || !isInitialized || isConnecting || isConnected) {
       return;
     }
 

src/components/shell/types/types.ts

@@ -1,7 +1,6 @@
 import type { MutableRefObject, RefObject } from 'react';
 import type { FitAddon } from '@xterm/addon-fit';
 import type { Terminal } from '@xterm/xterm';
-
 import type { Project, ProjectSession } from '../../../types/app';
 
 export type AuthCopyStatus = 'idle' | 'copied' | 'failed';
@@ -16,7 +15,6 @@ export type ShellInitMessage = {
   rows: number;
   initialCommand: string | null | undefined;
   isPlainShell: boolean;
-  forceRestart?: boolean;
 };
 
 export type ShellResizeMessage = {
@@ -71,8 +69,8 @@ export type UseShellRuntimeResult = {
   isConnecting: boolean;
   authUrl: string;
   authUrlVersion: number;
-  connectToShell: (options?: { forceRestart?: boolean }) => void;
-  disconnectFromShell: (options?: { suppressAutoConnect?: boolean }) => void;
+  connectToShell: () => void;
+  disconnectFromShell: () => void;
   openAuthUrlInBrowser: (url?: string) => boolean;
   copyAuthUrlToClipboard: (url?: string) => Promise<boolean>;
 };

src/components/shell/view/Shell.tsx

@@ -1,6 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-
 import '@xterm/xterm/css/xterm.css';
 import type { Project, ProjectSession } from '../../../types/app';
 import {
@@ -14,7 +13,6 @@ import {
 import { useShellRuntime } from '../hooks/useShellRuntime';
 import { sendSocketMessage } from '../utils/socket';
 import { getSessionDisplayName } from '../utils/auth';
-
 import ShellConnectionOverlay from './subcomponents/ShellConnectionOverlay';
 import ShellEmptyState from './subcomponents/ShellEmptyState';
 import ShellHeader from './subcomponents/ShellHeader';
@@ -48,8 +46,6 @@ export default function Shell({
   const [isRestarting, setIsRestarting] = useState(false);
   const [cliPromptOptions, setCliPromptOptions] = useState<CliPromptOption[] | null>(null);
   const promptCheckTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const restartTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const restartAfterInitRef = useRef(false);
   const onOutputRef = useRef<(() => void) | null>(null);
 
   const {
@@ -144,7 +140,6 @@ export default function Shell({
   useEffect(() => {
     return () => {
       if (promptCheckTimer.current) clearTimeout(promptCheckTimer.current);
-      if (restartTimerRef.current) clearTimeout(restartTimerRef.current);
     };
   }, []);
 
@@ -195,42 +190,12 @@ export default function Shell({
   );
 
   const handleRestartShell = useCallback(() => {
-    restartAfterInitRef.current = true;
     setIsRestarting(true);
-    if (restartTimerRef.current) {
-      clearTimeout(restartTimerRef.current);
-    }
-    restartTimerRef.current = setTimeout(() => {
+    window.setTimeout(() => {
       setIsRestarting(false);
-      restartTimerRef.current = null;
     }, SHELL_RESTART_DELAY_MS);
   }, []);
 
-  const handleDisconnectShell = useCallback(() => {
-    restartAfterInitRef.current = false;
-    if (restartTimerRef.current) {
-      clearTimeout(restartTimerRef.current);
-      restartTimerRef.current = null;
-    }
-    setIsRestarting(false);
-    disconnectFromShell({ suppressAutoConnect: true });
-  }, [disconnectFromShell]);
-
-  useEffect(() => {
-    if (
-      !restartAfterInitRef.current ||
-      isRestarting ||
-      !isInitialized ||
-      isConnected ||
-      isConnecting
-    ) {
-      return;
-    }
-
-    restartAfterInitRef.current = false;
-    connectToShell({ forceRestart: true });
-  }, [connectToShell, isConnected, isConnecting, isInitialized, isRestarting]);
-
   if (!selectedProject) {
     return (
       <ShellEmptyState
@@ -289,7 +254,7 @@ export default function Shell({
         isRestarting={isRestarting}
         hasSession={Boolean(selectedSession)}
         sessionDisplayNameShort={sessionDisplayNameShort}
-        onDisconnect={handleDisconnectShell}
+        onDisconnect={disconnectFromShell}
         onRestart={handleRestartShell}
         statusNewSessionText={t('shell.status.newSession')}
         statusInitializingText={t('shell.status.initializing')}
@@ -298,7 +263,7 @@ export default function Shell({
         disconnectTitle={t('shell.actions.disconnectTitle')}
         restartLabel={t('shell.actions.restart')}
         restartTitle={t('shell.actions.restartTitle')}
-        disableRestart={isRestarting || !isInitialized}
+        disableRestart={isRestarting || isConnected}
       />
 
       <div className="relative flex-1 overflow-hidden p-2">
@@ -316,7 +281,7 @@ export default function Shell({
             connectLabel={t('shell.actions.connect')}
             connectTitle={t('shell.actions.connectTitle')}
             connectingLabel={t('shell.connecting')}
-            onConnect={handleRestartShell}
+            onConnect={connectToShell}
           />
         )}
 

src/components/shell/view/subcomponents/ShellConnectionOverlay.tsx

@@ -1,5 +1,3 @@
-import { Loader2, RotateCcw } from 'lucide-react';
-
 type ShellConnectionOverlayProps = {
   mode: 'loading' | 'connect' | 'connecting';
   description: string;
@@ -21,42 +19,40 @@ export default function ShellConnectionOverlay({
 }: ShellConnectionOverlayProps) {
   if (mode === 'loading') {
     return (
-      <div className="absolute inset-0 z-20 flex items-center justify-center bg-gray-950/90">
-        <div className="inline-flex items-center gap-2 text-sm font-medium text-gray-100">
-          <Loader2 className="h-4 w-4 animate-spin text-blue-300" aria-hidden="true" />
-          <span>{loadingLabel}</span>
-        </div>
+      <div className="absolute inset-0 flex items-center justify-center bg-gray-900 bg-opacity-90">
+        <div className="text-white">{loadingLabel}</div>
       </div>
     );
   }
 
   if (mode === 'connect') {
     return (
-      <div className="absolute inset-0 z-20 flex items-center justify-center bg-gray-950/90 p-6">
-        <div className="flex w-full max-w-md flex-col items-center gap-3 text-center">
+      <div className="absolute inset-0 flex items-center justify-center bg-gray-900 bg-opacity-90 p-4">
+        <div className="w-full max-w-sm text-center">
           <button
-            type="button"
             onClick={onConnect}
-            className="pointer-events-auto inline-flex min-h-12 w-full max-w-xs cursor-pointer items-center justify-center gap-2 rounded-md bg-emerald-600 px-5 py-3 text-base font-semibold text-white shadow-lg shadow-emerald-950/30 transition-colors hover:bg-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-300 focus:ring-offset-2 focus:ring-offset-gray-950 active:bg-emerald-700"
+            className="flex w-full items-center justify-center space-x-2 rounded-lg bg-green-600 px-6 py-3 text-base font-medium text-white transition-colors hover:bg-green-700 sm:w-auto"
             title={connectTitle}
           >
-            <RotateCcw className="h-4 w-4" aria-hidden="true" />
-            <span className="min-w-0 truncate">{connectLabel}</span>
+            <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+            </svg>
+            <span>{connectLabel}</span>
           </button>
-          <p className="max-w-md break-words px-2 text-sm leading-6 text-gray-300">{description}</p>
+          <p className="mt-3 px-2 text-sm text-gray-400">{description}</p>
         </div>
       </div>
     );
   }
 
   return (
-    <div className="absolute inset-0 z-20 flex items-center justify-center bg-gray-950/90 p-6">
-      <div className="flex w-full max-w-md flex-col items-center gap-3 text-center">
-        <div className="flex items-center justify-center gap-3 text-yellow-300">
-          <Loader2 className="h-5 w-5 animate-spin" aria-hidden="true" />
+    <div className="absolute inset-0 flex items-center justify-center bg-gray-900 bg-opacity-90 p-4">
+      <div className="w-full max-w-sm text-center">
+        <div className="flex items-center justify-center space-x-3 text-yellow-400">
+          <div className="h-6 w-6 animate-spin rounded-full border-2 border-yellow-400 border-t-transparent"></div>
           <span className="text-base font-medium">{connectingLabel}</span>
         </div>
-        <p className="max-w-md break-words px-2 text-sm leading-6 text-gray-300">{description}</p>
+        <p className="mt-3 px-2 text-sm text-gray-400">{description}</p>
       </div>
     </div>
   );

src/components/shell/view/subcomponents/ShellHeader.tsx

@@ -1,5 +1,3 @@
-import { RotateCcw, X } from 'lucide-react';
-
 type ShellHeaderProps = {
   isConnected: boolean;
   isInitialized: boolean;
@@ -52,27 +50,34 @@ export default function ShellHeader({
           {isRestarting && <span className="text-xs text-blue-400">{statusRestartingText}</span>}
         </div>
 
-        <div className="flex items-center gap-2">
+        <div className="flex items-center space-x-3">
           {isConnected && (
             <button
-              type="button"
               onClick={onDisconnect}
-              className="inline-flex h-8 items-center gap-1.5 rounded-md bg-red-600 px-3 text-xs font-medium text-white transition-colors hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-400/70 focus:ring-offset-2 focus:ring-offset-gray-800"
+              className="flex items-center space-x-1 rounded bg-red-600 px-3 py-1 text-xs text-white hover:bg-red-700"
               title={disconnectTitle}
             >
-              <X className="h-3.5 w-3.5" aria-hidden="true" />
+              <svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
               <span>{disconnectLabel}</span>
             </button>
           )}
 
           <button
-            type="button"
             onClick={onRestart}
             disabled={disableRestart}
-            className="inline-flex h-8 items-center gap-1.5 rounded-md border border-gray-600/80 bg-gray-700/70 px-3 text-xs font-medium text-gray-100 transition-colors hover:border-blue-400/70 hover:bg-blue-600/80 hover:text-white focus:outline-none focus:ring-2 focus:ring-blue-400/70 focus:ring-offset-2 focus:ring-offset-gray-800 disabled:cursor-not-allowed disabled:border-transparent disabled:bg-transparent disabled:text-gray-500 disabled:opacity-60"
+            className="flex items-center space-x-1 text-xs text-gray-400 hover:text-white disabled:cursor-not-allowed disabled:opacity-50"
             title={restartTitle}
           >
-            <RotateCcw className={`h-3.5 w-3.5 ${isRestarting ? 'animate-spin' : ''}`} aria-hidden="true" />
+            <svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+              />
+            </svg>
             <span>{restartLabel}</span>
           </button>
         </div>

src/contexts/WebSocketContext.tsx

@@ -36,12 +36,8 @@ 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) {

src/i18n/locales/en/chat.json

@@ -229,7 +229,7 @@
       "disconnect": "Disconnect",
       "disconnectTitle": "Disconnect from shell",
       "restart": "Restart",
-      "restartTitle": "Restart Shell",
+      "restartTitle": "Restart Shell (disconnect first)",
       "connect": "Continue in Shell",
       "connectTitle": "Connect to shell"
     },

vite.config.js

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