Refactor rebalance config UI and improve Alpaca order sync

Simplifies rebalance and scheduled rebalance configuration UIs by removing 'use default settings' and direct editing of position size and allocation fields, making these values always use user settings. Adds a stock selection limit display to modals. Improves Alpaca order status synchronization in RecentTrades with periodic batch updates. Cleans up types and removes deprecated fields. Refactors portfolio data helpers for more consistent period handling and downsampling.

Author: BWJ2310

src/components/PortfolioPositions.tsx

@@ -651,9 +651,7 @@ export default function PortfolioPositions({ onSelectStock, selectedStock }: Por
             // The constraints object below includes targetCashAllocation
             // which tells the Portfolio Manager the stock/cash split
 
-            // Build constraints object
-            // Note: When useDefaultSettings is true, config already has the values from apiSettings
-            // (loaded in RebalanceModal's loadData function)
+            // Build constraints object with user-configured values
             const constraints = {
               maxPositionSize: config.maxPosition,
               minPositionSize: config.minPosition,
@@ -701,8 +699,7 @@ export default function PortfolioPositions({ onSelectStock, selectedStock }: Por
                 constraints,
                 portfolioData,
                 skipOpportunityAgent: config.skipOpportunityAgent,
-                rebalanceThreshold: config.rebalanceThreshold,
-                useDefaultSettings: config.useDefaultSettings
+                rebalanceThreshold: config.rebalanceThreshold
               }
             });
 

src/components/RecentTrades.tsx

@@ -6,6 +6,7 @@ import { ArrowUpRight, ArrowDownRight, Clock, CheckCircle, XCircle, TrendingUp,
 import { alpacaAPI } from "@/lib/alpaca";
 import { useAuth, isSessionValid } from "@/lib/auth";
 import { supabase } from "@/lib/supabase";
+import { getCachedSession } from "@/lib/cachedAuth";
 import { useToast } from "@/hooks/use-toast";
 import AnalysisDetailModal from "@/components/AnalysisDetailModal";
 import RebalanceDetailModal from "@/components/RebalanceDetailModal";
@@ -104,6 +105,153 @@ function RecentTrades() {
     }
   }, [user?.id, isAuthenticated, toast]); // isSessionValid is a pure function, doesn't need to be in deps
 
