From cbdb2b2e1c2ca7e590aef9c2c219cf3fbf6541ac Mon Sep 17 00:00:00 2001
From: tinkle <tinkle@tinkle.community>
Date: Thu, 30 Oct 2025 18:11:15 +0800
Subject: [PATCH] UI: Display position details in Trade History
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Frontend changes:
- Update TradeOutcome interface with new fields:
  - quantity: Position size
  - leverage: Leverage multiplier
  - position_value: Total position value
  - margin_used: Margin required

- Add position details display in trade cards:
  - Quantity (with 4 decimal precision)
  - Leverage (shown as "50x")
  - Position Value (shown as "$10000.00")
  - Margin Used (shown as "$200.00")

Visual design:
- 2x2 grid layout for position details
- Color coding: Leverage in gold, Margin in purple
- Conditional rendering with fallback "-" for missing data

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 web/src/components/AILearning.tsx | 32 +++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/web/src/components/AILearning.tsx b/web/src/components/AILearning.tsx
index 8ef1a840..20da61d2 100644
--- a/web/src/components/AILearning.tsx
+++ b/web/src/components/AILearning.tsx
@@ -6,8 +6,12 @@ import { api } from '../lib/api';
 interface TradeOutcome {
   symbol: string;
   side: string;
+  quantity: number;
+  leverage: number;
   open_price: number;
   close_price: number;
+  position_value: number;
+  margin_used: number;
   pn_l: number;
   pn_l_pct: number;
   duration: string;
@@ -558,6 +562,34 @@ export default function AILearning({ traderId }: AILearningProps) {
                       </div>
                     </div>
 
+                    {/* Position Details */}
+                    <div className="grid grid-cols-2 gap-2 mb-3 text-xs">
+                      <div>
+                        <div style={{ color: '#94A3B8' }}>Quantity</div>
+                        <div className="font-mono font-semibold" style={{ color: '#CBD5E1' }}>
+                          {trade.quantity ? trade.quantity.toFixed(4) : '-'}
+                        </div>
+                      </div>
+                      <div className="text-right">
+                        <div style={{ color: '#94A3B8' }}>Leverage</div>
+                        <div className="font-mono font-semibold" style={{ color: '#FCD34D' }}>
+                          {trade.leverage ? `${trade.leverage}x` : '-'}
+                        </div>
+                      </div>
+                      <div>
+                        <div style={{ color: '#94A3B8' }}>Position Value</div>
+                        <div className="font-mono font-semibold" style={{ color: '#CBD5E1' }}>
+                          {trade.position_value ? `$${trade.position_value.toFixed(2)}` : '-'}
+                        </div>
+                      </div>
+                      <div className="text-right">
+                        <div style={{ color: '#94A3B8' }}>Margin Used</div>
+                        <div className="font-mono font-semibold" style={{ color: '#A78BFA' }}>
+                          {trade.margin_used ? `$${trade.margin_used.toFixed(2)}` : '-'}
+                        </div>
+                      </div>
+                    </div>
+
                     <div className="rounded-lg p-2 mb-2" style={{
                       background: isProfitable ? 'rgba(16, 185, 129, 0.1)' : 'rgba(248, 113, 113, 0.1)'
                     }}>