@yolk_vat-y/dsh-project-memory 0.4.2 → 0.4.4

package/src/client/TaskPanel.tsx

@@ -1,55 +1,31 @@
 /**
  * Task Panel — dsh web `shell.overlay` 浮动任务面板。
- *
- * 升级原 `/tasks` 文本输出为可交互卡片：
- *  - 默认收成右侧浮标（不影响用户操作/不挡对话）；
- *  - 展开时通过宿主 `remote.commands.execute(sessionId, '/tasks')` 拉取最新快照
- *    （命令只读，走 /tasks 同一数据源 = tasks.json，因此与模型维护的 todo 双向一致）；
- *  - 卡片内「切换 / 归档」执行 `/task switch|archive <id>`，服务端返回新快照 JSON，
- *    面板即时刷新，无需再跑一次 /tasks；
- *  - 可拖拽（仅头部把手），位置持久化 localStorage。
- *
- * 依赖仅 react + @deepseek-ai/dsh-client-ui-primitives（宿主 seed 模块）。
+ * Container 组件：负责数据获取、命令桥接、状态协调
+ * Presentational 组件在 TaskComponents.tsx
  */
 import { Component, useEffect, useRef, useState, type ReactNode } from 'react'
 import {
   Button,
   IconChevronDownOutline14,
-  IconChevronUpOutline14,
   IconCloseOutline16,
-  IconRefreshOutline16,
-  IconCheckOutline16,
-  IconPlayOutline16,
   IconFolderOpenOutline16,
+  IconQuestionOutline14,
 } from '@deepseek-ai/dsh-client-ui-primitives'
 import { createTranslate, zh, en } from './locales.ts'
-import { taskStore, useTaskStore, parseTaskPayloadText, type TaskStep } from './task-store.ts'
+import { useTaskData, useTaskDataActions, parseTaskPayloadText, type TaskStep } from './task-data-store.ts'
+import { useTaskUI, useTaskUIActions } from './task-ui-store.ts'
+import { MiniBar, TaskCard } from './TaskComponents.tsx'
 import css from './TaskPanel.module.css'
 
 const NS = 'dsh-project-memory'
 
+const STATUS_CYCLE = ['pending', 'in_progress', 'completed'] as const
+
 function getT() {
   const locale = (typeof navigator !== 'undefined' && navigator.language.startsWith('zh')) ? zh : en
   return createTranslate(locale)
 }
 
