@allbluecn/web-app 0.17.2 → 0.18.0

package/src/components/testcase/runs/convert-bug-button.tsx

@@ -0,0 +1,161 @@
+// 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/>.
+
+// 失败手动转 Bug（任务 17）：整单失败且未关联 BUG 的执行用例显示「转 Bug」按钮。
+// 预填口径（简报钉死）：title 含 [TC{seq}]（seq 取 caseIdentifier 的 -TC 后数字）、
+// reproduceSteps=快照 steps 同构直拷（失败步 order 之后保留）、actualResult=失败步
+// actual（多失败步按 order 换行拼接）、storyId 继承 caseStoryId、source=test_run。
+// 提交走 CreateBugDialog（defaultValues 注入）→ createBugFn 透传 runCaseId 同事务
+// 回写 RunCase.bugId；pendingConfirm 不传——手动转单不过 AI 起草确认闸门（列默认 false）。
+// 成员/项目/标签花名册在点击时懒加载（BUG 列表路由同款三 serverFn，run 详情页零预取成本）。
+import { useCallback, useState } from "react";
+import { Bug as BugIcon } from "lucide-react";
+import { Button } from "@allbluecn/ui/button";
+import { CreateBugDialog, type CreateBugDialogDefaults } from "@/components/bug/create-bug-dialog";
+import type { ReproduceSteps } from "@/components/bug/types";
+import { listUsersBriefFn, listLabelsFn } from "@/server/serverFns/story";
+import { listProjectsBriefFn } from "@/server/serverFns/project";
+import type { UserBrief } from "@/components/story/types";
+import type {
+  RunCaseExecutionDetail,
+  RunCaseSummary,
+} from "@/server/serverFns/testcase/types";
+import { m } from "@/paraglide/messages.js";
+import { toastError } from "@/lib/toast-error";
+
+/**
+ * identifier（形如 STORY-TC1，由 testcase-crud 统一发号 "-TC{seq}"）→ seq 令牌 "TC1"。
+ * 非 -TC 结尾兜底取末段（历史数据容错），保证 title 始终带方括号可追溯标记。
+ */
+export function extractCaseSeqToken(identifier: string): string {
+  const tc = /-TC(\d+)$/i.exec(identifier);
+  if (tc) return `TC${tc[1]}`;
+  const tail = /-([^-\s]+)$/.exec(identifier);
+  return (tail?.[1] ?? identifier).toUpperCase();
+}
+
+/**
+ * 转单预填组装（纯函数，测试钉死）：
+ * - title：`[TC{seq}] {快照标题}`
+ * - reproduceSteps.steps：快照同构直拷（结构拷贝非引用，失败步之后的步骤保留）
+ * - reproduceSteps.actualResult：失败步 actual（status=fail 且非空，按 order 升序换行拼接）
+ * - storyId：继承关联用例的 storyId
+ */
+export function buildConvertBugDefaults(
+  runCase: RunCaseSummary,
+  execution: RunCaseExecutionDetail | null,
+): CreateBugDialogDefaults {
+  const snapshot = runCase.caseSnapshot;
+  const failedActuals = (execution?.stepResults ?? [])
+    .filter((r) => r.status === "fail" && r.actual?.trim())
+    .sort((a, b) => a.order - b.order)
+    .map((r) => r.actual!.trim());
+  const steps = snapshot.steps.steps.map((step) => ({
+    order: step.order,
+    action: step.action,
+    ...(step.expected !== undefined ? { expected: step.expected } : {}),
+  }));
+  const reproduceSteps: ReproduceSteps = {
+    steps,
+    ...(failedActuals.length > 0 ? { actualResult: failedActuals.join("\n") } : {}),
+  };
+  return {
+    title: `[${extractCaseSeqToken(runCase.caseIdentifier)}] ${snapshot.title}`,
+    reproduceSteps,
+    storyId: runCase.caseStoryId,
+  };
+}
+
+interface BugRoster {
+  users: UserBrief[];
+  projects: { id: string; name: string; displayId: string | null; icon: string }[];
+  labels: { id: string; name: string; color: string }[];
+}
+
+interface ConvertBugButtonProps {
+  runCase: RunCaseSummary;
+  /** 执行负载（失败步 actual 取数源；未加载完成时无 actual 可预填，不阻断转单） */
+  execution: RunCaseExecutionDetail | null;
+  /** 所属项目 id（BUG 落该项目 + 成员花名册圈定） */
+  runProjectId: string;
+  /** 创建成功上抛（父层回写 cases 内该用例的 bugId → 按钮自消失） */
+  onConverted: (bugId: string) => void;
+}
+
+export function ConvertBugButton({ runCase, execution, runProjectId, onConverted }: ConvertBugButtonProps) {
+  const [roster, setRoster] = useState<BugRoster | null>(null);
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [preparing, setPreparing] = useState(false);
+
+  // 自闸门：仅整单失败且未关联 BUG 的用例可转单（retest 覆盖场景等再失败后重新可转）
+  const visible = runCase.status === "failed" && !runCase.bugId;
+
+  const openDialog = useCallback(async () => {
+    if (preparing) return;
+    setPreparing(true);
+    try {
+      const [users, projects, labels] = await Promise.all([
+        listUsersBriefFn(),
+        listProjectsBriefFn(),
+        listLabelsFn(),
+      ]);
+      setRoster({ users, projects, labels });
+      setDialogOpen(true);
+    } catch (e) {
+      toastError(e, m.testcase_run_convertBug_prepareFailed());
+    } finally {
+      setPreparing(false);
+    }
+  }, [preparing]);
+
+  if (!visible) return null;
+
+  return (
+    <>
+      <Button
+        type="button"
+        variant="outline"
+        size="sm"
+        className="h-7 gap-1.5 px-2.5 text-xs"
+        disabled={preparing}
+        data-testid="convert-bug-button"
+        onClick={() => void openDialog()}
+      >
+        <BugIcon className="size-3.5" />
+        {preparing ? m.testcase_run_convertBug_preparing() : m.testcase_run_convertBug()}
+      </Button>
+      {dialogOpen && roster && (
+        <CreateBugDialog
+          open={dialogOpen}
+          onOpenChange={setDialogOpen}
+          users={roster.users}
+          projects={roster.projects}
+          labels={roster.labels}
+          initialProjectId={runProjectId}
+          defaultValues={{
+            ...buildConvertBugDefaults(runCase, execution),
+            source: "test_run",
+            runCaseId: runCase.id,
+          }}
+          onSuccess={(bug) => {
+            onConverted(bug.id);
+          }}
+        />
+      )}
+    </>
+  );
+}

