Merge pull request #29 from Deal-Scale/codex/fix-dropdown-display-and-agent-modal

Fix agent modal dropdowns and monetization summary

Author: TechWithTy

components/Sidebar/AgentModal.tsx

@@ -6,6 +6,7 @@ import React, { useMemo, useState } from "react";
 import { z } from "zod";
 
 import AgentPreview from "./AgentPreview";
+import { AgentMonetizationSummary } from "./AgentMonetizationSummary";
 
 import { Button } from "@/components/ui/button";
 import {
@@ -28,6 +29,7 @@ import {
 	useKnowledgeBaseOptionsQuery,
 } from "@/data/options";
 import { AgentConfigSchema } from "@/lib/schemas/agent";
+import { getAgentUsageProfile } from "@/lib/agents/monetization";
 import {
 	Tooltip,
 	TooltipContent,
@@ -247,6 +249,26 @@ export default function AgentModal(props: {
 	const monetizationEnabled = isCreate
 		? Boolean(form.watch("monetize" as any))
 		: false;
+	const roleValue = isCreate
+		? (form.watch("role" as any) as string | undefined)
+		: undefined;
+	const multiplierValueRaw = isCreate
+		? form.watch("rateMultiplier" as any)
+		: undefined;
+	const multiplierValue = Number(multiplierValueRaw ?? 1) || 1;
+	const usageProfile = React.useMemo(
+		() => getAgentUsageProfile(roleValue),
+		[roleValue],
+	);
+	const currencyFormatter = React.useMemo(
+		() =>
+			new Intl.NumberFormat("en-US", {
+				style: "currency",
+				currency: usageProfile.currency,
+				maximumFractionDigits: 2,
+			}),
+		[usageProfile.currency],
+	);
 
 	const fields = useMemo(() => {
 		const base: FieldsConfig<Record<string, unknown>> & Record<string, any> = {
@@ -423,14 +445,25 @@ export default function AgentModal(props: {
 		};
 
 		if (isCreate) {
-			base.monetize = { label: "Enable Monetization" };
+			const baseRateText = currencyFormatter.format(usageProfile.baseAmount);
+			base.monetize = {
+				label: "Enable Monetization",
+				widget: "switch",
+				helpText: monetizationEnabled
+					? "Monetized agents become eligible for payouts."
+					: "Switch on to price this agent and enable payouts.",
+			};
 			base.rateMultiplier = {
 				label: "Rate Multiplier",
 				widget: "select",
 				options: RATE_MULTIPLIER_OPTIONS,
 				placeholder: monetizationEnabled
 					? undefined
 					: "Enable monetization first",
+				disabled: !monetizationEnabled,
+				helpText: monetizationEnabled
+					? `Applies to the ${usageProfile.label.toLowerCase()} base of ${baseRateText}.`
+					: `Current base for ${usageProfile.label.toLowerCase()}: ${baseRateText}.`,
 			};
 		}
 
@@ -442,6 +475,9 @@ export default function AgentModal(props: {
 		mcpServerOptions,
 		monetizationEnabled,
 		isCreate,
+		currencyFormatter,
+		usageProfile.baseAmount,
+		usageProfile.label,
 	]);
 
 	return (
@@ -506,8 +542,9 @@ export default function AgentModal(props: {
 										</TooltipTrigger>
 										<TooltipContent>
 											<p className="max-w-xs text-xs">
-												To monetize your agent, multiply by the current base
-												agent rate.
+												{`Base ${usageProfile.label.toLowerCase()} rate: ${currencyFormatter.format(
+													usageProfile.baseAmount,
+												)}. Multipliers scale your payout per active session.`}
 											</p>
 										</TooltipContent>
 									</Tooltip>
@@ -559,6 +596,13 @@ export default function AgentModal(props: {
 									onOpenChange(false);
 								}}
 							/>
+							{isCreate && (
+								<AgentMonetizationSummary
+									enabled={monetizationEnabled}
+									multiplier={multiplierValue}
+									profile={usageProfile}
+								/>
+							)}
 						</>
 					)}
 				</div>

components/Sidebar/AgentMonetizationSummary.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import React from "react";
+import clsx from "clsx";
+
+import {
+	calculateMonetizedRate,
+	type AgentUsageProfile,
+} from "@/lib/agents/monetization";
+
+const formatCurrency = (value: number, currency: string) =>
+	new Intl.NumberFormat("en-US", {
+		style: "currency",
+		currency,
+		maximumFractionDigits: 2,
+	}).format(value);
+
+type AgentMonetizationSummaryProps = {
+	enabled: boolean;
+	profile: AgentUsageProfile;
+	multiplier: number;
+};
+
+export function AgentMonetizationSummary({
+	enabled,
+	profile,
+	multiplier,
+}: AgentMonetizationSummaryProps) {
+	const { baseAmount, currency, description, label, usageStates } = profile;
+	const effectiveMultiplier = enabled ? multiplier : 1;
+	const totalRate = calculateMonetizedRate(baseAmount, effectiveMultiplier);
+
+	const summaryNote = enabled
+		? `${formatCurrency(baseAmount, currency)} base × ${effectiveMultiplier.toFixed(2)}x`
+		: `${formatCurrency(baseAmount, currency)} base rate`;
+
+	return (
+		<section
+			aria-label="Monetization summary"
+			className={clsx(
+				"mt-4 space-y-3 rounded-md border border-border p-3 text-sm transition-opacity",
+				enabled ? "opacity-100" : "opacity-75",
+			)}
+		>
+			<header className="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
+				<div>
+					<h3 className="text-base font-semibold text-foreground">{label}</h3>
+					<p className="text-xs text-muted-foreground">{description}</p>
+				</div>
+				<div className="text-right">
+					<div className="text-xs uppercase tracking-wide text-muted-foreground">
+						Estimated payout
+					</div>
+					<div className="text-lg font-semibold text-foreground">
+						{formatCurrency(totalRate, currency)}
+					</div>
+					<div className="text-xs text-muted-foreground">{summaryNote}</div>
+				</div>
+			</header>
+
+			<dl className="grid gap-2 text-xs sm:grid-cols-2">
+				{usageStates.map((state) => (
+					<div
+						key={`${state.label}-${state.value}`}
+						className="rounded-md bg-muted/50 px-3 py-2"
+					>
+						<dt className="font-medium text-foreground">{state.label}</dt>
+						<dd className="text-muted-foreground">{state.value}</dd>
+					</div>
+				))}
+			</dl>
+
+			{!enabled && (
+				<p className="text-xs text-muted-foreground">
+					Toggle monetization to apply your multiplier and publish this pricing
+					guidance.
+				</p>
+			)}
+		</section>
+	);
+}