[OQI-003] feat: Add Settings tab to PaperTradingPanel

- Add Settings tab with account info and reset functionality
- Show initial balance, total trades, open positions
- Reset account confirmation dialog
- Danger zone styling for reset action

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

src/modules/trading/components/PaperTradingPanel.tsx

@@ -10,10 +10,12 @@ import OrderForm from './OrderForm';
 import PositionsList from './PositionsList';
 import TradesHistory from './TradesHistory';
 
-type TabType = 'order' | 'positions' | 'history';
+type TabType = 'order' | 'positions' | 'history' | 'settings';
 
 export default function PaperTradingPanel() {
   const [activeTab, setActiveTab] = useState<TabType>('order');
+  const [resetting, setResetting] = useState(false);
+  const [showResetConfirm, setShowResetConfirm] = useState(false);
 
   // Get state and actions from store
   const {
@@ -31,8 +33,23 @@ export default function PaperTradingPanel() {
     createOrder,
     closePosition,
     initializePaperAccount,
+    resetPaperAccount,
   } = useTradingStore();
 
+  // Handle reset account
+  const handleResetAccount = async () => {
+    setResetting(true);
+    try {
+      await resetPaperAccount();
+      setShowResetConfirm(false);
+      setActiveTab('order');
+    } catch (error) {
+      console.error('Failed to reset account:', error);
+    } finally {
+      setResetting(false);
+    }
+  };
+
   // Initialize paper trading data
   useEffect(() => {
     const initializePaperTrading = async () => {
@@ -119,6 +136,20 @@ export default function PaperTradingPanel() {
         >
           History
         </button>
+        <button
+          onClick={() => setActiveTab('settings')}
+          className={`px-3 py-3 text-sm font-medium transition-colors ${
+            activeTab === 'settings'
+              ? 'text-blue-400 border-b-2 border-blue-400'
+              : 'text-gray-400 hover:text-white'
+          }`}
+          title="Settings"
+        >
+          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+          </svg>
+        </button>
       </div>
 
       {/* Tab Content */}
@@ -146,6 +177,63 @@ export default function PaperTradingPanel() {
             isLoading={loadingPaperTrades}
           />
         )}
+
+        {activeTab === 'settings' && (
+          <div className="p-4 space-y-4">
+            <h3 className="text-sm font-medium text-white">Paper Trading Settings</h3>
+
+            {/* Account Info */}
+            <div className="p-3 bg-gray-800 rounded-lg space-y-2">
+              <div className="flex justify-between text-sm">
+                <span className="text-gray-400">Initial Balance</span>
+                <span className="text-white">$100,000.00</span>
+              </div>
+              <div className="flex justify-between text-sm">
+                <span className="text-gray-400">Total Trades</span>
+                <span className="text-white">{paperTrades.length}</span>
+              </div>
+              <div className="flex justify-between text-sm">
+                <span className="text-gray-400">Open Positions</span>
+                <span className="text-white">{paperPositions.length}</span>
+              </div>
+            </div>
+
+            {/* Reset Account */}
+            <div className="p-3 bg-red-900/20 border border-red-800/50 rounded-lg">
+              <h4 className="text-sm font-medium text-red-400 mb-2">Reset Account</h4>
+              <p className="text-xs text-gray-400 mb-3">
+                This will reset your paper trading account to the initial balance and clear all positions and trade history.
+              </p>
+              {showResetConfirm ? (
+                <div className="space-y-2">
+                  <p className="text-xs text-yellow-400">Are you sure? This cannot be undone.</p>
+                  <div className="flex gap-2">
+                    <button
+                      onClick={handleResetAccount}
+                      disabled={resetting}
+                      className="flex-1 px-3 py-2 bg-red-600 hover:bg-red-700 disabled:bg-gray-600 text-white text-sm rounded transition-colors"
+                    >
+                      {resetting ? 'Resetting...' : 'Confirm Reset'}
+                    </button>
+                    <button
+                      onClick={() => setShowResetConfirm(false)}
+                      className="px-3 py-2 bg-gray-700 hover:bg-gray-600 text-white text-sm rounded transition-colors"
+                    >
+                      Cancel
+                    </button>
+                  </div>
+                </div>
+              ) : (
+                <button
+                  onClick={() => setShowResetConfirm(true)}
+                  className="w-full px-3 py-2 bg-red-600/50 hover:bg-red-600 text-red-200 text-sm rounded transition-colors"
+                >
+                  Reset Account
+                </button>
+              )}
+            </div>
+          </div>
+        )}
       </div>
 
       {/* Loading Overlay */}