fix(web): ApprovalCard UX 優化 - 標題與命令分離

問題: action 欄位包含完整 kubectl 命令導致標題過長
     [AI: mock_fallback] 前綴干擾閱讀

修復:
- 主標題只顯示 | 前的動作描述
- kubectl 命令獨立顯示在 code block
- 移除描述中的 [AI: xxx] 和 AI 仲裁前綴

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

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>