From 09c6eb33589ff4427eff3a630934397912db0c55 Mon Sep 17 00:00:00 2001
From: OG T <ogt@WOOOMacMiniM4.local>
Date: Thu, 9 Apr 2026 18:07:53 +0800
Subject: [PATCH] =?UTF-8?q?feat(web):=20S2=20FlowPipeline=20=E9=BE=8D?=
 =?UTF-8?q?=E8=9D=A6=E2=86=92OpenClaw=20icon=20=E2=80=94=20Sprint=205R?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- LobsterSVG 替換為 OpenClawIcon (dashboardicons.com/openclaw PNG)
- 4 種嚴重度渲染全部更新 (P0/P1/P2/P3)
- icon 直接取代圓圈作為活躍步驟標記（非浮動）
- S3 確認: AI 提案橫幅已存在且樣式正確

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/components/incident/flow-pipeline.tsx | 34 ++++++++-----------
 1 file changed, 14 insertions(+), 20 deletions(-)

diff --git a/apps/web/src/components/incident/flow-pipeline.tsx b/apps/web/src/components/incident/flow-pipeline.tsx
index fdbb6f95..978a3d6b 100644
--- a/apps/web/src/components/incident/flow-pipeline.tsx
+++ b/apps/web/src/components/incident/flow-pipeline.tsx
@@ -65,24 +65,18 @@ function getNodeStatus(nodeId: FlowStage, activeStage: FlowStage, isResolved: bo
   return 'pending'
 }
 
-// ── Q版龍蝦 SVG ──────────────────────────────────────────────────────────────
+// ── OpenClaw Icon (取代龍蝦 — Sprint 5R 設計稿批准) ──────────────────────────
+// 來源: https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/png/openclaw.png
 
-function LobsterSVG({ color, size = 18 }: { color: string; size?: number }) {
-  const h = Math.round(size * 20 / 18)
+function OpenClawIcon({ size = 20 }: { size?: number }) {
   return (
-    <svg width={size} height={h} viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <ellipse cx="9" cy="13" rx="5.5" ry="6.5" fill={color} />
-      <circle cx="9" cy="7.5" r="4.5" fill={color} />
-      <circle cx="7" cy="6.5" r="1" fill="#b03a1a" />
-      <circle cx="11" cy="6.5" r="1" fill="#b03a1a" />
-      <path d="M3.5 10 Q1 9 1.5 12 Q2 14 4 13" stroke={color} strokeWidth="1.2" fill="none" strokeLinecap="round"/>
-      <ellipse cx="1.5" cy="12" rx="1.2" ry="1.5" fill={color} transform="rotate(-10 1.5 12)"/>
-      <path d="M14.5 10 Q17 9 16.5 12 Q16 14 14 13" stroke={color} strokeWidth="1.2" fill="none" strokeLinecap="round"/>
-      <ellipse cx="16.5" cy="12" rx="1.2" ry="1.5" fill={color} transform="rotate(10 16.5 12)"/>
-      <path d="M7 3 Q5 1 3 2" stroke="#b03a1a" strokeWidth="0.8" fill="none" strokeLinecap="round"/>
-      <path d="M11 3 Q13 1 15 2" stroke="#b03a1a" strokeWidth="0.8" fill="none" strokeLinecap="round"/>
-      <path d="M6 19 Q9 21 12 19" stroke={color} strokeWidth="1.2" fill="none" strokeLinecap="round"/>
-    </svg>
+    <img
+      src="https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/png/openclaw.png"
+      alt="OpenClaw"
+      width={size}
+      height={size}
+      style={{ borderRadius: '50%' }}
+    />
   )
 }
 
@@ -123,7 +117,7 @@ function PipelineStyleA({ activeStage, isResolved }: { activeStage: FlowStage; i
                 <div style={{ height: 22, display: 'flex', alignItems: 'flex-end', justifyContent: 'center' }}>
                   {isActive && (
                     <div style={{ animation: 'lobster-bob 1.5s ease-in-out infinite' }}>
-                      <LobsterSVG color={color} />
+                      <OpenClawIcon />
                     </div>
                   )}
                 </div>
@@ -208,7 +202,7 @@ function PipelineStyleB({ activeStage, isResolved }: { activeStage: FlowStage; i
               {/* 龍蝦 (active 節點，站在進度條終點上方) */}
               {isActive && (
                 <div style={{ animation: 'lobster-bob 1.5s ease-in-out infinite', marginBottom: 2 }}>
-                  <LobsterSVG color={color} size={16} />
+                  <OpenClawIcon size={16} />
                 </div>
               )}
               {!isActive && <div style={{ height: 20 }} />}
@@ -263,7 +257,7 @@ function PipelineStyleC({ activeStage, isResolved }: { activeStage: FlowStage; i
                 <div style={{ height: 22, display: 'flex', alignItems: 'flex-end', justifyContent: 'center' }}>
                   {isActive && (
                     <div style={{ animation: 'lobster-bob 1.5s ease-in-out infinite' }}>
-                      <LobsterSVG color={color} size={16} />
+                      <OpenClawIcon size={16} />
                     </div>
                   )}
                 </div>
@@ -325,7 +319,7 @@ function PipelineStyleD({ activeStage, isResolved }: { activeStage: FlowStage; i
                 <div style={{ height: 22, display: 'flex', alignItems: 'flex-end', justifyContent: 'center' }}>
                   {isActive && (
                     <div style={{ animation: 'lobster-bob 1.5s ease-in-out infinite' }}>
-                      <LobsterSVG color={color} />
+                      <OpenClawIcon />
                     </div>
                   )}
                 </div>