[Feat]: improve cascade entity selector UI

web/oss/src/components/Evaluators/components/ConfigureEvaluator/atoms.ts

@@ -205,9 +205,16 @@ export const connectAppToEvaluatorAtom = atom(
             appLabel: string
             evaluatorRevisionId: string
             evaluatorLabel: string
+            persistSelection?: boolean
         },
     ) => {
-        const {appRevisionId, appLabel, evaluatorRevisionId, evaluatorLabel} = params
+        const {
+            appRevisionId,
+            appLabel,
+            evaluatorRevisionId,
+            evaluatorLabel,
+            persistSelection = true,
+        } = params
 
         // Replace primary node with the app FIRST — if the graph mutation
         // bails out (changePrimaryNode returns null when there's no current
@@ -247,14 +254,16 @@ export const connectAppToEvaluatorAtom = atom(
         // Persist only after both graph mutations succeeded. The picker
         // display label is derived from the depth-0 node's `label` via
         // `selectedAppLabelAtom`, so no extra write needed here.
-        set(persistedAppSelectionAtom, {appRevisionId, appLabel})
-
-        // Pin the stored run-on mode to "app" too. While connected,
-        // `effectiveRunOnModeAtom` overrides to "app" regardless, but the
-        // stored mode is what we fall back to on disconnect — without this a
-        // user who connected an app from "data" mode would snap back to the
-        // testcase panel on disconnect instead of the "Select an app" state.
-        set(runOnModeAtom, "app")
+        if (persistSelection) {
+            set(persistedAppSelectionAtom, {appRevisionId, appLabel})
+
+            // Pin the stored run-on mode to "app" too. While connected,
+            // `effectiveRunOnModeAtom` overrides to "app" regardless, but the
+            // stored mode is what we fall back to on disconnect — without this a
+            // user who connected an app from "data" mode would snap back to the
+            // testcase panel on disconnect instead of the "Select an app" state.
+            set(runOnModeAtom, "app")
+        }
 
         // Force the node-derived display atoms to re-settle after the two
         // sequential `playgroundNodesAtom` writes above (changePrimaryNode →

web/oss/src/components/Evaluators/components/EvaluatorTemplateDropdown.tsx

@@ -9,6 +9,7 @@ import {cn, textColors, bgColors, borderColors} from "@agenta/ui"
 import {PlusOutlined} from "@ant-design/icons"
 import {ArrowRight} from "@phosphor-icons/react"
 import {Button, Empty, Popover, Skeleton, Tabs, Tag, Typography} from "antd"
+import type {PopoverProps} from "antd"
 import {useAtomValue} from "jotai"
 
 import {
@@ -30,6 +31,8 @@ interface EvaluatorTemplateDropdownProps {
     open?: boolean
     /** Callback when open state changes (required when using controlled `open`) */
     onOpenChange?: (open: boolean) => void
+    /** Popover placement relative to the trigger. */
+    placement?: PopoverProps["placement"]
 }
 
 /**
@@ -42,6 +45,7 @@ const EvaluatorTemplateDropdown = ({
     className,
     open: controlledOpen,
     onOpenChange: controlledOnOpenChange,
+    placement = "bottomRight",
 }: EvaluatorTemplateDropdownProps) => {
     const [activeTab, setActiveTab] = useState<string>(DEFAULT_TAB_KEY)
     const [internalOpen, setInternalOpen] = useState(false)
@@ -183,7 +187,7 @@ const EvaluatorTemplateDropdown = ({
             onOpenChange={setOpen}
             trigger={["click"]}
             content={popoverContent}
-            placement="bottomRight"
+            placement={placement}
             arrow={false}
             styles={{container: {padding: 0}}}
         >

web/oss/src/components/Playground/Components/MainLayout/index.tsx

@@ -17,7 +17,7 @@ import ExecutionItems, {
 } from "@agenta/playground-ui/execution-items"
 import {Button, Splitter, Typography} from "antd"
 import clsx from "clsx"
-import {useAtomValue} from "jotai"
+import {useAtomValue, useSetAtom} from "jotai"
 import dynamic from "next/dynamic"
 
 import {routerAppIdAtom} from "@/oss/state/app/selectors/app"
@@ -108,7 +108,7 @@ const PlaygroundMainView = ({
     const status = useAtomValue(playgroundController.selectors.status())
     const urlAppId = useAtomValue(routerAppIdAtom)
     const {open: openEntitySelector} = useEntitySelector()
-    const setEntityIds = playgroundController.actions.setEntityIds
+    const setEntityIds = useSetAtom(playgroundController.actions.setEntityIds)
 
     const isEvaluatorMode = mode === "evaluator"
     const layoutEntityIds = selectedEntityIds.length > 0 ? selectedEntityIds : displayedEntities
@@ -137,9 +137,7 @@ const PlaygroundMainView = ({
             allowedTypes: ["workflow"],
         })
         if (selection) {
-            // Add the selected entity to the playground
-            const store = (await import("jotai")).getDefaultStore()
-            store.set(setEntityIds, [selection.id])
+            setEntityIds([selection.id])
         }
     }, [openEntitySelector, setEntityIds])