From ec14f4a8eab9076942c89a9f2f7eb8e3a3d7a177 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=B7=E7=94=B5=E8=8A=BD=E8=A1=A3?=
 <zhangyanghaha0407@outlook.com>
Date: Sun, 22 Mar 2026 16:44:12 -0400
Subject: [PATCH] feat(04-02): restyle RecoveryBanner with design tokens and
 update NeedsAttention label

- Replace all hardcoded Tailwind colors with CSS custom properties (--warn, --warn-soft, --text, --muted, --panel-soft, --success, --danger, --muted-strong)
- Use rounded-[10px] instead of rounded-lg for design system consistency
- Add aria-label on dismiss button for accessibility
- Update NeedsAttention label to 'Needs Your Attention' in en.ts and zh.ts
---
 .../components/dashboard/RecoveryBanner.tsx      | 16 ++++++++--------
 src/renderer/i18n/en.ts                          |  2 +-
 src/renderer/i18n/zh.ts                          |  2 +-
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/renderer/components/dashboard/RecoveryBanner.tsx b/src/renderer/components/dashboard/RecoveryBanner.tsx
index ac4f5f86..da1fe287 100644
--- a/src/renderer/components/dashboard/RecoveryBanner.tsx
+++ b/src/renderer/components/dashboard/RecoveryBanner.tsx
@@ -41,33 +41,33 @@ export function RecoveryBanner() {
   const handleDismissAll = () => setDismissed(true);
 
   return (
-    <div className="bg-amber-500/10 border border-amber-500/30 rounded-lg p-4 mb-4">
+    <div className="bg-[color:var(--warn-soft)] border border-[color:var(--warn)]/30 rounded-[10px] p-4 mb-4">
       <div className="flex items-center justify-between mb-2">
-        <div className="flex items-center gap-2 text-amber-400 font-medium">
+        <div className="flex items-center gap-2 text-[color:var(--warn)] font-medium">
           <Warning size={18} weight="bold" />
           <span>{runs.length} interrupted task(s) detected from previous session</span>
         </div>
-        <button onClick={handleDismissAll} className="text-zinc-400 hover:text-zinc-200 transition-colors">
+        <button onClick={handleDismissAll} className="text-[color:var(--muted-strong)] hover:text-[color:var(--text)] transition-colors" aria-label="Dismiss recovery banner">
           <X size={16} />
         </button>
       </div>
       <div className="space-y-2">
         {runs.map(run => (
-          <div key={run.runId} className="flex items-center justify-between bg-zinc-800/50 rounded px-3 py-2 text-sm">
+          <div key={run.runId} className="flex items-center justify-between bg-[color:var(--panel-soft)] rounded px-3 py-2 text-sm">
             <div>
-              <span className="text-zinc-200">{run.taskTitle}</span>
-              <span className="text-zinc-500 ml-2">({run.agentName})</span>
+              <span className="text-[color:var(--text)]">{run.taskTitle}</span>
+              <span className="text-[color:var(--muted)] ml-2">({run.agentName})</span>
             </div>
             <div className="flex gap-2">
               <button
                 onClick={() => handleRetry(run)}
-                className="flex items-center gap-1 text-emerald-400 hover:text-emerald-300 text-xs transition-colors"
+                className="flex items-center gap-1 text-[color:var(--success)] hover:text-[color:var(--success)] text-xs transition-colors"
               >
                 <ArrowClockwise size={14} /> Retry
               </button>
               <button
                 onClick={() => handleFail(run)}
-                className="flex items-center gap-1 text-red-400 hover:text-red-300 text-xs transition-colors"
+                className="flex items-center gap-1 text-[color:var(--danger)] hover:text-[color:var(--danger)] text-xs transition-colors"
               >
                 <Trash size={14} /> Cancel
               </button>
diff --git a/src/renderer/i18n/en.ts b/src/renderer/i18n/en.ts
index e1c3ed76..6a6a2346 100644
--- a/src/renderer/i18n/en.ts
+++ b/src/renderer/i18n/en.ts
@@ -558,7 +558,7 @@ export const en: Record<string, string> = {
   "dash.workforce": "Workforce",
   "dash.recentActivity": "Recent Activity",
   "dash.infrastructure": "Infrastructure",
-  "dash.needsAttentionSection": "Needs Attention",
+  "dash.needsAttentionSection": "Needs Your Attention",
   "dash.daysLeft": "{0} days left",
   "dash.tasksComplete": "{0}/{1} tasks complete",
   "dash.people": "People",
diff --git a/src/renderer/i18n/zh.ts b/src/renderer/i18n/zh.ts
index b153442d..0f38e104 100644
--- a/src/renderer/i18n/zh.ts
+++ b/src/renderer/i18n/zh.ts
@@ -558,7 +558,7 @@ export const zh: Record<string, string> = {
   "dash.workforce": "工作力",
   "dash.recentActivity": "最近活动",
   "dash.infrastructure": "基础设施",
-  "dash.needsAttentionSection": "需要关注",
+  "dash.needsAttentionSection": "需要您的关注",
   "dash.daysLeft": "剩余 {0} 天",
   "dash.tasksComplete": "{0}/{1} 任务完成",
   "dash.people": "人员",