@allbluecn/web-app 0.17.2 → 0.18.0

package/src/components/testcase/automation/artifact-panel.tsx

@@ -0,0 +1,403 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+// 用例详情自动化产物面板（任务 30，挂详情页 tabs 第四页）。左侧产物列表 +
+// 右侧选中产物详情（diff 视图 + 验证报告 + 采纳/拒绝动作）。
+// 发起生成：选 kind（unit 可附目标源文件）→ generateArtifactFn 同步长请求
+// （任务 21 同款：await 期间 loading + 生成按钮禁用，返回终态后入列并自动选中）。
+// 生成中态跨挂载保持（审查修复）：tabs 切换无条件卸载面板、组件内 generating
+// 随之丢失，切回可重复发起 → in-flight 单例（in-flight.ts）承载进行中 promise，
+// 挂载时 consume 命中即恢复 loading 并 await 同一 promise，防并发重复生成。
+// stale（case.version > artifact.caseVersion，listArtifactsFn 服务端判定）：
+// 行内「过期待重生成」徽标 + 详情警告 + 采纳按钮禁用（任务 29 审查钉死：
+// stale 产物不可被静默采纳，重新生成是唯一路径——禁用优于仅警示文案）。
+// 采纳仅 verified：ConfirmDialog 确认后 adoptArtifactFn；拒绝留痕 rejectArtifactFn。
+import { useCallback, useEffect, useState } from "react";
+import { FlaskConical, RefreshCw } from "lucide-react";
+import { ConfirmDialog } from "@allbluecn/ui/components/confirm-dialog";
+import { Badge } from "@allbluecn/ui/badge";
+import { Button } from "@allbluecn/ui/button";
+import { Input } from "@allbluecn/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@allbluecn/ui/select";
+import { Spinner } from "@/components/ui/spinner";
+import { toast } from "@allbluecn/ui/toast";
+import {
+  adoptArtifactFn,
+  generateArtifactFn,
+  listArtifactsFn,
+  rejectArtifactFn,
+} from "@/server/serverFns/testcase/automation";
+import { ARTIFACT_KIND_VALUES, type ArtifactKind } from "@/server/serverFns/testcase/automation-schema";
+import { m } from "@/paraglide/messages.js";
+import { ArtifactDiff } from "./artifact-diff";
+import {
+  consumeArtifactGeneration,
+  startArtifactGeneration,
+  type ArtifactGenerationResult,
+  type AutomationArtifact,
+} from "./in-flight";
+import { VerifyReport, parseVerifyRun } from "./verify-report";
+import { toastError } from "@/lib/toast-error";
+
+type ArtifactStatus = "draft" | "verified" | "adopted" | "rejected";
+
+function statusLabel(status: string): string {
+  switch (status) {
+    case "draft":
+      return m.testcase_artifact_statusDraft();
+    case "verified":
+      return m.testcase_artifact_statusVerified();
+    case "adopted":
+      return m.testcase_artifact_statusAdopted();
+    case "rejected":
+      return m.testcase_artifact_statusRejected();
+    default:
+      return status;
+  }
+}
+
+/** 四态徽标（暗黑语义类）：draft=secondary、verified=蓝、adopted=绿、rejected=红 */
+function StatusBadge({ artifact }: { artifact: AutomationArtifact }) {
+  const cls =
+    artifact.status === "verified"
+      ? "border-transparent bg-blue-500/10 text-blue-600 dark:text-blue-400"
+      : artifact.status === "adopted"
+        ? "border-transparent bg-emerald-500/10 text-emerald-600 dark:text-emerald-400"
+        : artifact.status === "rejected"
+          ? undefined // destructive 变体（红）
+          : undefined; // draft 用 secondary 变体
+  return (
+    <Badge
+      variant={artifact.status === "draft" ? "secondary" : artifact.status === "rejected" ? "destructive" : "outline"}
+      className={cls}
+      data-testid={`artifact-badge-${artifact.id}`}
+    >
+      {statusLabel(artifact.status)}
+    </Badge>
+  );
+}
+
+function kindLabel(kind: string): string {
+  return kind === "e2e" ? m.testcase_artifact_kindE2e() : m.testcase_artifact_kindUnit();
+}
+
+/** 下载文件名：优先 targetPath 基名，否则标识兜底（仅作浏览器侧文件名，不写盘不写 git） */
+function downloadName(artifact: AutomationArtifact): string {
+  const base = artifact.targetPath?.split("/").pop();
+  if (base) return base;
+  return `automation-${artifact.kind}${artifact.kind === "unit" ? ".test.ts" : ".spec.ts"}`;
+}
+
+interface CaseAutomationPanelProps {
+  caseId: string;
+}
+
+export function CaseAutomationPanel({ caseId }: CaseAutomationPanelProps) {
+  const [artifacts, setArtifacts] = useState<AutomationArtifact[] | null>(null);
+  const [loadError, setLoadError] = useState("");
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [kind, setKind] = useState<ArtifactKind>("unit");
+  const [targetPath, setTargetPath] = useState("");
+  const [generating, setGenerating] = useState(false);
+  const [genError, setGenError] = useState("");
+  const [adoptTargetId, setAdoptTargetId] = useState<string | null>(null);
+  const [acting, setActing] = useState(false);
+
+  const load = useCallback(() => {
+    let cancelled = false;
+    setLoadError("");
+    listArtifactsFn({ data: { caseId } })
+      .then((res) => {
+        if (cancelled) return;
+        setArtifacts(res.artifacts);
+        setSelectedId((prev) => prev ?? res.artifacts[0]?.id ?? null);
+      })
+      .catch(() => {
+        if (!cancelled) setLoadError(m.testcase_artifact_loadFailed());
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [caseId]);
+
+  useEffect(() => load(), [load]);
+
+  const selected = artifacts?.find((a) => a.id === selectedId) ?? null;
+
+  /** 生成终态处理（发起与跨挂载恢复共用）：入列自动选中 + toast + 收尾 loading */
+  const runGeneration = useCallback(
+    (pending: Promise<ArtifactGenerationResult>) => {
+      setGenerating(true);
+      setGenError("");
+      pending
+        .then((res) => {
+          setArtifacts((prev) => [res.artifact, ...(prev ?? [])]);
+          setSelectedId(res.artifact.id);
+          setTargetPath("");
+          if (res.artifact.status === "verified") {
+            toast.success(m.testcase_artifact_genVerifiedToast());
+          } else {
+            toast.warning(m.testcase_artifact_genDraftToast());
+          }
+        })
+        .catch((e: unknown) => {
+          setGenError((e as Error)?.message || m.testcase_gen_failed());
+        })
+        .finally(() => setGenerating(false));
+    },
+    [],
+  );
+
+  // 挂载恢复：tabs 切换卸载期间如有进行中生成，恢复 loading 并 await 同一 promise
+  useEffect(() => {
+    const pending = consumeArtifactGeneration(caseId);
+    if (pending) runGeneration(pending);
+  }, [caseId, runGeneration]);
+
+  const handleGenerate = () => {
+    if (generating) return;
+    const trimmed = targetPath.trim();
+    runGeneration(
+      startArtifactGeneration(caseId, () =>
+        generateArtifactFn({
+          data:
+            kind === "unit" && trimmed
+              ? { caseId, kind, targetSourcePath: trimmed }
+              : { caseId, kind },
+        }),
+      ),
+    );
+  };
+
+  const handleAdopt = async () => {
+    const artifactId = adoptTargetId;
+    if (!artifactId || acting) return;
+    setActing(true);
+    try {
+      const res = await adoptArtifactFn({ data: { artifactId } });
+      setArtifacts((prev) => prev?.map((a) => (a.id === artifactId ? res.artifact : a)) ?? prev);
+      setAdoptTargetId(null);
+      toast.success(m.testcase_artifact_adoptSuccess());
+    } catch (e) {
+      toastError(e, m.testcase_artifact_adoptFailed());
+    } finally {
+      setActing(false);
+    }
+  };
+
+  const handleReject = async (artifactId: string) => {
+    if (acting) return;
+    setActing(true);
+    try {
+      const res = await rejectArtifactFn({ data: { artifactId } });
+      setArtifacts((prev) => prev?.map((a) => (a.id === artifactId ? res.artifact : a)) ?? prev);
+      toast.success(m.testcase_artifact_rejectSuccess());
+    } catch (e) {
+      toastError(e, m.testcase_artifact_rejectFailed());
+    } finally {
+      setActing(false);
+    }
+  };
+
+  return (
+    <div className="space-y-4" data-testid="artifact-panel">
+      {/* 生成发起区（AI 侧栏入口）：选 kind + 单测目标文件 */}
+      <div className="space-y-2 rounded-md border p-3">
+        <div className="flex flex-wrap items-center gap-2">
+          <Select
+            value={kind}
+            onValueChange={(v) => setKind((v ?? "unit") as ArtifactKind)}
+          >
+            <SelectTrigger
+              size="sm"
+              aria-label={m.testcase_artifact_kindLabel()}
+              className="w-36"
+              disabled={generating}
+              data-testid="artifact-panel-generate-kind"
+            >
+              <SelectValue placeholder={m.testcase_artifact_kindLabel()} />
+            </SelectTrigger>
+            <SelectContent>
+              {ARTIFACT_KIND_VALUES.map((k) => (
+                <SelectItem key={k} value={k}>
+                  {kindLabel(k)}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          {kind === "unit" && (
+            <Input
+              value={targetPath}
+              onChange={(e) => setTargetPath(e.target.value)}
+              placeholder={m.testcase_artifact_targetPlaceholder()}
+              aria-label={m.testcase_artifact_targetLabel()}
+              className="h-8 min-w-56 flex-1 text-sm"
+              disabled={generating}
+              data-testid="artifact-panel-generate-target"
+            />
+          )}
+          <Button
+            size="sm"
+            className="h-8 gap-1.5"
+            onClick={handleGenerate}
+            disabled={generating}
+            data-testid="artifact-panel-generate-start"
+          >
+            {generating ? <Spinner className="size-3.5" /> : <FlaskConical className="size-3.5" />}
+            {m.testcase_artifact_generate()}
+          </Button>
+        </div>
+        {generating && (
+          <div
+            className="flex items-center gap-2 rounded-md bg-muted/30 p-2 text-xs text-muted-foreground"
+            data-testid="artifact-panel-generating"
+          >
+            <Spinner className="size-3.5" />
+            <span>{m.testcase_artifact_generating()}</span>
+            <span>{m.testcase_artifact_generatingHint()}</span>
+          </div>
+        )}
+        {genError && (
+          <p className="text-xs break-words text-destructive" data-testid="artifact-panel-error">
+            {genError}
+          </p>
+        )}
+      </div>
+
+      {/* 产物列表 */}
+      {loadError && (
+        <div className="flex items-center gap-2 text-sm text-destructive">
+          <span>{loadError}</span>
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            className="h-7 gap-1 px-2 text-xs"
+            onClick={load}
+          >
+            <RefreshCw className="size-3" />
+            {m.testcase_gen_retry()}
+          </Button>
+        </div>
+      )}
+      {!loadError && artifacts && artifacts.length === 0 && (
+        <p className="text-sm text-muted-foreground" data-testid="artifact-panel-empty">
+          {m.testcase_artifact_empty()}
+        </p>
+      )}
+      {artifacts && artifacts.length > 0 && (
+        <div className="grid gap-4 lg:grid-cols-[minmax(220px,320px)_1fr]">
+          <ul className="space-y-1.5">
+            {artifacts.map((a) => (
+              <li key={a.id}>
+                <button
+                  type="button"
+                  onClick={() => setSelectedId(a.id)}
+                  className={`w-full rounded-md border p-2.5 text-left transition-colors ${
+                    a.id === selectedId
+                      ? "border-primary/60 bg-muted/40"
+                      : "hover:bg-muted/30"
+                  }`}
+                  data-testid={`artifact-item-${a.id}`}
+                >
+                  <div className="flex items-center gap-1.5">
+                    <Badge variant="outline">{kindLabel(a.kind)}</Badge>
+                    <StatusBadge artifact={a} />
+                    {a.stale && (
+                      <Badge
+                        variant="outline"
+                        className="border-amber-500/40 text-amber-600 dark:text-amber-400"
+                        data-testid={`artifact-stale-${a.id}`}
+                      >
+                        {m.testcase_artifact_staleBadge()}
+                      </Badge>
+                    )}
+                  </div>
+                  <div className="mt-1 text-xs text-muted-foreground">
+                    v{a.caseVersion} · {new Date(a.createdAt).toLocaleString()}
+                  </div>
+                </button>
+              </li>
+            ))}
+          </ul>
+
+          {/* 选中产物详情 */}
+          {selected && (
+            <div className="min-w-0 space-y-3">
+              {selected.stale && (
+                <div
+                  className="rounded-md border border-amber-500/40 bg-amber-500/10 p-2.5 text-xs text-amber-700 dark:text-amber-400"
+                  data-testid={`artifact-stale-warning-${selected.id}`}
+                >
+                  {m.testcase_artifact_staleWarning({ artifactVersion: selected.caseVersion })}
+                  {" "}
+                  {m.testcase_artifact_staleAdoptHint()}
+                </div>
+              )}
+              <ArtifactDiff code={selected.code} filename={downloadName(selected)} />
+              <VerifyReport verifyRun={parseVerifyRun(selected.verifyRun)} />
+              {(selected.status === "verified" || selected.status === "draft") && (
+                <div className="flex items-center gap-2">
+                  {selected.status === "verified" && (
+                    <Button
+                      size="sm"
+                      onClick={() => setAdoptTargetId(selected.id)}
+                      disabled={selected.stale || acting}
+                      data-testid={`artifact-adopt-${selected.id}`}
+                    >
+                      {m.testcase_artifact_adopt()}
+                    </Button>
+                  )}
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    onClick={() => void handleReject(selected.id)}
+                    disabled={acting}
+                    data-testid={`artifact-reject-${selected.id}`}
+                  >
+                    {m.testcase_artifact_reject()}
+                  </Button>
+                  {selected.stale && selected.status === "verified" && (
+                    <span className="text-xs text-muted-foreground">
+                      {m.testcase_artifact_staleAdoptHint()}
+                    </span>
+                  )}
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* 采纳确认（仅 verified 可达；stale 按钮已禁用进不来） */}
+      <ConfirmDialog
+        open={adoptTargetId !== null}
+        onOpenChange={(v) => {
+          if (!v && !acting) setAdoptTargetId(null);
+        }}
+        contentTestId="artifact-adopt-dialog"
+        title={m.testcase_artifact_adoptTitle()}
+        description={m.testcase_artifact_adoptDesc()}
+        cancelLabel={m.testcase_view_cancel()}
+        confirmLabel={m.testcase_artifact_adoptConfirm()}
+        confirmDisabled={acting}
+        confirmTestId="artifact-adopt-confirm"
+        onConfirm={() => void handleAdopt()}
+      />
+    </div>
+  );
+}

package/src/components/testcase/automation/in-flight.ts

@@ -0,0 +1,54 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+// 自动化生成 in-flight 单例（任务 30 审查修复）。generateArtifactFn 是同步长
+// 请求，generating 态随面板卸载丢失（详情页 tabs 切换无条件卸载），切回后无
+// in-flight 标记、按钮可用，再点即并发重复生成（重复消耗 AI + 沙箱额度）。
+// 按 chat-handoff 先例做 module-level singleton（caseId 粒度）：
+// - startArtifactGeneration：复用进行中 promise 防重复创建，完成/失败后立即清理；
+// - consumeArtifactGeneration：面板挂载时探查，命中则恢复 loading 并 await
+//   同一 promise（多订阅者安全，清理权归 start 的 finally）。
+// 纯类型引用 serverFn（import type 擦除），运行时零依赖。
+import type { generateArtifactFn } from "@/server/serverFns/testcase/automation";
+
+/** 生成产物行 DTO（形状同 listArtifactsFn 的 castArtifact 投影） */
+export type AutomationArtifact = Awaited<ReturnType<typeof generateArtifactFn>>["artifact"];
+
+export type ArtifactGenerationResult = { artifact: AutomationArtifact };
+
+const inFlight = new Map<string, Promise<ArtifactGenerationResult>>();
+
+/** 发起生成：已有进行中请求时直接复用同一 promise（不重复调 create） */
+export function startArtifactGeneration(
+  caseId: string,
+  create: () => Promise<ArtifactGenerationResult>,
+): Promise<ArtifactGenerationResult> {
+  const existing = inFlight.get(caseId);
+  if (existing) return existing;
+  const promise: Promise<ArtifactGenerationResult> = create().finally(() => {
+    if (inFlight.get(caseId) === promise) inFlight.delete(caseId);
+  });
+  inFlight.set(caseId, promise);
+  return promise;
+}
+
+/** 探查进行中生成（不移除；清理由 start 的 finally 负责） */
+export function consumeArtifactGeneration(
+  caseId: string,
+): Promise<ArtifactGenerationResult> | null {
+  return inFlight.get(caseId) ?? null;
+}

package/src/components/testcase/automation/verify-report.tsx

@@ -0,0 +1,138 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+// 自动化产物验证报告（任务 30）：渲染沙箱验证结果（passed/failed/skipped/attempts/
+// lastError/notes）+ 日志查看与下载（logBlobId → /api/blob/$id 链接，step-stream
+// 同款原样链接先例；download 属性触发浏览器下载，无需 JS click）。
+// verifyRun 落库为 Prisma JsonValue，跨 JSON 边界后按 unknown 收窄解析（parseVerifyRun）。
+import { Badge } from "@allbluecn/ui/badge";
+import { m } from "@/paraglide/messages.js";
+
+/** verifyRun JSON 的客户端收窄形状（与 serverFns/testcase/automation.ts 落库形状对接） */
+export interface VerifyRunSummary {
+  passed: number;
+  failed: number;
+  skipped: number;
+  attempts: number;
+  lastError?: string;
+  logBlobId?: string;
+  notes?: string[];
+}
+
+function toNum(v: unknown): number {
+  return typeof v === "number" && Number.isFinite(v) ? v : 0;
+}
+
+/** Prisma JsonValue → 客户端摘要（非法形状返回 null，由调用方渲染「无验证记录」） */
+export function parseVerifyRun(value: unknown): VerifyRunSummary | null {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return null;
+  const o = value as Record<string, unknown>;
+  return {
+    passed: toNum(o.passed),
+    failed: toNum(o.failed),
+    skipped: toNum(o.skipped),
+    attempts: toNum(o.attempts),
+    lastError: typeof o.lastError === "string" ? o.lastError : undefined,
+    logBlobId: typeof o.logBlobId === "string" ? o.logBlobId : undefined,
+    notes: Array.isArray(o.notes)
+      ? o.notes.filter((n): n is string => typeof n === "string")
+      : undefined,
+  };
+}
+
+export function VerifyReport({ verifyRun }: { verifyRun: VerifyRunSummary | null }) {
+  if (!verifyRun) {
+    return (
+      <p className="text-xs text-muted-foreground" data-testid="artifact-verify-missing">
+        {m.testcase_artifact_verifyMissing()}
+      </p>
+    );
+  }
+  return (
+    <div className="space-y-2 rounded-md border bg-muted/30 p-3" data-testid="artifact-verify-report">
+      <div className="flex items-center gap-2 text-xs font-medium text-muted-foreground">
+        {m.testcase_artifact_verifyTitle()}
+      </div>
+      <div className="flex flex-wrap items-center gap-1.5 text-xs">
+        <Badge variant="secondary" className="text-emerald-600 dark:text-emerald-400">
+          {m.testcase_artifact_verifyPassed({ count: verifyRun.passed })}
+        </Badge>
+        {verifyRun.failed > 0 && (
+          <Badge variant="destructive">
+            {m.testcase_artifact_verifyFailed({ count: verifyRun.failed })}
+          </Badge>
+        )}
+        {verifyRun.skipped > 0 && (
+          <Badge variant="outline">
+            {m.testcase_artifact_verifySkipped({ count: verifyRun.skipped })}
+          </Badge>
+        )}
+        <span
+          className="inline-flex items-center gap-1 text-muted-foreground"
+          data-testid="artifact-verify-attempts"
+        >
+          {m.testcase_artifact_verifyAttempts({ count: verifyRun.attempts })}
+        </span>
+      </div>
+      {verifyRun.lastError && (
+        <div className="space-y-0.5">
+          <p className="text-xs font-medium text-destructive">
+            {m.testcase_artifact_verifyLastError()}
+          </p>
+          <pre className="overflow-x-auto rounded-sm bg-destructive/10 p-2 font-mono text-xs break-words whitespace-pre-wrap text-destructive">
+            {verifyRun.lastError}
+          </pre>
+        </div>
+      )}
+      {verifyRun.notes && verifyRun.notes.length > 0 && (
+        <div className="space-y-0.5">
+          <p className="text-xs font-medium text-muted-foreground">
+            {m.testcase_artifact_notesTitle()}
+          </p>
+          <ul className="list-disc space-y-0.5 pl-4 text-xs text-muted-foreground">
+            {verifyRun.notes.map((note, i) => (
+              <li key={i} className="break-words">
+                {note}
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+      {verifyRun.logBlobId && (
+        <div className="flex items-center gap-3 text-xs">
+          <a
+            href={`/api/blob/${verifyRun.logBlobId}`}
+            target="_blank"
+            rel="noreferrer"
+            className="text-primary underline-offset-2 hover:underline"
+            data-testid="artifact-verify-log"
+          >
+            {m.testcase_artifact_viewLog()}
+          </a>
+          <a
+            href={`/api/blob/${verifyRun.logBlobId}`}
+            download
+            className="text-muted-foreground underline-offset-2 hover:underline"
+            data-testid="artifact-verify-log-download"
+          >
+            {m.testcase_artifact_downloadLog()}
+          </a>
+        </div>
+      )}
+    </div>
+  );
+}