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/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}>