diff --git a/web/src/components/Chat/MessageBubble.tsx b/web/src/components/Chat/MessageBubble.tsx
index 0c9b9bd..fc1de64 100644
--- a/web/src/components/Chat/MessageBubble.tsx
+++ b/web/src/components/Chat/MessageBubble.tsx
@@ -395,11 +395,6 @@ export function MessageBubble({ message, onNavigateToSubAgent, showThinking = tr
                 子智能体·{subagentType}
               </span>
             )}
-            {!isTaskTool && isSubAgent && (
-              <span className="text-xs px-1.5 py-0.5 rounded bg-violet-500/10 text-violet-400">
-                子智能体
-              </span>
-            )}
             <span className="text-xs text-[var(--text-muted)]">{formatTime(message.timestamp)}</span>
           </div>
           <div
diff --git a/web/src/components/Panel/TodoPanel.tsx b/web/src/components/Panel/TodoPanel.tsx
index 83c5b71..dc7dd1c 100644
--- a/web/src/components/Panel/TodoPanel.tsx
+++ b/web/src/components/Panel/TodoPanel.tsx
@@ -77,11 +77,15 @@ export function TodoPanel({ todos, requestTodoList, sendCommand }: TodoPanelProp
     localStorage.setItem('picobot-todo-expanded', String(expanded))
   }, [expanded])
 
-  // auto-expand on new items
+  // auto-expand on new items, auto-collapse when empty
   useEffect(() => {
     const newIds = new Set(todos.map(t => t.id))
-    const hasNewItems = todos.some(t => !prevTodoIdsRef.current.has(t.id))
-    if (hasNewItems && todos.length > 0) setExpanded(true)
+    if (todos.length === 0) {
+      setExpanded(false)
+    } else {
+      const hasNewItems = todos.some(t => !prevTodoIdsRef.current.has(t.id))
+      if (hasNewItems) setExpanded(true)
+    }
     prevTodoIdsRef.current = newIds
   }, [todos])
 
