Evals web app fixes / tweaks (#7299)

Author: cte

apps/web-evals/.env

@@ -1 +1 @@
-DATABASE_URL=postgres://postgres:password@localhost:5432/evals_development
+DATABASE_URL=postgres://postgres:password@localhost:5433/evals_development

apps/web-evals/scripts/check-services.sh

@@ -5,13 +5,13 @@ if ! docker info &> /dev/null; then
   exit 1
 fi
 
-if ! nc -z localhost 5432 2>/dev/null; then
+if ! nc -z postgres 5433 2>/dev/null; then
   echo "❌ PostgreSQL is not running on port 5432"
   echo "💡 Start it with: pnpm --filter @roo-code/evals db:up"
   exit 1
 fi
 
-if ! nc -z localhost 6379 2>/dev/null; then
+if ! nc -z redis 6380 2>/dev/null; then
   echo "❌ Redis is not running on port 6379"
   echo "💡 Start it with: pnpm --filter @roo-code/evals redis:up"
   exit 1

apps/web-evals/src/app/runs/new/new-run.tsx

@@ -8,7 +8,7 @@ import { useForm, FormProvider } from "react-hook-form"
 import { zodResolver } from "@hookform/resolvers/zod"
 import fuzzysort from "fuzzysort"
 import { toast } from "sonner"
-import { X, Rocket, Check, ChevronsUpDown, SlidersHorizontal, Book, CircleCheck } from "lucide-react"
+import { X, Rocket, Check, ChevronsUpDown, SlidersHorizontal, CircleCheck } from "lucide-react"
 
 import { globalSettingsSchema, providerSettingsSchema, EVALS_SETTINGS, getModelId } from "@roo-code/types"
 
@@ -49,11 +49,8 @@ import {
 	PopoverContent,
 	PopoverTrigger,
 	ScrollArea,
+	ScrollBar,
 	Slider,
-	Dialog,
-	DialogContent,
-	DialogTitle,
-	DialogFooter,
 } from "@/components/ui"
 
 import { SettingsDiff } from "./settings-diff"
@@ -93,24 +90,20 @@ export function NewRun() {
 
 	const [model, suite, settings] = watch(["model", "suite", "settings", "concurrency"])
 
-	const [systemPromptDialogOpen, setSystemPromptDialogOpen] = useState(false)
-	const [systemPrompt, setSystemPrompt] = useState("")
-	const systemPromptRef = useRef<HTMLTextAreaElement>(null)
-
 	const onSubmit = useCallback(
 		async (values: CreateRun) => {
 			try {
 				if (mode === "openrouter") {
 					values.settings = { ...(values.settings || {}), openRouterModelId: model }
 				}
 
-				const { id } = await createRun({ ...values, systemPrompt })
+				const { id } = await createRun(values)
 				router.push(`/runs/${id}`)
 			} catch (e) {
 				toast.error(e instanceof Error ? e.message : "An unknown error occurred.")
 			}
 		},
-		[mode, model, router, systemPrompt],
+		[mode, model, router],
 	)
 
 	const onFilterModels = useCallback(
@@ -269,29 +262,11 @@ export function NewRun() {
 										</div>
 										<SettingsDiff defaultSettings={EVALS_SETTINGS} customSettings={settings} />
 									</>
+									<ScrollBar orientation="horizontal" />
 								</ScrollArea>
 							)}
 							<FormMessage />
 						</FormItem>
-
-						<Button type="button" variant="secondary" onClick={() => setSystemPromptDialogOpen(true)}>
-							<Book />
-							Override System Prompt
-						</Button>
-
-						<Dialog open={systemPromptDialogOpen} onOpenChange={setSystemPromptDialogOpen}>
-							<DialogContent>
-								<DialogTitle>Override System Prompt</DialogTitle>
-								<Textarea
-									ref={systemPromptRef}
-									value={systemPrompt}
-									onChange={(e) => setSystemPrompt(e.target.value)}
-								/>
-								<DialogFooter>
-									<Button onClick={() => setSystemPromptDialogOpen(false)}>Done</Button>
-								</DialogFooter>
-							</DialogContent>
-						</Dialog>
 					</div>
 
 					<FormField

apps/web-evals/src/app/runs/new/settings-diff.tsx

@@ -52,13 +52,13 @@ type SettingDiffProps = HTMLAttributes<HTMLDivElement> & {
 export function SettingDiff({ name, defaultValue, customValue, ...props }: SettingDiffProps) {
 	return (
 		<Fragment {...props}>
-			<div className="overflow-hidden font-mono" title={name}>
+			<div className="font-mono" title={name}>
 				{name}
 			</div>
-			<pre className="overflow-hidden inline text-rose-500 line-through" title={defaultValue}>
+			<pre className="inline text-rose-500 line-through" title={defaultValue}>
 				{defaultValue}
 			</pre>
-			<pre className="overflow-hidden inline text-teal-500" title={customValue}>
+			<pre className="inline text-teal-500" title={customValue}>
 				{customValue}
 			</pre>
 		</Fragment>