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/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"))}
+      />
     </>
   );
 }