@@ -152,26 +156,23 @@ export function TodoPanel({ todos, requestTodoList, sendCommand }: TodoPanelProp
         >
           <button
             onClick={() => { if (totalCount > 0) setExpanded(true); else handleRefresh() }}
-            className="relative w-12 h-12 rounded-full bg-[var(--bg-tertiary)]/90 backdrop-blur-md border border-[var(--border-color)] hover:border-[var(--accent-cyan)]/40 shadow-lg hover:shadow-[0_0_20px_var(--shadow-glow-sm)] transition-all duration-300 group"
+            className="relative w-14 h-14 rounded-full bg-[var(--bg-tertiary)]/90 backdrop-blur-xl border border-[var(--border-color)] hover:border-[var(--accent-cyan)]/50 shadow-[0_4px_24px_rgba(0,240,255,0.08)] hover:shadow-[0_4px_32px_var(--shadow-glow-sm)] transition-all duration-300 group"
             title="待办"
           >
-            <div className="flex flex-col items-center justify-center">
-              <ClipboardList className="h-3.5 w-3.5 text-[var(--text-muted)] group-hover:text-[var(--accent-cyan)] transition-colors" />
-              <span className="text-[8px] font-bold text-[var(--text-muted)] group-hover:text-[var(--accent-cyan)] transition-colors mt-0.5">
-                ToDo
-              </span>
+            <div className="flex items-center justify-center">
+              <ClipboardList className="h-5 w-5 text-[var(--text-muted)] group-hover:text-[var(--accent-cyan)] transition-colors" />
             </div>
             {totalCount > 0 && (
-              <span className={`absolute -top-1 -right-1 min-w-[18px] h-[18px] rounded-full flex items-center justify-center text-[10px] font-bold shadow-md ${
+              <span className={`absolute -top-1.5 -right-1.5 min-w-[20px] h-5 px-1 rounded-full flex items-center justify-center text-[11px] font-bold leading-tight ${
                 inProgressCount > 0
-                  ? 'bg-amber-400 text-black'
+                  ? 'bg-amber-400 text-black shadow-[0_0_12px_rgba(245,158,11,0.4)]'
                   : 'bg-[var(--bg-secondary)] text-[var(--text-secondary)] border border-[var(--border-color)]'
               }`}>
                 {totalCount}
               </span>
             )}
             {inProgressCount > 0 && (
-              <span className="absolute inset-0 rounded-full border-2 border-amber-400/30 animate-ping" />
+              <span className="absolute -inset-[3px] rounded-full animate-todo-ring-pulse" />
             )}
           </button>
         </div>
@@ -186,29 +187,44 @@ export function TodoPanel({ todos, requestTodoList, sendCommand }: TodoPanelProp
       className="absolute z-30"
       style={{ top: `${16 + pos.y}px`, right: `${16 + pos.x}px` }}
     >
-      <div className="w-72 max-h-[50vh] flex flex-col rounded-xl bg-[var(--bg-tertiary)]/95 backdrop-blur-md border border-[var(--border-color)] shadow-2xl overflow-hidden">
+      <div className="w-80 max-h-[55vh] flex flex-col rounded-2xl bg-[var(--bg-tertiary)]/95 backdrop-blur-md border border-[var(--border-color)] shadow-2xl hover:shadow-[0_8px_40px_var(--shadow-glow-sm)] overflow-hidden animate-todo-card-in">
         {/* title bar (drag handle) */}
         <div
-          className="shrink-0 flex items-center gap-2 px-3 py-2 border-b border-[var(--border-color)]/50 cursor-grab active:cursor-grabbing select-none"
+          className="shrink-0 flex items-center gap-2 px-4 py-2.5 border-b border-[var(--border-color)]/50 cursor-grab active:cursor-grabbing select-none rounded-t-2xl"
           onMouseDown={handleDragStart}
         >
-          <span className="text-[var(--text-muted)]/30 text-[10px] leading-none select-none">⠿</span>
-          <ClipboardList className="h-3 w-3 text-[var(--accent-cyan)]" />
-          <span className="text-[11px] font-semibold text-[var(--text-secondary)]">待办</span>
-          <span className="text-[10px] text-[var(--text-muted)]/70 tabular-nums">{totalCount}</span>
+          <span className="text-[var(--text-muted)]/40 text-sm tracking-[0.15em] leading-none select-none group-hover:text-[var(--accent-cyan)]/60 transition-colors">⠿</span>
+          <ClipboardList className="h-4 w-4 text-[var(--accent-cyan)]/80" />
+          <span className="text-[13px] font-semibold text-[var(--text-primary)] tracking-tight">待办</span>
+          <span className="text-[11px] text-[var(--text-muted)]/80 tabular-nums">{totalCount}</span>
           {inProgressCount > 0 && <PulseDot />}
           <div className="ml-auto flex items-center gap-0.5">
-            <button onClick={handleRefresh} className="p-1 rounded text-[var(--text-muted)]/50 hover:text-[var(--accent-cyan)] transition-colors" title="刷新">
-              <RefreshCw className="h-3 w-3" />
+            <button onClick={handleRefresh} className="p-1.5 rounded-lg text-[var(--text-muted)]/50 hover:text-[var(--accent-cyan)] hover:bg-[var(--overlay-hover)] transition-colors" title="刷新">
+              <RefreshCw className="h-3.5 w-3.5" />
             </button>
-            <button onClick={() => setExpanded(false)} className="p-1 rounded text-[var(--text-muted)]/50 hover:text-[var(--text-secondary)] transition-colors" title="缩小">
-              <ChevronDown className="h-3 w-3" />
+            <button onClick={() => setExpanded(false)} className="p-1.5 rounded-lg text-[var(--text-muted)]/50 hover:text-[var(--text-secondary)] hover:bg-[var(--overlay-hover)] transition-colors" title="缩小">
+              <ChevronDown className="h-4 w-4" />
             </button>
           </div>
         </div>
 
         {/* list */}
-        <div className="flex-1 overflow-y-auto scrollbar-hide px-3 py-2">
+        <div className="flex-1 overflow-y-auto scrollbar-hide px-4 py-3 space-y-2">
+          {totalCount === 0 && (
+            <div className="flex flex-col items-center justify-center py-8 px-4 text-center select-none">
+              <div className="relative mb-4">
+                <div className="absolute inset-0 rounded-full bg-[var(--accent-cyan)]/10 blur-xl animate-pulse" />
+                <ClipboardList className="relative h-10 w-10 text-[var(--accent-cyan)]/25" />
+              </div>
+              <p className="text-[12px] text-[var(--text-muted)] leading-relaxed mb-1">
+                暂无待办事项
+              </p>
+              <p className="text-[10px] text-[var(--text-muted)]/60 leading-relaxed">
+                AI 助手可在对话中创建和管理待办
+              </p>
+            </div>
+          )}
+
           {GROUP_ORDER.map(status => {
             const items = grouped.get(status)
             if (!items || items.length === 0) return null
@@ -220,31 +236,28 @@ export function TodoPanel({ todos, requestTodoList, sendCommand }: TodoPanelProp
               <div key={status} className="mt-1 first:mt-0">
                 <button
                   onClick={() => toggleGroup(status)}
-                  className="flex items-center gap-1.5 w-full py-0.5 group"
+                  className="sticky top-0 z-10 flex items-center gap-2 w-full py-1.5 rounded-lg transition-colors hover:bg-[var(--overlay-hover)] bg-[var(--bg-tertiary)]/95 backdrop-blur-sm"
                 >
-                  <span className={`h-1.5 w-1.5 rounded-full ${cfg.dot} shrink-0`} />
-                  <span className={`text-[10px] font-medium ${cfg.color}`}>{cfg.label}</span>
-                  <span className={`text-[10px] ${cfg.color} opacity-60 tabular-nums`}>{items.length}</span>
-                  <span className="ml-auto text-[var(--text-muted)]/40">
-                    {isCollapsed
-                      ? <ChevronDown className="h-2.5 w-2.5 rotate-[-90deg]" />
-                      : <ChevronDown className="h-2.5 w-2.5" />
-                    }
+                  <span className={`h-2 w-2 rounded-full ${cfg.dot} shrink-0`} />
+                  <span className={`text-[12px] font-semibold ${cfg.color}`}>{cfg.label}</span>
+                  <span className={`text-[10px] ${cfg.color} opacity-50 tabular-nums ml-0.5`}>{items.length}</span>
+                  <span className="ml-auto text-[var(--text-muted)]/50">
+                    <ChevronDown className={`h-3.5 w-3.5 transition-transform duration-200 ${isCollapsed ? '-rotate-90' : 'rotate-0'}`} />
                   </span>
                 </button>
 
-                {!isCollapsed && (
-                  <div className="ml-3 border-l border-[var(--border-color)]/30 pl-2 mt-0.5 space-y-px">
+                <div className={`todo-group-body ${isCollapsed ? 'todo-group-body-closed' : 'todo-group-body-open'}`}>
+                  <div className="ml-[7px] border-l-2 border-[var(--border-color)]/60 pl-3 mt-1.5 space-y-0.5">
                     {items.map(item => (
-                      <div key={item.id} className="py-[3px] flex items-start gap-1.5">
-                        <span className={`h-1.5 w-1.5 rounded-full ${cfg.dot} shrink-0 mt-[5px]`} />
-                        <span className="text-[12px] leading-snug text-[var(--text-primary)]/90 break-words">
+                      <div key={item.id} className="group/item py-1.5 px-2 -mx-2 rounded-md transition-colors duration-150 hover:bg-[var(--overlay-hover)] flex items-start gap-1.5">
+                        <span className={`h-2 w-2 rounded-full ${cfg.dot} shrink-0 mt-1.5`} />
+                        <span className="text-[13px] leading-relaxed text-[var(--text-primary)]/85 group-hover/item:text-[var(--text-primary)] transition-colors break-words">
                           {item.content}
                         </span>
                       </div>
                     ))}
                   </div>
-                )}
+                </div>
               </div>
             )
           })}
diff --git a/web/src/index.css b/web/src/index.css
index 4997e93..5f8339d 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -258,6 +258,60 @@ body {
 .animate-fade-in  { animation: fade-in 0.2s ease-out; }
 .animate-scale-in { animation: scale-in 0.3s ease-out; }
 
+/* ============================================
+   TodoPanel animations
+   ============================================ */
+@keyframes todo-card-in {
+  from {
+    opacity: 0;
+    transform: scale(0.92) translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+@keyframes todo-item-in {
+  from {
+    opacity: 0;
+    transform: translateX(-6px);
+    max-height: 0;
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+    max-height: 40px;
+  }
+}
+
+@keyframes todo-ring-pulse {
+  0%, 100% {
+    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
+  }
+  50% {
+    box-shadow: 0 0 0 6px rgba(245, 158, 11, 0);
+  }
+}
+
+.animate-todo-card-in { animation: todo-card-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
+.animate-todo-item-in { animation: todo-item-in 0.2s ease-out forwards; }
+.animate-todo-ring-pulse { animation: todo-ring-pulse 2s ease-in-out infinite; }
+
+/* 分组折叠内容展开/收起 */
+.todo-group-body {
+  overflow: hidden;
+  transition: max-height 0.25s ease, opacity 0.2s ease;
+}
+.todo-group-body-open {
+  max-height: 600px;
+  opacity: 1;
+}
+.todo-group-body-closed {
+  max-height: 0;
+  opacity: 0;
+}
+
 @keyframes thinking-reveal {
   from { max-height: 0; opacity: 0; }
   to   { max-height: 300px; opacity: 1; }