Refactor AddToTestsetDrawer to fix cursor loss during mapping input and improve trace data entity synchronization

- Add stable mapping IDs using createMappingId() to prevent React key changes that cause cursor loss during typing
- Add useRef-based trace data load tracking to trigger entity sync when trace data finishes loading
- Update getValueAtPath to parse stringified JSON values before path navigation (handles outputs: '{"Response": "value"}')
- Add debug logging to mapping extraction in update

Author: ardaerzin

web/oss/src/components/SharedDrawers/AddToTestsetDrawer/TestsetDrawer.tsx

@@ -1,4 +1,4 @@
-import {useCallback, useEffect, useState} from "react"
+import {useCallback, useEffect, useRef, useState} from "react"
 
 import {WarningCircle} from "@phosphor-icons/react"
 import {Button, Input, Typography} from "antd"
@@ -57,6 +57,28 @@ const TestsetDrawer = ({open, spanIds, onClose, initialPath = "ag.data"}: Testse
         }
     }, [spanIds, initializeWithSpanIds])
 
+    // Track if trace data has loaded to trigger entity sync
+    // When trace data entities finish loading (have non-empty data), sync local entities
+    const hasTraceDataLoaded = useRef(false)
+    useEffect(() => {
+        // Check if trace data has actually loaded (has non-empty data objects)
+        const hasData = drawer.traceData.some((t) => t.data && Object.keys(t.data).length > 0)
+
+        // If we haven't synced yet AND data has now loaded AND we have a revision selected
+        if (!hasTraceDataLoaded.current && hasData && drawer.selectedRevisionId) {
+            hasTraceDataLoaded.current = true
+            // Trigger entity sync by calling onNewColumnBlur which updates local entities
+            // with the now-loaded trace data
+            console.log("[TestsetDrawer] Trace data loaded, syncing local entities")
+            drawer.onNewColumnBlur()
+        }
+
+        // Reset the flag when drawer closes
+        if (!open) {
+            hasTraceDataLoaded.current = false
+        }
+    }, [drawer.traceData, drawer.selectedRevisionId, drawer.onNewColumnBlur, open])
+
     const elemRef = useResizeObserver<HTMLDivElement>((rect) => {
         drawer.setIsDrawerExtended(rect.width > 640)
     })

web/oss/src/components/SharedDrawers/AddToTestsetDrawer/assets/types.ts

@@ -1,10 +1,17 @@
 import {KeyValuePair} from "tailwindcss/types/config"
 
 export interface Mapping {
+    /** Stable unique ID for React key - prevents cursor loss during typing */
+    id: string
     data: string
     column: string
     newColumn?: string
 }
