feat(web): split plan page from tasks (FE-6)
- Nav overview group: 首页 / 任务 / 计划 / Agent 会话; tasks page drops the plan tab - /console/tasks?tab=plan[&job=] redirects to /console/schedules[?job=] - Plan page: 自动任务 compact grouped list (switch, interval preset/custom, last result, countdown, failure reason, run now/skip/run records) and Agent 巡检 cards (goal, allowlist, budget, upstream/model, trigger, cost per run, recent sessions); split stats - Home plan band: two counts linking to #auto / #checks - Docs: console-ia §7.4a, glossary, schedules runbook; smoke routes Co-Authored-By: Claude Opus 5.5 <[email protected]>
This commit is contained in:
rootandClaude Opus 5.5 committed
1 parent
c3aaf901ad
commit
baf2d6ea04
22 files changed
+1030
-417
No files matched your search
@@ -1,19 +1,24 @@
|
||||
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 { SCHEDULE_CHANGED_EVENT, type ScheduledJob } from "@umt/contracts";
|
||||
import { AlertTriangle, Bot, CalendarClock, CircleCheck, Coins, LoaderCircle, Plus, XCircle } from "lucide-react";
|
||||
import { type ReactNode, useEffect, useRef, useState } from "react";
|
||||
import { useLocation } from "react-router";
|
||||
import { groupRunsBySchedule, useScheduleAgentRuns } from "~/api/agent.ts";
|
||||
import { usePiUpstreams } from "~/api/pi.ts";
|
||||
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 { AgentCheckCard, type DefaultUpstream } from "./agent-check-card.tsx";
|
||||
import { AgentCheckDialog } from "./agent-check-dialog.tsx";
|
||||
import { GROUP_LABEL, GROUP_ORDER } from "./labels.ts";
|
||||
import { ScheduleCard } from "./schedule-card.tsx";
|
||||
import { AutoTaskList } from "./auto-task-list.tsx";
|
||||
import { formatUsd } from "./labels.ts";
|
||||
import { RunsSheet } from "./runs-sheet.tsx";
|
||||
|
||||
// 定时任务看板(W7-C),IA-3 起是任务页的"计划"页签。卡片"运行记录"跳到任务流按该定时任务筛选。
|
||||
// 计划页(FE-6,/console/schedules):「自动任务」= 程序按固定周期执行的定时任务(紧凑列表);
|
||||
// 「Agent 巡检」= 到点发起 Agent 会话的定时任务(卡片)。自动任务的运行记录跳任务页按该定时任务筛选。
|
||||
|
||||
/** 每秒一跳的当前时间(倒计时用) */
|
||||
export function useNow(ms = 1000) {
|
||||
@@ -45,46 +50,125 @@ export function useLiveSchedules() {
|
||||
return useScheduleBoard();
|
||||
}
|
||||
|
||||
/** 任务流里某个定时任务的筛选地址 */
|
||||
export const scheduleStreamPath = (id: string) => `/console/tasks?tab=all&kind=schedule&ref=${encodeURIComponent(id)}`;
|
||||
const WEEK_MS = 7 * 24 * 3600_000;
|
||||
|
||||
export function ScheduleBoard({ highlightJob }: { highlightJob?: string }) {
|
||||
const _qc = useQueryClient();
|
||||
const navigate = useNavigate();
|
||||
/** 两节的计数:自动任务 启用/失败/运行中;巡检 启用/失败/近 7 天费用 */
|
||||
export function planStats(items: ScheduledJob[], checkCosts: { at: string; cost: number | undefined }[], now: number) {
|
||||
const auto = items.filter((j) => j.kind === "task");
|
||||
const checks = items.filter((j) => j.kind === "agent_check");
|
||||
const count = (list: ScheduledJob[]) => ({
|
||||
total: list.length,
|
||||
enabled: list.filter((j) => j.enabled && j.available).length,
|
||||
failed: list.filter((j) => j.lastStatus === "failed").length,
|
||||
running: list.filter((j) => !!j.runningSince).length,
|
||||
});
|
||||
const recent = checkCosts.filter((c) => now - new Date(c.at).getTime() <= WEEK_MS);
|
||||
return {
|
||||
auto: count(auto),
|
||||
checks: {
|
||||
...count(checks),
|
||||
weekRuns: recent.length,
|
||||
weekCost: recent.reduce((s, c) => s + (c.cost ?? 0), 0),
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
function SectionHead({ id, title, hint, actions }: { id: string; title: string; hint: string; actions?: ReactNode }) {
|
||||
return (
|
||||
<div className="mb-3 flex flex-wrap items-end gap-x-3 gap-y-2">
|
||||
<div className="min-w-0">
|
||||
<h2 id={id} className="scroll-mt-20 text-title-sm font-semibold text-foreground">
|
||||
{title}
|
||||
</h2>
|
||||
<p className="mt-0.5 text-caption text-muted-foreground">{hint}</p>
|
||||
</div>
|
||||
{actions ? <div className="ml-auto flex items-center gap-2">{actions}</div> : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function PlanBoard({ highlightJob }: { highlightJob?: string }) {
|
||||
const board = useLiveSchedules();
|
||||
const agentRuns = useScheduleAgentRuns();
|
||||
const upstreams = usePiUpstreams();
|
||||
const now = useNow();
|
||||
const { hash } = useLocation();
|
||||
const [editing, setEditing] = useState<{ job: ScheduledJob | null; key: number } | null>(null);
|
||||
const [history, setHistory] = useState<ScheduledJob | 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));
|
||||
const autoJobs = items.filter((j) => j.kind === "task");
|
||||
const checks = items.filter((j) => j.kind === "agent_check");
|
||||
const runsByJob = groupRunsBySchedule(agentRuns.data ?? []);
|
||||
const def = upstreams.data?.items.find((u) => u.isDefault);
|
||||
const upstream: DefaultUpstream = def ? { name: def.name, model: def.defaultModel ?? null } : null;
|
||||
const s = planStats(
|
||||
items,
|
||||
(agentRuns.data ?? []).map((r) => ({ at: r.createdAt, cost: r.usage.costUsd })),
|
||||
now,
|
||||
);
|
||||
const val = (n: number) => (board.isPending ? "…" : board.isError ? "—" : n);
|
||||
|
||||
// 首页计数链到 #auto / #checks:数据到了再滚过去
|
||||
const loaded = !!data;
|
||||
useEffect(() => {
|
||||
if (!loaded || highlightJob) return;
|
||||
const id = hash.replace(/^#/, "");
|
||||
if (id === "auto" || id === "checks") document.getElementById(id)?.scrollIntoView({ block: "start" });
|
||||
}, [loaded, hash, highlightJob]);
|
||||
|
||||
const jump = (id: string) => document.getElementById(id)?.scrollIntoView({ block: "start", behavior: "smooth" });
|
||||
|
||||
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 className="mb-4 grid gap-3 lg:grid-cols-2">
|
||||
<div className="grid gap-1.5">
|
||||
<p className="px-1 text-meta font-medium text-muted-foreground">自动任务</p>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
<StatTile
|
||||
label="已启用"
|
||||
icon={CircleCheck}
|
||||
value={val(s.auto.enabled)}
|
||||
hint={board.isPending ? undefined : `共 ${s.auto.total} 项`}
|
||||
onClick={() => jump("auto")}
|
||||
/>
|
||||
<StatTile
|
||||
label="上次失败"
|
||||
icon={XCircle}
|
||||
tone={s.auto.failed > 0 ? "destructive" : "neutral"}
|
||||
value={val(s.auto.failed)}
|
||||
onClick={() => jump("auto")}
|
||||
/>
|
||||
<StatTile label="运行中" icon={LoaderCircle} value={val(s.auto.running)} onClick={() => jump("auto")} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-1.5">
|
||||
<p className="px-1 text-meta font-medium text-muted-foreground">Agent 巡检</p>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
<StatTile
|
||||
label="已启用"
|
||||
icon={Bot}
|
||||
value={val(s.checks.enabled)}
|
||||
hint={board.isPending ? undefined : `共 ${s.checks.total} 项`}
|
||||
onClick={() => jump("checks")}
|
||||
/>
|
||||
<StatTile
|
||||
label="上次失败"
|
||||
icon={XCircle}
|
||||
tone={s.checks.failed > 0 ? "destructive" : "neutral"}
|
||||
value={val(s.checks.failed)}
|
||||
onClick={() => jump("checks")}
|
||||
/>
|
||||
<StatTile
|
||||
label="近 7 天费用"
|
||||
icon={Coins}
|
||||
value={agentRuns.isPending ? "…" : agentRuns.isError ? "—" : formatUsd(s.checks.weekCost)}
|
||||
hint={agentRuns.data ? `${s.checks.weekRuns} 次会话` : undefined}
|
||||
onClick={() => jump("checks")}
|
||||
/>
|
||||
</div>
|
||||
</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 ? (
|
||||
@@ -93,53 +177,67 @@ export function ScheduleBoard({ highlightJob }: { highlightJob?: string }) {
|
||||
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" />
|
||||
)}
|
||||
) : null}
|
||||
|
||||
{board.isPending ? (
|
||||
<LoadingState rows={6} />
|
||||
<LoadingState rows={8} />
|
||||
) : 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 className="grid gap-8">
|
||||
<section aria-labelledby="auto">
|
||||
<SectionHead
|
||||
id="auto"
|
||||
title="自动任务"
|
||||
hint="程序按固定周期执行，不调用模型。间隔可直接改，改过的可恢复默认。"
|
||||
/>
|
||||
{autoJobs.length === 0 ? (
|
||||
<EmptyState icon={CalendarClock} title="还没有自动任务" description="worker 启动后自动登记。" />
|
||||
) : (
|
||||
<AutoTaskList jobs={autoJobs} now={now} highlightJob={highlightJob} />
|
||||
)}
|
||||
</section>
|
||||
|
||||
<section aria-labelledby="checks">
|
||||
<SectionHead
|
||||
id="checks"
|
||||
title="Agent 巡检"
|
||||
hint="到点按目标发起一次 Agent 会话，只在能力白名单和预算内执行；触发条件不满足时跳过，不调用模型。"
|
||||
actions={
|
||||
<Button size="sm" onClick={() => setEditing({ job: null, key: Date.now() })}>
|
||||
<Plus />
|
||||
新建巡检
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
{checks.length === 0 ? (
|
||||
<EmptyState icon={Bot} title="还没有巡检" description="新建一个巡检，到点由 Agent 按目标检查并汇报。" />
|
||||
) : (
|
||||
<div className="grid items-start gap-4 md:grid-cols-2 2xl:grid-cols-3">
|
||||
{checks.map((j) => (
|
||||
<AgentCheckCard
|
||||
key={j.id}
|
||||
job={j}
|
||||
now={now}
|
||||
runs={runsByJob.get(j.id) ?? []}
|
||||
upstream={upstream}
|
||||
highlight={highlightJob === j.id}
|
||||
onEdit={(job) => setEditing({ job, key: Date.now() })}
|
||||
onHistory={setHistory}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{editing ? (
|
||||
<AgentCheckDialog key={editing.key} open job={editing.job} onOpenChange={(o) => !o && setEditing(null)} />
|
||||
) : null}
|
||||
<RunsSheet job={history} onClose={() => setHistory(null)} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user