From 6c5b7addc41781349e5837b3788f9809756180a5 Mon Sep 17 00:00:00 2001 From: Michael Preuss Date: Tue, 17 Feb 2026 16:55:24 -0800 Subject: [PATCH] fix(web-evals): refine recommendation objective and profile snapshot layout --- .../[objectiveSlug]/objective-content.tsx | 157 ++++++++++-------- .../src/app/evals/workers/workers-content.tsx | 14 +- 2 files changed, 94 insertions(+), 77 deletions(-) diff --git a/apps/web-roo-code/src/app/evals/recommendations/[objectiveSlug]/objective-content.tsx b/apps/web-roo-code/src/app/evals/recommendations/[objectiveSlug]/objective-content.tsx index 885b75d851..90c5c8c7fd 100644 --- a/apps/web-roo-code/src/app/evals/recommendations/[objectiveSlug]/objective-content.tsx +++ b/apps/web-roo-code/src/app/evals/recommendations/[objectiveSlug]/objective-content.tsx @@ -62,7 +62,7 @@ function pickCandidate(rec: RoleRecommendation | undefined, mode: EvalOptimizati return rec.best[0] ?? null } -function shortProvider(provider: string) { +function shortProvider(provider: string): string { switch (provider) { case "openai": return "OpenAI" @@ -81,12 +81,12 @@ function shortProvider(provider: string) { } } -function formatDollars(value: number) { +function formatDollars(value: number): string { if (!Number.isFinite(value)) return "—" return `$${Math.round(value)}` } -function formatSeconds(value: number) { +function formatSeconds(value: number): string { if (!Number.isFinite(value)) return "—" return `${value.toFixed(1)}s` } @@ -95,7 +95,7 @@ function buildObjectiveQueryString( searchParams: { get(name: string): string | null }, objectiveSlug: string, mode: EvalOptimizationMode, -) { +): string { const params = new URLSearchParams() params.set("objective", objectiveSlug) params.set("mode", mode) @@ -107,9 +107,85 @@ function buildObjectiveQueryString( return `?${params.toString()}` } +type PrimaryScatterPoint = { + name: string + provider: string + score: number + successRate: number + dailyCost: number + dotSize: number + isSelected: boolean +} + +type ObjectiveDataPreviewProps = { + points: PrimaryScatterPoint[] + compareHref: string +} + +function ObjectiveDataPreview({ points, compareHref }: ObjectiveDataPreviewProps): JSX.Element { + return ( +
+

Data preview

+

+ Composite score vs estimated daily cost for the primary agent, with dot size mapped to success rate. +

+ +
+ + + + + + } /> + + {points.map((point, i) => { + const pointColor = point.isSelected ? "#22c55e" : "#3b82f6" + const strokeColor = point.isSelected ? "rgba(34,197,94,0.65)" : "rgba(59,130,246,0.35)" + const strokeWidth = point.isSelected ? 2 : 1 + + return + })} + + + +
+ +
+ + Compare the full set + + +
+
+ ) +} + type ObjectiveTooltipPayloadEntry = { payload?: unknown } -function ObjectiveTooltip({ active, payload }: { active?: boolean; payload?: ObjectiveTooltipPayloadEntry[] }) { +function ObjectiveTooltip({ + active, + payload, +}: { + active?: boolean + payload?: ObjectiveTooltipPayloadEntry[] +}): JSX.Element | null { if (!active || !payload?.length) return null const entryPayload = payload[0]?.payload const p = entryPayload as @@ -204,7 +280,7 @@ export function ObjectiveContent({ objective, initialMode, recs }: Props) { [mode, objective.slug, searchParams], ) - const primaryScatter = useMemo(() => { + const primaryScatter = useMemo(() => { if (!primaryRoleId) return [] const rec = recByRole.get(primaryRoleId) if (!rec) return [] @@ -219,6 +295,10 @@ export function ObjectiveContent({ objective, initialMode, recs }: Props) { })) }, [primaryCandidate?.modelId, primaryRoleId, recByRole]) + const comparePrimaryHref = primaryRoleId + ? `/evals/recommendations/roles/${primaryRoleId}/compare${roleQuery}` + : "/evals/recommendations" + return (
{/* Atmosphere */} @@ -529,6 +609,8 @@ export function ObjectiveContent({ objective, initialMode, recs }: Props) { ) })}
+ +
@@ -571,69 +653,6 @@ export function ObjectiveContent({ objective, initialMode, recs }: Props) {
) : null} - -
-

- Data preview -

-

- Composite score vs estimated daily cost for the primary agent, with dot size mapped - to success rate. -

- -
- - - - - - } /> - - {primaryScatter.map((d, i) => ( - - ))} - - - -
- -
- - Compare the full set - - -
-
diff --git a/apps/web-roo-code/src/app/evals/workers/workers-content.tsx b/apps/web-roo-code/src/app/evals/workers/workers-content.tsx index a10feb2567..5965c7f8ec 100644 --- a/apps/web-roo-code/src/app/evals/workers/workers-content.tsx +++ b/apps/web-roo-code/src/app/evals/workers/workers-content.tsx @@ -294,6 +294,7 @@ export function WorkersContent({ if (!objectiveDefaultModel?.modelId) return "—" return formatModelIdForUi(objectiveDefaultModel.modelId) }, [objectiveDefaultModel]) + const selectedModeLabel = getModeLabel(selectedMode) const examplePrompt = selectedOutcome?.builderProfile?.examplePrompt ?? "" const cloudSetupHref = useMemo(() => { if (!effectiveOutcomeId) return "/cloud-agents/setup" @@ -515,7 +516,7 @@ export function WorkersContent({ Optimized for

- {getModeLabel(selectedMode)} + {selectedModeLabel}

@@ -780,9 +781,6 @@ export function WorkersContent({ {outcome.description}

- - Optimized for: {getModeLabel(selectedMode)} - ) @@ -811,8 +809,8 @@ export function WorkersContent({
-
-
+
+

Profile snapshot

@@ -830,7 +828,7 @@ export function WorkersContent({
- Optimized for: {getModeLabel(selectedMode)} + Optimized for: {selectedModeLabel}
@@ -963,7 +961,7 @@ export function WorkersContent({ - Learn more / customize + Learn more about this profile