From 354bf7a6f2ad27440fe29a7852bb330a7f5a2c31 Mon Sep 17 00:00:00 2001
From: OG T <ogt@WOOOMacMiniM4.local>
Date: Wed, 1 Apr 2026 19:50:05 +0800
Subject: [PATCH] feat(ai): add NemoNodeAnimation 72x72 SVG with orb-pulse and
 ring-spin

---
 .../src/components/ai/nemo-node-animation.tsx | 98 +++++++++++++++++++
 1 file changed, 98 insertions(+)
 create mode 100644 apps/web/src/components/ai/nemo-node-animation.tsx

diff --git a/apps/web/src/components/ai/nemo-node-animation.tsx b/apps/web/src/components/ai/nemo-node-animation.tsx
new file mode 100644
index 000000000..b48d25eb7
--- /dev/null
+++ b/apps/web/src/components/ai/nemo-node-animation.tsx
@@ -0,0 +1,98 @@
+'use client'
+
+/**
+ * NemoNodeAnimation - NemoClaw 截圖風格節點動畫
+ * ================================================
+ * 72×72 SVG，白底圓形 + 漸層藍球（orb-pulse）
+ * 4 主臂 + 4 斜臂 + 白色端點節點
+ * 虛線旋轉軌道環（ring-spin 12s）
+ * ❌ 禁止使用 openclaw-panel.tsx 的龍蝦臂 SVG
+ */
+
+export function NemoNodeAnimation({ size = 72 }: { size?: number }) {
+  const id = 'nemo-node'
+  return (
+    <>
+      <style>{`
+        @keyframes orb-pulse {
+          0%, 100% { transform: scale(1); opacity: 1; }
+          50%       { transform: scale(1.12); opacity: 0.85; }
+        }
+        @keyframes ring-spin {
+          from { transform: rotate(0deg); }
+          to   { transform: rotate(360deg); }
+        }
+        .orb-pulse-anim {
+          animation: orb-pulse 2s ease-in-out infinite;
+          transform-origin: 36px 36px;
+        }
+        .ring-spin-anim {
+          animation: ring-spin 12s linear infinite;
+          transform-origin: 36px 36px;
+        }
+      `}</style>
+      <svg
+        width={size}
+        height={size}
+        viewBox="0 0 72 72"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <defs>
+          <radialGradient id={`${id}-orbGrad`} cx="40%" cy="35%" r="60%">
+            <stop offset="0%" stopColor="#7AB8F5" />
+            <stop offset="100%" stopColor="#2B6CB0" />
+          </radialGradient>
+        </defs>
+
+        {/* 白底圓形背景 */}
+        <circle cx="36" cy="36" r="34" fill="white" stroke="#c8dcf5" strokeWidth="0.8" />
+
+        {/* 4 主臂（solid #4A90D9，opacity 0.7）*/}
+        <line x1="36" y1="36" x2="36" y2="8"  stroke="#4A90D9" strokeWidth="1.5" opacity="0.7" />
+        <line x1="36" y1="36" x2="64" y2="36" stroke="#4A90D9" strokeWidth="1.5" opacity="0.7" />
+        <line x1="36" y1="36" x2="36" y2="64" stroke="#4A90D9" strokeWidth="1.5" opacity="0.7" />
+        <line x1="36" y1="36" x2="8"  y2="36" stroke="#4A90D9" strokeWidth="1.5" opacity="0.7" />
+
+        {/* 4 斜臂（細，opacity 0.35）*/}
+        <line x1="36" y1="36" x2="56" y2="16" stroke="#4A90D9" strokeWidth="1" opacity="0.35" />
+        <line x1="36" y1="36" x2="56" y2="56" stroke="#4A90D9" strokeWidth="1" opacity="0.35" />
+        <line x1="36" y1="36" x2="16" y2="56" stroke="#4A90D9" strokeWidth="1" opacity="0.35" />
+        <line x1="36" y1="36" x2="16" y2="16" stroke="#4A90D9" strokeWidth="1" opacity="0.35" />
+
+        {/* 虛線旋轉軌道環 */}
+        <circle
+          cx="36" cy="36" r="20"
+          fill="none"
+          stroke="#4A90D9"
+          strokeWidth="0.8"
+          strokeDasharray="3,2.5"
+          opacity="0.5"
+          className="ring-spin-anim"
+        />
+
+        {/* 主臂端點節點（r=3，白底+藍邊）*/}
+        <circle cx="36" cy="8"  r="3" fill="white" stroke="#4A90D9" strokeWidth="1.2" />
+        <circle cx="64" cy="36" r="3" fill="white" stroke="#4A90D9" strokeWidth="1.2" />
+        <circle cx="36" cy="64" r="3" fill="white" stroke="#4A90D9" strokeWidth="1.2" />
+        <circle cx="8"  cy="36" r="3" fill="white" stroke="#4A90D9" strokeWidth="1.2" />
+
+        {/* 斜臂端點節點（r=2，白底+藍邊）*/}
+        <circle cx="56" cy="16" r="2" fill="white" stroke="#4A90D9" strokeWidth="1" />
+        <circle cx="56" cy="56" r="2" fill="white" stroke="#4A90D9" strokeWidth="1" />
+        <circle cx="16" cy="56" r="2" fill="white" stroke="#4A90D9" strokeWidth="1" />
+        <circle cx="16" cy="16" r="2" fill="white" stroke="#4A90D9" strokeWidth="1" />
+
+        {/* 中央漸層藍球（orb-pulse 脈動）*/}
+        <circle
+          cx="36" cy="36" r="9"
+          fill={`url(#${id}-orbGrad)`}
+          className="orb-pulse-anim"
+        />
+        {/* 高光 */}
+        <circle cx="33" cy="33" r="3" fill="white" opacity="0.35" />
+      </svg>
+    </>
+  )
+}
+
+export default NemoNodeAnimation