From 20eef5cd2dcaa13c3b7cc6f2b636b7ca8270f9ed Mon Sep 17 00:00:00 2001
From: catlog22 <catlog22@github.com>
Date: Fri, 27 Feb 2026 13:39:08 +0800
Subject: [PATCH] feat: update styles and improve Chinese localization in CLI
 manager

---
 ccw/frontend/src/components/hook/HookCard.tsx | 26 ++++++++++++++++
 .../components/specs/InjectionControlTab.tsx  |  2 ++
 ccw/frontend/src/components/ui/Progress.tsx   |  2 +-
 ccw/frontend/src/locales/zh/cli-manager.json  | 30 +++++++++----------
 4 files changed, 44 insertions(+), 16 deletions(-)

diff --git a/ccw/frontend/src/components/hook/HookCard.tsx b/ccw/frontend/src/components/hook/HookCard.tsx
index bdecd2c6..42cac274 100644
--- a/ccw/frontend/src/components/hook/HookCard.tsx
+++ b/ccw/frontend/src/components/hook/HookCard.tsx
@@ -98,6 +98,29 @@ function getTriggerVariant(trigger: HookTriggerType): 'default' | 'secondary' |
 
 // ========== Component ==========
 
+// ========== Hook Name Translation ==========
+
+/**
+ * Get translated hook name if available
+ * Falls back to original name if no translation exists
+ */
+function getHookDisplayName(name: string, formatMessage: (msg: { id: string }) => string): string {
+  const translationKey = `cliHooks.templates.templates.${name}.name`;
+  // Try to get translation, fallback to original name
+  try {
+    const translated = formatMessage({ id: translationKey });
+    // If translation returns the key itself, no translation exists
+    if (translated && !translated.includes('cliHooks.templates.templates')) {
+      return translated;
+    }
+  } catch {
+    // Translation not found
+  }
+  return name;
+}
+
+// ========== Component ==========
+
 export function HookCard({
   hook,
   isExpanded,
@@ -108,6 +131,9 @@ export function HookCard({
 }: HookCardProps) {
   const { formatMessage } = useIntl();
 
+  // Get translated hook name
+  const displayName = getHookDisplayName(hook.name, formatMessage);
+
   const handleToggle = () => {
     onToggle(hook.name, !hook.enabled);
   };
diff --git a/ccw/frontend/src/components/specs/InjectionControlTab.tsx b/ccw/frontend/src/components/specs/InjectionControlTab.tsx
index 7d70a516..a9148fea 100644
--- a/ccw/frontend/src/components/specs/InjectionControlTab.tsx
+++ b/ccw/frontend/src/components/specs/InjectionControlTab.tsx
@@ -603,6 +603,8 @@ export function InjectionControlTab({ className }: InjectionControlTabProps) {
                       !isOverLimit && isOverWarning && 'bg-yellow-100 dark:bg-yellow-900/30'
                     )}
                     indicatorClassName={cn(
+                      // Default: use a distinct blue color
+                      !isOverLimit && !isOverWarning && 'bg-sky-500 dark:bg-sky-400',
                       isOverLimit && 'bg-destructive',
                       !isOverLimit && isOverWarning && 'bg-yellow-500'
                     )}
diff --git a/ccw/frontend/src/components/ui/Progress.tsx b/ccw/frontend/src/components/ui/Progress.tsx
index a77bd5f1..6a273469 100644
--- a/ccw/frontend/src/components/ui/Progress.tsx
+++ b/ccw/frontend/src/components/ui/Progress.tsx
@@ -15,7 +15,7 @@ const Progress = React.forwardRef<
     <ProgressPrimitive.Root
       ref={ref}
       className={cn(
-        "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
+        "relative h-4 w-full overflow-hidden rounded-full bg-muted",
         className
       )}
       {...props}
diff --git a/ccw/frontend/src/locales/zh/cli-manager.json b/ccw/frontend/src/locales/zh/cli-manager.json
index 013c12cc..b186bb1e 100644
--- a/ccw/frontend/src/locales/zh/cli-manager.json
+++ b/ccw/frontend/src/locales/zh/cli-manager.json
@@ -160,28 +160,28 @@
           "description": "监控会话元数据文件变更 (workflow-session.json)"
         },
         "stop-notify": {
-          "name": "停止通知",
+          "name": "响应完成通知",
           "description": "当 Claude 完成响应时通知仪表盘"
         },
         "auto-format-on-write": {
-          "name": "写入自动格式化",
-          "description": "在 Claude 写入或编辑文件后自动格式化"
+          "name": "自动格式化",
+          "description": "Claude 写入或编辑文件后自动格式化代码"
         },
         "auto-lint-on-write": {
-          "name": "写入自动检查",
-          "description": "在 Claude 写入或编辑文件后自动进行 Lint 检查"
+          "name": "自动代码检查",
+          "description": "Claude 写入或编辑文件后自动进行 Lint 检查"
         },
         "block-sensitive-files": {
-          "name": "阻止敏感文件修改",
+          "name": "敏感文件保护",
           "description": "阻止对敏感文件 (.env、密钥、凭据) 的修改"
         },
         "git-auto-stage": {
           "name": "Git 自动暂存",
-          "description": "当 Claude 完成响应时自动暂存所有修改的文件"
+          "description": "Claude 完成响应时自动暂存所有修改的文件"
         },
         "post-edit-index": {
-          "name": "编辑后索引",
-          "description": "文件修改时通知索引服务"
+          "name": "编辑后索引更新",
+          "description": "文件修改时通知索引服务更新"
         },
         "session-end-summary": {
           "name": "会话结束摘要",
@@ -192,16 +192,16 @@
           "description": "会话开始时注入项目指南和最近开发历史"
         },
         "memory-v2-extract": {
-          "name": "Memory V2 提取",
-          "description": "会话结束时触发 Phase 1 提取（空闲期后）"
+          "name": "记忆提取",
+          "description": "会话结束时触发记忆提取（第一阶段）"
         },
         "memory-v2-auto-consolidate": {
-          "name": "Memory V2 自动合并",
-          "description": "提取作业完成后触发 Phase 2 合并"
+          "name": "记忆自动合并",
+          "description": "提取完成后自动合并生成 MEMORY.md（第二阶段）"
         },
         "memory-sync-dashboard": {
-          "name": "Memory 同步仪表盘",
-          "description": "变更时将 Memory V2 状态同步到仪表盘"
+          "name": "记忆状态同步",
+          "description": "记忆变更时同步状态到仪表盘"
         }
       },
       "actions": {