style: improve UI for processing banner (#477)

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

@@ -1,5 +1,7 @@
 import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { cn } from '../../../../lib/utils';
+import SessionProviderLogo from '../../../llm-logo-provider/SessionProviderLogo';
 
 type ClaudeStatusProps = {
   status: {
@@ -12,33 +14,60 @@ type ClaudeStatusProps = {
   provider?: string;
 };
 
-const ACTION_WORDS = ['Thinking', 'Processing', 'Analyzing', 'Working', 'Computing', 'Reasoning'];
+const ACTION_KEYS = [
-const SPINNER_CHARS = ['*', '+', 'x', '.'];
+  'claudeStatus.actions.thinking',
+  'claudeStatus.actions.processing',
+  'claudeStatus.actions.analyzing',
+  'claudeStatus.actions.working',
+  'claudeStatus.actions.computing',
+  'claudeStatus.actions.reasoning',
+];
+const DEFAULT_ACTION_WORDS = ['Thinking', 'Processing', 'Analyzing', 'Working', 'Computing', 'Reasoning'];
+const ANIMATION_STEPS = 40;
+
+const PROVIDER_LABEL_KEYS: Record<string, string> = {
+  claude: 'messageTypes.claude',
+  codex: 'messageTypes.codex',
+  cursor: 'messageTypes.cursor',
+  gemini: 'messageTypes.gemini',
+};
+
+function formatElapsedTime(totalSeconds: number, t: (key: string, options?: Record<string, unknown>) => string) {
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+
+  if (minutes < 1) {
+    return t('claudeStatus.elapsed.seconds', { count: seconds, defaultValue: '{{count}}s' });
+  }
+
+  return t('claudeStatus.elapsed.minutesSeconds', {
+    minutes,
+    seconds,
+    defaultValue: '{{minutes}}m {{seconds}}s',
+  });
+}
 
 export default function ClaudeStatus({
   status,
   onAbort,
   isLoading,
-  provider: _provider = 'claude',
+  provider = 'claude',
 }: ClaudeStatusProps) {
+  const { t } = useTranslation('chat');
   const [elapsedTime, setElapsedTime] = useState(0);
   const [animationPhase, setAnimationPhase] = useState(0);
-  const [fakeTokens, setFakeTokens] = useState(0);
 
   useEffect(() => {
     if (!isLoading) {
       setElapsedTime(0);
-      setFakeTokens(0);
       return;
     }
 
     const startTime = Date.now();
-    const tokenRate = 30 + Math.random() * 20;
 
     const timer = window.setInterval(() => {
       const elapsed = Math.floor((Date.now() - startTime) / 1000);
       setElapsedTime(elapsed);
-      setFakeTokens(Math.floor(elapsed * tokenRate));
     }, 1000);
 
     return () => window.clearInterval(timer);
@@ -50,68 +79,118 @@ export default function ClaudeStatus({
     }
 
     const timer = window.setInterval(() => {
-      setAnimationPhase((previous) => (previous + 1) % SPINNER_CHARS.length);
+      setAnimationPhase((previous) => (previous + 1) % ANIMATION_STEPS);
     }, 500);
 
     return () => window.clearInterval(timer);
   }, [isLoading]);
 
-  if (!isLoading) {
+  // Note: showThinking only controls the reasoning accordion in messages, not this processing indicator
+  if (!isLoading && !status) {
     return null;
   }
 
-  // Note: showThinking only controls the reasoning accordion in messages, not this processing indicator
+  const actionWords = ACTION_KEYS.map((key, index) => t(key, { defaultValue: DEFAULT_ACTION_WORDS[index] }));
-  const actionIndex = Math.floor(elapsedTime / 3) % ACTION_WORDS.length;
+  const actionIndex = Math.floor(elapsedTime / 3) % actionWords.length;
-  const statusText = status?.text || ACTION_WORDS[actionIndex];
+  const statusText = status?.text || actionWords[actionIndex];
-  const tokens = status?.tokens || fakeTokens;
+  const cleanStatusText = statusText.replace(/[.]+$/, '');
-  const canInterrupt = status?.can_interrupt !== false;
+  const canInterrupt = isLoading && status?.can_interrupt !== false;
-  const currentSpinner = SPINNER_CHARS[animationPhase];
+  const providerLabelKey = PROVIDER_LABEL_KEYS[provider];
+  const providerLabel = providerLabelKey
+    ? t(providerLabelKey)
+    : t('claudeStatus.providers.assistant', { defaultValue: 'Assistant' });
+  const animatedDots = '.'.repeat((animationPhase % 3) + 1);
+  const elapsedLabel =
+    elapsedTime > 0
+      ? t('claudeStatus.elapsed.label', {
+          time: formatElapsedTime(elapsedTime, t),
+          defaultValue: '{{time}} elapsed',
+        })
+      : t('claudeStatus.elapsed.startingNow', { defaultValue: 'Starting now' });
 
   return (
     <div className="w-full mb-3 sm:mb-6 animate-in slide-in-from-bottom duration-300">
-      <div className="flex items-center justify-between max-w-4xl mx-auto bg-gray-800 dark:bg-gray-900 text-white rounded-lg shadow-lg px-2.5 py-2 sm:px-4 sm:py-3 border border-gray-700 dark:border-gray-800">
+      <div className="relative max-w-4xl mx-auto overflow-hidden rounded-2xl border border-border/70 bg-card/90 shadow-md backdrop-blur-md">
-        <div className="flex-1 min-w-0">
+        <div className="pointer-events-none absolute inset-0 bg-gradient-to-r from-primary/10 via-transparent to-sky-500/10 dark:from-primary/20 dark:to-sky-400/20" />
-          <div className="flex items-center gap-2 sm:gap-3">
-            <span
-              className={cn(
-                'text-base sm:text-xl transition-all duration-500 flex-shrink-0',
-                animationPhase % 2 === 0 ? 'text-blue-400 scale-110' : 'text-blue-300',
-              )}
-            >
-              {currentSpinner}
-            </span>
 
-            <div className="flex-1 min-w-0">
+        <div className="relative px-3 py-3 sm:px-4 sm:py-3.5">
-              <div className="flex items-center gap-1.5 sm:gap-2">
+          <div className="flex flex-col gap-2.5 sm:flex-row sm:items-center sm:justify-between">
-                <span className="font-medium text-xs sm:text-sm truncate">{statusText}...</span>
+            <div className="flex min-w-0 items-start gap-3" role="status" aria-live="polite">
-                <span className="text-gray-400 text-xs sm:text-sm flex-shrink-0">({elapsedTime}s)</span>
+              <div className="relative mt-0.5 flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-xl border border-primary/25 bg-primary/10">
-                {tokens > 0 && (
+                <SessionProviderLogo provider={provider} className="h-5 w-5" />
-                  <>
+                <span className="absolute -right-0.5 -top-0.5 flex h-2.5 w-2.5">
-                    <span className="text-gray-500 hidden sm:inline">|</span>
+                  {isLoading && (
-                    <span className="text-gray-300 text-xs sm:text-sm hidden sm:inline flex-shrink-0">
+                    <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400/70" />
-                      tokens {tokens.toLocaleString()}
+                  )}
+                  <span
+                    className={cn(
+                      'relative inline-flex h-2.5 w-2.5 rounded-full',
+                      isLoading ? 'bg-emerald-400' : 'bg-amber-400',
+                    )}
+                  />
+                </span>
+              </div>
+
+              <div className="min-w-0">
+                <div className="mb-0.5 flex items-center gap-2 text-[10px] font-semibold uppercase tracking-[0.15em] text-muted-foreground">
+                  <span>{providerLabel}</span>
+                  <span
+                    className={cn(
+                      'rounded-full px-2 py-0.5 text-[9px] tracking-[0.14em]',
+                      isLoading
+                        ? 'bg-emerald-500/15 text-emerald-500 dark:text-emerald-400'
+                        : 'bg-amber-500/15 text-amber-600 dark:text-amber-400',
+                    )}
+                  >
+                    {isLoading
+                      ? t('claudeStatus.state.live', { defaultValue: 'Live' })
+                      : t('claudeStatus.state.paused', { defaultValue: 'Paused' })}
+                  </span>
+                </div>
+
+                <p className="truncate text-sm font-semibold text-foreground sm:text-[15px]">
+                  {cleanStatusText}
+                  {isLoading && (
+                    <span aria-hidden="true" className="text-primary">
+                      {animatedDots}
                     </span>
-                  </>
+                  )}
-                )}
+                </p>
-                <span className="text-gray-500 hidden sm:inline">|</span>
+
-                <span className="text-gray-400 text-xs sm:text-sm hidden sm:inline">esc to stop</span>
+                <div className="mt-1 flex flex-wrap items-center gap-1.5 text-[11px] text-muted-foreground sm:text-xs">
+                  <span
+                    aria-hidden="true"
+                    className="inline-flex items-center -ml-2 rounded-full border border-border/70 bg-background/60 px-2 py-0.5"
+                  >
+                    {elapsedLabel}
+                  </span>
+                </div>
               </div>
             </div>
+
+            {canInterrupt && onAbort && (
+              <div className="w-full sm:w-auto sm:text-right">
+                <button
+                  type="button"
+                  onClick={onAbort}
+                  className="inline-flex w-full items-center justify-center gap-2 rounded-xl bg-destructive px-3.5 py-2 text-sm font-semibold text-destructive-foreground shadow-sm ring-1 ring-destructive/40 transition-opacity hover:opacity-95 active:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-destructive/70 sm:w-auto"
+                >
+                  <svg className="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                  </svg>
+                  <span>{t('claudeStatus.controls.stopGeneration', { defaultValue: 'Stop Generation' })}</span>
+                  <span className="rounded-md bg-black/20 px-1.5 py-0.5 text-[10px] uppercase tracking-wide text-destructive-foreground/95">
+                    Esc
+                  </span>
+                </button>
+
+                <p className="mt-1 hidden text-[11px] text-muted-foreground sm:block">
+                  {t('claudeStatus.controls.pressEscToStop', { defaultValue: 'Press Esc anytime to stop' })}
+                </p>
+              </div>
+            )}
           </div>
         </div>
-
-        {canInterrupt && onAbort && (
-          <button
-            type="button"
-            onClick={onAbort}
-            className="ml-2 sm:ml-3 text-xs bg-red-600 hover:bg-red-700 active:bg-red-800 text-white px-2 py-1 sm:px-3 sm:py-1.5 rounded-md transition-colors flex items-center gap-1 sm:gap-1.5 flex-shrink-0 font-medium"
-          >
-            <svg className="w-3 h-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 className="hidden sm:inline">Stop</span>
-          </button>
-        )}
       </div>
     </div>
   );

src/i18n/locales/en/chat.json

@@ -233,10 +233,37 @@
     "startCli": "Starting Claude CLI in {{projectName}}",
     "defaultCommand": "command"
   },
+  "claudeStatus": {
+    "actions": {
+      "thinking": "Thinking",
+      "processing": "Processing",
+      "analyzing": "Analyzing",
+      "working": "Working",
+      "computing": "Computing",
+      "reasoning": "Reasoning"
+    },
+    "state": {
+      "live": "Live",
+      "paused": "Paused"
+    },
+    "elapsed": {
+      "seconds": "{{count}}s",
+      "minutesSeconds": "{{minutes}}m {{seconds}}s",
+      "label": "{{time}} elapsed",
+      "startingNow": "Starting now"
+    },
+    "controls": {
+      "stopGeneration": "Stop Generation",
+      "pressEscToStop": "Press Esc anytime to stop"
+    },
+    "providers": {
+      "assistant": "Assistant"
+    }
+  },
   "projectSelection": {
     "startChatWithProvider": "Select a project to start chatting with {{provider}}"
   },
   "tasks": {
     "nextTaskPrompt": "Start the next task"
   }
-}
+}

src/i18n/locales/ja/chat.json

@@ -205,5 +205,32 @@
     "runCommand": "{{projectName}}で{{command}}を実行",
     "startCli": "{{projectName}}でClaude CLIを起動しています",
     "defaultCommand": "コマンド"
+  },
+  "claudeStatus": {
+    "actions": {
+      "thinking": "Thinking",
+      "processing": "Processing",
+      "analyzing": "Analyzing",
+      "working": "Working",
+      "computing": "Computing",
+      "reasoning": "Reasoning"
+    },
+    "state": {
+      "live": "Live",
+      "paused": "Paused"
+    },
+    "elapsed": {
+      "seconds": "{{count}}s",
+      "minutesSeconds": "{{minutes}}m {{seconds}}s",
+      "label": "{{time}} elapsed",
+      "startingNow": "Starting now"
+    },
+    "controls": {
+      "stopGeneration": "Stop Generation",
+      "pressEscToStop": "Press Esc anytime to stop"
+    },
+    "providers": {
+      "assistant": "Assistant"
+    }
   }
 }

src/i18n/locales/ko/chat.json

@@ -215,10 +215,37 @@
     "startCli": "{{projectName}}에서 Claude CLI 시작",
     "defaultCommand": "명령어"
   },