+
+/** Generate a unique ID for a new mapping */
+export function createMappingId(): string {
+    return `mapping-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`
+}
 export interface Preview {
     key: string
     data: KeyValuePair[]

web/oss/src/components/SharedDrawers/AddToTestsetDrawer/atoms/drawerState.ts

@@ -15,7 +15,7 @@ import {
     selectedRevisionIdAtom as sharedSelectedRevisionIdAtom,
 } from "@/oss/state/testsetSelection"
 
-import type {Mapping, TestsetTraceData} from "../assets/types"
+import {createMappingId, type Mapping, type TestsetTraceData} from "../assets/types"
 
 import {
     cascaderValueAtom,
@@ -837,11 +837,16 @@ export const applyAutoMappingAtom = atom(
         const matchedMappings = matchColumnsWithSuggestions(suggestions, columns)
 
         // Convert to mapping format
-        const newMappings: Mapping[] = matchedMappings.map((match, index) => ({
-            ...currentMappings[index],
-            data: match.data,
-            column: match.column,
-        }))
+        const newMappings: Mapping[] = matchedMappings.map((match, index) => {
+            const existingMapping = currentMappings[index]
+            return {
+                // Use existing mapping ID if available, otherwise generate new one
+                id: existingMapping?.id || createMappingId(),
+                data: match.data,
+                column: match.column,
+                newColumn: existingMapping?.newColumn,
+            }
+        })
 
         // Only update mappings if different
         const isSame =
@@ -1017,6 +1022,17 @@ export const onRevisionSelectAtom = atom(
             return {success: false, reason: "no_trace_data"}
         }
 
+        // Check if trace data has loaded (entities have non-empty data)
+        // If not loaded yet, log a warning - the data will be synced when entities load
+        const hasLoadedData = traceData.some((t) => t.data && Object.keys(t.data).length > 0)
+        if (!hasLoadedData) {
+            console.warn(
+                "[onRevisionSelectAtom] Trace data entities not fully loaded yet. " +
+                    "Local entities will have empty data until onNewColumnBlur or mapping change triggers update.",
+                {traceDataCount: traceData.length, mappingCount: mappingData.length},
+            )
+        }
+
         // Import selectRevisionAtom dynamically to avoid circular dependency
         // eslint-disable-next-line @typescript-eslint/no-require-imports
         const {selectRevisionAtom} = require("./localEntities")

web/oss/src/components/SharedDrawers/AddToTestsetDrawer/atoms/localEntities.ts

@@ -357,6 +357,14 @@ export const updateAllLocalEntitiesAtom = atom(
                 if (!targetColumn) continue
 
                 const value = getValueAtPath(trace, mapping.data)
+                console.log("[updateAllLocalEntitiesAtom] Mapping extraction", {
+                    mappingPath: mapping.data,
+                    targetColumn,
+                    traceDataKeys: Object.keys(trace.data || {}),
+                    traceDataPreview: JSON.stringify(trace.data).slice(0, 200),
+                    extractedValue: value,
+                    valueType: typeof value,
+                })
                 // Preserve objects/arrays as-is, only convert null/undefined to empty string
                 updates[targetColumn] = value === undefined || value === null ? "" : value
             }
@@ -537,6 +545,14 @@ export const selectRevisionAtom = atom(
                 if (!targetColumn) continue
 
                 const value = getValueAtPath(trace, mapping.data)
+                console.log("[selectRevisionAtom] Mapping extraction", {
+                    mappingPath: mapping.data,
+                    targetColumn,
+                    traceDataKeys: Object.keys(trace.data || {}),
+                    traceDataPreview: JSON.stringify(trace.data).slice(0, 200),
+                    extractedValue: value,
+                    valueType: typeof value,
+                })
                 // Preserve objects/arrays as-is, only convert null/undefined to empty string
                 mappedData[targetColumn] = value === undefined || value === null ? "" : value
             }

web/oss/src/components/SharedDrawers/AddToTestsetDrawer/components/MappingSection.tsx

@@ -3,7 +3,7 @@ import {useMemo} from "react"
 import {ArrowRight, Crosshair, Plus, Trash} from "@phosphor-icons/react"
 import {AutoComplete, Button, Select, Tooltip, Typography} from "antd"
 
-import {Mapping, TestsetColumn} from "../assets/types"
+import {createMappingId, Mapping, TestsetColumn} from "../assets/types"
 
 interface MappingSectionProps {
     mappingData: Mapping[]
@@ -98,7 +98,7 @@ export function MappingSection({
                     <div className="flex flex-col gap-2">
                         {mappingData.map((mapping, idx) => (
                             <div
-                                key={`mapping-${idx}-${mapping.data || ""}`}
+                                key={mapping.id}
                                 className="flex gap-2 items-center"
                             >
                                 {/* Inputs container - takes remaining space */}
@@ -221,7 +221,12 @@ export function MappingSection({
                         className="mt-1"
                         style={{width: elementWidth}}
                         icon={<Plus />}
-                        onClick={() => setMappingData([...mappingData, {data: "", column: ""}])}
+                        onClick={() =>
+                            setMappingData([
+                                ...mappingData,
+                                {id: createMappingId(), data: "", column: ""},
+                            ])
+                        }
                     >
                         Add field
                     </Button>

web/oss/src/components/SharedDrawers/AddToTestsetDrawer/hooks/useTestsetDrawer.ts

@@ -9,7 +9,7 @@ import {currentColumnsAtom} from "@/oss/state/entities/testcase/columnState"
 import {getValueAtPath} from "@/oss/state/entities/trace"
 import {projectIdAtom} from "@/oss/state/project"
 
-import {Mapping, TestsetColumn, TestsetTraceData} from "../assets/types"
+import {createMappingId, Mapping, TestsetColumn, TestsetTraceData} from "../assets/types"
 import {onCascaderChangeAtom} from "../atoms/actions"
 import {
     allTracePathsSelectOptionsAtom,
@@ -192,15 +192,15 @@ export function useTestsetDrawer(): UseTestsetDrawerResult {
             if (column === "create") {
                 setMappingData((prev) => [
                     ...prev,
-                    {data: dataPath, column: "create", newColumn: ""},
+                    {id: createMappingId(), data: dataPath, column: "create", newColumn: ""},
                 ])
                 // Scroll to mapping section so user can fill in the column name
                 setTimeout(() => {
                     const mappingSection = document.querySelector('[data-testid="mapping-section"]')
                     mappingSection?.scrollIntoView({behavior: "smooth", block: "center"})
                 }, 100)
             } else {
-                setMappingData((prev) => [...prev, {data: dataPath, column}])
+                setMappingData((prev) => [...prev, {id: createMappingId(), data: dataPath, column}])
                 // Trigger entity update to sync columns to preview table
                 executeNewColumnBlur(getValueAtPath)
             }

web/oss/src/components/TestcasesTableNew/components/TestcaseSelectionCell.tsx

@@ -28,10 +28,12 @@ const TestcaseSelectionCell = memo(function TestcaseSelectionCell({
     originNode,
     mode = "edit",
 }: TestcaseSelectionCellProps) {
-    // Check if testcase has unsaved changes using controller selector (only in edit mode)
+    // Check if testcase has unsaved changes using controller selector
     // This includes both draft edits AND pending column changes
     const isDirtyAtom = useMemo(() => testcase.selectors.isDirty(testcaseId || ""), [testcaseId])
-    const isDirty = mode === "edit" ? useAtomValue(isDirtyAtom) : false
+    // Always call useAtomValue (hooks must be unconditional), then check mode
+    const isDirtyValue = useAtomValue(isDirtyAtom)
+    const isDirty = mode === "edit" ? isDirtyValue : false
 
     // New rows (not yet saved) are always dirty
     const isNewRow = testcaseId?.startsWith("new-") || testcaseId?.startsWith("local-") || false

web/oss/src/components/pages/evaluations/autoEvaluation/EvaluatorsModal/ConfigureEvaluator/DebugSection.tsx

@@ -1118,7 +1118,7 @@ const DebugSection = () => {
                     ]}
                 />
             </div>
-            shit
+
             <EvaluatorVariantModal
                 variants={derivedVariants}
                 open={openVariantModal}

web/oss/src/state/entities/trace/selectors.ts

@@ -29,7 +29,7 @@ const splitPath = (path: string): string[] =>
 
 /**
  * Get a value from an object using dot-notation path
- * Handles nested objects and escaped dots in keys
+ * Handles nested objects, escaped dots in keys, and stringified JSON values
  */
 export const getValueAtPath = (obj: any, rawPath: string): any => {
     if (obj == null || !rawPath) return undefined
@@ -43,6 +43,17 @@ export const getValueAtPath = (obj: any, rawPath: string): any => {
     for (let i = 0; i < parts.length; i++) {
         if (cur == null) return undefined
 
+        // If current value is a string, try to parse it as JSON
+        // This handles cases where data is stringified (e.g., outputs: '{"Response": "value"}')
+        if (typeof cur === "string") {
+            try {
+                cur = JSON.parse(cur)
+            } catch {
+                // Not valid JSON, can't navigate further into a string
+                return undefined
+            }
+        }
+
         const key = parts[i]
 
         if (Object.prototype.hasOwnProperty.call(cur, key)) {