diff --git a/apps/web/src/components/approval/approval-card.tsx b/apps/web/src/components/approval/approval-card.tsx
index 27c05abf..5e668b69 100644
--- a/apps/web/src/components/approval/approval-card.tsx
+++ b/apps/web/src/components/approval/approval-card.tsx
@@ -435,12 +435,29 @@ export function ApprovalCard({
         </div>
       </GlassCardHeader>
 
-      {/* Title & Description */}
+      {/* Title & Description - UX 優化: 分離標題與命令 */}
       <div className="mb-5">
+        {/* 主標題: 只顯示 | 前的動作描述 */}
         <GlassCardTitle className="text-nothing-gray-900 mb-2">
-          {request.action}
+          {request.action.includes('|')
+            ? request.action.split('|')[0].trim()
+            : request.action}
         </GlassCardTitle>
-        <p className="text-sm text-nothing-gray-600">{request.description}</p>
+
+        {/* kubectl 命令: 獨立顯示，可複製 */}
+        {request.action.includes('|') && (
+          <code className="block mb-3 px-3 py-2 bg-nothing-gray-100 rounded-lg text-xs font-mono text-nothing-gray-700 break-all border border-nothing-gray-200">
+            {request.action.split('|')[1].trim()}
+          </code>
+        )}
+
+        {/* 描述: 清理 AI provider 標籤 */}
+        <p className="text-sm text-nothing-gray-600">
+          {request.description
+            .replace(/\[AI:\s*\w+\]\s*/g, '')  // 移除 [AI: xxx]
+            .replace(/🤖\s*AI\s*仲裁:\s*/g, '')  // 移除 AI 仲裁前綴
+            .trim()}
+        </p>
       </div>
 
       <GlassCardContent>