+  // Function to update Alpaca order status for approved orders using batch API
+  const updateAlpacaOrderStatus = async () => {
+    if (!user?.id || !apiSettings) return;
+
+    try {
+      // Get recent trading actions (last 48 hours) - same timeframe as displayed trades
+      const twoDaysAgo = new Date();
+      twoDaysAgo.setDate(twoDaysAgo.getDate() - 2);
+
+      // Get approved and executed orders with Alpaca IDs in metadata from last 48 hours
+      // Include executed orders in case they need status updates (partial fills, etc.)
+      const { data: approvedOrders, error } = await supabase
+        .from('trading_actions')
+        .select('id, metadata, status, created_at')
+        .eq('user_id', user.id)
+        .in('status', ['approved', 'executed'])
+        .gte('created_at', twoDaysAgo.toISOString());
+
+      if (error || !approvedOrders || approvedOrders.length === 0) {
+        console.log('No approved orders found to update');
+        return;
+      }
+
+      // Filter orders that have Alpaca order IDs
+      const ordersWithAlpacaIds = approvedOrders.filter(o => o.metadata?.alpaca_order?.id);
+      if (ordersWithAlpacaIds.length === 0) {
+        console.log('No orders with Alpaca IDs found');
+        return;
+      }
+
+      // Extract all Alpaca order IDs
+      const alpacaOrderIds = ordersWithAlpacaIds.map(o => o.metadata.alpaca_order.id);
+      console.log(`Fetching status for ${alpacaOrderIds.length} Alpaca orders:`, alpacaOrderIds);
+      
+      // Fetch all orders from Alpaca using batch API
+      const session = await getCachedSession();
+      const response = await fetch(`${import.meta.env.VITE_SUPABASE_URL}/functions/v1/alpaca-batch`, {
+        method: 'POST',
+        headers: {
+          'Authorization': `Bearer ${session?.access_token}`,
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          orderIds: alpacaOrderIds,
+          includeOrders: true
+        })
+      });
+
+      if (!response.ok) {
+        console.error('Failed to fetch orders from Alpaca batch API');
+        return;
+      }
+
+      const responseData = await response.json();
+      console.log('Full response from alpaca-batch:', responseData);
+      const alpacaOrders = responseData?.data?.orders || [];
+      console.log(`Received ${alpacaOrders.length} orders from Alpaca:`, alpacaOrders);
+
+      // Update status for each order
+      let hasUpdates = false;
+      for (const order of ordersWithAlpacaIds) {
+        const alpacaOrderId = order.metadata.alpaca_order.id;
+        const alpacaOrder = alpacaOrders.find((o: any) => o.id === alpacaOrderId);
+
+        if (alpacaOrder) {
+          console.log(`Found Alpaca order ${alpacaOrderId} with status: ${alpacaOrder.status}`);
+          
+          // Check if status has changed or if there's new fill information
+          const currentAlpacaStatus = order.metadata?.alpaca_order?.status;
+          const currentFilledQty = order.metadata?.alpaca_order?.filled_qty;
+          const hasStatusChanged = currentAlpacaStatus !== alpacaOrder.status;
+          const hasNewFillData = alpacaOrder.filled_qty && alpacaOrder.filled_qty !== currentFilledQty;
+          
+          // Always update if we don't have a status yet, or if something changed
+          if (!currentAlpacaStatus || hasStatusChanged || hasNewFillData) {
+            console.log(`Order ${alpacaOrderId} updating: current status "${currentAlpacaStatus}" -> new status "${alpacaOrder.status}"`);
+            hasUpdates = true;
+            
+            // Build the alpaca_order object, only including defined values
+            const alpacaOrderUpdate: any = {
+              ...(order.metadata?.alpaca_order || {}),
+              status: alpacaOrder.status,
+              updated_at: new Date().toISOString()
+            };
+            
+            // Only add filled_qty and filled_avg_price if they exist
+            if (alpacaOrder.filled_qty) {
+              alpacaOrderUpdate.filled_qty = parseFloat(alpacaOrder.filled_qty);
+            }
+            if (alpacaOrder.filled_avg_price) {
+              alpacaOrderUpdate.filled_avg_price = parseFloat(alpacaOrder.filled_avg_price);
+            }
+            
+            // Update metadata with latest Alpaca order info
+            const updatedMetadata = {
+              ...(order.metadata || {}),
+              alpaca_order: alpacaOrderUpdate
+            };
+
+            const updates: any = {
+              metadata: updatedMetadata
+            };
+
+            // If order is filled, update execution timestamp in metadata
+            if (alpacaOrder.status === 'filled') {
+              // Store execution details in metadata, not in main status field
+              updates.executed_at = alpacaOrder.filled_at || new Date().toISOString();
+              console.log(`Order ${alpacaOrderId} is filled, updating execution timestamp`);
+            } else if (['canceled', 'cancelled', 'rejected', 'expired'].includes(alpacaOrder.status) && order.status === 'approved') {
+              // Only update to rejected if it was approved before
+              updates.status = 'rejected';
+              console.log(`Marking order ${alpacaOrderId} as rejected due to Alpaca status: ${alpacaOrder.status}`);
+            }
+
+            console.log(`Updating order ${order.id} with:`, updates);
+            const { data: updateData, error: updateError } = await supabase
+              .from('trading_actions')
+              .update(updates)
+              .eq('id', order.id)
+              .select();
+              
+            if (updateError) {
+              console.error(`Failed to update order ${order.id}:`, updateError);
+              console.error('Update payload was:', updates);
+            } else {
+              console.log(`Successfully updated order ${order.id}`, updateData);
+            }
+          } else {
+            console.log(`Order ${alpacaOrderId} unchanged at status: ${currentAlpacaStatus}`);
+          }
+        } else {
+          console.log(`No matching Alpaca order found for ${alpacaOrderId}`);
+        }
+      }
+
+      // Refresh the trades after a short delay if we made updates
+      if (hasUpdates) {
+        console.log('Updates were made, refreshing trades...');
+        setTimeout(() => {
+          fetchAllTrades();
+        }, 500);
+      }
+    } catch (err) {
+      console.error('Error updating Alpaca order status:', err);
+    }
+  };
+
   // Track if we've already fetched for current user
   const fetchedRef = useRef<string>('');
   const lastFetchTimeRef = useRef<number>(0);
