diff --git a/frontend/src/pages/WorkbenchPage.jsx b/frontend/src/pages/WorkbenchPage.jsx
index e9c6cdb..6cc7ef2 100644
--- a/frontend/src/pages/WorkbenchPage.jsx
+++ b/frontend/src/pages/WorkbenchPage.jsx
@@ -1,1060 +1,97 @@
-import { useEffect, useRef, useState } from 'react';
+// frontend/src/pages/WorkbenchPage.jsx
+import { useRef } from 'react';
+import { deriveTaskState } from '../constants';
 import {
-  Activity,
-  AlertTriangle,
-  Check,
-  CheckCircle2,
-  Edit3,
-  FileSearch,
-  Folder,
-  ListChecks,
-  Play,
-  Settings
-} from 'lucide-react';
-import { useNavigate } from 'react-router-dom';
-import {
-  createTaskStream,
-  fetchCurrentTask,
-  fetchTask,
-  fetchTaskItems,
-  runTask
-} from '../api/tasks';
-import { deriveTaskState, getStageIndex, STAGES } from '../constants';
+  EMPTY_SCAN_STATS, EMPTY_PREPROCESS_STATS, EMPTY_MATCH_STATS,
+  EMPTY_DEDUPE_STATS, EMPTY_ORGANIZE_STATS
+} from '../utils/workbench';
+import useTaskStream from '../hooks/useTaskStream';
+import useTaskRunner from '../hooks/useTaskRunner';
+import TaskControlPanel from '../components/workbench/TaskControlPanel';
+import TaskProgressBar from '../components/workbench/TaskProgressBar';
+import StageStatsPanel from '../components/workbench/StageStatsPanel';
+import TaskInfoPanel from '../components/workbench/TaskInfoPanel';
+import TaskFileList from '../components/workbench/TaskFileList';
+import TaskLogStream from '../components/workbench/TaskLogStream';
 
