Function StateKeyValueInput

packages/agentflow/src/atoms/StateKeyValueInput.tsx:26–129

({ value, onChange, disabled = false, suggestionItems }: StateKeyValueInputProps)

 * Keys are plain text; values support variable syntax via VariableInput.
 */
export function StateKeyValueInput({ value, onChange, disabled = false, suggestionItems }: StateKeyValueInputProps) {
    const theme = useTheme()

    const entries = useMemo(() => (Array.isArray(value) ? value : []), [value])
    const { keys: stableKeys, removeKey } = useStableKeys(entries.length, 'state-kv')

    const handleKeyChange = useCallback(
        (index: number, newKey: string) => {
            const updated = entries.map((entry, i) => (i === index ? { ...entry, key: newKey } : entry))
            onChange(updated)
        },
        [entries, onChange]
    )

    const handleValueChange = useCallback(
        (index: number, newValue: string) => {
            const updated = entries.map((entry, i) => (i === index ? { ...entry, value: newValue } : entry))
            onChange(updated)
        },
        [entries, onChange]
    )

    const handleAdd = useCallback(() => {
        onChange([...entries, { key: '', value: '' }])
    }, [entries, onChange])

    const handleRemove = useCallback(
        (index: number) => {
            removeKey(index)
            onChange(entries.filter((_, i) => i !== index))
        },
        [entries, onChange, removeKey]
    )

    return (
        <Box data-testid='state-key-value-input'>
            {entries.map((entry, index) => (
                <Box
                    key={stableKeys[index]}
                    sx={{
                        p: 2,
                        mt: 1,
                        mb: 1,
                        border: 1,
                        borderColor: theme.palette.divider,
                        borderRadius: 2,
                        position: 'relative'
                    }}
                >
                    <IconButton
                        title='Remove'
                        onClick={() => handleRemove(index)}
                        disabled={disabled}
                        sx={{
                            position: 'absolute',
                            height: 30,
                            width: 30,
                            right: 8,