+  "claudeStatus": {
+    "actions": {
+      "thinking": "Thinking",
+      "processing": "Processing",
+      "analyzing": "Analyzing",
+      "working": "Working",
+      "computing": "Computing",
+      "reasoning": "Reasoning"
+    },
+    "state": {
+      "live": "Live",
+      "paused": "Paused"
+    },
+    "elapsed": {
+      "seconds": "{{count}}s",
+      "minutesSeconds": "{{minutes}}m {{seconds}}s",
+      "label": "{{time}} elapsed",
+      "startingNow": "Starting now"
+    },
+    "controls": {
+      "stopGeneration": "Stop Generation",
+      "pressEscToStop": "Press Esc anytime to stop"
+    },
+    "providers": {
+      "assistant": "Assistant"
+    }
+  },
   "projectSelection": {
     "startChatWithProvider": "{{provider}}와 채팅을 시작하려면 프로젝트를 선택하세요"
   },
   "tasks": {
     "nextTaskPrompt": "다음 작업 시작"
   }
-}
+}

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

@@ -215,10 +215,37 @@
     "startCli": "在 {{projectName}} 中启动 Claude CLI",
     "defaultCommand": "命令"
   },
+  "claudeStatus": {
+    "actions": {
+      "thinking": "Thinking",
+      "processing": "Processing",
+      "analyzing": "Analyzing",
+      "working": "Working",
+      "computing": "Computing",
+      "reasoning": "Reasoning"
+    },
+    "state": {
+      "live": "Live",
+      "paused": "Paused"
+    },
+    "elapsed": {
+      "seconds": "{{count}}s",
+      "minutesSeconds": "{{minutes}}m {{seconds}}s",
+      "label": "{{time}} elapsed",
+      "startingNow": "Starting now"
+    },
+    "controls": {
+      "stopGeneration": "Stop Generation",
+      "pressEscToStop": "Press Esc anytime to stop"
+    },
+    "providers": {
+      "assistant": "Assistant"
+    }
+  },
   "projectSelection": {
     "startChatWithProvider": "选择一个项目以开始与 {{provider}} 聊天"
   },
   "tasks": {
     "nextTaskPrompt": "开始下一个任务"
   }
-}
+}