feat(web): unified task stream with plan tab, task detail drawer and audit links (FE-1)

Tasks page merges engine runs (with W9-I business fields) into one stream:
all / active / failed / plan tabs, filters for source, business kind, status
and time; detail drawer with business summary, timeline, collapsed engine
steps, cancel/retry and related audit links. The schedule board moves into
the plan tab; card history jumps to the stream filtered by schedule key.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

apps/web/app/api/engine.ts

@@ -1,15 +1,24 @@
 import { useInfiniteQuery, useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import type { CursorPage, EngineRun, EngineRunDetail, EngineStats } from "@umt/contracts";
+import type { CursorPage, EngineBusinessKind, EngineRun, EngineRunDetail, EngineStats } from "@umt/contracts";
 import { apiData } from "~/lib/api.ts";
 import { qk } from "~/lib/query-keys.ts";
+import { errorCode } from "./parse.ts";
 
-export type EngineRunFilters = { status?: string; workflowName?: string };
+export type EngineRunFilters = {
+  status?: string;
+  workflowName?: string;
+  businessKind?: EngineBusinessKind;
+  businessRefId?: string;
+  /** created_at 下界(ISO) */
+  from?: string;
+};
 
 /** 终态:不能再 cancel */
 export const ENGINE_TERMINAL = new Set(["completed", "succeeded", "failed", "canceled"]);
 
-export function useEngineRuns(filters: EngineRunFilters) {
+export function useEngineRuns(filters: EngineRunFilters, enabled = true) {
   return useInfiniteQuery({
+    enabled,
     queryKey: qk.list("engine", filters),
     initialPageParam: undefined as string | undefined,
     queryFn: ({ pageParam, signal }) =>
@@ -18,11 +27,28 @@ export function useEngineRuns(filters: EngineRunFilters) {
   });
 }
 
+/** 只取第一页(首页区块、进行中合并用) */
+export function useEngineRunsPage(
+  filters: EngineRunFilters,
+  limit = 20,
+  refetchMs: number | false = 30_000,
+  enabled = true,
+) {
+  return useQuery({
+    enabled,
+    queryKey: qk.list("engine", { ...filters, limit, page: 1 }),
+    queryFn: ({ signal }) => apiData<CursorPage<EngineRun>>("/engine/runs", { params: { ...filters, limit }, signal }),
+    refetchInterval: refetchMs,
+  });
+}
+
 export function useEngineRun(id: string | undefined) {
   return useQuery({
     queryKey: qk.detail("engine", id ?? ""),
     queryFn: ({ signal }) => apiData<EngineRunDetail>("/engine/runs/{id}", { pathParams: { id: id ?? "" }, signal }),
     enabled: !!id,
+    // 不存在的 id(旧链接探测)不重试
+    retry: (count, err) => errorCode(err) !== "not_found" && count < 2,
     // 非终态每 5 秒兜底刷新(SSE 事件驱动是主路径)
     refetchInterval: (q) => (q.state.data && !ENGINE_TERMINAL.has(q.state.data.status) ? 5_000 : false),
   });

apps/web/app/components/downloads/business-tasks.tsx

@@ -328,7 +328,7 @@ export function TaskSummary({ t }: { t: Task }) {
             {
               label: "引擎运行",
               value: t.engineRunId ? (
-                <Link to={consolePath("engine", t.engineRunId)} className="font-mono underline underline-offset-4">
+                <Link to={consolePath("tasks", t.engineRunId)} className="font-mono underline underline-offset-4">
                   {t.engineRunId.slice(0, 12)}
                 </Link>
               ) : null,

apps/web/app/components/schedules/schedule-board.tsx

@@ -0,0 +1,145 @@
+import { useQueryClient } from "@tanstack/react-query";
+import { SCHEDULE_CHANGED_EVENT, type ScheduledJob, type ScheduleGroup } from "@umt/contracts";
+import { AlertTriangle, CalendarClock, CircleCheck, LoaderCircle, Plus, XCircle } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { useNavigate } from "react-router";
+import { useScheduleBoard } from "~/api/schedules.ts";
+import { EmptyState, ErrorState, LoadingState } from "~/components/console/empty-state.tsx";
+import { StatTile } from "~/components/console/stat-tile.tsx";
+import { Button } from "~/components/ui/button.tsx";
+import { qk } from "~/lib/query-keys.ts";
+import { useSse } from "~/lib/sse.ts";
+import { AgentCheckDialog } from "./agent-check-dialog.tsx";
+import { GROUP_LABEL, GROUP_ORDER } from "./labels.ts";
+import { ScheduleCard } from "./schedule-card.tsx";
+
+// 定时任务看板(W7-C),IA-3 起是任务页的"计划"页签。卡片"运行记录"跳到任务流按该定时任务筛选。
+
+/** 每秒一跳的当前时间(倒计时用) */
+export function useNow(ms = 1000) {
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    const t = setInterval(() => setNow(Date.now()), ms);
+    return () => clearInterval(t);
+  }, [ms]);
+  return now;
+}
+
+/** SSE:调度器每次开始/结束一次运行都会发 schedule.changed;1 秒节流 */
+export function useLiveSchedules() {
+  const qc = useQueryClient();
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  useSse([SCHEDULE_CHANGED_EVENT], () => {
+    if (timer.current) return;
+    timer.current = setTimeout(() => {
+      timer.current = null;
+      qc.invalidateQueries({ queryKey: qk.all("schedules") });
+    }, 1000);
+  });
+  useEffect(
+    () => () => {
+      if (timer.current) clearTimeout(timer.current);
+    },
+    [],
+  );
+  return useScheduleBoard();
+}
+
+/** 任务流里某个定时任务的筛选地址 */
+export const scheduleStreamPath = (id: string) => `/console/tasks?tab=all&kind=schedule&ref=${encodeURIComponent(id)}`;
+
+export function ScheduleBoard({ highlightJob }: { highlightJob?: string }) {
+  const _qc = useQueryClient();
+  const navigate = useNavigate();
+  const board = useLiveSchedules();
+  const now = useNow();
+  const [editing, setEditing] = useState<{ job: ScheduledJob | null; key: number } | null>(null);
+
+  const data = board.data;
+  const items = data?.items ?? [];
+  const byGroup = new Map<ScheduleGroup, ScheduledJob[]>();
+  for (const g of GROUP_ORDER) byGroup.set(g, []);
+  for (const j of items) byGroup.get(j.group)?.push(j);
+  const stats = data?.stats;
+  const val = (n: number | undefined) => (board.isPending ? "…" : board.isError ? "—" : (n ?? 0));
+
+  return (
+    <>
+      <div className="mb-3 flex flex-wrap items-center gap-2">
+        <p className="text-caption text-muted-foreground">周期任务与 Agent 巡检的开关、间隔和下次运行。</p>
+        <div className="ml-auto flex items-center gap-2">
+          <Button size="sm" onClick={() => setEditing({ job: null, key: Date.now() })}>
+            <Plus />
+            新建巡检
+          </Button>
+        </div>
+      </div>
+
+      <div className="mb-3 grid grid-cols-2 gap-2 lg:grid-cols-4">
+        <StatTile label="已启用" icon={CircleCheck} value={val(stats?.enabled)} />
+        <StatTile
+          label="上次失败"
+          icon={XCircle}
+          tone={(stats?.failed ?? 0) > 0 ? "destructive" : "neutral"}
+          value={val(stats?.failed)}
+        />
+        <StatTile label="运行中" icon={LoaderCircle} value={val(stats?.running)} />
+        <StatTile label="全部" icon={CalendarClock} value={val(stats?.total)} />
+      </div>
+
+      {data && !data.schedulerOnline ? (
+        <p
+          role="status"
+          className="mb-4 flex items-center gap-2 rounded-tight border border-warning/30 bg-warning/10 px-3 py-2 text-caption text-warning"
+        >
+          <AlertTriangle className="h-4 w-4 shrink-0" />
+          调度器未在线,任务不会按时运行。
+        </p>
+      ) : (
+        <div className="mb-4" />
+      )}
+
+      {board.isPending ? (
+        <LoadingState rows={6} />
+      ) : board.isError ? (
+        <ErrorState error={board.error} onRetry={() => board.refetch()} />
+      ) : items.length === 0 ? (
+        <EmptyState icon={CalendarClock} title="还没有定时任务" description="worker 启动后自动登记。" />
+      ) : (
+        <div className="grid items-start gap-4 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-5">
+          {GROUP_ORDER.map((g) => {
+            const jobs = byGroup.get(g) ?? [];
+            return (
+              <section key={g} aria-label={GROUP_LABEL[g]} className="grid min-w-0 gap-2.5">
+                <h2 className="flex items-baseline justify-between px-1 text-caption font-medium text-muted-foreground">
+                  <span>{GROUP_LABEL[g]}</span>
+                  <span className="tabular-nums">{jobs.length}</span>
+                </h2>
+                {jobs.length === 0 ? (
+                  <p className="rounded-xl border border-dashed border-border/70 px-4 py-6 text-center text-meta text-muted-foreground">
+                    {g === "agent" ? "还没有巡检。" : "还没有定时任务。"}
+                  </p>
+                ) : (
+                  jobs.map((j) => (
+                    <ScheduleCard
+                      key={j.id}
+                      job={j}
+                      now={now}
+                      highlight={highlightJob === j.id}
+                      onHistory={(job) => navigate(scheduleStreamPath(job.id))}
+                      onEdit={(job) => setEditing({ job, key: Date.now() })}
+                    />
+                  ))
+                )}
+              </section>
+            );
+          })}
+        </div>
+      )}
+
+      {editing ? (
+        <AgentCheckDialog key={editing.key} open job={editing.job} onOpenChange={(o) => !o && setEditing(null)} />
+      ) : null}
+    </>
+  );
+}

apps/web/app/components/schedules/schedule-card.tsx

@@ -1,5 +1,6 @@
 import type { AgentCheckConfig, ScheduledJob, ScheduleSpecInput } from "@umt/contracts";
 import { History, LoaderCircle, Pencil, Play, RotateCcw, SkipForward, Trash2 } from "lucide-react";
+import { useEffect, useRef } from "react";
 import { toast } from "sonner";
 import { useDeleteSchedule, useRunScheduleNow, useSkipSchedule, useUpdateSchedule } from "~/api/schedules.ts";
 import { ConfirmDialog } from "~/components/console/confirm-dialog.tsx";
@@ -8,6 +9,7 @@ import { Button } from "~/components/ui/button.tsx";
 import { Switch } from "~/components/ui/switch.tsx";
 import { errorMessage } from "~/lib/api.ts";
 import { formatRelative } from "~/lib/labels.ts";
+import { cn } from "~/lib/utils.ts";
 import { IntervalEditor } from "./interval-editor.tsx";
 import { CHECK_TRIGGER_LABEL, countdown, formatMs, RUN_STATUS } from "./labels.ts";
 
@@ -54,16 +56,23 @@ export function ScheduleCard({
   now,
   onHistory,
   onEdit,
+  highlight = false,
 }: {
   job: ScheduledJob;
   now: number;
   onHistory: (job: ScheduledJob) => void;
   onEdit: (job: ScheduledJob) => void;
+  /** 从任务流跳来时高亮并滚到可见 */
+  highlight?: boolean;
 }) {
   const update = useUpdateSchedule();
   const runNow = useRunScheduleNow();
   const skip = useSkipSchedule();
   const del = useDeleteSchedule();
+  const ref = useRef<HTMLElement>(null);
+  useEffect(() => {
+    if (highlight) ref.current?.scrollIntoView({ block: "center" });
+  }, [highlight]);
   const busy = !!job.runningSince || !!job.runRequestedAt;
   const last = job.lastStatus ? RUN_STATUS[job.lastStatus] : null;
 
@@ -74,7 +83,15 @@ export function ScheduleCard({
     );
 
   return (
-    <article className="pg-slab grid min-w-0 gap-3 rounded-xl px-4 py-3.5" aria-label={job.name}>
+    <article
+      id={`job-${job.id}`}
+      ref={ref}
+      className={cn(
+        "pg-slab grid min-w-0 scroll-mt-20 gap-3 rounded-xl px-4 py-3.5",
+        highlight && "ring-2 ring-ring/50",
+      )}
+      aria-label={job.name}
+    >
       <header className="flex items-start justify-between gap-3">
         <div className="min-w-0">
           <h3 className="truncate text-lead font-medium text-foreground" title={job.name}>

apps/web/app/components/tasks/labels.ts

@@ -0,0 +1,111 @@
+import type { EngineBusinessKind, EngineRun, EngineTriggeredBy } from "@umt/contracts";
+import { consolePath } from "~/components/console/nav.ts";
+import type { StatusTone } from "~/components/console/status-badge.tsx";
+
+// 统一任务流的标签:引擎 run + business(W9-I)。一条 run = 一条任务。
+
+export const BUSINESS_KIND_LABEL: Record<EngineBusinessKind, string> = {
+  subscription: "订阅",
+  download: "下载",
+  organization: "整理",
+  agent: "Agent",
+  schedule: "定时任务",
+  feed: "Feed",
+  site: "站点",
+  decision: "待处理事项",
+  media: "作品",
+};
+export const BUSINESS_KINDS = Object.keys(BUSINESS_KIND_LABEL) as EngineBusinessKind[];
+
+/** 来源:四类(定时/事件/手动/Agent);API Key 调用算手动 */
+export type TaskSource = "schedule" | "event" | "manual" | "agent";
+export const SOURCE_LABEL: Record<TaskSource, string> = {
+  schedule: "定时",
+  event: "事件",
+  manual: "手动",
+  agent: "Agent",
+};
+export function sourceOf(t: EngineTriggeredBy | null | undefined): TaskSource | null {
+  if (!t) return null;
+  if (t === "user" || t === "api_key") return "manual";
+  return t;
+}
+
+/** 引擎工作流名 → 做什么 */
+export const WORKFLOW_LABEL: Record<string, string> = {
+  ingestFeed: "抓取 Feed",
+  resolveObservation: "识别资源",
+  evaluateAcquisition: "评估候选",
+  submitDownload: "提交下载",
+  verifyAndImport: "核验入库",
+  refreshMetadata: "刷新元数据",
+  reconcileLibrary: "资产对账",
+  cleanupDownloadCache: "清理缓存",
+  resolveDecision: "处理待处理事项",
+  runAgent: "Agent 会话",
+  snapshotSite: "站点快照",
+  refreshSiteAccount: "刷新站点账号",
+  searchSubscription: "订阅搜索",
+  purgeTrash: "清理回收站",
+  refreshPiTokens: "刷新上游登录",
+};
+export const workflowLabel = (name: string) => WORKFLOW_LABEL[name] ?? name;
+
+/** 引擎状态 → 任务状态 */
+const RUN_STATUS: Record<string, { label: string; tone: StatusTone }> = {
+  pending: { label: "排队", tone: "neutral" },
+  running: { label: "进行中", tone: "neutral" },
+  sleeping: { label: "等待", tone: "neutral" },
+  completed: { label: "完成", tone: "success" },
+  succeeded: { label: "完成", tone: "success" },
+  failed: { label: "失败", tone: "destructive" },
+  canceled: { label: "已取消", tone: "warning" },
+};
+export const runStatus = (s: string) => RUN_STATUS[s] ?? { label: s, tone: "neutral" as StatusTone };
+export const RUN_STATUS_OPTIONS = ["pending", "running", "completed", "failed", "canceled"].map((value) => ({
+  value,
+  label: runStatus(value).label,
+}));
+
+/** 行标题:业务对象名 > 业务类型 + 短 id > 工作流做什么 */
+export function runTitle(r: Pick<EngineRun, "business" | "workflowName">): string {
+  const b = r.business;
+  if (b?.title) return b.title;
+  if (b) return `${BUSINESS_KIND_LABEL[b.kind]} ${b.refId.length > 12 ? b.refId.slice(0, 8) : b.refId}`;
+  return workflowLabel(r.workflowName);
+}
+
+/** 业务对象的"家"页面 */
+export function businessLink(b: EngineRun["business"], input?: unknown): { to: string; label: string } | null {
+  if (!b) return null;
+  const id = encodeURIComponent(b.refId);
+  switch (b.kind) {
+    case "subscription":
+      return { to: consolePath("subscriptions"), label: "订阅" };
+    case "download": {
+      // 计划还没提交时 refId 是下载计划
+      const i = (input ?? {}) as { downloadTaskId?: unknown; acquisitionPlanId?: unknown };
+      if (!i.downloadTaskId && i.acquisitionPlanId === b.refId)
+        return { to: consolePath("downloads", "plans"), label: "下载计划" };
+      return { to: `/console/downloads/${id}`, label: "下载任务" };
+    }
+    case "organization":
+      return { to: `/console/organize/${id}`, label: "整理记录" };
+    case "agent":
+      return { to: `/console/agent/${id}`, label: "Agent 会话" };
+    case "schedule":
+      return { to: `/console/tasks?tab=plan&job=${id}`, label: "定时任务" };
+    case "feed":
+      return { to: consolePath("sources"), label: "Feed" };
+    case "site":
+      return { to: `/console/sites/${id}`, label: "站点" };
+    case "decision":
+      return { to: consolePath("inbox"), label: "待处理" };
+    case "media":
+      return { to: `/console/library/${id}`, label: "作品" };
+    default:
+      return null;
+  }
+}
+
+export const ENGINE_ACTIVE = new Set(["pending", "running", "sleeping"]);

apps/web/app/components/tasks/task-detail.tsx

@@ -0,0 +1,351 @@
+import type { EngineRunDetail, EngineStepAttempt } from "@umt/contracts";
+import { Ban, ChevronDown, ExternalLink, Repeat, ScrollText } from "lucide-react";
+import { type ReactNode, useState } from "react";
+import { Link } from "react-router";
+import { toast } from "sonner";
+import { ENGINE_TERMINAL, useCancelEngineRun, useEngineRun, useRetryEngineRun } from "~/api/engine.ts";
+import { ConfirmDialog } from "~/components/console/confirm-dialog.tsx";
+import { DetailSection } from "~/components/console/detail-sheet.tsx";
+import { EmptyState, ErrorState, LoadingState } from "~/components/console/empty-state.tsx";
+import { JsonView } from "~/components/console/json-view.tsx";
+import { KvList } from "~/components/console/kv-list.tsx";
+import { StatusBadge } from "~/components/console/status-badge.tsx";
+import { Timeline, type TimelineItem } from "~/components/console/timeline.tsx";
+import { Button } from "~/components/ui/button.tsx";
+import { errorMessage } from "~/lib/api.ts";
+import { formatDuration, formatRelative, spanSec } from "~/lib/labels.ts";
+import { cn, formatDateTime } from "~/lib/utils.ts";
+import { BUSINESS_KIND_LABEL, businessLink, runStatus, SOURCE_LABEL, sourceOf, workflowLabel } from "./labels.ts";
+
+// 任务详情:业务摘要 → 时间线 → 引擎步骤(折叠)→ 操作。任务页抽屉与 /tasks/:id 共用。
+
+const KIND_LABEL: Record<string, string> = {
+  function: "函数",
+  sleep: "休眠",
+  workflow: "子工作流",
+  "signal-send": "发送信号",
+  "signal-wait": "等待信号",
+};
+
+function stepTone(s: string) {
+  if (s === "completed" || s === "succeeded") return "success" as const;
+  if (s === "failed") return "destructive" as const;
+  return "neutral" as const;
+}
+
+/** 错误对象里的一句话 */
+export function errorText(e: unknown): string | null {
+  if (e === null || e === undefined) return null;
+  if (typeof e === "string") return e;
+  const m = (e as { message?: unknown }).message;
+  return typeof m === "string" ? m : JSON.stringify(e).slice(0, 300);
+}
+
+/** 引擎步骤尝试(原引擎面板详情) */
+function stepItems(steps: EngineStepAttempt[], onOpenRun?: (id: string) => void): TimelineItem[] {
+  const seen = new Map<string, number>();
+  return steps.map((st) => {
+    const n = (seen.get(st.stepName) ?? 0) + 1;
+    seen.set(st.stepName, n);
+    const hasError = st.error !== null && st.error !== undefined;
+    return {
+      id: st.id,
+      at: st.startedAt ?? st.createdAt,
+      tone: stepTone(st.status),
+      title: (
+        <span>
+          {st.stepName}
+          <span className="ml-2 text-meta font-normal text-muted-foreground">
+            {KIND_LABEL[st.kind] ?? st.kind} · {runStatus(st.status).label}
+            {n > 1 ? ` · 第 ${n} 次` : ""}
+          </span>
+        </span>
+      ),
+      meta: formatDuration(spanSec(st)),
+      description: (
+        <>
+          {st.waitSignal ? (
+            <p>
+              等待信号 <code className="font-mono">{st.waitSignal}</code>
+              {st.timeoutAt ? ` · 超时于 ${formatDateTime(st.timeoutAt)}` : ""}
+            </p>
+          ) : null}
+          {st.childWorkflowRunId ? (
+            <p>
+              子任务{" "}
+              <button
+                type="button"
+                className="cursor-pointer font-mono underline"
+                onClick={() => onOpenRun?.(st.childWorkflowRunId ?? "")}
+              >
+                {st.childWorkflowRunId}
+              </button>
+            </p>
+          ) : null}
+          <p className="font-mono text-meta">{st.id}</p>
+        </>
+      ),
+      children: hasError ? (
+        <JsonView label="错误" value={st.error} tone="destructive" defaultOpen />
+      ) : st.output !== null && st.output !== undefined ? (
+        <JsonView label="输出" value={st.output} defaultOpen={false} maxHeight="14rem" />
+      ) : undefined,
+    };
+  });
+}
+
+/** 业务时间线:创建 → 开始 → 等待 / 失败的步骤 → 结束 */
+function businessTimeline(r: EngineRunDetail): TimelineItem[] {
+  const src = sourceOf(r.business?.triggeredBy);
+  const items: TimelineItem[] = [
+    { id: "created", at: r.createdAt, title: `创建${src ? `(${SOURCE_LABEL[src]}触发)` : ""}`, tone: "neutral" },
+  ];
+  if (r.startedAt)
+    items.push({
+      id: "started",
+      at: r.startedAt,
+      title: r.attempts > 1 ? `开始执行 · 第 ${r.attempts} 次尝试` : "开始执行",
+      tone: "neutral",
+    });
+  for (const st of r.stepAttempts) {
+    if (st.waitSignal && !st.finishedAt)
+      items.push({ id: `w-${st.id}`, at: st.startedAt ?? st.createdAt, title: `等待:${st.stepName}`, tone: "warning" });
+    else if (st.status === "failed")
+      items.push({
+        id: `f-${st.id}`,
+        at: st.finishedAt ?? st.startedAt ?? st.createdAt,
+        title: `步骤失败:${st.stepName}`,
+        description: errorText(st.error),
+        tone: "destructive",
+      });
+  }
+  if (r.finishedAt) {
+    const s = runStatus(r.status);
+    items.push({
+      id: "finished",
+      at: r.finishedAt,
+      title: s.label,
+      // 与最后一个失败步骤相同的错误不再重复
+      description:
+        r.status === "failed" && !r.stepAttempts.some((st) => errorText(st.error) === errorText(r.error))
+          ? errorText(r.error)
+          : undefined,
+      tone: s.tone,
+      meta: formatDuration(spanSec(r)),
+    });
+  } else if (r.startedAt) {
+    items.push({ id: "now", title: "进行中", tone: "neutral", meta: `已 ${formatDuration(spanSec(r))}` });
+  }
+  return items;
+}
+
+/** 取消 / 重跑 */
+export function RunActions({
+  r,
+  onOpenRun,
+  size = "sm",
+}: {
+  r: EngineRunDetail;
+  onOpenRun?: (id: string) => void;
+  size?: "sm" | "xs";
+}) {
+  const cancel = useCancelEngineRun();
+  const retry = useRetryEngineRun();
+  if (!ENGINE_TERMINAL.has(r.status))
+    return (
+      <ConfirmDialog
+        trigger={
+          <Button variant="destructive" size={size}>
+            <Ban />
+            取消任务
+          </Button>
+        }
+        title="取消这个任务？"
+        description="正在执行的步骤会在下一个检查点退出,已完成的步骤不回滚。"
+        confirmLabel="取消任务"
+        cancelLabel="不取消"
+        destructive
+        onConfirm={async () => {
+          try {
+            const res = await cancel.mutateAsync({ id: r.id, reason: "控制台手动取消" });
+            if (res.canceled) toast.success("已取消");
+            else toast.warning("任务已结束");
+          } catch (err) {
+            toast.error(errorMessage(err, "取消失败"));
+            throw err;
+          }
+        }}
+      />
+    );
+  return (
+    <ConfirmDialog
+      trigger={
+        <Button variant="outline" size={size} disabled={retry.isPending}>
+          <Repeat />
+          重跑
+        </Button>
+      }
+      title="重跑这个任务？"
+      description="用原始输入新建一条任务,原记录不变。已完成的文件操作不会重复执行。"
+      confirmLabel="重跑"
+      cancelLabel="不重跑"
+      onConfirm={async () => {
+        try {
+          const res = await retry.mutateAsync({ id: r.id });
+          toast.success(`已重新排队(第 ${res.attempt} 次重跑)`);
+          onOpenRun?.(res.runId);
+        } catch (err) {
+          toast.error(errorMessage(err, "重跑失败"));
+          throw err;
+        }
+      }}
+    />
+  );
+}
+
+function Collapsible({ title, children }: { title: string; children: ReactNode }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <section>
+      <button
+        type="button"
+        aria-expanded={open}
+        onClick={() => setOpen((v) => !v)}
+        className="flex w-full cursor-pointer items-center gap-2 text-label font-semibold tracking-[0.18em] text-muted-foreground uppercase hover:text-foreground"
+      >
+        <ChevronDown className={cn("h-3.5 w-3.5 transition-transform", !open && "-rotate-90")} />
+        {title}
+      </button>
+      {open ? <div className="mt-3 space-y-4">{children}</div> : null}
+    </section>
+  );
+}
+
+/** 详情主体(不含外框);抽屉和独立页都用 */
+export function TaskDetailBody({ r, onOpenRun }: { r: EngineRunDetail; onOpenRun?: (id: string) => void }) {
+  const b = r.business;
+  const link = businessLink(b, r.input);
+  const src = sourceOf(b?.triggeredBy);
+  const hasError = r.error !== null && r.error !== undefined;
+  const audits = [
+    { to: `/console/audit?targetType=engine_run&targetId=${encodeURIComponent(r.id)}`, label: "本任务的操作记录" },
+    ...(b?.kind === "schedule"
+      ? [
+          {
+            to: `/console/audit?targetType=scheduled_job&targetId=${encodeURIComponent(b.refId)}`,
+            label: "定时任务的修改记录",
+          },
+        ]
+      : []),
+  ];
+
+  return (
+    <>
+      <DetailSection title="业务摘要">
+        <KvList
+          items={[
+            {
+              label: "关联对象",
+              value: b ? (
+                link ? (
+                  <Link to={link.to} className="inline-flex items-center gap-1 underline underline-offset-4">
+                    {BUSINESS_KIND_LABEL[b.kind]} · {b.title ?? b.refId}
+                    <ExternalLink className="h-3 w-3" />
+                  </Link>
+                ) : (
+                  `${BUSINESS_KIND_LABEL[b.kind]} · ${b.title ?? b.refId}`
+                )
+              ) : (
+                "无"
+              ),
+              wide: true,
+            },
+            { label: "做什么", value: workflowLabel(r.workflowName) },
+            { label: "来源", value: src ? SOURCE_LABEL[src] : "未知" },
+            {
+              label: "开始",
+              value: r.startedAt ? `${formatDateTime(r.startedAt)}(${formatRelative(r.startedAt)})` : "未开始",
+            },
+            { label: "耗时", value: formatDuration(spanSec(r)) },
+          ]}
+        />
+      </DetailSection>
+
+      <DetailSection title="时间线">
+        <Timeline items={businessTimeline(r)} />
+      </DetailSection>
+
+      <DetailSection title="相关审计">
+        <ul className="flex flex-wrap gap-x-4 gap-y-1 text-caption">
+          {audits.map((a) => (
+            <li key={a.to}>
+              <Link
+                to={a.to}
+                className="inline-flex items-center gap-1 text-muted-foreground underline-offset-4 hover:text-foreground hover:underline"
+              >
+                <ScrollText className="h-3.5 w-3.5" />
+                {a.label}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </DetailSection>
+
+      <Collapsible title={`引擎步骤(${r.stepAttempts.length})`}>
+        <KvList
+          items={[
+            { label: "工作流", value: `${r.workflowName}${r.version ? ` ${r.version}` : ""}`, mono: true },
+            { label: "运行 ID", value: r.id, mono: true },
+            { label: "尝试次数", value: r.attempts },
+            { label: "Worker", value: r.workerId, mono: true },
+            { label: "可执行于", value: formatDateTime(r.availableAt) },
+            { label: "截止", value: formatDateTime(r.deadlineAt) },
+            { label: "父步骤", value: r.parentStepAttemptId, mono: true },
+          ]}
+        />
+        {r.stepAttempts.length === 0 ? (
+          <EmptyState plain title="还没有步骤" className="py-6" />
+        ) : (
+          <Timeline items={stepItems(r.stepAttempts, onOpenRun)} />
+        )}
+        {hasError ? <JsonView label="错误" value={r.error} tone="destructive" /> : null}
+        <JsonView label="输入" value={r.input} defaultOpen={false} />
+        {!hasError ? <JsonView label="输出" value={r.output} defaultOpen={false} /> : null}
+        {r.signals.length ? (
+          <div className="space-y-2">
+            <p className="text-meta text-muted-foreground">信号({r.signals.length})</p>
+            {r.signals.map((sg) => (
+              <div key={sg.id} className="min-w-0">
+                <p className="text-sm">
+                  <code className="font-mono">{sg.signal}</code>
+                  <span className="ml-2 text-meta text-muted-foreground">{formatDateTime(sg.createdAt)}</span>
+                </p>
+                <JsonView value={sg.data} maxHeight="10rem" className="mt-1" />
+              </div>
+            ))}
+          </div>
+        ) : null}
+      </Collapsible>
+    </>
+  );
+}
+
+/** 头部一行:状态 + 业务类型 */
+export function TaskStatusLine({ r }: { r: EngineRunDetail }) {
+  const s = runStatus(r.status);
+  return (
+    <span className="flex flex-wrap items-center gap-2">
+      <StatusBadge tone={s.tone}>{s.label}</StatusBadge>
+      <span>{workflowLabel(r.workflowName)}</span>
+      {r.business ? <span>· {BUSINESS_KIND_LABEL[r.business.kind]}</span> : null}
+    </span>
+  );
+}
+
+/** 按 id 取数并渲染(抽屉用) */
+export function TaskDetail({ runId, onOpenRun }: { runId: string; onOpenRun?: (id: string) => void }) {
+  const q = useEngineRun(runId);
+  if (q.isPending) return <LoadingState rows={6} />;
+  if (q.isError) return <ErrorState plain error={q.error} onRetry={() => q.refetch()} />;
+  return <TaskDetailBody r={q.data} onOpenRun={onOpenRun} />;
+}

apps/web/app/components/tasks/task-stream.tsx

@@ -0,0 +1,300 @@
+import { useQueryClient } from "@tanstack/react-query";
+import type { EngineBusinessKind, EngineRun, ScheduledJob } from "@umt/contracts";
+import { CalendarClock, ExternalLink, History, ListTodo, X } from "lucide-react";
+import { useMemo, useRef, useState } from "react";
+import { Link } from "react-router";
+import { useEngineRuns, useEngineRunsPage } from "~/api/engine.ts";
+import { useScheduleBoard } from "~/api/schedules.ts";
+import { DataTable } from "~/components/console/data-table.tsx";
+import { FilterBar, FilterSelect } from "~/components/console/filter-bar.tsx";
+import { StatusBadge } from "~/components/console/status-badge.tsx";
+import { RunsSheet } from "~/components/schedules/runs-sheet.tsx";
+import { Button } from "~/components/ui/button.tsx";
+import { formatDuration, formatRelative, spanSec } from "~/lib/labels.ts";
+import { qk } from "~/lib/query-keys.ts";
+import { useSse } from "~/lib/sse.ts";
+import {
+  BUSINESS_KIND_LABEL,
+  BUSINESS_KINDS,
+  businessLink,
+  ENGINE_ACTIVE,
+  RUN_STATUS_OPTIONS,
+  runStatus,
+  runTitle,
+  SOURCE_LABEL,
+  sourceOf,
+  type TaskSource,
+  workflowLabel,
+} from "./labels.ts";
+
+export type StreamTab = "all" | "active" | "failed";
+
+/** 引擎本身不发事件;业务事件足以代表任务在动,2 秒节流刷新 */
+const TASK_EVENTS = [
+  "task.created",
+  "task.status_changed",
+  "download.status_changed",
+  "organization.changed",
+  "agent.run_status",
+  "schedule.changed",
+];
+
+export function useLiveTasks() {
+  const qc = useQueryClient();
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  useSse(TASK_EVENTS, () => {
+    if (timer.current) return;
+    timer.current = setTimeout(() => {
+      timer.current = null;
+      qc.invalidateQueries({ queryKey: qk.all("engine") });
+    }, 2000);
+  });
+}
+
+const SINCE: { value: string; label: string; ms: number }[] = [
+  { value: "1h", label: "1 小时内", ms: 3600_000 },
+  { value: "24h", label: "24 小时内", ms: 86400_000 },
+  { value: "7d", label: "7 天内", ms: 7 * 86400_000 },
+  { value: "30d", label: "30 天内", ms: 30 * 86400_000 },
+];
+
+export type StreamFilters = {
+  status: string;
+  kind: string;
+  ref: string;
+  source: string;
+  since: string;
+  workflow: string;
+};
+
+function SourceBadge({ r }: { r: EngineRun }) {
+  const s = sourceOf(r.business?.triggeredBy);
+  return s ? <span className="text-caption">{SOURCE_LABEL[s]}</span> : <span className="text-muted-foreground">—</span>;
+}
+
+/** 定时任务筛选时,页头给出定时任务自己的运行记录(含跳过的,引擎里没有) */
+function ScheduleBanner({ jobId, onClear }: { jobId: string; onClear: () => void }) {
+  const board = useScheduleBoard();
+  const job = board.data?.items.find((j) => j.id === jobId) ?? null;
+  const [open, setOpen] = useState<ScheduledJob | null>(null);
+  return (
+    <div className="mb-3 flex flex-wrap items-center gap-2 rounded-xl border border-border/70 px-3 py-2 text-caption">
+      <CalendarClock className="h-4 w-4 text-muted-foreground" />
+      <span className="min-w-0 truncate">
+        定时任务 <span className="font-medium text-foreground">{job?.name ?? jobId}</span> 触发的任务
+      </span>
+      <span className="ml-auto flex items-center gap-1">
+        <Button variant="ghost" size="xs" disabled={!job} onClick={() => setOpen(job)}>
+          <History />
+          运行记录
+        </Button>
+        <Button asChild variant="ghost" size="xs">
+          <Link to={`/console/tasks?tab=plan&job=${encodeURIComponent(jobId)}`}>
+            <ExternalLink />
+            计划
+          </Link>
+        </Button>
+        <Button variant="ghost" size="icon-xs" aria-label="清除定时任务筛选" onClick={onClear}>
+          <X />
+        </Button>
+      </span>
+      <RunsSheet job={open} onClose={() => setOpen(null)} />
+    </div>
+  );
+}
+
+export function TaskStream({
+  tab,
+  filters,
+  setFilter,
+  resetFilters,
+  onOpen,
+  selectedId,
+}: {
+  tab: StreamTab;
+  filters: StreamFilters;
+  setFilter: (k: keyof StreamFilters, v: string) => void;
+  resetFilters: () => void;
+  onOpen: (id: string) => void;
+  selectedId: string | null;
+}) {
+  useLiveTasks();
+  // 时间下界按分钟取整,查询 key 稳定
+  const from = useMemo(() => {
+    const ms = SINCE.find((s) => s.value === filters.since)?.ms;
+    return ms ? new Date(Math.floor((Date.now() - ms) / 60_000) * 60_000).toISOString() : undefined;
+  }, [filters.since]);
+  const base = {
+    businessKind: (filters.kind || undefined) as EngineBusinessKind | undefined,
+    businessRefId: filters.ref || undefined,
+    workflowName: filters.workflow || undefined,
+    from,
+  };
+  const list = useEngineRuns(
+    {
+      ...base,
+      status: tab === "failed" ? "failed" : filters.status || undefined,
+    },
+    tab !== "active",
+  );
+  // 进行中 = 进行中 + 排队(两次取第一页合并)
+  const running = useEngineRunsPage({ ...base, status: "running" }, 100, 10_000, tab === "active");
+  const pending = useEngineRunsPage({ ...base, status: "pending" }, 100, 10_000, tab === "active");
+
+  const active = tab === "active";
+  const loaded = active
+    ? running.data && pending.data
+      ? [...running.data.items, ...pending.data.items]
+      : undefined
+    : list.data?.pages.flatMap((p) => p.items);
+  const rows = filters.source ? loaded?.filter((r) => sourceOf(r.business?.triggeredBy) === filters.source) : loaded;
+  const filtered = Object.values(filters).some(Boolean);
+
+  return (
+    <>
+      {filters.kind === "schedule" && filters.ref ? (
+        <ScheduleBanner
+          jobId={filters.ref}
+          onClear={() => {
+            setFilter("ref", "");
+            setFilter("kind", "");
+          }}
+        />
+      ) : filters.ref ? (
+        <div className="mb-3 flex items-center gap-2 text-caption text-muted-foreground">
+          只看对象 <code className="font-mono text-foreground">{filters.ref}</code>
+          <Button variant="ghost" size="icon-xs" aria-label="清除对象筛选" onClick={() => setFilter("ref", "")}>
+            <X />
+          </Button>
+        </div>
+      ) : null}
+
+      <FilterBar onReset={filtered ? resetFilters : undefined}>
+        <FilterSelect
+          label="来源"
+          value={filters.source}
+          onChange={(v) => setFilter("source", v)}
+          options={(Object.keys(SOURCE_LABEL) as TaskSource[]).map((value) => ({ value, label: SOURCE_LABEL[value] }))}
+        />
+        <FilterSelect
+          label="业务"
+          value={filters.kind}
+          onChange={(v) => setFilter("kind", v)}
+          options={BUSINESS_KINDS.map((value) => ({ value, label: BUSINESS_KIND_LABEL[value] }))}
+        />
+        {tab === "all" ? (
+          <FilterSelect
+            label="状态"
+            value={filters.status}
+            onChange={(v) => setFilter("status", v)}
+            options={RUN_STATUS_OPTIONS}
+          />
+        ) : null}
+        <FilterSelect
+          label="时间"
+          value={filters.since}
+          onChange={(v) => setFilter("since", v)}
+          options={SINCE}
+          allLabel="不限"
+        />
+        {filters.workflow ? (
+          <Button variant="outline" size="sm" onClick={() => setFilter("workflow", "")}>
+            {workflowLabel(filters.workflow)}
+            <X />
+          </Button>
+        ) : null}
+      </FilterBar>
+
+      <DataTable<EngineRun>
+        rows={rows}
+        rowKey={(r) => r.id}
+        loading={active ? running.isPending || pending.isPending : list.isPending}
+        error={active ? (running.error ?? pending.error) : list.error}
+        onRetry={() => {
+          if (active) {
+            void running.refetch();
+            void pending.refetch();
+          } else void list.refetch();
+        }}
+        onRowClick={(r) => onOpen(r.id)}
+        selectedKey={selectedId}
+        hasMore={!active && !!list.hasNextPage}
+        onLoadMore={() => list.fetchNextPage()}
+        loadingMore={list.isFetchingNextPage}
+        empty={{
+          icon: ListTodo,
+          title: filtered
+            ? "没有符合条件的任务"
+            : tab === "active"
+              ? "没有进行中的任务"
+              : tab === "failed"
+                ? "没有失败的任务"
+                : "还没有任务",
+          description: filters.source && loaded?.length ? "来源筛选只作用于已加载的记录,可加载更多再看。" : undefined,
+        }}
+        columns={[
+          {
+            key: "title",
+            header: "任务",
+            cell: (r) => (
+              <div className="min-w-0 max-w-[15rem] sm:max-w-sm">
+                <p className="truncate font-medium text-foreground">{runTitle(r)}</p>
+                <p className="truncate text-meta text-muted-foreground">
+                  {r.business
+                    ? `${workflowLabel(r.workflowName)} · ${BUSINESS_KIND_LABEL[r.business.kind]}`
+                    : `未关联业务对象 · ${r.id.slice(0, 8)}`}
+                </p>
+              </div>
+            ),
+          },
+          { key: "source", header: "来源", hideBelow: "md", cell: (r) => <SourceBadge r={r} /> },
+          {
+            key: "status",
+            header: "状态",
+            cell: (r) => {
+              const s = runStatus(r.status);
+              return <StatusBadge tone={s.tone}>{s.label}</StatusBadge>;
+            },
+          },
+          {
+            key: "time",
+            header: "开始 / 耗时",
+            hideBelow: "sm",
+            cell: (r) => (
+              <div className="whitespace-nowrap">
+                <p className="text-muted-foreground" title={r.startedAt ?? r.createdAt}>
+                  {r.startedAt
+                    ? formatRelative(r.startedAt)
+                    : ENGINE_ACTIVE.has(r.status)
+                      ? `排队 ${formatRelative(r.createdAt)}`
+                      : `未开始 · ${formatRelative(r.createdAt)}`}
+                </p>
+                <p className="text-meta text-muted-foreground tabular-nums">{formatDuration(spanSec(r))}</p>
+              </div>
+            ),
+          },
+          {
+            key: "link",
+            header: "关联",
+            hideBelow: "lg",
+            cell: (r) => {
+              const l = businessLink(r.business);
+              return l ? (
+                <Link
+                  to={l.to}
+                  onClick={(e) => e.stopPropagation()}
+                  className="inline-flex items-center gap-1 text-caption text-muted-foreground underline-offset-4 hover:text-foreground hover:underline"
+                >
+                  {l.label}
+                  <ExternalLink className="h-3 w-3" />
+                </Link>
+              ) : (
+                <span className="text-muted-foreground">—</span>
+              );
+            },
+          },
+        ]}
+      />
+    </>
+  );
+}

apps/web/app/routes/console/audit.tsx

@@ -1,4 +1,5 @@
 import { AuditAction, type AuditEvent } from "@umt/contracts";
+import { X } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useSearchParams } from "react-router";
 import { useAuditEvents } from "~/api/audit.ts";
@@ -8,10 +9,11 @@ import { FilterBar, FilterSelect } from "~/components/console/filter-bar.tsx";
 import { JsonView } from "~/components/console/json-view.tsx";
 import { KvList } from "~/components/console/kv-list.tsx";
 import { PageHeader } from "~/components/console/page-header.tsx";
+import { Button } from "~/components/ui/button.tsx";
 import { ACTOR_TYPES, actorTypeLabel, formatRelative } from "~/lib/labels.ts";
 import { formatDateTime } from "~/lib/utils.ts";
 
-export const meta = () => [{ title: "审计日志 · UHD 媒体自动化控制台" }];
+export const meta = () => [{ title: "审计 · UHD 媒体自动化控制台" }];
 
 const actorLabel = actorTypeLabel;
 
@@ -30,14 +32,14 @@ const ACTION_LABEL: Record<string, string> = {
   "secret.rotate": "轮换凭证",
   "secret.delete": "删除凭证",
   "site_account.credentials_set": "录入站点凭证",
-  "engine.run_cancel": "取消引擎运行",
+  "engine.run_cancel": "取消任务",
   "pi_upstream.oauth_start": "开始订阅登录",
   "pi_upstream.oauth_login": "完成订阅登录",
   "pi_upstream.oauth_logout": "退出订阅登录",
   "schedule.run_now": "立即执行定时任务",
   "schedule.skip": "跳过定时任务",
   "acquisition_plan.manual_submit": "手动提交下载计划",
-  "engine.run_retry": "重跑引擎运行",
+  "engine.run_retry": "重跑任务",
   "capability.invoke": "Agent 调用能力",
   "site.created": "登记站点",
   "site.updated": "修改站点",
@@ -88,6 +90,7 @@ export default function AuditPage() {
   const [params, setParams] = useSearchParams();
   const actorType = params.get("actorType") ?? "";
   const action = params.get("action") ?? "";
+  const targetId = params.get("targetId") ?? "";
   const [target, setTarget] = useState(params.get("targetType") ?? "");
   const [targetType, setTargetType] = useState(target);
   const [selected, setSelected] = useState<AuditEvent | null>(null);
@@ -122,13 +125,14 @@ export default function AuditPage() {
     actorType: actorType || undefined,
     action: action || undefined,
     targetType: targetType || undefined,
+    targetId: targetId || undefined,
   });
   const rows = q.data?.pages.flatMap((p) => p.items);
-  const filtered = !!(actorType || action || targetType);
+  const filtered = !!(actorType || action || targetType || targetId);
 
   return (
     <>
-      <PageHeader title="审计日志" description="登录、设置、密钥与实例变更，新的在前。不记录凭证内容。" />
+      <PageHeader title="审计" description="登录、设置、密钥与实例变更，新的在前。不记录凭证内容。" />
       <FilterBar
         search={{ value: target, onChange: setTarget, placeholder: "对象类型,如 downloader_instance" }}
         onReset={
@@ -147,6 +151,12 @@ export default function AuditPage() {
           options={ACTOR_TYPES}
         />
         <FilterSelect label="动作" value={action} onChange={(v) => setParam("action", v)} options={ACTION_OPTIONS} />
+        {targetId ? (
+          <Button variant="outline" size="sm" onClick={() => setParam("targetId", "")} title={targetId}>
+            对象 <span className="max-w-40 truncate font-mono">{targetId}</span>
+            <X />
+          </Button>
+        ) : null}
       </FilterBar>
       <DataTable<AuditEvent>
         rows={rows}

apps/web/app/routes/console/tasks.$id.tsx

@@ -1,8 +1,9 @@
 import { useQuery } from "@tanstack/react-query";
 import { AssetOperation, DownloadTask, Task } from "@umt/contracts";
 import { ArrowLeft } from "lucide-react";
-import { Link, Navigate, useParams } from "react-router";
+import { Link, Navigate, useNavigate, useParams } from "react-router";
 import { z } from "zod";
+import { useEngineRun } from "~/api/engine.ts";
 import { apiParsed, isMissingEndpoint } from "~/api/parse.ts";
 import { DetailSection } from "~/components/console/detail-sheet.tsx";
 import { ErrorState, LoadingState } from "~/components/console/empty-state.tsx";
@@ -10,11 +11,18 @@ import { consolePath } from "~/components/console/nav.ts";
 import { PageHeader } from "~/components/console/page-header.tsx";
 import type { StatusTone } from "~/components/console/status-badge.tsx";
 import { Timeline } from "~/components/console/timeline.tsx";
-import { TASK_KIND_LABEL, TaskActions, TaskStatusLine, TaskSummary } from "~/components/downloads/business-tasks.tsx";
+import {
+  TASK_KIND_LABEL,
+  TaskActions,
+  TaskStatusLine as TaskStatusLine2,
+  TaskSummary,
+} from "~/components/downloads/business-tasks.tsx";
+import { runTitle } from "~/components/tasks/labels.ts";
+import { RunActions, TaskDetailBody, TaskStatusLine } from "~/components/tasks/task-detail.tsx";
 import { Button } from "~/components/ui/button.tsx";
 import { TTL_SECOND } from "~/lib/api.ts";
 
-export const meta = () => [{ title: "业务任务 · UHD 媒体自动化控制台" }];
+export const meta = () => [{ title: "任务 · UHD 媒体自动化控制台" }];
 
 const OP_TONE: Record<AssetOperation["status"], StatusTone> = {
   planned: "neutral",
@@ -59,8 +67,9 @@ const OP_KIND: Record<AssetOperation["kind"], string> = {
   other: "其他",
 };
 
-function useTask(id: string) {
+function useTask(id: string, enabled: boolean) {
   return useQuery({
+    enabled,
     queryKey: ["tasks", "one", id],
     retry: false,
     queryFn: ({ signal }) => apiParsed(Task, "/api/v1/tasks/:id", { pathParams: { id }, signal }),
@@ -113,33 +122,74 @@ function Operations({ taskId }: { taskId: string }) {
   );
 }
 
-export default function BusinessTaskPage() {
+const back = (
+  <Button asChild variant="ghost" size="sm">
+    <Link to={consolePath("tasks")}>
+      <ArrowLeft />
+      任务
+    </Link>
+  </Button>
+);
+
+/**
+ * /console/tasks/:id:id 先当引擎运行查(统一任务);查不到再当旧的业务任务 ID
+ * (有引擎运行就跳过去,没有就显示旧视图),最后当下载任务 ID 跳到下载详情。
+ */
+export default function TaskPage() {
   const { id = "" } = useParams();
-  const task = useTask(id);
+  const navigate = useNavigate();
+  const run = useEngineRun(id);
+  const runMissing = !!run.error && isMissingEndpoint(run.error);
+  const task = useTask(id, runMissing);
   const notFound = !!task.error && isMissingEndpoint(task.error);
   const legacy = useLegacyDownload(id, notFound);
 
+  if (run.data) {
+    const r = run.data;
+    const open = (rid: string) => navigate(`/console/tasks/${encodeURIComponent(rid)}`);
+    return (
+      <>
+        <PageHeader
+          title={runTitle(r)}
+          description={<TaskStatusLine r={r} />}
+          actions={
+            <>
+              {back}
+              <RunActions r={r} onOpenRun={open} />
+            </>
+          }
+        />
+        <div className="pg-slab space-y-5 rounded-xl p-4 md:p-5">
+          <TaskDetailBody r={r} onOpenRun={open} />
+        </div>
+      </>
+    );
+  }
+  if (run.error && !runMissing)
+    return (
+      <>
+        <PageHeader title="任务" actions={back} />
+        <ErrorState error={run.error} onRetry={() => void run.refetch()} />
+      </>
+    );
+  if (task.data?.engineRunId)
+    return <Navigate to={`/console/tasks/${encodeURIComponent(task.data.engineRunId)}`} replace />;
   if (notFound && legacy.data) return <Navigate to={consolePath("downloads", id)} replace />;
   const t = task.data;
 
   return (
     <>
       <PageHeader
-        title={t ? (TASK_KIND_LABEL[t.kind] ?? t.kind) : "业务任务"}
-        description={t ? <TaskStatusLine t={t} /> : undefined}
+        title={t ? (TASK_KIND_LABEL[t.kind] ?? t.kind) : "任务"}
+        description={t ? <TaskStatusLine2 t={t} /> : undefined}
         actions={
           <>
-            <Button asChild variant="ghost" size="sm">
-              <Link to={consolePath("tasks")}>
-                <ArrowLeft />
-                业务任务
-              </Link>
-            </Button>
+            {back}
             {t ? <TaskActions t={t} /> : null}
           </>
         }
       />
-      {task.isPending || (notFound && legacy.isPending) ? (
+      {run.isPending || task.isPending || (notFound && legacy.isPending) ? (
         <div className="pg-slab rounded-xl p-4 md:p-5">
           <LoadingState rows={5} />
         </div>

apps/web/app/routes/console/tasks.tsx

@@ -1,17 +1,166 @@
+import { useQueryClient } from "@tanstack/react-query";
+import { ExternalLink, RotateCw } from "lucide-react";
+import { Link, useSearchParams } from "react-router";
+import { useEngineRun, useEngineStats } from "~/api/engine.ts";
+import { DetailSheet } from "~/components/console/detail-sheet.tsx";
+import { ErrorState, LoadingState } from "~/components/console/empty-state.tsx";
 import { PageHeader } from "~/components/console/page-header.tsx";
-import { BusinessTasks } from "~/components/downloads/business-tasks.tsx";
+import { ScheduleBoard } from "~/components/schedules/schedule-board.tsx";
+import { runTitle } from "~/components/tasks/labels.ts";
+import { RunActions, TaskDetailBody, TaskStatusLine } from "~/components/tasks/task-detail.tsx";
+import { type StreamFilters, type StreamTab, TaskStream } from "~/components/tasks/task-stream.tsx";
+import { Button } from "~/components/ui/button.tsx";
+import { Tabs, TabsList, TabsTrigger } from "~/components/ui/tabs.tsx";
+import { qk } from "~/lib/query-keys.ts";
 import { legacyRedirectLoader } from "./redirects.ts";
 
-export const meta = () => [{ title: "业务任务 · UHD 媒体自动化控制台" }];
+export const meta = () => [{ title: "任务 · UHD 媒体自动化控制台" }];
 
-// 旧的 ?tab=downloads / plans 跳到下载队列 / 下载计划
+// 旧的 ?tab=downloads / plans / business 跳到下载面板 / 下载计划 / 任务流
 export const clientLoader = legacyRedirectLoader;
 
+type Tab = StreamTab | "plan";
+const TABS: Tab[] = ["all", "active", "failed", "plan"];
+const FILTER_KEYS: (keyof StreamFilters)[] = ["status", "kind", "ref", "source", "since", "workflow"];
+
+function Count({ n }: { n: number | undefined }) {
+  if (!n) return null;
+  return <span className="text-meta text-muted-foreground tabular-nums">{n > 999 ? "999+" : n}</span>;
+}
+
+function RunSheet({
+  runId,
+  onOpen,
+  onClose,
+}: {
+  runId: string | null;
+  onOpen: (id: string) => void;
+  onClose: () => void;
+}) {
+  const q = useEngineRun(runId ?? undefined);
+  const r = q.data;
+  return (
+    <DetailSheet
+      open={!!runId}
+      onOpenChange={(o) => !o && onClose()}
+      width="lg"
+      title={r ? runTitle(r) : "任务"}
+      description={r ? <TaskStatusLine r={r} /> : undefined}
+      footer={
+        r ? (
+          <>
+            <Button asChild variant="ghost" size="sm">
+              <Link to={`/console/tasks/${encodeURIComponent(r.id)}`}>
+                <ExternalLink />
+                独立页面
+              </Link>
+            </Button>
+            <RunActions r={r} onOpenRun={onOpen} />
+          </>
+        ) : null
+      }
+    >
+      {q.isPending ? (
+        <LoadingState rows={6} />
+      ) : q.isError ? (
+        <ErrorState plain error={q.error} onRetry={() => q.refetch()} />
+      ) : r ? (
+        <TaskDetailBody r={r} onOpenRun={onOpen} />
+      ) : null}
+    </DetailSheet>
+  );
+}
+
 export default function TasksPage() {
+  const qc = useQueryClient();
+  const [params, setParams] = useSearchParams();
+  const raw = params.get("tab") as Tab | null;
+  const tab: Tab = raw && TABS.includes(raw) ? raw : "all";
+  const runId = params.get("run");
+  const filters = Object.fromEntries(FILTER_KEYS.map((k) => [k, params.get(k) ?? ""])) as StreamFilters;
+  const stats = useEngineStats();
+  const by = stats.data?.byStatus;
+
+  const update = (fn: (p: URLSearchParams) => void) =>
+    setParams(
+      (prev) => {
+        const next = new URLSearchParams(prev);
+        fn(next);
+        return next;
+      },
+      { replace: true },
+    );
+  const setFilter = (k: keyof StreamFilters, v: string) =>
+    update((p) => {
+      if (v) p.set(k, v);
+      else p.delete(k);
+    });
+
   return (
     <>
-      <PageHeader title="业务任务" description="取消只停止后续步骤;重试只对失败的任务。" />
-      <BusinessTasks />
+      <PageHeader
+        title="任务"
+        description="每次运行都是一条任务,不论定时、事件、手动还是 Agent 触发。"
+        actions={
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => {
+              qc.invalidateQueries({ queryKey: qk.all("engine") });
+              qc.invalidateQueries({ queryKey: qk.all("schedules") });
+            }}
+          >
+            <RotateCw />
+            刷新
+          </Button>
+        }
+      />
+      <Tabs
+        value={tab}
+        onValueChange={(v) =>
+          update((p) => {
+            p.set("tab", v);
+            p.delete("job");
+            if (v !== "all") p.delete("status");
+          })
+        }
+      >
+        <TabsList>
+          <TabsTrigger value="all">全部</TabsTrigger>
+          <TabsTrigger value="active">
+            进行中
+            <Count n={by ? (by.running ?? 0) + (by.pending ?? 0) : undefined} />
+          </TabsTrigger>
+          <TabsTrigger value="failed">
+            失败
+            <Count n={by?.failed} />
+          </TabsTrigger>
+          <TabsTrigger value="plan">计划</TabsTrigger>
+        </TabsList>
+      </Tabs>
+      <div className="mt-4">
+        {tab === "plan" ? (
+          <ScheduleBoard highlightJob={params.get("job") ?? undefined} />
+        ) : (
+          <TaskStream
+            tab={tab}
+            filters={filters}
+            setFilter={setFilter}
+            resetFilters={() =>
+              update((p) => {
+                for (const k of FILTER_KEYS) p.delete(k);
+              })
+            }
+            onOpen={(id) => update((p) => p.set("run", id))}
+            selectedId={runId}
+          />
+        )}
+      </div>
+      <RunSheet
+        runId={runId}
+        onOpen={(id) => update((p) => p.set("run", id))}
+        onClose={() => update((p) => p.delete("run"))}
+      />
     </>
   );
 }