fix(web): 链相位语义色/失败可重试 + 模板填入中文标签/删除可撤销/工具卡文案 + 模板库 PageHeader

apps/web/components/chain/ChainProgress.tsx

@@ -1,6 +1,8 @@
 "use client";
 
+import { Badge } from "@/components/ui/Badge";
 import { Card } from "@/components/ui/Card";
+import type { BadgeVariant } from "@/lib/ui/variants";
 import type { ChainPhase, ChainResultView } from "@/lib/chain/chain";
 
 interface ChainProgressProps {
@@ -16,6 +18,14 @@ const PHASE_LABEL: Record<ChainPhase, string> = {
   failed: "已失败",
 };
 
+// 相位 → 语义色：失败用危险色而非朱砂品牌色，运行/等待/完成各取信息/警示/成功。
+const PHASE_VARIANT: Record<ChainPhase, BadgeVariant> = {
+  running: "info",
+  awaiting: "warning",
+  completed: "success",
+  failed: "danger",
+};
+
 // 链进度视图：相位徽标 + 进度条 + 已写章号清单（token/正文绝不展示，result 只含元数据）。
 export function ChainProgress({ phase, progress, result }: ChainProgressProps) {
   return (
@@ -26,23 +36,22 @@ export function ChainProgress({ phase, progress, result }: ChainProgressProps) {
     >
       <div className="flex items-center justify-between gap-3">
         <h2 className="font-serif text-lg text-ink">链进度</h2>
-        <span
-          className="rounded bg-cinnabar/10 px-2 py-0.5 text-xs text-cinnabar"
-          aria-live="polite"
-        >
+        <Badge variant={PHASE_VARIANT[phase]} aria-live="polite">
           {PHASE_LABEL[phase]}
-        </span>
+        </Badge>
       </div>
 
       <div
         className="h-2 w-full overflow-hidden rounded bg-bg"
         role="progressbar"
+        aria-label="链写章进度"
         aria-valuenow={progress}
         aria-valuemin={0}
         aria-valuemax={100}
+        aria-valuetext={`已完成 ${result.written.length} 章`}
       >
         <div
-          className="h-full bg-cinnabar transition-all"
+          className="h-full bg-cinnabar motion-safe:transition-all"
           style={{ width: `${progress}%` }}
         />
       </div>