383 lines
15 KiB
TypeScript
383 lines
15 KiB
TypeScript
import { type AgentCheckConfig, CAPABILITY_CATALOG, type KnownCapabilityId, type ScheduledJob } from "@umt/contracts";
|
|
import { ChevronRight, History, LoaderCircle, Pencil, Play, RotateCcw, SkipForward, Trash2 } from "lucide-react";
|
|
import { type ReactNode, useEffect, useRef, useState } from "react";
|
|
import { Link } from "react-router";
|
|
import { toast } from "sonner";
|
|
import { useDeleteSchedule } from "~/api/schedules.ts";
|
|
import { ConfirmDialog } from "~/components/console/confirm-dialog.tsx";
|
|
import { DetailSheet } from "~/components/console/detail-sheet.tsx";
|
|
import { consolePath } from "~/components/console/nav.ts";
|
|
import { StatusBadge } from "~/components/console/status-badge.tsx";
|
|
import { Button } from "~/components/ui/button.tsx";
|
|
import { Switch } from "~/components/ui/switch.tsx";
|
|
import { errorMessage } from "~/lib/api.ts";
|
|
import { agentRunLabel, formatRelative } from "~/lib/labels.ts";
|
|
import { formatTokens } from "~/lib/tokens.ts";
|
|
import { cn } from "~/lib/utils.ts";
|
|
import { NextRun, useJobActions } from "./auto-task-list.tsx";
|
|
import { IntervalSelect } from "./interval-select.tsx";
|
|
import { CHECK_TRIGGER_LABEL, formatUsd, goalTemplateParts, RUN_STATUS } from "./labels.ts";
|
|
|
|
// 计划页「智能体巡检」:到点按目标模板发起一次智能体会话(kind=agent_check),一个巡检一张卡片。
|
|
// 卡片统一尺寸(FIX-9):名称 / 描述 / 目标各一行省略,最近汇总(或失败原因)固定 2 行,模型与费用一行,
|
|
// 操作按钮贴底,网格按行等高。完整内容(目标、能力、预算、模型、最近会话)在「详情」抽屉里看。
|
|
|
|
/** 会话摘要是 Markdown:列表里只取纯文字 */
|
|
const plainSummary = (t: string) =>
|
|
t
|
|
.replace(/[#*`>_]+/g, " ")
|
|
.replace(/\s+/g, " ")
|
|
.trim();
|
|
|
|
const capTitle = (id: string) => CAPABILITY_CATALOG[id as KnownCapabilityId]?.title ?? id;
|
|
|
|
/** 默认上游(巡检没有单独的上游设置,跟随 Agent 设置里的默认上游) */
|
|
export type DefaultUpstream = {
|
|
name: string;
|
|
/** 上游的默认模型;上游没填时是模型目录的第一个(modelFromCatalog) */
|
|
model: string | null;
|
|
modelFromCatalog?: boolean;
|
|
} | null;
|
|
|
|
const modelsTitle = (models: { provider: string | null; model: string; count: number }[]) =>
|
|
models.map((m) => `${m.provider ? `${m.provider} · ` : ""}${m.model}:${m.count} 次`).join("\n");
|
|
|
|
/** 目标模板的纯文字版(悬浮提示用),占位符写成名称 */
|
|
const goalPlain = (template: string) =>
|
|
goalTemplateParts(template)
|
|
.map((p) => ("text" in p ? p.text : `[${p.label}]`))
|
|
.join("");
|
|
|
|
/** 目标模板:占位符显示成名称标签(执行时替换成实际值),不露 `{{now}}` */
|
|
function GoalTemplate({ template }: { template: string }) {
|
|
return (
|
|
<>
|
|
{goalTemplateParts(template).map((p, i) =>
|
|
"text" in p ? (
|
|
<span key={i}>{p.text}</span>
|
|
) : (
|
|
<span
|
|
key={i}
|
|
title="执行时替换成实际值"
|
|
className="mx-0.5 rounded-tight bg-foreground/[0.07] px-1 text-muted-foreground"
|
|
>
|
|
{p.label}
|
|
</span>
|
|
),
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
|
|
function Field({ label, children }: { label: string; children: ReactNode }) {
|
|
return (
|
|
<>
|
|
<dt className="text-meta text-muted-foreground">{label}</dt>
|
|
<dd className="min-w-0 text-caption text-foreground">{children}</dd>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export function AgentCheckCard({
|
|
job,
|
|
now,
|
|
upstream,
|
|
highlight,
|
|
onEdit,
|
|
onHistory,
|
|
}: {
|
|
job: ScheduledJob;
|
|
now: number;
|
|
upstream: DefaultUpstream;
|
|
highlight: boolean;
|
|
onEdit: (job: ScheduledJob) => void;
|
|
onHistory: (job: ScheduledJob) => void;
|
|
}) {
|
|
const a = useJobActions(job);
|
|
const del = useDeleteSchedule();
|
|
const ref = useRef<HTMLElement>(null);
|
|
useEffect(() => {
|
|
if (highlight) ref.current?.scrollIntoView({ block: "center" });
|
|
}, [highlight]);
|
|
|
|
const [detailOpen, setDetailOpen] = useState(false);
|
|
const c = job.config as Partial<AgentCheckConfig>;
|
|
const last = job.lastStatus ? RUN_STATUS[job.lastStatus] : null;
|
|
// 费用 / 模型由后端按最近 100 次会话汇总(GET /schedules 的 agentRuns)
|
|
const stats = job.agentRuns;
|
|
const latest = stats?.recent[0];
|
|
const failed = job.lastStatus === "failed" && !!job.lastError;
|
|
|
|
return (
|
|
<article
|
|
ref={ref}
|
|
id={`job-${job.id}`}
|
|
aria-label={job.name}
|
|
data-slot="agent-check-card"
|
|
className={cn(
|
|
"pg-slab flex h-full min-w-0 scroll-mt-20 flex-col gap-3 rounded-xl px-4 py-3.5",
|
|
highlight && "ring-2 ring-ring/50",
|
|
)}
|
|
>
|
|
<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}>
|
|
{job.name}
|
|
</h3>
|
|
<p className="mt-0.5 h-[1lh] truncate text-meta text-muted-foreground" title={job.description ?? undefined}>
|
|
{job.description}
|
|
</p>
|
|
</div>
|
|
<Switch
|
|
aria-label={`${job.enabled ? "停用" : "启用"}${job.name}`}
|
|
checked={job.enabled && job.available}
|
|
disabled={!job.available || a.update.isPending}
|
|
onCheckedChange={a.setEnabled}
|
|
/>
|
|
</header>
|
|
|
|
<div className="flex min-w-0 flex-nowrap items-center gap-x-4 text-meta whitespace-nowrap text-muted-foreground">
|
|
<IntervalSelect
|
|
label={`${job.name}间隔`}
|
|
schedule={job.schedule}
|
|
disabled={!job.available}
|
|
pending={a.update.isPending}
|
|
onSave={a.setSchedule}
|
|
/>
|
|
<span className="inline-flex min-w-0 items-center gap-1 truncate">
|
|
下次 <NextRun job={job} now={now} />
|
|
</span>
|
|
</div>
|
|
|
|
<div className="grid min-w-0 gap-1.5">
|
|
<p className="flex min-w-0 items-center gap-2 text-meta whitespace-nowrap text-muted-foreground">
|
|
{last ? (
|
|
job.lastStatus === "ok" ? (
|
|
<span>上次成功</span>
|
|
) : (
|
|
<StatusBadge tone={last.tone}>{last.label}</StatusBadge>
|
|
)
|
|
) : (
|
|
<span>还没运行过</span>
|
|
)}
|
|
{job.lastRunAt ? <span title={job.lastRunAt}>{formatRelative(job.lastRunAt)}</span> : null}
|
|
</p>
|
|
<p className="flex min-w-0 items-baseline gap-2 text-caption">
|
|
<span className="shrink-0 text-meta text-muted-foreground">目标</span>
|
|
<span
|
|
className="min-w-0 truncate text-foreground"
|
|
title={c.goalTemplate ? goalPlain(c.goalTemplate) : undefined}
|
|
>
|
|
{c.goalTemplate ? <GoalTemplate template={c.goalTemplate} /> : "—"}
|
|
</span>
|
|
</p>
|
|
<p
|
|
className={cn(
|
|
"line-clamp-2 h-[2lh] text-meta break-words",
|
|
failed ? "text-destructive" : "text-muted-foreground",
|
|
)}
|
|
title={failed ? (job.lastError ?? undefined) : (latest?.summary ?? undefined)}
|
|
>
|
|
{failed ? `失败原因：${job.lastError}` : latest ? plainSummary(latest.summary ?? latest.goal) : null}
|
|
</p>
|
|
<p className="flex min-w-0 items-center gap-2 text-meta whitespace-nowrap text-muted-foreground">
|
|
<span className="min-w-0 truncate" title={stats?.lastModel ? modelsTitle(stats.models) : undefined}>
|
|
<ModelText stats={stats} upstream={upstream} />
|
|
</span>
|
|
{stats?.count ? <span className="shrink-0 tabular-nums">· 每次约 {formatUsd(stats.avgCostUsd)}</span> : null}
|
|
<button
|
|
type="button"
|
|
onClick={() => setDetailOpen(true)}
|
|
className="ml-auto inline-flex shrink-0 items-center gap-0.5 rounded-md py-0.5 text-meta text-muted-foreground transition-colors duration-micro hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:outline-none"
|
|
>
|
|
详情
|
|
<ChevronRight className="size-3.5" aria-hidden />
|
|
</button>
|
|
</p>
|
|
</div>
|
|
|
|
<footer className="mt-auto flex flex-wrap items-center gap-1.5">
|
|
<Button size="sm" disabled={!a.canRun} onClick={a.run}>
|
|
{a.runNow.isPending ? <LoaderCircle className="animate-spin" /> : <Play />}
|
|
立即执行
|
|
</Button>
|
|
<Button size="sm" variant="ghost" disabled={!a.canSkip} onClick={a.skipNext}>
|
|
<SkipForward />
|
|
跳过本次
|
|
</Button>
|
|
<Button size="sm" variant="ghost" onClick={() => onHistory(job)}>
|
|
<History />
|
|
运行记录
|
|
</Button>
|
|
<span className="ml-auto flex items-center gap-1">
|
|
{job.customized ? (
|
|
<Button
|
|
size="icon-sm"
|
|
variant="ghost"
|
|
aria-label="恢复默认"
|
|
title="恢复默认"
|
|
disabled={a.update.isPending}
|
|
onClick={a.reset}
|
|
>
|
|
<RotateCcw />
|
|
</Button>
|
|
) : null}
|
|
<Button size="icon-sm" variant="ghost" aria-label="编辑巡检" title="编辑巡检" onClick={() => onEdit(job)}>
|
|
<Pencil />
|
|
</Button>
|
|
{!job.builtin ? (
|
|
<ConfirmDialog
|
|
trigger={
|
|
<Button size="icon-sm" variant="ghost" aria-label="删除巡检" title="删除巡检">
|
|
<Trash2 />
|
|
</Button>
|
|
}
|
|
title={`删除「${job.name}」？`}
|
|
description="运行记录一并删除，已产生的智能体会话保留。"
|
|
confirmLabel="删除巡检"
|
|
destructive
|
|
onConfirm={() =>
|
|
del.mutateAsync({ id: job.id }).then(
|
|
() => toast.success("已删除"),
|
|
(e) => {
|
|
toast.error(errorMessage(e));
|
|
throw e;
|
|
},
|
|
)
|
|
}
|
|
/>
|
|
) : null}
|
|
</span>
|
|
</footer>
|
|
|
|
<AgentCheckDetail job={job} upstream={upstream} open={detailOpen} onOpenChange={setDetailOpen} />
|
|
</article>
|
|
);
|
|
}
|
|
|
|
function ModelText({ stats, upstream }: { stats: ScheduledJob["agentRuns"]; upstream: DefaultUpstream }) {
|
|
if (stats?.lastModel) {
|
|
return (
|
|
<>
|
|
{stats.lastProvider ? `${stats.lastProvider} · ` : ""}
|
|
{stats.lastModel}
|
|
{stats.models.length > 1 ? (
|
|
<span className="text-muted-foreground"> 等 {stats.models.length} 个模型</span>
|
|
) : null}
|
|
</>
|
|
);
|
|
}
|
|
if (upstream) {
|
|
return (
|
|
<>
|
|
{upstream.name} · {upstream.model ?? "模型未指定"}
|
|
</>
|
|
);
|
|
}
|
|
return <span className="text-muted-foreground">未配置模型服务</span>;
|
|
}
|
|
|
|
/** 「详情」抽屉:卡片上省略掉的内容全在这里(目标全文、能力、触发条件、预算、模型、费用、失败原因、最近会话) */
|
|
function AgentCheckDetail({
|
|
job,
|
|
upstream,
|
|
open,
|
|
onOpenChange,
|
|
}: {
|
|
job: ScheduledJob;
|
|
upstream: DefaultUpstream;
|
|
open: boolean;
|
|
onOpenChange: (open: boolean) => void;
|
|
}) {
|
|
const c = job.config as Partial<AgentCheckConfig>;
|
|
const budget = c.budget ?? {};
|
|
const allow = c.capabilityAllowlist ?? [];
|
|
const stats = job.agentRuns;
|
|
const runs = stats?.recent ?? [];
|
|
const budgetParts = [
|
|
budget.maxToolCalls ? `${budget.maxToolCalls} 次调用` : null,
|
|
budget.maxDurationSec ? `${budget.maxDurationSec} 秒` : null,
|
|
budget.maxTokens ? `${formatTokens(budget.maxTokens)} token` : null,
|
|
budget.maxCostUsd ? `${formatUsd(budget.maxCostUsd)} 上限` : null,
|
|
].filter(Boolean);
|
|
|
|
return (
|
|
<DetailSheet
|
|
open={open}
|
|
onOpenChange={onOpenChange}
|
|
title={`${job.name} · 详情`}
|
|
description={job.description ?? undefined}
|
|
>
|
|
{job.lastStatus === "failed" && job.lastError ? (
|
|
<p className="rounded-tight border border-destructive/30 bg-destructive/10 px-2.5 py-1.5 text-meta break-words whitespace-pre-wrap text-destructive">
|
|
失败原因：{job.lastError}
|
|
</p>
|
|
) : null}
|
|
<dl className="grid grid-cols-[4.5rem_minmax(0,1fr)] items-baseline gap-x-3 gap-y-1.5">
|
|
<Field label="目标">
|
|
<span className="break-words">{c.goalTemplate ? <GoalTemplate template={c.goalTemplate} /> : "—"}</span>
|
|
</Field>
|
|
<Field label="能力">
|
|
{allow.length ? (
|
|
<span className="flex flex-wrap gap-1">
|
|
{allow.map((id) => (
|
|
<span
|
|
key={id}
|
|
title={id}
|
|
className="rounded-full border border-border/70 px-1.5 py-px text-meta text-muted-foreground"
|
|
>
|
|
{capTitle(id)}
|
|
</span>
|
|
))}
|
|
</span>
|
|
) : (
|
|
"全部只读能力"
|
|
)}
|
|
{c.allowRecover ? <span className="ml-1 text-meta text-muted-foreground">· 允许授权内恢复</span> : null}
|
|
</Field>
|
|
<Field label="触发条件">
|
|
{CHECK_TRIGGER_LABEL[c.triggerCondition ?? "always"]}
|
|
{c.reportAsDecision ? <span className="ml-1 text-meta text-muted-foreground">· 结果写入待处理</span> : null}
|
|
</Field>
|
|
<Field label="预算">{budgetParts.length ? budgetParts.join(" · ") : "默认"}</Field>
|
|
<Field label="模型">
|
|
<span className="break-words" title={stats?.lastModel ? modelsTitle(stats.models) : undefined}>
|
|
<ModelText stats={stats} upstream={upstream} />
|
|
</span>
|
|
</Field>
|
|
{stats?.count ? (
|
|
<Field label="费用">
|
|
<span className="tabular-nums">
|
|
上次 {formatUsd(stats.lastCostUsd)} · 近 {stats.count} 次平均 {formatUsd(stats.avgCostUsd)}
|
|
</span>
|
|
</Field>
|
|
) : null}
|
|
</dl>
|
|
{runs.length ? (
|
|
<section aria-label="最近会话" className="grid min-w-0 gap-1">
|
|
<h4 className="text-meta text-muted-foreground">最近会话</h4>
|
|
<ul className="grid min-w-0 grid-cols-[minmax(0,1fr)] gap-2">
|
|
{runs.slice(0, 3).map((r) => {
|
|
const st = agentRunLabel(r.status);
|
|
return (
|
|
<li key={r.id} className="min-w-0">
|
|
<Link
|
|
to={consolePath("agent", r.id)}
|
|
className="grid min-w-0 gap-1 rounded-tight px-1 py-0.5 text-meta text-muted-foreground hover:bg-foreground/[0.04] hover:text-foreground"
|
|
>
|
|
<span className="flex items-center gap-2">
|
|
{r.status === "succeeded" ? null : <StatusBadge tone={st.tone}>{st.label}</StatusBadge>}
|
|
<span title={r.createdAt}>{formatRelative(r.finishedAt ?? r.createdAt)}</span>
|
|
</span>
|
|
<span className="break-words text-foreground">{plainSummary(r.summary ?? r.goal)}</span>
|
|
</Link>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
</section>
|
|
) : null}
|
|
</DetailSheet>
|
|
);
|
|
}
|