feat(todo): 优化悬浮待办面板功能

- 将悬浮待办面板集成到聊天组件上方，避免重复渲染
- 调整状态样式配置，简化颜色和样式管理
- 实现待办面板位置拖拽功能，支持位置持久化保存
- 优化折叠与展开交互，改进分组标题和列表项显示样式
- 设计迷你和完整两种面板展现形态，提升界面灵活性
- 添加刷新按钮及自动展开待办新条目功能
- 精简和改进待办项展示，提高内容可读性和界面美观度

web/src/App.tsx

@@ -663,6 +663,13 @@ function App() {
               onNavigateToSubAgent={handleNavigateToSubAgent}
               onStop={handleStopExecution}
               showThinking={showThinking}
+              todoPanel={
+                <TodoPanel
+                  todos={todos}
+                  requestTodoList={refreshTodoList}
+                  sendCommand={sendMemoryCommand}
+                />
+              }
             />
           </div>
         </div>
@@ -731,13 +738,6 @@ function App() {
         )}
       </div>
 
-      {/* 悬浮 Todo 面板 */}
-      <TodoPanel
-        todos={todos}
-        requestTodoList={refreshTodoList}
-        sendCommand={sendMemoryCommand}
-      />
-
       {/* 系统配置页面 */}
       {configPageOpen && (
         <ConfigPage onClose={() => setConfigPageOpen(false)} onSaveConnection={handleSaveConnection} />

web/src/components/Chat/ChatContainer.tsx

@@ -11,6 +11,8 @@ interface ChatContainerProps {
   onNavigateToSubAgent?: (taskId: string, description: string) => void
   onStop?: () => void
   showThinking?: boolean
+  /** 浮动待办面板，绝对定位在消息区域上方 */
+  todoPanel?: React.ReactNode
 }
 
 export function ChatContainer({
@@ -22,11 +24,13 @@ export function ChatContainer({
   onNavigateToSubAgent,
   onStop,
   showThinking = true,
+  todoPanel,
 }: ChatContainerProps) {
   return (
-    <div className="flex h-full flex-col">
+    <div className="flex h-full flex-col relative">
-      <div className="flex-1 overflow-hidden">
+      <div className="flex-1 overflow-hidden relative">
         <MessageList messages={messages} onNavigateToSubAgent={onNavigateToSubAgent} showThinking={showThinking} />
+        {todoPanel}
       </div>
       <MessageInput
         onSend={onSendMessage}

web/src/components/Panel/TodoPanel.tsx

@@ -1,5 +1,5 @@
 import { useState, useCallback, useEffect, useRef } from 'react'
-import { ClipboardList, ChevronUp, ChevronDown, Circle } from 'lucide-react'
+import { ClipboardList, ChevronDown, RefreshCw } from 'lucide-react'
 import type { TodoItemSummary, Command } from '../../types/protocol'
 
 interface TodoPanelProps {
@@ -8,33 +8,22 @@ interface TodoPanelProps {
   sendCommand: (cmd: Command) => void
 }
 
-/* ── status helpers ───────────────────────────────────── */
+/* ── status config ────────────────────────────────────── */
 
-interface StatusStyle { label: string; border: string; dot: string; text: string; icon: string }
+interface StatusCfg { label: string; color: string; dot: string }
 
-const STATUS: Record<string, StatusStyle> = {
+const STATUS: Record<string, StatusCfg> = {
-  in_progress: { label: '进行中', border: 'border-amber-400/60', dot: 'bg-amber-400 shadow-[0_0_6px_#fbbf24]', text: 'text-amber-300', icon: '●' },
+  in_progress: { label: '进行中', color: 'text-amber-400', dot: 'bg-amber-400' },
-  pending:     { label: '待处理', border: 'border-slate-500/50',   dot: 'bg-slate-500', text: 'text-slate-400', icon: '○' },
+  pending:     { label: '待处理', color: 'text-slate-400', dot: 'bg-slate-500' },
-  completed:   { label: '已完成', border: 'border-emerald-400/40',  dot: 'bg-emerald-400', text: 'text-emerald-400', icon: '✓' },
+  completed:   { label: '已完成', color: 'text-emerald-400', dot: 'bg-emerald-400' },
-  cancelled:   { label: '已取消', border: 'border-red-400/40',     dot: 'bg-red-400', text: 'text-red-400', icon: '✕' },
+  cancelled:   { label: '已取消', color: 'text-slate-500', dot: 'bg-slate-600' },
 }
 
-function statusStyle(s: string): StatusStyle {
+function statusCfg(s: string): StatusCfg {
-  return STATUS[s] ?? { label: s, border: 'border-[var(--border-color)]', dot: 'bg-[var(--text-muted)]', text: 'text-[var(--text-muted)]', icon: '?' }
+  return STATUS[s] ?? { label: s, color: 'text-slate-400', dot: 'bg-slate-500' }
 }
 
-const PRIORITY: Record<string, string> = {
-  high: 'text-rose-400',
-  medium: 'text-amber-400',
-  low: 'text-slate-400',
-}
-
-function priorityDot(p: string) { return PRIORITY[p] ?? 'text-slate-400' }
-
-/* ── group helpers ────────────────────────────────────── */
-
 const GROUP_ORDER = ['in_progress', 'pending', 'completed', 'cancelled']
-const COLLAPSED_DEFAULT = new Set(['completed', 'cancelled'])
 
 function groupTodos(todos: TodoItemSummary[]): Map<string, TodoItemSummary[]> {
   const map = new Map<string, TodoItemSummary[]>()
@@ -50,34 +39,49 @@ function groupTodos(todos: TodoItemSummary[]): Map<string, TodoItemSummary[]> {
 
 function PulseDot() {
   return (
-    <span className="relative flex h-2 w-2">
+    <span className="relative flex h-1.5 w-1.5 shrink-0">
       <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-amber-400 opacity-75" />
-      <span className="relative inline-flex rounded-full h-2 w-2 bg-amber-400 shadow-[0_0_6px_#fbbf24]" />
+      <span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-amber-400" />
     </span>
   )
 }
 
+/* ── position persistence ─────────────────────────────── */
+
+const POS_KEY = 'picobot-todo-pos'
+
+function loadPos(): { x: number; y: number } {
+  try {
+    const raw = localStorage.getItem(POS_KEY)
+    if (raw) return JSON.parse(raw)
+  } catch { /* ignore */ }
+  return { x: 0, y: 0 }
+}
+
+function savePos(pos: { x: number; y: number }) {
+  try { localStorage.setItem(POS_KEY, JSON.stringify(pos)) } catch { /* ignore */ }
+}
+
 /* ── TodoPanel ────────────────────────────────────────── */
 
 export function TodoPanel({ todos, requestTodoList, sendCommand }: TodoPanelProps) {
   const [expanded, setExpanded] = useState(() => {
-    try { return localStorage.getItem('picobot-todo-panel-open') === 'true' } catch { return false }
+    try { return localStorage.getItem('picobot-todo-expanded') === 'true' } catch { return false }
   })
-  const [collapsedGroups, setCollapsedGroups] = useState<Set<string>>(() => new Set(COLLAPSED_DEFAULT))
+  const [collapsedGroups, setCollapsedGroups] = useState<Set<string>>(() => new Set(['completed', 'cancelled']))
+  const [pos, setPos] = useState(loadPos)
   const prevTodoIdsRef = useRef<Set<string>>(new Set())
+  const dragRef = useRef<{ startX: number; startY: number; startPos: { x: number; y: number }; moved: boolean } | null>(null)
 
-  // 持久化展开状态
   useEffect(() => {
-    localStorage.setItem('picobot-todo-panel-open', String(expanded))
+    localStorage.setItem('picobot-todo-expanded', String(expanded))
   }, [expanded])
 
-  // 当有新 todo 出现时自动展开
+  // auto-expand on new items
   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) {
+    if (hasNewItems && todos.length > 0) setExpanded(true)
-      setExpanded(true)
-    }
     prevTodoIdsRef.current = newIds
   }, [todos])
 
@@ -93,105 +97,149 @@ export function TodoPanel({ todos, requestTodoList, sendCommand }: TodoPanelProp
     })
   }, [])
 
-  // ── 空状态 ──
+  const handleRefresh = useCallback(() => sendCommand(requestTodoList()), [sendCommand, requestTodoList])
-  if (totalCount === 0) {
+
-    return (
+  /* ── drag handling ──────────────────────────────────── */
-      <div className="fixed bottom-4 right-4 z-50">
+
-        <button
+  const handleDragStart = useCallback((e: React.MouseEvent) => {
-          onClick={() => sendCommand(requestTodoList())}
+    if ((e.target as HTMLElement).closest('button')) return
-          className="flex items-center gap-2 px-3 py-2 rounded-xl bg-[var(--bg-tertiary)]/70 backdrop-blur-sm border border-[var(--border-color)] text-[var(--text-muted)] hover:text-[var(--text-secondary)] hover:border-[var(--border-accent)] transition-all duration-300 shadow-lg text-xs"
+    e.preventDefault()
-          title="刷新待办"
+
-        >
+    const startX = e.clientX
-          <ClipboardList className="h-3.5 w-3.5" />
+    const startY = e.clientY
-          <span>待办</span>
+    const startPos = { ...pos }
-        </button>
+    dragRef.current = { startX, startY, startPos, moved: false }
-      </div>
+
-    )
+    const handleMove = (ev: MouseEvent) => {
+      if (!dragRef.current) return
+      const dx = ev.clientX - dragRef.current.startX
+      const dy = ev.clientY - dragRef.current.startY
+      if (Math.abs(dx) > 3 || Math.abs(dy) > 3) dragRef.current.moved = true
+      setPos({
+        x: Math.max(0, dragRef.current.startPos.x - dx),
+        y: Math.max(0, dragRef.current.startPos.y + dy),
+      })
     }
 
-  // ── 折叠态 ──
+    const handleUp = () => {
+      document.removeEventListener('mousemove', handleMove)
+      document.removeEventListener('mouseup', handleUp)
+      document.body.style.userSelect = ''
+      document.body.style.cursor = ''
+      if (dragRef.current) {
+        setPos(prev => { savePos(prev); return prev })
+        dragRef.current = null
+      }
+    }
+
+    document.addEventListener('mousemove', handleMove)
+    document.addEventListener('mouseup', handleUp)
+    document.body.style.userSelect = 'none'
+    document.body.style.cursor = 'grabbing'
+  }, [pos])
+
+  /* ── minimized: circle button ───────────────────────── */
+
   if (!expanded) {
     return (
-      <div className="fixed bottom-4 right-4 z-50">
+      <div
-        <button
+        className="absolute z-30"
-          onClick={() => setExpanded(true)}
+        style={{ top: `${16 + pos.y}px`, right: `${16 + pos.x}px` }}
-          className="flex items-center gap-2 px-3 py-2 rounded-xl bg-[var(--bg-tertiary)]/80 backdrop-blur-sm border border-[var(--border-color)] hover:border-[var(--accent-cyan)]/30 transition-all duration-300 shadow-lg group"
       >
-          {inProgressCount > 0 ? <PulseDot /> : <ClipboardList className="h-3.5 w-3.5 text-[var(--text-muted)]" />}
+        <div
-          <span className="text-sm font-medium text-[var(--text-secondary)] group-hover:text-[var(--accent-cyan)] transition-colors">
+          className="relative cursor-grab active:cursor-grabbing select-none"
-            待办 ({totalCount})
+          onMouseDown={handleDragStart}
+        >
+          <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"
+            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>
-          <ChevronUp className="h-3.5 w-3.5 text-[var(--text-muted)]" />
+            </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 ${
+                inProgressCount > 0
+                  ? 'bg-amber-400 text-black'
+                  : '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" />
+            )}
           </button>
         </div>
+      </div>
     )
   }
 
-  // ── 展开态 ──
+  /* ── expanded: full card ────────────────────────────── */
+
   return (
-    <div className="fixed bottom-4 right-4 z-50 w-72 max-h-[60vh] flex flex-col rounded-xl border border-[var(--border-color)] bg-[var(--bg-tertiary)]/95 backdrop-blur-md shadow-2xl overflow-hidden transition-all duration-300">
+    <div
-      {/* 标题栏 */}
+      className="absolute z-30"
-      <div className="shrink-0 flex items-center justify-between px-3 py-2.5 border-b border-[var(--border-color)]">
+      style={{ top: `${16 + pos.y}px`, right: `${16 + pos.x}px` }}
-        <div className="flex items-center gap-2">
-          <ClipboardList className="h-4 w-4 text-[var(--accent-cyan)]" />
-          <span className="text-sm font-semibold text-[var(--text-primary)]">待办事项</span>
-          <span className="text-[11px] text-[var(--text-muted)] tabular-nums">共 {totalCount} 项</span>
-        </div>
-        <button
-          onClick={() => setExpanded(false)}
-          className="p-1 rounded hover:bg-[var(--overlay-subtle)] text-[var(--text-muted)] hover:text-[var(--text-secondary)] transition-colors"
     >
-          <ChevronDown className="h-4 w-4" />
+      <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">
+        {/* 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"
+          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>
+          {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>
+            <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>
           </div>
+        </div>
 
-      {/* 列表区 */}
+        {/* list */}
-      <div className="flex-1 overflow-y-auto scrollbar-hide px-2 py-2 space-y-2">
+        <div className="flex-1 overflow-y-auto scrollbar-hide px-3 py-2">
           {GROUP_ORDER.map(status => {
             const items = grouped.get(status)
             if (!items || items.length === 0) return null
 
-          const style = statusStyle(status)
+            const cfg = statusCfg(status)
             const isCollapsed = collapsedGroups.has(status)
-          const isTerminal = status === 'completed' || status === 'cancelled'
 
             return (
-            <div key={status}>
+              <div key={status} className="mt-1 first:mt-0">
-              {/* 分组标题 */}
                 <button
                   onClick={() => toggleGroup(status)}
-                className="flex items-center gap-1.5 w-full px-1 py-1 text-xs text-[var(--text-muted)] hover:text-[var(--text-secondary)] transition-colors"
+                  className="flex items-center gap-1.5 w-full py-0.5 group"
                 >
-                {isCollapsed ? (
+                  <span className={`h-1.5 w-1.5 rounded-full ${cfg.dot} shrink-0`} />
-                  <ChevronUp className="h-3 w-3" />
+                  <span className={`text-[10px] font-medium ${cfg.color}`}>{cfg.label}</span>
-                ) : (
+                  <span className={`text-[10px] ${cfg.color} opacity-60 tabular-nums`}>{items.length}</span>
-                  <ChevronDown className="h-3 w-3" />
+                  <span className="ml-auto text-[var(--text-muted)]/40">
-                )}
+                    {isCollapsed
-                <span className={style.text}>{style.icon}</span>
+                      ? <ChevronDown className="h-2.5 w-2.5 rotate-[-90deg]" />
-                <span>{style.label}</span>
+                      : <ChevronDown className="h-2.5 w-2.5" />
-                <span className="tabular-nums">({items.length})</span>
+                    }
+                  </span>
                 </button>
 
-              {/* 卡片列表 */}
                 {!isCollapsed && (
-                <div className="space-y-1">
+                  <div className="ml-3 border-l border-[var(--border-color)]/30 pl-2 mt-0.5 space-y-px">
                     {items.map(item => (
-                    <div
+                      <div key={item.id} className="py-[3px]">
-                      key={item.id}
+                        <span className="text-[12px] leading-snug text-[var(--text-primary)]/90 break-words">
-                      className={`rounded-lg border-l-2 ${style.border} border border-[var(--border-color)] bg-[var(--overlay-hover)]/50 px-2.5 py-1.5 transition-colors hover:border-[var(--border-accent)]`}
-                    >
-                      <div className="flex items-start gap-2">
-                        <span className={`mt-0.5 shrink-0 ${priorityDot(item.priority)}`}>
-                          <Circle className="h-2 w-2 fill-current" />
-                        </span>
-                        <div className="min-w-0 flex-1">
-                          <p className={`text-[13px] leading-snug text-[var(--text-primary)] break-words ${
-                            isTerminal ? 'line-through opacity-50' : ''
-                          }`}>
                           {item.content}
-                          </p>
+                        </span>
-                        </div>
-                      </div>
                       </div>
                     ))}
                   </div>
@@ -200,15 +248,6 @@ export function TodoPanel({ todos, requestTodoList, sendCommand }: TodoPanelProp
             )
           })}
         </div>
-
-      {/* 底部刷新 */}
-      <div className="shrink-0 border-t border-[var(--border-color)] px-3 py-1.5">
-        <button
-          onClick={() => sendCommand(requestTodoList())}
-          className="text-[10px] text-[var(--text-muted)] hover:text-[var(--accent-cyan)] transition-colors"
-        >
-          刷新
-        </button>
       </div>
     </div>
   )