package/src/components/testcase/runs/failure-list.tsx

@@ -0,0 +1,165 @@
+// 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/>.
+
+// 归因分组失败清单（任务 36，规格 §12「失败清单（归因分组）」）：listRunFailuresFn
+// 行按 triage.category 分组（六值组 + 未归因组收 triage=null 的人工判失败）。取数
+// useServerFn 直调 + 本地状态（run 详情页 getRunCaseFn 同款，无 react-query）；
+// 加载中静默、失败显错误文案、空清单显空态。
+import { useEffect, useState } from "react";
+import { AlertCircle, Info } from "lucide-react";
+import { Badge } from "@allbluecn/ui/badge";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@allbluecn/ui/tooltip";
+import { listRunFailuresFn } from "@/server/serverFns/testcase/stats";
+import type { RunFailureCategory, RunFailureItem } from "@/server/serverFns/testcase/types";
+import { m } from "@/paraglide/messages.js";
+
+/** 分组固定顺序：六归因值 + 未归因收尾（triage=null） */
+const GROUP_ORDER: (RunFailureCategory | "untriaged")[] = [
+  "frontend_error",
+  "api_error",
+  "assertion_mismatch",
+  "env_issue",
+  "data_issue",
+  "unknown",
+  "untriaged",
+];
+
+const GROUP_LABEL: Record<RunFailureCategory | "untriaged", () => string> = {
+  frontend_error: m.testcase_matrix_category_frontend_error,
+  api_error: m.testcase_matrix_category_api_error,
+  assertion_mismatch: m.testcase_matrix_category_assertion_mismatch,
+  env_issue: m.testcase_matrix_category_env_issue,
+  data_issue: m.testcase_matrix_category_data_issue,
+  unknown: m.testcase_matrix_category_unknown,
+  untriaged: m.testcase_matrix_category_untriaged,
+};
+
+function groupOf(item: RunFailureItem): RunFailureCategory | "untriaged" {
+  return item.triage?.category ?? "untriaged";
+}
+
+export function FailureList({ runId }: { runId: string }) {
+  const [items, setItems] = useState<RunFailureItem[] | null>(null);
+  const [failed, setFailed] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    listRunFailuresFn({ data: { id: runId } })
+      .then((res) => {
+        if (!cancelled) setItems(res.items);
+      })
+      .catch(() => {
+        if (!cancelled) setFailed(true);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [runId]);
+
+  if (failed) {
+    return (
+      <div
+        className="flex items-center gap-2 rounded-lg border border-border px-3 py-3 text-sm text-muted-foreground"
+        data-testid="failure-list-error"
+      >
+        <AlertCircle className="size-4 shrink-0" />
+        {m.testcase_matrix_failuresLoadFailed()}
+      </div>
+    );
+  }
+  if (items === null) return null;
+  if (items.length === 0) {
+    return (
+      <div
+        className="rounded-lg border border-border px-3 py-3 text-sm text-muted-foreground"
+        data-testid="failure-list-empty"
+      >
+        {m.testcase_matrix_failuresEmpty()}
+      </div>
+    );
+  }
+
+  const groups = GROUP_ORDER.map((key) => ({
+    key,
+    rows: items.filter((item) => groupOf(item) === key),
+  })).filter((group) => group.rows.length > 0);
+
+  return (
+    <div className="rounded-lg border border-border" data-testid="failure-list">
+      <div className="border-b border-border px-3 py-2 text-sm font-semibold">
+        {m.testcase_matrix_failuresTitle()}
+      </div>
+      <div className="flex flex-col">
+        {groups.map((group) => (
+          <div
+            key={group.key}
+            data-testid={`failure-group-${group.key}`}
+            className="border-b border-border/40 px-3 py-2 last:border-b-0"
+          >
+            <div className="mb-1.5 flex items-center gap-2">
+              <span className="text-xs font-medium">{GROUP_LABEL[group.key]()}</span>
+              <Badge variant="outline" className="px-1.5 text-xs" data-testid={`failure-group-${group.key}-count`}>
+                {group.rows.length}
+              </Badge>
+            </div>
+            <div className="flex flex-col gap-1">
+              {group.rows.map((row) => (
+                <div
+                  key={row.id}
+                  data-testid={`failure-row-${row.id}`}
+                  className="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs"
+                >
+                  <span className="shrink-0 text-muted-foreground">{row.identifier}</span>
+                  <span className="min-w-0 truncate">{row.title}</span>
+                  {row.flaky ? (
+                    <Badge variant="outline" className="px-1.5 text-[10px] uppercase">
+                      flaky
+                    </Badge>
+                  ) : null}
+                  {row.triage ? (
+                    <span className="shrink-0 text-muted-foreground tabular-nums">
+                      {m.testcase_matrix_triage_confidence({
+                        confidence: Math.round(row.triage.confidence * 100),
+                      })}
+                    </span>
+                  ) : null}
+                  {row.triage && row.triage.evidence.length > 0 ? (
+                    <Tooltip>
+                      <TooltipTrigger
+                        render={
+                          <span
+                            className="flex shrink-0 cursor-help items-center text-muted-foreground"
+                            aria-label={m.testcase_matrix_evidenceLabel()}
+                          />
+                        }
+                      >
+                        <Info className="size-3" />
+                      </TooltipTrigger>
+                      <TooltipContent className="max-w-80 whitespace-pre-wrap">
+                        {row.triage.evidence.join("\n")}
+                      </TooltipContent>
+                    </Tooltip>
+                  ) : null}
+                </div>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/components/testcase/runs/pending-bugs.tsx

@@ -0,0 +1,125 @@
+// 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/>.
+
+// 执行批次「待确认 Bug」清单（任务 34，规格 Q2 确认闸门）：AI 归因后自动起草、
+// pendingConfirm=true 的 BUG 按 run 圈定展示。确认提交（pendingConfirm→false）后
+// 进入 BUG 常规默认列表（buildListWhere 默认过滤反向衔接）。清单为空时整块不渲染
+// （autoSubmitTestBugs=true 直提的项目天然恒空）。忽略动作 MVP 不做（规格「仅计数」，
+// 无落点表）；误报可走 BUG 详情手动归档。
+import { useCallback, useEffect, useState } from "react";
+import { Bug as BugIcon, CircleCheck } from "lucide-react";
+import { Button } from "@allbluecn/ui/button";
+import { toast } from "@allbluecn/ui/toast";
+import { Badge } from "@allbluecn/ui/badge";
+import {
+  confirmTestRunBugFn,
+  listPendingTestRunBugsFn,
+} from "@/server/serverFns/bug/test-bug-confirm";
+import { m } from "@/paraglide/messages.js";
+import { toastError } from "@/lib/toast-error";
+
+interface PendingBugItem {
+  id: string;
+  identifier: string;
+  title: string;
+  severity: string;
+  state: string;
+  createdAt: string;
+}
+
+export function PendingBugsPanel({ runId }: { runId: string }) {
+  const [items, setItems] = useState<PendingBugItem[] | null>(null);
+  const [confirmingId, setConfirmingId] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    listPendingTestRunBugsFn({ data: { runId } })
+      .then((rows) => {
+        if (!cancelled) setItems(rows);
+      })
+      .catch(() => {
+        // 清单加载失败：提示且整块隐藏（闸门 BUG 仍可在 BUG 显式视图中人工处理）
+        if (!cancelled) {
+          setItems([]);
+          toast.error(m.testcase_run_pendingBugs_loadFailed());
+        }
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [runId]);
+
+  const handleConfirm = useCallback(async (bugId: string) => {
+    if (confirmingId) return;
+    setConfirmingId(bugId);
+    try {
+      await confirmTestRunBugFn({ data: { bugId } });
+      setItems((prev) => (prev ?? []).filter((item) => item.id !== bugId));
+      toast.success(m.testcase_run_pendingBugs_confirmed());
+    } catch (err) {
+      toastError(err, m.testcase_run_pendingBugs_confirmFailed());
+    } finally {
+      setConfirmingId(null);
+    }
+  }, [confirmingId]);
+
+  if (items === null || items.length === 0) return null;
+
+  return (
+    <div
+      className="rounded-lg border border-amber-500/40 bg-amber-500/5 px-4 py-3"
+      data-testid="pending-bugs-panel"
+    >
+      <div className="mb-2 flex items-center gap-2 text-sm font-medium">
+        <BugIcon className="size-4 text-amber-600" />
+        {m.testcase_run_pendingBugs_title()}
+        <span className="text-muted-foreground">({items.length})</span>
+      </div>
+      <p className="mb-3 text-xs text-muted-foreground">
+        {m.testcase_run_pendingBugs_desc()}
+      </p>
+      <div className="space-y-2">
+        {items.map((item) => (
+          <div
+            key={item.id}
+            className="flex items-center gap-3 rounded-md border border-border bg-background px-3 py-2"
+            data-testid="pending-bug-item"
+          >
+            <span className="shrink-0 font-mono text-xs text-muted-foreground">
+              {item.identifier}
+            </span>
+            <span className="min-w-0 flex-1 truncate text-sm">{item.title}</span>
+            <Badge variant="outline" className="shrink-0 text-xs uppercase">
+              {item.severity}
+            </Badge>
+            <Button
+              type="button"
+              size="sm"
+              className="h-7 shrink-0 gap-1 px-2.5 text-xs"
+              disabled={confirmingId !== null}
+              data-testid={`pending-bug-confirm-${item.id}`}
+              onClick={() => void handleConfirm(item.id)}
+            >
+              <CircleCheck className="size-3.5" />
+              {m.testcase_run_pendingBugs_confirm()}
+            </Button>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/components/testcase/runs/progress-bar.tsx

@@ -0,0 +1,82 @@
+// 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/>.
+
+// 执行进度条（任务 16）：cases 状态集合 → x/y 已执行 + 分态计数图例。
+// 计数复用 server/testcase/run-summary 纯函数（无 DB 依赖，客户端安全）；
+// 状态由父层在 reportResultFn 成功后更新 cases，本组件纯受控实时呈现。
+import { Progress } from "@/components/ui/progress";
+import { RUN_CASE_STATUS_VALUES, type RunCaseStatus } from "@/server/serverFns/testcase/constants";
+import { summarizeRunStatuses } from "@/server/testcase/run-summary";
+import { m } from "@/paraglide/messages.js";
+
+interface RunProgressBarProps {
+  cases: Pick<RunCaseSummaryLike, "status">[];
+}
+
+/** 最小结构类型（避免与 RunCaseSummary 循环依赖；父层直接传 RunCaseSummary[] 兼容） */
+interface RunCaseSummaryLike {
+  status: RunCaseStatus;
+}
+
+const STATUS_LABEL: Record<RunCaseStatus, () => string> = {
+  untested: m.testcase_run_caseStatus_untested,
+  passed: m.testcase_run_caseStatus_passed,
+  failed: m.testcase_run_caseStatus_failed,
+  blocked: m.testcase_run_caseStatus_blocked,
+  skipped: m.testcase_run_caseStatus_skipped,
+  retest: m.testcase_run_caseStatus_retest,
+};
+
+const STATUS_TESTID: Record<RunCaseStatus, string> = {
+  untested: "run-progress-untested",
+  passed: "run-progress-passed",
+  failed: "run-progress-failed",
+  blocked: "run-progress-blocked",
+  skipped: "run-progress-skipped",
+  retest: "run-progress-retest",
+};
+
+export function RunProgressBar({ cases }: RunProgressBarProps) {
+  const counts = summarizeRunStatuses(cases.map((c) => c.status));
+  // RunSummaryCounts 无 untested 独立键（untested 只进 total）——差额反推
+  const untested =
+    counts.total - counts.passed - counts.failed - counts.blocked - counts.skipped - counts.retest;
+  const executed = counts.total - untested;
+  const percent = counts.total === 0 ? 0 : (executed / counts.total) * 100;
+
+  return (
+    <div className="flex flex-col gap-1.5" data-testid="run-progress">
+      <div className="flex items-center gap-2 text-xs text-muted-foreground">
+        <Progress value={percent} className="h-1.5 flex-1" />
+        <span data-testid="run-progress-count" className="shrink-0 font-medium tabular-nums">
+          {m.testcase_run_progress_executed({ completed: executed, total: counts.total })}
+        </span>
+      </div>
+      <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
+        {RUN_CASE_STATUS_VALUES.map((status) => (
+          <span
+            key={status}
+            data-testid={STATUS_TESTID[status]}
+            className="text-xs text-muted-foreground"
+          >
+            {STATUS_LABEL[status]()} {status === "untested" ? untested : counts[status]}
+          </span>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/components/testcase/runs/run-header.tsx

@@ -0,0 +1,106 @@
+// 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/>.
+
+// 执行批次头部（任务 16）：返回链接（有计划回计划详情，否则回用例库）+ 批次名 +
+// 状态徽章（running/completed/aborted）+ 执行方式/目标环境/所属计划 + 进度条。
+import { Link } from "@tanstack/react-router";
+import { ArrowLeft } from "lucide-react";
+import { Badge } from "@allbluecn/ui/badge";
+import type { RunCaseStatus, RunExecutorType, TestRunStatus } from "@/server/serverFns/testcase/constants";
+import type { RunCaseSummary, TestRunSummary } from "@/server/serverFns/testcase/types";
+import { m } from "@/paraglide/messages.js";
+import { RunProgressBar } from "./progress-bar";
+import { RunSummary } from "./run-summary";
+
+const RUN_STATUS_LABEL: Record<TestRunStatus, () => string> = {
+  running: m.testcase_run_status_running,
+  completed: m.testcase_run_status_completed,
+  aborted: m.testcase_run_status_aborted,
+};
+
+const EXECUTOR_LABEL: Record<RunExecutorType, () => string> = {
+  human: m.testcase_run_executorType_human,
+  ai_agent: m.testcase_run_executorType_ai_agent,
+  automation_code: m.testcase_run_executorType_automation_code,
+  mixed: m.testcase_run_executorType_mixed,
+};
+
+export const RUN_CASE_BADGE_CLASS: Record<RunCaseStatus, string> = {
+  untested: "bg-muted text-muted-foreground",
+  passed: "bg-emerald-500/10 text-emerald-700 dark:text-emerald-400",
+  failed: "bg-destructive/10 text-destructive",
+  blocked: "bg-amber-500/10 text-amber-700 dark:text-amber-400",
+  skipped: "bg-muted text-muted-foreground",
+  retest: "bg-blue-500/10 text-blue-700 dark:text-blue-400",
+};
+
+interface RunHeaderProps {
+  run: TestRunSummary;
+  cases: Pick<RunCaseSummary, "status">[];
+}
+
+export function RunHeader({ run, cases }: RunHeaderProps) {
+  return (
+    <div className="flex shrink-0 flex-col gap-3 border-b border-border pb-4">
+      <div className="flex items-center gap-2">
+        <Link
+          to={run.planId ? "/test-cases/plans/$planId" : "/test-cases"}
+          params={run.planId ? { planId: run.planId } : undefined}
+          aria-label={m.testcase_run_back()}
+          className="flex size-8 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground"
+        >
+          <ArrowLeft className="size-4" />
+        </Link>
+        <h1 className="min-w-0 flex-1 truncate text-lg font-semibold" data-testid="run-header-name">
+          {run.name}
+        </h1>
+        <Badge
+          variant={run.status === "running" ? "default" : "outline"}
+          className="shrink-0 text-xs"
+          data-testid="run-header-status"
+        >
+          {RUN_STATUS_LABEL[run.status]()}
+        </Badge>
+      </div>
+
+      <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-muted-foreground">
+        <span data-testid="run-header-executor">{EXECUTOR_LABEL[run.executorType]()}</span>
+        {run.targetEnv ? (
+          <span data-testid="run-header-env">
+            {m.testcase_run_envLabel()}：{run.targetEnv}
+          </span>
+        ) : null}
+        {run.plan ? (
+          <Link
+            to="/test-cases/plans/$planId"
+            params={{ planId: run.plan.id }}
+            className="text-primary hover:underline"
+            data-testid="run-header-plan"
+          >
+            {m.testcase_run_planLabel()}：{run.plan.name}
+          </Link>
+        ) : null}
+        <span data-testid="run-header-case-count">{m.testcase_run_caseCount({ count: cases.length })}</span>
+      </div>
+
+      <RunProgressBar cases={cases} />
+
+      {/* 完成落账汇总（任务 18）：running/aborted 无 summary 不渲染 */}
+      {run.summary ? <RunSummary summary={run.summary} /> : null}
+    </div>
+  );
+}