From beb6a227db52a7cdb84b05f851aabbce0affe987 Mon Sep 17 00:00:00 2001
From: OG T <ogt@WOOOMacMiniM4.local>
Date: Wed, 1 Apr 2026 20:05:18 +0800
Subject: [PATCH] feat(ai): replace dragon arm SVG with NemoNodeAnimation in
 OpenClawPanel

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 apps/web/src/components/ai/openclaw-panel.tsx | 32 +++++++++++++------
 1 file changed, 22 insertions(+), 10 deletions(-)

diff --git a/apps/web/src/components/ai/openclaw-panel.tsx b/apps/web/src/components/ai/openclaw-panel.tsx
index b84dba51..cfb6a451 100644
--- a/apps/web/src/components/ai/openclaw-panel.tsx
+++ b/apps/web/src/components/ai/openclaw-panel.tsx
@@ -17,6 +17,7 @@ import { useState, useEffect } from 'react'
 import { useTranslations } from 'next-intl'
 import { cn } from '@/lib/utils'
 import { Sparkles } from 'lucide-react'
+import { NemoNodeAnimation } from './nemo-node-animation'
 
 // =============================================================================
 // Types
@@ -373,17 +374,28 @@ export function OpenClawPanel({
         )}
       </div>
 
-      {/* NemoClaw 3D Ceramic Visualization */}
-      <div className="relative w-32 h-32 mx-auto mb-4">
-        <NemoClaw isActive={isActive} isPulsing={isPulsing} />
+      {/* NemoClaw 截圖風格動畫 */}
+      <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12, padding: '10px 12px' }}>
+        <NemoNodeAnimation size={72} />
 
-        {/* Sparkle effects when active */}
-        {isActive && (
-          <>
-            <Sparkles className="absolute -top-1 -right-1 w-4 h-4 text-claw-blue/60 animate-pulse" />
-            <Sparkles className="absolute -bottom-1 -left-1 w-3 h-3 text-claw-blue/40 animate-pulse" style={{ animationDelay: '0.3s' }} />
-          </>
-        )}
+        {/* 右側文字 */}
+        <div style={{ flex: 1 }}>
+          <div style={{ fontSize: 11, fontWeight: 700, color: '#141413', marginBottom: 2 }}>
+            NemoClaw
+          </div>
+          <div style={{ fontSize: 9, color: '#87867f', marginBottom: 6 }}>
+            {STATUS_MESSAGES[status]}
+          </div>
+          <span style={{
+            fontSize: 8, padding: '2px 8px',
+            background: 'rgba(74,144,217,0.08)',
+            border: '0.5px solid rgba(74,144,217,0.3)',
+            borderRadius: 10,
+            color: '#4A90D9',
+          }}>
+            OpenClaw Pipeline
+          </span>
+        </div>
       </div>
 
       {/* Status Display - VT323 Dot Matrix Font */}