-
-
- AI NEGOTIATION BATTLE
+
- {/* Battle Arena */}
-
- AI NEGOTIATION BATTLE
+
+ {/* Header - Editorial Style */}
+
+
+
+
+ The Negotiation
-
-
- Watch AI agents battle it out in epic negotiations!
-
+
+ Autonomous Agent Simulation
+
+
+
+
- + The Negotiation
-- Watch AI agents battle it out in epic negotiations! -
++ Autonomous Agent Simulation +
+
- {/* Scenario Header */}
- {state.scenario && (
+
+ {/* Setup Phase - Editorial Style */}
+ {(state.status === "setup" || (!state.status && scenarios.length > 0)) && (
-
- )}
-
- {/* VS Display */}
- {state.buyer && state.seller && (
-
+
+
+
+
+ )}
+
+ )}
)}
- {/* Instructions when no negotiation */}
- {state.status === "setup" && (
-
-
+ {/* Battle Phase */}
+ {(state.status === "ready" || state.status === "negotiating" || state.status === "deal" || state.status === "no_deal") && (
+
-
- {/* CopilotKit Sidebar */}
- - {state.scenario.title} -
-{state.scenario.item}
-- Asking Price: - ${state.scenario.asking_price?.toLocaleString()} - -
-
- {/* Buyer */}
-
-
-
- {/* VS Badge */}
-
- VS
-
-
- {/* Seller */}
-
-
-
- )}
-
- {/* Negotiation Timeline */}
- {state.rounds && state.rounds.length > 0 && (
- {state.buyer.emoji}
- {state.buyer.name}
-BUYER
-- Budget: ${state.buyer.budget?.toLocaleString()} -
-{state.seller.emoji}
- {state.seller.name}
-SELLER
-- Minimum: ${state.seller.minimum?.toLocaleString()} -
-
-
+
- {/* Deal Banner */}
- {state.status === "deal" && state.final_price && state.scenario && (
- - ⏱️ NEGOTIATION TIMELINE -
-
- {/* Center line */}
-
-
- {/* Rounds */}
-
- {state.rounds.map((round, index) => (
-
+
- )}
+
+ Step 1
+
+ + Select Context +
+
+ {scenarios.map((scenario) => (
+ setSelectedScenario(scenario.id)}
+ className={`
+ cursor-pointer p-8 rounded-xl border transition-all duration-200
+ ${selectedScenario === scenario.id
+ ? 'bg-bg-card border-text-primary shadow-md ring-1 ring-text-primary'
+ : 'bg-bg-subtle border-transparent hover:border-border-medium hover:bg-bg-card'
+ }
+ `}
+ >
+
))}
-
-
- {scenario.emoji}
+ {scenario.title}
+{scenario.item}
++ ${scenario.asking_price.toLocaleString()} +
+
-
- )}
+ {/* Character Selection */}
+ {selectedScenario && (
+
+ {/* Buyer Selection */}
+
+
- {/* No Deal Banner */}
- {state.status === "no_deal" && (
-
-
+
+
+
+ {/* Start Button */}
+ {selectedBuyer && selectedSeller && (
+
+ Step 2
+
+ + Choose Buyer +
+
+ {buyers.map((buyer) => (
+ setSelectedBuyer(buyer.id)}
+ className={`
+ cursor-pointer p-5 rounded-lg border transition-all
+ ${selectedBuyer === buyer.id
+ ? 'bg-bg-card border-text-primary shadow-sm'
+ : 'bg-bg-subtle border-transparent hover:border-border-medium'
+ }
+ `}
+ >
+
+ ))}
+
+ {buyer.emoji}
+ {buyer.name}
+NO DEAL 💔
-The negotiation has ended without an agreement.
+ {/* Seller Selection */} +
+ Step 3
+
+ + Choose Seller +
+
+ {sellers.map((seller) => (
+ setSelectedSeller(seller.id)}
+ className={`
+ cursor-pointer p-5 rounded-lg border transition-all
+ ${selectedSeller === seller.id
+ ? 'bg-bg-card border-text-primary shadow-sm'
+ : 'bg-bg-subtle border-transparent hover:border-border-medium'
+ }
+ `}
+ >
+
+ ))}
+
+ {seller.emoji}
+ {seller.name}
+🎮
- - Ready to Start a Battle? -
-- Open the chat sidebar and tell the Battle Master to start a negotiation! - Try: "Start a negotiation for a used car" -
-
+ {/* Scenario Header - Editorial Style */}
+ {state.scenario && (
+
+
+ )}
+
+ {/* Comparison Display - Editorial Two-Column */}
+ {state.buyer && state.seller && (
+
+
+ )}
+
+ {/* Reset Button */}
+ {(state.status === "deal" || state.status === "no_deal") && (
+
+
+
+
+ )}
+
)}
+ Negotiation Item
+
+ + {state.scenario.title} +
+{state.scenario.item}
+
+ Asking Price
+
+ ${state.scenario.asking_price?.toLocaleString()}
+
+
+
+
+ {/* Buyer Column */}
+
+ Buyer
+
+
+ {/* Seller Column */}
+
+ Seller
+
+
+
+ )}
+
+ {/* Negotiation Chat */}
+ {state.rounds && state.rounds.length > 0 && (
+ {state.buyer.emoji}
+ {state.buyer.name}
+Budget: ${state.buyer.budget?.toLocaleString()}
+{state.seller.emoji}
+ {state.seller.name}
+Minimum: ${state.seller.minimum?.toLocaleString()}
+
+
+ )}
+
+ {/* Deal Banner */}
+ {state.status === "deal" && state.final_price && state.scenario && (
+
+
+ Live Transcript
+
+
+
+ {/* Price Tracker */}
+ {state.buyer && state.seller && state.rounds.length > 0 && state.rounds[state.rounds.length - 1].offer_amount && (
+
+
+ )}
+
+ {/* Chat Bubbles */}
+
+
+ {state.rounds.map((round, index) => {
+ const isBuyer = round.type === "buyer_offer" || round.buyer_name;
+ return (
+
+
+ {/* Typing Indicator */}
+ {(state.status === "negotiating" || state.status === "ready") && (
+
+
+
+ )}
+
+
+ )}
+
+ {/* No Deal Banner */}
+ {state.status === "no_deal" && (
+
+
+
+
+ Negotiation Ended
+No agreement could be reached between the parties.
+