From 42fdcebd42bb55fe8ced492c95613b58372cde01 Mon Sep 17 00:00:00 2001
From: Xiaohan-Tian <157918347+Xiaohan-Tian@users.noreply.github.com>
Date: Wed, 3 Jun 2026 17:09:54 -0700
Subject: [PATCH] fix: use i18n strings for chatbox todo snapshot card

---
 src/components/chat/AssistantMessage.test.tsx | 2 +-
 src/components/chat/AssistantMessage.tsx      | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/chat/AssistantMessage.test.tsx b/src/components/chat/AssistantMessage.test.tsx
index 0f0b9f4..768cd0a 100644
--- a/src/components/chat/AssistantMessage.test.tsx
+++ b/src/components/chat/AssistantMessage.test.tsx
@@ -190,7 +190,7 @@ describe('AssistantMessage', () => {
       />
     );
 
-    expect(screen.getByLabelText('Agent task checklist snapshot')).toBeInTheDocument();
+    expect(screen.getByLabelText('Agent task checklist')).toBeInTheDocument();
     expect(screen.getByText('Task Checklist')).toBeInTheDocument();
     expect(screen.getByText('1/2 completed')).toBeInTheDocument();
     expect(screen.getByText('Working on: Writing harmony')).toBeInTheDocument();
diff --git a/src/components/chat/AssistantMessage.tsx b/src/components/chat/AssistantMessage.tsx
index 26c5bd7..d626e7d 100644
--- a/src/components/chat/AssistantMessage.tsx
+++ b/src/components/chat/AssistantMessage.tsx
@@ -222,16 +222,16 @@ const AssistantMessage: React.FC<AssistantMessageProps> = ({
       const activeTodo = todoSnapshot.find(todo => todo.status === 'in_progress') ?? null;
 
       return (
-        <section className="chatbox-todo-card" aria-label="Agent task checklist snapshot">
+        <section className="chatbox-todo-card" aria-label={t('chatbox.todo.ariaLabel')}>
           <div className="chatbox-todo-card-header">
-            <h4>Task Checklist</h4>
+            <h4>{t('chatbox.todo.title')}</h4>
             <span className="chatbox-todo-count">
-              {counts.completed}/{counts.total} completed
+              {t('chatbox.todo.count', { completed: counts.completed, total: counts.total })}
             </span>
           </div>
           {activeTodo && (
             <div className="chatbox-todo-active">
-              Working on: {activeTodo.activeText || activeTodo.text}
+              {t('chatbox.todo.active', { task: activeTodo.activeText || activeTodo.text })}
             </div>
           )}
           <ul className="chatbox-todo-list">