-const DEFAULT_STAGE_STATES = {
-  scan: 'pending',
-  preprocess: 'pending',
-  match: 'pending',
-  dedupe: 'pending',
-  organize: 'pending',
-  complete: 'pending'
-};
-
-const EMPTY_SCAN_STATS = {
-  total_found: 0,
-  queued: 0,
-  skipped_locked: 0,
-  skipped_invalid: 0,
-  ignored_non_audio: 0
-};
-
-const EMPTY_PREPROCESS_STATS = {
-  input_items: 0,
-  output_items: 0,
-  split_parents: 0,
-  generated_children: 0,
-  converted_items: 0,
-  metadata_snapshots: 0,
-  fingerprints_ok: 0,
-  fingerprints_failed: 0,
-  failed_items: 0,
-  warning_items: 0
-};
-
-const EMPTY_MATCH_STATS = {
-  input_items: 0,
-  matched_authoritative: 0,
-  matched_fallback: 0,
-  low_score: 0,
-  not_found: 0,
-  provider_warnings: 0,
-  failed_items: 0
-};
-
-const EMPTY_DEDUPE_STATS = {
-  input_items: 0,
-  library_candidates: 0,
-  batch_duplicates: 0,
-  library_duplicates: 0,
-  replaced_library_items: 0,
-  kept_items: 0,
-  failed_items: 0
-};
-
-const EMPTY_ORGANIZE_STATS = {
-  input_items: 0,
-  moved_items: 0,
-  renamed_items: 0,
-  collision_resolved: 0,
-  trashed_items: 0,
-  failed_items: 0
-};
-
-export default function WorkbenchPage({ config, setTaskState, setConnState }) {
-  const navigate = useNavigate();
+export default function WorkbenchPage({ config, setTaskState }) {
   const logsEndRef = useRef(null);
-  const streamRef = useRef(null);
-  const currentTaskIdRef = useRef(null);
-  const [task, setTask] = useState(null);
-  const [items, setItems] = useState([]);
-  const [logs, setLogs] = useState([]);
-  const [latestFile, setLatestFile] = useState('-');
-  const [hasMoreLogs, setHasMoreLogs] = useState(false);
-  const [latestLogId, setLatestLogId] = useState(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const [isStarting, setIsStarting] = useState(false);
-  const [errorMessage, setErrorMessage] = useState('');
 
-  useEffect(() => {
-    loadCurrentTask();
+  const {
+    task, items, logs, latestFile, hasMoreLogs, latestLogId,
+    isLoading,
+    hydrateTask
+  } = useTaskStream();
 
-    return () => {
-      closeStream();
-      setConnState('polling');
-    };
-  }, []);
-
-  useEffect(() => {
-    if (logsEndRef.current) {
-      logsEndRef.current.scrollIntoView({ behavior: 'smooth' });
-    }
-  }, [logs]);
-
-  useEffect(() => {
-    setTaskState(deriveTaskState(config, task));
-  }, [config, setTaskState, task]);
+  const { isStarting, errorMessage, handleStart } = useTaskRunner({ hydrateTask });
 
   const isRunning = task?.status === 'pending' || task?.status === 'running';
   const isCompleted = task?.status === 'completed';
   const isFailed = task?.status === 'failed';
   const canStart = Boolean(config.input?.trim() && config.output?.trim() && config.trash?.trim());
+
   const scanStats = task?.stats?.scan || EMPTY_SCAN_STATS;
   const preprocessStats = task?.stats?.preprocess || EMPTY_PREPROCESS_STATS;
   const matchStats = task?.stats?.match || EMPTY_MATCH_STATS;
   const dedupeStats = task?.stats?.dedupe || EMPTY_DEDUPE_STATS;
   const organizeStats = task?.stats?.organize || EMPTY_ORGANIZE_STATS;
 
-  async function loadCurrentTask() {
-    setIsLoading(true);
-    setErrorMessage('');
-
-    try {
-      const response = await fetchCurrentTask();
-
-      if (!response.task) {
-        setTask(null);
-        setItems([]);
-        setLogs([]);
-        setLatestFile('-');
-        setHasMoreLogs(false);
-        setLatestLogId(null);
-        closeStream();
-        setConnState('polling');
-        return;
-      }
-
-      await hydrateTask(response.task.task_id, true);
-    } catch (error) {
-      setErrorMessage(error.message);
-      closeStream();
-      setConnState('polling');
-    } finally {
-      setIsLoading(false);
-    }
-  }
-
-  async function hydrateTask(taskId, connectStream) {
-    currentTaskIdRef.current = taskId;
-    const [taskResponse, itemResponse] = await Promise.all([
-      fetchTask(taskId),
-      fetchTaskItems(taskId, { pageSize: 200 })
-    ]);
-
-    setTask(taskResponse.task);
-    setItems(itemResponse.items);
-    setLatestFile(resolveItemDisplayPath(itemResponse.items.at(-1)) || '-');
-
-    if (connectStream) {
-      openStream(taskId);
-    }
-  }
-
-  function openStream(taskId) {
-    closeStream();
-
-    const stream = createTaskStream(taskId);
-    streamRef.current = stream;
-
-    stream.onopen = () => {
-      setConnState('connected');
-    };
-
-    stream.onmessage = (event) => {
-      const payload = JSON.parse(event.data);
-      handleStreamEvent(payload);
-    };
-
-    stream.onerror = () => {
-      setConnState('polling');
-    };
-
-    stream.onclose = () => {
-      setConnState('polling');
-    };
-  }
-
-  function closeStream() {
-    if (streamRef.current) {
-      streamRef.current.close();
-      streamRef.current = null;
-    }
-  }
-
-  function handleStreamEvent(event) {
-    if (event.type === 'task.snapshot') {
-      const snapshotTask = event.data.task;
-      setTask(snapshotTask);
-      setLogs(event.data.recent_logs || []);
-      setHasMoreLogs(event.data.has_more_logs || false);
-      setLatestLogId(event.data.latest_log_id || null);
-      const snapshotLatestPath = extractLatestItemPath(event.data.recent_logs || []);
-      if (snapshotLatestPath) {
-        setLatestFile(snapshotLatestPath);
-      }
-      return;
-    }
-
-    const eventItems = extractItemsFromEvent(event);
-    if (eventItems.length > 0) {
-      setItems((currentItems) => mergeById(currentItems, eventItems));
-      setLatestFile((currentLatest) => resolveItemDisplayPath(eventItems.at(-1)) || currentLatest);
-    }
-
-    if (event.type === 'log.appended' && event.data?.log) {
-      setLogs((currentLogs) => mergeById(currentLogs, [event.data.log]));
-      setLatestLogId(event.data.log.id);
-      const eventItemPath = extractLatestItemPath([event.data.log]);
-      if (eventItemPath) {
-        setLatestFile(eventItemPath);
-      }
-    }
-
-    if (event.type === 'task.started') {
-      setTask((currentTask) =>
-        currentTask
-          ? {
-              ...currentTask,
-              status: event.data.status,
-              current_stage: event.data.current_stage || 'scan',
-              stage_states: {
-                ...(currentTask.stage_states || DEFAULT_STAGE_STATES),
-                scan: 'running'
-              }
-            }
-          : currentTask
-      );
-      return;
-    }
-
-    if (event.type === 'stage.started') {
-      setTask((currentTask) =>
-        currentTask
-          ? {
-              ...currentTask,
-              current_stage: event.stage,
-              stage_states: {
-                ...(currentTask.stage_states || DEFAULT_STAGE_STATES),
-                [event.stage]: 'running'
-              }
-            }
-          : currentTask
-      );
-      return;
-    }
-
-    if (
-      event.type === 'scan.progress'
-      || event.type === 'preprocess.progress'
-      || event.type === 'match.progress'
-      || event.type === 'dedupe.progress'
-      || event.type === 'organize.progress'
-    ) {
-      setTask((currentTask) =>
-        currentTask
-          ? {
-              ...currentTask,
-              current_stage: event.stage,
-              status: 'running',
-              stats: event.data.stats
-            }
-          : currentTask
-      );
-      return;
-    }
-
-    if (event.type === 'stage.completed') {
-      setTask((currentTask) =>
-        currentTask
-          ? {
-              ...currentTask,
-              stage_states: {
-                ...(currentTask.stage_states || DEFAULT_STAGE_STATES),
-                [event.stage]: 'completed'
-              },
-              stats: event.data.stats || currentTask.stats
-            }
-          : currentTask
-      );
-      return;
-    }
-
-    if (event.type === 'task.completed' || event.type === 'task.failed') {
-      void refreshTaskSummary(event.task_id);
-    }
-  }
-
-  async function refreshTaskSummary(taskId) {
-    try {
-      const response = await fetchTask(taskId);
-      setTask(response.task);
-      setTaskState(deriveTaskState(config, response.task));
-    } catch (error) {
-      setErrorMessage(error.message);
-    }
-  }
-
-  async function handleStart() {
-    if (!canStart) {
-      window.alert('请先在设置中配置目录！');
-      return;
-    }
-
-    setIsStarting(true);
-    setErrorMessage('');
-
-    try {
-      const response = await runTask();
-      setItems([]);
-      setLogs([]);
-      setLatestFile('-');
-      setHasMoreLogs(false);
-      setLatestLogId(null);
-      await hydrateTask(response.task_id, true);
-    } catch (error) {
-      if (error.status === 409 && error.taskId) {
-        await hydrateTask(error.taskId, true);
-      } else {
-        setErrorMessage(error.message);
-      }
-    } finally {
-      setIsStarting(false);
-    }
-  }
-
-  const stageIndex = getStageIndex(task?.current_stage || 'scan');
-  const activeStageName = getStageName(task?.current_stage || 'scan');
-  const progressLabel = isRunning
-    ? `${activeStageName}进行中`
-    : isCompleted
-      ? '五阶段处理已完成'
-      : isFailed
-        ? `${activeStageName}执行失败`
-        : '等待启动后台任务';
-  const progressWidth = task
-    ? `${Math.max(8, ((stageIndex + (isRunning ? 0.5 : 1)) / STAGES.length) * 100)}%`
-    : '0%';
-
   return (
     <div className="flex h-full min-h-0 gap-6 overflow-hidden">
+      {/* Left Column */}
       <div className="flex w-1/3 min-h-0 flex-col gap-6">
-        <div className="group relative rounded-xl border border-slate-800 bg-slate-900 p-5 shadow-lg">
-          <div className="mb-4 flex items-center justify-between">
-            <h2 className="flex items-center text-base font-semibold text-white">
-              <Folder className="mr-2 h-5 w-5 text-blue-400" />
-              处理编排
-            </h2>
-            <button
-              onClick={() => navigate('/settings')}
-              className="flex items-center rounded bg-slate-800/50 px-2 py-1 text-xs text-slate-400 transition hover:bg-slate-800 hover:text-blue-400"
-            >
-              <Settings className="mr-1.5 h-3 w-3" />
-              前往修改配置
-            </button>
-          </div>
-          <div className="space-y-4">
-            <DirectoryField
-              label="输入目录 (待处理源)"
-              value={config.input}
-              missingText="⚠ 尚未配置输入目录"
-            />
-            <DirectoryField
-              label="输出目录 (Navidrome库)"
-              value={config.output}
-              missingText="⚠ 尚未配置输出目录"
-            />
-            <DirectoryField
-              label="回收站目录 (异常隔离)"
-              value={config.trash}
-              missingText="⚠ 尚未配置回收站目录"
-            />
-            {!canStart && (
-              <div className="pt-2">
-                <button
-                  onClick={() => navigate('/settings')}
-                  className="flex w-full items-center justify-center border border-blue-500/30 bg-blue-600/20 py-2 text-sm font-medium text-blue-400 transition hover:bg-blue-600/40"
-                >
-                  <Edit3 className="mr-2 h-4 w-4" />
-                  点击前往填写系统配置
-                </button>
-              </div>
-            )}
-          </div>
-        </div>
-
-        <div className="flex flex-1 flex-col justify-center rounded-xl border border-slate-800 bg-slate-900 p-5 shadow-lg">
-          {isRunning ? (
-            <div className="w-full text-center">
-              <div className="mb-4 inline-block rounded-full bg-emerald-500/10 p-3">
-                <Activity className="h-10 w-10 animate-pulse text-emerald-500" />
-              </div>
-              <h3 className="mb-2 text-xl font-bold text-emerald-400">后台任务执行中</h3>
-              <p className="text-sm text-slate-400">{activeStageName}正在后台执行，实时日志、去重决策与入库路径会持续刷新。</p>
-            </div>
-          ) : isFailed ? (
-            <div className="w-full text-center">
-              <div className="mb-4 inline-block rounded-full bg-rose-500/10 p-3">
-                <AlertTriangle className="h-10 w-10 text-rose-400" />
-              </div>
-              <h3 className="mb-2 text-xl font-bold text-rose-400">后台任务失败</h3>
-              <p className="mb-4 text-sm text-slate-400">{task?.error_message || '请查看任务记录流排查原因。'}</p>
-              <button
-                onClick={handleStart}
-                disabled={isStarting}
-                className="flex w-full items-center justify-center rounded-lg bg-blue-600 py-3 text-sm font-bold text-white shadow-lg shadow-blue-900/20 transition hover:bg-blue-500 disabled:opacity-60"
-              >
-                <Play className="mr-2 h-5 w-5" />
-                {isStarting ? '重新启动中...' : '重新启动扫描'}
-              </button>
-            </div>
-          ) : (
-            <div className="w-full text-center">
-              {isCompleted && (
-                <div className="mb-4 inline-block rounded-full bg-slate-800 p-3">
-                  <CheckCircle2 className="h-10 w-10 text-emerald-400" />
-                </div>
-              )}
-              <h3 className="mb-4 text-xl font-bold text-white">
-                {isCompleted ? '五阶段任务已完成' : '准备启动后台任务'}
-              </h3>
-              <button
-                onClick={handleStart}
-                disabled={isStarting || !canStart}
-                className="group flex h-16 w-full items-center justify-center rounded-lg bg-blue-600 text-lg font-bold text-white shadow-lg shadow-blue-900/20 transition-all hover:bg-blue-500 disabled:opacity-60"
-              >
-                <Play className="mr-2 h-6 w-6 transition-transform group-hover:scale-110" />
-                {isStarting ? '启动中...' : isCompleted ? '再次启动任务' : '启动扫描、预处理、匹配、去重与入库'}
-              </button>
-            </div>
-          )}
-
-          {errorMessage && (
-            <div className="mt-4 rounded-lg border border-rose-500/20 bg-rose-950/40 px-4 py-3 text-sm text-rose-300">
-              {errorMessage}
-            </div>
-          )}
-        </div>
+        <TaskControlPanel
+          config={config}
+          canStart={canStart}
+          isRunning={isRunning}
+          isCompleted={isCompleted}
+          isFailed={isFailed}
+          onStart={handleStart}
+          isStarting={isStarting}
+          errorMessage={errorMessage}
+          activeStageName={task?.current_stage || 'scan'}
+          task={task}
+        />
       </div>
 
+      {/* Right Column */}
       <div className="flex w-2/3 min-h-0 flex-col gap-4">
-        <div className="shrink-0 rounded-xl border border-slate-800 bg-slate-900 p-6 shadow-lg">
-          <div className="relative flex items-center justify-between">
-            <div className="absolute left-4 right-4 top-1/2 -z-10 h-0.5 -translate-y-1/2 bg-slate-800" />
-            <div
-              className="absolute left-4 top-1/2 -z-10 h-0.5 -translate-y-1/2 bg-emerald-500 transition-all duration-300"
-              style={{
-                width: `calc(${Math.min(100, (stageIndex / (STAGES.length - 1)) * 100)}% - 2rem)`
-              }}
-            />
-            {STAGES.map((stage) => {
-              const stageState = task?.stage_states?.[stage.id] || DEFAULT_STAGE_STATES[stage.id];
-              const isActive = stageState === 'running';
-              const isPast = stageState === 'completed' || stageState === 'skipped';
-              const isErrored = stageState === 'failed';
-
-              return (
-                <div key={stage.id} className="flex flex-col items-center">
-                  <div
-                    className={`flex h-8 w-8 items-center justify-center rounded-full border-2 text-sm font-bold transition-colors ${
-                      isErrored
-                        ? 'border-rose-500 bg-rose-950 text-rose-400'
-                        : isActive
-                          ? 'border-emerald-400 bg-emerald-500 text-white shadow-[0_0_15px_rgba(16,185,129,0.5)]'
-                          : isPast
-                            ? 'border-emerald-500 bg-emerald-900 text-emerald-400'
-                            : 'border-slate-700 bg-slate-950 text-slate-500'
-                    }`}
-                  >
-                    {isPast && !isActive && !isErrored ? <Check className="h-4 w-4" /> : getStageIndex(stage.id) + 1}
-                  </div>
-                  <span
-                    className={`mt-2 text-xs font-medium ${
-                      isErrored
-                        ? 'text-rose-400'
-                        : isActive
-                          ? 'text-emerald-400'
-                          : isPast
-                            ? 'text-slate-300'
-                            : 'text-slate-500'
-                    }`}
-                  >
-                    {stage.name}
-                  </span>
-                </div>
-              );
-            })}
-          </div>
-        </div>
-
-        <div className="shrink-0 rounded-xl border border-slate-800 bg-slate-900 p-5 shadow-lg">
-          <div className="mb-2 flex items-end justify-between">
-            <div>
-              <div className="mb-1 text-xs font-semibold uppercase tracking-wider text-slate-400">
-                当前状态
-              </div>
-              <div className="w-96 truncate font-mono text-sm text-emerald-400">
-                {latestFile}
-              </div>
-            </div>
-            <div className="text-right">
-              <div className="font-mono text-xl font-bold text-white">{progressLabel}</div>
-              {task && (
-                <div className="text-xs text-slate-500">
-                  任务 ID: <span className="font-mono">{task.task_id.slice(0, 8)}</span>
-                </div>
-              )}
-            </div>
-          </div>
-          <div className="h-3 w-full overflow-hidden rounded-full border border-slate-800 bg-slate-950">
-            <div
-              className={`h-full ${
-                isRunning
-                  ? 'animate-pulse bg-gradient-to-r from-blue-500 to-emerald-400'
-                  : isCompleted
-                    ? 'bg-gradient-to-r from-emerald-500 to-emerald-400'
-                    : isFailed
-                      ? 'bg-gradient-to-r from-rose-500 to-rose-400'
-                    : 'bg-slate-800'
-              }`}
-              style={{ width: progressWidth }}
-            />
-          </div>
-        </div>
+        <TaskProgressBar
+          task={task}
+          isRunning={isRunning}
+          isCompleted={isCompleted}
+          isFailed={isFailed}
+          latestFile={latestFile}
+        />
 
         <div className="flex min-h-0 flex-1 gap-4 overflow-hidden">
+          {/* Stats + Info Sidebar */}
           <div className="flex h-full w-72 min-h-0 shrink-0 flex-col gap-4">
             <div className="flex min-h-0 flex-1 flex-col rounded-xl border border-slate-800 bg-slate-900 p-4">
               <h3 className="mb-3 shrink-0 border-b border-slate-800 pb-3 text-[13px] font-bold text-white">
                 阶段统计
               </h3>
               <div className="min-h-0 flex-1 space-y-5 overflow-y-auto pr-1 pb-2">
-                <div>
-                  <div className="mb-2 text-[10px] font-bold uppercase tracking-wider text-slate-500">
-                    Scan
-                  </div>
-                  <div className="grid grid-cols-2 gap-2">
-                    <StatCard label="候选音频" value={scanStats.total_found} valueClass="text-white" />
-                    <StatCard label="成功入队" value={scanStats.queued} labelClass="text-emerald-500" valueClass="text-emerald-400" />
-                    <StatCard label="最近写入跳过" value={scanStats.skipped_locked} labelClass="text-amber-500" valueClass="text-amber-400" />
-                    <StatCard label="无效文件" value={scanStats.skipped_invalid} labelClass="text-rose-500" valueClass="text-rose-400" error />
-                  </div>
-                  <div className="mt-3 rounded-lg border border-slate-800/50 bg-slate-950 p-3">
-                    <div className="mb-1 text-xs text-slate-500">静默忽略非音频</div>
-                    <div className="font-mono text-xl font-bold text-slate-300">{scanStats.ignored_non_audio}</div>
-                  </div>
-                </div>
-
-                <div>
-                  <div className="mb-2 text-[10px] font-bold uppercase tracking-wider text-slate-500">
-                    Preprocess
-                  </div>
-                  <div className="grid grid-cols-2 gap-2">
-                    <StatCard label="输入项目" value={preprocessStats.input_items} valueClass="text-white" />
-                    <StatCard label="有效输出" value={preprocessStats.output_items} labelClass="text-emerald-500" valueClass="text-emerald-400" />
-                    <StatCard label="切轨父项" value={preprocessStats.split_parents} labelClass="text-blue-400" valueClass="text-blue-300" />
-                    <StatCard label="生成子轨" value={preprocessStats.generated_children} labelClass="text-cyan-400" valueClass="text-cyan-300" />
-                    <StatCard label="已转码" value={preprocessStats.converted_items} labelClass="text-indigo-400" valueClass="text-indigo-300" />
-                    <StatCard label="元数据快照" value={preprocessStats.metadata_snapshots} labelClass="text-slate-400" valueClass="text-slate-300" />
-                    <StatCard label="指纹成功" value={preprocessStats.fingerprints_ok} labelClass="text-emerald-500" valueClass="text-emerald-400" />
-                    <StatCard label="指纹警告" value={preprocessStats.fingerprints_failed} labelClass="text-amber-500" valueClass="text-amber-400" />
-                    <StatCard label="项目警告" value={preprocessStats.warning_items} labelClass="text-amber-500" valueClass="text-amber-400" />
-                    <StatCard label="项目失败" value={preprocessStats.failed_items} labelClass="text-rose-500" valueClass="text-rose-400" error />
-                  </div>
-                </div>
-
-                <div>
-                  <div className="mb-2 text-[10px] font-bold uppercase tracking-wider text-slate-500">
-                    Match
-                  </div>
-                  <div className="grid grid-cols-2 gap-2">
-                    <StatCard label="进入匹配" value={matchStats.input_items} valueClass="text-white" />
-                    <StatCard label="权威命中" value={matchStats.matched_authoritative} labelClass="text-emerald-500" valueClass="text-emerald-400" />
-                    <StatCard label="Fallback 命中" value={matchStats.matched_fallback} labelClass="text-sky-400" valueClass="text-sky-300" />
-                    <StatCard label="低分待审" value={matchStats.low_score} labelClass="text-amber-500" valueClass="text-amber-400" />
-                    <StatCard label="未命中" value={matchStats.not_found} labelClass="text-slate-400" valueClass="text-slate-300" />
-                    <StatCard label="Provider 告警" value={matchStats.provider_warnings} labelClass="text-orange-400" valueClass="text-orange-300" />
-                    <StatCard label="请求失败" value={matchStats.failed_items} labelClass="text-rose-500" valueClass="text-rose-400" error />
-                  </div>
-                </div>
-
-                <div>
-                  <div className="mb-2 text-[10px] font-bold uppercase tracking-wider text-slate-500">
-                    Dedupe
-                  </div>
-                  <div className="grid grid-cols-2 gap-2">
-                    <StatCard label="进入去重" value={dedupeStats.input_items} valueClass="text-white" />
-                    <StatCard label="库内候选" value={dedupeStats.library_candidates} labelClass="text-slate-400" valueClass="text-slate-300" />
-                    <StatCard label="批次重复" value={dedupeStats.batch_duplicates} labelClass="text-amber-500" valueClass="text-amber-400" />
-                    <StatCard label="库内重复" value={dedupeStats.library_duplicates} labelClass="text-amber-500" valueClass="text-amber-400" />
-                    <StatCard label="替换旧库" value={dedupeStats.replaced_library_items} labelClass="text-cyan-400" valueClass="text-cyan-300" />
-                    <StatCard label="保留项目" value={dedupeStats.kept_items} labelClass="text-emerald-500" valueClass="text-emerald-400" />
-                    <StatCard label="处理失败" value={dedupeStats.failed_items} labelClass="text-rose-500" valueClass="text-rose-400" error />
-                  </div>
-                </div>
-
-                <div>
-                  <div className="mb-2 text-[10px] font-bold uppercase tracking-wider text-slate-500">
-                    Organize
-                  </div>
-                  <div className="grid grid-cols-2 gap-2">
-                    <StatCard label="进入入库" value={organizeStats.input_items} valueClass="text-white" />
-                    <StatCard label="移动完成" value={organizeStats.moved_items} labelClass="text-emerald-500" valueClass="text-emerald-400" />
-                    <StatCard label="重命名" value={organizeStats.renamed_items} labelClass="text-cyan-400" valueClass="text-cyan-300" />
-                    <StatCard label="冲突化解" value={organizeStats.collision_resolved} labelClass="text-sky-400" valueClass="text-sky-300" />
-                    <StatCard label="失败入桶" value={organizeStats.trashed_items} labelClass="text-amber-500" valueClass="text-amber-400" />
-                    <StatCard label="处理失败" value={organizeStats.failed_items} labelClass="text-rose-500" valueClass="text-rose-400" error />
-                  </div>
-                </div>
+                <StageStatsPanel stageName="scan" stats={scanStats} />
+                <StageStatsPanel stageName="preprocess" stats={preprocessStats} />
+                <StageStatsPanel stageName="match" stats={matchStats} />
+                <StageStatsPanel stageName="dedupe" stats={dedupeStats} />
+                <StageStatsPanel stageName="organize" stats={organizeStats} />
               </div>
             </div>
 
-            <div className="relative shrink-0 overflow-hidden rounded-xl border border-slate-800 bg-slate-900 p-4">
-              <h3 className="mb-3 border-b border-slate-800/50 pb-3 text-[13px] font-bold text-white">
-                当前任务
-              </h3>
-              <div className="space-y-3 text-[11px] text-slate-400">
-                <InfoRow label="任务状态" value={task?.status || 'idle'} />
-                <InfoRow label="当前阶段" value={getStageName(task?.current_stage || 'scan')} />
-                <InfoRow label="开始时间" value={task?.started_at || '-'} />
-                <InfoRow label="完成时间" value={task?.completed_at || '-'} />
-                <InfoRow label="最近日志 ID" value={latestLogId ?? '-'} />
-                <InfoRow label="日志是否截断" value={hasMoreLogs ? '是' : '否'} />
-              </div>
-            </div>
+            <TaskInfoPanel
+              task={task}
+              latestLogId={latestLogId}
+              hasMoreLogs={hasMoreLogs}
+            />
           </div>
 
-          <div className="flex min-w-0 flex-1 flex-col rounded-xl border border-slate-800 bg-slate-900 p-4">
-            <h3 className="mb-3 flex items-center justify-between border-b border-slate-800 pb-2 text-sm font-semibold text-white">
-              <span>任务文件</span>
-              <FileSearch className="h-4 w-4 text-slate-500" />
-            </h3>
-            <div className="min-h-0 flex-1 space-y-2 overflow-y-auto">
-              {isLoading ? (
-                <div className="mt-10 text-center italic text-slate-600">正在加载任务数据...</div>
-              ) : items.length === 0 ? (
-                <div className="mt-10 text-center italic text-slate-600">当前暂无任务文件</div>
-              ) : (
-                items.map((item) => (
-                  <div key={item.id} className="rounded-lg border border-slate-800 bg-slate-950 px-3 py-2">
-                    <div className="flex items-start justify-between gap-3">
-                      <div className="min-w-0">
-                        <div className="truncate font-mono text-xs text-slate-200">{item.relative_path}</div>
-                        <div className="mt-1 text-[11px] text-slate-500">
-                          {item.local_cover ? '已挂载封面' : '无本地封面'} / {item.local_lyric ? '已挂载歌词' : '无本地歌词'}
-                        </div>
-                        {item.current_file_path && item.current_file_path !== item.original_path && (
-                          <div className="mt-1 truncate font-mono text-[11px] text-sky-300/80">
-                            当前文件: {item.current_file_path}
-                          </div>
-                        )}
-                        {item.preprocess_message && (
-                          <div className="mt-1 line-clamp-2 text-[11px] text-amber-300/80">
-                            {item.preprocess_message}
-                          </div>
-                        )}
-                        <MatchSummary item={item} />
-                        <PostprocessSummary item={item} />
-                      </div>
-                      <div className="flex shrink-0 flex-col items-end gap-1">
-                        <StatusBadge status={item.scan_status} />
-                        <StatusBadge status={item.preprocess_status} variant="preprocess" />
-                        <StatusBadge status={getMatchDisplayStatus(item)} variant="match" />
-                        <StatusBadge status={getDedupeDisplayStatus(item)} variant="dedupe" />
-                        <StatusBadge status={getOrganizeDisplayStatus(item)} variant="organize" />
-                      </div>
-                    </div>
-                  </div>
-                ))
-              )}
-            </div>
-          </div>
-
-          <div className="relative flex min-w-0 flex-1 flex-col overflow-hidden rounded-xl border border-slate-800 bg-slate-950 p-0 shadow-inner">
-            <div className="absolute left-0 right-0 top-0 z-10 flex h-10 items-center border-b border-slate-800 bg-slate-900/90 px-4 backdrop-blur-sm">
-              <ListChecks className="mr-2 h-4 w-4 text-slate-400" />
-              <span className="text-sm font-semibold text-white">任务记录流</span>
-            </div>
-            <div className="min-h-0 flex-1 space-y-1.5 overflow-y-auto px-4 pb-4 pt-12 font-mono text-[11px]">
-              {logs.length === 0 ? (
-                <div className="mt-10 text-center italic text-slate-600">等待任务启动...</div>
-              ) : (
-                logs.map((log) => (
-                  <div key={log.id} className="flex gap-2 leading-tight">
-                    <span className="shrink-0 text-slate-500">[{formatLogTime(log.created_at)}]</span>
-                    <span
-                      className={`break-all ${
-                        log.level === 'error'
-                          ? 'text-rose-400'
-                          : log.level === 'success'
-                            ? 'text-emerald-400/80'
-                            : log.level === 'warning'
-                              ? 'text-amber-300'
-                              : 'text-blue-300'
-                      }`}
-                    >
-                      {log.message}
-                    </span>
-                  </div>
-                ))
-              )}
-              <div ref={logsEndRef} />
-            </div>
-          </div>
+          {/* File List + Log Stream */}
+          <TaskFileList items={items} isLoading={isLoading} />
+          <TaskLogStream logs={logs} logsEndRef={logsEndRef} />
         </div>
       </div>
     </div>
   );
 }
-
-function DirectoryField({ label, value, missingText }) {
-  return (
-    <div>
-      <label className="mb-1 block text-xs font-medium text-slate-400">{label}</label>
-      <div
-        className={`truncate rounded border px-3 py-2 font-mono text-sm ${
-          value
-            ? 'border-slate-800 bg-slate-950 text-slate-300'
-            : 'border-rose-900/50 bg-rose-950/20 italic text-rose-500/70'
-        }`}
-      >
-        {value || missingText}
-      </div>
-    </div>
-  );
-}
-
-function StatCard({ label, value, labelClass = 'text-slate-500', valueClass, error = false }) {
-  return (
-    <div
-      className={`rounded-lg border p-3 ${
-        error ? 'border-rose-900/30 bg-slate-950' : 'border-slate-800/50 bg-slate-950'
-      }`}
-    >
-      <div className={`mb-1 text-xs ${labelClass}`}>{label}</div>
-      <div className={`font-mono text-xl font-bold ${valueClass}`}>{value}</div>
-    </div>
-  );
-}
-
-function InfoRow({ label, value }) {
-  return (
-    <div className="flex items-center justify-between gap-3">
-      <span className="text-slate-500">{label}</span>
-      <span className="max-w-[180px] truncate font-mono text-slate-300">{value}</span>
-    </div>
-  );
-}
-
-function StatusBadge({ status, variant = 'scan' }) {
-  const scanStatusMap = {
-    queued: 'border-emerald-500/20 bg-emerald-500/10 text-emerald-400',
-    skipped_locked: 'border-amber-500/20 bg-amber-500/10 text-amber-400',
-    invalid: 'border-rose-500/20 bg-rose-500/10 text-rose-400'
-  };
-  const scanLabelMap = {
-    queued: '已入队',
-    skipped_locked: '已跳过',
-    invalid: '无效'
-  };
-  const preprocessStatusMap = {
-    pending: 'border-slate-700 bg-slate-800 text-slate-300',
-    skipped: 'border-slate-700 bg-slate-800 text-slate-400',
-    running: 'border-blue-500/20 bg-blue-500/10 text-blue-300',
-    completed: 'border-emerald-500/20 bg-emerald-500/10 text-emerald-400',
-    warning: 'border-amber-500/20 bg-amber-500/10 text-amber-400',
-    failed: 'border-rose-500/20 bg-rose-500/10 text-rose-400',
-    replaced_by_split: 'border-cyan-500/20 bg-cyan-500/10 text-cyan-300'
-  };
-  const preprocessLabelMap = {
-    pending: '待预处理',
-    skipped: '不处理',
-    running: '处理中',
-    completed: '已完成',
-    warning: '有警告',
-    failed: '失败',
-    replaced_by_split: '已切轨'
-  };
-  const matchStatusMap = {
-    pending: 'border-slate-700 bg-slate-800 text-slate-300',
-    not_entered: 'border-slate-700 bg-slate-800 text-slate-500',
-    running: 'border-blue-500/20 bg-blue-500/10 text-blue-300',
-    matched: 'border-emerald-500/20 bg-emerald-500/10 text-emerald-400',
-    matched_fallback: 'border-sky-500/20 bg-sky-500/10 text-sky-300',
-    low_score: 'border-amber-500/20 bg-amber-500/10 text-amber-400',
-    not_found: 'border-slate-700 bg-slate-900 text-slate-300',
-    failed: 'border-rose-500/20 bg-rose-500/10 text-rose-400'
-  };
-  const matchLabelMap = {
-    pending: '待匹配',
-    not_entered: '未进入匹配',
-    running: '匹配中',
-    matched: '已匹配',
-    matched_fallback: 'Fallback',
-    low_score: '低分待审',
-    not_found: '未命中',
-    failed: '匹配失败'
-  };
-  const dedupeStatusMap = {
-    pending: 'border-slate-700 bg-slate-800 text-slate-300',
-    not_entered: 'border-slate-700 bg-slate-800 text-slate-500',
-    running: 'border-blue-500/20 bg-blue-500/10 text-blue-300',
-    unique: 'border-emerald-500/20 bg-emerald-500/10 text-emerald-400',
-    duplicate_trashed: 'border-amber-500/20 bg-amber-500/10 text-amber-400',
-    duplicate_replaced: 'border-cyan-500/20 bg-cyan-500/10 text-cyan-300',
-    failed: 'border-rose-500/20 bg-rose-500/10 text-rose-400'
-  };
-  const dedupeLabelMap = {
-    pending: '待去重',
-    not_entered: '未进入去重',
-    running: '去重中',
-    unique: '已保留',
-    duplicate_trashed: '重复淘汰',
-    duplicate_replaced: '替换旧库',
-    failed: '去重失败'
-  };
-  const organizeStatusMap = {
-    pending: 'border-slate-700 bg-slate-800 text-slate-300',
-    not_entered: 'border-slate-700 bg-slate-800 text-slate-500',
-    running: 'border-blue-500/20 bg-blue-500/10 text-blue-300',
-    organized: 'border-emerald-500/20 bg-emerald-500/10 text-emerald-400',
-    trashed: 'border-amber-500/20 bg-amber-500/10 text-amber-400',
-    failed: 'border-rose-500/20 bg-rose-500/10 text-rose-400'
-  };
-  const organizeLabelMap = {
-    pending: '待入库',
-    not_entered: '未入库',
-    running: '入库中',
-    organized: '已入库',
-    trashed: '失败入桶',
-    failed: '入库失败'
-  };
-
-  const statusMapByVariant = {
-    scan: scanStatusMap,
-    preprocess: preprocessStatusMap,
-    match: matchStatusMap,
-    dedupe: dedupeStatusMap,
-    organize: organizeStatusMap
-  };
-  const labelMapByVariant = {
-    scan: scanLabelMap,
-    preprocess: preprocessLabelMap,
-    match: matchLabelMap,
-    dedupe: dedupeLabelMap,
-    organize: organizeLabelMap
-  };
-  const statusMap = statusMapByVariant[variant] || scanStatusMap;
-  const labelMap = labelMapByVariant[variant] || scanLabelMap;
-
-  return (
-    <span className={`rounded border px-2 py-0.5 text-[10px] font-medium ${statusMap[status] || 'border-slate-700 bg-slate-800 text-slate-300'}`}>
-      {labelMap[status] || status}
-    </span>
-  );
-}
-
-function MatchSummary({ item }) {
-  const displayStatus = getMatchDisplayStatus(item);
-  const matchedMetadata = item.matched_metadata_json;
-
-  if (displayStatus === 'not_entered') {
-    return (
-      <div className="mt-2 text-[11px] text-slate-600">
-        当前文件未进入匹配阶段。
-      </div>
-    );
-  }
-
-  if (displayStatus === 'pending') {
-    return (
-      <div className="mt-2 text-[11px] text-slate-500">
-        已完成预处理，等待进入匹配。
-      </div>
-    );
-  }
-
-  return (
-    <div className="mt-2 space-y-1 text-[11px]">
-      {(matchedMetadata?.title || matchedMetadata?.artist || matchedMetadata?.album) && (
-        <div className="text-slate-300">
-          {matchedMetadata?.title || '未知标题'}
-          {(matchedMetadata?.artist || matchedMetadata?.album) && ' · '}
-          {[matchedMetadata?.artist, matchedMetadata?.album].filter(Boolean).join(' / ')}
-        </div>
-      )}
-      {(item.match_source || item.match_confidence != null) && (
-        <div className="text-slate-500">
-          来源: {item.match_source || '-'}
-          {item.match_is_authoritative ? ' / 权威' : item.match_source ? ' / Fallback' : ''}
-          {item.match_confidence != null ? ` / ${Number(item.match_confidence).toFixed(1)} 分` : ''}
-        </div>
-      )}
-      {item.match_message && (
-        <div className={`line-clamp-2 ${
-          displayStatus === 'failed'
-            ? 'text-rose-300/80'
-            : displayStatus === 'low_score'
-              ? 'text-amber-300/80'
-              : displayStatus === 'not_found'
-                ? 'text-slate-500'
-                : 'text-slate-500'
-        }`}>
-          {item.match_message}
-        </div>
-      )}
-    </div>
-  );
-}
-
-function PostprocessSummary({ item }) {
-  const dedupeStatus = getDedupeDisplayStatus(item);
-  const organizeStatus = getOrganizeDisplayStatus(item);
-
-  if (dedupeStatus === 'not_entered' && organizeStatus === 'not_entered') {
-    return null;
-  }
-
-  return (
-    <div className="mt-2 space-y-1 text-[11px]">
-      {item.duplicate_of_path && (
-        <div className="truncate text-amber-300/80">
-          重复来源: {item.duplicate_of_path}
-        </div>
-      )}
-      {item.dedupe_message && (
-        <div className={dedupeStatus === 'failed' ? 'text-rose-300/80' : 'text-slate-500'}>
-          去重: {item.dedupe_message}
-        </div>
-      )}
-      {item.library_relative_path && (
-        <div className="truncate text-emerald-300/80">
-          入库路径: {item.library_relative_path}
-        </div>
-      )}
-      {item.trash_file_path && (
-        <div className="truncate text-amber-300/80">
-          回收站: {item.trash_file_path}
-        </div>
-      )}
-      {item.organize_message && (
-        <div className={organizeStatus === 'failed' ? 'text-rose-300/80' : 'text-slate-500'}>
-          入库: {item.organize_message}
-        </div>
-      )}
-    </div>
-  );
-}
-
-function mergeById(currentItems, nextItems) {
-  const itemMap = new Map(currentItems.map((item) => [item.id, item]));
-
-  nextItems.forEach((item) => {
-    itemMap.set(item.id, item);
-  });
-
-  return Array.from(itemMap.values()).sort((left, right) => left.id - right.id);
-}
-
-function extractLatestItemPath(logs) {
-  for (let index = logs.length - 1; index >= 0; index -= 1) {
-    const children = logs[index]?.payload?.children || logs[index]?.payload?.items || [];
-    const itemPath =
-      resolveItemDisplayPath(logs[index]?.payload?.item) ||
-      resolveItemDisplayPath(children[children.length - 1]);
-    if (itemPath) {
-      return itemPath;
-    }
-  }
-
-  return '';
-}
-
-function extractItemsFromEvent(event) {
-  const items = [];
-
-  if (event.data?.item) {
-    items.push(event.data.item);
-  }
-
-  if (Array.isArray(event.data?.items)) {
-    items.push(...event.data.items);
-  }
-
-  if (Array.isArray(event.data?.children)) {
-    items.push(...event.data.children);
-  }
-
-  return items;
-}
-
-function getMatchDisplayStatus(item) {
-  const canEnterMatch =
-    item.scan_status === 'queued'
-    && ['completed', 'warning'].includes(item.preprocess_status);
-
-  if (!canEnterMatch) {
-    return 'not_entered';
-  }
-
-  return item.match_status || 'pending';
-}
-
-function getStageName(stageId) {
-  return STAGES.find((stage) => stage.id === stageId)?.name || stageId;
-}
-
-function resolveItemDisplayPath(item) {
-  if (!item) {
-    return '';
-  }
-
-  return item.library_relative_path || item.trash_file_path || item.relative_path || item.current_file_path || '';
-}
-
-function getDedupeDisplayStatus(item) {
-  const canEnterDedupe = ['matched', 'matched_fallback'].includes(item.match_status);
-  if (!canEnterDedupe) {
-    return 'not_entered';
-  }
-  return item.dedupe_status || 'pending';
-}
-
-function getOrganizeDisplayStatus(item) {
-  const canEnterOrganize = ['unique', 'duplicate_replaced'].includes(item.dedupe_status);
-  if (!canEnterOrganize) {
-    return 'not_entered';
-  }
-  return item.organize_status || 'pending';
-}
-
-function formatLogTime(timestamp) {
-  if (!timestamp) {
-    return '--:--:--';
-  }
-
-  const date = new Date(timestamp);
-  if (Number.isNaN(date.getTime())) {
-    return timestamp;
-  }
-
-  return date.toLocaleTimeString();
-}