437 lines
14 KiB
TypeScript
437 lines
14 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* 批量测试用例详情面板。
|
|
* 与 prompt mode DebugDrawer overlay 相同：作为右侧 flex 半屏，无遮罩/模糊。
|
|
*/
|
|
|
|
import {
|
|
CheckCircle2,
|
|
Circle,
|
|
Loader2,
|
|
MessageSquareText,
|
|
Pencil,
|
|
RotateCcw,
|
|
Target,
|
|
TriangleAlert,
|
|
Wrench,
|
|
X,
|
|
} from "lucide-react";
|
|
import { useEffect, useRef } from "react";
|
|
|
|
import { BatchCaseStatusBadge } from "@/components/batch-test/batch-case-status";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
firstEvaluationFailureReason,
|
|
type BatchEvaluationResult,
|
|
type BatchRunCase,
|
|
type BatchToolCallRecord,
|
|
type BatchTurnResult,
|
|
} from "@/data/batch-run";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type BatchCaseDetailDrawerProps = {
|
|
item: BatchRunCase;
|
|
assistantName: string;
|
|
onClose: () => void;
|
|
onEdit?: () => void;
|
|
onRerun?: () => void;
|
|
};
|
|
|
|
export function BatchCaseDetailDrawer({
|
|
item,
|
|
assistantName,
|
|
onClose,
|
|
onEdit,
|
|
onRerun,
|
|
}: BatchCaseDetailDrawerProps) {
|
|
const closeButtonRef = useRef<HTMLButtonElement>(null);
|
|
const failureReason = firstEvaluationFailureReason(item);
|
|
|
|
useEffect(() => {
|
|
closeButtonRef.current?.focus();
|
|
}, [item.id]);
|
|
|
|
return (
|
|
<aside
|
|
id="batch-case-detail"
|
|
role="complementary"
|
|
aria-labelledby="batch-case-detail-title"
|
|
className="flex h-full min-w-0 flex-1 flex-col overflow-hidden border-l border-hairline bg-card"
|
|
>
|
|
<div className="flex min-h-14 shrink-0 items-center gap-3 border-b border-hairline px-4 py-3">
|
|
<button
|
|
ref={closeButtonRef}
|
|
type="button"
|
|
aria-label="关闭用例详情"
|
|
title="关闭"
|
|
className="flex size-10 shrink-0 items-center justify-center rounded-full border border-hairline-strong bg-card text-muted-foreground shadow-sm transition-colors hover:text-foreground"
|
|
onClick={onClose}
|
|
>
|
|
<X size={16} />
|
|
</button>
|
|
<div className="min-w-0 flex-1">
|
|
<h2
|
|
id="batch-case-detail-title"
|
|
className="truncate text-sm font-medium text-foreground"
|
|
>
|
|
{item.name}
|
|
</h2>
|
|
<p className="truncate text-xs text-muted-soft">
|
|
被测助手：{assistantName} · Pipeline 结果
|
|
</p>
|
|
</div>
|
|
<BatchCaseStatusBadge status={item.status} />
|
|
</div>
|
|
|
|
<div className="min-h-0 flex-1 overflow-y-auto px-5 py-5">
|
|
<div className="space-y-5">
|
|
<section className="rounded-2xl border border-hairline bg-canvas-soft px-4 py-3.5">
|
|
<p className="text-xs text-muted-soft">当前状态</p>
|
|
<p className="mt-1 text-sm text-muted-foreground">
|
|
{statusDescription(item)}
|
|
</p>
|
|
</section>
|
|
|
|
{(item.status === "waiting" || item.status === "running") && (
|
|
<>
|
|
<section className="rounded-2xl border border-hairline bg-canvas-soft px-4 py-3.5">
|
|
<p className="text-xs font-medium text-foreground">执行契约</p>
|
|
<p className="mt-1 text-xs leading-5 text-muted-soft">
|
|
正在执行固定文字脚本；完成后将展示每一轮回复、工具调用和全部评估标准。
|
|
</p>
|
|
</section>
|
|
<ExecutionTimeline status={item.status} />
|
|
</>
|
|
)}
|
|
|
|
{item.status === "error" && item.executionError && (
|
|
<section>
|
|
<div className="flex items-center gap-2 text-sm font-medium text-amber-600 dark:text-amber-400">
|
|
<TriangleAlert size={16} />
|
|
<h3>执行错误</h3>
|
|
</div>
|
|
<div className="mt-2.5 rounded-2xl border border-amber-500/25 bg-amber-500/[0.06] px-4 py-3.5">
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<code className="text-xs font-medium text-foreground">
|
|
{item.executionError.code}
|
|
</code>
|
|
<span className="rounded-full border border-amber-500/25 px-2 py-0.5 text-[10px] text-amber-600 dark:text-amber-400">
|
|
{item.executionError.stage}
|
|
</span>
|
|
</div>
|
|
<p className="mt-2 text-sm leading-6 text-muted-foreground">
|
|
{item.executionError.message}
|
|
</p>
|
|
<p className="mt-2 text-xs text-muted-soft">
|
|
已尝试 {item.attemptCount} 次（包含首次执行），重试后仍未恢复。
|
|
</p>
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
{(item.status === "pass" || item.status === "fail") && (
|
|
<>
|
|
<section>
|
|
<div className="flex items-center gap-2 text-sm font-medium text-foreground">
|
|
<MessageSquareText size={16} />
|
|
<h3>逐轮执行结果</h3>
|
|
</div>
|
|
<div className="mt-3 space-y-3">
|
|
{item.turns.map((turn) => (
|
|
<TurnResultCard key={turn.id} turn={turn} />
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
{item.overallCriteria.length > 0 && (
|
|
<section>
|
|
<div className="flex items-center gap-2 text-sm font-medium text-foreground">
|
|
<Target size={16} />
|
|
<h3>整体评估标准</h3>
|
|
</div>
|
|
<div className="mt-3 space-y-2">
|
|
{item.overallCriteria.map((evaluation) => (
|
|
<EvaluationCard
|
|
key={evaluation.id}
|
|
evaluation={evaluation}
|
|
/>
|
|
))}
|
|
</div>
|
|
</section>
|
|
)}
|
|
</>
|
|
)}
|
|
|
|
{item.status === "fail" && failureReason && (
|
|
<DetailSection
|
|
icon={<TriangleAlert size={16} />}
|
|
title="失败原因"
|
|
value={failureReason}
|
|
tone="destructive"
|
|
/>
|
|
)}
|
|
|
|
{item.status === "skipped" && (
|
|
<div className="rounded-2xl border border-dashed border-hairline-strong px-4 py-4 text-sm leading-6 text-muted-foreground">
|
|
该用例未执行，因此没有实际回复与判断结果。
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{(onEdit || onRerun) && (
|
|
<div className="flex shrink-0 items-center justify-end gap-2 border-t border-hairline bg-card px-5 py-3">
|
|
{onEdit && (
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
className="gap-2 rounded-full border-hairline-strong"
|
|
onClick={onEdit}
|
|
>
|
|
<Pencil size={14} />
|
|
编辑用例
|
|
</Button>
|
|
)}
|
|
{onRerun && (
|
|
<Button
|
|
type="button"
|
|
className="gap-2 rounded-full"
|
|
onClick={onRerun}
|
|
>
|
|
<RotateCcw size={14} />
|
|
仅重跑此项
|
|
</Button>
|
|
)}
|
|
</div>
|
|
)}
|
|
</aside>
|
|
);
|
|
}
|
|
|
|
function statusDescription(item: BatchRunCase): string {
|
|
if (item.status === "waiting") {
|
|
return item.attemptCount > 0
|
|
? `第 ${item.attemptCount} 次执行发生错误，正在等待重试。`
|
|
: "已加入执行队列，正在等待可用并发。";
|
|
}
|
|
if (item.status === "running") {
|
|
return item.attemptCount > 1
|
|
? `正在进行第 ${item.attemptCount} 次尝试。`
|
|
: "正在请求助手响应，结果尚未生成。";
|
|
}
|
|
if (item.status === "pass") return "执行与结果判断均已完成。";
|
|
if (item.status === "fail") return "执行完成，但实际回复未达到预期。";
|
|
if (item.status === "error") return "执行未完成，已用尽配置的重试次数。";
|
|
return "本轮运行已结束，该用例未执行。";
|
|
}
|
|
|
|
function TurnResultCard({ turn }: { turn: BatchTurnResult }) {
|
|
return (
|
|
<article className="overflow-hidden rounded-2xl border border-hairline bg-canvas-soft/60">
|
|
<div className="border-b border-hairline px-4 py-3">
|
|
<p className="text-xs font-medium text-foreground">
|
|
第 {turn.index + 1} 轮
|
|
</p>
|
|
<div className="mt-2 grid gap-2 text-xs leading-5 sm:grid-cols-[72px_minmax(0,1fr)]">
|
|
<span className="text-muted-soft">用户输入</span>
|
|
<p className="whitespace-pre-wrap text-muted-foreground">
|
|
{turn.userInput}
|
|
</p>
|
|
<span className="text-muted-soft">Agent 回复</span>
|
|
<p className="whitespace-pre-wrap text-muted-foreground">
|
|
{turn.assistantReply}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{turn.toolCalls.length > 0 && (
|
|
<div className="space-y-2 border-b border-hairline px-4 py-3">
|
|
<p className="inline-flex items-center gap-1.5 text-xs font-medium text-foreground">
|
|
<Wrench size={13} />
|
|
工具调用记录
|
|
</p>
|
|
{turn.toolCalls.map((toolCall) => (
|
|
<ToolCallCard key={toolCall.id} toolCall={toolCall} />
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
<div className="space-y-2 px-4 py-3">
|
|
{turn.evaluations.length === 0 ? (
|
|
<p className="text-xs text-muted-soft">本轮仅推动对话，不执行评估。</p>
|
|
) : (
|
|
turn.evaluations.map((evaluation) => (
|
|
<EvaluationCard key={evaluation.id} evaluation={evaluation} />
|
|
))
|
|
)}
|
|
</div>
|
|
</article>
|
|
);
|
|
}
|
|
|
|
function ToolCallCard({ toolCall }: { toolCall: BatchToolCallRecord }) {
|
|
return (
|
|
<div className="rounded-xl border border-violet-500/20 bg-background/70 p-2.5">
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<code className="text-xs text-foreground">{toolCall.functionName}</code>
|
|
<span className="rounded-full border border-hairline px-2 py-0.5 text-[10px] text-muted-soft">
|
|
{toolCall.outcome === "success" ? "成功" : "错误"} ·{" "}
|
|
{toolCall.durationMs} ms
|
|
</span>
|
|
</div>
|
|
<div className="mt-2 grid gap-2 sm:grid-cols-2">
|
|
<CodeResult label="参数" value={toolCall.argumentsJson} />
|
|
<CodeResult label="工具返回" value={toolCall.resultJson} />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function CodeResult({ label, value }: { label: string; value: string }) {
|
|
return (
|
|
<div className="min-w-0">
|
|
<p className="mb-1 text-[10px] text-muted-soft">{label}</p>
|
|
<pre className="max-h-36 overflow-auto whitespace-pre-wrap break-all rounded-lg bg-canvas-soft p-2 font-mono text-[10px] leading-4 text-muted-foreground">
|
|
{value}
|
|
</pre>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function EvaluationCard({
|
|
evaluation,
|
|
}: {
|
|
evaluation: BatchEvaluationResult;
|
|
}) {
|
|
const passed = evaluation.status === "pass";
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"rounded-xl border bg-background/70 p-3",
|
|
passed ? "border-hairline" : "border-destructive/30 bg-destructive/5",
|
|
)}
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
{passed ? (
|
|
<CheckCircle2 size={14} className="shrink-0 text-success" />
|
|
) : (
|
|
<TriangleAlert size={14} className="shrink-0 text-destructive" />
|
|
)}
|
|
<p className="min-w-0 flex-1 text-xs font-medium text-foreground">
|
|
{evaluation.label}
|
|
</p>
|
|
<span
|
|
className={cn(
|
|
"text-[10px] font-medium",
|
|
passed ? "text-success" : "text-destructive",
|
|
)}
|
|
>
|
|
{passed ? "通过" : "失败"}
|
|
</span>
|
|
</div>
|
|
<dl className="mt-2 grid gap-x-2 gap-y-1 text-[11px] leading-4 sm:grid-cols-[52px_minmax(0,1fr)]">
|
|
<dt className="text-muted-soft">预期</dt>
|
|
<dd className="whitespace-pre-wrap text-muted-foreground">
|
|
{evaluation.expected}
|
|
</dd>
|
|
<dt className="text-muted-soft">实际</dt>
|
|
<dd className="whitespace-pre-wrap text-muted-foreground">
|
|
{evaluation.actual}
|
|
</dd>
|
|
{evaluation.reason && (
|
|
<>
|
|
<dt className="text-destructive">原因</dt>
|
|
<dd className="text-foreground">{evaluation.reason}</dd>
|
|
</>
|
|
)}
|
|
</dl>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function DetailSection({
|
|
icon,
|
|
title,
|
|
value,
|
|
tone = "default",
|
|
}: {
|
|
icon: React.ReactNode;
|
|
title: string;
|
|
value: string;
|
|
tone?: "default" | "destructive";
|
|
}) {
|
|
return (
|
|
<section>
|
|
<div
|
|
className={cn(
|
|
"flex items-center gap-2 text-sm font-medium text-foreground",
|
|
tone === "destructive" && "text-destructive",
|
|
)}
|
|
>
|
|
{icon}
|
|
<h3>{title}</h3>
|
|
</div>
|
|
<p
|
|
className={cn(
|
|
"mt-2.5 rounded-2xl border border-hairline bg-canvas-soft px-4 py-3.5 text-sm leading-6 text-muted-foreground",
|
|
tone === "destructive" &&
|
|
"border-destructive/20 bg-destructive/5 text-foreground",
|
|
)}
|
|
>
|
|
{value}
|
|
</p>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
function ExecutionTimeline({ status }: { status: "waiting" | "running" }) {
|
|
const isRunning = status === "running";
|
|
const steps = [
|
|
{
|
|
label: "载入测试上下文",
|
|
detail: isRunning ? "已完成" : "等待开始",
|
|
state: isRunning ? "done" : "pending",
|
|
},
|
|
{
|
|
label: "请求助手响应",
|
|
detail: isRunning ? "Pipeline 生成中" : "尚未开始",
|
|
state: isRunning ? "active" : "pending",
|
|
},
|
|
{
|
|
label: "执行结果判断",
|
|
detail: "尚未开始",
|
|
state: "pending",
|
|
},
|
|
] as const;
|
|
|
|
return (
|
|
<section>
|
|
<div className="flex items-center gap-2 text-sm font-medium text-foreground">
|
|
<Loader2 size={16} className={cn(isRunning && "animate-spin")} />
|
|
<h3>执行进度</h3>
|
|
</div>
|
|
<ol className="mt-3 rounded-2xl border border-hairline px-4 py-1">
|
|
{steps.map((step) => (
|
|
<li
|
|
key={step.label}
|
|
className="flex items-center gap-3 border-b border-hairline py-3.5 last:border-b-0"
|
|
>
|
|
{step.state === "done" ? (
|
|
<CheckCircle2 size={17} className="shrink-0 text-success" />
|
|
) : step.state === "active" ? (
|
|
<Loader2 size={17} className="shrink-0 animate-spin text-primary" />
|
|
) : (
|
|
<Circle size={17} className="shrink-0 text-muted-soft" />
|
|
)}
|
|
<span className="min-w-0 flex-1 text-sm text-foreground">
|
|
{step.label}
|
|
</span>
|
|
<span className="text-xs text-muted-soft">{step.detail}</span>
|
|
</li>
|
|
))}
|
|
</ol>
|
|
</section>
|
|
);
|
|
}
|