From 36b75bbfc8361b7687c4bec81d322c5c4efec2e4 Mon Sep 17 00:00:00 2001
From: PorunC <09982.misaka@gmail.com>
Date: Wed, 29 Oct 2025 20:30:17 +0800
Subject: [PATCH] Fix: Improve frontend code quality and null safety - Remove
 unused variables and imports - Add null/undefined safety checks for account
 data display - Use optional chaining and nullish coalescing for safer data
 access - Remove unused "Input Prompt" display section (keeping CoT trace) -
 Fix TypeScript warnings and improve type safety Changes: - App.tsx: Add null
 checks for account fields, remove unused stats prop and input prompt display
 - ComparisonChart.tsx: Remove unused imports and variables This improves code
 quality without affecting functionality. Co-Authored-By: tinkle-community
 <tinklefund@gmail.com>

---
 web/src/App.tsx                        | 35 ++++++--------------------
 web/src/components/ComparisonChart.tsx |  4 +--
 2 files changed, 9 insertions(+), 30 deletions(-)

diff --git a/web/src/App.tsx b/web/src/App.tsx
index 026c3e2a..57c2e2f5 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -290,7 +290,6 @@ function TraderDetailsPage({
   account,
   positions,
   decisions,
-  stats,
   lastUpdate,
   language,
 }: {
@@ -369,25 +368,25 @@ function TraderDetailsPage({
       <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
         <StatCard
           title={t('totalEquity', language)}
-          value={`${account?.total_equity.toFixed(2) || '0.00'} USDT`}
+          value={`${account?.total_equity?.toFixed(2) || '0.00'} USDT`}
           change={account?.total_pnl_pct || 0}
-          positive={account ? account.total_pnl > 0 : false}
+          positive={(account?.total_pnl ?? 0) > 0}
         />
         <StatCard
           title={t('availableBalance', language)}
-          value={`${account?.available_balance.toFixed(2) || '0.00'} USDT`}
-          subtitle={`${((account?.available_balance / account?.total_equity) * 100 || 0).toFixed(1)}% ${t('free', language)}`}
+          value={`${account?.available_balance?.toFixed(2) || '0.00'} USDT`}
+          subtitle={`${(account?.available_balance && account?.total_equity ? ((account.available_balance / account.total_equity) * 100).toFixed(1) : '0.0')}% ${t('free', language)}`}
         />
         <StatCard
           title={t('totalPnL', language)}
-          value={`${account?.total_pnl >= 0 ? '+' : ''}${account?.total_pnl.toFixed(2) || '0.00'} USDT`}
+          value={`${account?.total_pnl !== undefined && account.total_pnl >= 0 ? '+' : ''}${account?.total_pnl?.toFixed(2) || '0.00'} USDT`}
           change={account?.total_pnl_pct || 0}
-          positive={account ? account.total_pnl >= 0 : false}
+          positive={(account?.total_pnl ?? 0) >= 0}
         />
         <StatCard
           title={t('positions', language)}
           value={`${account?.position_count || 0}`}
-          subtitle={`${t('margin', language)}: ${account?.margin_used_pct.toFixed(1) || '0.0'}%`}
+          subtitle={`${t('margin', language)}: ${account?.margin_used_pct?.toFixed(1) || '0.0'}%`}
         />
       </div>
 
@@ -559,7 +558,6 @@ function StatCard({
 
 // Decision Card Component with CoT Trace - Binance Style
 function DecisionCard({ decision, language }: { decision: DecisionRecord; language: Language }) {
-  const [showInput, setShowInput] = useState(false);
   const [showCoT, setShowCoT] = useState(false);
 
   return (
@@ -583,25 +581,6 @@ function DecisionCard({ decision, language }: { decision: DecisionRecord; langua
         </div>
       </div>
 
-      {/* AI Input Prompt - Collapsible */}
-      {decision.input_prompt && (
-        <div className="mb-3">
-          <button
-            onClick={() => setShowInput(!showInput)}
-            className="flex items-center gap-2 text-sm transition-colors"
-            style={{ color: '#8B5CF6' }}
-          >
-            <span className="font-semibold">📥 {t('inputPrompt', language)}</span>
-            <span className="text-xs">{showInput ? t('collapse', language) : t('expand', language)}</span>
-          </button>
-          {showInput && (
-            <div className="mt-2 rounded p-4 text-sm font-mono whitespace-pre-wrap max-h-96 overflow-y-auto" style={{ background: '#0B0E11', border: '1px solid #2B3139', color: '#EAECEF' }}>
-              {decision.input_prompt}
-            </div>
-          )}
-        </div>
-      )}
-
       {/* AI Chain of Thought - Collapsible */}
       {decision.cot_trace && (
         <div className="mb-3">
diff --git a/web/src/components/ComparisonChart.tsx b/web/src/components/ComparisonChart.tsx
index 3fdc9dcc..ee94ef00 100644
--- a/web/src/components/ComparisonChart.tsx
+++ b/web/src/components/ComparisonChart.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useMemo } from 'react';
+import { useMemo } from 'react';
 import {
   LineChart,
   Line,
@@ -275,7 +275,7 @@ export function ComparisonChart({ traders }: ComparisonChartProps) {
             }}
           />
 
-          {traders.map((trader, index) => (
+          {traders.map((trader) => (
             <Line
               key={trader.trader_id}
               type="monotone"