@@ -132,10 +280,31 @@ function RecentTrades() {
     // Add a small delay on initial mount to ensure session is settled
     const timeoutId = setTimeout(() => {
       fetchAllTrades();
+      
+      // Also update Alpaca order status if credentials exist
+      const hasCredentials = apiSettings?.alpaca_paper_api_key || apiSettings?.alpaca_live_api_key;
+      if (hasCredentials) {
+        console.log('Alpaca credentials detected, updating order status...');
+        updateAlpacaOrderStatus();
+      }
     }, 500);
 
     return () => clearTimeout(timeoutId);
-  }, [user?.id, isAuthenticated, fetchAllTrades]); // Include isAuthenticated in dependencies
+  }, [user?.id, isAuthenticated, fetchAllTrades, apiSettings]); // Include isAuthenticated and apiSettings in dependencies
+
+  // Periodically update Alpaca order status
+  useEffect(() => {
+    const hasCredentials = apiSettings?.alpaca_paper_api_key || apiSettings?.alpaca_live_api_key;
+
+    if (!hasCredentials) return;
+
+    const interval = setInterval(() => {
+      console.log('Periodic order status update...');
+      updateAlpacaOrderStatus();
+    }, 30000); // Check every 30 seconds
+
+    return () => clearInterval(interval);
+  }, [apiSettings, user]);
 
   const formatTimestamp = (timestamp: string) => {
     const date = new Date(timestamp);
@@ -232,7 +401,7 @@ function RecentTrades() {
 
   const renderTradeCard = (decision: TradeDecision) => {
     const isPending = decision.status === 'pending';
-    const isExecuted = decision.status === 'executed';
+    const isExecuted = decision.alpacaOrderStatus === 'filled' || decision.alpacaOrderStatus === 'partially_filled';
     const isApproved = decision.status === 'approved';
     const isRejected = decision.status === 'rejected';
 
@@ -373,30 +542,25 @@ function RecentTrades() {
                       const status = decision.alpacaOrderStatus.toLowerCase();
                       let variant: any = "outline";
                       let icon = null;
-                      let displayText = decision.alpacaOrderStatus;
                       let customClasses = "";
 
+                      // Display the actual Alpaca status directly
                       if (status === 'filled') {
                         variant = "success";
                         icon = <CheckCircle className="h-3 w-3 mr-1" />;
-                        displayText = "filled";
                       } else if (status === 'partially_filled') {
                         variant = "default";
                         icon = <Clock className="h-3 w-3 mr-1" />;
-                        displayText = "partial filled";
                         customClasses = "bg-blue-500 text-white border-blue-500";
-                      } else if (['new', 'pending_new', 'accepted'].includes(status)) {
+                      } else if (['new', 'pending_new', 'accepted', 'pending_replace', 'pending_cancel'].includes(status)) {
                         variant = "warning";
                         icon = <Clock className="h-3 w-3 mr-1" />;
-                        displayText = "placed";
-                      } else if (['canceled', 'cancelled'].includes(status)) {
+                      } else if (['canceled', 'cancelled', 'expired', 'replaced'].includes(status)) {
                         variant = "destructive";
                         icon = <XCircle className="h-3 w-3 mr-1" />;
-                        displayText = "failed";
                       } else if (status === 'rejected') {
                         variant = "destructive";
                         icon = <XCircle className="h-3 w-3 mr-1" />;
-                        displayText = "rejected";
                       }
 
                       return (
@@ -405,10 +569,10 @@ function RecentTrades() {
                           className={`text-xs ${customClasses}`}
                         >
                           {icon}
-                          {displayText}
-                          {decision.alpacaFilledQty && status === 'partially_filled' ? (
+                          {decision.alpacaOrderStatus}
+                          {decision.alpacaFilledQty > 0 && status === 'partially_filled' && (
                             <span className="ml-1">({decision.alpacaFilledQty}/{decision.quantity})</span>
-                          ) : null}
+                          )}
                         </Badge>
                       );
                     })()}
@@ -500,7 +664,13 @@ function RecentTrades() {
             variant="ghost"
             size="icon"
             className="h-7 w-7"
-            onClick={() => fetchAllTrades()}
+            onClick={() => {
+              fetchAllTrades();
+              const hasCredentials = apiSettings?.alpaca_paper_api_key || apiSettings?.alpaca_live_api_key;
+              if (hasCredentials) {
+                updateAlpacaOrderStatus();
+              }
+            }}
             disabled={loading}
           >
             {loading ? (

src/components/rebalance/RebalanceModal.tsx

@@ -10,6 +10,7 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { RefreshCw, Settings, List, AlertCircle } from "lucide-react";
@@ -156,6 +157,18 @@ export default function RebalanceModal({ isOpen, onClose, onApprove }: Rebalance
                 Stock Selection
               </TabsTrigger>
             </TabsList>
+            
+            {/* Stock Selection Limit Display */}
+            {maxStocks > 0 && (
+              <div className="mt-3 flex items-center justify-between text-sm">
+                <span className="text-muted-foreground">
+                  Stock selection limit: {selectedPositions.size} / {maxStocks} stocks selected
+                </span>
+                {selectedPositions.size >= maxStocks && (
+                  <Badge variant="destructive" className="text-xs">Limit Reached</Badge>
+                )}
+              </div>
+            )}
           </div>
 
           <ConfigurationTab

src/components/rebalance/components/WorkflowExplanation.tsx

@@ -6,39 +6,6 @@ interface WorkflowExplanationProps {
 }
 
 export function WorkflowExplanation({ rebalanceThreshold }: WorkflowExplanationProps) {
-  return (
-    <div className="pt-4 border-t">
-      <h4 className="text-sm font-semibold mb-2">How Scheduled Rebalancing Works</h4>
-      <div className="space-y-2 text-xs text-muted-foreground">
-        <div className="flex items-start gap-2">
-          <span className="font-medium">1.</span>
-          <span>Schedule triggers at configured time intervals</span>
-        </div>
-        <div className="flex items-start gap-2">
-          <span className="font-medium">2.</span>
-          <span>Calculate allocation drift for all selected stocks</span>
-        </div>
-        <div className="flex items-start gap-2">
-          <span className="font-medium">3.</span>
-          <span>
-            If max drift &lt; {rebalanceThreshold}%: Opportunity Agent evaluates market signals to identify high-priority stocks
-          </span>
-        </div>
-        <div className="flex items-start gap-2">
-          <span className="font-medium">4.</span>
-          <span>
-            If max drift &ge; {rebalanceThreshold}%: Analyze all selected stocks immediately
-          </span>
-        </div>
-        <div className="flex items-start gap-2">
-          <span className="font-medium">5.</span>
-          <span>Run full multi-agent analysis on selected stocks</span>
-        </div>
-        <div className="flex items-start gap-2">
-          <span className="font-medium">6.</span>
-          <span>Portfolio Manager creates optimal rebalance trades</span>
-        </div>
-      </div>
-    </div>
-  );
+  // Component removed - no longer showing workflow explanation
+  return null;
 }