From 38378276f3b1ff9325fbaed102f662479fb8a7d4 Mon Sep 17 00:00:00 2001
From: OG T <ogt@WOOOMacMiniM4.local>
Date: Tue, 24 Mar 2026 23:44:51 +0800
Subject: [PATCH] =?UTF-8?q?fix(web):=20ApprovalCard=20UX=20=E5=84=AA?=
 =?UTF-8?q?=E5=8C=96=20-=20=E6=A8=99=E9=A1=8C=E8=88=87=E5=91=BD=E4=BB=A4?=
 =?UTF-8?q?=E5=88=86=E9=9B=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../src/components/approval/approval-card.tsx | 23 ++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

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>