-function timeAgo(iso?: string) {
-  if (!iso) return ''
-  const diff = Date.now() - new Date(iso).getTime()
-  const m = Math.floor(diff / 60000)
-  if (m < 1) return '刚刚'
-  if (m < 60) return `${m}分钟前`
-  const h = Math.floor(m / 60)
-  if (h < 24) return `${h}小时前`
-  return `${Math.floor(h / 24)}天前`
-}
-
-function StepIcon({ status }: { status: TaskStep['status'] }) {
-  if (status === 'completed') return <IconCheckOutline16 className={css.stepDone} />
-  if (status === 'in_progress') return <IconPlayOutline16 className={css.stepRun} />
-  return <span className={css.stepPending} />
-}
-
 function useSessionId(ctx: any): string | null {
   const [, force] = useState(0)
   useEffect(() => {
@@ -64,139 +40,16 @@ function useSessionId(ctx: any): string | null {
   return first?.sessionId ?? null
 }
 
-/** 行内编辑框：自动按内容增高（最多 160px），Enter 提交、Shift+Enter 换行、Esc 取消、失焦提交。 */
-function AutoEdit({ value, onCommit, onCancel, singleLine }: {
-  value: string
-  onCommit: (value: string) => void
-  onCancel: () => void
-  singleLine?: boolean
-}) {
-  const [text, setText] = useState(value)
-  const ref = useRef<HTMLTextAreaElement>(null)
-  const settled = useRef(false)
-  const once = (fn: () => void) => {
-    if (settled.current) return
-    settled.current = true
-    fn()
-  }
-
-  const adjust = () => {
-    const el = ref.current
-    if (!el) return
-    el.style.height = 'auto'
-    el.style.height = `${Math.min(el.scrollHeight, 160)}px`
-  }
-
-  useEffect(() => {
-    adjust()
-    const el = ref.current
-    el?.focus()
-    el?.select()
-  }, [])
-
-  return (
-    <textarea
-      ref={ref}
-      className={css.stepInput}
-      rows={1}
-      value={text}
-      onChange={(e) => { setText(e.target.value); adjust() }}
-      onBlur={() => once(() => onCommit(text))}
-      onKeyDown={(e) => {
-        if (e.key === 'Escape') {
-          e.preventDefault()
-          once(() => onCancel())
-        } else if (e.key === 'Enter' && (singleLine || !e.shiftKey)) {
-          e.preventDefault()
-          once(() => onCommit(text))
-        }
-      }}
-    />
-  )
-}
-
-/** 折叠迷你条：可拖拽（按住拖动，轻点展开）。 */
-function MiniBar({ label, hint, position, theme, onMove, open }: {
-  label: string
-  hint: string
-  position: { x: number; y: number }
-  theme: string
-  onMove: (pos: { x: number; y: number }) => void
-  open: () => void
-}) {
-  const barRef = useRef<HTMLDivElement>(null)
-  const down = useRef<{ dx: number; dy: number; sx: number; sy: number; moved: boolean } | null>(null)
-
-  const onMouseDown = (e: React.MouseEvent) => {
-    if (e.button !== 0) return
-    const rect = barRef.current?.getBoundingClientRect()
-    if (!rect) return
-    down.current = { dx: e.clientX - rect.left, dy: e.clientY - rect.top, sx: e.clientX, sy: e.clientY, moved: false }
-    const onMoveEv = (ev: MouseEvent) => {
-      const d = down.current
-      if (!d) return
-      if (!d.moved && Math.abs(ev.clientX - d.sx) + Math.abs(ev.clientY - d.sy) > 4) d.moved = true
-      if (d.moved) {
-        const w = barRef.current?.offsetWidth ?? 260
-        const h = barRef.current?.offsetHeight ?? 34
-        const x = Math.max(8, Math.min(window.innerWidth - w - 8, ev.clientX - d.dx))
-        const y = Math.max(8, Math.min(window.innerHeight - h - 8, ev.clientY - d.dy))
-        onMove({ x, y })
-      }
-    }
-    const onUpEv = () => {
-      const d = down.current
-      down.current = null
-      window.removeEventListener('mousemove', onMoveEv)
-      window.removeEventListener('mouseup', onUpEv)
-      if (d && !d.moved) open()
-    }
-    window.addEventListener('mousemove', onMoveEv)
-    window.addEventListener('mouseup', onUpEv)
-  }
-
-  return (
-    <div
-      ref={barRef}
-      className={css.miniBar}
-      style={{ left: position.x, top: position.y }}
-      data-theme={theme === 'native' ? undefined : theme}
-      onMouseDown={onMouseDown}
-      role="button"
-      title={hint}
-      aria-label={hint}
-    >
-      <IconFolderOpenOutline16 className={css.miniIcon} />
-      <span className={css.miniText}>{label}</span>
-      <IconChevronUpOutline14 className={css.miniChevron} />
-    </div>
-  )
-}
-
-/**
- * 错误边界：任务面板渲染一旦抛错，不再让 shell.overlay 把整条条目退休
- * （宿主对崩溃条目会永久移除直到重载页面）。捕获后显示一个纯文本兜底，
- * 点击重新渲染。
- */
 class PanelErrorBoundary extends Component<{ children: ReactNode }, { failed: boolean }> {
   state = { failed: false }
-
-  static getDerivedStateFromError() {
-    return { failed: true }
-  }
-
+  static getDerivedStateFromError() { return { failed: true } }
   componentDidCatch(error: unknown) {
-    console.warn('[dsh-project-memory] task panel render crashed (contained by boundary):', error)
+    console.warn('[dsh-project-memory] task panel render crashed:', error)
   }
-
   render() {
     if (!this.state.failed) return this.props.children
     return (
-      <button
-        className={css.boundaryFallback}
-        onClick={() => this.setState({ failed: false })}
-        title="重新渲染任务面板"
-      >
+      <button className={css.boundaryFallback} onClick={() => this.setState({ failed: false })} title="重新渲染任务面板">
         任务面板（点击重试）
       </button>
     )
@@ -213,25 +66,24 @@ export function TaskPanelEntry({ ctx }: { ctx: any }) {
 
 function TaskPanelView({ ctx }: { ctx: any }) {
   const t = getT()
-  const state = useTaskStore()
+  const data = useTaskData()
+  const ui = useTaskUI()
   const sessionId = useSessionId(ctx)
   const [syncing, setSyncing] = useState(false)
   const [syncedAt, setSyncedAt] = useState(0)
-  const [copiedPath, setCopiedPath] = useState<string | null>(null)
   const [syncError, setSyncError] = useState<string | null>(null)
-  const panelRef = useRef<HTMLDivElement>(null)
-  const drag = useRef<{ dx: number; dy: number } | null>(null)
-  const copyTimer = useRef<number | undefined>(undefined)
+  const [showHints, setShowHints] = useState(true)
 
-  const actions = taskStore.actions
+  const dataActions = useTaskDataActions()
+  const uiActions = useTaskUIActions()
 
-  const activeTasks = state.tasks.filter((task) => !task.archived)
-  const boundTask = state.boundTaskId ? state.tasks.find((task) => task.id === state.boundTaskId) ?? null : null
+  const activeTasks = data.tasks.filter((task) => !task.archived)
+  const boundTask = data.boundTaskId ? data.tasks.find((task) => task.id === data.boundTaskId) ?? null : null
 
   const applyPayload = (text?: string): boolean => {
     const parsed = parseTaskPayloadText(text)
     if (!parsed) return false
-    actions.setTasks({ tasks: parsed.tasks, boundTaskId: parsed.boundId, archivedCount: parsed.archived })
+    dataActions.setTasks({ tasks: parsed.tasks, boundTaskId: parsed.boundId, archivedCount: parsed.archived })
     setSyncedAt(Date.now())
     setSyncError(null)
     return true
@@ -264,7 +116,12 @@ function TaskPanelView({ ctx }: { ctx: any }) {
     if (syncing) return
     setSyncing(true)
     try {
+      const prevBoundId = data.boundTaskId
       await runLine('/tasks')
+      const newBoundId = useTaskData.getSnapshot().boundTaskId
+      if (newBoundId && newBoundId !== prevBoundId) {
+        await runLine(`/task switch ${newBoundId}`)
+      }
     } finally {
       setSyncing(false)
     }
@@ -280,14 +137,12 @@ function TaskPanelView({ ctx }: { ctx: any }) {
     }
   }
 
-  // —— 绑定卡片步骤编辑（双击改文案 / 点状态图标循环），与模型 todo_write 走同一数据 ——
-  const [editing, setEditing] = useState<{ taskId: string; index: number; value: string } | null>(null)
-  const STATUS_CYCLE = ['pending', 'in_progress', 'completed'] as const
   const pushSteps = (taskId: string, steps: TaskStep[]): void => {
     void runLine(`/task todos ${JSON.stringify(steps.map((s) => ({ content: s.content, status: s.status })))}`)
   }
+
   const cycleStatus = (taskId: string, index: number) => {
-    const task = state.tasks.find((tt) => tt.id === taskId)
+    const task = data.tasks.find((tt) => tt.id === taskId)
     if (!task) return
     const steps = task.steps || []
     const next = steps.map((s, i) => {
@@ -297,45 +152,55 @@ function TaskPanelView({ ctx }: { ctx: any }) {
     })
     pushSteps(taskId, next)
   }
+
   const commitStepText = (taskId: string, index: number, value: string) => {
-    const task = state.tasks.find((tt) => tt.id === taskId)
+    const task = data.tasks.find((tt) => tt.id === taskId)
     const trimmed = value.trim()
-    if (!task) { setEditing(null); return }
+    if (!task) return
     const same = (task.steps || [])[index]?.content === trimmed
-    setEditing(null)
     if (same || !trimmed) return
     const next = (task.steps || []).map((s, i) => (i === index ? { ...s, content: trimmed } : s))
     pushSteps(taskId, next)
   }
 
-  // 绑定卡片标题双击改名
-  const [editingTitle, setEditingTitle] = useState<{ taskId: string; value: string } | null>(null)
+  const reorderSteps = (taskId: string, fromIndex: number, toIndex: number) => {
+    if (fromIndex === toIndex) return
+    const task = data.tasks.find((tt) => tt.id === taskId)
+    if (!task) return
+    const steps = [...(task.steps || [])]
+    const [moved] = steps.splice(fromIndex, 1)
+    const targetIndex = toIndex > fromIndex ? toIndex - 1 : toIndex
+    steps.splice(targetIndex, 0, moved)
+    pushSteps(taskId, steps)
+  }
+
   const commitTitle = (taskId: string, value: string) => {
-    const task = state.tasks.find((tt) => tt.id === taskId)
+    const task = data.tasks.find((tt) => tt.id === taskId)
     const trimmed = value.trim()
-    if (!task) { setEditingTitle(null); return }
+    if (!task) return
     const same = task.title === trimmed
-    setEditingTitle(null)
     if (same || !trimmed) return
     void runLine(`/task rename ${taskId} ${JSON.stringify(trimmed)}`)
   }
 
   const expand = () => {
-    actions.open()
-    // 已有 30s 内的快照就不重复执行 /tasks（避免会话里堆命令节点）
-    if (Date.now() - Math.max(state.lastUpdate, syncedAt) > 30_000) {
+    uiActions.open()
+    if (Date.now() - Math.max(data.lastUpdate, syncedAt) > 30_000) {
       void refresh()
     }
   }
 
   const THEMES = ['native', 'glass', 'brutal', 'mono'] as const
-  const style = (THEMES as readonly string[]).includes(state.theme) ? state.theme : 'native'
+  const style = (THEMES as readonly string[]).includes(ui.theme) ? ui.theme : 'native'
   const styleLabel = t(`style.${style}` as keyof typeof zh)
   const cycleTheme = () => {
     const i = THEMES.indexOf(style as (typeof THEMES)[number])
-    actions.setTheme(THEMES[(i + 1) % THEMES.length])
+    uiActions.setTheme(THEMES[(i + 1) % THEMES.length])
   }
 
+  const panelRef = useRef<HTMLDivElement>(null)
+  const drag = useRef<{ dx: number; dy: number } | null>(null)
+
   const handleDragStart = (e: React.MouseEvent) => {
     if (e.target !== e.currentTarget) return
     const rect = panelRef.current?.getBoundingClientRect()
@@ -347,7 +212,7 @@ function TaskPanelView({ ctx }: { ctx: any }) {
       const height = panelRef.current?.offsetHeight ?? 480
       const x = Math.max(8, Math.min(window.innerWidth - width - 8, ev.clientX - drag.current.dx))
       const y = Math.max(8, Math.min(window.innerHeight - 64, ev.clientY - drag.current.dy))
-      actions.setPanelPosition({ x, y })
+      uiActions.setPanelPosition({ x, y })
     }
     const onUp = () => {
       drag.current = null
@@ -358,35 +223,37 @@ function TaskPanelView({ ctx }: { ctx: any }) {
     window.addEventListener('mouseup', onUp)
   }
 
-  const copyPath = (path: string) => {
-    if (copiedPath === path) return
-    void navigator.clipboard?.writeText(path).catch(() => undefined)
-    setCopiedPath(path)
-    window.clearTimeout(copyTimer.current)
-    copyTimer.current = window.setTimeout(() => setCopiedPath(null), 1200)
-  }
-
-  useEffect(() => () => window.clearTimeout(copyTimer.current), [])
-
-  // 首次（store 从未同步过）自动拉一次快照（无论是否折叠，折叠条也要显示计数）
+  // 会话切换时仅同步数据，不自动打开面板
   useEffect(() => {
     if (!sessionId) return
-    const snap = taskStore.getSnapshot()
-    if (snap.lastUpdate === 0 && !snap.closed) {
-      const timer = window.setTimeout(() => void refresh(), 300)
-      return () => window.clearTimeout(timer)
+    // 仅当面板已打开时才自动刷新
+    if (!ui.closed) {
+      void refresh()
     }
-    return undefined
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [sessionId])
 
-  // 彻底隐藏（关闭）：不渲染任何东西；输入 /task、/tasks 会重新打开
-  if (state.closed) {
+  // 监听模型工具请求打开面板
+  useEffect(() => {
+    const ctxWithEvents = ctx
+    const handler = () => {
+      uiActions.open()
+      if (Date.now() - Math.max(data.lastUpdate, syncedAt) > 30_000) {
+        void refresh()
+      }
+    }
+    ctxWithEvents?.events?.on?.('dsh:task-panel:show', handler)
+    return () => {
+      ctxWithEvents?.events?.off?.('dsh:task-panel:show', handler)
+    }
+  }, [ctx, uiActions, data.lastUpdate, syncedAt, refresh])
+
+  // 彻底隐藏：不渲染任何东西
+  if (ui.closed) {
     return null
   }
 
-  // 折叠态：可拖拽的顶部迷你条（点击展开，点开即同步）
-  if (state.minimized) {
+  // 折叠态：迷你条
+  if (ui.minimized) {
     const label = boundTask
       ? `${t('minibar.current')}: ${boundTask.title}`
       : activeTasks.length > 0
@@ -396,9 +263,9 @@ function TaskPanelView({ ctx }: { ctx: any }) {
       <MiniBar
         label={label}
         hint={t('minibar.click-expand')}
-        position={state.panelPosition}
+        position={ui.panelPosition}
         theme={style}
-        onMove={(pos) => actions.setPanelPosition(pos)}
+        onMove={uiActions.setPanelPosition}
         open={expand}
       />
     )
@@ -413,7 +280,7 @@ function TaskPanelView({ ctx }: { ctx: any }) {
     <div
       className={css.panel}
       ref={panelRef}
-      style={{ left: state.panelPosition.x, top: state.panelPosition.y }}
+      style={{ left: ui.panelPosition.x, top: ui.panelPosition.y }}
       data-theme={style === 'native' ? undefined : style}
     >
       <div className={css.dragHandle} onMouseDown={handleDragStart} title={t('task.drag')}>
@@ -421,7 +288,7 @@ function TaskPanelView({ ctx }: { ctx: any }) {
       </div>
       <header className={css.header}>
         <div className={css.headerLeft}>
-          <button
+          <Button
             type="button"
             className={css.headerIconBtn}
             onClick={cycleTheme}
@@ -429,7 +296,7 @@ function TaskPanelView({ ctx }: { ctx: any }) {
             aria-label={styleLabel}
           >
             <IconFolderOpenOutline16 className={css.headerIcon} />
-          </button>
+          </Button>
           <h2 className={css.headerTitle}>{t('panel.title')}</h2>
         </div>
         <div className={css.headerRight}>
@@ -441,18 +308,16 @@ function TaskPanelView({ ctx }: { ctx: any }) {
           <Button
             variant="ghost"
             size="sm"
-            className={syncing ? css.spinning : undefined}
-            onClick={() => void refresh()}
-            disabled={syncing}
-            aria-label={t('panel.refresh')}
-            title={t('panel.refresh')}
+            onClick={() => setShowHints(!showHints)}
+            aria-label={showHints ? t('panel.hints-off') : t('panel.hints-on')}
+            title={showHints ? t('panel.hints-off') : t('panel.hints-on')}
           >
-            <IconRefreshOutline16 />
+            <IconQuestionOutline14 size={16} />
           </Button>
           <Button
             variant="ghost"
             size="sm"
-            onClick={() => actions.minimize()}
+            onClick={() => uiActions.minimize()}
             aria-label={t('panel.minimize')}
             title={t('panel.minimize')}
           >
@@ -461,7 +326,7 @@ function TaskPanelView({ ctx }: { ctx: any }) {
           <Button
             variant="ghost"
             size="sm"
-            onClick={() => actions.close()}
+            onClick={() => uiActions.close()}
             aria-label={t('panel.close')}
             title={t('panel.close')}
           >
@@ -483,168 +348,26 @@ function TaskPanelView({ ctx }: { ctx: any }) {
         <div className={css.taskList}>
           {activeTasks.map((task) => {
             const steps = task.steps || []
-            const done = steps.filter((s) => s.status === 'completed').length
-            const expanded = state.expandedTaskIds.includes(task.id)
-            const isBound = state.boundTaskId === task.id
-            const pct = steps.length > 0 ? Math.round((done / steps.length) * 100) : 0
+            const expanded = ui.expandedTaskIds.includes(task.id)
+            const isBound = data.boundTaskId === task.id
             return (
-              <article key={task.id} className={`${css.card}${isBound ? ` ${css.cardBound}` : ''}`}>
-                <button
-                  className={css.cardHead}
-                  onClick={() => { if (editingTitle?.taskId === task.id) return; actions.toggleTaskExpanded(task.id) }}
-                  aria-expanded={expanded}
-                >
-                  <div className={css.cardTitleRow}>
-                    {isBound && <span className={css.boundBadge}>{t('task.current')}</span>}
-                    {isBound && editingTitle?.taskId === task.id ? (
-                      <AutoEdit
-                        value={editingTitle.value}
-                        singleLine
-                        onCommit={(v) => commitTitle(task.id, v)}
-                        onCancel={() => setEditingTitle(null)}
-                      />
-                    ) : (
-                      <span
-                        className={`${css.cardTitle}${isBound ? ` ${css.cardTitleEditable}` : ''}`}
-                        title={isBound ? t('task.title-edit') : undefined}
-                        onDoubleClick={(e) => {
-                          e.preventDefault()
-                          e.stopPropagation()
-                          if (isBound) setEditingTitle({ taskId: task.id, value: task.title })
-                        }}
-                      >
-                        {task.title}
-                      </span>
-                    )}
-                  </div>
-                  <div className={css.cardMeta}>
-                    {steps.length > 0 && (
-                      <span className={css.progressText}>
-                        {done}/{steps.length}
-                      </span>
-                    )}
-                    <span className={css.updated}>{timeAgo(task.updatedAt || task.lastActiveAt)}</span>
-                    <span className={css.chevron}>
-                      {expanded ? <IconChevronUpOutline14 /> : <IconChevronDownOutline14 />}
-                    </span>
-                  </div>
-                </button>
-                {steps.length > 0 && (
-                  <div className={css.track}>
-                    <div className={css.trackFill} style={{ width: `${pct}%` }} />
-                  </div>
-                )}
-                {expanded && (
-                  <div className={css.cardBody}>
-                    <div className={css.section}>
-                      <div className={css.sectionLabel}>
-                        {t('task.steps')}
-                        {steps.length > 0 && <span className={css.sectionCount}>{steps.length}</span>}
-                      </div>
-                      {steps.length > 0 ? (
-                        <ol className={css.stepsList}>
-                          {steps.map((step, i) => {
-                            const isEditing = isBound && editing?.taskId === task.id && editing.index === i
-                            return (
-                              <li key={i} className={css.stepRow}>
-                                {isBound ? (
-                                  <button
-                                    type="button"
-                                    className={css.stepToggle}
-                                    disabled={syncing}
-                                    onClick={() => cycleStatus(task.id, i)}
-                                    title={`${t('step.completed')}/${t('step.in-progress')}/${t('step.pending')}（点击切换）`}
-                                  >
-                                    <StepIcon status={step.status} />
-                                  </button>
-                                ) : (
-                                  <StepIcon status={step.status} />
-                                )}
-                                {isEditing ? (
-                                  <AutoEdit
-                                    value={editing!.value}
-                                    onCommit={(v) => commitStepText(task.id, i, v)}
-                                    onCancel={() => setEditing(null)}
-                                  />
-                                ) : (
-                                  <span
-                                    className={`${css.stepContent}${step.status === 'completed' ? ` ${css.stepContentDone}` : ''}${step.status === 'in_progress' ? ` ${css.stepContentRun}` : ''}${isBound ? ` ${css.stepEditable}` : ''}`}
-                                    title={isBound ? t('step.edit-hint') : undefined}
-                                    onDoubleClick={() => {
-                                      if (isBound) setEditing({ taskId: task.id, index: i, value: String(step.content ?? '') })
-                                    }}
-                                  >
-                                    {step.content}
-                                  </span>
-                                )}
-                              </li>
-                            )
-                          })}
-                        </ol>
-                      ) : (
-                        <div className={css.muted}>{t('panel.empty-desc')}</div>
-                      )}
-                    </div>
-
-                    {(task.files?.length ?? 0) > 0 && (
-                      <div className={css.section}>
-                        <div className={css.sectionLabel}>
-                          {t('task.files')}
-                          <span className={css.sectionCount}>{task.files.length}</span>
-                        </div>
-                        <ul className={css.filesList}>
-                          {task.files.slice(0, 12).map((file, i) => (
-                            <li key={i}>
-                              <button
-                                className={css.fileRow}
-                                onClick={() => copyPath(file.path)}
-                                title={`${t(copiedPath === file.path ? 'file.copied' : 'file.copy')}: ${file.path}${file.line ? `:${file.line}` : ''}`}
-                              >
-                                <span className={css.fileDot} />
-                                <span className={css.filePath}>{file.path}</span>
-                                {file.line && <span className={css.fileLine}>:{file.line}</span>}
-                              </button>
-                            </li>
-                          ))}
-                          {(task.files?.length ?? 0) > 12 && (
-                            <li className={css.muted}>… 共 {task.files.length} 个</li>
-                          )}
-                        </ul>
-                      </div>
-                    )}
-
-                    <div className={css.cardFooter}>
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        disabled={isBound || syncing}
-                        onClick={() => void handleAction('switch', task.id)}
-                      >
-                        {t('task.switch')}
-                      </Button>
-                      {isBound && (
-                        <Button
-                          variant="outline"
-                          size="sm"
-                          disabled={syncing}
-                          onClick={() => void runLine('/task unbind')}
-                          title={t('task.unbind')}
-                        >
-                          {t('task.unbind')}
-                        </Button>
-                      )}
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        disabled={syncing}
-                        onClick={() => void handleAction('archive', task.id)}
-                      >
-                        {t('task.archive')}
-                      </Button>
-                    </div>
-                  </div>
-                )}
-              </article>
+              <TaskCard
+                key={task.id}
+                task={task}
+                isBound={isBound}
+                expanded={expanded}
+                onToggleExpand={() => uiActions.toggleTaskExpanded(task.id)}
+                onSwitch={() => handleAction('switch', task.id)}
+                onUnbind={() => runLine('/task unbind')}
+                onArchive={() => handleAction('archive', task.id)}
+                onRename={(value) => commitTitle(task.id, value)}
+                onEditStep={(index, value) => commitStepText(task.id, index, value)}
+                onCycleStatus={(index) => cycleStatus(task.id, index)}
+                onReorderSteps={(from, to) => reorderSteps(task.id, from, to)}
+                showHints={showHints}
+                syncing={syncing}
+                t={t}
+              />
             )
           })}
           {syncing && <div className={css.syncHint}>{t('panel.syncing')}</div>}
@@ -652,4 +375,4 @@ function TaskPanelView({ ctx }: { ctx: any }) {
       )}
     </div>
   )
-}
+}